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

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 22.04.2023

Просмотров: 226

Скачиваний: 7

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

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

Drupal

Joomla

WordPress

Оф. сайт

drupal.org, русскоязычное сообщество drupal.ru

joomla.org, русскоязычный форум joomla-support.ru

wordpress.org, русскоязычный раздел ru.wordpress.org

Описание

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

Компромисс между ориентированным на разработчика, но более гибким Drupal и дружелюбной к пользователю WordPress

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

Примеры сайтов, работающих на CMS

Fast Company, Team Sugar

MTV Networks Quizilla, Harvard University, IHOP

PlayStation Blog, CNN Political Ticker, NASA Ames Research Center

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

Drupal

Joomla

WordPress

Простота использования

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

Проще Drupal, сложнее WordPress. Относительно ненапрягающая установка и настройка в совокупности с нетребовательностью к затратам времени на понимание структуры и терминологии дают возможность самостоятельно построить весьма сложный сайт

Технические знания в данном случае совсем не обязательны. WordPress простая и интуитивная. С ее помощью можно чрезвычайно быстро создать простой сайт. Также WordPress привлекает возможностью без труда переносить текст из текстовых документов на сайт, чем не могут похвастать Drupal и Joomla

Особенности

Система известна своей мощной таксономией и возможностями по разметке, категоризации и организации сложного контента

Система разрабатывалась в качестве платформы для сообществ с акцентом на социальные функции

Простота является ключевым преимуществом как для новичков, так и для профессионалов.