Разработка web-интерфейса. 
Разработка образовательного сайта

Учитывая поставленные выше задачи, автор решил, что наиболее оптимальным средством для разработки такого рода электронной коммерции — HTML + система управления содержимым Joomla, написанная на языке PHP использующая в качестве хранилища содержимого базу данных MySQL. Одной из главных особенностей Joomla является относительная простота управления при практически безграничных возможностях и гибкости при изготовлении сайтов.

Название «Joomla» фонетически идентично слову «Jumla», которое в переводе с суахили означает «все вместе» или «в целом», что отражает подход разработчиков и сообщества к развитию системы.

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

Разработка сайта велась в основном в программном пакете компании Joomla 3.0.1. Выбор данного пакета обоснован тем, что его освоение отнимает мало времени, при разработке доступен предварительный просмотр каждой отдельно совершенной сделки, доступно множество функций (организация интерактивных элементов сайта, создание гиперссылок в несколько нажатий мыши и т. п.), пакет поддерживает большое количество технологий (HTML, PHP, ASP, Java, XML, XSLT, CSS и др.)[12].

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

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

Административная часть сайта представлена в виде системы управления содержимым. Система управления содержимым (англ. Contentmanagementsystem, CMS) — компьютерная программа, используемая для управления содержимым чего-либо (обычно содержимое рассматривается как неструктурированные данные, в противоположность структурированным данным, СУБД, обычно находятся под управлением). Обычно такие системы используются для хранения и публикации большого количества документов, изображений, музыки или видео.

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

Сейчас существует множество готовых систем управления содержимым сайта, в том числе и бесплатных. Их можно разделить на три типа, по способу работы:

Генерация страниц по запросу. Системы такого типа работают на основе связки «Модуль редактирования> База данных> Модуль представления». Модуль представления генерирует страницу с содержанием при запросе на него, на основе информации из базы данных. Информация в базе данных изменяется с помощью модуля редактирования. Страницы заново создаются сервером при каждом запросе, а это создает нагрузку на системные ресурсы. Нагрузка может быть многократно снижена при использовании средств кэширования, которые имеются в современных веб-серверах.

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

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

Необходима развитая гипертекстовая структура — HTML создан именно для этого; необходимо обеспечить гибкую структуру управления материалом — управлять HTML-содержимым удобно с помощью PHP + MySQL. Именно эта связка позволяет генерировать динамические HTML-страницы; необходимо реализовать вариативность представления материала — в этом случае использование HTML + CSS более обоснованно. Именно эта комбинация средств позволяет создавать мультимедийные документы; необходимо обеспечить поддержку внутреннего сайта.

На основании поставленного технического задания была выбрана система управления содержимым CMS Joomla, поскольку именно эта система отвечает всем требованиям.

На сегодняшний день уже всем специалистам в области веб-технологий стало очевидно, что существующих стандартов передачи данных по Internet недостаточно. Формат HTML, став в свое время прорывом в области отображения содержимого узлов Internet, уже не удовлетворяет всем необходимым на данный момент требованиям. Он позволяет описать то, каким образом должны быть отражены данные на экране конечного пользователя, но не предоставляет никаких средств эффективного описания передаваемых данных и управления ими.

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

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

Решением всех описанных выше проблем стал утвержденный в 1998 году международной организацией W3C язык XML. XML (eXtensibleMarkupLanguage) — это расширяемый язык разметки, предназначенный для описания в текстовой форме структурированных данных. Этот текстовый (text-based) формат, во многом схожий с HTML, разработан специально для хранения и передачи данных.

XML позволяет описывать и передавать такие структурированные данные, как:

• 1. Отдельные документы.
• 2. Метаданные, описывающие содержимое какого-либо узла Internet.
• 3. Объекты, содержащие данные и методы работы с ними (например, элементы управления ACTIVEX или объекты Java).
• 4. Отдельные записи (например, результаты выполнения запросов к базам данных)
• 5. Всевозможные веб-ссылки на информационные и человеческие ресурсы Internet (адреса электронной почты, гипертекстовые ссылки и др.)

