Файл: Дипломная работа гбпоу республики Марий Эл Марийский радиомеханический техникум.pptx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 09.11.2023
Просмотров: 28
Скачиваний: 5
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Дипломная работа
ГБПОУ Республики Марий Эл «Марийский радиомеханический техникум»
РАЗРАБОТКА САЙТА САЛОНА КРАСОТЫ
Работу выполнила
Студентка группы П-42
Перевозчикова Алина Витальевна
Руководитель
Эйбин Светлана Александровна
2022
Техническое задание
Нужно реализовать сайт для салона красоты, с основными функциями: онлайн записи и админ панели, то есть, разработать сайт с нуля без применения конструкторов и систем ведения содержимым, создание клиентской и серверной частей веб-сайта с применением HTML5, CSS, JavaScript , PHP, Bootstrap, Jquery и других библиотек.
Задачи:
произвести установку необходимых инструментов для разработки;
сверстать страницы и обеспечить функциональное взаимодействие элементов;
программирование серверной части проекта: взаимодействие с базой данных, административная панель для управления сайтом;
реализовать функцию взаимодействия клиентов, то есть получить обратную связь, при выборе услуг;
реализовать форму выбора услуг и отправки данных в базу данных. данные с формы отправляются на сервер и записываются в базу данных. в административной панели реализовать возможность добавлять новые услуг, новостей и т.д.;
создать калькулятор для расчета итоговой стоимости услуг;
Среда разработки
Visual Studio Code
Кроссплатформенность. Работает на MacOS, Ubuntu и Windows.
Бесплатность. Простой open-source редактор и плагины.
Легковесность. Потребуется совсем мало ресурсов, чтобы приступить к работе с минималистичным VSC.
Легко настраиваемый
Аналитический раздел
Первый способ Конструктор, сайт, написанный с помощью приложения Tilda.
Достоинства сайт:
простота в использовании;
наборы готовых шаблонов;
нет необходимости в кодинге;
высокая скорость разработки сайтов;
Недостатки:
отсутствие seo;
сайты на конструкторах похожи;
ограничения при использовании;
сложности переноса сайта на другой хостинг.
Второй способ, написание сайта с помощью WordPress.
Достоинства :
доступность;
скорость и простота создания сайтов;
встроенные модули;
мобильность;
удобное управление контентом;
множество готовых решений.
Недостатки:
только шаблонные решения;
незащищенность сайта;
медленная загрузка;
миф о seo–оптимизации.
Третий способ, написание сайта самостоятельно.
Достоинства :
приобретение знаний в области сайтостроения;
вы сможете самостоятельно выбрать дизайн, не придется тратить время на работу с дизайнером, если вы не будете использовать шаблон.
Недостатки:
ваше время;
уязвимость сайта;
расширение функционала сайта;
сложности с переносом с локального компьютера на внешний платный или бесплатный хостинг.
Вёрстка
Чтобы начать создание веб–сайта была разработана структура. Структура сайта состоит из одностраничной страницы, куда входит:
Меню
Работа с системой начинается с запуска интернет–браузера и перехода на хост web–сервера. После перехода по адресу открывается главная страница сайта.
Сначала была сверстана главный блок страницы, прописаны все основные теги html, head, title, body, мета теги и подключены стили, шрифты и скрипты (последующих блоков тоже).
Далее идёт блок с иконками и описание салона
Следующий пункт «Наши мастера».
Блок админ панели «Наши мастера»
Прайс-лист
Так же есть блок в админ панели, имеет модальное окно, при нажатии на кнопку прайс-лист
Затем идёт блок «Работы наших мастеров», выполненный в виде слайдера, так же есть в блок в админ панели, где можно добавлять картинки.
Следующий блок «Онлайн запись»
В БД есть отдельные таблицы с мастерами, с возможным временем записи. При создании заказа в таблицу вносятся данные о мастере, времени и услуге. Проверяются эти данные при выводе через foreach на главной.
Если такое время есть в базе, то делаю поле отключенным. В БД вносится данные пользователя, который записался, отправляется сообщение о том, что пользователь, записался на услугу, которую он выбрал
Данные записи, занесенные в БД
После внесения данных и записи на прием и нажатие на кнопку «записаться», происходит автоматический переход на страницу «Успешная запись на прием»,
Последний блок – это «Контакты»
Подключение базы данных
Перед началом работы запускаем OpenServer. Для авторизации используем такие данные: пользователь – root, пароль – “пустое поле”.
Создаем БД, который содержит 7 таблиц
Шаблон админ панели – AdminLTE, нужен для того чтобы быстро поменять данные, которые могут постоянно меняться, не используя код. Для актуальности данных на сайте.
Здесь можно поменять «все заказы», «управления услугами», «мастера», «портфолио» и «прайс-лист». Всё это можно менять и редактировать.
Рассмотрено содержимое меню админ панели, на примере класса «Мастера», редактирование мастера и добавление, так же можно удалить мастера.
Заключение
В процессе выполнения дипломной работы был получен Web–сайт, удовлетворяющий всем требования.
В данной дипломной работе было рассмотренно :
создание дизайна сайта в приятном цветовом исполнение;
внедрение css свойств для более удобного восприятия кода и красивого отображения страниц в браузере;
создание графических элементов сайта;
создание динамической анимации с помощью библиотек;
создание админ панели.
разработан сайт с использованием HTML, CSS, PHP, JS и ещё несколько библиотек (пример, Bootstrap, JQuery).
Спасибо за внимание!)
ГБПОУ Республики Марий Эл «Марийский радиомеханический техникум»
РАЗРАБОТКА САЙТА САЛОНА КРАСОТЫ
Работу выполнила
Студентка группы П-42
Перевозчикова Алина Витальевна
Руководитель
Эйбин Светлана Александровна
2022
Техническое задание
Нужно реализовать сайт для салона красоты, с основными функциями: онлайн записи и админ панели, то есть, разработать сайт с нуля без применения конструкторов и систем ведения содержимым, создание клиентской и серверной частей веб-сайта с применением HTML5, CSS, JavaScript , PHP, Bootstrap, Jquery и других библиотек.
Задачи:
произвести установку необходимых инструментов для разработки;
сверстать страницы и обеспечить функциональное взаимодействие элементов;
программирование серверной части проекта: взаимодействие с базой данных, административная панель для управления сайтом;
реализовать функцию взаимодействия клиентов, то есть получить обратную связь, при выборе услуг;
реализовать форму выбора услуг и отправки данных в базу данных. данные с формы отправляются на сервер и записываются в базу данных. в административной панели реализовать возможность добавлять новые услуг, новостей и т.д.;
создать калькулятор для расчета итоговой стоимости услуг;
Среда разработки
Visual Studio Code
Кроссплатформенность. Работает на MacOS, Ubuntu и Windows.
Бесплатность. Простой open-source редактор и плагины.
Легковесность. Потребуется совсем мало ресурсов, чтобы приступить к работе с минималистичным VSC.
Легко настраиваемый
Аналитический раздел
Первый способ Конструктор, сайт, написанный с помощью приложения Tilda.
Достоинства сайт:
простота в использовании;
наборы готовых шаблонов;
нет необходимости в кодинге;
высокая скорость разработки сайтов;
Недостатки:
отсутствие seo;
сайты на конструкторах похожи;
ограничения при использовании;
сложности переноса сайта на другой хостинг.
Второй способ, написание сайта с помощью WordPress.
Достоинства :
доступность;
скорость и простота создания сайтов;
встроенные модули;
мобильность;
удобное управление контентом;
множество готовых решений.
Недостатки:
только шаблонные решения;
незащищенность сайта;
медленная загрузка;
миф о seo–оптимизации.
Третий способ, написание сайта самостоятельно.
Достоинства :
приобретение знаний в области сайтостроения;
вы сможете самостоятельно выбрать дизайн, не придется тратить время на работу с дизайнером, если вы не будете использовать шаблон.
Недостатки:
ваше время;
уязвимость сайта;
расширение функционала сайта;
сложности с переносом с локального компьютера на внешний платный или бесплатный хостинг.
Вёрстка
Чтобы начать создание веб–сайта была разработана структура. Структура сайта состоит из одностраничной страницы, куда входит:
Меню
Работа с системой начинается с запуска интернет–браузера и перехода на хост web–сервера. После перехода по адресу открывается главная страница сайта.
Сначала была сверстана главный блок страницы, прописаны все основные теги html, head, title, body, мета теги и подключены стили, шрифты и скрипты (последующих блоков тоже).
Далее идёт блок с иконками и описание салона
Следующий пункт «Наши мастера».
Блок админ панели «Наши мастера»
Прайс-лист
Так же есть блок в админ панели, имеет модальное окно, при нажатии на кнопку прайс-лист
Затем идёт блок «Работы наших мастеров», выполненный в виде слайдера, так же есть в блок в админ панели, где можно добавлять картинки.
Следующий блок «Онлайн запись»
В БД есть отдельные таблицы с мастерами, с возможным временем записи. При создании заказа в таблицу вносятся данные о мастере, времени и услуге. Проверяются эти данные при выводе через foreach на главной.
Если такое время есть в базе, то делаю поле отключенным. В БД вносится данные пользователя, который записался, отправляется сообщение о том, что пользователь, записался на услугу, которую он выбрал
Данные записи, занесенные в БД
После внесения данных и записи на прием и нажатие на кнопку «записаться», происходит автоматический переход на страницу «Успешная запись на прием»,
Последний блок – это «Контакты»
Подключение базы данных
Перед началом работы запускаем OpenServer. Для авторизации используем такие данные: пользователь – root, пароль – “пустое поле”.
Создаем БД, который содержит 7 таблиц
Шаблон админ панели – AdminLTE, нужен для того чтобы быстро поменять данные, которые могут постоянно меняться, не используя код. Для актуальности данных на сайте.
Здесь можно поменять «все заказы», «управления услугами», «мастера», «портфолио» и «прайс-лист». Всё это можно менять и редактировать.
Рассмотрено содержимое меню админ панели, на примере класса «Мастера», редактирование мастера и добавление, так же можно удалить мастера.
Заключение
В процессе выполнения дипломной работы был получен Web–сайт, удовлетворяющий всем требования.
В данной дипломной работе было рассмотренно :
создание дизайна сайта в приятном цветовом исполнение;
внедрение css свойств для более удобного восприятия кода и красивого отображения страниц в браузере;
создание графических элементов сайта;
создание динамической анимации с помощью библиотек;
создание админ панели.
разработан сайт с использованием HTML, CSS, PHP, JS и ещё несколько библиотек (пример, Bootstrap, JQuery).
Спасибо за внимание!)