ПЗ Плиско А.В. 941 группа (1190851), страница 4
Текст из файла (страница 4)
<head>
[[$header]]
</head>
<body>
<div id="hs_top_wrap"> </div>
<div class="container">
<div class="row-fluid">
<div class="span12">
[[$logo]]
[[$menu]]
[[$uslugi]]
</div>
</div>
[[$brand]]
<div class="row-fluid">
[[$copyright]]
</div>
<div id="hs_bottom_wrap"></div>
</body>
</html>
Меню генерируется динамически, а, следовательно, для того, чтобы менеджеру компании не пришлось каждый раз исправлять HTML, блок меню реализован с особенностями Фреймворка MODX (листинг 3.2).
Листинг 3.2 – Основное Меню разделов Web-приложения
//Оболочка меню
<ul class="hs_main_menu_bar">[[+wf.wrapper]]</ul>
//Пункты меню
<li [[+wf.classes]]> <a href="[[+wf.link]]" [[+wf.wrapper]]</a>[[+wf.wrapper]]</li>
//Подпункты меню
<li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
Для выпадающих панелей в информационной части web-прилодения, для смены категории в каталогах в части интернет магазина, для корзины использован JavaScript. Также при добавлении товара в корзину пользователь видит всплывающие уведомления, которые используют технологию AJAX. Внешний вид всплывающих уведомлений изображен на рисунке 3.7.
Рисунок 3.7 – Всплывающие уведомления
Web-приложение должно быть кроссбраузерным, кроссплатформерным, а также адаптировано ко всем разрешениям экранов, следовательно использовались технологии, которые показывают отличные показатели работы на всех платформах. Для адаптации Web-приложения при разработке клиентской части использовался подход First-mobile (Сначала мобильные).
При данном подходе верстка клиентской части начинает с мобильного устройства, а затем с помощью добавлению новых классов и параметров расширяется до экранов с большим разрешением.
Результат отображения Web-приложения на различных устройствах представлен на рисунке 3.8.
Рисунок 3.8 – Web-приложение на различных устройствах
Для удобной работы web- приложения разработана административная панель. Визуальное представление построено с помощью JavaScript. Административная панель имеет удобный, интуитивно понятный интерфейс, с помощью которого происходит управление всеми функциями Web-приложения. Внешний вид административной панели представлено на рисунке 3.9.
Рисунок 3.9 – Административная панель Web-приложения
Вход в систему администрирования осуществляется только после ввода администратором логина и пароля (логин и пароль администратор может менять). Администратор имеет возможность полностью управлять содержимым интернет-магазина:
-
добавлять или удалять товары, описания и фотографии к ним, изменять их стоимость, условия доставки товаров;
-
редактировать разделы магазина (новости, статьи, пр.);
-
редактировать контактную информацию интернет-магазина;
-
просматривать историю заказов и статистику покупателей
Таким образом, в данном разделе описаны главные особенности использования технологий для разработки клиентской части Web-приложения.
3.3. Разработка серверной части Web-приложения
Для разработки серверной части Web-приложения использованы технологии PHP 5.6, MySQL 5.6, AJAX. Архитектура разрабатываемого Web-приложения является трехуровневой. Трёхуровневая архитектура предполагает наличие следующих компонентов приложения:
– клиентская часть;
– серверная часть (PHP + AJAX);
– СУБД (MySQL).
Рисунок 3.10 – Общий принцип работы Web-приложения
Для работы Web-приложения спроектирована база данных, которая хранит в себе всю информацию о данных представленных в Web-приложении, а также об административной части. Из-за своеобразной архитектуры строения Фреймворка MODX, структура шаблонов также хранится в базе данных. Часть схемы базы данных представлена на рисунке 3.11. Регистрация новых пользователей по соображения безопасности была отключена, для добавления нового пользователя в административной части Web-приложения администратору необходимо заполнить поля в форме (рисунок 3.12), после чего новый пользователь будет добавлен в базу данных и сможет авторизоваться в административной панели.
Рисунок 3.11 – Часть схемы Базы данных Web-приложения
Рисунок 3.12 – Форма добавление нового пользователя
Авторизация происходит на странице входа в административную часть Web-приложения (рисунок 3.13). После того как пользователь вводит логин и пароль, данные представляются в виде параметров POST-запросов, которые посылаются на сервер, где сервер обрабатывает запрос, извлекает POST и передает управление и данные PHP-скрипту. После чего происходит проверка введенного логина и пароля с теми данными, что есть в базе данных. Если в базе данных есть пользователь с совпадающим логином и паролем, то в качестве ответа пользователь переходит в административную панель, иначе выводится сообщение об ошибке. Также реализована функция восстановления пароля. Исходя из политики безопасности, супер администратор не имеет возможности восстановить пароль. В листинге 3.3 представлена часть кода авторизации.
Рисунок 3.13 – Форма авторизации
Листинг 3.3 – Авторизация пользователей
class SecurityLoginManagerController extends modManagerController {
public $loadHeader = false;
public $loadFooter = false;
public function initialize() {
$this->handleLanguageChange();
return true;
}
public function checkPermissions() {
return true;
}
public function loadCustomCssJs() {}
public function process(array $scriptProperties = array()) {
$this->handleForgotLoginHash();
$this->preserveReturnUrl();
if (!empty($this->scriptProperties)) {
$this->handlePost();
}
$eventInfo=$this->modx-> invokeEvent('OnManagerLoginFormPrerender');
$eventInfo= is_array($eventInfo) ? implode("\n", $eventInfo) : (string) $eventInfo;
$this->setPlaceholder('onManagerLoginFormPrerender', $eventInfo);
$this->checkForActiveInstallation();
$this->checkForAllowManagerForgotPassword();
$eventInfo=$this->modx-> invokeEvent('OnManagerLoginFormRender');
$eventInfo= is_array($eventInfo) ? implode("\n", $eventInfo) : (string) $eventInfo;
$eventInfo= str_replace('\'','\\\'',$eventInfo);
$this->setPlaceholder('onManagerLoginFormRender', $eventInfo);
}...
Для добавления товаров в Web-приложение, реализован комплекс программных решений, которые позволяют стандартными средствами Фреймворка MODX добавлять товарные единицы. Для добавления товаров администратору необходимо создать новый ресурс, как только администратор нажимает кнопку сохранить товар, продукт заносится в соответствующую таблицу в базе данных. Механизм добавления товара представлен на рисунке 3.14.
Рисунок 3.14 – Этапы добавления товаров
Администратор может просматривать и изменять статусы, состояние заказов (рисунок 3.15). В части приложения заказы, администратор может увидеть информацию обо всех заказах:
-
номер заказа;
-
имя покупателя;
-
статус покупателя (новый, оплачен, отправлен, отменен);
-
вес;
-
доставка (самовывоз, курьер);
-
вариант оплаты (наличный расчет, безналичный расчет);
-
дата создания заказа;
-
дата изменения заказа.
Данная информация отображается в виде адаптивной таблицы, а также в подробной информации о каждом отдельно взятом заказе. Администратор также может оставлять комментарии к заказу, просматривать историю покупок совершенных покупателем. Так как со временем количество заказов будет расти, разработана система поиска, фильтрации и сортировки данных:
-
сортировка заказов по дате (с… до…);
-
фильтр по статусу;
-
фильтр по заказчику;
-
поиск (по номеру, email, комментарию).
Покупатель в свою очередь имеет возможность приобрести товар. Для этого он выбирает интересующие себя товары, добавляет их в корзину. Далее покупатели предоставляется возможность отредактировать корзину и оформить заказ. При оформлении заказа, покупатель может выбрать варианты доставки, а также способ оплаты покупки.
Рисунок 3.15 – Подробная информация о заказах
4 Внедрение проекта
4.1 Публикация Web-приложения
Для публикации Web-приложения приобретены доменные имена в доменных зонах .RU и РФ:
-
мобильныйкосметолог.рф;
-
mobkosm.ru;
-
аксиомакрасоты.рф;
-
aksiomakrasoty.ru;
и настроен редирект (перенаправление) со всех доменных имен на доменное имя мобильныйкосметолог.рф (листинг 4.1).
Листинг 4.1 – Редирект доменных имен
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^(www\.)?aksiomakrasoty\.ru$ [NC,OR]
RewriteCond %{HTTP_HOST} ^(www\.)?xn--80aaa4ajcmpesfho0k\.xn--p1ai$ [NC,OR]
RewriteCond %{HTTP_HOST} ^(www\.)?mobkosm\.ru$ [NC]
RewriteRule ^(.*)$ http://xn--90aeflfgfdcfiigcb7bt9mra.xn--p1ai/$1 [R=301,L]
Публикация Web-приложения осуществлена на виртуальном хостинге, предоставленным хостинг-провайдером Beget. Выбран тарифный план «Blog». Данный тарифный план предоставляет место для размещения двух Web-приложений, разрешенную нагрузку 65cp, разрешенную нагрузку на базу данных MySQL 2500cp, дисковую квоту 2000мб. Данный хостинг-провайдер выбран среди множества других компаний, которые предоставляют схожие услуги, из-за того, что Beget входит в ТОП-10 лучший хостинг-провайдеров на территории России. Сервера находятся между западом и востоком России. Так как 100% посетителей Web-приложения являются жителями Дальнего Востока, то это благоприятно влияет на скорость загрузки ресурса, за счет меньшего расстояния до физического хранилища данных.
После внедрения и публикации Web-приложения возникла необходимость проверить существование ошибок в коде, отвечающего за адаптивный дизайн. В этом помог сервис Яндекса – Яндекс.Вебмастер. Результаты проверки представлены на рисунке 4.1.
Рисунок 4.1 – Результат проверки мобильных страниц
Разработанное Web-приложение можно посмотреть по ссылке – http://мобильныйкосметолог.рф.
4.2 Продвижение Web-приложения
При анализе рынка было принято решение использовать следующие методы:
-
основной метод продвижения – контекстная реклама на площадке Яндекс;
-
дополнительный метод продвижения – SMM на площадках Вконтакте и Инстаграм.
Настройки для рекламной кампании были подобраны с учетом геотаргетированных параметров. Для более эффективного и оптимизированного продвижения время показа рекламы в сервисах Яндекс настроено с учетом рабочего времени компании: рекламные объявления показываются пользователям с понедельника по пятницу с 10:00 до 20:00, в субботу с 10:00 до 18:00, в воскресенье объявления не показываются. Также подобран оптимальный популярный список поисковых запросов. Стоимость рекламой кампании выставлена за клик, цена клика равна среднему значению за неделю 4 рубля. Фрагмент настроек рекламной кампании представден на рисунке 4.2.
Рисунок 4.2 – Фрагмент настроек рекламной кампании
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
