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

Сайт магазина «Цветы СПБ

Содержание:

ВВЕДЕНИЕ

Данная курсовая работа имеет отношение к сфере торговли. Исследуемое предприятие компания «Цветы СПБ», которая осуществляет продажу цветов.

В настоящее время имеется 1 магазин и сайт. Т.к Компания только развивается.

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

Цель данной курсовой работы – разработка и промо-сайта магазина «Цветы СПБ», которая осуществляет торговлю цветами. Данная компания предоставляет следующие виды цветов:

  • Букет сиренево-черничный с калами;
  • Букет с гиацинтами и кустовыми розами;
  • Розовый букет;
  • Оранжевый букет;

Задачи курсовой работы:

  • исследовать понятие «промо-сайт»;
  • предложить алгоритм взаимодействия торговой компании с конечным пользователем.
  • Создать тестовый промо сайт;

Объектом исследования является компания «Цветы СПБ», торгующая цветами.

Предмет исследования – промо-сайт торговой компании.

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

Научная новизна исследования состоит в следующем:

- деятельность торговой компании изучается не в теории, а на практике непосредственно в офисе компании «Цветы СПБ» во время прохождения практики;

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

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

Курсовая работа разбита на разделы.

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

Раздел 2 отражает процесс проектирования серверной части приложения, которое начинается с разработки структуры серверного приложения, включая все модули и их связи. Взаимосвязи модулей представлены в виде схемы. Также представлен рисунок дерева вызова программных модулей и таблица с перечнем и назначением модулей, описаны все передаваемые в модули входные и выходные данные.

Раздел 3 отражает процесс проектирования базы данных и должен содержит рисунок ER – модели с указанием ключевых полей и связей между таблицами, описание структуры записей каждой таблицы. Кроме того, в разделе описываются пользовательские функции и основные запросы к базе данных.

Раздел 4 содержит описание структуры сайта и взаимодействие элементов сайта с серверным приложением. Раздел отражает процесс проектирования программного обеспечения клиентской части задачи содержит:

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

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

1.1 Техническое задание

Требования: При помощи языков программирования HTML, PHP и CSS создать промо-сайт компании «Цветы СПБ», осуществляющей торговлю цветами. Промо-сайт должен размещать данные о компании, каталог продукции, контактные данные компании.

Промо-сайт должен содержать две важные части: пользовательская (доступная пользователям) и административная (доступная администраторам).

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

Промо-сайт должен содержать интерфейс который понятен посетителю.

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

Весь дизайн сайта должен быть управляем при помощи таблицы стилей CSS.

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

При реализации проекта должны выполняться следующие условия:

База данных должна включать не менее 8-и таблиц. Используется phpMyAdmin

В качестве веб-сервера используется Apache 2.4.x.

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

Дополнительные требования:

Сайт должен содержать следующие разделы:

  • О нас;
  • Каталог;
  • Контакты;

1.2 Выбор средств реализации

Язык разметки гипертекстовых страниц HTML

HTML-документы - это файлы с расширением .html или .htm. Просматривать их можно с помощью любого браузера (например, Safari, Mozilla Firefox, Google Chrome). Браузер считывает HTML-файл и отображает его содержимое, чтобы те, кто пользуются интернетом, могли просмотреть его содержимое.

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

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

«Используя HTML, мы помечаем содержимое тегами, чтобы придать ему структуру. Мы называем соответствующие теги и их содержимое элементом». [19]

Большинство HTML-тегов имеют элемент открытия и закрытия, в которых используется следующий синтаксис <tag> </tag>.

Ниже вы можете увидеть пример HTML- кода, с помощью которого можно структурировать элементы HTML-страницы:

<div>

<h1> Основная рубрика </h1>

<h2> Броский подзаголовок </h2>

<p> Пункт 1 </p>

<img src = "/" alt = "Изображение">

<p>Пункт с гиперссылкой <a href="https://example.com"></a></p>

</div>

Основной элемент — это простая пара тегов (<div> </div>), которую используют для разметки больших блоков контента.

Такие блоки могут содержать заголовок (<h1> </h1>), подзаголовок (<h2> </h2>), абзацы (<p> </p>) и изображения (<img>).

