Техническое задание и выбор средств реализации

Содержание:

Введение

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

Создание интернет-магазина снизит затраты бизнеса на содержание офлайн помещения, увеличит поток клиентов людьми из других городов и населённых пунктов. Также создание сайта будет сопутствовать распространению информации про компанию и таким образом будет способствовать развитию бизнеса. Продвижение в Интернете сейчас является одним из ключевых факторов в продвижении бизнеса. Именно с помощью продвижения в сети можно обогнать локальных конкурентов и увеличить количество постоянных клиентов. Основное преимущество от созданного сайта - это то, что клиент сможет узнать информацию о магазине цветов 24 часа в сутки 7 дней в неделю.

Объект исследования данной курсовой работы – веб-программирование.

Предметом исследования данной курсовой работы является проектирование и разработка сайтов в Интернете.

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

Основные задачи курсовой работы – это разработать структуру серверной и клиентской частей сайта интернет-магазина и спроектировать сайт. Также необходимо спроектировать базу данных и выбрать технические и программные средства для реализации проекта.

Для достижения поставленной цели необходимо осуществить решение следующих задач:

• Выбрать технологии для создания сайта
• Составить список требований к приложению
• Провести анализ данных
• Осуществить разработку интернет-магазина
• Описать ход разработки интернет-магазина цветов

1. Техническое задание и выбор средств реализации

Для того чтобы обеспечить полноценную работу интернет-магазина «Flawery» необходимо реализовать такие функции:

• Информационная функция сайта
• Рекламная функция сайта
• Брендовая функция сайта

Рассмотрим детальнее функции интернет-магазина.

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

Рекламная функция сайта тесно связана с информационной функцией. Информационная функция является частью рекламной функции. Рекламная функция заключается в распространении информации и увеличению количества клиентов интернет-магазина цветов. Рекламная функция способствует развитию бизнеса, что способствует развитию флористики в стране.

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

Технические требования к разделам сайта:

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

• Главный раздел - описывает детально интернет-магазин цветов и содержит ссылки на остальные разделы.
• Раздел «О нас» - описывает детально интернет-магазин.
• Раздел «Цены» - содержит цены на цветы, которые продаются в интернет-магазине.
• Раздел «Отзывы» - содержит отзывы клиентов интернет-магазина цветов.
• Раздел «Наши работы» - содержит информацию про букеты, композиции и цветы в горшках, которые продаются в интернет-магазине.
• Раздел «Как связаться» - содержит информацию про то как связаться с интернет-магазином, контакты, адрес, ссылки на социальные сети.

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

Актуальность данных технологий объясняется их распространением. HTML и CSS используются в реализации всех веб-ресурсов в интернете, поскольку все веб-страницы содержат описание разметки на языке HTML, поскольку именно этот язык интерпретируется всеми браузерами и поддерживается всеми версиями браузеров.

CSS используется в связке с HTML и так само широко распространён как и HTML. Поддержка CSS такая же, как и у HTML - он поддерживается всеми браузерами и всеми версиями браузеров. Используется как средство описания и оформления внешнего вида сайта.

JavaScript используется как встроенный язык доступа клиентской части к объектам приложения. JavaScript является одним из самых распространённых языков программирования, особенно для клиентской части приложений. JavaScript зачастую используется как дополнение к технологиям HTML и CSS по время веб-разработки.

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

Для реализации веб-сайта также необходимо выбрать IDE с помощью, которой будет происходить разработка веб-сайта. Для реализации данной курсовой работы был выбран редактор исходного кода Visual Studio Code. Основные позитивные стороны редактора состоят в том, что он поддерживает ряд языков программирования, среди которых есть все языки, которые будут использоваться для разработки интернет-магазина. Visual Studio Code также имеет поддержку контроля версий Git, что позитивно влияет на разработку системы. Visual Studio Code имеет поддержку плагинов, доступных через Visual Studio Marketplace посредством встроенной в продукт системы можно загрузить и установить несколько тысяч расширений только в категории языки программирования.

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

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

Рис. 1 - Дерево функций

