Доступ к DOM-модели происходит следующим путем с помощью конструкции $(‘.имя класса’) или $(‘.имя идентификатора’). Следует отметить, что обращение к объектам происходит аналогично доступу к ним в каскадных таблицах стилей [32].

Изменение CSS-свойств модели будет происходить посредствам метода animate().

Метод появился в jQuery 1.0. Метод .animate() позволяет создавать эффекты анимации для любых числовых свойств CSS. Единственным обязательным параметром является объект со свойствами CSS. Этот объект похож на такой же объект, что передается в метод .css(), за исключением того, что набор свойств несколько ограничен [33].

Все анимируемые свойства должны задаваться в виде отдельного числового значения (за исключением свойств, описанных ниже); нечисловые свойства не могут быть анимированы с использованием базового функционала jQuery. (Например, свойства width, height или left могут быть анимированы, но свойство background-color не может. Существуют отдельные плагины для анимации таких свойств, как color, background-color, border-color). Значения свойств без единиц измерения трактуются в виде количества пикселей. Единицы измерения em и % могут указываться, только в тех случаях, когда это применимо [34].

Сокращенные свойства CSS (например, margin, background, border) не поддерживаются.

В дополнение к числовым значениям каждое свойство может быть задано в виде строки 'show', 'hide' или 'toggle'. Эти ключевые слова позволяют производить анимацию со скрытием и отображением элемента, учитывая исходное значение свойства display.

Значения анимируемых свойств также могут быть относительными. Если перед числовым значением добавить последовательность символов += или -=, то конечное значение свойства будет вычислено добавлением или вычитанием указанного числа из текущего значения свойства.

Длительность указывается в миллисекундах; чем больше значение, тем медленнее анимация. Также допустимы строковые значение 'fast' и 'slow', которые соответствуют длительности 200 и 600 миллисекунд.

Если указана функция обратного вызова (callback function), то она выполняется сразу после завершения анимации. Это может быть полезно для последовательного запуска нескольких анимаций. В эту функцию обратного вызова не передаются какие-либо аргументы, но переменная this содержит ссылку на элемент DOM, над которым выполняется анимация. Если анимируется несколько элементов одновременно, важно понимать, что функция обратного вызова выполнится один раз после завершения анимации каждого элемента, а не всей анимации в целом.

2.5 Разработка базы данных

Для разработки базы данных понадобится СУБД MySQL.

В базе данных будут храниться данные о регистрации в Международный клуб, данные о вопросах директору института (форма обратной связи), данные о сотрудниках, пользователях системы, а так же данные о блогах и новостях.

2.5.1 Нормализация базы данных

Нормальная форма – свойство отношения в реляционной модели данных, характеризующее его с точки зрения избыточности, потенциально приводящей к логически ошибочным результатам выборки или изменения данных. Нормальная форма определяется как совокупность требований, которым должно удовлетворять отношение [35].

Процесс преобразования отношений базы данных к виду, отвечающему нормальным формам, называется нормализацией. Нормализация предназначена для приведения структуры БД к виду, обеспечивающему минимальную логическую избыточность, и не имеет целью уменьшение или увеличение производительности работы или физического объёма базы данных

Нормализация таблиц будет производиться до 1 нормальной формы (где это возможно) [36].

Переменная отношения находится в первой нормальной форме (1НФ) тогда и только тогда, когда в любом допустимом значении отношения каждый его кортеж содержит только одно значение для каждого из атрибутов.

2.5.2 Реализация базы данных в СУБД MySQL

После нормализации полученные таблицы будут созданы в СУБД MySQL.

Для взаимодействия с СУБД использовано web-приложение phpMyAdmin. С помощью данного приложения можно создать реляционную базу данных.

Необходимо создать и назвать базу данных, затем поочередно создать каждую таблицу.

2.6 Разработка серверной части

Серверная часть – ядро проектируемой системы.

