Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта салона красоты «Brow beauty bar»

Содержание:

Введение

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

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

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

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

Основная цель данной курсовой работы - это разработать сайт салона красоты.

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

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

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

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

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

Главные функции сайта:

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

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

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

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

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

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

Для создания сайта использовались такие технологии как:

  • Язык гипертекстовой разметки HTML
  • Таблицы каскадных стилей CSS
  • Язык программирования Javascript
  • Язык программирования PHP

Рассмотрим детальнее выбранные технологии.

Язык гипертекстовой разметки HTML используется при создании всех веб-сайтов в интернете, потому что является базовой технологией в веб-программировании и поддерживается любым браузером любой версии. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения. Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <table> предназначен для создания в документах таблиц, но иногда используется и для оформления размещения элементов на странице. С течением времени основная идея платформ независимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.

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

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

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

Для разработки сайта для данной курсовой была выбрана IDE - Visual Studio Code. Visual Studio Code — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

Visual Studio Code основан на Electron и реализуется через веб-редактор Monaco, разработанный для Visual Studio Online.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Название модуля

Описание программного модуля

1

Основная форма работы

Главный модуль выполняющий роль описания сайта и связывает все модули программы

2

Форма «Отзывы»

Экранная форма содержащая информацию об отзывам клиентов салона красоты

3

Форма «Цены»

Экранная форма содержащая информацию об ценах на услуги салона красоты

4

Форма «О нас»

Экранная форма содержащая информацию про салон красоты, реализует описательную функцию

5

Форма «Каталог»

Экранная форма содержащая информацию про услуги салона красоты

6

Форма «Контакты»

Экранная форма содержащая информацию об контактах салона красоты

7

Форма «Оформление заказа»

Экранная форма с помощью которой осуществляется заказ услуги в салоне красоты

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

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

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

MySQL портирована на большое количество платформ: AIX, BSDi, FreeBSD, HP-UX, Linux, macOS, NetBSD, OpenBSD, OS/2 Warp, SGI IRIX, Solaris, SunOS, SCO OpenServer, UnixWare, Tru64, Windows 95, Windows 98, Windows NT, Windows 2000, Windows XP, Windows Server 2003, WinCE, Windows Vista, Windows 7 и Windows 10. Существует также порт MySQL к OpenVMS. На официальном сайте СУБД для свободной загрузки предоставляются не только исходные коды, но и откомпилированные и оптимизированные под конкретные операционные системы готовые исполняемые модули СУБД 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 осуществляет корпорация Oracle, получившая права на торговую марку вместе с поглощённой Sun Microsystems, которая ранее приобрела шведскую компанию MySQL AB. Продукт распространяется как под GNU General Public License, так и под собственной коммерческой лицензией. Помимо этого, разработчики создают функциональность по заказу лицензионных пользователей. Именно благодаря такому заказу почти в самых ранних версиях появился механизм репликации.

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

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

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

  • Таблица «Пользователь»
  • Таблица «Заказ»
  • Таблица «Сервис» (услуга)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 9 - Страница сайта «Наши работы» - часть 1

Рис. 10 - Страница сайта «Наши работы» - часть 2

Рис. 11 - Страница сайта «Наши работы» - часть 3

Рис. 12 - Страница сайта «Наши работы» - часть 4

Рис. 13 - Страница сайта «Наши работы» - часть 5

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

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

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

Рис. 15 - Страница сайта «Контакты и оформление заказа»

Заключение

В соответствии с заданием на проектирование сайта был создан сайт салона красоты «Brow beauty bar».

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

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

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

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