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

Разработка сайта интернет-магазина цветов FLOWER-SHOP»

ВВЕДЕНИЕ

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

Объектом исследования является: WEB-программирование.

Предметом исследования является: разработка сайта интернет-магазина.

Целью данной работы заключается в проектировании и разработке сайта интернет-магазина «Flower-Shop».

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

Выбор технологии для создания приложения.

Разработка требований к приложению.

Описание хода разработки приложения.

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

На сайте будут реализованы следующие разделы сайта:

Регистрация – форма с полями:

  • E-mail
  • Пароль
  • Имя
  • Телефон

Авторизация – для зарегистрированных пользователей

  • E-mail
  • Пароль

О нас – информация о предоставляемых услугах

Контакты – контактная информация и форма обратной связи

Новости – список в формате:

  • Дата
  • Заголовок новости
  • Содержание статьи
  • Картинка

Отзывы – отзывы клиентов

Содержание

  • Имя

Поиск по сайту – форма поиска

Корзина – таблица с полями

  • Номер товара в корзине
  • Название товара
  • Цена
  • Количество (с возможностью поменять – по умолчанию 1)
  • Возможность поставить галочку напротив выбранного товара и удалить его из корзины
  • Общая стоимость заказа

После нажатия на кнопку «Отправить заказ», вас перенаправляет на страницу где показывается ваш заказ (и ваши персональные данные), в поле «Адрес доставки» в котором пользователь должен указать адрес доставки по которому ему будет доставлен его товар, а в поле «Способ оплаты» выбрать один из предложенных способов оплаты. Под полями будет 2 кнопки «Подтвердить заказ» или «Вернуться к редактированию корзины». После нажатия кнопки «Подтвердить заказ» заказ отправляется в обработку, а пользователю на указанный при регистрации E-mail адрес приходит письмо с перечнем заказанных товаров.

В поле «Способ оплаты» можно выбрать один из предложенных вариантов:

  • Наличными курьеру
  • Банковской картой

Для создания внешнего интерфейса веб-сайта применяется язык гипертекстовой разметки HTML5. Для создания дизайна страниц веб-сайта, используются таблицы каскадных стилей CSS3. Для осуществления интерактивности во взаимодействии веб-сайта с пользователем, применяется язык программирования JavaScript. Для взаимодействия сайта с сервером будет использоваться PHP. Для работ работы с базой данных будет использоваться язык SQL.

Рассмотрим каждую технологию подробнее.

HTML5 (англ. HyperText Markup Language) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например, веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например, <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5.

HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