Второй абзац в нашем примере содержит гиперссылку (<a> </a>) с атрибутом href, который указывает целевой URL.

Тег изображения имеет два параметра: src для указания пути к изображению и alt для его описания.

Обзор часто используемых HTML-тегов

Блочные и строчные элементы

Большинство элементов либо блочные, либо строчные. В чём разница?

«Блочные элементы начинаются с новой строки, накладываются друг на друга и занимают всю доступную ширину. Блочные элементы могут быть вложены друг в друга и обёртывать строчные элементы. Обычно мы видим, как блочные элементы используются для больших кусков контента, такого как абзацы». [3]

«Строчные элементы не начинаются с новой строки. Они попадают в обычный поток документа, выстраиваются друг за другом, а их ширина основана на их содержимом. Строчные элементы могут быть вложены друг в друга, однако, они не могут обёртывать блочные элементы. Обычно мы видим строчные элементы в качестве маленьких кусков контента, таких как отдельные слова». [3]

Теги блочного уровня

Три обязательных тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.

Тег <html> </html> - это элемент самого высокого уровня, который охватывает любую HTML-страницу.

<html>

<head>

<!-- META INFORMATION -->

</head>

<body>

<!-- PAGE CONTENT -->

</body>

</html>

Тег <head> </head> содержит информацию с мета-тегами, такую ​​как заголовок страницы, ее описание и кодировка.

И, наконец, тег <body> </body> включает в себя всё содержимое, отображаемое на странице.

Основы CSS

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используют для описания внешнего вида HTML-страницы, написанной языком разметки. Обычно CSS-стили используют для создания и изменения стиля отображения элементов веб-страниц, написанных на языках HTML и XHTML, но также они могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: тега веб-страницы - селектора, и команды форматирования – самого блока объявления. Селектор посылает информацию браузеру, какой именно элемент нужно форматировать, а в блоке объявления (это код в фигурных скобках) перечисляются списком форматирующие команды — свойства и их значения через двоеточие (см. Рисунок).

css_osnovy

Рисунок - Структура объявления CSS-стиля

Виды каскадных таблиц стилей и их специфика

Внешняя таблица стилей – это текстовый файл с расширением .css, который содержит в себе набор CSS-стилей элементов. Файл создается в текстовом редакторе кода подобно HTML-странице. Внутри файла содержатся только стили, исключая HTML-разметку. Внешняя таблица стилей присоединяется к веб-странице при помощи тега <link>, который расположен внутри раздела <head></head>.

К одной веб-странице можно присоединить несколько внешних таблиц стилей, добавляя несколько тегов <link>, указав параметром тега media назначение данной таблицы стилей. Параметр rel="stylesheet" указывает тип ссылки (это ссылка на таблицу стилей).

<head>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/assets.css" media="all">

</head>

Атрибут type="text/css" не является обязательным согласно стандарту HTML5, следовательно, его можно не указывать. Если этот атрибут не указан, то по умолчанию используется значение type="text/css".

<head>

<style>

h1,

h2 {

color: red;

font-family: "Times New Roman", Georgia, Serif;

line-height: 1.3em;

}

</style>

</head>

<body>

...

</body>

Внутренние стили можно встраивать в раздел <head></head> HTML-страницы и определить внутри тега <style></style>. Внутренние стили имеют приоритет над внешними таблицами, но уступают встроенным (которые заданы через атрибут style).

Встроенные стили

Когда используются встроенные стили, CSS-код пишется прямо в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Такие стили действуют непосредственно на тот элемент, внутри которого они заданы.

<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>

PHP

Проект выполняется с помощью языка программирования PHP (англ. PHP: Hypertext Preprocessor — «PHP: препроцессор гипертекста»; изначально Personal Home Page Tools — «Инструменты для создания персональных интернет-страниц»; произносится «пи-эйч-пи») - язык программирования общего назначения, в главным образом применяемый для разработки веб-приложений. Сегодня поддерживается подавляющим большинством провайдеров и является одним лидером среди языков программирования, которые применяющихся для разработки динамических веб-сайтов.

«Применение языка, подобного PHP и такой базы данных, как MySQL, позволяет делать сайты динамическими: они могут настраиваться и содержать информацию, изменяющуюся в реальном времени». [11, с. 27]

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