Основная задача серверной части сайта или backend  – реализовывать сохранность и непрерывную доступность данных на сайте. Серверная часть позволяет пользователю получить доступ к данным, которые хранятся на сервере, используя интерфейс. То есть, когда посетитель сайта хочет перейти на другую страницу, например, нажав на ссылку, этот запрос сначала обрабатывается на сервере, происходит интерпретация сценариев, то есть программных кодов, которые сообщают серверу, что нужно сделать в ответ на данный запрос, а затем открывается новая автоматически сформированная web-страница.

2.6.1 Принцип действия

Как говорилось ранее, ядро системы написано на серверном языке PHP.

Следует описать принцип работы проектируемой системы:

– имеется единая точка входа (сценарий index.php);

– в сценарии index.php описана логика создания экземпляров классов отображения (определяет, при каких условиях экземпляр какого класса создавать);

– при переходе по ссылкам создается экземпляр соответствующего класса, который формирует отображение (генерирует страницу);

– для каждой страницы создан подобный класс;

– все классы наследованы от суперкласса, который является ядром системы, т.к. в нем описаны все необходимые для отображения методы.

Диаграмма вариантов использования представлена на рисунке 5.

Рисунок 5 – Диаграмма вариантов использования

Алгоритм работы системы следующий:

– пользователь, попадает в единую точку входа (сценарий index.php);

– щелкая любую гиперссылку пользователь создает экземпляр соответствующего класса, осуществляющего запрос к базе данных (по надобности) и методами, описанными для данного класса, а так же методами, наследованными от суперкласса отображающий страницу (генерация HTML-кода);

– сгенерированная страница отображается в браузере.

2.6.2 Работа с базами данных

Работа с отображением новостей, блогов, заявок или вопросов происходит по следующему алгоритму:

– генерируется тело, куда происходит отображение информации;

– создается запрос на выборку из базы данных;

– создаются переменные, которые приравниваются к полученным из базы данных данным;

– генерируется HTML-код вместе с полученными данными.

Работа с формами (заявки на регистрацию, вопросы) происходит по следующему алгоритму:

– пользователь отправляет заполненную форму;

– если все необходимые поля заполнены, вызывается функция обработки и идет соответствующий запрос в базу данных, иначе выход из приложения;

– перенаправление пользователя на главную страницу.

Разберем метод обработки данных более подробно:

– создаются переменные аналогичные именам полей формы;

– из суперглобального массива POST данные извлекаются и переменные приравниваются к ним;

– создается и выполняется запрос на запись в базу данных созданных переменных.

Модификация записей должна производиться по следующему алгоритму:

– при нажатии на заголовок новости или блога, который необходимо отредактировать, необходимо запустить метод изменения записи;

– запуск метода производится с помощью переданных параметров с идентификатором записи, которую следует изменить (параметры автоматически записываются в гиперссылку при выборке и генерации);

– как только из базы данных получена информация, она записывается в значения полей формы (поля генерируются вместе с остальным HTML-кодом с уже заданными значениями);

– полученная форма с заполненными полями с текущими значениями изменяется (по надобности), затем после отправки данных выполняется проверка на заполнение необходимых полей, далее выполняется запрос в базу данных на изменение текущей записи в таблице.

Удаление производится по следующему алгоритму:

– при генерации html-кода выборки из базы данных в гиперссылку с надписью «удалить» записываются параметры данной записи – номер ее идентификатора и название класса, экземпляр которого должен быть вызван;

– далее полученный параметр извлекается из суперглобального массива GET и выполняется запрос на удаление записи из базы данных с идентификатором только что полученной переменной.

Авторизацию следует реализовать с помощью сессий.

Сессии являются простым способом хранения информации для отдельных пользователей с уникальным идентификатором сессии. Это может использоваться для сохранения состояния между запросами страниц. Идентификаторы сессий обычно отправляются браузеру через сессионный cookie и используются для получения имеющихся данных сессии. Отсутствие идентификатора сессии или сессионного cookie сообщает PHP о том, что необходимо создать новую сессию и сгенерировать новый идентификатор сессии.

