Файл: Проектирование и оформление Web-сайта электронного магазина.pdf

3.2 Разработка и оформление WEB-сайта электронного магазина

Первым этапом разработки является установка CMS WordPress на заранее выбранный нами хостинг – TimeWeb. Для этого необходимо по FTP загрузить дистрибутив WordPress на FTP сервер выбранного хостинга с помощью программы FileZilla (Рис. 4).

Рис. 4 – FTP программа FileZilla

Затем необходимо зайти на сайт и начать процедуру установки CMS WordPress (Рис. 5).

Рис. 5 – Установка WordPress

Затем необходимо установить плагин для создания интернет-магазина под названием WooCommerce (Рис. 6).

Рис. 6 – Установка WooCommerce

После установки плагина WooCommerce необходимо подобрать соответствующий дизайн сайта. В данном случае мы воспользуемся собственной разработкой (Рис. 7)

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

Для привлечения покупателей необходимо реализовать блок с самыми посещаемыми разделами и новыми товарами, которые могут заинтересовать покупателей (Рис. 8).

Рис. 8 – Блок востребованных разделов и новых поступлений товара

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

Рис. 9 – Основные особенности Интернет-магазина

Для продвижения товара, который пользуется особенным спросом используется блок на главной странице (Рис. 10), что в целом способствует повышению взаимодействия с сайтом и росту показателей продаж.

Рис. 10 – Продвижение товара на главной странице Интернет-магазина

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

Рис. 11 – Панель управления интернет-магазином

В данной главе были рассмотрены основные этапы установки CMS WordPress, основные страницы и разделы интернет-магазина. В качестве осуществления функций интернет-магазина используется плагин –WooCommerce.

4. Описание структуры клиентской части

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

Для заказа с интернет-магазина необходимо перейти в каталог магазина и выбрать интересующий товар из списка всех доступных товаров (Рис. 12).

Рис. 12 – Каталог интернет-магазина

После выбора товара откроется карточка товара (Рис. 13), на которой присутствует вся необходимая информация, а также отзывы клиентов, которые уже заказывали этот товар.

Рис. 13 – Карточка товара

После нажатия клавиши «В КОРЗИНУ» товар помещается в корзину. Можно продолжить покупки на сайте, а можно перейти к оформлению заказа (Рис. 14).

Рис. 14 – Добавление товара в корзину

После нажатия на кнопку «КУПИТЬ» пользователя переносят на страницу оформления заказа (Рис. 15), где он может окончить покупку и сообщить все данные для доставки товара по месту назначения.

Рис. 15 – Оформление заказа

Если пользователь не введет часть данных, то форма оформления заказа сообщит об ошибке, которую допустил пользователь – «Поле Адрес является обязательным полем», что напоминает и сообщает о том, что не заполнил пользователь (Рис. 16).

Рис. 16 – Ошибка заполнения формы заказа

После завершения оформления заказа сайт сообщит всю необходимую информацию и уведомит о скором контакте со стороны менеджеров сайта с дальнейшим подтверждением данных и их уточнением (дата доставки и т.д.) (Рис. 17).

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

После оформления заказа – менеджеру и администраторам сайта поступает информация о новом заказе в панель управления сайтом.

Для входа в панель управления (админ панель) сайта существует специальный раздел, на который должен зайти администратор и совершить вход.

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

Рис. 18 – Неудачная попытка входа в Панель Управления

На рисунке 18 продемонстрированно, что при попытке входа в панель управления с недействительным или неверным паролем – будет выведено сообщение об ошибке.

Рис. 19 – Уведомление о заказе в Панели Управления сайтом

Панель управления сайтом автоматически обновляет информацию всего, что касается сайта, а виджет «Статус WooCommerce» (Рис. 19) сообщает о всех поступивших заказах в процессе реального времени.

Рис. 20 – Список заказов

Так же в WooCommerce присутствует более подробный раздел со списком всех заказов, которые были совершены. (Рис. 20)

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

Рис. 21 – Детали оформленного заказа клиента

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

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

Заключение

В данной курсовой работе произведено проектирование и разработка WEB-сайта электронного магазина.

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

В качестве основы были взяты CMS WordPress и плагин WooCommerce.

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

Тестирование производилось в браузерах Chrome версии 69.0.3497.100, Firefox версии 62.0, Opera версии 55.0.2994.44, Edge версии 41.16299.15, а также в Internet Explorer версии 11.0.

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

Сохранен и протестирован:

• Функционал главной страницы
• Функционал страницы с карточкой товара
• Функционал формы оформления заказа
• Функционал личного кабинета

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

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

Учебники, монографии, брошюры

