Проектирование пользовательского интерфейса

Особенностью пользовательского интерфейса данной системы является простота и логичность. Страница веб-сайта с помощью средств html разделена на блоки. В верхней части располагается логотип интернет магазина. В правой части располагается ссылка на корзину в пользовательской части сайта и ссылка выхода из подсистемы в администраторской части.

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

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

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

Основные веб-страницы сайта:

Администраторская часть:

•Главная страница сайта;

•Страница списка фирм с функциями добавления, редактирования и удаления записей;

•Страница списка моделей часов с функциями добавления, редактирования и удаления записей;

•Страница просмотра информации о заказах;

•Страница авторизации администратора;

Пользовательская часть:

•Главная страница;

•Страница со всеми моделями часов;

•Страница подбора часов по параметрам;

•Страница просмотра информации о фирмах;

•Страница корзины;

Одну из страниц сайта (главная пользовательская) можно увидеть на рисунке 5.

 

Рисунок 5 — Главная страница пользовательской части сайта

 

Реализация

Программная реализация

Данная система разрабатывалась на языке Perl с использованием веб-сервера Apache и sql-сервера MySQL. MySQL был выбран в качестве веб-сервера, потому что подходит для решения малых задач, имеет достаточную гибкость, а также является бесплатным.

Приложение использует клиент-серверную технологию. В качестве клиента выступает браузер пользователя, в качестве сервера – совокупность программно-аппаратных средств, необходимых для работы разработанной системы. На стороне клиента используется браузер, а на стороне сервера веб-сервер Apache, СУБД MySQL и CGI-программа на языке Perl. Диаграмма развертывания представлена на рисунке 6.

Рисунок 6 — Диаграмма развёртывания системы

Кодирование

Программа, реализованная в данном проекте, включает в себя следующие файлы:

- Пользовательская часть:

§ Index.pl – основной скрипт

§ Ind.pl – главная страница сайта

§ All_model – скрипт для вывода всех моделей часов магазина

§ Model_find – скрипт для подбора модели часов по параметрам

§ Firms.pl – отображает информацию о фирмах

§ Index.html – определяет расположение компонентов страницы

§ Setup.inf – хранит данные для подключения к базе данных

§ Basket.pl – отображает страницу для работы с содержимым корзины и отправки заявки на товар

§ Kvit.pm – модуль для отображения сгенерированной квитанции

§ Site.js – реализует функции для работы с корзиной

 

- Администраторская часть:

§ Admin.pl – основной скрипт админки

§ Ind.pl – главная страница администраторской части сайта

§ Firma.pl – страница для добавления и редактирования фирм

§ Model.pl – страница для редактирования и бобавления новых моделей в базу

§ Sale.pl – просмотр статистики заказов

§ Admin.html – определяет расположение компонентов страницы

 

Полностью программный код приведён в приложении А.

Тестирование

План тестирования представлен в таблице 9.

 

Таблица 9. План тестирования

Вариант использования	Действие	Что ожидаем	Итог
Авторизоваться на администраторской части сайта	Пользователь вводит неверный пароль и логин	Сообщение об ошибке	Страница ввода пароля приняла начальный вид, вывелось сообщение «Не верно» Рис Б-1
Авторизоваться на администраторской части сайта	Корректный ввод данных	Заходим на главную страницу сайта	После ввода аутентификационных данных вошли на главную страницу. Рис Б-2
Добавить новую модель часов	Корректный ввод данных	Добавление данных	Вывелось сообщение «Запись добавлена», при просмотре моделей видим добавленную модель Рис Б-3 Рис Б-4
Редактировать параметры часов	Корректный ввод данных	Изменение данных	Вывелось сообщение «Запись отредактирована», параметры часов изменены Рис Б-5, Рис Б-6, Рис Б-7
Удалить выбранную модель часов	Выбираем конкретную модель, нажимаемна кнопку.	Данные удалены	Вывелось сообщение «Запись удалена» из списка пропала модель, еоторую мы удалили Рис Б-8, Рис Б-9
Поиск часов по параметрам	Вводим в поля для запроса некорректные данные или параметры отсутствующие в базе	Программа ничего не подберет	Вывелось пустое окно с надписью «Извините, но по данным параметрам ничего подобрать не получилось»
Поиск часов по параметрам	Вводим в поля корректные данные	Программа выведет список часов	Программа вывела список часов с указанными в запросе характеристиками Рис Б-10, Рис Б-11
Добавить в корзину	Выбираем необходимую модель часов и нажимаем на кнопку	Товар занесен в корзину	Добавленный товар в корзине есть Рис Б-12, Рис Б-13
Отправляем запрос на товар	Вводим обязательные поля и нажимаем кнопку	Вывод квитанции	Выводится квитанция с данными о покупке и заказчике

 

Скриншоты тестирования приведены в приложении Б.

 

Заключение

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

—поиск товара по параметрам;

—добавление товара в корзину;

—запрос на заказ товаров;

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

Проект информационной системы разработан средствами СУБД MySQL. Приложение клиента реализовано с использованием языка Perl. На основе анализа полученных результатов можно сделать вывод, что все функции разработанной информационной системы работают корректно на всех наборах тестовых данных. Следовательно, цель курсового проектирования достигнута.