Сайт должен содержать реализацию таких страниц:

• Главная страница сайта
• Страница «Оформление заказа»
• Страница раздела «Отзывы»
• Страница раздела «Цены»
• Страница «О нас»
• Страница каталога
• Страница «Контакты»

Детально структура страниц описана на рисунке структуры клиентской части сайта, изображенном ниже.

Рис. 2 - Структура клиентской части сайта

2.Описание модулей серверной части программы и их взаимодействие.

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

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

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

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

Далее на рисунке детально изображена структура серверной части сайта.

Рис. 3 - Структура серверной части сайта

На схеме видно, как происходит взаимодействие серверной и клиентской частей сайта: веб-сервер извлекает запрошенную страницу сайта из своей файловой системы и возвращает HTTP-ответ, содержащий документ и успешный статус запроса. Если файл не может быть извлечен по каким-либо причинам, возвращается статус ошибки.

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

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

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

Основные модули приложения это :

• Основная процедура работы вебсайта
• Форма «Оформление заказа»
• Форма «Отзывы»
• Форма «Цены»
• Форма «Цены»
• Форма «О нас»
• Форма «Каталог»
• Форма «Контакты»

Детально взаимодействие модулей описано с помощью дерева вызова программных модулей на рисунке ниже.

Рис. 4 - Дерево вызовов программных модулей

Далее в таблице описано программные модули и их описание.

№	Название программного модуля	Описание программного модуля
1	Основная форма работы	Главный модуль выполняющий роль описания сайта и связывает все модули программы
2	Форма «Отзывы»	Экранная форма содержащая информацию об отзывам клиентов интернет-магазина
3	Форма «Цены»	Экранная форма содержащая информацию об ценах на цветы в интернет-магазина
4	Форма «О нас»	Экранная форма содержащая информацию об интернет-магазине, реализует описательную функцию
5	Форма «Каталог»	Экранная форма содержащая информацию про товары , продукцию интернет-магазина
6	Форма «Контакты»	Экранная форма содержащая информацию об контактах интернет-магазина
7	Форма «Оформление заказа»	Экранная форма с помощью которой осуществляется заказ продукции в интернет-магазине

Табл. 1 - Таблица с описанием программных модулей

Описание структуры базы данных и ее функций

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

MySQL поддерживается многими платформами. Среди основных преимуществ MySQL отмечают следующие:

• Масштабируемость. MySQL может поддерживать работу БД внушительных размеров, подтверждающие ее реализации в Yahoo !, Google, HP, Associated Press. Согласно документации, прилагаемой к MySQL, некоторые БД, используемых компанией MySQL, хранят до 50 млн. Записей.
• MySQL работает на разных платформах, среди которых Unix, Linux, Windows, OS / 2, Solaris, Mac OC. Кроме того, MySQL работает на разных платформах.
• Связанность. MySQL имеет сетевую структуру. К MySQL можно получать доступ из любой точки Internet нескольким пользователям одновременно. MySQL имеет целый ряд программных интерфейсов приложений, которые позволяют взаимодействовать с MySQL из приложений, написанных на таких языках как С, С ++, Perl, PHP, Java, Python.
• Безопасность. MySQL имеет систему контроля доступа к данным, обеспечивает шифрование данных при передаче.
• Скорость функционирования.
• Удобство эксплуатации. MySQL достаточно удобно устанавливается и реализуется, легко администрируется.
• Открытый код.

MySQL - характеризуется большой скоростью, устойчивостью и простотой использования, была разработана для повышения быстродействия обработки больших баз данных.

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

Рис. 5 - Структура базы данных

База данных для сайта состоит из трёх таблиц:

• Таблица «Пользователь»
• Таблица «Заказ»
• Таблица «Продукт»

Таблица «Пользователь» содержит информацию про пользователей системы, а именно их имена, email и историю заказов.

Таблица «Заказ» содержит информацию про заказы, осуществлённые в системе, а именно пользователя, который осуществил заказ, продукт, который приобрёл пользователь и дату заказа.

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

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

• 1. Описание интерфейса «Обычный пользователь».

