46
позволяет быстро и просто архивировать и восстанавливать БД, поддерживает
индексы и репликации [13, 40].
В Интернет существует масса руководств по эксплуатации инструментов,
упомянутых здесь и в Главе 1 настоящей ВКР. Окончательный выбор ПО было
решено сделать на этапе выбора провайдера (см. п. 2.4.2.), основываясь на
доступности и понятности учебных материалов и прочей технической
документации для каждого предлагаемого им программного продукта.
2.4.2. Выбор хостинг-провайдера
Для того, чтобы ИМ стал доступен в Интернет, необходимо разместить
его на оборудовании хостинг-провайдера (хостера) и заплатить за регистрацию
доменного имени. Поскольку отладка и раскрутка сайта для его выхода на
первые позиции в поисковых системах занимает немало времени, а
следовательно за первые полгода посещаемость сайта будет невелика, была
поставлена задача найти хостера, предоставляющего бесплатный хостинг и все
необходимые службы для работы ИМ. Исходя из изложенного выше, было
решено найти хостинг с удобным инструментарием, поддерживающий работу с
одной из перечисленных выше бесплатных СУБД, PHP версии не ниже 5.0, а
также предоставляющий возможность создавать почтовые ящики на своем
почтовом сервере и отправлять e-mail с сайта по протоколу SMTP или IMAP.
Необходим также удаленный доступ к сайту по FTP для загрузки файлов на
сайт. К тому же, на хостинге должен быть предусмотрен быстрый переход на
платный тариф с расширенными возможностями.
Для управления сайтом и его модернизации было решено создавать ИМ
на базе бесплатной CMS. В качестве возможных кандидатов были рассмотрены
такие наиболее популярные на сегодняшний день CMS, как Wordpress, Joomla!
и Drupal [34, 35]. После ознакомления с возможностями предлагаемого ПО и
изучения отзывов в Интернете было решено использовать для разработки сайта
CMS Joomla! версии 1.5.25. Это - бесплатная, стабильно работающая, простая и
многофункциональная CMS, отвечающая всем перечисленным выше
требованиям для разработки сайтов (рисунок 6). Она используется для
управления содержимым как частных информационных, так и различной
47
сложности корпоративных веб-сайтов [27]. Ее установка на удаленный
компьютер не вызывает проблем и не занимает много времени [12, 28].
Рисунок 6. - CMS Joomla! отображает конфигурацию своего хоста
При выборе хостинг-провайдера было решено обращать внимание на
поддержку CMS Joomla!
После анализа отзывов в Интернете и ознакомления с официальной
информацией на странице провайдера, выбор был остановлен на хостинге
Hostiman (https://cp.hostiman.ru). Хостинг поддерживает все необходимое
серверное ПО (рисунок 7), и в случае бесплатного хостинга там предлагаются
следующие возможности:
- регистрация доменного имени;
- 50 одновременных соединений на сессию;
- 2 почтовых домена;
- 1 база данных;
- размещение до двух сайтов;
- загрузка серверного процессора Xeon - до 10% ядра;
- квота на жестком диске NVMe SSD – 1 Гb.
48
Рисунок 7 – ПО сервера Hostiman для бесплатного хостинга
Также предоставляется инструментарий для архивирования и
восстановления сайта, добавления / удаления файлов, доступа по FTP,
управления базами данных, почтовыми доменами и ящиками, доменными
именами, ведение статистики и т.п.
Данные параметры минимально допустимы для сайтов с небольшой
посещаемостью, и к тому же, этот хостинг поддерживает необходимое ПО,
перечисленное в п. 2.4.1. Если скорость работы ИМ в период отладки будет
приемлема в рамках бесплатного тарифа, то после перехода на предлагаемый
там платный тариф «Хостинг для Joomla» быстродействие данного сайта
значительно возрастет.
2.4.3. Инструментарий для разработки и отладки на локальном ПК
Для проверки работы ИМ на локальном ПК был установлен пакет
программ XAMPP, включающий в себя веб-сервер Apache с поддержкой PHP и
MySql [43].
Для создания изображений был использован установленный ранее
графический редактор Adobe Photoshop CS6.
Для написания веб-контента выбран язык HTML с применением CSS, а
для написания сценариев на стороне клиента – Javascript и библиотека JQuery,
значительно расширяющая возможности веб-разработчика. Язык PHP выбран
для написания серверных сценариев. Для написания наиболее компактного
кода HTML было принято решение использовать бесплатный
многофункциональный текстовый редактор с подсветкой кода Notepad++.
49
Для правки текста и кода на страницах сайта, размещенного у хостинг-
провайдера, решено воспользоваться многофункциональным текстовым
редактором TinyMCE, поставляемым в составе дистрибутива Joomla!. Этот
редактор предоставляет множество полезных инструментов для быстрого
форматирования текста и оформления веб-страниц в режиме WYSIWYG, и в то
же время может переключаться в текстовый режим для оптимизации кода.
Для переноса файлов на удаленный компьютер решено использовать
бесплатный ftp-клиент Filezilla (https://filezilla.ru).
Для просмотра и отладки сайта решено сначала задействовать браузер
Google Chrome последней версии (на момент написания этих строк —
71.0.3578.98), а затем протестировать сайт в других популярных браузерах,
таких как Opera, Mozilla Firefox, Internet Explorer, Safari, и др., а также на
популярных в настоящее время смартфонах и планшетах.
Краткие выводы:
1. Для составления ТЗ рассмотрены нюансы бизнеса клиента.
2. На основе бизнес-анализа определены функциональные возможности.
3. Исходя из стоимости выбран инструментарий для разработки сайта.
4. С учетом инструментария выбран хостинг-провайдер.
50
ГЛАВА 3. СОЗДАНИЕ ИНТЕРНЕТ-МАГАЗИНА
3.1. Выбор внешних и создание собственных модулей
3.1.1. Разработка БД
Ядром любого интернет-магазина является тщательно спланированная и
разработанная БД. Поэтому, чтобы посетитель мог что-либо найти и заказать,
необходимо обеспечить хранение соответствующих данных и доступ к ним.
Начинать создание ИМ было решено с проектирования его БД. Поскольку на
бесплатном хостинге разрешено держать только одну БД, к уже существующей
БД Joomla! потребовалось добавить структуру ИМ в виде связанных между
собой таблиц, изначально не входивших в состав данной CMS. Таблицы и связи
разрабатывались, исходя из утвержденной ранее общей схемы сущностей и
связей в БД ИМ (рисунок 5).
Сначала, для наглядности был создан макет БД в Microsoft Access. Схема
данных этого макета приведена на рисунке 8.
Рисунок 8 - Схема данных ИМ
Как видно из этой схемы, в БД предусмотрен учет проданных изделий
(таблица "sold") и ведется учет клиентов (таблица "customers"). Также БД
содержит каталог изделий (таблица "items"), каталог гарнитуров (таблица
"garnitures") и справочник по природным камням (таблица "jewels"). В
дальнейшем было решено разработать бизнес-логику и интерфейс пользователя
для данного макета (рисунок 9) и пользоваться им как локальной БД.
51
Рисунок 9 - Интерфейс пользователя локальной БД (главное окно)
Далее была разработана даталогическая модель БД ИМ, представленная в
Приложении В.
3.1.2. Схема расположения визуальных элементов
В соответствии с логической структурой (см. п. 2.3.1.) была утверждена
схема расположения визуальных элементов на странице (рисунок 10).
Рисунок 10 – Схема расположения визуальных элементов (пунктиром отмечены
элементы, которые имеют различные варианты отображения)
3.1.3. Подключение библиотеки JQuery
Для написания более компактных и функциональных сценариев было
решено задействовать библиотеку JQuery версии 1.7.1. mini. Для начала
52
потребовалось проверить, не подключена ли уже какая-либо версия этой
библиотеки. Для этого внутри тега <head>...</head> файла index.php был
помещен следующий код:
<script type="text/javascript">alert(jQuery.fn.jquery)</script>
далее, этот файл был сохранен на сервере, а в адресной строке браузера
был набран адрес сайта: http://localhost/yakira.loc. При наличии подключенной
jQuery, после загрузки главной страницы должно появиться окно сообщения с
номером версии этой библиотеки. В противном случае ничего не произойдет,
но вызвав по F12 консоль отладки сценариев в браузере Google Chrome (и во
многих других браузерах), можно прочитать там сообщение об ошибке,
подобное следующему:
Uncaught ReferenceError: jQuery is not defined at (index):58
и это в переводе означает, что объект jQuery не определен, а,
следовательно, библиотека не подключена. Таким образом было установлено,
что необходимо подключить jQuery к шаблону. Далее, из сети Интернет была
скачана бесплатная библиотека jQuery версии 1.7.1 mini. Файл занимает всего
92 Кб. Он был размещен вместе с другими библиотеками созданных
клиентских сценариев в папке "/components/com_jCatalog/js" компонента
отображения основного содержимого. Чтобы подключить эту библиотеку, в
коде index.php шаблона, внутри тега <head>...</head> был добавлен тег скрипта
со ссылкой на JQuery:
<script type="text/javascript" src="/components/com_jCatalog/js/jquery-
1.7.1.min.js "></script>
3.1.4. Разработка меню сайта
Согласно этой схеме разработано два вертикальных меню, подключаемых
к ИМ как отдельные модули [27]: меню каталога (который, в свою очередь,
делится на каталог изделий и каталог гарнитуров) и меню справочной
информации, содержащей ссылки на описание свойств камней и их связи с
гороскопами, а также на контактную информацию и карту сайта. Эти меню
содержат выпадающие подменю (рисунок 11).
53
Рисунок 11 - Меню сайта
Меню, формы поиска и регистрации, "хлебные крошки" и т.п. в CMS
Joomla реализуются в виде подключаемых модулей. Модули для Joomla
хранятся в папке "modules" корня сайта. Каждый модуль помещается в папку,
имя которой состоит из префикса "mod_" и названия модуля. Простейшие из
них состоят из трех файлов:
- шаблона, написанного на php и названного так же, как папка модуля, но
с расширением "php" (например, mod_garns.php);
- файла helper.php, берущего на себя всю работу по получению от служб
сайта запрошенной информации, ее обработке и передаче в шаблон в
заранее установленном виде;
- файла с именем шаблона и расширением "xml" (Extensible Markup
Language – расширяемый язык разметки [23]), содержащим информацию
о модуле и список файлов модуля (например, mod_garns.xml).
В п. Б.5 приложения Б приведен код простейшего xml-файла из модуля.
Модули предназначены для позиционирования вне основной области
просмотра страницы [28].
54
3.1.5. Разработка компонентов для отображения каталогов
Помимо модулей в Joomla предусмотрены компоненты, расположенные в
папке "components" корня сайта. Каждый компонент располагается в отдельной
папке, имя которой состоит из префикса "com_" и названия компонента.
Компоненты в Joomla встраиваются в основную область просмотра страницы,
исключая отображение каких-либо других элементов в этой области.
Компоненты Joomla имеют более сложную структуру. В их составе
предусмотрено создавать более сложный, чем для модулей, веб-интерфейс
администратора для настройки внешнего вида и работы компонента через
панель управления, доступную в back-end. Листинги некоторых компонентов,
разработанных для ИМ ООО "Якира", приведены в Приложении Б.
В процессе разработки ИМ было создано три компонента: для
отображения области просмотра главной страницы, каталога изделий и
каталога гарнитуров (рисунок 12). Модули и компоненты Joomla!
подключаются к шаблону отображения страниц при помощи директив:
<jdoc:include type="modules" name="modName" /> и <jdoc:include
type="component" />.
Рисунок 12 - Отображение модулей меню и компонента "Каталог изделий"
Наряду с модулями и компонентами, в Joomla существуют также
плагины, которые являются самостоятельными функциональными единицами,
встраиваемыми в код основной области просмотра, но, в отличие от
55
компонентов, не исключающими отображение других элементов. В данной
работе не создавались дополнительные плагины, а использовались только
стандартные плагины, поставляемые с дистрибутивом Joomla.
3.1.6. Разработка карты сайта
Помимо модулей и компонентов, было решено разработать карту сайта.
Карта сайта (sitemap) – это некоторый список ссылок, ведущих на разделы и
страницы сайта, которые должны быть проиндексированы поисковыми
системами. Это особенно важно в случае, если web-ресурс содержит очень
большое количество страниц и ссылок на них. Некоторые поисковые роботы не
сканируют страницы и разделы, находящиеся на уровне ниже третьего (или
даже второго) относительно корня сайта, или доступные по длинным цепочкам
ссылок, либо по динамически создаваемым ссылкам. Sitemap указывает на
такие страницы явно.
Sitemap создавалась в двух вариантах: как html-страница для
ориентировки посетителей (рисунок 13), и как файл в формате XML,
позволяющий поисковым системам быстрее и качественнее индексировать
сайт, что способствует его продвижению в Интернет.
Рисунок 13 - Карта сайта в формате HTML
Из утверждений специалистов SEO (Search Engine Optimization —
комплекс мероприятий по увеличению видимости сайта в поисковых системах
по целевым поисковым запросам [38]) о том, что sitemap ускоряет индексацию,
следует повышение вероятности для веб-страниц с оригинальным контентом