CSS3 (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

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

JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript (стандарт ECMA-262).

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

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation в США.

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

Язык и его интерпретатор (Zend Engine) разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL.

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

  • Автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;
  • Взаимодействие с большим количеством различных систем управления базами данных через дополнительные модули (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO), Redis;
  • Автоматизированная отправка HTTP-заголовков;
  • Работа с HTTP-авторизацией;
  • Работа с cookies и сессиями;
  • Работа с локальными и удалёнными файлами, сокетами;
  • Обработка файлов, загружаемых на сервер;
  • Работа с XForms.

SQL (англ. structured query language — «язык структурированных запросов») — декларативный язык программирования, применяемый для создания, модификации и управления данными в реляционной базе данных, управляемой соответствующей системой управления базами данных.

Является прежде всего информационно-логическим языком, предназначенным для описания, изменения и извлечения данных, хранимых в реляционных базах данных. SQL считается языком программирования, в общем случае (без ряда современных расширений) не является тьюринг-полным, но вместе с тем стандарт языка спецификацией SQL/PSM предусматривает возможность его процедурных расширений.

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

  • Создание в базе данных новой таблицы;
  • Обавление в таблицу новых записей;
  • Изменение записей;
  • Удаление записей;
  • Выборка записей из одной или нескольких таблиц (в соответствии с заданным условием);
  • Изменение структур таблиц.

Со временем SQL усложнился — обогатился новыми конструкциями, обеспечил возможность описания и управления новыми хранимыми объектами (например, индексы, представления, триггеры и хранимые процедуры) — и стал приобретать черты, свойственные языкам программирования.

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

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

Рисунок 2.1 - Рисунок структуры серверной части приложения

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

Таблица 2.3 – Таблица с описанием программных модулей

№ п/п

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

Функции модуля

1.

Глобальный модуль

Содержит глобальные функции для корректной работы интернет-магазина.

2.

Модуль каталога

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

3.

Модуль новостей

  • Выводит пользователям все новости с кратким описанием, в котором содержатся “Картинка статьи”, “Название статьи” и “Дата создания статьи”.
  • Нажав на статью выводится полное описание статьи в котором содержится “Название статьи”, “Картинка статьи”, “Текст статьи”, и “Дата создания статьи”.
  • Нажав на кнопку «Добавить новость» и заполнив поля “Название статьи”, “ Картинка статьи”, “Текст статьи”, “Дата создания статьи” и нажав на кнопку «Опубликовать» статья будет опубликована на сайте, такая функция доступна только если авторизоваться под администратором сайта.
  • Нажав на «Красный крестик» возле статьи, можно удалить конкретную статью с сайта, такая функция доступна только если авторизоваться под администратором сайта.

4.

Модуль товаров

  • Выводит пользователям все товары опубликованы на сайте.
  • Выводи товара с кратким описанием, в котором содержатся поля “Картинка товара”, “Название товара”, и “Цена товара”, а также 2 конки «Подробнее» и «Заказать».
  • Нажав на кнопку «Подробнее» выводится полное описание товара, в котором есть поля “Картинка товара”, “Название товара”, “Артикул товара”, “Состав товара” и “Цена товара” и кнопка «Заказать»
  • Нажав на кнопку «Заказать» товар добавляется в корзину после чего его можно будет купить, оплатив заказ наличными или картой.
  • Нажав на кнопку «Добавить товар» и заполнив поля “Категория”, “Картинка товара”, “Название товара”, “Артикул товара”, “Состав товара”, “Цена товара” и нажав на кнопку «Добавить» товар будет добавлен на сайте, такая функция доступна только если авторизоваться под администратором сайта.
  • Нажав на кнопку «Редактировать» и изменив содержание полей “Картинка товара”, “Название товара”, “Артикул товара”, “Состав товара”, “Цена товара” и нажав на кнопку «Редактировать» содержание товар будет изменено на сайте, такая функция доступна только если авторизоваться под администратором сайта.
  • Нажав на кнопку «Удалить» возле выбранного товара, можно удалить конкретный товар с сайта, такая функция доступна только если авторизоваться под администратором сайта.

5.

Модуль отзывов

  • Выводит пользователям все отзывы, оставленных другими пользователями на сайте, в котором содержатся “Имя”, и “Текст” отзыва.
  • Заполнив поля формы “Имя”, “Текст”, и нажав на кнопку «Опубликовать» можно опубликовать отзыв на сайте.
  • Нажав на «Красный крестик» возле отзыва можно удалить конкретный отзыв с сайта, такая функция доступна только если авторизоваться под администратором сайта.

6.

Модуль пользователей

  • Нажав на кнопку «Регистрация» и заполнив поля формы “Адрес электронной почты”, “Пароль”, “Имя”, “Мобильный телефон”, после чего нажав на кнопку «Регистрация» пользователь будет зарегистрирован на сайте.
  • Нажав на кнопку «Авторизация» и заполнив поля формы “Адрес электронной почты” и “Пароль” после чего нужно нажать на кнопку «Вход» если такой пользователь существует, он будет авторизован на сайте.

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

Рисунок 3.1 – Рисунок структуры базы данных

Запросы к каталогу

Выборка товаров по id категории

public static function getCategoryProducts($category) {

$db = ConnectDb::getConnection();

$result = $db->query("SELECT * FROM products WHERE category_id = $category");

return $result->fetchAll(PDO::FETCH_ASSOC);

}

Запросы к новостям

Выборка новость по id

public static function getOneNews($id) {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM news WHERE id=' . $id);

return $result->fetch(PDO::FETCH_ASSOC);

}

Вывод всех новостей с сортировкой по id

public static function getNews() {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM news ORDER BY id DESC');

return $result->fetchAll(PDO::FETCH_ASSOC);

}

Добавление новости

public static function addNews($title, $text, $date) {

$db = ConnectDb::getConnection();

$image = $_FILES['image']['name'];

$tmpName = $_FILES['image']['tmp_name'];

move_uploaded_file($tmpName, 'web/images/' . $image);

$sql = "INSERT INTO news(title, image, text, date) VALUES (:title, :image, :text, :date)";

$statement = $db->prepare($sql);

$statement->bindParam(':title', $title);

$statement->bindParam(':image', $image);

$statement->bindParam(':text', $text);

$statement->bindParam(':date', $date);

$statement->execute();

header('Location: /news');

}

Удаление новости по id

public static function deleteNews($id) {

$db = ConnectDb::getConnection();

$statement = $db->query('DELETE FROM news WHERE id=' . $id);

$statement->execute();

header('Location: /news');

}

Запросы к товарам

Вывод всех товаров с сортировкой по id

public static function getProducts() {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM products ORDER BY id DESC');

return $result->fetchAll(PDO::FETCH_ASSOC);

}

Выборка товара по id

public static function getProduct($id) {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM products WHERE id=' . $id);

return $result->fetch(PDO::FETCH_ASSOC);

}

Добавление товара

public static function addProduct($categoryId, $title, $code, $composition, $price) {

$db = ConnectDb::getConnection();

$image = $_FILES['image']['name'];

$tmpName = $_FILES['image']['tmp_name'];

move_uploaded_file($tmpName, 'web/images/' . $image);

$sql = "INSERT INTO products(category_id, image, title, code, composition, price) VALUES (:categoryId, :image, :title, :code, :composition, :price)";

$statement = $db->prepare($sql);

$statement->bindParam(':categoryId', $categoryId);

$statement->bindParam(':image', $image);

$statement->bindParam(':title', $title);

$statement->bindParam(':code', $code);

$statement->bindParam(':composition', $composition);

$statement->bindParam(':price', $price);

$statement->execute();

header('Location: /products');

}

Редактирование товара по id

public static function editProduct($categoryId, $title, $code, $composition, $price) {

$db = ConnectDb::getConnection();

$image = $_FILES['image']['name'];

$tmpName = $_FILES['image']['tmp_name'];

move_uploaded_file($tmpName, 'web/images/' . $image);

$sql = "UPDATE products SET 'category_id' = 'categoryId', 'image' = 'image', 'title' = 'title', 'code' = 'code', 'composition' = 'composition', 'price' = 'price'";

$statement = $db->prepare($sql);

$statement->bindParam(':categoryId', $categoryId);

$statement->bindParam(':image', $image);

$statement->bindParam(':title', $title);

$statement->bindParam(':code', $code);

$statement->bindParam(':composition', $composition);

$statement->bindParam(':price', $price);

$statement->execute();

header('Location: /products');

}

Удаление товара по id

public static function deleteProduct($id) {

$db = ConnectDb::getConnection();

$statement = $db->query('DELETE FROM products WHERE id=' . $id);

$statement->execute();

header('Location: /products');

}

Запросы к отзывам

Вывод всех отзывов с сортировкой по id

public static function getReviews() {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM reviews ORDER BY id DESC');

return $result->fetchAll(PDO::FETCH_ASSOC);

}

Выборка товара по id

public static function getReview($id) {

$db = ConnectDb::getConnection();

$result = $db->query('SELECT * FROM reviews WHERE id=' . $id);

return $result->fetch(PDO::FETCH_ASSOC);

}

Добавление отзыва

public static function addReview($name, $text) {

$db = ConnectDb::getConnection();

$sql = "INSERT INTO reviews(name, text) VALUES (:name, :text)";

$statement = $db->prepare($sql);

$statement->bindParam(':name', $name);

$statement->bindParam(':text', $text);

$statement->execute();

header('Location: /reviews');

}

Удаление отзыва

public static function deleteReview($id) {

$db = ConnectDb::getConnection();

$statement = $db->query('DELETE FROM reviews WHERE id=' . $id);

$statement->execute();

header('Location: /reviews');

}

Запросы к пользователям

Регистрация пользователя

public static function registration($email, $password, $name, $phone) {

$db = ConnectDb::getConnection();

$sql = "INSERT INTO users(email, password, name, phone) VALUES (:email, :password, :name, :phone)";

$statement = $db->prepare($sql);

$statement->bindParam(':email', $email);

$statement->bindParam(':password', md5($password));

$statement->bindParam(':name', $name);

$statement->bindParam(':phone', $phone);

$statement->execute();

header('Location: /');

}

Авторизация пользователя

public static function authorization($email, $password) {

$db = ConnectDb::getConnection();

$sql = "SELECT id, admin FROM users WHERE email=:email AND password=:password";

$statement = $db->prepare($sql);

$statement->bindParam(':email', $email);

$statement->bindParam(':password', md5($password));

$statement->execute();

$user = $statement->fetch(PDO::FETCH_OBJ);

if ($user->id == 0) {

header('Location: /');

} else {

setcookie('email', $email, time() + 3600 * 24 * 30, "/");

$_SESSION['admin'] = $user->admin;

header('Location: /');

}

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

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

После того как пользователь зашел на сайт, он попадает на главную страницу, где ему сразу будут представлены товары на выбор.

Рисунок 4.1.1 – Главная страница сайта

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

Рисунок 4.1.2 – Вывод товаров по категориям

Пользователь может зарегистрировать на сайте, нажав на кнопку «Регистрация» и заполнив поля, после чего нажав на кнопку «Регистрация» он будет зарегистрирован на сайте.

Рисунок 4.1.3 – Форма регистрации пользователя на сайте

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

Рисунок 4.1.4 - Форма авторизации пользователя на сайте

В разделе новости «Новости» можно ознакомится с кратким их описанием.

Рисунок 4.1.5 – Раздел «Новости с кратким описанием»

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

Рисунок 4.1.6 – Раздел «Новости с полным описанием»

В разделе «Отзывы» пользователь может прочитать отзывы других людей, или оставить свой.

Рисунок 4.1.7 – Раздел «Отзывы»

В разделе «Контакты» указана вся информация для связи и место расположение магазина.

Рисунок 4.1.8 – Раздел «Контакты»

В разделе «О нас» можно подробнее узнать о нашем сайте и нашем магазине.

Рисунок 4.1.9 – Раздел «О нас»

Описание интерфейса «Администратор»

Администратору доступна форма добавления новостей, заполнив которую и нажав на кнопку «Опубликовать» новость будет опубликована на сайте.

Рисунок 4.2.1 – Форма добавления новости

Администратор может удалить выбранную статью нажав на крестик возле статьи.

Рисунок 4.2.2 – Удаление конкретной новости

Администратор может удалить выбранный отзыв нажав на крестик возле отзыва.

Рисунок 4.2.3 – Удаление конкретного отзыва

Администратору доступна таблица всех товаров, добавленных на сайте.

Рисунок 4.2.4 – Таблица всех товаров, добавленных на сайт

У администратора есть возможность добавлять новые товары, для этого он должен нажать кнопку «Добавить товар» и заполнит все поля после чего нажать кнопку «Добавить»

Рисунок 4.2.5 – Форма добавления товара на сайт

У администратора есть возможность редактирования товара, для этого нужно нажать на кнопку «Редактировать» и внести изменения после чего нажать на кнопку «Редактировать»

Рисунок 4.2.6 – Форма редактирования товара на сайте

У администратора есть возможность удалить выбранный товар из таблицы нажав на кнопку «Удалить»

Рисунок 4.2.7 – Удаление конкретного товара с сайта

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

После того как вы зашли на сайт, вам будет представлен большой ассортимент цветов которой можно отсортировать, нажав на выбранную категорию. Чтобы узнать о товаре подробнее нужно нажать на кнопку «Подробнее» и вас сайт сразу перенаправить на страницу выбранного товара для полного ознакомления с ним. Что бы заказать понравившиеся товар, нажмите на кнопку «Заказать» и ваш выбранный товар будет помещен в корзину товаров. Что бы почитать новости сайта, нажмите на раздел «Новости», и вам сразу будет представлен целый список новостей с кратким описание, чтобы прочитать полностью новость нажмите на нее, и сайт перенаправит на страницу с развёрнутой новостью. В разделе «Отзывы» можно оставить свой отзыв о сайте или о продукте. В разделе «Контакты» указан адрес расположения магазина цветов и контакты для связи. В разделе «О нас» рассказывается о преимуществах нашего магазина перед другими. Нажав на кнопку «Регистрация» и заполнив нужные поля, вы можете зарегистрироваться на сайте. Нажав на кнопку «Вход» и введя туда данный, которые вы вводили при регистрации на сайте, можно авторизоваться на сайте. Также на сайте присутствует строка быстрого поиска, введя в нее нужное название товара вы можете быстро его найти на сайте.

ЗАКЛЮЧЕНИЕ

В соответствии с заданием на проектирование сайта был создан сайт цветочного Интернет-магазина «Flower-Shop».

Были созданы Главная страница с товарами и страницы: новости, отзывы, контакты, и о нас.

Также были добавлены возможности:

  • Добавление и удаление новостей
  • Добавление и удаление отзывов
  • Добавление, редактирование и удаление товаров

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

В процессе создания сайта были получены навыки написания кода на языках HTML, CSS, JS, PHP, SQL. А как-же навыки верстки макетов, и выборки данных из MySQL при помощи PHP запросов.

Список использованной литературы

  1. Форта, Б. Освой самостоятельно SQL за 10 минут/ Б. Форта. - М.: Вильямс, 2017. – 288 с.
  2. Фримен, Э. Фримен, Э. Изучаем HTML, XHTML и CSS/ Э. Фримен. Э. Фримен. - М.: Питер, 2014. – 720 с.
  3. Фримен, Э. Фримен, Э. Изучаем программирование на JavaScript/ Э. Фримен. Э. Фримен. -М.: Питер, 2015. – 640 с.
  4. Скляр, Д. Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов/ Д. Скляр. - М.: Вильямс, 2016. – 464 с.
  5. Хопкинс, К. PHP. Быстрый старт/ К. Хопкинс. - М.: Эксмо, 2014. – 160 с.
  6. Котеров, Д. Симдянов, И. PHP 7/ Д. Котеров. И. Симдянов. - М.: БХВ-Петербург, 2016. – 1088 с.

Приложение

Код главной страницы сайта

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="/web/css/normalize.css">

<link rel="stylesheet" href="/web/css/main.css">

<title>Flower-Shop</title>

</head>

<body>

<header class="header">

<div class="container">

<div class="header__wrapper_top">

<nav class="nav">

<ul class="nav__list">

<li class="nav__item">

<a href="/" class="nav__link">Главная</a>

</li>

<li class="nav__item">

<a href="/news" class="nav__link">Новости</a>

</li>

<li class="nav__item">

<a href="/reviews" class="nav__link">Отзывы</a>

</li>

<li class="nav__item">

<a href="/contacts" class="nav__link">Контакты</a>

</li>

<li class="nav__item">

<a href="/about-us" class="nav__link">О нас</a>

</li>

</ul>

</nav>

<div class="auth">

<ul class="auth__list">

<li class="auth__item">

<a href="/products" class="auth__link auth__link_exit">Товары</a>

</li>

<li class="auth__item">

<a href="/output" class="auth__link auth__link_exit">Выход</a>

</li>

</ul>

</div>

</div>

<div class="header__wrapper_middle">

<div class="header-logo">

<a class="header-logo__link" href="/">

<img class="header-logo__image" src="/web/images/flower-shop.png" alt="">

</a>

</div>

<form class="search-form" action="#" method="post">

<input class="search-form__content" type="text" placeholder="Поиск товара">

<button class="search-form__button">Искать</button>

</form>

<div class="basket">

<img class="basket__image" src="/web/images/basket.png" alt="">

</div>

</div>

<div class="header__wrapper_bottom">

<div class="catalog-nav">

<ul class="catalog-nav__list">

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/roses">Розы</a>

</li>

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/tulips">Тюльпаны</a>

</li>

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/peonies">Пионы</a>

</li>

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/bouquets">Букеты</a>

</li>

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/101-roses">101 роза</a>

</li>

<li class="catalog-nav__item">

<a class="catalog-nav__link" href="/catalog/flowers-in-a-box">Цветы в коробке</a>

</li>

</ul>

</div>

</div>

</div>

<div class="registration">

<div class="container">

<form class="registration-form" id="registration-form" action="/registration" method="post">

<h2 class="registration-form__title">Регистрация</h2>

<a class="registration-form__link" href="#" onclick="closeForm('registration-form'); return false;">

<img class="registration-form__icon" src="/web/icons/close.png" alt="">

</a>

<input class="registration-form__email" type="email" name="email" placeholder="Введите ваш E-mail">

<input class="registration-form__password" type="password" name="password" placeholder="Введите ваш пароль">

<input class="registration-form__name" type="text" name="name" placeholder="Введите ваше Имя">

<input class="registration-form__phone" type="text" name="phone" placeholder="Введите номер телефона"><br>

<button class="registration-form__button" type="submit" name="submit">Регистрация</button>

</form>

</div>

</div> <div class="authorization">

<div class="container">

<form class="authorization-form" id="authorization-form" action="/authorization" method="post">

<h2 class="authorization-form__title">Личный кабинет</h2>

<a class="authorization-form__link" href="#" onclick="closeForm('authorization-form'); return false;">

<img class="authorization-form__icon" src="/web/icons/close.png" alt="">

</a>

<input class="authorization-form__email" type="email" name="email" placeholder="Введите ваш E-mail">

<input class="authorization-form__password" type="password" name="password" placeholder="Введите ваш пароль">

<button class="authorization-form__button" type="submit" name="submit">Войти</button>

</form>

</div>

</div> </header> <main class="main">

<div class="container">

<div class="products">

<ul class="products__list">

<li class="products__item">

<img class="products__image" src="/web/images/31235.jpg" alt="">

<h3 class="products__title">Букет</h3>

<h2 class="products__price">Цена: 2300 ₽</h2>

<a href="/product/20" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/1214241.jpg" alt="">

<h3 class="products__title">Розы в коробке</h3>

<h2 class="products__price">Цена: 3000 ₽</h2>

<a href="/product/19" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/421213.jpg" alt="">

<h3 class="products__title">Розы в коробке</h3>

<h2 class="products__price">Цена: 2300 ₽</h2>

<a href="/product/18" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/321321.jpg" alt="">

<h3 class="products__title">Розы в коробке</h3>

<h2 class="products__price">Цена: 4100 ₽</h2>

<a href="/product/17" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/3217.jpg" alt="">

<h3 class="products__title">Пионы</h3>

<h2 class="products__price">Цена: 3100 ₽</h2>

<a href="/product/16" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/137.jpg" alt="">

<h3 class="products__title">Пионы</h3>

<h2 class="products__price">Цена: 2300 ₽</h2>

<a href="/product/15" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/s1200.jpg" alt="">

<h3 class="products__title">Пионы</h3>

<h2 class="products__price">Цена: 2700 ₽</h2>

<a href="/product/14" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/131.jpg" alt="">

<h3 class="products__title">Пионы</h3>

<h2 class="products__price">Цена: 2500 ₽</h2>

<a href="/product/13" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/421.jpg" alt="">

<h3 class="products__title">Тюльпаны</h3>

<h2 class="products__price">Цена: 1700 ₽</h2>

<a href="/product/12" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/4121.jpg" alt="">

<h3 class="products__title">Тюльпаны</h3>

<h2 class="products__price">Цена: 6500 ₽</h2>

<a href="/product/11" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/1234.jpg" alt="">

<h3 class="products__title">Тюльпаны</h3>

<h2 class="products__price">Цена: 1000 ₽</h2>

<a href="/product/10" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

<li class="products__item">

<img class="products__image" src="/web/images/15.jpg" alt="">

<h3 class="products__title">Тюльпаны</h3>

<h2 class="products__price">Цена: 1100 ₽</h2>

<a href="/product/9" class="products__details">Подробнее</a>

<a class="products__order">Заказать</a>

</li>

</ul>

</div>

</div>

</main>

<footer class="footer">

<div class="container">

<p class="footer__content">Сайт создан для курсовой работы в 2019 году</p>

</div>

</footer>

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

</body>

</html>