Разработка интернет-сайта с использованием фреймворка Angular Java-Script, библиотек Jquery и Modernizr

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

Созданная программа единого информационного пространства в виде WEB-сайта на примере фармацевтической компании КФ АО «Интерфарма-К» с использованием фреймворка Angular Java-Script (AngularJS) [1], библиотек jQuery [2] и Modernizr [3].

Структура сайта

WEB-сайт фармацевтической компании КФ АО «Интерфарма-К» состоит из четырнадцати основных файлов, четыре из которых имеют семь взаимосвязанных файлов, в соответствии со схемой 1.

Схема 1. Структура сайта

Описание программных моделей

Для создания программных модулей используется шаблон проектирования модель-представление-контроллер (MVC) [4]. Идея базируется на разделении бизнес логики и пользовательских интерфейсов.

Шаблон «Регистрация» - это модель, хранимая в сгенерированном файле, которая служит идентификатором [5]. Данная особенность позволяет осуществить перераспределение прав между пользователями системы и настроить маршрутизатор страничных путей.

Модель включает подключаемые файлы и маршрутизатор:

$surname = mb_convert_case(trim_strip($_POST['surname']), MB_CASE_TITLE, 'UTF-8'); /* Фамилия */

$name = mb_convert_case(trim_strip($_POST['name']), MB_CASE_TITLE, 'UTF-8'); /* Имя */

$mail = trim_strip($_POST['mail']); /* Емайл */

$cellular = trim_strip($_POST['cellular']); /* Номер телефона */

$password = trim_strip($_POST['password']); /* Пароль */ strlen($name) < 2 || strlen($name) > 60

|| preg_match(7(?=A.{8,30}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z]).*$/u', $password) || strlen($password) < 8 || strlen($password) > 30) { /* Валидация пользователя */

Шаблон «Авторизация» - это модель, хранимая в сгенерированном файле, которая создает сессию на сайте или перенаправляет посетителя на модель, отвечающую за регистрацию в случае ошибки входа в систему. Сессия активна до момента пока не будет закрыт браузер. Все сессионные данные клиента при авторизации хранятся во временной папке сервера в зашифрованном формате md5. Данный вид представляет собой 128-битный алгоритм хеширования [6].

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

$dir_curr = 'inc/pages/'; /* Каталог с файлами */

$dir = scandir($dir_curr); if (is_array($dir)) foreach ($dir as $name) { if ($name === '.' or $name === '..' or is_dir($dir_curr . $name)) continue;

if (preg_match('/A'. $curr . '(\.inc)?\.php/i', $name)) php */

$bool = true; /* Совпадение найдено */ return $res = $curr; }}} if ($bool) return $res; /* Показ файла */ return pages($split);

Шаблон «Корзина» - это модель, хранимая в сгенерированном файле, которая посылает асинхронный запрос к базе данный на получение информации о пользователе. Оформление товаров, возможно, осуществлять только авторизованным пользователям. Этап действий проверки шаблона «Корзина» базируется на следующих шагах:

• 1.    Проверка пользователя на авторизацию, а также уровень доступности (администратор, покупатель);

• 2.    Проверка корзины на наполненность товарами;

• 3.    Получение идентификаторов товаров, хранимых в временном хранилище браузера;

• 4.    Отправка SQL [6] запроса на выборку необходимых товаров, присутствующих в корзине;

• 5.    Проверка SQL запроса на корректность;

• 6.    Вывод товаров, а также подсчет общей суммы к оплате.

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

Шаблон «Прайс-лист» - это модель, хранимая в сгенерированном файле, которая посылает асинхронный запрос к базе данный на получение списка продукции. В случае возникновения ошибок, сформируется исключение на уровне ядра контроллера MVC, которое заблокирует доступ к системе. Данная особенность позволит исключить SQL инъекции [6] способные навредить WEB-сайту.

$caption_cr = 'Прайс-лист'; /* Заголовок навигации */ if ($level[0]['id'] !== 0) { /* Если открыт каталог, а не весь список */

Удаление нового товара из прайс-листа происходит, через скрытие товара, от покупателей. Данная процедура необходима в связи с тем, что, в случае единичной и более покупок товара, происходит ссылочное объединение идентификатора товара с идентификатор покупателя. Поэтому в случае полного удаление будет вызвано критическое исключение с возникновением нецелостности базы данный сайта. Что может привести к непредвиденным ситуациям, позволяющим произвести взлом сайта, через SQL инъекции.

return false;}if (deleteT_arr[1] == 9) { /* Если второй элемент массива будет равен 6, это будет означать, что список товаров не найден */ deleteT_res_err('Данные о товаре не найдены ...');

return false;} if (deleteT_arr[1] == 1) { /* Если второй элемент массива будет равен 1, это будет означать, что заказ принят */ blocker_text.fadeOut(150, function() {

$(this).addClass('invert').text('Товар успешно удален

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

if ($_SERVER['REQUEST_METHOD'] === 'POST') { /* Метод 'POST' */ if ($val_search !== '') {

$count = 2; /* Количество хлебных крошек */

$search = $val_search; /* Искомые товары */

$page_head = $search; /* Хлебная крошка */

$sql_5 = "AND price.nomenclature LIKE '%$page_head%'";

} else if (empty($_POST['section_0'])) { /* Не выбран весь список */

$in = 0; foreach ($arr_catalogs as $key => $val)

Руководство пользователя

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

Доступ и разграничение прав доступа

Для осуществления регистрации на сайте необходимо нажать «Регистрация» в верхнем меню навигации.

Электронная форма для регистрации пользователя на сайте имеет вид в соответствии с рисунком 1.

Рисунок 1. Электронная форма регистрации

В случае успеха авторизации сайт автоматически перенаправит пользователя на страницу авторизации. По умолчанию пользователю присваиваются права полноценного покупателя.

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

Работа с каталогом товаров

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

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

Просмотр товаров, которые поступили в период последних тридцати дней производится при помощи нажатия на ссылку «Последнее поступление», которая расположена в верхней части сайта.

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

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

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

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

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

Оформления товаров

Покупку определенных товаров возможно осуществлять, только 8

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

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

Административная панель

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

Добтаегь toeep

BevOepti/Me лриилкнЭи/легш *

ftoouMOOumeAb                                           •

• •V^u^e 6vflHtiNv*e npo^^M^fiw

Siwrititwmp *длн1лог *

АоЮлр/лшрнм                                            *

зуолиепв всего tieedtime /повар *

HV'Mrjm» woihjmie „ямвл^

Vruwiww rpO* rodKVCTXK/ *

Дойавитк товар

Рисунок 2. Форма добавления нового товара

В заключении можно сказать, что единое информационное пространство в виде WEB-сайта на примере фармацевтической компании КФ АО «Интерфарма-К» позволяет оптимизировать работу по продаже медикаментов, а также осуществить полную автоматизация документооборота.