пз (1218617), страница 3

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 3)

Продолжение таблицы 1

Окончание таблицы 1

Через административную панель интернет проекта, можно выполнять следующие действия:

– управлять структурой и содержанием сайта;

– редактировать тексты в HTML-редакторе;

– публиковать новости, пресс-релизы;

– распределять права доступа групп пользователей;

– управлять показами рекламы на сайте;

– анализировать статистику посещений и эффективность работы сайта;

– управлять отзывами;

– поддерживать списки рассылки;

– проводить опросы посетителей сайта.

В ходе разработки от некоторого функционала, изначально упомянутого в ТЗ, было решено отказаться.

2.2 Проектирование шаблона страниц

Согласно ТЗ, страницы web-портала имеют стандартную на сегодняшний день структуру (рисунки 5 – 8):

– верхняя часть страницы – «шапка» (header):

– логотип;

– главное меню;

– строка поиска;

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

– контактная информация.

– основная часть страницы:

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

– заголовок страницы;

– основное содержимое страницы.

– нижняя часть страницы – «подвал» (footer):

– вторичное меню;

– контакты;

– копирайт;

– сквозная ссылка на сайт разработчика.

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

Рисунок 5 – Основная структура сайта

Рисунок 6 – Структура страницы фильма

Рисунок 7 – Структура страницы зала.

Рисунок 8 – Структура личного кабинета.

2.3 Проектирование web-портала

2.3.1 Модули ядра

Работа сайта, основанного на CMS Drupal, строится на функционале модулей и их взаимодействии. Основным модулями, входящими в ядро Drupal, являются:

– Node – создание материалов сайта. Модуль позволяет определять различные типы материалов;

– Field – прикрепление полей к различным объектам CMS (пользователи, материалы). По умолчанию можно добавлять поля типа текст, число, список и файл, однако данный функционал без проблем расширяется за счёт сторонних модулей;

– Comment – добавление комментариев к материалам;

– Menu – создание меню сайта с поддержкой многоуровневой вложенности;

– Path –создание чистых ссылок для объектов CMS;

– Search – реализация поиска;

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

– User – позволяет создавать пользователей, определять роли и права.

2.3.2 Модули сообщества Drupal

Модуль Views

Одним из основных сторонних модулей является модуль Views. Данное решение позволяет выводить пользовательские материалы в необходимом виде. Настройка представлений происходит через графический интерфейс административной панели (рисунок 9). В ходе конфигурации можно выбрать кол-во объектов, необходимые поля материала и их порядок, сортировку материалов, а также критерии фильтрации.

Рисунок 9 – Настройка представления для вывода рейтинга фильмов

В тех случаях, когда стандартных настроек недостаточно, Views позволяет переопределить стандартный шаблон для более гибкой стилизации.

Модуль Webform

Еще одним важным модулем является Webform. Расширение позволяет создавать HTML формы при помощи простого интерфейса в административном разделе сайта (рисунок 10). Доступно множество видов полей web-форм, а также настройка уведомлений, которые будут приходить администратору на почту при успешном заполнении формы. Кроме этого имеется возможность просмотра результатов в панели управления сайтом.

Рисунок 10 – Создание формы обратной связи

Модуль Pathauto

ЧПУ («Человеко-понятный урл») – адрес страницы, отображающей структуру сайта и название элемента, написанный латинским алфавитом. ЧПУ являются очень важным аспектом при продвижении сайта в поисковых системах.

Ядро Drupal имеет в своём составе модуль Path, которые позволяет задать ЧПУ для каждого объекта сайта. Pathauto расширяет данный функционал и позволяет генерировать ЧПУ автоматически при создании объекта. Для каждого типа материала или словаря терминов может быть создан свой собственный шаблон генерации, который позволяет использовать множество шаблонов автоматической замены.

Ниже представлен список менее важных модулей:

– Custom breadcrumbs – гибкая настройка «хлебных крошек»;

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

– CKEditor – WYSIWYG-редактор для удобного изменения контента;

– uLogin – авторизация на сайте через социальные сети;

– Field Collection – позволяет объединить поля материала, т.е. создать коллекцию полей;

– Field Validation – настройка проверки данных, вводимых в поля (например, проверка формата E-Mail адреса);

– Devel – дополнительные инструменты разработки, позволяющие отображать необходимые для отладки данные.

Кроме этого на сайт было установлено ещё несколько десятков менее значимых модулей.

2.3.3 Взаимодействие модулей Drupal

Взаимодействие модулей, описанных выше, можно представить следующим образом (рисунок 11):

– вся основная информация представлена на сайте в виде материалов (модуль Node);

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

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

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

– каждый материал имеет свой URL (модуль Path), который может создаваться автоматически (модуль Pathauto);

– также материалы могут иметь комментарии пользователей (модуль Comment);

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

– список содержимого может быть показан в виде блока в специальных зонах страницы (модуль Block);

– меню сайта также могут быть реализованы в виде данных блоков (модуль Menu).

Рисунок 11 – Схема взаимодействия основных модулей

3 РАЗРАБОТКА WEB-ПОРТАЛА

Весь процесс разработки сайта можно разделить на 3 этапа:

1. HTML/CSS вёрстка основных страниц, а также программирование на JavaScript;

2. установка готовых модулей и настройка сайта;

3. программирование дополнительного функционала в виде модулей.

Второй и третий этап включают внедрение программного кода в готовую вёрстку. Такой подход позволяет сконцентрироваться на одной задаче и не принуждает постоянно переключаться между написанием HTML/CSS и PHP кода.

3.1 Разработка внешнего вида страниц

На этапе вёрстки было создано визуальное представление следующих страниц:

– главная страница (в формате для широких мониторов (рисунок А.1) и планшетов);

– личный кабинет (рисунок А.2);

– описание фильма (рисунок А.3);

– контакты;

– новости и акции;

– расписание сеансов;

– рейтинги пользователей и фильмов;

– описание залов (рисунок А.4).

Помимо страниц, на данном этапе были свёрстаны основные формы сайта.

Вся вёрстка выполнена с использованием HTML5 и CSS3. Для реализации динамического изменения размеров страницы и внутренних элементов использовались т.н. медиа запросы (media queries). Такой вид вёрстки называется адаптивной. Например, код

@media (max-width:1125px) { /* CSS код */ }

позволит задать правила, которые будут применятся только если ширина окна не превышает 1125 пикселей.

Все пользовательские сценарии были написаны с помощью библиотеки jQuery. Данная библиотека включает в себя множество вспомогательных функций, которые позволяют существенно упростить работу с деревом элементов. Выбор элементов DOM дерева происходит с помощью стандартных CSS селекторов. Например, jQuery(‘div.class, #id’) вернёт массив всех элементов div на странице, имеющих класс class и элемент с идентификатором id [24]. Наиболее часто используемыми методами jQuery являются:

– hide/show/toggle – скрытие, показ и переключение состояний видимости элемента;

– remove – удаление элемента;

Характеристики

Список файлов ВКР