Диаграмма последовательности

На рисунках 3-5 показаны диаграммы последовательности при выполнении различных функций сайта.

На рисунке 3 представлен процесс регистрации пользователя. После введения данных логина и пароля, данные идут на сервер, где обрабатываются при помощи валидатора. Сообщение о правильности или не правильности введенных данных выводится на экран пользователю. А также при правильном введении данных, логин и пароль записываются в БД. После чего выводится сообщение об успешной регистрации.

Рисунок 3 – Вход пользователя

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

Рисунок 4 – Добавление нового автомобиля

На рисунке 5 показан процесс подачи заявки на приобретение автомобиля на сайте. После введения данных они проверяются на ошибки и после передаются на сервер, который делает запрос в БД. После чего при успешной записи выводится сообщение «Ваша заявка была успешно записана». Если данные не записались – выводится сообщение об ошибке.

Рисунок 5 – Заявка на приобретение

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

Для пользователей и администратора системы был реализован следующий интерфейс:

Страница автомобилей модели А3 на рисунке 6.

Рисунок 6 – Модели А3

 

Главная страница показана на 7 рисунке.

Рисунок 7 - Главная страница

 

На 8 рисунке показан пример новостной страницы сайта

Рисунок 8 - Новостная страница

Руководство администратора

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

Рисунок 9 - Форма входа

Для просмотра уже имеющихся автомобилей в БД, необходимо нажать кнопку «Просмотр БД» в левой части экрана (рисунок 10).

Рисунок 10 – Кнопка просмотра БД

После нажатия, открывается модальное окно со всеми данными каждого автомобиля в базе данных. На рисунке 11 показан вид страницы при нажатой кнопке «Просмотр БД».

 

Рисунок 11 – Модальное окно с данными БД

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

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

Все заполняемые поля показаны на рисунке 12.

Рисунок 12 – Поля для заполнения

Также для добавления фотографии автомобиля, администратор выбирает локальный файл типа.jpg,.png в директории используемого устройства (рисунок 13).

Рисунок 13 – Выбор картинки для добавления

Ввод данных, если одно поле оставлено пустым, невозможен – система будет выдавать ошибку о незаполненности определенного поля (14 рисунок).

Рисунок 12 – Ошибка при отправке

    Удаление данных из БД осуществляется через модальное окно, где отображаются все автомобили. Для удаления, администратор нажимает кнопку в верхнем левом углу окна, каждая кнопка привязана к одним данным автомобиля (рисунок 13).

Рисунок 13 – Удаление данных

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

Для выхода из админ-панели необходимо нажать на кнопку «Выйти» (рисунок 14).

Рисунок 14 – Выход

После нажатия на кнопку, администратор перейдет на главную страницу сайта.

 

Экономическая часть