Файл: Проектирование и оформление Web-сайта электронного магазина.pdf
Добавлен: 22.04.2023
Просмотров: 226
Скачиваний: 7
СОДЕРЖАНИЕ
1. Техническое задание и выбор средств реализации
2. Описание модулей серверной части программы в их взаимодействие
2.1 Определение назначения разработки электронного магазина
3. Описание структуры базы данных и ее функций
3.2 Создание базы данных интернет-магазина
3.2 Разработка и оформление WEB-сайта электронного магазина
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.
Работоспособность в каждом из браузеров сохранялась полностью. Корректно работают, не только основные, но и второстепенные все разделы сайта.
Сохранен и протестирован:
- Функционал главной страницы
- Функционал страницы с карточкой товара
- Функционал формы оформления заказа
- Функционал личного кабинета
Различия во внешнем виде незначительны. Права доступа работают корректно.
Список литературы
Учебники, монографии, брошюры
- Акила, К. Интернет-магазин с нуля. Полное пошаговое руководство / К. Акила, А. Еремеевский. - М.: Питер, 2019. - 176 c.
- Басыров, Р. 1С-Битрикс. Строим профессиональный сайт и интернет-магазин / Р. Басыров. - М.: Книга по Требованию, 2018. - 544 c.
- Бирюков, П.И. Интернет-шопинг. Реальный путеводитель по виртуальным магазинам / П.И. Бирюков. - М.: Феникс, 2016. - 225 c.
- Богданов-Катьков, Н.В. Интернет для начинающих / Н.В. Богданов-Катьков, А.А. Орлов. - М.: Эксмо, 2019. - 384 c.
- Гаврилов, Л. П. Электронная коммерция: учебник и практикум для бакалавриата и магистратуры / Л. П. Гаврилов. — М. : Издательство Юрайт, 2018. — 363 с
- Гаевский, А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2018. – С. 32
- Конверс, Вильямс PHP 5 и MySQL. Библия пользователя / Конверс, др. Т. и. - М.: Вильямс, 2019. - 551 c.
- Крахоткина Е. В. Системы электронной коммерции и технологии их проектирования: учебное пособие, СКФУ, 2016 г. – 129 с.
- Кузнецов М.В. PHP. Практика создания Web-сайтов / Кузнецов, М.В. и. - М.: БХВ-Петербург, 2017. - 945 c.
- Мишин В. В., Мартиросян К. В. Интернет-технологии: учебное пособие - СКФУ 2015 г. – 106c
- Мишин В. В., Мартиросян К. В. Технологии Internet-коммерции: учебное пособие - СКФУ 2015 г. – 102c
- Рассел, Джесси Интернет-магазин / Джесси Рассел. - М.: VSD, 2017. - 230 c.
- Розенфельд, Л. Информационная архитектура в Интернете / Л. Розенфельд, П. Морвиль. - М.: СПб: Символ-Плюс; Издание 2-е, 2018. - 544 c.
- Салбер, Алена Как открыть интернет-магазин / Алена Салбер. - М.: SmartBook, 2016. - 320 c.
- Салбер, Алена Как открыть Интернет-магазин / Алена Салбер. - М.: Омега-Л, 2016. - 320 c.
- Сидоренко, Александр Анатомия прибыльного интернет-магазина / Александр Сидоренко. - М.: Издательские решения, 2019. - 595 c.
- Соловьев, Д. Интернет-магазин без правил / Д. Соловьев, А. Писарев. - М.: Питер, 2019. - 826 c.
- Соловьев, Д. Интернет-магазин без правил / Д. Соловьев, А. Писарев. - М.: Питер, 2019. - 213 c.
- Стеймец, Ульям. PHP. 75 готовых решений для вашего сайта +CD / Стеймец, Ульям. - М.: СПб: Наука и Техника, 2017. - 256 c.
- Ульман, Л. PHP и MySQL. Cоздание интернет-магазинов / Ларри Ульман. - М.: Вильямс, 2018. - 544 c.
- Успенский, И. Интернет как инструмент маркетинга / Игорь Успенский. - М.: СПб: BHV, 2018. - 256 c.
Интернет-ресурсы
- PwC: Всемирный обзор индустрии развлечений и СМИ: прогноз на 2017–2021 годы [Электронный ресурс]. – Режим доступа: https://www.pwc.ru/ru/assets/media-outlook-2017-rus.pdf – (Дата обращения: 18.04. 2020)
- PwC: Российский рынок видеоигр вырастет до $3,7 млрд к 2021 году [Электронный ресурс]. – Режим доступа: https://adindex.ru/news/tendencies/2017/08/16/161740.phtml – (Дата обращения: 03.04. 2020)
- Информация о Joomla! [Сайт]. – // URL: https://ru.wikipedia.org/wiki/Joomla! (Дата обращения: 09.04. 2020)
- Обзор хостинг провайдера TimeWeb [Сайт] – // URL: https://avenuesoft.ru/hosting/obzor_timeweb.html (дата обращения: 17.04. 2020)
- Описание CMS Drupal [Сайт]. – // URL: http://drupal.cmsmagazine.ru/ – (Дата обращения: 02.04. 2020)
- Официальный сайт WordPress [Сайт] // URL: https://ru.wordpress.org/download/ (дата обращения: 02.04.2020 г.)
- Плагин WooCommerce [Сайт] // URL: https://ru.wordpress.org/plugins/woocommerce/ (дата обращения: 17.04. 2020 г.)
- Рейтинг CMS для интернет-магазинов [Сайт] // URL: http://www.cloudcms.ru/tags/rejting_cms_dlja_internet_magazinov/ (дата обращения: 07.04. 2020 г.)
- Топ-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 |
Особенности |
Система известна своей мощной таксономией и возможностями по разметке, категоризации и организации сложного контента |
Система разрабатывалась в качестве платформы для сообществ с акцентом на социальные функции |
Простота является ключевым преимуществом как для новичков, так и для профессионалов. |