Для каждой страницы были подключены отдельные css-файлы, включающие в себя стили для более привлекательного внешнего вида страниц приложения-рисунок 3.
Рис. 3 Файлы стилей
А также использовались функции JS для определения нажатия кнопки «купить» при выборе товара, а также подтверждения статуса «В пути» - рисунок 4.
Рис. 4 Файл buy.js
4.Руководство пользователя
Для запуска приложения требуется перейти на index.php. Для клиентов сайта в приложении существуют такие функции как регистрация, вход в личный кабинет, просмотр заказов, оформление заказа. Для продавцов существуют такие функции как обработка заказов клиентов, а также добавление и удаление товаров из каталога.
Для того, чтобы совершить покупку требуется пройти авторизацию на сайте, сделать это можно нажав на кнопку авторизации - рисунок 5.
Рис. 5Авторизация в приложении
На странице авторизации можно ввести логин и пароль (рисунок 6), если клиент уже зарегистрирован, если же нет, можно выбрать регистрацию и перейти на другую страницу, где можно ввести свой логин и новый пароль.
Рис. 5 Авторизация в приложении
После авторизации клиент может выбрать товар с помощью поля поиска, либо по категории товара. После выбора можно приобрести товар, нажав на кнопку «Купить», тогда клиент перейдет на страницу оформления заказа, на которой нужно ввести электронный адрес почты, а также адрес получателя и нажать кнопку «Оформить» - рисунок 6.
Рис. 6Оформление заказа
После нажатия кнопки клиент перейдет на страницу подтверждения заказа. После этого можно проверить в личном кабинете клиента статус заказа.
Для продавца предусмотрена авторизация на странице seller.php. После авторизации пользователь попадает на страницу на которой можно обработать новые заказы и просмотреть те которые уже обработаны. Для того чтобы обработать заказ нужно нажать на кнопку подтвердить и заказ перейдет из статуса «В обработке» в статус «В пути». Просматривать те и другие заказы можно сортируя по статусу нажимая на соответствующие кнопки - рисунок 7.
Рис. 7Обработка заказов
Для того чтобы начать изменять товары в каталоге нужно на этой же странице нажать на кнопку «Работа с каталогом» тогда пользователь перейдет на другую страницу, на которой можно выбрать добавление нового товара в каталог, либо удаление существующего - рисунок 8.
Рис. 8 Работа с каталогом
При выборе добавления товара продавец переходит на страницу, где нужно заполнить поля названия товара, категории, цены и название картинки - рисунок 9.
Рис. 9 Добавление товара в каталог
При выборе удаления товара пользователь переходит на страницу, где требуется ввести название товара для его удаления из каталога - рисунок 10.
Рис. 10 Удаление товара из каталога