Простой ответ, но что же он может означать? Вот пример PHP кода:

<!DOCTYPE HTML>

<html>

<head>

<title>Пример</title>

</head>

<body>

<?php echo "Привет, я - скрипт PHP!"; ?>

</body>

</html>

PHP отличается от языка JavaScript тем, что его скрипты выполняются на сервере и генерируют код HTML, посылаемый клиенту. Если на сервере размещен вышеприведенный скрипт, клиент получает только результат его выполнения, но не может выяснить, какой именно код его создал.

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

Хотя PHP, главным образом, предназначается для работы в среде интернет-серверов, область его применения не ограничивается только этим.

MYSQL

MySQL - это популярный сервер баз данных, который используется в различных приложениях. Аббревиатура SQL означает «язык структурированных запросов» - (S)tructured (Q)uery (L)anguage, который MySQL использует для взаимодействия с другими программами. Более того, MySQL имеет свои собственные встроенные функции для того, чтобы обеспечить разработчикам дополнительный функционал.

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

Особую помощь проекту оказала CSS–библиотека BOOTSTRAP, которая отвечает за адаптивный дизайн сайта.

Bootstrap (или же Twitter Bootstrap) – библиотека вмещающая в себе набор стилей, классов и скриптов для создания сайтов. В библиотеке можно найти массу шаблонов, использование которых не составит особого труда.

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

«Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом». [2]

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

2.1 Описание пользовательской части

2.1.1 Структура пользовательской части промо-сайта

Промо-сайт торговой компании «Цветы СПБ» содержит следующие разделы:

  • Главная;
  • Каталог товаров;
  • Наши партнеры;
  • О нас;
  • Контакты;

Организационная структура промо-сайта представлена на Диаграмма 1.

Диаграмма – Организационная диаграмма промо-сайта

2.1.2 Основные программные модули

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

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

Имя файла

Описание

index.php

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

include/catalog.php

Функции работы с каталогом категорий и товаров

include/contacts.php

Контактные данные компании

include/order.php

Заказ продукции

include/order_confirm.php

Подтверждение заказа

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

Диаграмма - Иерархическая структура вызова программных модулей пользовательской части промо-сайта

2.2 Описание административной части

2.2.1 Структура административной части промо-сайта

Административная часть промо-сайта торговой компании «Цветы СПБ» содержит следующие разделы:

  • Главная;
  • О Нас;
  • Католог цветов;
  • Наши партнеры;
  • Контакты;

3.1 Описание структуры базы данных

В базе данных проекта насчитывается 11 таблиц. Их названия и описание полей вместе с описанием индексов и связей представлены в Таблица 3.

Таблица – Таблицы базы данных

В проекте используется реляционные (связанные между собой) таблицы базы данных. Например, каждый товар имеет свою одну категорию. В это же время одна категория содержит в себе много товаров. Такой тип связи называется «один-ко-многим».

Далее рассмотрим тип связи «многие-ко-многим». В нашем проекте есть и такой тип связи. Один заказ может содержать много товаров. Один товар может быть соотнесен к многим заказам. Чтобы реализовать подобный тип связи, необходимо создать третью таблицу-связку, которая будет содержать в одной записи код товара и код заказа.

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

Данная ER-диаграмма представлена на Диаграмма 5.

C:\Users\Alex\Desktop\Без названия (1).png

Диаграмма – ER-диаграмма базы данных проекта

Дамп базы данных проекта доступен в приложении Б.

3.2 Пользовательские функции и запросы к базе данных

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

Вся работа админпанели построена на принципе CRUD (от сочетания английских слов «create» , «read», «update», «delete»). Это основные функции работы с таблицами – создание, просмотр, редактирование и удаление записей.

Функция index в каждом модуле административной части отвечает за просмотр всех записей в таблице.

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

Вот пример запроса к таблице категорий:

SELECT id, name, image, (SELECT name FROM category WHERE id = C.parent_id) AS parent_id FROM category AS C WHERE 1 ORDER BY id

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

Функции updateform и update в каждом модуле административной части отвечает за редактирование всех записей в таблице.

