Разработка информационного web-сайта

Разработка информационного web-сайта

1. Описание основных используемых технологий и языков программирования

1.1 Общие сведения

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

Для разработки web-приложения были использованы следующие программные средства:

— для написания программного кода на стороне web-сервера: язык PHP;

— для реализации доступа к страницам web-приложения посредством протокола HTTP: web-сервер Apache;

— для хранения и обработки данных: СУБД MySQL;

— для реализации асинхронных запросов к web-серверу: технология AJAX;

— для написания программного кода на стороне клиента: язык JavaScript и библиотека jQuery;

— для стилизации внешнего вида web-страниц: таблица стилей CSS.

1.2 Язык программирования PHP

PHP (PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста») — язык для написания сценариев, исполняемых на компьютере web-приложения посредством интерпретации исходного кода. Основное предназначение языка PHP — это выполнение на сервере сценариев, создающих динамические web-страницы.

PHP поддерживает широкие объектно-ориентированные возможности, полная поддержка которых была введена в пятой версии языка. Также в пятой версии языка реализован механизм обработки исключений.

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

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

1.3 Web-сервер Apache

Apache — свободный web-сервер, наиболее часто используемый в Unix-подобных операционных системах. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Apache предоставляет удобные средства конфигурации как на уровне всего web-приложения (httpd.conf), так и на уровне директории (.htaccess). Указанная выше особенность позволяет удобно управлять действиями web-сервера при обработке запроса к тем или иным страницам и разделам web-приложения.

Web-сервер Apache позволяет включить дополнительный модуль обработки URL — mod_rewrite. Данный модуль является средством преобразования URL, который указан в запросе к web-приложению, из одной формы в другую согласно заранее написанным правилам (RewriteRule). Для написания правил обработки и преобразования URL используются регулярные выражения (Regular expressions). Таким образом, можно создавать псевдонимы имен web-страниц, делая внешний вид URL, которые использует web-клиент при запросах к web-серверу, более короткими, читабельными и запоминающимися.

В процессе разработки web-приложения и в данный момент, когда web-приложение функционирует и доступно пользователям, Web-сервер Apache используется мной для обеспечения возможности доступа web-клиентов к ресурсам web-приложения посредством протокола HTTP, координации работы web-приложения, ограничения доступа к некоторым разделам и страницам web-приложения, обработки и преобразования URL, указанных в запросах web-клиентов.

1.4 СУБД MySQL

MySQL представляет собой систему управления реляционными базами данных с поддержкой языка SQL. СУБД MySQL предоставляет все основные средства для хранения, обработки и изменения данных. В СУБД MySQL поддерживается возможность выбора типа таблиц. Основными типами являются MyISAM и InnoDB. Таблицы с типом InnoDB поддерживают транзакции на уровне отдельных записей. MySQL имеет API для языка PHP (и многих других языков), а также обеспечивает поддержку для ODBC посредством ODBC-драйвера MyODBC.

В процессе разработки web-приложения и в данный момент, когда web-приложение функционирует и доступно пользователям, СУБД MySQL используется мной для хранения данных, необходимых для стабильного функционирования web-приложения.

1.5 Язык программирования JavaScript

JavaScript — объектно-ориентированный язык программирования для написания сценариев. Чаще всего JavaScript используется для написания сценариев работы с web-страницами, отображаемыми web-браузером. Web-браузер интерпретирует код сценария языка JavaScript, и на основе описанных в сценарии действий производит манипуляции с разметкой web-страницы. Таким образом, посредством языка JavaScript реализуется возможность программирования на стороне клиента. Язык JavaScript предоставляет возможность доступа к элементам разметки web-страницы посредством объектов. При создании сценариев на языке JavaScript приходится сталкиваться с трудностями, связанными с тем, что различные web-браузеры могут по-разному интерпретировать эти сценарии. Самые серьезные трудности возникают, если какой-либо из браузеров не поддерживает тот или иной объект, метод или свойство. Наиболее практичным и современным способом решения данной проблемы является использование свободной библиотеки jQuery. Данная библиотека реализована на языке JavaScript и расширяет возможности данного языка, нивелируя различия между браузерами.

В процессе разработки web-приложения язык JavaScript и библиотека jQuery были использованы мной для создания сценариев работы с разметкой web-страниц и в процессе использования технологии AJAX.

1.6 Технология AJAX

