Разработка сайта салона красоты

Август 6, 2022

Главная
Информатика
Разработка сайта салона красоты

Содержание

2. Техническое задание Нужно реализовать сайт для салона красоты, с основными функциями: онлайн записи и админ панели,
3. Задачи: произвести установку необходимых инструментов для разработки; сверстать страницы и обеспечить функциональное взаимодействие элементов; программирование серверной
4. Среда разработки Visual Studio Code Кроссплатформенность. Работает на MacOS, Ubuntu и Windows. Бесплатность. Простой open-source редактор
5. Аналитический раздел Первый способ Конструктор, сайт, написанный с помощью приложения Tilda. Достоинства сайт: простота в использовании;
6. Второй способ, написание сайта с помощью WordPress. Достоинства : доступность; скорость и простота создания сайтов; встроенные
7. Третий способ, написание сайта самостоятельно. Достоинства : приобретение знаний в области сайтостроения; вы сможете самостоятельно выбрать
8. Вёрстка Чтобы начать создание веб–сайта была разработана структура. Структура сайта состоит из одностраничной страницы, куда входит:
9. Меню Работа с системой начинается с запуска интернет–браузера и перехода на хост web–сервера. После перехода по
10. Далее идёт блок с иконками и описание салона
11. Следующий пункт «Наши мастера». Блок админ панели «Наши мастера»
12. Прайс-лист Так же есть блок в админ панели, имеет модальное окно, при нажатии на кнопку прайс-лист
13. Затем идёт блок «Работы наших мастеров», выполненный в виде слайдера, так же есть в блок в
14. Следующий блок «Онлайн запись» В БД есть отдельные таблицы с мастерами, с возможным временем записи. При
15. После внесения данных и записи на прием и нажатие на кнопку «записаться», происходит автоматический переход на
16. Последний блок – это «Контакты»
17. Подключение базы данных Перед началом работы запускаем OpenServer. Для авторизации используем такие данные: пользователь – root,
18. Шаблон админ панели – AdminLTE, нужен для того чтобы быстро поменять данные, которые могут постоянно меняться,
19. Рассмотрено содержимое меню админ панели, на примере класса «Мастера», редактирование мастера и добавление, так же можно
20. Заключение В процессе выполнения дипломной работы был получен Web–сайт, удовлетворяющий всем требования. В данной дипломной работе
22. Скачать презентацию

Слайд 2

Техническое задание
Нужно реализовать сайт для салона красоты, с основными функциями: онлайн

записи и админ панели, то есть, разработать сайт с нуля без применения конструкторов и систем ведения содержимым, создание клиентской и серверной частей веб-сайта с применением HTML5, CSS, JavaScript , PHP, Bootstrap, Jquery и других библиотек.

Слайд 3

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

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

Слайд 4

Среда разработки
Visual Studio Code
Кроссплатформенность. Работает на MacOS, Ubuntu и Windows.
Бесплатность.

Простой open-source редактор и плагины.
Легковесность. Потребуется совсем мало ресурсов, чтобы приступить к работе с минималистичным VSC.
Легко настраиваемый

Слайд 5

Аналитический раздел
Первый способ Конструктор, сайт, написанный с помощью приложения Tilda.
Достоинства сайт:

простота в использовании;
наборы готовых шаблонов;
нет необходимости в кодинге;
высокая скорость разработки сайтов;
Недостатки:
отсутствие seo;
сайты на конструкторах похожи;
ограничения при использовании;
сложности переноса сайта на другой хостинг.

Слайд 6

Второй способ, написание сайта с помощью WordPress.
Достоинства :
доступность;
скорость и простота

создания сайтов;
встроенные модули;
мобильность;
удобное управление контентом;
множество готовых решений.
Недостатки:
только шаблонные решения;
незащищенность сайта;
медленная загрузка;
миф о seo–оптимизации.

Слайд 7

Третий способ, написание сайта самостоятельно.
Достоинства :
приобретение знаний в области сайтостроения;
вы

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

Слайд 8

Вёрстка
Чтобы начать создание веб–сайта была разработана структура. Структура сайта состоит из

одностраничной страницы, куда входит:

Слайд 9

Меню
Работа с системой начинается с запуска интернет–браузера и перехода на хост

web–сервера. После перехода по адресу открывается главная страница сайта.

Сначала была сверстана главный блок страницы, прописаны все основные теги html, head, title, body, мета теги и подключены стили, шрифты и скрипты (последующих блоков тоже).

Слайд 10

Далее идёт блок с иконками и описание салона

Слайд 11

Следующий пункт «Наши мастера».
Блок админ панели «Наши мастера»

Слайд 12

Прайс-лист
Так же есть блок в админ панели, имеет модальное окно, при

нажатии на кнопку прайс-лист

Слайд 13

Затем идёт блок «Работы наших мастеров», выполненный в виде слайдера, так

же есть в блок в админ панели, где можно добавлять картинки.

Слайд 14

Следующий блок «Онлайн запись»
В БД есть отдельные таблицы с мастерами, с

возможным временем записи. При создании заказа в таблицу вносятся данные о мастере, времени и услуге. Проверяются эти данные при выводе через foreach на главной. Если такое время есть в базе, то делаю поле отключенным. В БД вносится данные пользователя, который записался, отправляется сообщение о том, что пользователь, записался на услугу, которую он выбрал

Данные записи, занесенные в БД

Слайд 15

После внесения данных и записи на прием и нажатие на кнопку

«записаться», происходит автоматический переход на страницу «Успешная запись на прием»,

Слайд 16

Последний блок – это «Контакты»

Слайд 17

Подключение базы данных
Перед началом работы запускаем OpenServer. Для авторизации используем такие

данные: пользователь – root, пароль – “пустое поле”.
Создаем БД, который содержит 7 таблиц

Слайд 18

Шаблон админ панели – AdminLTE, нужен для того чтобы быстро поменять

данные, которые могут постоянно меняться, не используя код. Для актуальности данных на сайте.
Здесь можно поменять «все заказы», «управления услугами», «мастера», «портфолио» и «прайс-лист». Всё это можно менять и редактировать.

Слайд 19

Рассмотрено содержимое меню админ панели, на примере класса «Мастера», редактирование мастера

и добавление, так же можно удалить мастера.

Слайд 20

Заключение
В процессе выполнения дипломной работы был получен Web–сайт, удовлетворяющий всем требования.
В

данной дипломной работе было рассмотренно :
создание дизайна сайта в приятном цветовом исполнение;
внедрение css свойств для более удобного восприятия кода и красивого отображения страниц в браузере;
создание графических элементов сайта;
создание динамической анимации с помощью библиотек;
создание админ панели.
разработан сайт с использованием HTML, CSS, PHP, JS и ещё несколько библиотек (пример, Bootstrap, JQuery).

Разработка сайта салона красоты

Содержание

Техническое заданиеНужно реализовать сайт для салона красоты, с основными функциями: онлайн

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

Среда разработкиVisual Studio CodeКроссплатформенность. Работает на MacOS, Ubuntu и Windows. Бесплатность.

Аналитический разделПервый способ Конструктор, сайт, написанный с помощью приложения Tilda.Достоинства сайт:

Второй способ, написание сайта с помощью WordPress. Достоинства :доступность;скорость и простота

Третий способ, написание сайта самостоятельно. Достоинства :приобретение знаний в области сайтостроения;вы

ВёрсткаЧтобы начать создание веб–сайта была разработана структура. Структура сайта состоит из

МенюРабота с системой начинается с запуска интернет–браузера и перехода на хост