Функция updateform c входным параметром id применяет SELECT-запрос, доставая из таблицы запись с идентификатором id. В ней создается форма ввода данных, заполненная из таблицы. Данные можно редактировать и отсылать на сервер для обработки функцией update посредством POST-запроса.

Функция update обрабатывает POST-запрос и сохраняет данные в таблице

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

Вот пример запроса к таблице категорий:

Функция insertform вызывает updateform без параметров, и тем самым создается пустая форма ввода для создания новой категории, которая передает управление функции insert.

UPDATE category SET name = 'Бытовая техника', parent_id = '1', image = 'uploads/cat1.jpg' WHERE id=2

Функция insert обрабатывает POST-запрос и создает новую запись в таблице

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

Вот пример запроса к таблице категорий:

INSERT INTO category (name, parent_id, image) VALUES (‘Новая категория’, 1, ‘myimage.jpg’)

Функция delete удаляет запись из таблицы по идентификатору

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

Вот пример запроса к таблице категорий:

DELETE FROM category WHERE id = 10

В приложении А находится листинг программного модуля Category.php с программным кодом, содержащим вышеупомянутые функции.

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

В данном разделе будет рассмотрена структура клиентской части промо-сайта. К клиентской части относится та часть сайта, которая отображается с помощью HTML-кода в браузере пользователя.

Главная страница сайта имеет следующую структуру (см. Рисунок 1):

Рисунок 1 – Структура главной страницы сайта

Содержимое « О нас» (список категорий выглядит, как показано на Рисунке 2)

Рисунок 2 -раздел «О нас»

Раздел каталог товаров Рисунок 3

Рисунок 3 – Каталог товаров

Нажав на гиперссылку перейти к оформлению заказа, пользователь попадает на страницу заказа товара(см. Рисунок 4).

Рисунок 4 – Заказ товара

Здесь находится изображение товара, его наименование и стоимость. При заказе отобращается актульная цена на букет, если пользователь хочет заказать несколько букетов одного типа, то цена изменится исходя из количества букетов. Раздел Наши парнетры (Рисунок 5)

Рисунок 5-Наши партнеры

В данном разделе отображаются наши партнёры, при нажатии на изображение пользователь попадает на сайт партнера.

Раздел Контакты (Рисунок 6)

Рисунок 6 – Контакты

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

ЗАКЛЮЧЕНИЕ

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

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

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

Основные положения теоретической части проекта:

  • Был проведен анализ исходных данных и разработка технического задания;
  • Было произведён выбор программного обеспечения;

Основные положения практической части проекта:

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

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

Относительно дальнейших перспектив исследования темы можно было бы дать следующие советы. В рамках данной работы охватить все аспекты предоставления информации на информационном промо–сайте невозможно. Но если развивать эту тему, можно было бы более глубоко вникнуть в вопросы более продуктивного взаимодействия самой компании и пользователей, нуждающихся в ее услугах. Отдельной полноценной исследовательской работы заслуживает SEO–оптимизация сайта с целью поднятия его рейтинга в поисковых системах.

Итак, перед разработчиком была поставлена цель: создание сайта торговой компании «Цветы СПБ». Гипотеза о том, что данная тема исследования важна и необходима, была подтверждена аналитически и реализован проект согласно этой гипотезе практически.

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

Интерфейс сайта должен быть дружественным и понятным даже неопытному пользователю.

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

Общая концепция сайта

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

Дизайн

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

Набор веб–разработчика и локальный сервер

Для реализации проекта использован локальный сервер «Openserver».

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

Другими словами, openserver позволяет полностью эмулировать работу сайта на локальном компьютере, что существенно упрощает разработку и реализацию проекта [4].

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

Особую помощь проекту оказала CSS–библиотека BOOTSTRAP, которая отвечает за адаптивный дизайн сайта.

В целом, проект успешно реализован и полностью работоспособен.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Ipipe.ru Установка OpenServer. [Электронный ресурс] // iPipe.ru. - https://www.ipipe.ru/info/ustanovka-openserver.html

2. HTML5BOOK.RU Адаптивная верстка сайта [Электронный ресурс] // HTML5BOOK.RU. - https://html5book.ru/adaptivnaya-vyorstka-sayta.

