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

Разработка сайта Кофейни

Содержание:

Введение

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

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

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

В ходе выполнения курсового проектирования было запланировано:

  • Изучить HTML и CSS, основы дизайна веб-страниц.
  • Разработать клиентскую базу данных
  • Разработать макеты страниц сайта на основе HTML и CSS.
  • Разработать промо-код
  • Разработать сайт

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

При создании корпоративного веб-сайта «Кофейня» использовались следующие инструменты:

  1. HTML/CSS.
  2. Веб-сервер Apache.

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

Информация о компании:

Организация «Кофейня». Предоставление клиентам кофейных напитков. Основана 2016 году. Лауреат премии «Партнёр года». Конкуренты «9-Бар», «Правда кофе»

Нефункциональные требования

Предварительная структура сайта: Главная (о нас, ассортимент, отзывы, бронирование столиков, акции и скидки, контакты)

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

Требования к дизайну и оформлению: Сайт в строгом деловом стиле. Корпоративные цвета коричневый и белый. Оттенки светло коричневого как основной фон. Фотографии – насыщенные цвета, иллюстрирующие процесс приготовления блюда.

Наличие мобильной версии сайта: Да.

Функциональные требования

Примерный набор модулей: Фильтры каталога по цене, по алфавиту. Автоматическое формирование счёта. Онлайн консультация. Возможность заказать обратный звонок.

Администрирование: Возможность создания/удаления/редактирования карточки товара, акций, новостей.

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

Для реализации проекта работы были разделены на несколько частей:

      1. Подготовка
      2. Проектирование
      3. Разработка дизайна и верстка
      4. Программная настройка
      5. Наполнение контентом и тестирование

На этапе подготовки проводился сбор информации о компании и достигалось понимание необходимости разработки.

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

После формирования набросков сайт была выбрана цветовая гамма и изображения для сайта, после чего сайт был сверстан в общем виде, без учета динамических возможностей. Сайт был представлен в виде сверстанных страниц с помощью язык разметки (HTML) и набора каскадных стилей (CSS), классы и идентификаторы элементов были названы по методологии БЭМ от компании Яндекс.

На этапе программной настройки был использован физический сервер с операционной системой Debian 8. Для работы с WEB протоколами, с учетом требований к поставленной задачи, был выбран пакет набора программ LAMP, который включает в себя все необходимые компоненты для реализации проекта, а именно:

  1. Apache – WEB сервер ( Denwer )
  2. MariaDB (MySQL)
  3. HTML

До внедрения сайта в эксплуатацию используется только протокол HTTP.

    1. Файловая иерархия сайта выглядит следующим образом:

Рисунок 1

    1. Связь между файлами организована следующим образом, как показано на рисунке 2.

Рисунок 2

Описание модулей

9 боковых модулей «Американо, Айриш, Глясе, Диппо и др.»

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

Модуль «Фотоальбом»

Удобный модуль для управления большим количеством фотографий на сайте.
Позволяет создавать и редактировать структуру фотогалереи.

Модуль «Новости»

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

Модуль «Забронировать столик»

Самый простой модуль из модулей продаж, рекомендуется всем сайтам на чьих страницах есть описание товаров/услуг. Позволяет добавлять на любую страницу вашего сайта форму предварительного заказа. Форма содержит необходимые поля (Ф.И.О. персоны, телефон, E-mail, текст заказа и т.д.), часть из которых могут быть обязательными. Уведомление о заполнении данной формы поступает на указанный вами E-mail.

Модуль «Поиск по сайту»

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

Модуль «Регистрация/авторизация»

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

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

Для хранения информации на сервере была создана база данных id13764349_clients. В базе данных были созданы 3 таблицы:

  1. Учетные записи администраторов (админ);
  2. Телефонный справочник (телефон);
  3. Клиентская база (пользователь).

Рисунок 3

Рассмотрим подробнее наши таблицы.

      1. Таблица admin предназначена для хранения имен и паролей администраторов. Она содержит 4 поля:
    1. “id” – идентификационный номер сотрудника. Представляет собой переменную числового типа и ограниченным количеством цифр до 8.
    2. “ФИО” – инициалы пользователя. Ограничение в символике до 20.
    3. “Login” – короткое имя пользователя ( пример: roy ) с ограничение символов до 5.
    4. “Password” – пароль пользователя. В целях безопасности, количество символов до 20.