1. Акила, К. Интернет-магазин с нуля. Полное пошаговое руководство / К. Акила, А. Еремеевский. - М.: Питер, 2019. - 176 c.
2. Басыров, Р. 1С-Битрикс. Строим профессиональный сайт и интернет-магазин / Р. Басыров. - М.: Книга по Требованию, 2018. - 544 c.
3. Бирюков, П.И. Интернет-шопинг. Реальный путеводитель по виртуальным магазинам / П.И. Бирюков. - М.: Феникс, 2016. - 225 c.
4. Богданов-Катьков, Н.В. Интернет для начинающих / Н.В. Богданов-Катьков, А.А. Орлов. - М.: Эксмо, 2019. - 384 c.
5. Гаврилов, Л. П. Электронная коммерция: учебник и практикум для бакалавриата и магистратуры / Л. П. Гаврилов. — М. : Издательство Юрайт, 2018. — 363 с
6. Гаевский, А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2018. – С. 32
7. Конверс, Вильямс PHP 5 и MySQL. Библия пользователя / Конверс, др. Т. и. - М.: Вильямс, 2019. - 551 c.
8. Крахоткина Е. В. Системы электронной коммерции и технологии их проектирования: учебное пособие, СКФУ, 2016 г. – 129 с.
9. Кузнецов М.В. PHP. Практика создания Web-сайтов / Кузнецов, М.В. и. - М.: БХВ-Петербург, 2017. - 945 c.
10. Мишин В. В., Мартиросян К. В. Интернет-технологии: учебное пособие - СКФУ 2015 г. – 106c
11. Мишин В. В., Мартиросян К. В. Технологии Internet-коммерции: учебное пособие - СКФУ 2015 г. – 102c
12. Рассел, Джесси Интернет-магазин / Джесси Рассел. - М.: VSD, 2017. - 230 c.
13. Розенфельд, Л. Информационная архитектура в Интернете / Л. Розенфельд, П. Морвиль. - М.: СПб: Символ-Плюс; Издание 2-е, 2018. - 544 c.
14. Салбер, Алена Как открыть интернет-магазин / Алена Салбер. - М.: SmartBook, 2016. - 320 c.
15. Салбер, Алена Как открыть Интернет-магазин / Алена Салбер. - М.: Омега-Л, 2016. - 320 c.
16. Сидоренко, Александр Анатомия прибыльного интернет-магазина / Александр Сидоренко. - М.: Издательские решения, 2019. - 595 c.
17. Соловьев, Д. Интернет-магазин без правил / Д. Соловьев, А. Писарев. - М.: Питер, 2019. - 826 c.
18. Соловьев, Д. Интернет-магазин без правил / Д. Соловьев, А. Писарев. - М.: Питер, 2019. - 213 c.
19. Стеймец, Ульям. PHP. 75 готовых решений для вашего сайта +CD / Стеймец, Ульям. - М.: СПб: Наука и Техника, 2017. - 256 c.
20. Ульман, Л. PHP и MySQL. Cоздание интернет-магазинов / Ларри Ульман. - М.: Вильямс, 2018. - 544 c.
21. Успенский, И. Интернет как инструмент маркетинга / Игорь Успенский. - М.: СПб: BHV, 2018. - 256 c.

Интернет-ресурсы

1. PwC: Всемирный обзор индустрии развлечений и СМИ: прогноз на 2017–2021 годы [Электронный ресурс]. – Режим доступа: https://www.pwc.ru/ru/assets/media-outlook-2017-rus.pdf – (Дата обращения: 18.04. 2020)
2. PwC: Российский рынок видеоигр вырастет до $3,7 млрд к 2021 году [Электронный ресурс]. – Режим доступа: https://adindex.ru/news/tendencies/2017/08/16/161740.phtml – (Дата обращения: 03.04. 2020)
3. Информация о Joomla! [Сайт]. – // URL: https://ru.wikipedia.org/wiki/Joomla! (Дата обращения: 09.04. 2020)
4. Обзор хостинг провайдера TimeWeb [Сайт] – // URL: https://avenuesoft.ru/hosting/obzor_timeweb.html (дата обращения: 17.04. 2020)
5. Описание CMS Drupal [Сайт]. – // URL: http://drupal.cmsmagazine.ru/ – (Дата обращения: 02.04. 2020)
6. Официальный сайт WordPress [Сайт] // URL: https://ru.wordpress.org/download/ (дата обращения: 02.04.2020 г.)
7. Плагин WooCommerce [Сайт] // URL: https://ru.wordpress.org/plugins/woocommerce/ (дата обращения: 17.04. 2020 г.)
8. Рейтинг CMS для интернет-магазинов [Сайт] // URL: http://www.cloudcms.ru/tags/rejting_cms_dlja_internet_magazinov/ (дата обращения: 07.04. 2020 г.)
9. Топ-10 самых популярных CMS в мире 2017 [Сайт]. – // URL: https://sdvv.ru/articles/testovyy-razdel/top-10-samykh-populyarnykh-cms-v-mire-2017/ – (Дата обращения: 02.04. 2020)

Приложения

Приложение А. Сравнение CMS WordPress

Таблица 3. Сравнение CMS WordPress с другими популярными CMS

Продолжение таблицы 3