Данные, описанные на языке XML, называются XML-документами. Язык XML легко читаем и достаточно прост для понимания. Если Вы были знакомы с HTML, то научиться составлять XML-документы не составит для Вас никаких трудностей.

Первоначальный текст XML-документа состоит из набора XML-элементов, каждый из которых содержит начальный и конечный теги. Каждая пара тегов представляет часть данных. То есть, как и HTML, язык XML для описания данных использует теги. Но, в отличие от HTML, XML позволяет использовать неограниченный набор пар тегов, каждый из которых представляет не то, как заключенные в нее данные должны выглядеть, а то, что они означают.

Любой элемент XML-документа может иметь атрибуты, характеристики, уточняющие его. Атрибут — это пара имя = «значение», которая задается при определении элемента в начальном тэге.

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

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

Управлять отображением элементов в окне программы-клиента (например, в окне браузера) можно с помощью специальных инструкций — стилевых таблиц XSL (eXstensibleStylesheetLanguage). Эти таблицы XSL позволяют определять оформление элемента в зависимости от его месторасположения внутри документа, т. е. до двух элементов с одинаковым названием могут применяться различные правила форматирования. Кроме того, языком, лежащей в основе XSL, является XML, а это значит, что таблицы XSL более универсальны, а для контроля корректности составления таких стилевых таблиц можно использовать DTD-описания или схемы данных, рассмотрены ниже.

Формат XML, по сравнению с HTML, имеет небольшой набор простых правил разбора, который позволяет разбирать XML-документы, не прибегая к каким-либо внешних описаний используемых XML-элементов. В общем случае XML-документы должны удовлетворять следующим требованиям[14]:

• 1. Каждый открывающий тэг, определяющий некоторую часть данных в документе, обязательно должен сопровождаться таким, закрывающая, то есть, в отличие от HTML, нельзя опускать закрывающие тэги.
• 2. Вложенность тэгов в XML строго контролируется, поэтому необходимо следить за порядком следования открывающих и закрывающих тегов.
• 3. В XML учитывается регистр символов.
• 4. Вся информация, расположенная между начальным и конечным тегами, рассматривается в XML как данные и поэтому учитываются все символы форматирования (т.е. пробелы, переводы строк, табуляции не игнорируются, как в HTML).

В XML существует набор зарезервированных символов, которые должны быть заданы в XML-документе только специальным образом. Многие специалисты рассматривают XML как новую технологию интеграции программных компонентов. Основными преимуществами использования XML являются:

• 1. Интеграция данных из разных источников. XML можно использовать для объединения разнородных структурированных данных на среднем уровне трехуровневых веб-систем, баз данных.
• 2. Локальная обработка данных. Полученные данные в формате XML можно разбирать, обрабатывать и отображать непосредственно на клиенте без дополнительных обращений к серверу.
• 3. Просмотр и манипулирование данными в различных разрезах. Полученные данные могут обрабатываться и быть видимыми клиентом различными способами в зависимости от потребностей конечного пользователя.
• 4. Возможность частичного обновления данных. С помощью XML можно обновлять только ту часть структурированных данных, которая была изменена, а не всю структуру целиком.

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

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

Инструменты обработки данных, полученных в формате XML, могут быть разработаны в среде VisualBasic, Java или C.

Для доступа к административной панели управления Joomla используем адрес нашего веб-сайта (или полный путь к папке, в которую установленаJoomla) с добавлением в конце пути «/ administrator». Например, если адрес сайта www. study-kazetu.kz, то доступ к панели управления возможен по адресу www. study-kazetu.kz/administrator. После введения адреса, откроется страница авторизации:

Рисунок 18 — Авторизация администратора для входа на сайт При правильном вводе имени пользователя и пароля откроется главная страница администрирования системой, то есть будет открыта панель управления Joomla (Рис.19), которая предоставит управление всеми функциями и возможностями Joomla.

Рисунок 19 — Панель управления joomla сайта Раздел — это главный (верхний) объект в основе иерархии структуры содержимого (Рис.20). Позже в Раздел будут добавлены Категории, а категории добавляются в разделе «Материалы» -> «Менеджер категорий» .

