56
быть проиндексированными раньше, чем этот контент будет скопирован и
опубликован на каком-либо стороннем сайте. Таким образом, у этих страниц
становится больше шансов быть зарегистрированными поисковыми роботами
как первоисточники, которым отдается предпочтение при выдаче результатов
поисковых запросов.
Исходя из всего изложенного, рекомендуется включать карту сайта в
состав веб-проектов, тем более что в настоящее время существует множество
бесплатных и платных онлайн служб, позволяющих быстро eё сгенерировать.
Например, онлайн-генератор http://www.mysitemapgenerator.com/ бесплатно
генерирует sitemap, включающий до 500 страниц. Для этого требуется лишь
указать адрес сайта, а затем скопировать полученный файл в корень этого
сайта. Некоторые генераторы только отображают код карты сайта на экране,
откуда его нужно скопировать, вставить в пустой текстовый файл и сохранить
его с расширением "xml", на большинстве других предоставляется услуга
отправки файла sitemap по e-mail или скачивания его на компьютер
разработчика прямо со страницы генератора.
В п. Б.6 Приложения Б приведен листинг простейшей карты сайта в
формате XML. Как видно из листинга, sitemap содержит несколько тегов с
параметрами (таблица 3).
Таблица 3 - Параметры карты сайта
Параметр
Описание
Значения
<loc>
URL ресурса для перехода
URL
<lastmod>
дата последнего обновления ресурса
дата гггг-мм-дд
<changefreq>
обозначает частоту обновления ресурса
always, hourly, dayly, weekly,
monthly,yearly, never
<priority>
задает положение ресурса в очереди на
сканирование среди других ресурсов сайта
значения от 0 до 1 с шагом
0,1
Параметры sitemap носят для поисковых систем рекомендательный
характер, но могут косвенно влиять на частоту сканирования ресурсов
поисковыми роботами.
3.1.7. Модификация модуля навигации breadcrumbs
Также решено задействовать на сайте элемент "хлебные крошки"
(breadcrumbs), облегчающий навигацию по сайту и показывающий посетителю
57
путь, по которому он прошел до определенной страницы. Этот элемент уже
существует в виде модуля в составе Joomla. Потребовалось лишь несколько
улучшить его функциональность посредством написания кода на Javascript. Код
был написан так, чтобы скрывать breadcrumbs когда посетитель находится на
главной странице. При помощи CSS были несколько изменены внешний вид и
расположение этого модуля (рисунок 14).
Рисунок 14 - Модуль "хлебные крошки"
3.1.8. Разработка корзины покупателя
Для оформления заказов и организации оплаты в ИМ было решено
разработать элемент "корзина". Корзина должна играть роль своеобразного
помощника для заказчика, предлагая ему указать способ оплаты и получения
товара, изменить количество товаров в заказе и узнать сумму заказа. Для
менеджера ИМ корзина должна предоставить контактную информацию о
заказчике, а также количество и характеристики заказанных украшений.
Для интернет-магазинов с небольшим ассортиментом и слабой
посещаемостью часто предусматривают отправку сообщения с веб-страницы по
e-mail, с указанием подробностей заказа, в ответ на которое представитель
поставщика товаров/услуг связывается с заказчиком и после подтверждения
заказа высылает счет на оплату. Также это работает в случае, когда
предлагаются услуги, каждая из которых не может выполняться для нескольких
заказчиков одновременно, и требуется согласование по времени.
Поскольку проектируемый ИМ имеет узкую специализацию и
предполагается, что поначалу посетителей будет не более 50 человек в день,
было решено ограничиться простой системой оплаты, когда выбранные товары
регистрируются в корзине, а при оформлении заказа автоматически создается e-
mail-сообщение с указанием контактных данных заказчика, а также номеров
заказанных изделий в каталоге, их количества и цены. Заказы будут
breadcrumbs
58
обрабатываться оператором, и после контакта с заказчиком для подтверждения
заказа товар будет отправлен либо курьером, либо почтой России с
наложенным платежом.
Корзина должна представлять собой глобальный объект, хранящийся в
памяти окна браузера. Был разработан механизм отображения корзины в виде:
- текстовой области с указанием количества позиций и суммы заказа
(рисунок 15), содержащей ссылку для отображения ленты заказанных позиций;
Рисунок 15 - Свернутая корзина вверху окна
- вертикальной ленты с фотографиями и характеристиками заказанных
позиций, кнопками для удаления позиций из заказа, сокрытия ленты с экрана и
вызова формы для отправки заказа (рисунок 16);
Рисунок 16 - Корзина в виде ленты
- формы отправки заказа, содержащей перечень заказанных позиций с их
характеристиками и ценой, сумму заказа и поля для ввода обязательной
контактной информации для связи с заказчиком (рисунок 17).
59
Рисунок 17 - Корзина в виде формы отправки заказа
Письма, которые отправляются напрямую с сайта при помощи функций
php mail(), send_mail() и mb_send_mail(), часто попадают в спам и не доходят до
получателя. Поэтому для отправки заказа по e-mail была задействована
бесплатная библиотека phpMailer, реализующая отправку сообщений e-mail
через SMTP с реального почтового ящика с возможностью прикрепления
файлов (https://github.com/PHPMailer/PHPMailer).
3.1.9. Реализация доступа к дополнительной информации
Со ссылок из меню "Информация" к серверу Apache отправляются
асинхронные запросы, которые далее направляются серверным сценариям для
обработки. Затем Apache получает ответ от сценариев и отправляет браузеру
либо сгенерированный на сервере код HTML, либо представленные в виде
текста сериализованные объекты, содержащие необходимую информацию. Эти
объекты интерпретитуются клинетскими сценариями на Javascript, из их полей
извлекается необходимая информация и генерируется код HTML,
отображаемый на экране в виде всплывающих окон (рисунок 18).
60
Рисунок 18 – Окна с информацией о камнях и гороскопах
В этом случае с сервера поступают только данные, а оформление
внешнего вида происходит на стороне клиента, что уменьшает трафик и
ускоряет обмен данными между клиентом и сервером. Для реализации
асинхронных Ajax/JSON запросов были задействованы методы ajax() и
getJSON() библиотеки JQuery.
По ссылке "Камни и знаки" вызывается окно с четырьмя секциями,
которые становятся видны при установке соответствующих чекбоксов и предо-
ставляют посетителю информацию о соответствии природных камней знакам
зодиака и соответствии знаков зодиака календарным периодам (рисунок 19).
Рисунок 19 – Окно информации о камнях и знаках зодиака
Для снижения трафика вся работа секции соответствия знаков зодиака
календарным периодам реализована на стороне клиента при помощи Javascript
(см. Приложение Б).
Аналогичным образом был разработан механизм просмотра фотографий
изделий, гарнитуров и камней (рисунок 20).
61
Рисунок 20 - Окна просмотра фотографий
Шапка и подвал сайта не будут содержать функциональных элементов. В
подвале сайта решено размещать ссылки на сайты со схожей тематикой,
полученные в результате обмена ссылками.
3.1.10. Выбор и модификация шаблона отображения
Для оформления внешнего вида ИМ был выбран стандартный шаблон
"rhuk_milkyway", присутствующий в составе дистрибутива Joomla! v. 1.5.25.
Этот шаблон пришлось слегка модифицировать, включив в секцию <head> веб-
страницы директивы подключения библиотек клиентских сценариев и файлов
CSS, описывающих внешний вид созданных модулей и компонентов. В коде
этого шаблона были также закомментированы некоторые фрагменты,
нежелательные для отображения.
Параллельно написанию данной главы вся разработка ИМ велась на
локальном компьютере с установленным пакетом программ XAMPP (см. п.
2.4.3.).
62
3.1.11. Реализация управления удаленной базой данных веб-сайта
Для быстрого внесения изменений в информацию об изделиях было
решено создать сервисные страницы для добавления изделий и для изменения
существующих данных в БД веб-сайта. Для безопасности, со страниц,
доступных посетителям отсутствуют ссылки на эти страницы, и URL
сервисных страниц предоставляются только компетентному персоналу. При
прохождении по этим адресам появляются формы для внесения изменений
(рисунок 21).
Рисунок 21 – Формы для добавления и изменения данных каталога
В результате был создан сайт, все необходимые функциональные
элементы которого можно увидеть на главной странице (рисунок 22).
63
Рисунок 22 – Главная страница интернет-магазина
3.2. Подключение ИМ к Интернет
3.2.1. Заказ хостинга и получение доменного имени
Для того, чтобы ИМ приносил прибыль, необходимо обеспечить его
досягаемость через Интернет. Для этого нужно зарегистрировать доменное имя,
зарегистрироваться у хостера и перенести ИМ с локального компьютера, на
котором он разрабатывался, на площадку хостера. Поэтому следующим этапом
для настоящей ВКР был заказ бесплатного хостинга на Hostiman и получение
доменного имени "yakira" в домене "ru" (не бесплатно). Здесь проблем не
возникло, и спустя некоторое время после регистрации появился доступ к
панели удаленного управления сайтом (рисунок 23), к серверу FTP и службе
PhpMyАdmin для управления СУБД MySQL.
64
Рисунок 23 – Панель управления Hostiman
3.2.2. Установка CMS Joomla! на удаленной площадке
Несмотря на то, что хостер предоставляет свой менеджер файлов для
обмена файлами по протоколу HTTP, для ускоренного переноса сайта было
решено воспользоваться бесплатным ftp-клиентом Filezilla (см. п. 2.4.3.) и
передавать файлы по протоколу FTP. Таким образом, сначала в корень
удаленного сайта был скопирован дистрибутив Joomla!, после чего в адресной
строке браузера был введен URL "http://yakira.ru". Появилась страница мастера
установки Joomla! (рисунок 24).
65
Рисунок 24 – Мастер установки Joomla!
Далее на некоторых страницах мастера потребовалось ввести данные,
необходимые для настройки работы ИМ и его взаимодействия с СУБД
(рисунок 25).
Рисунок 25 – Настройки Joomla! при установке
По окончании установки появилась страница приветствия Joomla!, где
предлагается удалить из корня сайта папку "installation", а затем, в секции
страницы "Завершение" перейти по ссылкам либо к панели управления CMS,
либо на главную страницу сайта (рисунок 26).