Рисунок 4

      1. Таблица telephone предназначена для хранения контактных данных всех клиентов + сотрудников. Содержит 3 поля.
    1. “ФИО” – инициалы пользователя. Ограничение в символике до 20.
    2. . “Phone” – контактный номер телефона (мобильный, домашний). Ограничение в символике до 15.
    3. “Адрес” – адрес места фактического проживания. Ограничение 35 символов.

Рисунок 5

  1. Таблица user предназначена для ведения списка клиентов, откуда идёт привязка к картам лояльности. Содержит 4 поля.

3.1 “ФИО” – инициалы клиентов. Ограничение до 20 символов.

3.2 “id” – идентификатор пользователя. Ограничение до 10 символов.

3.3 “loyal” – номер карты лояльности. Ограничение до 15 символов.

3.4 “Почта” – почтовый адрес клиентов. Ограничение до 15 символов.

Рисунок 6

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

На главной странице содержится общая информация о компании. В верхнем меню представлены ссылки на главные разделы сайта. Боковое меню содержит ссылки для ознакомления с кофейными напитками. Также на шапке сайта представлена форма для авторизации пользователей. В подвале сайта предоставлена короткая контактная информация и карта расположения кофеен.

Рисунок 7

Рисунок 8

Боковое меню сайта представляет собой описание кофейных напитков. Каждый клиент перед совершением заказа или покупки кофейного напитка может узнать некую информацию о нём. Приведу пример с несколькими напитками.

Рисунок 9

Рисунок 10

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

Рисунок 11

Следующий раздел «Ассортимент» предоставляет информацию о меню компании. Здесь можно выбрать разные направления напитков.

Рисунок 12

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

  1. Выбрать город
  2. Выбрать адрес заведения
  3. Выбрать количество персон
  4. Дату брони
  5. Время брони
  6. Средний чек
  7. Указать, будет ли у Вас карта лояльности

Рисунок 13

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

Рисунок 14

Следующий раздел «Контакты» представляет собой информацию о компании, где вы можете найти телефоны разных отделов, например, Корпоративные подарки, Коммерческий департамент, Развитие в регионах, Маркетинг и другие.

Рисунок 15

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

Рисунок 16

Заключение

В этой курсовой работе был рассмотрен процесс разработки сайта для компании «Кофейня» и приведены конечные результаты с тестовыми данными.

С помощью этой разработки компания «Кофейня» может рекламировать свою компанию в пространстве Интернет и принимать заказы от гостей в On-line режиме. Гости в свою очередь могут отслеживать ранее созданные ими заказы и связываться с компанией по контактам, которые указаны на сайте. Компания «Кофейня» также может связываться с заказчиком благодаря информации, указанной пользователями при регистрации заказов.

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

Список литературы

  1. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
  2. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
  3. Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.
  4. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
  5. http://biblioclub.ru/index.php?page=book&id=428953
  6. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.
  7. PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.
  8. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
  9. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.
  10. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.

Приложение

Отзыв

<!DOCTYPE>

<html>

<head>

<!--иконка вкладки-->

<link rel="shortcut icon" href="C:\Users\OBondarev\Desktop\Redisign\images\favicon.ico" type="image/x-icon">

<title>Кофе Глясе</title>

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

</head>

<body>

<!-- Основной блок сайта -->

<div id="basic">

<!-- Шапка сайта -->

<div id="head-site">

<a href="index.html"><img src="images/logo.png" alt="Кофейня" title="Кофейня" /></a>

<img src="C:\Users\obondarev\Desktop\Redisign\images\telefon.png" alt="+7 (915) 235-21-99" title="+7 (915) 235-21-99" class="telefon" />

</div>

<form action="/" method="post">

Логин: <input type="text" name="login" />

Пароль: <input type="password" name="password" />

<input type="submit" value="Войти" name="log_in" />

</form>

<!-- Верхнее меню сайта -->

<div id="menu-top">

<div class="bg-1">

<ul>

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

<li><a href="assortiment.html">Ассортимент</a></li>