3. WebReference Уроки по HTML и CSS [Электронный ресурс] // WebReference. - https://webref.ru/layout/learn-html-css.

4. Open Server — профессиональный инструмент веб-разработчика под Windows [Электронный ресурс] // Википедия. - https://habr.com/ru/post/137388

5. PHP, SQL [Электронный ресурс] / блог. - Россия, 2010.: http://phpsql.ru/.

6. PHPForum [Электронный ресурс] /форум.- Россия, 2003. - Режим доступа: http://phpforum.ru. - Дата доступа: 09.02.2012.

7. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016

8. Википедия Bootstrap_(Фреймворк) [Электронный ресурс] https://ru.wikipedia.org/wiki/Bootstrap_(Фреймворк)

9. Гущин А.Н. Базы данных: учебник. - М.: Директ-Медиа, 2014. - 266с

10. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.

11. Макфарланд Д. Большая книга CSS. 3-е изд. [Текст]. - СПб : Питер, 2014. - 608 стр.

12. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.

13. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.

14. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.

15. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.

16. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016

17. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.

18. Филиппов, С.А. Основы современного веб-программирования [Электронный ресурс].— М. : НИЯУ МИФИ, 2011 .— 160 с.

19. Фримен Эрик и Робсон Элизабет Изучаем HTML, XHTML [Текст]. - СПб : Питер, 2014. – 720 стр.

20. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.

ПРИЛОЖЕНИЯ

Приложение А

Order.php.

<!doctype html>

<html lang="ru">

<head>

<title>Заказ цветов</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="about.html">О нас</a></li>

<li><a class="active" href="products.php">Каталог цветов</a></li>

<li><a href="partners.html">Наши партнеры</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

<div class="row">

<div class="card">

<form method="post" action="order_confirm.php?idproduct=<?php echo $_GET["idproduct"]?>"> // Создаю форму заказа товара

<?php

/*** Создаю три переменные в которых указываю данне для соединения с базой данных ***/

/*** mysql название хост узда ***/

$hostname = 'localhost';

/*** mysql имя пользователя ***/

$username = 'root';

/*** mysql пароль ***/

$password = '';

// Открываю контейнер обработчика ошибок

try {

$con = mysqli_connect($hostname,$username,$password,"db_flowers"); // Пытаюсь подключиться к базе данных

mysqli_query($con, 'SET CHARSET UTF8'); // Определяю кодировку

}

catch(PDOException $e) {

echo $e->getMessage(); // В случае ошибки вывожу сообщение

}

// Проверяю соединение

if (mysqli_connect_errno()){

echo "Ошибка при соединении с MySQL: " . mysqli_connect_error();

}

// Создаю функцию для вывода товара на экран передавая в параметр объект с установленным подключением к БД

function print_product ($con) {

// Отправляю запрос к БП на получение информации о товаре

$result = mysqli_query($con, "SELECT title, description, price, image, idproduct FROM products WHERE idproduct='".$_GET["idproduct"]."'");

// Привожу полученый результат в массив

$row = mysqli_fetch_row($result);

// Вывожу на экран

echo '

<div class="column"> <!— Создаю контейнер для товара —>

<img src="data:image/jpeg;base64,' . base64_encode($row[3]) . '" style="max-width:250px; width: 100%"/> <!— Вывожу картинку —>

<p class="price">' . $row[2] . ' руб.</p> <!— Создаю абзац с ценой —>

</div>

<div class="column" style="width: 66.66%">

<h1>' . $row[0] . '</h1> <!— ЗАголовок с название товара —>

<br> <!— Перенос на новую строку —>

<br>

<p style="margin: auto">' . $row[1] . '</p> <!— Создаю абзац с описание товара—>

<br>

<br>

Количество:

<br>

<br>

<!— Создаю числовую форму в которой пользователь указывает количество товара. Функция "calcFinalSum" принимает в параметр цену товара, получает его количество и умножает—>

<input style="width: 80px" type="number" min="1" step="1" id="amount" name="amount" value="1" oninput="calcFinalSum(' . $row[2] . ')">

<p id="final_sum">Сумма заказа:' . $row[2] . ' руб.</p> <!— Создаю абзац с конечной суммой—>

</div>

';

}