Рисунок 20 — Разделы панели управления Категория — это второй (после раздела) объект в иерархии структуры содержимого. Создание категории похоже на создание раздела.

Для работы с категориями необходимо выбрать пункт меню «Материалы». Можно нажать на главной странице панели кнопку «Материалы» или в основном меню выбрать «Материалы», затем пункт «Менеджер категорий» (Рис. 20).

Рисунок 20 — Создание категорий При открытии страницы «Менеджер категорий» первым способом будет доступно фильтрация категории по разделам. При создании новой категории можно будет выбрать раздел, в который должна войти новая категория. Опция фильтрации на странице доступна справа под панелью инструментов.

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

На странице «Менеджер категорий», используя кнопки на панели инструментов, можно (перечисление справа налево):

Помощь — открыть в новом окне страницу описания поданному окну («Менеджер категорий»). Нажмите кнопку «Помощь» .

Создать новую категорию. Нажмите кнопку «Создать» .

Изменить существующую категорию. Нажмите на название категории или отметьте нужную категорию и нажмите кнопку «Изменить» .

Удалить существующую категорию. Отметьте нужную категорию и нажмите кнопку «Удалить» .

Копировать существующую категорию. Отметьте нужную категорию и нажмите кнопку «Копировать» .

Перенести — переместить существующую категорию и все ее содержимое в другой раздел. Отметьте нужную категорию и нажмите кнопку «Перенести» .

Скрыть (сделать неопубликованной) существующую категорию. Отметьте нужную категорию и нажмите кнопку «Скрыть» .

Допустить (Опубликовать) существующую категорию. Отметьте нужную категорию и нажмите кнопку «Показать» .

Для создания новой категории нажмите кнопку «Создать». Будет открыта страница редактирования категории.

Страница редактирования категории аналогичная странице редактирования раздела. Основное отличие страниц редактирования «Категории» и «Раздела» — наличие поля выбора раздела, в который относиться категория. Создание новой категории почти полностью аналогично созданию нового раздела.

Теперь создадим основную категорию «Департамент», а в нем подкатегории «Офис регистратор» и «Учебно методические пособия» .

Создание категории происходить при помощи кнопки создать, в меню страницы «Менеджер категорий», это представлено на рисунке 21:

Рисунок 21 — Создание категории «Департамент» .

Далее открывается страница создания категории, где нужно в соответствующие пункты внести необходимую информацию, в нашем случаем в поле «Заголовок» мы внесли «Main menu», затем указали, что данная категория имеет типа «Public» .

Рисунок 22 — Создания категории «Департамент» .

Далее после создания категории «Департамент», мы создали две подкатегории «Офис регистратор» и «Специальности», эти категории создаются аналогично, но с одним «но», с привязкой к материнской категории, в нашем случае является это категория «Объявления». Привязка подкатегории к категории представлено на рисунке 23:

Рисунок 23 — Создание подкатегории «Офис регистратор» .

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

Рисунок 24 — Создание контента для сайта После создания структуры содержимого, необходимо создать меню для пользователей веб-сайта. Меню — это набор кнопок, которые приведут на конкретные объекты, например, объект содержимого, список категорий, компонент и т. д.

Используя расширения Joomla легко создать меню для отображения на сайте. В данном дипломном проекте рассматривается меню, построенное на стандартном модуле (установленном по умолчанию) mod_mainmenu. Данный модуль является по умолчанию главным для создания меню. Место вывода меню на сайте определяется в шаблоне сайта. Устанавливая дополнительные расширения, можно расширить возможности отображения стандартного меню или отобразить его в другом виде, например в виде выпадающего каскадного меню с подменю (часто необходимо, чтобы со стороны пользователя была включена поддержка Javascript в браузере).

Самый простой вариант (но ограниченный в возможностях) связать объект содержимого с пунктом меню, это использовать на странице редактирования объекта содержимого в окне дополнительных параметров вкладку «связь с меню». Во вкладке данного окна необходимо:

