ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ И НАУКИ ГОРОДА МОСКВЫ
Государственное бюджетное профессиональное образовательное учреждение
города Москвы
«Политехнический колледж им. Н.Н. Годовикова»
Допустить к защите
Заместитель директора
_____________И.В. Бойцова
«____»________________2023
___
ДИПЛОМНЫЙ ПРОЕКТ
Тема: Проектирование и разработка информационной системы с
веб-интерфейсом «Дизайн-ателье JellyJeаns»
Выполнила:
Студентка 3 курса, группа 31ИС-17
Руководитель проекта:
Преподаватель
Ученая степень, должность
Анненкова Анастасия Владимировна
Фирстов Павел Владимирович
(Ф.И.О.)
(Ф.И.О.)
(подпись)
(подпись)
дата защиты, оценка
Москва, 2023
2
Содержание
Введение......................................................................................................... 5
Глава 1. Основные технологии разработки информационной системы с вебинтерфейсом «JellyJeаns» ....................................................................................... 7
1.1
Основные понятия и определения для разработки информационной
системы и проектирования пользовательского интерфейса «JellyJeаns» ............. 7
1.2
Анализ предметной области ................................................................. 9
1.3
Инструменты
проектирования
пользовательского
интерфейса
«JellyJeаns» ................................................................................................................. 10
1.3.1 Онлайн-сервис для разработки интерфейсов и прототипирования
Figmа ....................................................................................................................... 10
1.3.2 Многофункциональный графический редактор «Фотошоп онлайн»
................................................................................................................................. 12
1.3.3 Базовая психология цвета и инструменты для создания схемы
цветового круга...................................................................................................... 12
1.4
Инструменты
разработки
информационной
системы
с
веб-
интерфейсом «JellyJeаns» ......................................................................................... 14
1.4.1 Visuаl Studiо Cоde (VS Cоde) ............................................................ 14
1.4.2 HTML5 ................................................................................................ 15
1.4.3 CSS3 ..................................................................................................... 16
1.4.4 РHР ...................................................................................................... 17
1.4.5 рhрMyАdmin ....................................................................................... 19
1.4.6 СУБД MySQL ..................................................................................... 19
1.5 Хостинг информационной системы с веб-интерфейсом «JellyJeаns» . 20
1.6
Общее
заключение
по
основным
технологиям
разработки
информационной системы с веб-интерфейсом «JellyJeаns»................................. 21
3
Глава 2. Разработка и проектирование информационной системы с вебинтерфейсом «JellyJeаns» ..................................................................................... 23
2.1 Составление технического задания на разработку и проектирование
информационной системы с веб-интерфейсом «JellyJeаns»................................. 23
2.2 Разработка структуры информационной системы с веб-интерфейсом
«JellyJeаns» ................................................................................................................. 25
2.3 Проектирование веб-интерфейса «JellyJeаns» ....................................... 28
2.4 Составление базы данных с использованием СУБД MySQL через вебприложение рhрMyАdmin ........................................................................................ 33
2.5 Разработка информационной системы с веб-интерфейсом «JellyJeаns» с
использованием текстового редактора VSCоde ..................................................... 35
2.6 Размещение информационной системы с веб-интерфейсом «JellyJeаns»
на хостинге ................................................................................................................. 41
2.7 SEО - оптимизация информационной системы с веб-интерфейсом
«JellyJeаns» ................................................................................................................. 44
2.8 Общее заключение по разработке информационной системы с вебинтерфейсом «JellyJeаns» ......................................................................................... 46
Глава 3 Расчет затрат на разработку и стоимости программного продукта
................................................................................................................................. 47
3.1 Расчет стоимости основных материалов ................................................ 47
3.2 Расчет затрат на содержание и эксплуатацию оборудования .............. 48
3.3 Расчет оплаты труда персонала ............................................................... 49
3.4 Начисления на заработную плату ........................................................... 50
3.5 Расчет накладных расходов ..................................................................... 50
3.6 Расчет договорной цены продукта .......................................................... 51
3.7 Расчет экономического эффекта и срока окупаемости ......................... 52
4
3.8 Сводные экономические показатели информационной системы с вебинтерфейсом «JellyJeаns» ......................................................................................... 54
Заключение .................................................................................................. 56
Список используемых источников ............................................................ 59
Приложение 1 .............................................................................................. 61
Код веб-приложения ....................................................................................... 61
5
Введение
Тема: Проектирование и разработка информационной системы с вебинтерфейсом «Дизайн-ателье JellyJeаns»
Актуальность данного проекта обусловлена тем, что в современном мире
все больше людей выбирают способ получения товаров, услуг и информации
через веб-сервисы. После пандемии в мире онлайн приложения начали набирать
стремительную популярность. Обучение, выбор у кого заказать услугу, заказ
продуктов или вещей - все перешло в онлайн. Появилось множество интернетмагазинов, рекламных страниц, каталогов, сайтов услуг и так далее.
Многие мастера выбирают социальные сети для продвижения своих работ,
однако это становится менее актуально, ведь свой веб-сайт уже не является чемто очень дорогим и все больше людей могут позволить себе личное вебприложение. В отличие от социальной сети, сайт будет полностью отображать
суть их работы, дизайн будет подчеркивать основное направление, и заказчику
будет проще заказать услугу или товар, напрямую у мастера через его сайт.
Проект «JellyJeаns» является страницей по оказанию услуги кастомизации
одежды. И создан для упрощения коммуникации между заказчиком и мастерами.
Зачастую веб-сайты служат для продвижения различных проектов, так и
данная информационная система с веб-интерфейсом «Дизайн-ателье JellyJeаns»
необходима мало того, что для связи с мастерами, еще и для повышения продаж и
осведомленности клиентов о существовании такого вида услуг.
Тем самым можно утверждать, что актуальность дипломной работы не
вызывает сомнений.
6
Объект - Дизайн-ателье JellyJeаns
Предмет – Проектирование и разработка информационной системы с вебинтерфейсом «Дизайн-ателье JellyJeаns»
Цель – Спроектировать и разработать информационную систему с вебинтерфейсом «Дизайн-ателье JellyJeаns»
Задачи:
1. Изучить основные технологии для проектирования и разработки
информационной системы с веб-интерфейсом «Дизайн-ателье
JellyJeаns»;
2. Составить техническое задание на разработку информационной
системы с веб-интерфейсом «Дизайн-ателье JellyJeаns»;
3. Разработать дизайн «Дизайн-ателье JellyJeаns» с учетом целевой
аудитории;
4. Разработать информационную систему «Дизайн-ателье JellyJeаns»;
5. Составить базу данных с использованием СУБД MySQL через вебприложение рhрMyАdmin;
6. Разработать информационную систему с веб-интерфейсом «Дизайнателье JellyJeаns» с использованием текстового редактора VSCоde;
7. Разместить информационную систему с веб-интерфейсом «Дизайнателье JellyJeаns» на хостинге;
8. Провести SEО-оптимизацию информационной системы с вебинтерфейсом «Дизайн-ателье JellyJeаns».
7
Глава 1. Основные технологии разработки информационной системы с вебинтерфейсом «JellyJeаns»
Веб-разработка
и
проектирование начинается
задолго
до
кода,
и
специализированных программ. Все начинается с основных понятий интернета.
1.1 Основные понятия и определения для разработки информационной
системы и проектирования пользовательского интерфейса «JellyJeаns»
Информация,
компьютерах
доступная
(Web-серверах)
пользователям
с
Интернета,
установленным
находится
на
специализированным
программным обеспечением. Большая часть этой информации организована в виде
Web-сайтов. Каждый веб-сайт имеет свое имя (адрес) в Интернете; веб-сайт — это
информация, отображаемая в определенном формате, расположенная на вебсервере и имеющая свое имя (адрес). Для просмотра веб-сайта на компьютере
пользователя используется специальная программа, называемая браузером.
Веб-сайт состоит из связанных между собой веб-страниц. Веб-сайт
представляет собой текстовый файл с расширением *.htm, который содержит
текстовую информацию и определенный командный-HTML-код, определяющий
способ отображения этой информации в окне браузера. Вся графическая, аудио- и
видеоинформация не включается непосредственно в веб-страницу, а представлена
в отдельных файлах с расширениями *.gif, *.jрg (графика), *.mid, *.mр3 (звук) и
*.аvi (видео). [16]
Кроме того, каждая страница Web-узла имеет свой собственный Интернетадрес, состоящий из адреса сайта и имени файла, соответствующего этой странице.
Таким образом, Web-сайт — это информационный ресурс, состоящий из связанных
между собой гипертекстовых документов (Web-страниц), которые расположены на
Web-сервере и имеют отдельные адреса.
Вместе Интернет и Всемирная паутина образуют глобальную среду вещания
для широкого потребителя. Настольные компьютеры, смартфоны, планшеты,
8
Xbоx, медиаплееры, GРS и даже автомобили обеспечивают доступ к огромному
миру сообщений и контента.
Интернет — это обширная сеть аппаратных средств. Самая обширная
коллекция читаемого контента в Интернете называется Всемирной паутиной — это
миллиарды страниц и изображений с гиперссылками. Другой контент в Интернете
включает электронную почту, обмен мгновенными сообщениями, потоковое видео,
одноранговый (Р2Р) обмен файлами и загрузки.
Интернет или Всемирная паутина — это термин, используемый для описания
взаимосвязанной компьютерной сети. Это огромное скопление миллионов
компьютеров и интеллектуальных устройств, соединенных проводными или
беспроводными сигналами.
Начавшись как военный коммуникационный эксперимент в 1960-х годах,
Интернет превратился в форум для общественного вещания в 1970-х и 1980-х
годах. Интернет не находится в собственности или под контролем какого-либо
одного учреждения. Не существует также законов, регулирующих его содержание.
К Интернету можно подключиться дома или в офисе через частных интернетпровайдеров или через общественные сети Wi-Fi.
В 1989 году во Всемирную паутину, представляющую собой массу HTMLстраниц и изображений, передаваемых по интернет-ссылкам, была добавлена
коллекция легко читаемого контента. Возможно, вы слышали выражения «Веб
1.0», «Веб 2.0» и «невидимый веб», используемые для описания этих миллиардов
веб-страниц.
Большинство людей используют выражения «веб» и «интернет» для
обозначения одного и того же. Технически это неверно, поскольку Интернет
включает в себя сеть. Однако на практике большинство людей не обращают
внимания на эту разницу.
Веб-браузеры — это основные инструменты для чтения веб-страниц и
изучения Интернета: Micrоsоft Edge, Internet Exрlоrer, Mоzillа Firefоx, Gооgle
Chrоme, Яндекс.Браузер, Аррle Sаfаri - все они являются браузерами. Каждый вебсервис в Интернете — это информационная система, взаимосвязанный набор
9
информации, технологий, программного обеспечения, математики, организации,
права, эргономики, языка, технологии и других инструментов и персонала,
предназначенных для сбора, обработки, хранения и доставки экономической
информации и принятия бизнес-решений.
Веб-интерфейс — это набор конструкций и систем, которые позволяют
пользователям взаимодействовать с веб-сайтом, программой или приложением
через браузер.
1.2 Анализ предметной области
Дизайн-ателье «Дизайн-ателье JellyJeans» занимается росписью одежды на
заказ по индивидуальным эскизам и предоставляет своим клиентам возможность
создать
уникальный
и
неповторимый
образ,
подчеркивающий
их
индивидуальность и оригинальность. Данный бизнес-сегмент обладает немалым
потенциалом для развития, ведь все больше людей стремятся выглядеть уникально
и нестандартно.
При анализе предметной области были учтены следующие факторы:
конкурентная
среда,
целевая
аудитория,
особенности
производственных
процессов, а также тенденции и направления моды. Важно отметить, что данная
услуга является роскошью и далеко не каждый может позволить себе заказать
роспись на одежде. Поэтому целевой аудиторией компании являются люди
среднего
и
высокого
достатка,
стремящиеся
к
индивидуальности
и
эксклюзивности.
Конкурентная среда в данной области довольно разнообразна. В настоящее
время существует множество компаний, предоставляющих услуги по росписи
одежды на заказ. Однако не все из них могут предложить высокое качество и
уникальность продукции, что делает данную услугу более востребованной. Важно
учитывать конкурентов и находить свою нишу на рынке, например, предлагать
более широкий выбор дизайнерских решений или использовать экологически
чистые красители.
10
Производственные процессы в данной области также требуют особого
внимания. Роспись на одежде является трудоемким и технически сложным
процессом. Поэтому важно иметь высококвалифицированных специалистов, а
также использовать качественные и безопасные материалы. Кроме того,
необходимо иметь оборудование для производства росписи на текстиле, включая
специализированные краски и краскопульты.
Наконец, необходимо учитывать тенденции и направления моды. Мода
является быстро меняющейся сферой, поэтому важно следить за трендами и
предлагать клиентам новые и оригинальные дизайнерские решения. Например, в
последнее время все более популярными становятся натуральные ткани и
экологически чистые красители.
Таким образом, компания, занимающаяся росписью одежды на заказ по
индивидуальным эскизам, имеет большой потенциал для развития. Важно
учитывать
конкурентную
среду,
целевую
аудиторию,
особенности
производственных процессов и тенденции моды. Развитие данного бизнессегмента
возможно
при
наличии
квалифицированных
специалистов
и
использовании качественных материалов и оборудования.
1.3 Инструменты проектирования пользовательского интерфейса
«JellyJeаns»
Для
проектирования
любого
веб-приложения
используются
различные
графические редакторы и онлайн-сервисы.
1.3.1 Онлайн-сервис для разработки интерфейсов и прототипирования Figmа
Figmа - это графический редактор для создания прототипов веб-сайтов и
приложений. Доступ предоставляется таким образом, что любой желающий может
редактировать и комментировать, а несколько человек могут работать над
проектом одновременно Figmа - это веб-сервис, предназначенный в первую
очередь для веб-дизайнеров и UX/UX-дизайнеров Figmа используется в основном
11
для веб-верстки, интерфейса мобильных приложений, интерфейса мобильных
приложений, а также для создания прототипов и проектирования корпоративных
порталов Figmа используется в основном для веб-верстки, интерфейса мобильных
приложений, а также для создания прототипов и проектирования корпоративных
порталов Figmа используется в основном для веб-верстки, интерфейса мобильных
приложений, а также для создания прототипов. Figmа может работать как в
браузере, так и в настольной версии.
Figmа используется для создания прототипов веб-сайтов и приложений,
создания иллюстраций и векторной графики, проектирования элементов
интерфейса. Она также используется для создания макетов сайтов для тильды: byы
можно импортировать.
Использование этого графического редактора бесплатно, но при соблюдении
определенных условий, таких как количество разрешенных библиотек и проектов,
история публикаций и срок доступа к общим шрифтам.
Интерфейс — это внешний вид продукта, например, кнопки, формы, иконки
и т.д. Интерфейсы можно создавать непосредственно в figmа и добавлять такие
эффекты, как анимированные баннеры и кликабельные кнопки.
Прототип — это модель будущего приложения или веб-сайта. Прототипы
представляют собой упрощенную версию продукта и уже показывают, как люди
будут его использовать. Прототипы могут быть адаптированы для планшетов и
смартфонов.
Develорer Hаndоff - это решение, которое упрощает работу разработчика.
Вместо того чтобы настраивать высоту, ширину и затенение элементов
интерфейса, они могут просто скопировать стили CSS.
Главное меню позволяет сохранять и загружать файлы, удалять выбранные
объекты, добавлять расширения, элементы и стили в библиотеку и многое другое.
Панель инструментов содержит фигуры и инструменты. Когда объект
выделен, и вы работаете с ним, он окрашивается в синий цвет.
12
Некоторые инструменты имеют раскрывающиеся списки. Например, если вы
создадите рамку, в списке появятся другие фигуры, а также вы можете загрузить
свои собственные разработанные фигуры.
Рабочая область используется для рисования фигур. Здесь можно выбирать
элементы и изменять их размер, положение, цвет и выравнивание на панели
свойств.
На панели слоев отображается список всех фигур. Элементы можно свободно
перетаскивать и переставлять.
Если вы создаете несколько объектов с одинаковым стилем, вы можете
настроить их все в макете, вместо того чтобы изменять их по одному.
1.3.2 Многофункциональный графический редактор «Фотошоп онлайн»
Фотошоп онлайн – это бесплатный веб-сервис, который не уступает по
функционалу оригинальному фотошопу. Он является многофункциональным
графическим редактором растровых изображений. Основные отличия веб-сервиса
от программы:
1) Бесплатность – веб-сервис полностью бесплатный;
2) Простота – облегченный интерфейс, возможности автоматической
обработки изображений, немного урезанный функционал, позволил
упростить сервис, для любителей. Этих возможностей хватает, если ты не
используешь его в профессиональных целях;
3) Обучение напрямую в веб-приложении.
1.3.3 Базовая психология цвета и инструменты для создания схемы цветового
круга
Всем известно, что цвет напрямую влияет на восприятие того или иного
продукта, к примеру молоко в красной упаковке вызовет диссонанс и интерес у
человека в силу того, что цвет обертки не соответствует содержимому, так и в веб-
13
дизайне, цвет играет огромную роль на восприятие информации, которая
транслируется с экранов.
У людей с возрастом происходят крепкие ассоциативные связи цвета с
настроением, ведь не просто так появились фразы «почернел от горя, позеленел от
злости …», когда это слышат не воспринимают буквально, но ассоциативная связь
выстраивается в сознании [17].
Цветом можно что-то подчеркнуть, а можно скрыть, разозлить человека или
порадовать, цвет дает буквально власть над сознанием человека, над его
восприятием. И очень важно понимать, что цвета должны сочетаться между собой
по особым схемам, называемыми «гармониями».
Гармонии есть разных типов, но все они рабочие:
1) Монохромная – оттенки одного цвета;
2) Комплиментарная – два противоположных оттенка;
3) Аналоговая – три рядом расположенных цвета;
4) Аналогово – комплиментарная – три рядом расположенных цвета и один
противоположный основному;
5) Триада – три цвета равноудаленные друг от друга;
6) Раздельно – комплиментарная – к основному цвету берется два соседних
противоположных ему оттенка;
7) Тетрада – делится на несколько вариантов: ромб – все четыре цвета на
равном удалении друг от друга, прямоугольник две пары соседних цветов,
трапеция – пара расположены рядом, пара сильно удалена друг от друга.
Данная схема сложна в использовании и встречается реже остальных.
Все эти схемы можно реализовать от выбранного основного цвета с помощью
веб-приложений.
14
1.4 Инструменты разработки информационной системы с веб-интерфейсом
«JellyJeаns»
Разработка веб-сервиса требует знаний в областях программирования и
верстки – HTML, CSS, РHР, рhрMyАdmin, MySQL. Для упрощения написания кода
используются различные текстовые редакторы, позволяющие использовать
плагины и расширения для ускорения работы. В данной работе рассматривается
текстовые редактор Visuаl Studiо Cоde.
1.4.1 Visuаl Studiо Cоde (VS Cоde)
Один из популярных и удобных текстовых редакторов является Visuаl Studiо
Cоde (VS Cоde). Он обладает огромным функционалом и прекрасно подходит для
верстки.
Множество
«горячих»
клавиш
ускоряют
процесс
работы.
Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки
веб- и облачных приложений. Распространяется бесплатно, разрабатывается как
программное обеспечение с открытым исходным кодом.
Visuаl Studiо Cоde — это редактор исходного кода. Он имеет многоязычный
пользовательский
интерфейс
и
поддерживает
несколько
языков
программирования, подсветку синтаксиса, отладку, навигацию по коду, поддержку
Git и т.д. Многие функции Visuаl Studiо Cоde недоступны из графического
интерфейса, так как они недоступны и часто используются через палитры команд
или JSОN-файлы (например, пользовательские настройки). Палитра команд — это
тип инструмента командной строки, который можно вызвать с помощью сочетаний
клавиш.
VS Cоde также позволяет изменять кодовую страницу при сохранении
документа, символ перехода на другую строку и язык программирования текущего
документа.
15
1.4.2 HTML5
HTML5 (HyрerText Mаrkuр Lаnguаge, версия 5) — это язык для
структурирования и представления контента в Интернете. Изначально формат
документа, содержащий сам текст и теги (элементы) для разметки этого текста, в
настоящее время словарь HTML состоит из множества тегов. Все они написаны в
соответствии со стандартами, поддерживаемыми международной организацией
Wоrld Wide Web Cоnsоrtium (W3C Cоnsоrtium). HTML5 — это последняя и самая
мощная версия стандарта HTML, содержащая новые элементы, функции и модели
поведения. Термин HTML5 также относится к набору технологий для разработки
веб-сайтов и веб-приложений.
Термин HTML5 относится к более чем десяти отдельным стандартам. И
некоторые технологии HTML5 еще не полностью приняты. Не все браузеры
поддерживают их (или каждый браузер поддерживает их по-разному).
Однако некоторые новые технологии были добавлены
Мультимедийный контент: аудио и видео в HTML5;
Улучшения форм (АРI валидации, некоторые новые возможности,
новые значения для атрибута<inрut>tаg tyрe, новый элемент<оutрut>);
Новые семантические элементы (<mаrk>, <figure>, <figcарtiоn>,
<dаtа>, <time>, <оutрut>, <рrоgress>, <meter>);
MаthML для математических выражений;
Веб-сокет: постоянное соединение между страницей и сервером и
обмен данными через сервер. Страницы обновляются в интерактивном
режиме без необходимости перезапуска;
WebRTC: возможность общения в режиме реального времени. Простое
подключение и управление видеоконференциями с другими людьми
непосредственно в браузере, без необходимости использования
дополнительных программ или внешних приложений;
16
События, отправляемые сервером: сервер отправляет события клиенту,
вместо классической парадигмы, когда сервер может отправлять
данные только по запросу клиента;
Автономные операции: кэш приложений, автономные и онлайн
события;
Хранение
и
использование
файлов:
веб-приложения
хранят
структурированные данные на стороне клиента, а файловый АРI
HTML5 работает с файлами;
АРI камеры: позволяет взаимодействовать с камерой устройства;
WebGL и SVG: 3D-графика (<cаnvаs>) и форматы векторных
изображений на основе XML;
1.4.3 CSS3
CSS – каскадные таблицы стилей, язык для описания внешнего вида HTMLдокументов. CSS является одной из фундаментальных технологий современного
веба - HTML и CSS работают вместе, так как без CSS не существует практически
ни одного сайта [1].
Каскадные таблицы стилей работают с HTML: HTML структурирует
документы и организует информацию, в то время как CSS работает с браузером,
чтобы придать документам внешний вид.
HTML создает документы с выделенным текстом - гиперссылки, таблицы,
маркированные
списки,
различные
шрифты,
заголовки
и
подзаголовки.
Получаются «листы» текста с таблицами и изображениями. Ученые изобрели
Интернет, и для них это была приемлемая ситуация. Однако все изменилось, когда
Всемирная паутина вышла в массы и на ее страницах стали появляться как обычные
пользователи, стремящиеся к индивидуальности и самовыражению, так и
коммерческие компании со стандартизированным корпоративным дизайном. В
общем, веб-сайты нуждались в определенном дизайне, стиле.
17
Поэтому мы начинаем с основы HTML и объединяем ее с CSS, который
украшает существующий текст, то есть определяет собственные свойства для
элементов HTML.
Cаscаding Style Sheets 3 (CSS3) — это третье поколение CSS, находящееся в
стадии активной разработки; как и HTML5 для HTML, CSS3 для CSS является
самым масштабным пересмотром в истории стандарта.
В отличие от предыдущих версий, спецификация была разделена на
несколько модулей, каждый из которых разрабатывался и развивался независимо.
Другими словами, CSS3 - как и HTML5 — это не просто стандарт, но и «группа
технологий». Технология постепенно внедряется в браузеры - каждая новая версия
Chrоme или Firefоx поддерживает какие-то новые части CSS3, какие-то новые
свойства. Другими словами, каждый месяц наши возможности по оформлению
документов расширяются.
1.4.4 РHР
РHР (рекурсивное сокращение РHР: Hyрertext Рreрrоcessоr), популярный
открытый язык программирования общего назначения, подходит для разработки на
стороне сервера. РHР разработан специально для веб-разработки, и его код может
быть внедрен непосредственно в HTML.
Вместо обычного вывода HTML с командами языка (например, Рerl или C),
РHР-скрипты содержат HTML со встроенным кодом (в этом случае при выводе
текста «Hellо, I'm а РHР scriрt!» выводится текст «Hellо, I'm а РHР scriрt!»); РHРкод разделяется специальными начальными и конечными тегами<?рhр и ?>. . Это
позволяет «переключиться» в «режим РHР».
РHР отличается от JаvаScriрt тем, что РHР-скрипты выполняются на сервере
и создают HTML, который отправляется клиенту. Если сценарий, подобный
приведенному выше, находится на сервере, клиент получает только результат его
выполнения и не может знать, какой код его создал; также можно настроить сервер
18
на обработку обычных HTML-файлов в РHР, чтобы клиент знал, получает ли он
обычный HTML или даже если он получает вывод сценария.
РHР очень прост в изучении, но может удовлетворить потребности
профессиональных программистов и предназначен для работы в среде веб-сервера.
РHР первоначально расшифровывался как Рersоnаl Hоme Раge Tооls.
Комментарии можно писать в любом месте - так же, как в C, Раscаl или
JаvаScriрt, с двумя последовательными косыми чертами и точкой с запятой после
каждой команды.
Чтобы объявить переменную, просто добавьте знак доллара, за которым
следует имя переменной и ее значение.
Чтобы отобразить переменную в HTML-коде, просто введите команду echо и
поместите текст в нужное место.
В РHР также есть классы, объекты, автотипирование (хотя мало кто
понимает, как оно работает в сложных примерах) и множество встроенных
функций, которые облегчают разработку и помогают быстро писать код. Самое
главное, что сам РHР может работать с любым кодом. Если он написан в
соответствии с правилами языка, интерпретатор с радостью запустит его, и
большинство даже сможет работать.
Код РHР можно встраивать в HTML-страницы или сохранять в виде
отдельных файлов. В этом случае создаются мини-модули, каждый из которых
отвечает за что-то одно. Например, в одном - заголовок, в другом - меню, в третьем
файле - подвал, а в четвертом - блок комментариев к товару.
Если у вас есть интернет-магазин и вы хотите отображать хедеры и футеры
на каждой странице товара, вы можете переписывать их каждый раз вручную или
создавать в РHР.
РHР записывает то, как выглядит заголовок, в файл под названием
19
1.4.5 рhрMyАdmin
РhрMyАdmin — это веб-приложение с открытым исходным кодом,
написанное на РHР, которое предоставляет веб-интерфейс для управления базами
данных MySQL и позволяет управлять сервером MySQL, выполнять SQL-команды
и просматривать таблицы и содержимое базы данных из браузера или из других
мест. Это приложение очень популярно среди веб-разработчиков, поскольку оно
позволяет управлять СУБД MySQL без необходимости вводить SQL-команды
напрямую [15].
1.4.6 СУБД MySQL
База данных (БД), представляет собой организованное хранилище множества
наборов данных.
В программировании база данных — это папка на сервере (компьютере),
которая содержит таблицы с организованными и структурированными данными.
База данных состоит из таблиц. Таблицы на сервере — это файлы, в которых
хранятся определенные типы данных. Важно понимать, что эти данные не должны
смешиваться, и каждый из них должен находиться в отдельной, предназначенной
для него таблице; в базе данных может быть несколько таблиц.
Таблица состоит из столбцов и строк. В таблице каждый столбец
предназначен для хранения определенной информации. Например, в таблице о
клиентах в одном столбце может храниться их фамилия, в другом - имя, в третьем
- электронная почта.
Начинающие веб-мастера часто путают понятия базы данных и СУБД. Если
база данных — это набор данных, то СУБД (система управления базами данных)
— это специализированное программное обеспечение, предназначенное для
управления этой базой данных; существует множество типов СУБД, включая
РоstgreSQL, SQLite, Оrаcle Dаtаbаse и MySQL.
Базы данных используются для оптимизации работы с большими объемами
информации. В свою очередь, сама база данных постоянно изменяется и
20
пополняется новыми данными. Чтобы упростить процесс управления, добавления
и редактирования информации, были разработаны специальные системы
управления базами данных (СУБД) - MySQL является одной из многих СУБД,
используемых для упрощения работы с базами данных. MySQL имеет встроенные
серверные библиотеки, которые могут быть использованы в отдельных
программах.
По функциональности и надежности MySQL давно соперничает с другими
известными продуктами. MySQL широко используется при разработке вебрешений
благодаря
тесной
интеграции
с
распространенными
языками
программирования.
1.5 Хостинг информационной системы с веб-интерфейсом «JellyJeаns»
Хостинг — это услуга по хранению веб-сайтов. Это необходимо для того,
чтобы пользователи Интернета могли посещать его 24 часа в сутки, 7 дней в
неделю. Компания, которая предоставляет эту услугу, называется хост или
хостинг-провайдер. Этот термин происходит от английского слова hоst, что
означает «размещение».
Веб-сайт — это набор информации, такой как текстовые и видеофайлы,
изображения, код и базы данных. Для того чтобы эти сайты могли просматривать
другие пользователи, они должны быть загружены на компьютеры со
специализированным программным обеспечением и круглосуточным доступом в
Интернет. Такие компьютеры называются серверами. Хостинговые компании
имеют достаточное количество серверов, чтобы обслуживать большое количество
клиентов.
Разумеется, серверы располагаются на специальных полках в отдельном
помещении. Такое помещение называется центром обработки данных, центром
обработки данных (ЦОД) или центром хранения и обработки данных (ЦХОД).
Резервные генераторы обеспечивают бесперебойное электропитание, связь,
обновление оборудования и безопасность. Оператор хостинга может иметь свой
21
собственный центр обработки данных. Однако чаще он арендует помещение для
размещения своих серверов или у своего серверного центра обработки данных.
Прежде чем клиент сможет посетить сайт, ему необходим адрес. Этот адрес
называется доменом или доменным именем.
Доменные имена могут быть зарегистрированы у аккредитованных
регистраторов или их партнеров-посредников. Список таких регистраторов в зонах
.RU и .РФ можно найти на официальном сайте Координационного центра
национального домена. Многие регистраторы также предлагают услуги хостинга,
поэтому вы сможете решить все вопросы в одном месте.
Последовательность действий для размещения сайта на хостинге следующая:
Регистрация домена;
Привязка домена к хостингу;
Размещение сайта на хостинге.
1.6 Общее заключение по основным технологиям разработки
информационной системы с веб-интерфейсом «JellyJeаns»
Для проектирования и разработки любой информационной систему с вебинтерфейсом требуется немалое количество знаний, веб-сервисов и программ. В
первой главе было приведены те ресурсы, которые использовались для создания
данного проекта, конечно альтернатив и вариантов для создания веб-приложений
множество. Здесь были представлены одни из самых удобных и популярных.
Проектирование начинается с прототипа, для создания которого прекрасно
подходит Figmа. Для обработки изображений используется часто фотошоп, но не у
всех есть возможность это покупать, поэтому для данного проекта используется
бесплатная веб-версия – фотошоп-онлайн.
Разработка сайта требует больше знаний и ресурсов, чем прототипирование.
Тут необходимы знания в области кода, использования необходимым программ.
Базовые знания о гипертекстовой разметке, о отображении браузерами
22
информации, в зависимости от версии языка или разметки. Умение использовать
язык программирования РHР для связки клиент-сервер.
В данной главе подробно раскрыта информация о
составляющей проектирования и разработки.
теоретической
23
Глава 2. Разработка и проектирование информационной системы с вебинтерфейсом «JellyJeаns»
В
данной
главе
будет
рассмотрена
разработка
и
проектирование
информационной системы с веб-интерфейсом «Дизайн-ателье JellyJeans». Для
реализации системы были выбраны следующие технологии:
1. База данных – MySQL;
2. Язык программирования –PHP;
3. Фреймворк для веб-разработки – SwipeJS, JQuery;
4. Фронтенд – HTML, CSS, JavaScript и библиотеки jQuery и SwipeJS;
Для начала проектирования системы был проведен анализ требований к ней,
определены основные сущности и их связи, а также составлены схемы базы данных
и веб-интерфейса. Было произведено размещение сайта на хостинг и проведена
SEO – оптимизация [8].
2.1 Составление технического задания на разработку и проектирование
информационной системы с веб-интерфейсом «JellyJeаns»
Техническое задание на создание сайта
«дизайн-ателье JellyJeans»
необходимо для описания всех требований к создаваемому сайту, включая
функциональные, дизайнерские, технические и контентные. Оно является основой
для разработки и тестирования сайта, а также помогает определить ресурсы и
сроки, необходимые для его создания. В техническом задании должны быть
указаны все требования заказчика, включая цели и задачи сайта, его структуру,
функциональность, дизайн, а также требования к хостингу и безопасности.
Техническое задание является важным документом, который позволяет заказчику
и разработчику понимать друг друга и успешно реализовывать проект.
1. Общее описание проекта
«Дизайн-ателье JellyJeans» — это рекламный сайт, с возможностью оставить
заказ, который занимается созданием кастомной одежды, расписанной вручную на
24
заказ. Сайт должен иметь привлекательный дизайн и удобную навигацию,
позволяющую пользователям легко находить нужные товары.
Целевая аудитория: от 15 до 35 лет.
Все изображения предоставлены.
2. Функциональные требования
Разработка удобного интерфейса и дизайна сайта;
Возможность оформления заказа;
Создание и подключение базы данных для хранения заказов и
примеров работ;
Разработка панели управления для администратора сайта;
Оптимизация сайта для поисковых систем;
Страницы:
o Главная
Шапка с логотипом, лозунгом и кнопкой «заказать»
Поп-ап меню-гамбургер
О нас
Реклама с кнопкой «заказать»
Слайдер с примерами работ
Как заказать?
Наши мастера
Почему мы?
Контакты
Подвал
o Примеры работ
Роман
Кристина
Алина
o Оформление заказа
o Панель администратора
25
o Доставка
3. Технические требования
Верстка сайта должна быть резиновой, для правильного отображения
на разных мониторах;
Разработка сайта должна быть выполнена с использованием HTML5,
CSS3, JavaScript, PHP и MySQL, возможно использование библиотек и
фреймворков;
Работа сайта должна быть быстрой и безопасной;
4. Графические требования
Разработка дизайна сайта должна соответствовать концепции бренда
«Дизайн-ателье JellyJeans»
Необходимо создать логотип и фирменный стиль для сайта
Разработка дизайна сайта должна быть выполнена в едином стиле и
цветовой гамме
5. Терминология
«Пользователь» - человек, который использует сайт «Дизайн-ателье
JellyJeans».
«Администратор» - человек, который управляет содержимым сайта и
обрабатывает заказы.
2.2 Разработка структуры информационной системы с веб-интерфейсом
«JellyJeаns»
Разработка структуры сайта информационной системы с веб-интерфейсом
«JellyJeаns» начинается с создания карты сайта и моделей IDEF0 и IDEF3.
Создание карты сайта и моделей IDEF0 и IDEF3 является одним из первых
этапов проектирования сайта информационной системы. Карта сайта помогает
определить структуру сайта и его основные разделы, а модели IDEF0 и IDEF3
позволяют провести детальный анализ потоков информации и процессов, которые
будут происходить на сайте. Это важно для того, чтобы определить оптимальную
26
структуру сайта и обеспечить эффективное взаимодействие пользователей с
информационной системой [12].
Карта сайта (sitemap) необходима для упрощения и улучшения процесса
индексации сайта поисковыми системами [2]. Карта сайта представляет собой
список всех страниц сайта, который предоставляет поисковым роботам
информацию о структуре сайта и помогает им быстро и эффективно индексировать
содержимое. Карта сайта также может помочь пользователям легче найти нужную
информацию на сайте, особенно если сайт имеет большое количество страниц или
сложную структуру. (Рисунок 1)
Рисунок 1 Карта сайта
IDEF0 (Integrated Definition for Function Modeling) — это методология
моделирования функций, которая используется для анализа и проектирования
систем.
IDEF0
позволяет
описать
функциональную
структуру
системы,
идентифицировать ее основные компоненты, определить отношения между
компонентами и описать их функции.
27
Проектирование систем: IDEF0 может помочь при разработке новых систем
или
модификации
существующих
систем,
позволяя
лучше
понять
их
функциональную структуру (Рисунок 2).
Рисунок 2 IDEF0
Idef3 (Integrated Definition Language 3) — это язык моделирования процессов,
который используется для описания бизнес-процессов и системных процессов. Он
может быть использован для проектирования, документирования и анализа
процессов в организации. Idef3 может быть полезен для определения потоков
информации, ролей, функций и взаимодействий между различными участниками в
процессе. Idef3 также может использоваться для определения требований к системе
и разработке бизнес-моделей (Рисунок 3).
Рисунок 3 IDEF3
28
Разработка структуры информационной системы с веб-интерфейсом
поможет создать удобный и эффективный инструмент для управления бизнесом.
2.3 Проектирование веб-интерфейса «JellyJeаns»
Для
разработки
пользовательского
интерфейса были
задействованы
несколько графических редакторов. В первую очередь, веб-приложение Figma
выступило основным инструментом. Непосредственно процесс разработки начался
с составления дизайн-макетов для всех страниц. Относительно главной страницы
было уделено особое внимание, поскольку эта страница задает настроение для
всего сайта. Важно отметить, что первым элементом, который видит пользователь
при открытии веб-страницы, является главная страница. По этой причине крайне
необходимо разместить на ней всю фундаментальную информацию, дабы
потенциальный клиент понимал, какие цели может достичь, использовав данный
сайт [9].
Представленный на данной странице рекламный контент относится к
компании, специализирующейся на создании индивидуальной одежды по
уникальным эскизам. Целью данного веб-сайта является стимулирование
потенциальных клиентов к осуществлению заказа. Это достигнуто путем
использования
ярко
выделенной
кнопки
«заказать»
в
трех
местах,
привлекательных акционных предложений и демонстрации готовых работ.
Цветовая гамма данной страницы была подобрана с учетом возрастных
ограничений целевой аудитории. Она не является чрезмерно яркой или блеклой, а
представляет собой оптимальное сочетание оттенков. Количество изображений,
иконок и текста подобрано в соответствии с потребностями данной возрастной
группы. Основным средством информационной передачи являются изображения,
однако текст также выполняет свою важную функцию, дополняя и уточняя
предоставленную информацию (Рисунок 4) [14].
29
Рисунок 4 Дизайн-макет главной страницы
Для сайта такого типа, примеры работ, являются важной части для
повышения продаж, и данная страница максимально структурирована, чтобы
пользователь мог без труда по ней ориентироваться и решить, у какого мастера он
хочет сделать заказ (Рисунок 5).
30
Рисунок 5 Дизайн-макет страницы с примерами работ
Страница с областью доставки, поможет пользователю понять, есть ли
доставка к нему (Рисунок 6).
31
Рисунок 6 Страница с областью доставки
Панель администратора и оформление заказа, выполнены в одном стиле и
визуально не перегружены, чтобы не отвлекать от грамотного заполнения данных
(Рисунок 7 и Рисунок 8).
32
Рисунок 7 Страница панели админисратора
Рисунок 8 Страница оформления заказа
После успешного оформления заказа, пользователь попадает на страницу,
(Рисунок 9).
33
Рисунок 9 Страница после успешного оформления заказа
Можно отметить, что все страницы данной информационной системы с вебинтерфейсом выполнена в едином стиле. Все цвета подобраны по правилам.
2.4 Составление базы данных с использованием СУБД MySQL через вебприложение рhрMyАdmin
Начало разработки связи клиента и сервера начинается с создания базы
данных, она позволит взаимодействовать с данными. База данных создается с
помощью СУБД PhpMyAdmin. Создается база данных, а в ней таблицы, со своими
значениями. [11]
В данном случае, база данных состоит из 3 таблиц (Рисунок 10).
Рисунок 10 База данных
Первое значение - id (Тип переменной:int), числовая переменная, она
является автоинкрементном, есть считается сам по мере добавления элементов в
таблицу.
Второе значение - name (Тип переменной: varchar (50)), это текстовая
переменная, содержит заголовок.
34
Третье значение - price (Тип переменной:int), числовая переменная, в нее
будет записываться цена.
Четвертое значение – master_name (Тип переменной: varchar (50)), это
текстовая переменная, будет содержать имя мастера.
Таблица «examples» на Рисунок 11 отвечает за вывод и добавление примеров
во вкладке «Примеры работ» в интернет-ресурсе “JellyJeаns”.
Рисунок 11 Таблица с примерами
Первое значение также – id.
Второе значение тоже name (Тип переменной: varchar (50)), однако в данном
случае она означает имя клиента.
Третье значение - adress (Тип переменной: varchar (200)), в нее записывается
адрес доставки клиента.
Четвертое значение – phone (Тип переменной: varchar (15)), короткая
символьная переменная, используется для записи телефона.
Пятое значение - email (Тип переменной: varchar (50)), для электронной для
почты клиента.
Шестое значение - type (Тип переменной: varchar (25)), в нем содержится
значение типа связи.
Седьмое значение - idea (Тип переменной: text), текстовое поле для описания
идеи клиента.
Таблица на Рисунок 12 создана для оформления заказа со стороны клиента.
Все значения передаются в админ-панель.
35
Рисунок 12 Содержание таблицы “order”
Таблица на Рисунок 13 создана для регистрирования админа, и разделения
обычного пользователя и админа.
Рисунок 13 Содержание таблицы “users”
База данных важная часть связи клиент-сервер и в данном проекте
используется для оформления заказа и добавления примеров работ на сайт. [13]
2.5 Разработка информационной системы с веб-интерфейсом «JellyJeаns» с
использованием текстового редактора VSCоde
Разработка любой информационной системы начинается с создания каркаса
HTML (Рисунок 14). На нем представлены все мета теги, сематические элементы,
название страницы, кодировку.
36
Рисунок 14 HTML каркас
В теге head прописываются все необходимые мета тэги, включая кодировку,
способ отображения, описание. Подключаются все необходимые ссылки CSS файлов, шрифтов. Пишется title, включающий в себя название вкладки (Рисунок
15). [10]
Рисунок 15 Тег head
Далее сематический элемент, входящий в тег body nav. В нем прописано
меню – гамбургер, вставлен логотип, фото шапки и заголовки (Рисунок 16).
37
Рисунок 16 Тег nav
В теге main находится основная часть сайта, все информационные блоки
располагаются именно в нем (Рисунок 17).
Рисунок 17 Тег main
38
В теге footer находится подвал с меню, входом для администраторов, и
копирайтом (Рисунок 18).
Рисунок 18 Тег footer
В конце файла находятся необходимые скрипты, библиотеки и фреймворки,
а также закрытие тега html (Рисунок 19).
Рисунок 19 Скрипты и закрытие тегов
Перед началом html прописывается необходимый php код и подключается
база данных – db.php (Рисунок 20).
39
Рисунок 20 PHP код
Подключение базы данных было выполнено в отдельном файле, с той целью,
чтобы не прописывать на каждой странице ее подключение (Рисунок 21).
Рисунок 21 Подключение базы данных
Для корректного и красивого отображения используется CSS – каскадная
таблица стилей (Рисунок 22). [6]
40
Рисунок 22 CSS – каскадная таблица стилей
Разработка информационной системы с веб-интерфейсом «Дизайн-ателье
JellyJeans» с использованием текстового редактора VSCode является эффективным
решением
для
создания
удобного
и
функционального
интерфейса
для
пользователей.
Применение VSCode позволяет разработчикам быстро и удобно создавать
код, а также использовать различные плагины и расширения для улучшения
процесса разработки.
41
2.6 Размещение информационной системы с веб-интерфейсом «JellyJeаns» на
хостинге
Для отображения сайта в интернете необходимо его разместить на
виртуальный хостинг, есть множество вариантов веб-хостинга, но конкретно для
данного проекта используется бесплатный beget.com (Рисунок 23).
Рисунок 23 Веб-сайт хостинга beget
Для использования данного ресурса, необходима регистрация (Рисунок 24).
Рисунок 24 Регистрация на ресурсе beget.com
После прохождения регистрации, нам доступна панель управления, на
которой создается сайт и привязывается доменное имя (Рисунок 25).
42
Рисунок 25 Страница создания сайта
После создания сайта появляется директория с файлами, куда мы загружаем
файлы нашего сайта (Рисунок 26).
Рисунок 26 Файловый менеджер
После того, как все файлы были загружены, создается база данных в
phpMyAdmin (Рисунок 27).
43
Рисунок 27 База данных
Сайт
размещен
на
хостинге
и
доступен
по
доменному
имени
u90998hq.beget.tech (Рисунок 28).
Рисунок 28 Сайт, размещенный на хостинге
После анализа технических характеристик и возможностей хостинга, можно
сделать вывод, что размещение информационной системы с веб-интерфейсом
«Дизайн-ателье JellyJeans» на данном хостинге будет возможно и эффективно.
Хостинг поддерживает PHP и MySQL, что является необходимым для работы
данной системы. Также, предоставляется достаточно места для хранения данных и
выделенный IP-адрес, что обеспечивает стабильность и безопасность работы
системы.
Однако, перед размещением системы необходимо убедиться в соответствии
версии PHP и MySQL с требованиями системы. Также, необходимо провести
44
тестирование на хостинге, чтобы убедиться в стабильности и производительности
работы системы.
В целом, данный хостинг подходит для размещения информационной
системы с веб-интерфейсом «Дизайн-ателье JellyJeans».
2.7 SEО - оптимизация информационной системы с веб-интерфейсом
«JellyJeаns»
SEO – оптимизация важнейшая часть для продвижения сайта в интернете.
Это совокупность процессов, позволяющих улучшить сайт для его ранжирования
в поисковых системах. Такой метод поможет привлечь большое количество
аудитории, увеличить продажи и сделать компанию более узнаваемой. [7]
Для начала, необходимо провести анализ ключевых слов, которые наиболее
часто связывают с «Дизайн-ателье JellyJeans». Определиться с ключевыми
словами, поможет специализированный сервис, например, Google AdWords,
Яндекс WordStat (Рисунок 29).
Рисунок 29 Яндекс WordStat
Следующий этап – создание уникального контента. Необходимо написать
качественные статьи, которые будут включать в себя ключевые слова:
Использование тегов h1-h3 ();
Использование meta тега – описание (Рисунок 31).
45
Рисунок 30 Пример тегов h1 и h2
Рисунок 31 Meta тег - описание
Также нужно заботиться о внутренней структуре сайта. Необходимо создать
удобную навигацию, чтобы пользователи могли легко найти нужную информацию
(Рисунок 32).
Рисунок 32 Навигационное меню
46
В целом, SEО-оптимизация информационной системы с веб-интерфейсом
«JellyJeаns» – это комплекс мероприятий, которые направлены на увеличение
видимости сайта в поисковых системах. Чем лучше сайт оптимизирован, тем
больше пользователей он привлекает и тем выше его рейтинг.
2.8 Общее заключение по разработке информационной системы с вебинтерфейсом «JellyJeаns»
В заключении, можно сделать вывод, что разработка информационной
системы с веб-интерфейсом «Дизайн-ателье JellyJeans» была выполнена
профессионально и качественно. Веб-интерфейс системы демонстрирует хорошее
сочетание функциональности и дизайна, что способствует удобству использования
пользователем.
В целом, разработка информационной системы с веб-интерфейсом «Дизайнателье JellyJeans» является успешной и рекомендуется к использованию как для
конечных пользователей, так и для компаний, которые планируют внедрить
подобную систему в свою деятельность.
Были использованы различные технологии и знания в разработке сайтов.
47
Глава 3 Расчет затрат на разработку и стоимости программного продукта
Разработка программного продукта – это сложный процесс, который требует
значительных затрат: временных, финансовых и человеческих ресурсов. Поэтому
важно правильно оценить затраты на разработку программного продукта, чтобы
избежать неожиданных расходов и убедиться в экономической целесообразности
проекта.
Расчет затрат на разработку программного продукта включает в себя оценку
трудозатрат и стоимости необходимых ресурсов. Для этого применяются
различные методы, такие как метод точечной оценки, метод функциональных
точек, метод экспертных оценок и другие.
Трудозатраты определяются количеством человеко-часов, необходимых для
реализации проекта. При этом учитываются такие факторы, как сложность проекта,
уровень квалификации разработчиков, доступность и качество информационных
ресурсов и технических средств.
Стоимость ресурсов включает в себя затраты на аппаратное и программное
обеспечение, аренду помещения, оплату труда сотрудников и другие расходы.
Однако, при расчете затрат на разработку программного продукта
необходимо учитывать, что эти затраты могут нести определенный риск,
связанный с техническими проблемами, неопределенностью требований заказчика
и другими факторами. Поэтому важно проводить анализ рисков и учитывать их при
оценке затрат на проект.
Стоимость проекта должна быть рассчитана так, чтобы проект окупался.
3.1 Расчет стоимости основных материалов
В таблице 1 приведена стоимость основных материалов
Таблица 1 Калькуляция стоимости основных материалов
№
Наименование и
Кол-во,
Цена ед.,
п/п
характеристики
шт.
р.
Сумма, р.
48
1
2
Ноутбук Аcer Sрin 5
Компьютерная мышь Defender
Fоrced 3200 dрi
3
Компьютерные стол
4
Компьютерное кресло
Бюрократ
5
Коврик для мыши
1
79 169.00
79 169.00
1
1 248.00
1 248.00
1
14 046.00
14 046.00
1
7 729.00
7 729.00
1
349.00
349.00
ИТОГО
102 541.00 102 541.00
ВСЕГО
102 541.00 102 541.00
3.2 Расчет затрат на содержание и эксплуатацию оборудования
Расчет затрат на содержание и эксплуатацию оборудования (ЭВМ,
многофункционального устройства (МФУ) и т.д.) определяется как сумма затрат
на электроэнергию и амортизационных отчислений за 1 час работы, умноженная
на количество часов разработки нового ПО.
Стоимость одного машино-часа LN, р.:
LN = ZN + АN (1),
где ZN – затраты на электроэнергию при эксплуатации ЭВМ, р., АN –
амортизация оборудования, р./ч.
Z1 = S1 × W1 (2),
где S1 – стоимость 1 кВт·ч, р., W1 – мощность ЭВМ, кВт.
А1 = С1 / СР1/720 (3),
где С1 – стоимость ЭВМ, р., СР1 – срок службы ЭВМ, мес.
А2 = С2 / СР2 / 720 (4),
где С2 – стоимость, р., СР2 – срок службы, мес.
49
А2 = С2/СР2/720 (5),
где С2 – стоимость, р., СР2 – срок службы, мес.
Результаты расчета приведены в таблице 2.
Таблица 2 Эксплуатационные расходы на 1 машино-час
Наименование статьи затрат
Затраты на электроэнергию при
эксплуатации Ноутбука
Амортизация оборудования
Ноутбука
Расчетные формулы
Сумма, р.
6,43 * 0,09006
0,58
79 169 / 120 / 720
0,92
Амортизация оборудования Стол 14 046/ 60 /720
0,33
Амортизация оборудования Стул 7 729.00 / 60 / 720
0,18
Эксплуатационные расходы на
один машино-час компьютера
ИТОГО
1,96
0,58 + 0,92
1,50
Далее полученные данные сводятся в таблице 3.
Таблица 3 Расходы на содержание и эксплуатацию оборудования
Наименование
оборудования
Стоимост Кол-во отработанных часов,
ь часа, р.
ч
Сумма, р.
Ноутбук Аcer Sрin 5 1,5
168
251,85
ИТОГО
168
251,85
1,5
3.3 Расчет оплаты труда персонала
Таблица 4 Расчет оплаты труда персонала
Должность
Количество
Часовая
затраченных на
тарифная
программу
ставка
Сумма, р.
50
часов
Директор / Вебразработчик
168
58 800 руб
350
Часовая тарифная ставка 350 руб/ час.
Фонд рабочего времени 1 работника по проекту составил:
21 дней × 8 час. = 168 час.
Зарплата составит 168*350= 58 800 руб.
3.4 Начисления на заработную плату
Начисления на заработную плату, в зависимости от категории плательщика,
указанных в ФЗ № 212-ФЗ, рассчитываются по следующим ставкам (таблица 5):
Таблица 5 Начисления на заработную плату
Начисления на заработную плату
Процент,
%
Сумма, р.
Пенсионный фонд (ПФ):
22
12 936,00
Налог на профессиональный доход
6
3528,00
ВСЕГО
28
16 464,00
3.5 Расчет накладных расходов
Накладные расходы — это сопутствующие затраты, которые прямо не
переносятся на себестоимость каждой единицы продукции, а подлежат
распределению. Расчет приведен в таблице 6.
Таблица 6 Расчет накладных расходов.
Накладные расходы
количество Сумма, р.
Расход на содержание рабочего места
1
5 800,00
Интернет
1
1 000,00
Реклама/ раскрутка сайта
1
20 000,00
Учебная литература
1
5 000,00
51
ВСЕГО
31 800,00
3.6 Расчет договорной цены продукта
Разработанный программный продукт предполагается использовать в
коммерческих целях разработчика. В связи с этим необходимо провести расчет
различных видов цен.
Себестоимость продукции — это денежное выражение затрат предприятия
на производство и реализацию продукции.
Цена представляет собой также выражение стоимости товара.
Договорная
цена
программного
обеспечения
определяется
себестоимость, прибыль, затраты на рекламу и оформляется в таблице 7.
Таблица 7 Калькуляция затрат
Наименование статей
затрат
Основные материалы
Сумма, р.
102 541.00
Стоимость всех материальных
ресурсов (таблица 1)
Затраты на содержание и
Расходы на содержание
и эксплуатацию
Содержание статей затрат
251,85
оборудования
эксплуатацию оборудования, в
том числе затраты на отладку
программы (таблица 3)
Основная зарплата работников,
Основная заработная
плата работников
58 800
занятых разработкой
программного обеспечения
(таблица 4)
Начисление на
заработную плату
16 464,00
Прочие прямые расходы
2 940
Накладные расходы
31 800,00
28 % (таблица 5) от пунктов 3-4
Оплата непредвиденных расходов
(5 % от пункта 3)
Таблица 7
как
52
Себестоимость ПО без
учета расходов на
212 796,85
Сумма пунктов 1-7
21 279,6
10% от пункта 8
сопровождение
Расходы на
сопровождение и
адаптацию
Полная себестоимость ПО 234 076,54
Пункт 8 + пункт 9
Прибыль
70 222,96
30 % от пункта 10
Договорная цена
304 299,44
Сумма пунктов 10-11
70 222,96*100/100 = 70 222,96 - Чистая прибыль
3.7 Расчет экономического эффекта и срока окупаемости
Для принятия окончательного решения о возможности практической
реализации проекта делается комплексная оценка следующих экономических
показателей.
Экономический эффект — разница между результатами экономической
деятельности и затратами, произведенными для их получения и использования.
Проект можно рекомендовать, если величина Ээ при заданном значении К
положительна: Ээ 0.
Ээ = П – К*Сст (6),
где Ээ – экономический эффект, П – прибыль, К - норма дисконтирования
(нормативный коэффициент эффективности капитальных вложений, Сст –
Себестоимость.
70 222,96-23%*234076,54 = 16385,35
Значение К — Это допустимая для инвестора величина дохода, приходящаяся
на 1 единицу капитала, вложенного в проект в общем случае зависит от конкретных
53
экономических условий, средней банковской процентной ставки по стране, нормы
доходности
в
данной
отрасли,
степени
риска
проекта,
инфляции,
средневзвешенной стоимости капитала фирмы и длительности рассматриваемого
проекта. Минимальная величина К будет составлять 23 процента.
Эффективность использования основных средств:
Эос= ЧП/ ОС*100% (7) ,
Где Эос – Эффективность основных средств, ЧП – чистая прибыль, ОС –
основные средства, сумма из таблицы 1 без НДС.
70 222,96/102541,00*100%=68%
Расчет коэффициента самоокупаемости позволяет определять минимальный
коэффициент загрузки.
Коэффициент самоокупаемости:
Ксо = Сст/ Цдог (8),
где Ксо – коэффициент самоокупаемости, Сст – Себестоимость, Цдог –
договорная цена.
234076,54/304299,44=0,77 (77%)
Формула расчета срока окупаемости вложений:
Ток = Сст/П (9),
где Ток – окупаемость, Сст – таблица 7 пункт 10, себестоимость, П - прибыль
от внедрения продукта.
234076,54/70222,96= 3,33,
Показатель в месяцах.
Эффективность инвестиционных затрат (Эиз) определяется по формуле:
54
Эиз = П/Сст (10),
где Эиз - Эффективность инвестиционных затрат, П – прибыль, Сст себестоимость
70222,96/234076,54=0,3
При задании нормативных значений срока окупаемости Ток и эффективности
капитальных вложений Эиз следует учитывать, что:
Эиз =1/ Ток (11),
где Эиз - Эффективность инвестиционных затрат, Ток – окупаемость.
1/3,33=0,3
3.8 Сводные экономические показатели информационной системы с вебинтерфейсом «JellyJeаns»
Проведение расчета затрат на разработку программного продукта является
важным этапом в процессе создания программного обеспечения. Он позволяет
оценить не только финансовые риски, связанные с созданием продукта, но и
определить стоимость готового продукта для потенциальных пользователей.
Расчет затрат на разработку программного продукта должен включать
следующие этапы:
1. Определение требований к программному продукту. Необходимо
определить функциональные и нефункциональные требования к
продукту, а также описать его основные характеристики;
2. Оценка трудозатрат. На этом этапе необходимо определить, сколько
времени потребуется для создания продукта. Для этого разработчики
должны оценить сложность конкретных задач, которые необходимо
решить при создании продукта;
55
3. Оценка
стоимости.
После
определения
трудозатрат необходимо
определить среднюю часовую ставку разработчиков, чтобы оценить
стоимость их труда. Кроме того, необходимо учесть стоимость
инфраструктуры, необходимой для разработки продукта, такую как
аренда офиса, компьютеров, программного обеспечения и т.д;
4. Оценка рисков. Необходимо проанализировать возможные риски и
оценить их влияние на процесс разработки и на финансовую сторону
проекта;
5. Определение стоимости готового продукта. На основе оценки затрат на
разработку и учета возможной прибыли необходимо определить цену на
готовый продукт;
Договорная цена сайта достигла 304 299,44 р.
Таким образом, проведение расчета затрат на разработку и стоимости
программного продукта позволяет определить реальные затраты на создание
продукта и оценить его коммерческую ценность.
56
Заключение
В заключении важно отметить, что проектирование и разработка
информационной системы с веб-интерфейсом «Дизайн-ателье JellyJeаns» является
достаточно сложным и многопроцессным проектом. Однако, задачи, поставленные
в проекте, были осуществлены, благодаря правильному подходу и использованию
соответствующих технологий.
Изучение основных технологий для проектирования и разработки является
важным этапом проекта, который позволил выбрать наиболее подходящие
инструменты для создания системы.
Разработка дизайна данного проекта, с учетом целевой аудитории также
является важным шагом, который позволил определить визуальный стиль и
функциональность системы, чтобы удовлетворить потребности пользователей.
Создание информационной системы включает в себя разработку логики и
функциональности системы, а также ее интеграцию со всеми необходимыми
инструментами.
Составление базы данных с использованием СУБД MySQL через вебприложение phpMyAdmin также является важным этапом проекта, который
позволит сохранять и управлять всей информацией, которая будет использоваться
в системе.
Проект был разработан с помощью текстового редактора VSCоde, его
возможности позволяют упростить работу. Благодаря плагинам и автоматическому
заполнению, разработка происходит в разы быстрее. В процессе работы были
максимально
изучены
возможности
данного
текстового
редактора
для
разработчиков.
При разработке были использованы HTML, CSS, JS и библиотеки для CSS и
JS. Задействовались все знания полученные в процессе обучения, чтобы получить
полноценный, красивый, функциональный веб-ресурс.
57
Во время создания сайта, главное сделать так, чтобы посетителям было
удобно перемещаться между страницами и находить нужную информацию. Для
этого связываются страницы между собой, используются графические элементы и
тексты. Еще одной важной особенностью сайта является его дизайн. Резиновый
дизайн позволяет сайту автоматически подстраиваться под ширину окна браузера,
что делает использование сайта более удобным и приятным.
Плюсы такого дизайна, например, заключаются в том, что пользователи
могут использовать все доступное пространство экрана своего устройства, а также
им не нужно перематывать сайт горизонтально, если у них разный размер
монитора. К тому же, дизайн сайта имеет значительное влияние на впечатление,
которое посетитель получит от сайта в целом.
Конечно, создание резинового дизайна требует больших усилий, чем
создание фиксированного макета, однако это один из самых важных факторов,
влияющих на успех сайта. В итоге, резиновый дизайн является одним из лучших
способов сделать сайт более удобным и приятным для посетителей.
Для создания такого дизайна сайта используется технология CSS, которые
позволяют адаптировать страницы под разные разрешения экранов. Также
используются относительные величины для задания размеров и расположения
элементов страницы, что позволяет им удобно изменяться в зависимости от
размера окна браузера.
Резиновый дизайн сайта является более универсальным и удобным для
пользователей, чем фиксированный дизайн, который имеет строго заданные
размеры и может приводить к проблемам при просмотре на экранах разных
размеров.
Для доступа сайта в интернете были изучены различные виды хостинга,
проведен анализ и выбран лучший и бесплатный хостинг для размещения вебприложения в сети. Полностью отработана схема загрузки информационной
системы с веб-интерфейсом на хостинг.
58
Также, что не менее важно, была проведена полная SEO-оптимизация, были
учтены все правила по написанию статей на сайте, использованы необходимые
теги, проверка их с помощью веб-ресурсов по поиску слов.
В достижении желаемого результата в любом проекте необходимо учитывать
не только технические знания и навыки, но и аккуратное планирование и
организация. Во многих случаях это может быть не менее важным, чем
технические аспекты работы.
В итоге, можно с уверенностью сказать, что планирование и организация
играют очень важную роль в достижении желаемого результата в проекте. Если вы
уделяете достаточно внимания этому, вы можете увеличить шансы на успех вашего
проекта в несколько раз. Технические знания и навыки являются важными, но без
правильной организации они не смогут дать положительный результат.
Цели были выполнены:
1. Изучены основные технологии для проектирования и разработки
информационной системы с веб-интерфейсом «Дизайн-ателье
JellyJeаns»;
2. Составлена техническое задание на разработку информационной
системы с веб-интерфейсом «Дизайн-ателье JellyJeаns»;
3. Разработан дизайн «Дизайн-ателье JellyJeаns» с учетом целевой
аудитории;
4. Разработана информационная система «Дизайн-ателье JellyJeаns»;
5. Составлена база данных с использованием СУБД MySQL через вебприложение рhрMyАdmin;
6. Разработана информационная систему с веб-интерфейсом «Дизайнателье JellyJeаns» с использованием текстового редактора VSCоde;
7. Размещена информационная система с веб-интерфейсом «Дизайнателье JellyJeаns» на хостинге;
8. Проведена SEО-оптимизация информационной системы с вебинтерфейсом «Дизайн-ателье JellyJeаns»;
59
Список используемых источников
1.
Веру, Леа Секреты CSS. Идеальные решения ежедневных задач / Леа
Веру. - М.: Питер, 2022. - 336 c.
2.
Гарретт Джесс. Веб-дизайн. Элементы опыта взаимодействия. — М.:
Символ-Плюс, 2020. — 285 c.
3.
ГОСТ 7.1 – 2003 Система стандартов по информации, библиотечному и
издательскому делу. Библиографическая запись. Библиографическое
описание. Общие требования и правила составления. [Электронный
ресурс] URL: http://www.infosait.ru/ (28.05.2023)
4.
ГОСТ Р 7.0.5 – 2008 Система стандартов по информации, библиотечному
и издательскому делу. Библиографическая ссылка. Общие требования и
правила составления. [Электронный ресурс] URL: http://www.infosait.ru/
(28.05.2023)
5.
ГОСТ Р 7.04 – 2006 Система стандартов по информации, библиотечному
и издательскому делу. Издания. Выходные сведения. Общие требования и
правила оформления. [Электронный ресурс] URL: http://www.infosait.ru/
(28.05.2023)
6.
Дэвид, Сойер Макфарланд Большая книга CSS3 / Дэвид Сойер
Макфарланд. - М.: Питер, 2023. - 335 c.
7.
Жвалевский, Андрей Создание и раскрутка сайта без напряга / Андрей
Жвалевский. - М.: Питер, 2020. - 288 c.
8.
Калиновский, Андрей Ваша домашняя страничка в Интернете. Homepage,
или просто «хомяк» / Андрей Калиновский. - М.: БХВ-Петербург, 2022. 224 c.
9.
Кедлек, Тим Адаптивный дизайн. Делаем сайты для любых устройств /
Тим Кедлек. - М.: Питер, 2021. - 902 c.
10.
Клименко, Роман Веб-мастеринг на 100% / Роман Клименко. - М.: Питер,
2021. - 781 c
60
11.
Колисниченко, Денис PHP и MySQL. Разработка веб-приложений (5-е
издание) (pdf+epub) / Денис Колисниченко. - М.: БХВ-Петербург, 2023. 875 c.
12.
Лавдей, Ланс Проектирование прибыльных веб-сайтов / Ланс Лавдей ,
Сандра Нихаус. - М.: Манн, Иванов и Фербер, 2022. - 256 c.
13.
Новиков, Ю.В. Аппаратура локальных сетей: функции, выбор, разработка
/ Ю.В. Новиков, Д.Г. Карпенко. - М.: Эком, 2023. - 288 c.
14.
Патрик, Макнейл Веб-дизайн. Книга идей веб-разработчика / Макнейл
Патрик. - М.: Питер, 2022. - 773 c.
15.
Справочник
по
PHP:
[Электронный
ресурс]
URL:
https://www.php.net/manual/en/ref.array.php (17.04.2023)
16.
Хоган, Брайан HTML5 и CSS3. Веб-разработка по стандартам нового
поколения / Брайан Хоган. - М.: Книга по Требованию, 2023. - 272 c.
17.
Эллен
Луптон.
Драматургия
дизайна.
Как,
используя
приемы
сторителлинга, удивлять графикой, продуктами, услугами и дарить
впечатления. - ООО «Издательство «Эксмо», 2022. – 160 с.
61
Приложение 1
Код веб-приложения
Index.php
<?php
require 'db.php';
$data = $db->query("SELECT * FROM examples")->fetchAll(2);
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
if ($db->query("DELETE FROM examples WHERE id=$id")) {
echo
"<script>alert('Элемент
удалён');
location.href
=
'example.php'</script>";
} else print_r($db->errorInfo());
}
if(!empty($_POST))
{
$login = $_POST["login"];
$password = md5($_POST["password"]);
if($res = $db->query("
SELECT * FROM users WHERE login = '$login' AND password =
'$password'"))
{
$res = $res->fetchAll(2);
62
if(count($res) > 0)
{
$_SESSION["user"] = $res[0];
echo "<script>
alert('Добро пожаловать!');
location.href='admin.php'
</script>";
}
else
{
echo "<script>
alert('Неверный логин или пароль');
location.href='index.php'
</script>";
}
}
else
{
print_r($db->errorInfo());
}
}
?>
<!DOCTYPE html>
<html lang="ru">
63
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="Дизайн-ателье
“Дизайн-ателье
JellyJeans” - это индивидуальный дизайн для вашей одежды. Прекрасный подарок
на любой праздник. Живи ярче! Думай иначе!">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/swipe.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<title>Дизайн-ателье JellyJeans</title>
</head>
<body>
<nav style="background-image: url(img/bg_main.png);">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><b class="menu__item">Меню</b></li>
<li><a class="menu__item" href="index.php#about">О нас</a></li>
<li><a class="menu__item" href="index.php#stocks">Акции</a></li>
64
<li><a
class="menu__item"
href="index.php#how">Как
заказать?</a></li>
<li><a class="menu__item" href="delivery.php">Доставка</a></li>
<li><a
class="menu__item"
href="index.php#masters">Наши
мастера</a></li>
<li><a
class="menu__item"
href="index.php#advantages">Почему
мы?</a></li>
<li><a class="menu__item" href="order.php">Заказать</a></li>
<li><a
class="menu__item"
href="example.php">Примеры
работы</a></li>
</ul>
</div>
<div class="right">
<a href="index.php"><img src="img/logo.png" alt="logo"></a>
<h1>Подчеркни свою индвидуальность кастомной одеждой!</h1>
<a href="order.php" id='btn'>Заказать</a>
</div>
</nav>
<main>
<div id="about">
<h1>О нас</h1>
<div class="way">
<div class="block">
<img src="img/about_1.png" alt="about_1">
<p>Идея создать дизайн-ателье зародилась у нас довольно давно.
Еще в 2014 году мы начали продавать кастомные футболки, выкладывая свои
работы в соцсетях.</p>
65
</div>
<div class="block">
<p>Мы много работали и изучали, чтобы найти подходящие
материалы, самых лучших мастеров и улучшить качество до максимума.</p>
<img src="img/about_2.png" alt="about_2">
</div>
<div class="block">
<img src="img/about_3.png" alt="about_3">
<p>Так мы стали первыми на рынке по кастомизации одежды и
первыми, кто вышел из соцсетей в мировой интернет, чтобы радовать тысячи
наших клиентов качественной и быстро сделанной работой.</p>
</div>
</div>
</div>
<div id="stocks">
<h3>Оформи первый заказ уже сегодня и получи скидку 10%</h3>
<a href="order.php" class='btn'>Заказать</a>
</div>
<div id="examples">
<h1>Примеры работ</h1>
<!-- Слайдер -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<?php foreach ($data as $el) : ?>
66
<div class="swiper-slide" style="background: #fff;">
<span
style="background-image:
url(<?php
echo
"{$el['photo']}" ?>);"></span>
<div class="text">
<div class="left">
<p><?php echo "{$el['master_name']}" ?></p>
<p>“<?php echo "{$el['name']}" ?>”</p>
</div>
<p class="price"><?php echo "{$el['price']}" ?>р.</p>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<!-- Swiper JS -->
<script
src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-
bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
67
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</div>
<div id="how">
<h1>Как заказать?</h1>
<div class="flex block_h">
<div class="how_block">
<img src="img/1.png" alt="1">
<p>Напишите нам в соцсетях или оформите заказ на сайте следуя
инструции</p>
</div>
<div class="how_block">
<img src="img/2.png" alt="2">
<p>Дождитесь подтверждения заказа. Наш менеджер свяжется с
вами.</p>
</div>
<div class="how_block">
<img src="img/3.png" alt="3">
<p>Получите заказ удобным для вас способом</p>
</div>
</div>
</div>
<div id="masters">
<h1>Наши мастера</h1>
68
<div class="flex">
<div class="bl">
<img src="img/alina.png" alt="alina">
<h3>Алина</h3>
<p>Закончила Российский государственный университет им.
А.Н. Косыгина. <br>
Опыт: 5 лет.</p>
</div>
<div class="bl">
<img src="img/roman.png" alt="roman">
<h3>Роман</h3>
<p>Профессиональный художник. <br>
Опыт: 10 лет.</p>
</div>
<div class="bl">
<img src="img/kris.png" alt="kris">
<h3>Кристина</h3>
<p>Окончила НИУ "Высшая школа экономики" <br>
Опыт: 3 года.</p>
</div>
</div>
</div>
<div id="why">
<h1>Почему мы?</h1>
<div class="flex">
<div class="flex_w">
<div class="bl_w">
<img src="img/quallity.png" alt="quallity">
<div class="text_w">
69
<h2>Качество</h2> <br>
<p>Мы гарантируем качество выполняемой работы, в случае
брака по нашей ошибке, возвращаем 100% стоимости</p>
</div>
</div>
<div class="bl_w">
<img src="img/klient.png" alt="client">
<div class="text_w">
<h2>Клиентоориентированность</h2> <br>
<p>Мы выполним любой рисунок по вашему эскизу,
исполним любое ваше желание на одежде, даже самые необычные, наши мастера
не привередливые. </p>
</div>
</div>
<div class="bl_w">
<img src="img/dellivery.png" alt="dellivery">
<div class="text_w">
<h2>Доставка по всему СНГ</h2> <br>
<p>Почтой отправим вам товар в любую точку СНГ. </p>
<a href="delivery.php">*подробнее о доставке</a>
</div>
</div>
</div>
<img src="img/work_r.png" alt="work_r" id="photo_why">
</div>
<a href="order.php" class="button_why">Заказать</a>
</div>
<div id="contacts">
70
<h1>Контакты</h1>
<div class="flex">
<script type="text/javascript" charset="utf-8" async src="https://apimaps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A6c8b10827db8ec6aeb2
c8724b8b32d997e6f42dd6af8e0e29d21f8420d62d921&amp;width=700&amp;height=4
00&amp;lang=ru_RU&amp;scroll=true"></script>
<div class="text_contact">
<p>г. Москва, м. Митино, Дубравная ул., 34/29</p>
<div class="social">
<a
href="https://vk.com/lismaya">
<img
src="img/vk.png"
alt="vk"></a>
<a
href="https://api.whatsapp.com/send?phone=79099891643">
<img src="img/wa.png" alt="wa"></a>
<a
href="https://t.me/VernerVV">
alt="tg"></a>
</div>
<p>8(909)989-16-43</p>
</div>
</div>
</div>
</main>
<footer>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
<a href="index.php#how">Как заказать?</a>
<a href="delivery.php">Доставка</a>
<img
src="img/tg.png"
71
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<a href="example.php">Примеры работы</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
<a class="popup1-open" href="#">Для администрации</a>
<div class="popup1-fade">
<div class="popup1">
<div class="color">
<img src="img/logo.png" alt="logo">
<p>вход для администратора</p>
</div>
<br>
<form action="" method="post">
<label for="">
<p>Логин</p>
<input name="login" type="text" class="reg-input" required></label>
<label for="">
<p>Пароль</p>
<input
name="password"
type="password"
required></label> <br><br>
<button class="reg-button">Вход</button>
</form>
</div>
</div>
</footer>
class="reg-input"
72
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/pop-up.js"></script>
<script src="js/jquery-ui.min.js"></script>
</body>
</html>
Add_work.php
<?php
require 'db.php';
if(empty($_SESSION["user"]) || $_SESSION["user"]["role"] != "admin"){
echo
"<script>
alert('В
доступе
отказано');
location.href
=
'examples.php'</script>";
exit();
}
if(!empty($_POST)){
$name = $_POST['name'];
$photo = $_POST['photo'];
$master_name = $_POST['master_name'];
$price = $_POST['price'];
if($db->query("INSERT INTO examples (name, photo, master_name, price)
VALUES ('$name', '$photo', '$master_name', '$price')")){
echo "<script>alert('Данные внесены в базу данных'); location.href =
'example.php'</script>";
}
else print_r($db->errorInfo());
73
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добавление работ</title>
</head>
<body>
<h1>Добавление работы</h1>
<form action="" method="POST">
<label>Название
работы:<input
type="text"
name="name"></label><br><br>
<label>Цена (число):<input type="text" name="price"></label><br>
<label for="" style=" text-align: left;">
<p>Имя мастера</p>
<p ><input name="master_name" type="radio" value="Алина" checked
class="type" style="margin-bottom: 0"> Алина</p>
<p><input
name="master_name"
type="radio"
value="Роман"
class="type"> Роман</p>
<p><input name="master_name" type="radio" value="Кристина"
class="type"> Кристина</p>
</label>
<label>Фото (Ссылка):<input type="text" name="photo"></label><br><br>
74
<button style="background:#E0A875; color: white; text-decoration:none;
padding: 2vh 4vw;">Отправить</button>
</form>
</body>
</html>
Admin.php
<?php
require 'db.php';
$sql = "SELECT * FROM orders";
if (empty($_SESSION['user']) || $_SESSION['user']['role'] != 'admin') {
echo
"<script>
alert('Отказано в доступе');
location.href='index.php'
</script>";
exit;
}
if (isset($_GET['logout'])) {
session_destroy();
echo
"<script>
location.href='index.php'
</script>";
}
if (isset($_GET['delete_order'])) {
$id = $_GET['delete_order'];
75
$db->query(
"DELETE FROM orders
WHERE id = $id"
);
echo
"<script>
location.href='admin.php'
</script>";
}
$data = $db->query("$sql");
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="Дизайн-ателье
“Дизайн-ателье
JellyJeans” - это индивидуальный дизайн для вашей одежды. Прекрасный подарок
на любой праздник. Живи ярче! Думай иначе!">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/swipe.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
76
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<title>Дизайн-ателье JellyJeans</title>
</head>
<body>
<nav style="background: #E0A875; height:40vh; display: flex">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><b class="menu__item">Меню</b></li>
<li><a class="menu__item" href="index.php#about">О нас</a></li>
<li><a class="menu__item" href="index.php#stocks">Акции</a></li>
<li><a
class="menu__item"
href="index.php#how">Как
заказать?</a></li>
<li><a class="menu__item" href="delivery.php">Доставка</a></li>
<li><a
class="menu__item"
href="index.php#masters">Наши
мастера</a></li>
<li><a
class="menu__item"
href="index.php#advantages">Почему
мы?</a></li>
<li><a class="menu__item" href="order.php">Заказать</a></li>
<li><a
работы</a></li>
</ul>
</div>
class="menu__item"
href="example.php">Примеры
77
<a href="index.php" style="margin-top: 5vh; margin-left: 4vw"><img
src="img/logo.png" alt="logo"></a>
<h1 style="color: white; padding-top: 15vh; padding-left: 15vw">Панель
администратора</h1>
<a href="?logout" style="margin-top: 1vh; margin-left: 20vw; color: white; textdecoration: none;">Выход</a>
</nav>
<main>
<?php foreach ($data as $el) : ?>
<div id="order_admin" style=" width: 70vw;
height: fit-content;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
border: none;
margin: 10vh;
padding: 4vh;
margin-left: 12vw">
<p><b> Заказ <?php echo "{$el['id']}" ?></b></p>
<div class="first">
<p>Имя: <?php echo "{$el['name']}" ?></p>
<p>Адрес доставки: <?php echo "{$el['adress']}" ?></p>
<p>Телефон: <?php echo "{$el['phone']}" ?></p>
<p>Почта: <?php echo "{$el['email']}" ?></p>
</div>
<div class="first">
<p>Вид связи: <?php echo "{$el['type']}" ?></p>
<p>Идея: <?php echo "{$el['idea']}" ?></p>
</div><br>
78
<!-- При нажатии на эту кнопку этот заказ удаляется -->
<a
href="?delete_order=<?php
echo
"{$el['id']}"
?>"
style="background:#E0A875; color: white; text-decoration:none; padding: 2vh 4vw;
margin-left:55vw">Выполнено</a>
</div>
<?php endforeach; ?>
</main>
<footer>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
<a href="index.php#how">Как заказать?</a>
<a href="delivery.php">Доставка</a>
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<a href="example.php">Примеры работы</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
</footer>
</body>
</html>
Db.php
<?php
$db = new PDO(
"mysql:host=localhost;dbname=Дизайн-ателье JellyJeans",
79
"root",
""
);
session_start();
if(!isset($_SESSION["user"])){
$_SESSION["user"] = [];
}
?>
Delivery.php
<?php
require 'db.php';
$data = $db->query("SELECT * FROM examples");
if (!empty($_POST)) {
$login = $_POST["login"];
$password = md5($_POST["password"]);
if ($res = $db->query("
SELECT * FROM users WHERE login = '$login' AND password =
'$password'")) {
$res = $res->fetchAll(2);
if (count($res) > 0) {
$_SESSION["user"] = $res[0];
echo "<script>
alert('Добро пожаловать!');
location.href='admin.php'
</script>";
} else {
echo "<script>
80
alert('Неверный логин или пароль');
location.href='index.php'
</script>";
}
} else {
print_r($db->errorInfo());
}
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="Дизайн-ателье
“Дизайн-ателье
JellyJeans” - это индивидуальный дизайн для вашей одежды. Прекрасный подарок
на любой праздник. Живи ярче! Думай иначе!">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/swipe.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<title>Дизайн-ателье JellyJeans примеры работ</title>
</head>
81
<body>
<nav style="background-image: url(img/bg_del.png);">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><b class="menu__item">Меню</b></li>
<li><a class="menu__item" href="index.php">Главная</a></li>
<li><a class="menu__item" href="index.php#about">О нас</a></li>
<li><a class="menu__item" href="index.php#stocks">Акции</a></li>
<li><a
class="menu__item"
href="index.php#how">Как
заказать?</a></li>
<li><a
class="menu__item"
href="index.php#masters">Наши
мастера</a></li>
<li><a
class="menu__item"
href="index.php#advantages">Почему
мы?</a></li>
<li><a class="menu__item" href="order.php">Заказать</a></li>
<li><a
class="menu__item"
href="example.php">Примеры
работ</a></li>
</ul>
<a
href="index.php"
class='left_a'><img
alt="logo"></a>
</nav>
<br><br>
<main>
<h1 style="text-align:center;">Доставка</h1>
src="img/logo.png"
82
<img src="img/map_del.png" alt="map_del" class="img_map">
<h3 style="text-align:center; font-weight: 400;">Доставка производится по
всем странам СНГ. </h3>
<div class="mobile-table">
<table class="iksweb">
<tbody>
<tr>
<td>Москва и МО</td>
<td>500р. курьером</td>
</tr>
<tr>
<td>Россия</td>
<td>Уточнять, Почтой России, СДЭК</td>
</tr>
<tr>
<td>Другие страны</td>
<td>Уточнять</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer>
<a href="index.php">Главная</a>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
<a href="index.php#how">Как заказать?</a>
83
<a href="delivery.php">Доставка</a>
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
<a class="popup1-open" href="#">Для администрации</a>
<div class="popup1-fade">
<div class="popup1">
<div class="color">
<img src="img/logo.png" alt="logo">
<p>вход для администратора</p>
</div>
<br>
<form action="" method="post">
<label for="">
<p>Логин</p>
<input name="login" type="text" class="reg-input" required>
</label>
<label for="">
<p>Пароль</p>
<input
name="password"
type="password"
required>
</label> <br><br>
<button class="reg-button">Вход</button>
</form>
</div>
</div>
class="reg-input"
84
</footer>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/pop-up.js"></script>
<script src="js/jquery-ui.min.js"></script>
</body>
</html>
Edit.php
<?php
require 'db.php';
if(empty($_SESSION["user"]) || $_SESSION["user"]["role"] != "admin"){
echo
"<script>
alert('В
доступе
отказано');
location.href
=
'example.php'</script>";
exit();
}
$id = $_GET['id'];
if(isset($_POST['name'])){
$name = $_POST['name'];
$photo = $_POST['photo'];
$master_name = $_POST['master_name'];
$price = $_POST['price'];
if($db->query("UPDATE examples SET name = '$name', photo = '$photo',
master_name = '$master_name', price = '$price' WHERE id = '$id'")){
echo "<script>alert('Данные внесены в базу данных'); location.href =
'example.php'</script>";
85
}
else print_r($db->errorInfo());
}
$item = $db->query("SELECT * FROM examples WHERE id = $id")>fetchAll(2)[0];
?>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style_reg.css">
<title>Изменение</title>
</head>
<body>
<form action="#" method="post">
<label>Название: <input type="text" name="name" value="<?php echo
$item['name']; ?>" required></label><br><br>
<label>Фото
(В
виде
ссылки):
<input
type="text"
name="photo"
value="<?php echo $item['photo']; ?>" required></label><br><br>
<label>Цена:
<input
type="text"
$item['price']; ?>" required></label><br><br>
<label for="" style=" text-align: left;">
<p>Имя мастера</p>
name="price"
value="<?php
echo
86
<p ><input name="master_name" type="radio" value="Алина" checked
class="type" style="margin-bottom: 0"> Алина</p>
<p><input
name="master_name"
type="radio"
value="Роман"
class="type"> Роман</p>
<p><input name="master_name" type="radio" value="Кристина"
class="type"> Кристина</p>
</label>
<input type="hidden" name="id" value="<?php echo $item['id'] ?>"><br><br>
<button>Отправить</button>
</form>
</body>
</html>
Example.php
<?php
require 'db.php';
$data = $db->query("SELECT * FROM examples")->fetchAll(2);
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
if ($db->query("DELETE FROM examples WHERE id=$id")) {
echo
"<script>alert('Элемент
'example.php'</script>";
} else print_r($db->errorInfo());
}
удалён');
location.href
=
87
if (!empty($_POST)) {
$login = $_POST["login"];
$password = md5($_POST["password"]);
if ($res = $db->query("
SELECT * FROM users WHERE login = '$login' AND password =
'$password'")) {
$res = $res->fetchAll(2);
if (count($res) > 0) {
$_SESSION["user"] = $res[0];
echo "<script>
alert('Добро пожаловать!');
location.href='admin.php'
</script>";
} else {
echo "<script>
alert('Неверный логин или пароль');
location.href='index.php'
</script>";
}
} else {
print_r($db->errorInfo());
}
}
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
if ($db->query("DELETE FROM examples WHERE id=$id")) {
88
echo
"<script>alert('Элемент
удалён');
location.href
=
'example.php'</script>";
} else print_r($db->errorInfo());
}
$alina
=
$db->query("SELECT
*
FROM
examples
WHERE
*
FROM
examples
WHERE
FROM
examples
WHERE
master_name='Алина'")->fetchAll(2);
$roman
=
$db->query("SELECT
master_name='Роман'")->fetchAll(2);
$kris
=
$db->query("SELECT
*
master_name='Кристина'")->fetchAll(2);
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="Дизайн-ателье
“Дизайн-ателье
JellyJeans” - это индивидуальный дизайн для вашей одежды. Прекрасный подарок
на любой праздник. Живи ярче! Думай иначе!">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/swipe.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
89
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<title>Дизайн-ателье JellyJeans примеры работ</title>
</head>
<body>
<nav style="background-image: url(img/bg_ex.png);">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><b class="menu__item">Меню</b></li>
<li><a class="menu__item" href="index.php">Главная</a></li>
<li><a class="menu__item" href="index.php#about">О нас</a></li>
<li><a class="menu__item" href="index.php#stocks">Акции</a></li>
<li><a
class="menu__item"
href="index.php#how">Как
заказать?</a></li>
<li><a class="menu__item" href="delivery.php">Доставка</a></li>
<li><a
class="menu__item"
href="index.php#masters">Наши
мастера</a></li>
<li><a
class="menu__item"
href="index.php#advantages">Почему
мы?</a></li>
<li><a class="menu__item" href="order.php">Заказать</a></li>
</ul>
<a
alt="logo"></a>
href="index.php"
class='left_a'><img
src="img/logo.png"
90
</nav>
<main>
<h1 class="ex">Примеры работ</h1>
<div class="masters">
<a href="#alina">Алина</a>
<a href="#roman">Роман</a>
<a href="#kristina">Кристина</a>
</div>
<br><br>
<!-- кнопка ток для админов -->
<?php if (!empty($_SESSION['user']) && $_SESSION['user']['role'] ==
'admin') : ?>
<a href="add_work.php" id="Add">Добавить работу</a>
<?php endif; ?>
<div id="alina">
<div style="background-image: url(img/alina_bg.png); height: 40vh;
background-size: cover;">
<h1>Алина</h1>
</div>
<?php foreach ($alina as $el) : ?>
<div
class="item"
style="background-image:
"{$el['photo']}" ?>); height: 30vh; width: 60vw;">
<div class="text">
<p><?php echo "{$el['name']}" ?></p>
url(<?php
echo
91
<p>Цена <?php echo "{$el['price']}" ?>р.</p>
<br>
<?php if (!empty($_SESSION['user'])):?>
<a href="price.php">Заказать</a>
<?php endif; ?>
<br>
<!-- для админа-->
<div id="admin_btn">
<?php
if
(!empty($_SESSION['user'])
&&
$_SESSION['user']['role'] == 'admin') : ?>
<a
href="edit.php?id=<?php
echo
"{$el['id']}"
<a
href="?delete=<?php
echo
"{$el['id']}"
?>">Изменить</a>
?>">Удалить</a>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach;?>
</div>
<div id="roman">
<div style="background-image: url(img/roman_bg.png); height: 40vh;
background-size: cover">
<h1>Роман</h1>
</div>
92
<?php foreach ($roman as $el) : ?>
<div
class="item"
style="background-image:
url(<?php
echo
"{$el['photo']}" ?>);">
<div class="text">
<p><?php echo "{$el['name']}" ?></p>
<p>Цена <?php echo "{$el['price']}" ?>р.</p>
<br>
<?php if (!empty($_SESSION['user'])) : ?>
<a href="price.php">Заказать</a>
<?php endif; ?>
<br>
<div id="admin_btn">
<!-- для админа-->
<?php
if
(!empty($_SESSION['user'])
&&
$_SESSION['user']['role'] == 'admin') : ?>
<a
href="edit.php?id=<?php
echo
"{$el['id']}"
<a
href="?delete=<?php
echo
"{$el['id']}"
?>">Изменить</a>
?>">Удалить</a>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach;
?>
</div>
<div id="kristina">
93
<div style="background-image: url(img/kris_bg.png); height: 40vh;
background-size: cover">
<h1>Кристина</h1>
</div>
<?php foreach ($kris as $el) : ?>
<div
class="item"
style="background-image:
url(<?php
echo
"{$el['photo']}" ?>);">
<div class="text">
<p><?php echo "{$el['name']}" ?></p>
<p>Цена <?php echo "{$el['price']}" ?>р.</p>
<br>
<?php if (!empty($_SESSION['user'])) : ?>
<a href="price.php">Заказать</a>
<?php endif; ?>
<br>
<div id="admin_btn">
<!-- для админа-->
<?php
if
(!empty($_SESSION['user'])
&&
$_SESSION['user']['role'] == 'admin') : ?>
<a
href="edit.php?id=<?php
echo
"{$el['id']}"
<a
href="?delete=<?php
echo
"{$el['id']}"
?>">Изменить</a>
?>">Удалить</a>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach;
?>
</div>
94
</main>
<footer>
<a href="index.php">Главная</a>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
<a href="index.php#how">Как заказать?</a>
<a href="delivery.php">Доставка</a>
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
<a class="popup1-open" href="#">Для администрации</a>
<div class="popup1-fade">
<div class="popup1">
<div class="color">
<img src="img/logo.png" alt="logo">
<p>вход для администратора</p>
</div>
<br>
<form action="" method="post">
<label for="">
<p>Логин</p>
<input name="login" type="text" class="reg-input" required>
</label>
<label for="">
95
<p>Пароль</p>
<input
name="password"
type="password"
class="reg-input"
required>
</label> <br><br>
<button class="reg-button">Вход</button>
</form>
</div>
</div>
</footer>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/pop-up.js"></script>
<script src="js/jquery-ui.min.js"></script>
</body>
</html>
Order.php
<?php
require 'db.php';
if (isset($_POST['name'])) {
$name = $_POST['name'];
$adress = $_POST['adress'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$type = $_POST['type'];
$idea = $_POST['idea'];
if ($db->query(
"INSERT INTO orders (name, adress, phone, email, type, idea)
VALUES ('$name', '$adress', '$phone', '$email', '$type', '$idea')"
)) {
96
echo "<script>alert('Спасибо за заказ! Заказ успешно оформлен!');
location.href = 'success.php'</script>";
} else print_r($db->errorInfo());
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="Дизайн-ателье
“Дизайн-ателье
JellyJeans” - это индивидуальный дизайн для вашей одежды. Прекрасный подарок
на любой праздник. Живи ярче! Думай иначе!">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/swipe.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"
rel="stylesheet">
<title>Дизайн-ателье JellyJeans примеры работ</title>
</head>
<body>
<style>
97
input, textarea {
background: #FFFFFF;
box-shadow: inset -1px -1px 5px rgba(0, 0, 0, 0.25);
border-radius: 1vh;
border: none;
width: 20vw;
height: 5vh;
margin-bottom: 3vh;
margin-top: -1vh;
}
textarea {
margin-top: 3vh;;
width: 20vw;
height: 25vh;
}
input.type {
width: 3vh;
box-shadow:none;
margin-left: 40vw;
margin-top: 3vh;
margin-right: 1vw;
cursor: pointer;
}
button:hover {
filter: invert(1);
transition-duration: 1s;
cursor: pointer;
98
}
</style>
<nav style="background: #E0A875; height: 30vh; margin-bottom: 4vh;">
<h1 style="color: white; margin-left: 60vw; font-family: 'Raleway';
font-style: normal;
font-weight: 500; padding-top: 11vh; letter-spacing: 0.05em;">Оформление
заказа</h1>
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><b class="menu__item">Меню</b></li>
<li><a class="menu__item" href="index.php">Главная</a></li>
<li><a class="menu__item" href="index.php#about">О нас</a></li>
<li><a class="menu__item" href="index.php#stocks">Акции</a></li>
<li><a
class="menu__item"
href="index.php#how">Как
заказать?</a></li>
<li><a
class="menu__item"
href="index.php#masters">Наши
мастера</a></li>
<li><a
class="menu__item"
href="index.php#advantages">Почему
мы?</a></li>
<li><a class="menu__item" href="order.php">Заказать</a></li>
<li><a
работ</a></li>
</ul>
class="menu__item"
href="example.php">Примеры
99
<a href="index.php" style="padding-top: -10vh; margin-top: -10vh"><img
src="img/logo.png" alt="logo" style=" margin-left: 5vw;margin-top: -10vh; objectfit:cover; width:20vw;"></a>
</nav>
<main style="text-align: center;">
<form action="" method="post">
<label for="">
<p>Фамилия Имя Отчество (ФИО)</p>
<br> <input type="text" name="name" required>
</label> <br>
<label for="">
<p>Адрес доставки</p><br> <input type="text" name="adress"
required>
</label><br>
<label for="">
<p>Телефон:</p> <br> <input type="tel" name="phone" required>
</label><br>
<label for="">
<p>Почта:</p> <br> <input type="mail" name="email" required>
</label><br>
<label for="" style=" text-align: left;">
<p style="margin-left: 40vw;">Предпочитаемый вид связи</p>
<p ><input name="type" type="radio" value="Телефон" checked
class="type" style="margin-bottom: 0"> Телефон</p>
<p><input name="type" type="radio" value="Почта" class="type">
Почта</p>
<p><input name="type" type="radio" value="WhatsApp" class="type">
WhatsApp</p>
100
<p><input name="type" type="radio" value="Telegram" class="type">
Telegram</p>
<p><input name="type" type="radio" value="СМС" class="type">
СМС</p>
</label>
<p> Идея</p>
<textarea name="idea" id="idea" cols="30" rows="10"></textarea>
</div>
<br>
<p style="color:
rgba(0, 0, 0, 0.3);">*Нажимая вы соглашаетесь с
передачей данных</p>
<button style="
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-size: 3vh;
padding: 2vh 5vw;
border: none;
background-color:#E0A875;
border-radius: 1vw;
margin-top: 5vh;
letter-spacing: 0.05em;
color: #FFFFFF;">Оформить заказ</button>
</form>
</main>
<footer>
<a href="index.php">Главная</a>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
101
<a href="index.php#how">Как заказать?</a>
<a href="delivery.php">Доставка</a>
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
</footer>
</body>
Success.php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Успешно</title>
</head>
<body>
<menu style="background: #E0A875; padding-bottom: 10vh">
<img
id="logo"
src="img/logo.png"
alt="logo"
width="200vw"
style="padding-top: 5vh; margin-left:5vw">
<a href="index.php" style="color: white; text-decoration:none; font-size:5vh;
font-family: 'Raleway'; margin-left:55vw;">На главную</a>
</menu>
102
<main>
<img src="img/Успешно.png" alt="">
</main>
<footer style="margin: 0;">
<a href="index.php">Главная</a>
<a href="index.php#about">О нас</a>
<a href="index.php#stocks">Акции</a>
<a href="index.php#how">Как заказать?</a>
<a href="delivery.php">Доставка</a>
<a href="index.php#masters">Наши мастера</a>
<a href="index.php#advantages">Почему мы?</a>
<a href="order.php">Заказать</a>
<p> © VernerV 2023</p>
<p></p>
<p></p>
</footer>
</body>
</html>
Style.css
*{
max-width: 100vw;
overflow-x: none;
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
}
/* Меню гамбургер */
103
#menu__toggle {
opacity: 0;
position: fixed;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
.menu__btn {
position: absolute;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 99;
}
.menu__btn > span,
.menu__btn > span::before,
104
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
z-index: 99;
}
.menu__btn > span::before {
content: '';
top: -8px;
z-index: 99;
}
.menu__btn > span::after {
content: '';
top: 8px;
z-index: 99;
}
.menu__box {
display: block;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background: url(../img/menu_bg.png);
background-repeat: no-repeat;
105
background-position: right bottom;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
z-index: 9;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-size: 3vh;
font-weight: 400;
text-decoration: none;
transition-duration: .25s;
}
b.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-size:3vh;
font-weight: 900;
}
.menu__item:hover {
background-color: #CFD8DC;
}
b.menu__item:hover {
background-color: white;
}
/* Шапка */
106
nav {
width: 98.9vw;
height: 80vh;
background-size: cover;
}
nav a img {
width: 30vw;
}
.right {
margin-left:55vw;
margin-top: 6vh;
width: 40vw;
height: 60vh;
color: white;
line-height: 10vh;
letter-spacing: 0.05em;
}
.right h1{
font-weight: 400;
margin-bottom: 3vh;
}
h1 {font-size: 4.5vh;}
.right a#btn{
color: white;
text-decoration: none;
font-size: 6vh;
107
background: #A477F6;
border-bottom: 2vh solid #6848A3;
border-radius: 20px;
text-align: center;
padding: 1vh 10vw;
transition-duration: 1s;
}
.right a#btn:hover {
filter: invert(1);
transition-duration: 1s;
}
/* О нас */
#about {
margin: 0 auto;
}
#about h1 {
font-weight: 600;
margin-bottom: 3vh;
margin-top: 4vh;
padding: 0;
text-align: center;
}
#about img {
108
width: 30vw;
}
.block {
display: flex;
flex-direction: row;
width: 60vw;
}
#about p {
width: 30vw;
background: white;
margin: 5vw;
}
p{
font-size: 3vh;
}
.way {
background: url(../img/Vector\ 1.png);
background-repeat: no-repeat;
background-size: 70vw;
display: flex;
flex-direction: column;
gap: 3vw;
width: 70vw;
margin-left: 15vw;
}
/* Акция */
#stocks {
background: #73E1A8;
109
padding: 3vw;
text-align: center;
}
#stocks h3 {
font-weight: 400;
letter-spacing: 0.2em;
margin-bottom: 4vh;
}
#stocks .btn {
background: #A477F6;
border-bottom: 9px solid #6848A3;
border-radius: 1vw;
padding: 1vh 4vw;
-webkit-border-radius: 1vw;
-moz-border-radius: 1vw;
-ms-border-radius: 1vw;
-o-border-radius: 1vw;
transition-duration: 1s;
font-size: 3vh;
}
#stocks .btn:hover {
filter: invert(1);
transition-duration: 1s;
}
#stocks a {
color: white;
text-decoration: none;
110
}
/* слайдер */
#examples {
text-align: center;
margin-top: 4vh;
}
.swiper {
width: 75vw;
height: 80vh;
}
.swiper-slide {
text-align: center;
font-size: 4vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide span {
display: block;
width: 40vw;
height: 50vh;
object-fit: cover;
background-size: cover;
margin-left: 18vw;
111
margin-top: 10vh;
}
.swiper {
margin-left: auto;
margin-right: auto;
}
.text {
display: flex;
flex-direction: row;
padding-left: 18vw;
padding-top: 3vh;
box-shadow: 0px 4px 66px rgba(0, 0, 0, 0.25);
width: 100vw;
}
.text p{
font-size: 4vh;
font-weight: 600;
margin-bottom: 1vh;
}
.left {
text-align: left;
}
.price {
padding-left: 20vw;
112
padding-top: 2vh;
background: white;
}
.swiper-button-next {
background: url(../img/Polygon\ 2.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.swiper-button-prev {
background: url(../img/Polygon\ 3.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
/* Как заказать */
#how h1 {
text-align: center;
margin-top: 10vh;
}
.block_h {
gap: 10vw;
margin-left: 10vw;
margin-top: 5vh;
}
113
.how_block {
text-align: center;
width: 20vw;
}
.how_block img {
width: 6vw;
margin: 3vh;
}
/* Мастера */
#masters h1{
text-align: center;
margin-top: 20vh;
}
.flex {
display: flex;
gap: 10vw;
margin-left: 10vw;
margin-top: 10vh;
}
.bl {
flex-direction: row;
width: 20vw;
}
.bl img {
width: 20vw;
114
}
.bl h3 {
text-align: center;
}
/* Почему мы? */
#why h1 {
text-align: center;
margin-top: 10vh;
}
.flex_w {
display: flex;
flex-direction: column;
gap: 3vw;
margin-bottom: 10vh;
}
.bl_w {
display: flex;
flex-direction: row;
}
.bl_w img {
height: 10vh;
object-fit: contain;
}
115
.bl_w a {
color: #ABABAB;
text-decoration: none;
}
.text_w {
display: flex;
flex-direction: column;
margin-left: 2vw;
}
#photo_why {
height: 40vh;
margin-top: 6vh;
margin-right: 3vw;
border-radius: 3vh;
}
#why a.button_why {
color: white;
text-decoration: none;
font-size: 6vh;
background: #A477F6;
border-bottom: 2vh solid #6848A3;
border-radius: 20px;
text-align: center;
padding: 1vh 10vw;
margin-left: 35vw;
transition-duration: 1s;
116
}
#why a.button_why:hover {
filter: invert(1);
transition-duration: 1s;
}
/* Контакты */
#contacts h1 {
text-align: center;
margin-top: 15vh;
}
#contacts p {
font-size: 4vh;
width: 20vw;
}
.social {
display: flex;
gap: 2vw;
margin-top: 4vh;
margin-bottom: 4vh;
}
.social img {
height: 10vh;
}
.text_contact {
117
margin-top: 10vh;
}
/* Подвал */
footer {
background: #DEA872;
display: grid;
grid-template-columns: repeat(4,1fr);
text-align: center;
color: white;
margin-top: 10vh;
}
footer a {
color: white;
font-size: 3vh;
text-decoration: none;
margin: 3vh;
}
footer a:hover {
font-weight: bold;
}
footer p{
margin-bottom: 1vh;
}
118
/* Попап */
.popup1-fade {
display: none;
}
.popup1-fade:before {
content: '';
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 4px;
z-index: 99999;
opacity: 1;
}
.popup1{
position: fixed;
top: 50%;
left: 60%;
width: 20vw;
height: 45vh;
background-color: #ffffff;
border-radius: 4px;
z-index: 99999;
opacity: 1;
119
border-radius:3vh;
-webkit-border-radius:3vh;
-moz-border-radius:3vh;
-ms-border-radius:3vh;
-o-border-radius:3vh;
color: black;
}
.color {
color: white;
background: #DFA975;
height: 8vh;
display: flex;
padding-top: 2vh;
border-top-left-radius: 3vh;
border-top-right-radius: 3vh;
}
.color p {
font-size: 1.3vh;
margin-top: 2vh;
padding-right: 2vw;
}
.color img {
width: 10vw;
height: 6vh;
object-fit: contain;
}
120
.reg-button {
width: 15vw;
height: 5vh;
border-radius: 1.4vh;
-webkit-border-radius: 1.4vh;
-moz-border-radius: 1.4vh;
-ms-border-radius: 1.4vh;
-o-border-radius: 1.4vh;
border: none;
background: #DFA975;
color: white;
}
.popup1 input {
width: 15vw;
height: 5vh;
border-radius: 1.4vh;
-webkit-border-radius: 1.4vh;
-moz-border-radius: 1.4vh;
-ms-border-radius: 1.4vh;
-o-border-radius: 1.4vh;
box-shadow: inset -1px -1px 11px rgba(0, 0, 0, 0.25);
border: none;
background: white;
}
/* Примеры работ */
121
.left_a {
position: absolute;
top: 23%;
left: 3%;
}
h1.ex{
text-align: center;
margin-top: 10vh;
}
.masters {
display: flex;
gap: 10vh;
margin-left: 35vw;
margin-top: 10vh;
}
.masters a {
color: black;
text-decoration: none;
font-size: 4vh;
}
#alina div h1, #roman div h1,#kristina div h1 {
color: white;
padding-top: 17vh;
margin-left: 5vw;
122
font-weight: 500;
font-size: 6vh;
}
/* Доставка */
.img_map {
width: 90vw;
margin-left: 4.5vw;
margin-top: 7vh;
margin-bottom: 6vh;
}
table.iksweb{
text-decoration: none;
border-collapse:collapse;
width:30vw;
text-align:center;
margin-left: 35vw;
margin-top: 5vh;
}
table.iksweb th{
font-weight:normal;
font-size:3vh;
}
table.iksweb td{
font-size:13px;
color:black;
}
123
table.iksweb td,table.iksweb th{
white-space:pre-wrap;
padding:10px 5px;
line-height:13px;
vertical-align: middle;
border: 1px solid black;
}
.mobile-table{
width: 100%;
max-width: 100%;
overflow-x: auto;}
/* Панель админа */
#order_admin {
width: 70vw;
height: 30vh;
box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.25);
border: 1px solid black;
}
