Создание интернет магазина на примере склада инструментов

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

В соответствии с поставленной задачей интерфейс пользователя включает в себя следующие функциональные страницы:

1. Главная страница — лицо сайта — имеет в своем составе товары (инструменты), рекомендуемые к продаже (рис. 6).

Рис. 6. Главная страница Интернет магазина.

2. Каталог товаров представляет все товары выбранной категории. Инструмент может принадлежать многим категориям одновременно. Каталог предусматривает фильтр товаров по основным характеристикам, а также по цене (рис. 7).

Рис. 7. Каталог товаров.

3. Страница с описанием товара демонстрирует информацию о данном инструменте, включая такие характеристики как наименование, описание, модель, количество на складе и др. (рис. 8).

Рис. 8. Страница товарной позиции.

4. Просматривая инструменты, пользователь может совершать покупки, помещая выбранные товары в покупательскую корзину (рис. 9).

Рис. 9. Покупательская корзина.

5. Страница оформления товара позволяет зарегистрированному пользователю оформить покупку, а незарегистрированному — пройти процедуру регистрации (рис. 10).

Рис. 10. Страница оформления товара.

6. В случае успешного оформления заказа покупатель перенаправляется на страницу (рис. 11).

Рис. 11. Успешное оформление заказа.

3.

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

Главная страница администрирования отражает текущее положение продаж, количество посетителей сайта онлайн в графическом виде (рис. 12).

Рис. 12. Главная страница администрирования.

Аналитическая и статистическая информация содержится в разделе «Отчеты», где отражены сделанные заказы в табличном виде (рис. 13).

Рис. 13. Страница отчетов по продажам.

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

Рис. 14. Список товаров.

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

Рис. 15. Список категорий.

Разработанные интерфейсы пользователя и администратора позволяют через экранные формы выполнять все заявленные в задании функции.

4. Тестирование приложения Тестирование готового приложения является неотъемлемой частью процесса разработки. Для web-приложений существуют следующие виды тестов:

1. Модульные тесты, проверяющие соответствие между заданным набором входных данных и желаемым результатом. Модульные тесты позволяют протестировать отдельный PHP класс.

2. Функциональные тесты, позволяют протестировать приложение целиком. Эти тесты имитируют различные поведения пользователя на сайте.

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

Листинг 1 представляет тесты и результаты тестирования пользовательского интерфейса. Назначение каждого теста описано в комментариях к коду.

<?php.

namespace TestsAppBundleController;

use SymfonyBundleFrameworkBundleTestWebTestCase;

class DefaultControllerTest extends WebTestCase.

{.

/* Тест № 1.

* Тест на доступность главной страницы сайта.

* Проверяем, что код возврата равен 200 (OK).

*/.

public function testIndex ().

{.

$client = static: createClient ();

$crawler = $client->request ('GET', '/');

$this->assertEquals (200, $client->getResponse ()->getStatusCode ());

}.

/* Тест № 2.

* Проверка несуществующего товара.

* Товара с таким идентификатором нет в базе данных.

*/.

public function testNotFound ().

{.

$client = static: createClient ();

$crawler = $client->request ('GET', '/product/145');

$this->assertTrue ($client->getResponse ()->isNotFound ());

}.

/* Тест № 3.

* Проверка того, что формат ответа — JSON.

*/.

public function testAjax ().

{.

$client = static: createClient ();

$crawler = $client->request ('GET', '/bye', [.

'id' => 5, // параметры запроса.

'size' => 1.

]);

$this->assertTrue (.

$client->getResponse ()->headers->contains (.

'Content-Type',.

'application/json'.

),.

'Ошибка!'); // показывается в случае «провала» теста.

}.

}.

Результаты тестирования доступны в виде вывода программы PHPUnit.

~/sklad$ phpunit.

PHPUnit 6.

1.3 by Sebastian Bergmann and contributors.

… 3 / 3 (100%).

Time: 769 ms, Memory: 68.63MB.

OK (3 tests, 3 assertions).

Из листинга видно, что все тесты пройдены успешно.

Заключение

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

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

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

Разработанное приложение соответствует стандартам, принятым в области веб разработки, в частности HTML5, CSS3 и JavaScript.

Список литературы

Орлов Л. Как создать электронный магазин в Интернет. М.: Бук-пресс, 2006.

Котеров Д.В. PHP5 в подлиннике, 2 изд. СПб.: BVH, 2008.

Акила К., Еремеевский А. Интернет-магазин с нуля. Полное пошаговое руководство. СПб.: Питер, 2013.

Басыров Р. 1С-Битрикс. Строим профессиональный сайт и интернет-магазин. СПб.: Питер, 2009.

Юрасов А. В. Электронная коммерция. М.: Дело, 2003.

Денисова А. Л., Молоткова Н. В., Блюм М. А. Электронная коммерция: основы организации и ведения бизнеса: учебное пособие. Тверь.: Изд-во «ТГТУ», 2012.

Веллинг Л., Томсон Л. Разработка веб-приложений с помощью PHP и MySQL. Вильямс, 2016.

Мишель Е. Дэвис, Джон А. Филлипс. Изучаем PHP и MySQL. Символ-Плюс, 2008.

Матевосов А. Основы Symfony 3 и не только. GitBook, 2014.

Сильвио Морето. Bootstrap в примерах. М.: ДМК Пресс, 2017.

Шаблон администратора.

Шаблон пользователя.

Пользователь.

Администратор

База данных.

Модель «Заказы».

Модель «Товары».

Контроллер администратора.

Контроллер пользователя.

CMS.