• 1. Выбрать меню, в которое будет добавлен пункт (ссылка).
• 2. Выбрать название пункта меню.
• 3. Нажмите кнопку «Связать с меню» .

Примечание: На странице редактирования раздела или категории в дополнительном окне справа (для создаваемого раздела или категории данное окно будет доступно после сохранения — кнопка «Сохранить»). В данном окне необходимо:

• 1. Выбрать меню, в которое будет добавлен пункт (ссылка).
• 2. Выбрать тип меню, в каком виде появится раздел или категория.
• 3. Выбрать название пункта меню.
• 4. Нажать кнопку «Связать с меню» .

Рисунок 25 — Доступ к странице «Создания меню [mainmenu]» .

Для работы с меню для сайта необходимо перейти на страницу «Главное меню». В основном меню выбрать «Все меню», затем пункт меню «Главное меню». платформа сайт база образовательный Для работы с пунктами меню определенного меню (например, mainmenu) необходимо перейти на страницу «Управление меню [mainmenu]». В основном меню выбрать «Все меню», затем пункт меню «Главное меню» .

На странице «Пункты меню [mainmenu]» можно увидеть список уже созданных пунктов меню (по умолчанию без установки демонстрационных данных доступен только один пункт — «Главная»).

Для добавления нового пункта меню необходимо перейти на страницу «Создать». Нажмем кнопку «Создать» на странице «Управление Пункты меню [mainmenu]» для добавления нового пункта меню в меню mainmenu.

На странице «Пункт меню [Создать] (рис. 18) доступны несколько типов создаваемого пункта меню. Все типы разбиты по группам.

Рисунок 26 — Добавление нового пункта категорий Когда выбран тип нового пункта меню, необходимо перейти на страницу «Пункт меню [Создать] На этой странице необходимо выбрать и заполнить основные параметры и поля нового пункта меню Параметры и поля отличаются в зависимости от выбранного типа нового пункта меню, нажав на кнопку» Далее" или на выбранный тип пункта меню.

• 1. Ввести имя нового пункта меню, поле «Заголовок» .
• 2. Выбрать объект содержимого (статью), поле «Выберите материал» .
• 3. Выбрать родительский пункт меню, поле «Родительский элемент» .
• 4. Выбрать порядок расположения, поле «Порядок показа» .
• 5. Выбрать уровень доступа, поле «Доступ» .
• 6. Выбрать опубликование меню, поле «Опубликовано» .

Справа можно, но не обязательно, выбрать изображение меню, поле «Картинка меню» .

Рисунок 27 — Добавление нового пункта в меню «Главное меню» .

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

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

Для запуска сайта нам необходимо обратиться к OpenServer, в пункте меню открыть команду «Мои сайты», и выбрать наш сайт (Рис. 28).

Рисунок 28 — Запуск сайта Для запуска и визуального тестирования был использован браузер GoogleChrom. После вызова команды «Мои сайты», и запуска сайта, открылась главная страница сайта, как представлено на рисунке 29:

Рисунок 29 — Главная станица сайта Как мы видим из рисунка 29, сайт имеет в панели главного меню кнопки с гиперссылками на странички подменю. Если к примеру нажать на кнопку меню Департамент то мы окажемся на странице категории с возможностью выбора просмотра информации.

Рисунок 30 — Размещение информации о товарах на сайте Аналогичным образом работают и другие кнопки меню, будь это подменю «Документы» или «Абитуриентам» .

Данный сайт сделан с помощью использования современного CMSJoomla, версии 3.0.1. Существует статистика, которая гласит, что в мире из всех имеющихся сайтов 3% сайтов написаны с использованием CMSJoomla (разных версий). Обще мировое признание Joomla является то, что данная система управления содержимым является мощным не коммерческим инструментом создания сайтов, которая включает в себя современные инструменты разработки сайтов с использованием PHP, Java, C++ и т. д. Данное CMS в отличие от других некоммерческих продуктов поддерживается и постоянно обновляется, последний релиз обновления Joomla было в 23 февраля 2013 года (версия Joomla 3.0.1).