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

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

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

– append/appendTo – вставка элемента в конец дерева родителя;

– prepend/prependTo – вставка элемента в начало дерева родителя;

– clone – копирование элемента;

– text/html – получение либо изменение содержимого элемента;

– on – привязывание обработчика события. Часто используются такие события, как click, change, submit, mouseover, mouseout;

– ajax – выполнение Ajax запроса. Например, следующий код выведет в консоль браузера данные, полученные после POST запроса по адресу some/url с некоторыми данными info.

jQuery.ajax({

url: ‘some/url’,

method: ‘POST’,

data: {info: ‘Info’}

}).

done(function(data) {

console.log(data);

});

Помимо большого числа встроенных функций, jQuery поддерживает дополнительные плагины. В проекте были использованы следующие расширения jQuery:

– Cycle – «карусель» элементов;

– Fancybox – показ изображений во всплывающем окне с возможностью объединения картинок в галереи;

– Flowplayer – видеоплеер, которые также имеет поддержку старых браузеров, не имеющих поддержку html тэга video;

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

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

– owlCarousel – слайдер изображений;

– Placeholder – реализация нового HTML5 атрибута placeholder для старых браузеров;

– Scrollbar – замена стандартной полосы прокрутки html блоков;

– jQuery Timepicker – виджет выбора даты.

Принцип использования плагинов схож с применением стандартных функций. Например, для создания слайдера используется следующий код

var owl = $('.session-list .list');

owl.owlCarousel({'items': 3, 'slideBy': 3});

Здесь owl – массив элементов в списке, owlCarousel – метод, который создаёт слайдер из элементов, items и slideBy – некоторые параметры метода. В данном случае items – количество одновременно выводимых элементов на странице, slideBy – количество элементов, которые меняется пр одном событии прокрутки слайдера.

3.2 Реализация дополнительного функционала web-портала и

установка модулей

3.2.1 Шаблоны модулей Drupal

Помимо установки дополнительных модулей и их настройки через административную панель, второй этап включает в себя создание основных шаблонов модулей Drupal.

Все шаблоны должны быть размещены внутри директории темы сайта. Темы сайта помещаются в папку sites/all/themes. Внутри обязательно должен находится файл описания темы с расширением info.

Например, содержимое файла с описанием темы limonad:

name = Limonad

package = Core

version = VERSION

core = 7.x

stylesheets[all][] = style.css

scripts[] = js/scripts.js

regions[content] = Content

regions[help] = Help

regions[page_top] = Page top

regions[page_bottom] = Page bottom

regions[footer] = Footer

regions[header] = Header

regions[under-content] = Under Content

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

После создания папки темы и информационного файла, на сайте появится возможность выбрать данную тему по умолчанию.

Дальнейшая разработка заключается в переопределении шаблонов модулей. Так основной модуль System содержит шаблоны html и page. Html содержит в себе структуру страница вне корневого тэга body, тогда как в page определяется содержимое страницы внутри данного тэга. В page указывается расположение основных областей, определённых в info файле темы. Например, код <?php print render($page['content']); ?> говорит о том, что в данном месте необходимо вывести блоки, прикреплённые к области Content.

Блоки в Drupal – HTML содержимое генерируемое модулем, либо созданное администратором через административную страницу сайта. Блоки могут располагаться в любой из областей сайта и иметь собственные настройки, зависящие от модуля. По умолчанию в Drupal имеются такие блоки как, меню, форма авторизации, ссылки на создание контента и другие (рисунок 12).

Кроме системных шаблонов, значительную роль играют шаблоны модуля Node. Для каждого типа материала можно определить собственный шаблон. При этом название файла должно иметь следующий вид – node--type.tpl.php, где type – машинное имя типа материала, определяемое администратором. Например, шаблон страницы, на которой отображается информация о фильме имеет название node--movie.tpl.php.

Внутри шаблона программисту доступен php массив $content, содержащий весь контент материала в готовом для отображения виде, а также объект $node, который представляет из себя совокупность всех полей материала.

Помимо основных шаблонов модулей, в теме имеется возможность определения файла template.php, в котором программисту доступна некоторая часть API Drupal. Тем не менее, для более гибкой настройки данного файла бывает недостаточно. В таком случае необходимо разработать собственный модуль.

Рисунок 12 – Настройка расположения блоков

Для сайта «Лимонад» было разработано две темы. Одна из них является мобильной и включает в себя меньший функционал в сравнении с настольной версией. Переключение между темами происходит при помощи модуля Mobile Switch.