<li><a href="otziv.html">Отзывы</a></li>

<li><a href="bron.html">Забронировать столик</a></li>

<li><a href="akcii.html">Акции и скидки</a></li>

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

</ul>

</div>

<div class="bg-2"></div>

</div>

<!-- Левое меню и Контент -->

<div id="content">

<!-- Контент - правый блок -->

<div class="right">

<h1> Отзывы </h1>

<form action="" method="post"><!--Создаем форму-->

<input type="text" placeholder="Имя" name="fname" /><!--Создаем строку для ввода имени-->

<input type="email" placeholder="E-mail" name="email" /><!--Создаем строку для ввода e-mail (пригодится для ответа)-->

<textarea placeholder="Сообщение" name="message" rows="10" cols="45"></textarea><!--Поле для ввода сообщения-->

<input type="submit" value="Отправить" /><!--Кнопка отправить-->

</form>

Index

<!DOCTYPE>

<html>

<head>

<!--иконка вкладки-->

<link rel="shortcut icon" href="C:\Users\OBondarev\Desktop\Redisign\images\favicon.ico" type="image/x-icon">

<title>Кофейня</title>

<meta charset="UTF-8">

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

</head>

<body>

<!-- Основной блок сайта -->

<div id="basic">

<!-- Шапка сайта -->

<div id="head-site">

<a href="index.html"><img src="images/logo.png" alt="Кофейня" title="Кофейня" /></a>

<img src="C:\Users\obondarev\Desktop\Redisign\images\telefon.png" alt="+7 (915) 235-21-99" title="+7 (915) 235-21-99" class="telefon" />

</div>

<form action="/" method="post">

Логин: <input type="text" name="login" />

Пароль: <input type="password" name="password" />

<input type="submit" value="Войти" name="log_in" />

</form>

<div class="search-box">

<form action="#">

<input type="text" placeholder="Поиск.." name="search">

Акции

<!DOCTYPE>

<html>

<head>

<!--иконка вкладки-->

<link rel="shortcut icon" href="C:\Users\OBondarev\Desktop\Redisign\images\favicon.ico" type="image/x-icon">

<title>Кофе Глясе</title>

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

</head>

<body>

<!-- Основной блок сайта -->

<div id="basic">

<!-- Шапка сайта -->

<div id="head-site">

<a href="index.html"><img src="images/logo.png" alt="Кофейня" title="Кофейня" /></a>

<img src="C:\Users\obondarev\Desktop\Redisign\images\telefon.png" alt="+7 (915) 235-21-99" title="+7 (915) 235-21-99" class="telefon" />

</div>

<form action="/" method="post">

Логин: <input type="text" name="login" />

Пароль: <input type="password" name="password" />

<input type="submit" value="Войти" name="log_in" />

</form>

<!-- Верхнее меню сайта -->

<div id="menu-top">

<div class="bg-1">

<ul>

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

<li><a href="assortiment.html">Ассортимент</a></li>

<li><a href="otziv.html">Отзывы</a></li>

<li><a href="bron.html">Забронировать столик</a></li>

<li><a href="akcii.html">Акции и скидки</a></li>

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

</ul>

</div>

<div class="bg-2"></div>

</div>

<!-- Левое меню и Контент -->

<div id="content">

<!-- Контент - правый блок -->

<div class="right">

<h1> Акции и скидки </h1>

<h2> Скидки на доставку </h2>

<p> С 7 по 31 мая при оформлении заказа на сумму от 2500Р <h3> дарим скидку 249Р </h3> </p>

<p> Роллы, любимый «Цезарь», блинчики и знаменитые сырники от «Шоколадницы» ждут вас с доставкой по Москве и области до 30 км за МКАД. </p>

<p> <img src="C:\Users\obondarev\Desktop\Redisign\images\roli.png" </p>

</div>

Style

body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}

#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}

img {border:0;}

a {color:#ff9c00;}

a:hover {text-decoration:none;}

li.none-bg {background:none!important;}

.telefon {float:right;}

#top-menu {width:960px; height:74px; }

.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}

.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}

.bg-1 ul {margin:0; padding:0; list-style:none;}

.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}

.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}

.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}