print_product($con); // Вызываю вышеописаную функцию и Отправляю формы POST Запросом

?>

<input class="my_button" type="submit" value="Заказать">

</form>

</div>

</div>

</body>

</html>

Order_confirm

<!doctype html>

<html lang="ru">

<head>

<title>Заказ цветов</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="about.html">О нас</a></li>

<li><a class="active" href="products.php">Каталог цветов</a></li>

<li><a href="partners.html">Наши партнеры</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

<div class="card">

<?php

/*** mysql название хост узда ***/

$hostname = 'localhost';

/*** mysql имя пользователя ***/

$username = 'root';

/*** mysql пароль ***/

$password = '';

// Открываю контейнер обработчика ошибок

try {

$con = mysqli_connect($hostname,$username,$password,"db_flowers"); // Пытаюсь подключиться к базе данных

mysqli_query($con, 'SET CHARSET UTF8'); // Определяю кодировку

}

catch(PDOException $e) {

echo $e->getMessage(); // В случае ошибки вывожу сообщение

}

// Проверяю соединение

if (mysqli_connect_errno()){

echo "Ошибка при соединении с MySQL: " . mysqli_connect_error();

}

//получаем цену товара по его id

$result = mysqli_query($con, "SELECT price FROM products WHERE idproduct='".$_GET["idproduct"]."'");

// Привожу полученый результат в массив

$row = mysqli_fetch_row($result);

//получаем id товара из GET запроса

$idproduct = $_GET["idproduct"];

//получаем количество заказанных товаров из POST запроса

$amount = $_POST['amount'];

//рассчитываем суммму заказа

$finalprice = $row[0] * $amount;

//Добавляем запись заказа в БД

$sql = "INSERT INTO orders (idproduct, amount, summ)

VALUES ($idproduct, $amount, $finalprice)";

// Отправляем запрос и проверяем на ошибки

if (mysqli_query($con, $sql)) {

echo ' <h1 style="text-align: center; padding-top: 100px"> Заказ оформлен! </h1>';

} else {

echo "Ошибка: " . $sql . "<br>" . mysqli_error($con);

}

?>

</div>

</body>

</html>

Приложение Б

Дамп базы данных проекта db_flowers.sql

CREATE TABLE `products` (

`idproduct` int(11) NOT NULL,

`title` varchar(200) DEFAULT NULL,

`description` varchar(1000) DEFAULT NULL,

`price` int(11) DEFAULT NULL,

`image` blob

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--

-- Dumping data for table `products`

--

INSERT INTO `products` (`idproduct`, `title`, `description`, `price`, `image`) VALUES

(1, 'Букет сиренево-черничный с калами', 'роза сиреневая 7, вероника 5, эустома розовая 5, каллы фиолетовые 7, эвкалипт, хризантема сиреневая 3, зелень, упаковка', 3800,

INSERT INTO `products` (`idproduct`, `title`, `description`, `price`, `image`) VALUES

(2, 'Букет с гиацинтами и кустовыми розами', 'гиацинты 11, роза кустовая 5, эустома 3, статица 2, зелень, упаковка', 2890,

INSERT INTO `products` (`idproduct`, `title`, `description`, `price`, `image`) VALUES

(3, 'Розовый букет', 'хризантема 3, альстремерия белая 2, розовая 2, роза розовая 5, орхидея розовая 3, минигебера 3, фисташка , упаковка', 2100,

Инструкция по запуску сайта на локальном копьютере

Скачиваем XAMPP для вашей системы по первой ссылке в выдаче Google

Устанавливаем. Достаточно будет следующих компонентов

Устанавливать нужно на диск С, НО не в папку Program Files или Program Fies(x86)

Например:

После установки запускаете XAMPP:

Набираете в браузере:

http://localhost/phpmyadmin

Открывается:

Нажимаете «создать БД»:

Создаете db_flowers

Открываете db_flowers:

Нажимаете «Импорт» и выбираете файл с базой. Затем нажимаете «Вперед» или «Go»

Открываете

C:\Programs\xampp\htdocs

Помещаете туда папку с сайтом «flowers»

Вводите в строке браузера

http://localhost/flowers

Откроется сайт