Разработка сайта интернет-магазина мягких игрушек «Мишка»

Содержание:

Введение

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

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

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

Цель курсового проекта разработка веб-сайта для магазин детских игрушек «Мишка», предоставляющего клиентам информацию о нем и предлагаемых товарах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для реализации разделов необходимо использовать язык гипертекстовой разметки 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 - Таблица с описанием программных модулей

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

Сейчас 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 и историю заказов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 15 - Страница сайта «Контакты»

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

Рис. 16 - Страница сайта «Сделать заказ»

Заключение

В соответствии с заданием на проектирование сайта был создан сайт интернет-магазина мягких игрушек «Мишка».

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

• Страница «О нас»
• Страница «Цены»
• Страница «Отзывы»
• Страница «Наши продукты»
• Страница «Контакты»
• Страница «Сделать заказа»

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

В процессе создания сайта были получены навыки работы с языком гипертекстовой разметки 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с

Приложения