3.2.2 Основные настройки Drupal

Основные настройки сайта на CMS Drupal находятся на странице admin, доступ к которой по умолчанию имеет только администратор сайта (рисунок 13).

Разделы административной части сайта:

– Содержимое:

– списки всех материалов сайта с возможностью фильтрации по различным свойствам;

– создание, изменение и удаление материалов, web-форм и комментариев сайта.

– Структура:

– настройка «хлебных крошек» (модуль Custom breadcrumbs);

– настройка условий проверки полей;

– создание, удаление и изменение блоков и меню;

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

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

– Оформление:

– переключение темы сайта;

– изменение настроек темы.

– Пользователи:

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

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

– Модули:

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

– Конфигурация:

– настройка языков сайта;

– настройка полей пользователей;

– стили генерации изображений;

– конфигурация параметров производительности;

– изменение информации о сайте;

– настройка переадресации;

– создание и изменение шаблонов URL;

– и другие настройки.

– Отчёты:

– журналы событий на сайте;

– журналы ошибок.

– Справка:

– помощь по настройке модулей.

Рисунок 13 – Главная страница административной панели

Помимо основной страницы административной панели, доступ к выше упомянутым разделам можно получить через панель с меню в верхней части экрана, реализованной с помощью модуля Administration menu.

Весь процесс второго этапа можно описать в виде последовательности следующих шагов.

1. Установка CMS и модулей

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

Все модули можно установить вручную, просто загрузив папку с содержимым расширения в директорию sites/all/modules сайта, либо через административно часть сайта указав ссылку на архив в формате tar.gz, который также должен содержать файлы модуля (рисунок 14).

Рисунок 14 – Установка модуля

2. Настройка типов материалов

На данном шаге происходит определения основных типов материалов сайта и их полей (рисунок 15). Так сайт «Лимонад» имеет следующую структуру материалов:

– Баннер:

– Изображение (изображение);

– Ссылка (текст).

– Зал:

– Размер киноэкрана (текст);

– Технологии (текст);

– Ряд (коллекция полей);

– Фото (изображение);

– UCS ID (число);

– Нумерация мест (список).

– Новость:

– Изображение анонса (изображение);

– Раздел (список).

– Опрос;

– Страница:

– Изображение (изображение).

– Фильм:

– Формат (текст);

– Продолжительность (число);

– Жанр (список);

– Возрастные ограничения (текст);

– Страна (текст);

– Год выпуска (число);

– В ролях (текст);

– Постер (изображение);

– Рейтинг (число);

– Трейлер (текст);

– Дата (дата);

– Сеансы (коллекция полей);

– UCS ID (число);

– Kinopoisk ID (число);

– Позиция в рейтинге (число).

Рисунок 15 – Страница настройки полей фильма

3. Настройка вывода материалов

Данный шаг включает в себя создание шаблонов модулей Drupal для определения структуры отображения содержимого сайта, а также установку и настройку модуля Views (рисунок 16).

В свою очередь настройка представления включает в себя:

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

– конфигурацию полей для отображения;

– выбор критериев фильтрации;

– настройку сортировки;

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

– настройку постраничной навигации;

– в случае страницы указание url.

Кроме этого сюда входит настройка расположения блоков и меню сайта.

Рисунок 16 – Список представлений сайта

4. Настройка пользователей

На этом этапе настраиваются основные поля пользователей:

– Ф.И.О.;

– пол;

– телефон;

– дата рождения;

– рейтинг;

– номер карты R-Keeper.

Помимо этого, определяются параметры регистрации (рисунок 17), создаются роли и для этих ролей устанавливаются определённые права (рисунок 18). «Лимонад» имеет стандартный набор ролей: анонимный пользователь, зарегистрированный пользователь, менеджер, администратор.

Рисунок 17 – Настройка регистрации

Рисунок 18 – Настройка прав пользователя

5. Дополнительные настройки

Сюда входит:

– определение мобильной темы сайта;

– настройка основных директорий файловой системы (папки для кэша и временных файлов), а также настройка транслитерации имён файлов;

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

– настройка шаблонов автоматической генерации ссылок на материалы;

– настройка CAPTCHA изображения для форм (рисунок 20);

– настройка форматов текста;

– определение параметров производительности и кэша системы (рисунок 21);

– изменение языковых и региональных параметров.

Рисунок 19 – Изменение стиля изображения зала

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

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