AJAX (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — технология, посредством которой возможно осуществить асинхронный запрос к компьютеру web-приложения. Другими словами, это запрос, который не требует перезагрузки страницы web-клиентом.

Технология AJAX предоставляет возможность по какому-либо действию пользователя (например, нажатие на ссылку) не осуществлять запрос на полное получение web-страницы, а получать только нужную в данный момент часть web-страницы. Таким образом, снижается объем данных, передаваемых между компьютером web-приложения и компьютером пользователя, следовательно, снижается время, которое требуется на запрос и получение ответа. Кроме того, за счет того, что страница не перезагружается, у пользователя создается впечатление непрерывной работы с web-приложением.

Технология AJAX включает в себя следующие инструменты:

· язык JavaScript. Именно посредством данного языка возможно осуществить запрос к компьютеру web-приложения в асинхронном режиме;

· XML (eXtensible Markup Language — расширяемый язык разметки) — текстовый формат, предназначенный для хранения структурированных данных для обмена информацией между программами;

В процессе разработки web-приложения технология AJAX использовалась мной для «фоновой» загрузки с компьютера web-приложения web-клиентом частей страниц там, где не выгодно с точки зрения объема загружаемых данных и эстетичности работы web-приложения осуществлять полную загрузку web-страницы в ответ на действия пользователя.

1.7 Таблица стилей CSS

CSS (Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

В процессе разработки web-приложения каскадные таблицы стилей CSS использовались мной для управления внешним видом страниц web-приложения и передачи таблиц стилей web-клиентам пользователей для правильного отображения и поддержания дизайна web-приложения.

1.8 Общая схема работы web-приложения

Рисунок 1 — Общая схема работы web-приложения

На рисунке 1 изображена общая схема запроса web-клиентом и получения страницы с компьютера web-приложения.

Для того чтобы получить страницу web-приложения, web-клиент отправляет HTTP — запрос к компьютеру web-приложения, который обрабатывается web-сервером Apache. Web-клиент может отправить как обычный запрос, так и асинхронный запрос к web-серверу с помощью технологии AJAX. Web-сервер Apache обрабатывает запрос, ищет требуемый web-клиентом ресурс в файловой системе компьютера web-приложения и, в зависимости от типа ресурса и конфигурации самого web-сервера, сразу формирует ответ web-клиенту, либо отправляет ресурс на обработку интерпретатором PHP. Интерпретатор PHP выполняет исходный код, содержащийся в переданном ему web-сервером ресурсе, при необходимости с помощью API обращается к СУБД MySQL, получая или изменяя данные, и возвращает сформированную страницу обратно web-серверу Apache для дальнейшей отправки web-клиенту.

В принятом web-клиентом коде может содержаться код на языке JavaScript и ссылки на каскадные таблицы стилей CSS. В этом случае каскадные таблицы стилей применяются web-клиентом к разметке полученной страницы, а код JavaScript исполняется, внося требуемые изменения в страницу на стороне клиента, либо формируя новый запрос к компьютеру web-приложения с помощью технологии AJAX.

2. Описание системы «1С — Битрикс: Управление сайтом»

2.1 Общие сведения

Система «1C — Битрикс: Управление сайтом» представляет собой программное ядро для всестороннего управления web-проектами любой сложности.

Система «1С — Битрикс: Управление сайтом» включает в себя API для построения web-приложения и CMS для управления созданным web-приложением и его данными.

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

В состав «1С-Битрикс: Управление сайтом» входит 28 модулей. Продукт позволяет управлять информационным наполнением сайта, структурой, форумами, рекламой, рассылкой, распределять права между группами пользователей, анализировать статистику посещений, оценивать эффективность рекламных кампаний и многое другое.

2.2 Преимущества и недостатки системы

Замечание. Далее вместо словосочетания система «1С — Битрикс: Управление сайтом» будет для краткости использоваться слово система.

На данный момент система «1С — Битрикс: Управление сайтом» является одной из ведущих CMS, используемых для разработки web-проектов. Количество проектов, реализованных на базе системы «1С — Битрикс: Управление сайтом» составляет более чем 40 000.

Можно выделить следующие основные преимущества системы:

— Стабильность работы системы. Web-приложения, правильно разработанные на базе системы (под правильностью следует понимать следование рекомендациям по разработке системы, использование API системы), могут достаточно долго работать без специального обслуживания. В системе предусмотрена технология обновления (SiteUpdate), позволяющая постоянно следить за обновлениями системы.

— Безопасность системы. В состав системы входит модуль «Проактивная защита». Благодаря данному модулю система обеспечивает высокий уровень безопасности web-приложения.

— Удобный и понятный интерфейс.

— Универсальная среда разработки, наличие API системы. API системы обладает большим количеством классов и функций, позволяющих получить доступ ко всей функциональности модулей и построить web-приложение на базе работы модулей.

— Подробная документация. Документация по работе системы и по принципам построения web-приложения на базе системы доступна бесплатно и содержит в себе практически полное описание всех модулей системы, классов и методов API системы.

— Удобное представление данных web-приложения, хранящихся в базе данных. Данные web-приложения могут быть представлены в виде информационных блоков. Информационные блоки предоставляют возможность удобно (без навыков владения СУБД) добавлять данные в систему, управлять данными и просматривать данные. Наиболее удачным решением является возможность разбить записи базы данных на блоки и папки и добавлять к записям неограниченное количество свойств. В системе предусмотрены классы и методы API для доступа и управления элементами информационных блоков.

К недостаткам системы следует отнести невозможность выбора нужных модулей при покупке системы, т. е. существует несколько редакций, в каждой из которой находятся строго определенные модули, перемещать модули между редакциями и формировать список модулей «под себя» невозможно. Также следует указать, что при разработке web-приложения можно выделить ряд неточностей или недостатков работы API системы, в частности невозможность сортировки элементов или фильтрации элементов разных информационных блоков по свойствам с одинаковым кодом.

2.3 Целесообразность использования системы

Разработанное мной web-приложение в первую очередь обладает достаточно большим объемом данных сложной структуры. Поэтому для того, чтобы удобно и быстро администрировать данные, необходима гибкая система представления данных с четкой структурой и интуитивно понятным интерфейсом. Без использования системы пришлось бы создавать большое количество таблиц в базе данных, настраивать связи между ними, писать специальные сценарии для управления данными, возможно, создавать API. В системе же, как уже было написано выше, предусмотрена достаточно удобная система управления данными. Таким образом, удобное управление данными web-приложения определяет первую причину использования мной данной системы.

В системе предусмотрено API, состоящее из большого количества классов и функций. Использование протестированных и отлаженных функций обеспечивает безопасность и правильность работы фрагментов сценариев web-приложения. Ряд задач, достаточно часто требующих написания большого количества кода, с помощью API системы уже решен, и классы и функции, отвечающие за решение данных задач, готовы к использованию в сценариях web-приложения. Так как сценарии разработанного мной web-приложения должны работать быстро, стабильно и поддерживать безопасность web-приложения, наличие API системы определяет вторую причину использования мной данной системы.

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

2.4 Сравнение с другими системами

У системы «1С — Битрикс: Управление сайтом» существует большое количество конкурентов, в том числе предоставляющих возможность использования на бесплатной основе. Основным конкурентом «1С — Битрикс: Управление сайтом» является система UMI.CMS. В данной системе также предусмотрена возможность управления данными web-приложения (CMS) и API для разработки web-приложения. UMI. CMS также является модульной системой и поддерживает возможность выбора редакций.

В UMI. CMS присутствует ряд особенностей, которые отсутствуют в «1С — Битрикс: Управление сайтом», например, наличие корзины, в которую помещаются все удаленные страницы, новости и т. д. с возможностью последующего восстановления. Тем не менее, в UMI. CMS есть ряд существенных недостатков по сравнению с «1С — Битрикс: Управление сайтом», основным из которых является отсутствие модуля, обладающего функциональностью, схожей с функциональностью модуля «Информационные блоки». В UMI. CMS основным является понятие страницы как универсального носителя информации. Добавлять к страницам произвольные свойства оказывается достаточно затруднительной и нетривиальной задачей, при этом гибкость, которая достигается путем задания различных типов свойств в информационных блоках «1С — Битрикс», в UMI. CMS отсутствует. Также UMI. CMS проигрывает системе «1С — Битрикс: Управление сайтом» в реализации API системы. Как уже упоминалось выше, построенная на понятии страницы, UMI. CMS предоставляет достаточно небольшое количество классов и методов для построения web-приложения по сравнению с API системы «1С — Битрикс», не все классы и функции подробно описаны в документации, из-за чего при разработке приходится экспериментировать. В UMI. CMS отсутствует удобная реализация инкапсуляции программного кода, которая реализована в «1С — Битрикс: Управление сайтом» посредством компонентов. Вся функциональность реализована посредством модулей и макросов, как методов основного класса модуля, определяемого в основном сценарии модуля. Также преимуществом системы «1С — Битрикс: Управление сайтом» является удобная система шаблонов, позволяющая системе определять шаблон страниц web-приложения в зависимости от различных внешних условий, не прибегая к написанию дополнительного программного кода и разнообразие настроек web-приложения. В то же время в UMI. CMS система шаблонов реализована не настолько детально и гибко, а возможностей настроек web-приложения меньше, чем в системе «1С — Битрикс: Управление сайтом».

3. Описание API системы «1С — Битрикс: Управление сайтом»

3.1 Общие сведения

Программный интерфейс (API) системы состоит из набора классов и функций, обеспечивающих возможность в сценариях web-приложения использовать функциональность модулей системы. Таким образом, у каждого модуля имеется свой набор классов и функций для работы с системой. При разработке web-приложения использовались классы и функции следующих основных модулей:

— API модуля «Главный модуль»;

— API модуля «Информационные блоки»;

3.2 API модуля «Главный модуль»

В состав API модуля «Главный модуль» входит набор основных классов и функций для разработки web-приложения. Использование классов и функций данного модуля не требует дополнительных действий по включению модуля, все классы и функции доступны в сценариях web-приложения после одного из этапов загрузки страницы web-приложения.

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

Класс CMain.

CMain — главный класс страницы web-приложения. После одного из этапов по загрузке страницы в сценарии становится доступным инициализированный системой объект данного класса с именем $APPLICATION.

void ShowTitle (string property_code=" title", bool strip_tags = true)

Метод выводит заголовок страницы.

void SetTitle (string title)

Метод устанавливает заголовок страницы.

void ShowCSS (bool external = true, bool XhtmlStyle = true)

Метод выводит таблицу стилей CSS страницы.

void ShowMeta (string property_id = ««, string meta_name = false, bool XhtmlStyle = true)

Метод отображает свойство с id = property_id в виде мета-тега страницы (

).

void ShowProperty (string property_id = ««, mixed default_value = false)

Метод отображает свойство страницы с id=property_id, учитывая свойства раздела.

string GetCurPageParam (string add_params = ««, array remove_params = array (), bool get_index_page = false)

Метод возвращает адрес текущей страницы web-приложения, добавляя к списку параметров новые и (или) удаляя старые параметры.

mixed IncludeComponent (string componentName, string componentTemplate, array arParams=array (), object parentComponent=null, array arFunctionParams=array ())

Метод подключает компонент на странице. Возвращает код компонента.

Функции.

int AddToTimeStamp (array add, int timestamp = false)

Метод добавляет к дате в Unix-формате заданный интервал времени. Возвращает новую дату также в Unix-формате.

Класс CFile.

CFile — Класс для работы с файлами web-приложения.

array GetFileArray (int file_id)

Метод возвращает массив, содержащий описание файла (путь к файлу, имя файла, размер) с идентификатором file_id.

Класс CDBResult.

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

array GetNext (bool text_html=true, bool text_original = true)

Метод возвращает массив значений полей, приведенный в HTML-безопасный вид. Если достигнут конец результата выборки, метод вернет false.

void NavStart (int page_size=10, bool show_all=true, int page_number=false)

Метод разбивает результат выборки на страницы.

void NavPrint (string title, bool show_always=false, string text_css_class= «text», string template_path=false)

Метод выводит ссылки для постраничной навигации.

Класс CModule.

CModule — класс для работы с модулями.

bool IncludeModule (string module_id)

Метод проверяет установлен ли модуль module_id и если установлен, подключает его. Возвращает «true», если модуль установлен, иначе — «false».

Класс CBitrixComponent.

CBitrixComponent — класс для работы с компонентами web-приложения.

bool StartResultCache (int cacheTime, string additionalCacheID, string cachePath)

Метод поддержки внутреннего кэширования компонента. Если кэш действителен, метод отправляет на экран его содержимое. Если кэш недействителен, метод возвращает true, кэширование завершается и кэш сохраняется.

void AbortResultCache ()

Метод отменяет кэширование в компоненте.

bool ClearResultCache (string additionalCacheID, string cachePath)

Метод очищает кэш компонента. В случае успешного выполнения очистки возвращает true.

void IncludeComponentTemplate (string templatePage)

Метод инициирует и подключает шаблон компонента.

3.3 API модуля «Информационные блоки»

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

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

Класс СIBlock.

CIBlock — класс для работы с информационными блоками.

СDBResult GetList (array arOrder = array («SORT"=>"ASC), array arFilter)

Метод возвращает список информационных блоков по фильтру arFilter, отсортированный в порядке arOrder.

CDBResult GetByID (int ID)

Метод возвращает информационный блок по его ID.

Класс CIBlockElement.

CIBlockElement — основной класс модуля «Информационные блоки». Данный класс предоставляет набор методов для работы с элементами информационных блоков.

CIBlockResult GetList (array arOrder = array («SORT"=> «ASC»), array arFilter = array (), mixed arGroupBy = false, mixed arNavStartParams = false, array arSelectFields = array ())

Возвращает список элементов по фильтру arFilter, отсортированных в порядке arOrder. Элементы могут быть группированы по правилам, указанным в массиве arGroupBy, ограничены по количеству по правилам, указанным в массиве arNavStartParams. Могут быть выбраны только поля и свойства, указанные в массиве arSelectFields.

bool SetPropertyValueCode (int ELEMENT_ID, string PROPERTY_CODE, string PROPERTY_VALUE)

Метод устанавливает свойству с кодом, равным PROPERTY_CODE, элемента с ID, равным ELEMENT_ID, значение PROPERTY_VALUE.

Класс CIBlockSection.

CIBlockSection — класс для работы с разделами информационных блоков.

CIBlockResult GetList (array arOrder = array («SORT"=> «ASC»), array arFilter = array (), bool bIncCnt = false)

Метод возвращает список разделов информационных блоков, отсортированный в порядке arOrder и отфильтрованный по правилам, заданным в arFilter.

CIBlockResult GetNavChain (int IBLOCK_ID, int SECTION_ID)

Метод возвращает путь по дереву от корня до раздела SECTION_ID.

Класс CIBlockResult.

CIBlockResult — вспомогательный класс для работы с объектами результатов выборок, наследуется от класса CDBResult и содержит все его параметры и методы.

void SetUrlTemplates (string DetailUrl = ««, string SectionUrl = ««, string ListUrl = ««)

Метод устанавливает шаблоны путей для элементов, разделов и списка элементов вместо тех, которые указаны в настройках информационного блока.

CIBElement GetNextElement ()

Метод возвращает из выборки объект _CIBElement, и передвигает курсор на следующую запись.

Если достигнута последняя запись (или в результате нет записей), функция вернет false.

Класс _CIBElement.

CIBElement — вспомогательный класс для работы с объектами, которые возвращает CIBlockResult: GetNextElement.

array GetFields ()

Метод возвращает массив значений полей элемента.

array GetProperties (arOrder = array (), arFilter = array ())

Метод возвращает значения свойств текущего элемента информационного блока.

4. Формирование требований к сценариям работы web-приложения

4.1 Общие сведения

В системе «1С — Битрикс: Управление сайтом» функциональность web-приложения определяется функциональностью программных компонентов, которые разрабатываются в зависимости от требований заказчика к работе web-приложения. Как правило, заказчик предоставляет подробное словесное (не содержащее технических деталей) описание работы страниц web-приложения, которое должно быть обработано проектировщиком, и на основе которого должны быть выделены конкретные требования к работе web-приложения, определены основные сценарии и последовательность их вызова. При этом заказчик имеет возможность внести свои замечания в разрабатываемую программную модель на любом этапе и сделать вывод о том, что модель полностью его удовлетворяет, и имеет смысл переходить к следующему этапу непосредственной реализации спроектированной модели.

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

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

4.2 Список требований

В процессе анализа присланных заказчиком документов можно выделить следующий список требований к web-приложению:

— web-приложение должно выводить список всех игр для каждой из платформ;

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

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

— фильтр должен быть настраиваемым;

— web-приложение должно обеспечивать поиск игр по первой букве алфавита;

— web-приложение должно выводить список новых игр для каждой из платформ;

— web-приложение должно выводить список выходящих игр для каждой из платформ;

— должна быть возможность просматривать список игр за конкретный месяц;

— web-приложение должно выводить список игр в порядке убывания рейтинга для каждой из платформ;

— web-приложение должно выводить список 100 лучших игр для каждой из платформ;

— web-приложение должно обеспечивать возможность поиска по играм;

— web-приложение должно отображать список найденных игр для каждой из платформ;

— при вводе данных в поле поиска web-приложение должно выводить пользователю автоподсказки, т. е. игры, соответствующие по названию части введенной пользователем фразы;

— оценка игры должна считаться на основе оценок, указанных в обзорах к игре;

— web-приложение должно выводить детальную страницу игры;

— web-приложение должно выводить список обзоров к игре;

— обзоры должны делиться на русские и английские в зависимости от изданий-источников обзоров и сортироваться по оценке издания к игре и важности издания;

— web-приложение должно выводить список скриншотов к игре;

— web-приложение должно обеспечивать возможность создания и заполнения статических страниц;

— web-приложение должно выводить список лучших игр за конкретный год по каждой из платформ;

— web-приложение должно выводить информацию о разработчике игры;

— web-приложение должно выводить список игр за год для каждой из платформ.

На рисунке 2 приведены все требования к работе web-приложения и указана связь между отдельными требованиями. Следует заметить, что не все требования в дальнейшем будут представлять собой программные компоненты. Часть требований подразумевает конфигурацию системы, часть требований будет реализована в логике работы компонента, реализующего другие требования.

Рисунок 2 — список требований к сценариям работы web-приложения

5. Диаграмма информационных блоков

5.1 Общие сведения

При формировании информационных блоков независимо от того, как конкретно реализуется в системе хранение данных, следует сначала разработать модель данных, воспользовавшись диаграммой «Сущность — связь».

5.2 ER — диаграмма данных web-приложения

Проанализировав требования, можно выделить четыре основных сущности:

— сущность «Игра»

— сущность «Платформа»

— сущность «Обзор»

— сущность «Разработчик»

Сущность «Игра».

В состав сущности «Игра» можно включить следующие основные атрибуты:

Ключевым атрибутом сущности является атрибут «Код».

Сущность «Обзор».

В состав сущности «Обзор» входят следующие основные атрибуты:

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

Сущность «Разработчик».

В состав сущности «Разработчик» входят следующие основные атрибуты:

Ключевым атрибутом сущности является атрибут «Наименование».

Сущность «Платформа».

В состав сущности «Платформа» входят следующие основные атрибуты:

Ключевым атрибутом сущности является атрибут «Название».

5.3 Определение информационных блоков

После того, как сформирована ER-диаграмма, можно приступить к непосредственному определению информационных блоков, их полей и свойств. Наиболее простым решением данной задачи было бы создание для каждой из сущностей «Игра», «Разработчик», «Обзор», «Платформа» информационного блока и указания его полей и свойств.

Тем не менее, если проанализировать возможности, которые предоставляет система «1С — Битрикс: Управление сайтом» в модуле «Информационные блоки», можно сделать вывод, что наиболее удобно было бы сущности «Игра» и «Платформа» объединить в одном информационном блоке, сопоставив сущности «Игра» элемент информационного блока, сущности «Платформа» — раздел информационного блока. Взаимосвязь разделов и элементов информационного блока обеспечивает возможность реализации связи, предусмотренной между сущностями «Игра» и «Платформа». Причем, обеспечивается как обязательность связи, так и отношение «многие ко многим».

В итоге получаем первый информационный блок — «Игры». Часть атрибутов сущности «Игра» может быть представлена в виде полей информационного блока, часть — с помощью свойств. То же самое можно сказать и об атрибутах сущности «Платформа», только здесь будут использованы поля и свойства раздела информационного блока. В системе, как уже сказано выше, предусмотрен внутренний механизм связи между разделами и элементами информационных блоков, поэтому введения дополнительных идентификаторов при реализации связей между сущностями не предполагается. Среди свойств элементов информационного блока необходимо предусмотреть свойство, с помощью которого будет реализована связь с информационном блоком, реализующем сущность «Разработчик». Значением данного свойства будет наименование разработчика, при этом связь обязательна.

Для реализации сущности «Обзор» следует предусмотреть еще один информационный блок «Обзоры». Экземпляры сущности «Обзоры» реализуются в информационном блоке посредством элементов, атрибуты сущности — посредством полей и свойств элемента. Среди свойств следует предусмотреть поле, которое будет являться внешним ключом и обеспечивать связь информационным блоком «Игры». Это поле будет содержать идентификатор элемента информационного блока «Игры», причем у каждого элемента это поле должно быть заполнено (обязательность связи).

Для реализации сущности «Разработчик» следует предусмотреть информационный блок «Разработчики». Экземпляры сущности реализуются в информационном блоке посредством элементов, атрибуты сущности — посредством полей и свойств элементов. Среди свойств информационного блока следует предусмотреть поле, которое будет содержать в себе набор идентификаторов разделов информационного блока «Игры». Таким образом, реализуется связь с сущностью «Платформа».

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

6. Описание программных компонентов

6.1 Создание общей структуры страниц web-приложения

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

Для того чтобы составить правильную структуру web-приложения, следует определить, какие из требований в сценариях каких из web-страниц будут реализованы.

Далее рассмотрим подробно сформированные ранее требования и попробуем определить страницы web-приложения, ответственные за реализацию того или иного требования.

Web-приложение должно выводить список всех игр для каждой из платформ. Логично предположить, что для каждой из платформ следует предусмотреть страницу «Все игры», на которой будут выведен список всех игр, возможно фильтры и возможность выбора списка игр по алфавиту.

Web-приложение должно выводить список новых игр для каждой из платформ. Должна быть возможность просматривать список игр за конкретный месяц. Эти два требования могут быть реализованы на страницах «Все новые игры» и «Новые игры», причем на первой странице будут выведен весь постраничный список новых игр, а на второй будут выведены новые игры по конкретному месяцу с возможностью переключения месяцев.

Web-приложение должно выводить список выходящих игр для каждой из платформ. Должна быть возможность просматривать список игр за конкретный месяц. Данные требования реализуются аналогично предыдущим требованиям, страницы будут называться «График выхода» и «Весь график выхода».

Web-приложение должно выводить список игр в порядке убывания рейтинга для каждой из платформ. Для реализации данного требования следует предусмотреть страницу «Лучшие игры», на которой будет выведен список лучших игр с возможностью фильтрации. Согласно пожеланиям заказчика следует предусмотреть также переход с данной страницы на страницу «Все лучшие игры», где будет отображен постраничный список всех игр, начиная с игры с самым высоким рейтингом, также возможностью фильтрации.

Web-приложение должно выводить список 100 лучших игр для каждой из платформ. Для реализации данного требования следует предусмотреть страницу «100 лучших игр».

Web-приложение должно выводить детальную страницу игры. Для реализации данного требования следует предусмотреть страницу «Детальная страница игры». На этой же странице будет реализовано требование «web-приложение должно выводить список обзоров к игре», требование «обзоры должны делиться на русские и английские в зависимости от изданий — источников обзоров и сортироваться по оценке издания к игре и важности издания», и требование «web-приложение должно выводить список скриншотов к игре», т. к. обзоры является неотъемлемой частью игры, как и список скриншотов.

Web-приложение должно отображать список найденных игр для каждой из платформ. Для реализации данного требования стоит предусмотреть страницу «Результаты поиска по играм».

Web-приложение должно выводить список игр за год для каждой из платформ. Для реализации данного требования стоит предусмотреть страницу «Лучшие игры за год».

Web-приложение должно выводить информацию о разработчике игры. Для реализации данного требования стоит предусмотреть страницу «Страница разработчика игры».

Замечание. На данном и следующих рисунках данного раздела стрелки обозначают возможность переходов между страницами web-приложения.

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

6.2 Реализация структуры страниц web-приложения, физическая структура

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

Для того чтобы физическая структура была ясна и логически верно построена, каждой странице общей схемы страниц web-приложения поставим в соответствие папку файловой системы web-приложения, внутри которой будет расположен файл index. php, который будет определять сценарий работы страницы. Таким образом, согласно стандартным настройкам web-сервера, URL вида http://www.metagames.ru/index/new/ инициирует выполнение сценария index.php.

Соответствие папок общей и физической структуры, изображенной на рисунке 6, представлено ниже:

Таблица 1 — соответствие элементов общей и физической структуры web-приложения

Главная страница	index.php
Все игры	pc, xbox360, index (платформа)
Новые игры	платформа / new
Все новые игры	платформа / new / all
График выхода	платформа / new / upcoming
Весь график выхода	платформа / upcoming / all
Лучшие игры	платформа / top
Все лучшие игры	платформа / top / all
100 лучших игр	платформа / top100
Результаты поиска по играм	Search
Детальная страница игры	Detail
Страница разработчика игры	Developer
Лучшие игры за год	платформа / year_top

Если отобразить структуру в виде дерева папок и файлов, получим следующий вид:

корневая_директория

index.php

pc

new

index.php

all

index.php

upcoming

index.php

all

index.php

top

index.php

all

index.php

top₁₀₀

index.php

year_top

index.php

— Другие_платформы ;

search

index.php

detail

index.php

developer

index.php

6.3 Список программных компонентов

После того, как структура страниц web-приложения создана, следует перейти к следующему этапу — написание сценариев работы страниц. В системе «1С — Битрикс: Управление сайтом» для реализации сценариев используются программные компоненты.

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

Компонент «Список всех игр»

Имя компонента	games.main
Реализация требований	1, 2

Логика работы:

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

Параметры компонента:

Идентификатор	Множ.	Тип	Описание
IBLOCK_TYPE	Нет	Список	Тип информационного блока
IBLOCK_ID	Нет	Список	ID информационного блока
IBLOCK_SECTION_CODE	Нет	Список	Код раздела (платформы)
COUNT	Нет	Число	Количество игр на странице
FILTER	Нет	Строка	Переменная фильтра
DETAIL_URL	Нет	Строка	Ссылка на детальное описание элемента
SORT_BY1	Нет	Список	Поле первой сортировки
SORT_ORDER1	Нет	Список	Направление первой сортировки
SORT_BY2	Нет	Список	Поле второй сортировки
SORT_ORDER2	Нет	Список	Направление второй сортировки

Шаблоны

Идентификатор	Описание
default	Основной шаблон

Компонент «Список новых и выходящих игр»

Имя компонента	games.calendar
Реализация требований	6, 7, 8

Логика работы:

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

Параметры компонента

Идентификатор	Множ.	Тип	Описание
IBLOCK_TYPE	Нет	Список	Тип информационного блока
IBLOCK_ID	Нет	Список	ID информационного блока
IBLOCK_SECTION_CODE	Нет	Список	Код раздела (платформы)
COUNT	Нет	Число	Количество игр на странице
FILTER	Нет	Строка	Переменная фильтра
DETAIL_URL	Нет	Строка	Ссылка на детальное описание элемента
DATE_BORDER	Нет	Список	Ограничение вывода по дате
CURRENT_MONTH_DEFAULT	Нет	Флаг	Выводить поумолчанию игры текущего месяца
SORT_BY1	Нет	Список	Поле первой сортировки
SORT_ORDER1	Нет	Список	Направление первой сортировки
SORT_BY2	Нет	Список	Поле второй сортировки

Шаблоны

Идентификатор	Описание
main_page	Вспомогательный шаблон. Используется на главной странице web-приложения
Short	Вспомогательный шаблон, предназначен для вывода списка всех новых или выходящих игр
default	Основной шаблон, предназначен для вывода списка игр для текущего или выбранного месяца

Компонент «Список лучших игр»

Имя компонента	games.raiting
Реализация требований

Логика работы:

Компонент выводит список элементов из указанного информационного блока, отсортированных по значениям свойства с кодом MAIN_METAMARK по убыванию (сортировку можно изменить). Если указан код раздела инфоблока, выводится список элементов, принадлежащий данному разделу. Если в настройках компонента задан дополнительный фильтр, выводится список элементов, удовлетворяющий параметрам фильтра.

Параметры компонента

Идентификатор	Множ.	Тип	Описание
IBLOCK_TYPE	Нет	Список	Тип информационного блока
IBLOCK_ID	Нет	Список	ID информационного блока
IBLOCK_SECTION_CODE	Нет	Список	Код раздела (платформы)
COUNT	Нет	Число	Количество игр на странице
FILTER	Нет	Строка	Переменная фильтра
DETAIL_URL	Нет	Строка	Ссылка на детальное описание элемента
SORT_BY1	Нет	Список	Поле первой сортировки
SORT_ORDER1	Нет	Список	Направление первой сортировки
SORT_BY2	Нет	Список	Поле второй сортировки
SORT_ORDER2	Нет	Список	Направление второй сортировки

Шаблоны

Идентификатор	Описание
Short	Вспомогательный шаблон, предназначен для вывода всех лучших игр
main_page	Вспомогательный шаблон, предназначен для вывода списка лучших игр на главной странице
default	Основной шаблон, предназначен для вывода ограниченного количества лучших игр

Компонент «Список 100 лучших игр»

Имя компонента	games.top100
Реализация требований

Логика работы:

Компонент выводит список 100 элементов из указанного информационного блока, отсортированных по значениям свойства с кодом MAIN_METAMARK по убыванию. Если указан код раздела инфоблока, выводится список элементов, принадлежащих данному разделу.

Логика работы:

Компонент выводит форму, которая необходима для фильтрации списков элементов, размещенных на одной странице с компонентом и настроенных на связь с данным компонентом. В форме выводится по умолчанию три поля: жанр, дата выхода, метаоценка. Эти поля можно убрать или показать в зависимости от настроек компонента. Также можно указать, выводить или нет алфавит. Значениями списков полей могут быть как точные значения, так и специальные текстовые значения, которые указываются в настройках компонента по специальному шаблону. Также в настройках можно указать список основных жанров, выводимых в поле «жанр». Результатом работы компонента является сформированный массив, который будет передан далее одному из компонентов, отображающих список элементов. Передача параметров фильтра должна происходить без перезагрузки страницы, с помощью технологии AJAX; перезагружаться должна только область компонента, выводящего список игр.

Параметры компонента

Идентификатор	Множ.	Тип	Описание
IBLOCK_TYPE	Нет	Список	Тип информационного блока платформ
IBLOCK_ID	Нет	Список	ID информационного блока платформ
FILTER_VARIABLE_NAME	Нет	Строка	Имя ключа массива фильтра
PERIOD_LIST	Да	Список	Список интервалов времени (формат: <�название_варианта> [количество_дней])
MARKS_LIST	Да	Список	Список оценок (формат: <�название_варианта> [минимальная_соответсвущая_оценка] [цвет_надписи])
DETAIL_DATE_MAX	Нет	Строка	Максимальная дата в блоке «Уточнить дату»
DETAIL_DATE_MIN	Нет	Строка	Минимальная дата в блоке «Уточнить дату»
MAIN_GENRE	Да	Список	Список основных жанров
USE_ALPHA	Нет	Флаг	Использовать алфавит
OUT_PLATFORM	Нет	Флаг	Выводить платформы
SHOW_METAMARK_FILTER	Нет	Флаг	Выводить фильтр по метаоценке
SHOW_DATE_FILTER	Нет	Флаг	Выводить фильтр по дате выхода

Логика работы:

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

6.5 Особенности реализации сценариев работы web-приложения.

Общие сведения

В общем, реализация логики работы компонента состоит в написании программного кода с использованием требуемых классов и функций API системы, описанных в разделе 3. Главной особенностью при написании программного кода являются обеспечение сохранения состояния страниц при выполнении AJAX — запросов к страницам web-приложения и использование обработчиков событий панели управления.

Сохранение состояния страниц при использовании AJAX — запросов

Возможности web-браузера и языка JavaScript.

Основным недостатком технологии AJAX является невозможность стандартными средствами браузера обеспечить сохранение состояния страниц web-приложения при использовании AJAX — запросов. Так как технология AJAX реализуется посредством языка JavaScript, путь к странице, отображаемый в адресной строке браузером пользователю, не меняется. То есть, даже не смотря на то, что пользователь, находясь на странице с адресом, например, www.metagames.ru/index/top/index.php, посредством элементов web-страницы инициировал несколько запросов к компьютеру web-приложения, в адресной строке по-прежнему будет указанный выше путь, и при перезагрузке страницы все действия пользователя будут сброшены. Не все пользователи готовы повторить выполненные ранее процедуры и могут покинуть web-сайт.

Чтобы разработать решение данной проблемы, необходимо проанализировать возможности JavaScript. В первую очередь интересует возможность работы с адресной строкой браузера. Также следует проанализировать поведение браузера при изменении адресной строки.

После анализа возможностей браузера сделан вывод, что изменить адресную строку, не вызывая перезагрузки страницы, отображенной в браузере, возможно только с помощью дописывания к пути, указанному в адресной строке, произвольного набора символов после знака «#», т. е. изменение пути в адресной строке браузера с www.metagames.ru/index/top/index.php

на, например, www.metagames.ru/index/top/index.php#filter:up не приведет к перезагрузке страницы. Этой особенностью поведения браузера можно воспользоваться, чтобы фиксировать в адресной строке имена и значения переменных, характеризующих состояние страниц web-приложения при работе пользователя с ними.

Анализ возможностей JavaScript позволяет определить объекты и свойства объектов, позволяющие изменить адресную строку браузера. Ключевым объектом в данном случае является объект window. Объект window сочетает в себе 2 направления работы с кодом страницы: window является глобальным объектом JavaScript и объектом окна браузера. Объект window среди полей имеет объект location, который и позволяет получить доступ к пути, указанному в адресной строке браузера, и изменить этот путь.

window.location += «#some_text»;

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

Непосредственная реализация

Данный механизм необходим, прежде всего, в компоненте games. filter, т.к. действия пользователя по фильтрации списка различных игр инициируют большое количество AJAX-запросов к серверу. Но следует предусмотреть универсальный механизм восстановления состояния страниц, чтобы иметь возможность использования на различных страницах web-приложения независимо от компонентов. Напишем на языке JavaScript функцию, которая будет формировать строку, характеризующую состояние страницы web-приложения: function ajax_state_string (url, exclude_array){}.