- •Содержание
- •Введение
- •Описание предметной области
- •Постановка задачи и обзор методов ее решения
- •3. Обоснование инструментов разработки
- •4. Реализация
- •4.1 Логическая структура Web-приложения
- •4.2 Физическая структура Web-приложения
- •4.4 Описание ограничений доступа к данным
- •4.3 Описание структуры и формата страниц
- •4.5 Описание используемых библиотек и элементов управления
- •4.6 Описание используемых функций и процедур
- •5. Тестирование
- •6. Применение
- •6.1 Назначение и область применения Web-приложения
- •6.2 Описание организации диалога с пользователем
- •6.3 Программно-аппаратное обеспечение сервера и клиента
- •6.4 Руководство пользователя
- •Заключение
- •Список литературы
- •Приложение
4.5 Описание используемых библиотек и элементов управления
Используемые библиотеки сайта расположены в двух местах: в папке node_modules находятся все модули и библиотеки, используемые в серверной части приложения для Node.js, а в папке public содержаться библиотеки, используемые на стороне клиента интернет-магазина.
Рисунок 4.5.1. – Библиотека.
4.6 Описание используемых функций и процедур
После подтверждения, набранного URL пользователем в адресной строке, браузер открывает главную страницу на основе шаблона index.html (из папки public/templates). Данный файл выполняет следующие функции:
загрузка библиотек и функций;
формирование переменных;
предварительный запуск модуля myApp;
определение подключаемого шаблона;
подключение шаблона;
вывод шаблона.
Для корректного и структурного отображения страниц использованы каркасы, реализованные средствами HTML и CSS. Динамические данные отображаются в нужных местах благодаря использованию MVC архитектуры на основе библиотеки AngularJS.
Шаблоны:
index.html;
about.html;
cart.html;
categories.html
goods.html
home.html
login.html
profile.html
shipping.html
В шаблоны динамически подставляются необходимые данные из JavaScript благодаря AngularJS и связи View – Controller. Котроллеры для всех страниц находятся в файле app.js (из папки public). В них реализована логика всех событий, обрабатываемых на страницах интернет-магазина.
5. Тестирование
Совместимость сайта с различными браузерами и разными настройками браузеров производилось на последних версиях браузера, в соответствии с таблицей 5.1.
Таблица 5.1 – совместимость с браузерами.
Браузер |
Оценка |
Google Chrome |
Положительная. Все эффекты работают отлично. |
Mozilla Firefox |
Положительная. Все эффекты работают отлично. |
Opera |
Положительная. Все эффекты работают отлично. |
Windows Internet Explorer |
Нежелательно. Некоторые эффекты не работают. |
Для правильности работы сайта, рекомендуется использовать Google Chrome версию 31 и выше.
При вводе в адресную строку не существующий адрес страницы пользователя автоматически перенаправит на главную страницу сайта.
При регистрации на сайте необходимо заполнить все поля, если поля будут не заполнены отобразится ошибка, в соответствии с рисунком 5.2.
Рисунок 5.2 – Ошибка незаполненного поля при регистрации.
Данная валидация производится с помощью html5 возможностей, в частности с помощью атрибута «required». В случае, если два введенных при регистрации пароля не совпадают отобразится ошибка, в соответствии с рисунком 5.3.
Рисунок 5.3 – Ошибка несовпадающих паролей при регистрации.
Если введенный логин уже зарегистрирован отобразится ошибка, в соответствии с рисунком 5.4
Рисунок 5.4 – Ошибка занятого логина при регистрации.
Если при авторизации пользователь введет неправильный пароль отобразится ошибка, в соответствии с рисунком 5.5
Рисунок 5.5 – Ошибка неверного пароля при авторизации.
При успешной регистрации или авторизации, пользователь будет перенаправлен на страницу «Каталог». Для корректного функционирования сайта в браузере должна быть включена поддержка использования сценариев JavaScript.