Сессии используют простую технологию. Когда сессия создана, PHP будет либо получать существующую сессию, используя переданный идентификатор (обычно из сессионного cookie) или, если ничего не передавалось, будет создана новая сессия. PHP заполнит суперглобальную переменную $_SESSION сессионной информацией после того, как будет запущена сессия. Когда PHP завершает работу, он автоматически сериализует содержимое суперглобальной переменной $_SESSION и отправит для сохранения, используя сессионный обработчик для записи сессии.

По умолчанию PHP использует внутренний обработчик files для сохранения сессий, который установлен в INI-переменной session.save_handler. Этот обработчик сохраняет данные на сервере в директории, указанной в конфигурационной директиве session.save_path.

Сессии могут запускаться вручную с помощью функции session_start(). Если директива session.auto_start установлена в 1, сессия автоматически запустится, в начале запроса.

Сессия обычно завершает свою работу, когда PHP заканчивает исполнять скрипт, но может быть завершена и вручную с помощью функции session_write_close().

Авторизация будет происходить по следующему алгоритму:

– заполнение форм логина и пароля;

– отправка данных методом POST;

– извлечение данных из суперглобального массива POST;

– выполнение запроса на выборку из базы данных всех записей, где поле логина и пароля совпадают с полученными от пользователя данными;

– если результат выборки равен 1, то создается сессия и выполняется вход в систему, иначе, ошибка входа в систему;

Выход из системы производится следующим образом:

– конец сессии;

– удаление сессии;

– удаление cookie файла.

3 Реализация Web-сайта по техническому заданию

3.1 Дизайн страниц

Дизайн страниц предполагает, как расположение элементов на странице, так и цветовую палитру элементов. Дизайн web-сайта так же предполагает единообразие страниц.

Выбор палитры цветов для сайта так же является важной составляющей.

Плоский дизайн (англ. flat design) – минималистичный подход к дизайну объектов, который подчеркивает удобство использования, он в большей степени ориентирован на конечного пользователя[37].

Плоский дизайн (см. рисунок 8) начал развиваться в противовес концепции скевоформизма и выступал против методов «реальной» визуализации объектов в пользу более упрощенных и эстетически простых решений [38].

Скевоморфизм – объект или элемент его дизайна, выполненный как имитация другого объекта или материала. Данное направление в дизайне стремиться воплотить реальный внешний вид объектов с помощью реалистичных текстур, теней, градиентов [39].

Пример – мобильное приложение «Блокнот» (рисунок 6), в котором записи можно вести на пролинованных страницах с фактурой бумаги [40].

Рисунок 6 – Пример скевоморфизма

Рисунок 8 – Пример flat-дизайна

В качестве основного цвета выбран цвет #e74c3c (теракотовый). Данный цвет используется как основной для выделения особенно важных вещей: например, кнопка «Читать далее» или каких-либо заголовков статьи.

Данный цвет выбран потому, что выделенные данным цветом элементы или слова прекрасно сочетаются как со светлым, так и с темным фоном.

Кроме того, данный цвет является одним из набора цветов так называемого flat-дизайна (или «плоского» дизайна), который разработан компанией Google и ставший сверхпопулярным как в графическом, так и в видео и web-дизайне.

Кроме того, использован другой цвет, более темный, для других важных, но требующих выделения элементов. Данный цвет (#34495e) используется для таких элементов, как навигация и подобных ему. Для элементов данного типа не требуется привлечь внимание пользователя с первых секунд его пребывания на сайте, а наоборот, быть незаметными до момента, когда данный элемент понадобится. Данный цвет так же является цветом из набора цветов flat-дизайна.

Так же для отдельных элементов выбраны цвета из того же набора, которые используются единожды, однако должны привлечь внимание (блог студента за границей, Международный клуб ДВГУПС). Данные цвета – #9b59b6 и #f1c40f.