Интерфейс сайта состоит из HTML-страниц, оформленных с помощью CSS-стилей. Сайт состоит из таких страниц:

• Главная страница сайта
• Страница «О нас»
• Страница «Цены»
• Страница «Отзывы»
• Страница «Наши работы»
• Страница «Как связаться»
• Страница «Оформление заказа»

С помощью этих страниц осуществляется реализация трёх основных функций сайта.

Каждая из страниц сайта имеет своё наполнение и осуществляет определённую функцию, описанную ниже по тексту.

• 1. Инструкция пользователя.

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

Рисунок формы главной страницы представлен ниже по тексту.

Рис.6 - Главная страница сайта

На странице сайта «О нас» для пользователя предоставлена детальная информация о компании. Рисунок страницы «О нас» представлен ниже.

Рис. 7- Страница сайта «О нас»

На странице интернет-магазина «Цены» представлена информация про цены интернет-магазина на различные виды цветов и букеты. Рисунок страницы «Цены» представлен ниже.

Рис. 8 - Страница сайта «Цена» - часть 1

Рис. 9 - Страница сайта «Цены» - часть 2

Страница веб-сайта интернет-магазина «Отзывы» отображает отзывы, которые оставили клиенты сайта. Рисунок с изображением страницы представлен ниже.

Рис. 10 - Страница сайта «Отзывы»

Страница веб-сайта интернет-магазина «Наши работы» отображает фотографии букетов, композиций и растений в горшках, которые продаёт интернет-магазин. Страница содержит фильтр, по которому можно отсортировать отдельно позиции букетов, композиций и растений в горшках. Рисунок с изображением страницы представлен ниже.

Рис. 11 - Страница сайта «Наши работы» - часть 1, фильтр «Все»

Рис. 12 - Страница сайта «Наши работы» - часть 2, фильтр «Букеты»

Рис. 13 - Страница сайта «Наши работы» - часть 3, фильтр «Композиции»

Рис. 14 - Страница сайта «Наши работы» - часть 4, фильтр «Цветы в горшках»

Страница веб-сайта интернет-магазина «Как связаться» отображает контакты интернет-магазина. Рисунок с изображением страницы представлен ниже.

Рис. 15 - Страница сайта «Как связаться»

Страница веб-сайта интернет-магазина «Оформить заказ» отображает форму оформления заказа через которую пользователи могут сделать заказ. Рисунок с изображением страницы представлен ниже.

Рис. 16 - Страница сайта «Оформить заказ»

Заключение

В соответствии с заданием на проектирование сайта был создан сайт цветочного интернет-магазина «Flawery».

Были созданы главная страница и страницы:

• Страница «О нас»
• Страница «Цены»
• Страница «Отзывы»
• Страница «Наши работы»
• Страница «Как связаться»
• Страница «Оформление заказа»

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

В процессе создания сайта были получены навыки работы с языком гипертекстовой разметки HTML, таблицами каскадных стилей CSS, языком программирования Javascript и языком программирования PHP. Получены навыки создания серверной и клиентской частей приложений, навыки создания структуры базы данных и веб-страниц сайта.

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

Создание интернет-магазина снизило затраты бизнеса на содержание офлайн помещения, увеличило поток клиентов людьми из других городов и населённых пунктов. Также создание сайта сопутствовало продвижению в интернете, которое сейчас является одним из ключевых факторов в продвижении бизнеса. Основное преимущество от созданного сайта - это то, что клиент сможет узнать информацию о магазине цветов 24 часа в сутки 7 дней в неделю.

Список использованной литературы

Основная литература:

1. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.
2. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
3. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
4. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.

Дополнительная литература:

1. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
2. http://biblioclub.ru/index.php?page=book&id=428953
3. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.
4. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.
5. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
6. PHPForum [Электронный ресурс] /форум.- Россия, 2003. - Режим доступа: http://phpforum.ru. - Дата доступа: 09.02.2012.
7. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.
8. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.
9. Гущин А.Н. Базы данных: учебник. - М.: Директ-Медиа, 2014. - 266с

Приложения