Разработка сайта Кофейни (Нефункциональные требования)
Содержание:
Введение
Частная коммерческая организация «Кофейня» занимается продажей кофейных напитков на всей территории России. У компании имеются собственные торговые точки и транспортные средства для осуществления продажи кофе тем, кто в дороге. Заказы можно оставлять по месту в заведении и через сайт компании с доставкой.
Услуги по умолчанию включают всю подготовительную часть – обслуживание непосредственно в самом помещении, за столиками или за барной стойкой. Подобная услуга является основной, а дополнительной, но всё более и более востребованной – продажа «кофе с собой» или «на вынос».
Для более широкого охвата и удобства клиентов, компания «Кофейня» решает создать – веб-сайт. Разработка которого является целью этой курсовой работы в рамках углубленного изучения современных методов программирования приложений для среды WEB.
В ходе выполнения курсового проектирования было запланировано:
- Изучить HTML и CSS, основы дизайна веб-страниц.
- Разработать клиентскую базу данных
- Разработать макеты страниц сайта на основе HTML и CSS.
- Разработать промо-код
- Разработать сайт
В настоящее время Интернет, Web-технологии – это эффективное средство коммуникации, получения информации. В то же время не так много организаций использует это для создания внутренних корпоративных ресурсов, в частности Web-сайтов. Поэтому представляется актуальным и практически важным рассмотреть проблему проектирования такого Web-сайта в современных условиях с использованием всего спектра достижений, накопленных в данной области.
При создании корпоративного веб-сайта «Кофейня» использовались следующие инструменты:
- HTML/CSS.
- Веб-сервер Apache.
1. Техническое задание и выбор средств реализации
Информация о компании:
Организация «Кофейня». Предоставление клиентам кофейных напитков. Основана 2016 году. Лауреат премии «Партнёр года». Конкуренты «9-Бар», «Правда кофе»
1.1 Нефункциональные требования
Предварительная структура сайта: Главная (о нас, ассортимент, отзывы, бронирование столиков, акции и скидки, контакты)
Примерная структура страниц: Строка поиска по сайту, телефон горячей линии, диалоговое окно с менеджером, текущие акции. В боковом меню: описание кофе.
Требования к дизайну и оформлению: Сайт в строгом деловом стиле. Корпоративные цвета коричневый и белый. Оттенки светло коричневого как основной фон. Фотографии – насыщенные цвета, иллюстрирующие процесс приготовления блюда.
Наличие мобильной версии сайта: Да.
1.2 Функциональные требования
Примерный набор модулей: Фильтры каталога по цене, по алфавиту. Автоматическое формирование счёта. Онлайн консультация. Возможность заказать обратный звонок.
Администрирование: Возможность создания/удаления/редактирования карточки товара, акций, новостей.
Описание модулей серверной части программы и их взаимодействие
Для реализации проекта работы были разделены на несколько частей:
-
-
- Подготовка
- Проектирование
- Разработка дизайна и верстка
- Программная настройка
- Наполнение контентом и тестирование
-
На этапе подготовки проводился сбор информации о компании и достигалось понимание необходимости разработки.
Проектная часть работы включала в себя формирование списка необходимых модулей разработки и было представлено в виде графических набросков с внешним видом сайта.
После формирования набросков сайт была выбрана цветовая гамма и изображения для сайта, после чего сайт был сверстан в общем виде, без учета динамических возможностей. Сайт был представлен в виде сверстанных страниц с помощью язык разметки (HTML) и набора каскадных стилей (CSS), классы и идентификаторы элементов были названы по методологии БЭМ от компании Яндекс.
На этапе программной настройки был использован физический сервер с операционной системой Debian 8. Для работы с WEB протоколами, с учетом требований к поставленной задачи, был выбран пакет набора программ LAMP, который включает в себя все необходимые компоненты для реализации проекта, а именно:
- Apache – WEB сервер ( Denwer )
- MariaDB (MySQL)
- HTML
До внедрения сайта в эксплуатацию используется только протокол HTTP.
-
- Файловая иерархия сайта выглядит следующим образом:
Рисунок 1
-
- Связь между файлами организована следующим образом, как показано на рисунке 2.
Рисунок 2
2. Описание модулей
9 боковых модулей «Американо, Айриш, Глясе, Диппо и др.»
Полноценный инструмент для организации на сайте максимальной функциональности продаж. Позволяет реализовать на сайте полнофункциональный качественный интернет-магазин, в котором будет размещена полная информация о напитках.
Модуль «Фотоальбом»
Удобный модуль для управления большим количеством фотографий на сайте.
Позволяет создавать и редактировать структуру фотогалереи.
Модуль «Новости»
Модуль предназначен для публикации новостей на сайте. Позволяет разделить новости на тематические группы (направления деятельности, виды продукции) и подгруппы. Также модуль выводит анонсы новостей в предусмотренных дизайном местах на страницах сайта.
Модуль «Забронировать столик»
Самый простой модуль из модулей продаж, рекомендуется всем сайтам на чьих страницах есть описание товаров/услуг. Позволяет добавлять на любую страницу вашего сайта форму предварительного заказа. Форма содержит необходимые поля (Ф.И.О. персоны, телефон, E-mail, текст заказа и т.д.), часть из которых могут быть обязательными. Уведомление о заполнении данной формы поступает на указанный вами E-mail.
Модуль «Поиск по сайту»
Предназначен для быстрого поиска текстовых материалов на страницах сайта. Поиск осуществляется по ключевому слову. Результаты поиска выдаются на специальной странице сайта в удобном и понятном для пользователя виде. При клике на ссылку пользователь попадает на соответствующую страницу.
Модуль «Регистрация/авторизация»
Модуль предназначен для регистрации новых пользователей и последующей авторизации для входа на закрытую часть сайта. По уникальному логину и паролю происходит идентификация пользователя.
Описание структуры базы данных и ее функций
Для хранения информации на сервере была создана база данных id13764349_clients. В базе данных были созданы 3 таблицы:
- Учетные записи администраторов (админ);
- Телефонный справочник (телефон);
- Клиентская база (пользователь).
Рисунок 3
Рассмотрим подробнее наши таблицы.
-
-
- Таблица admin предназначена для хранения имен и паролей администраторов. Она содержит 4 поля:
- “id” – идентификационный номер сотрудника. Представляет собой переменную числового типа и ограниченным количеством цифр до 8.
- “ФИО” – инициалы пользователя. Ограничение в символике до 20.
- “Login” – короткое имя пользователя ( пример: roy ) с ограничение символов до 5.
- “Password” – пароль пользователя. В целях безопасности, количество символов до 20.
-
Рисунок 4
-
-
- Таблица telephone предназначена для хранения контактных данных всех клиентов + сотрудников. Содержит 3 поля.
- “ФИО” – инициалы пользователя. Ограничение в символике до 20.
- . “Phone” – контактный номер телефона (мобильный, домашний). Ограничение в символике до 15.
- “Адрес” – адрес места фактического проживания. Ограничение 35 символов.
-
Рисунок 5
- Таблица user предназначена для ведения списка клиентов, откуда идёт привязка к картам лояльности. Содержит 4 поля.
3.1 “ФИО” – инициалы клиентов. Ограничение до 20 символов.
3.2 “id” – идентификатор пользователя. Ограничение до 10 символов.
3.3 “loyal” – номер карты лояльности. Ограничение до 15 символов.
3.4 “Почта” – почтовый адрес клиентов. Ограничение до 15 символов.
Рисунок 6
Описание структуры клиентской части
На главной странице содержится общая информация о компании. В верхнем меню представлены ссылки на главные разделы сайта. Боковое меню содержит ссылки для ознакомления с кофейными напитками. Также на шапке сайта представлена форма для авторизации пользователей. В подвале сайта предоставлена короткая контактная информация и карта расположения кофеен.
Рисунок 7
Рисунок 8
Боковое меню сайта представляет собой описание кофейных напитков. Каждый клиент перед совершением заказа или покупки кофейного напитка может узнать некую информацию о нём. Приведу пример с несколькими напитками.
Рисунок 9
Рисунок 10
Следующий раздел сайта «О нас» предоставляет информацию о кофейни. На этой странице вы можете узнать информацию о кофейне, с какого года работает на рынке. В этом же разделе мы можем увидеть Кофейные новости и в добавок подать заявку на оформление карты лояльности для друга.
Рисунок 11
Следующий раздел «Ассортимент» предоставляет информацию о меню компании. Здесь можно выбрать разные направления напитков.
Рисунок 12
Следующий раздел «Забронировать столик» представляет собой анкету для заполнения данных. В этом разделе необходимо выбрать информация, где вы хотите посидеть и отметить какую-нибудь встречу.
- Выбрать город
- Выбрать адрес заведения
- Выбрать количество персон
- Дату брони
- Время брони
- Средний чек
- Указать, будет ли у Вас карта лояльности
Рисунок 13
Следующий раздел «Акции и скидки» представляет собой небольшие акции, которыми можем воспользоваться любой посетитель. Условия акции указаны на сайте. Чтобы воспользоваться услугой, необходимо скопировать промо-код и применить его при оформлении заказа.
Рисунок 14
Следующий раздел «Контакты» представляет собой информацию о компании, где вы можете найти телефоны разных отделов, например, Корпоративные подарки, Коммерческий департамент, Развитие в регионах, Маркетинг и другие.
Рисунок 15
Последний раздел «Отзывы» создан для того, чтобы другие клиенты могли оставить свои впечатления о заведении, персонале и о приготовленных напитках, еде. Оставить отзыв могут только зарегистрированные пользователи. В данном разделе стоит ограничение на количество символов до 250.
Рисунок 16
Заключение
В этой курсовой работе был рассмотрен процесс разработки сайта для компании «Кофейня» и приведены конечные результаты с тестовыми данными.
С помощью этой разработки компания «Кофейня» может рекламировать свою компанию в пространстве Интернет и принимать заказы от гостей в On-line режиме. Гости в свою очередь могут отслеживать ранее созданные ими заказы и связываться с компанией по контактам, которые указаны на сайте. Компания «Кофейня» также может связываться с заказчиком благодаря информации, указанной пользователями при регистрации заказов.
Работа была выполнена в соответствии с технических заданием и соответствует цели курсовой работе. Соответственно, все задачи поставленные перед началом работы над курсовым проектом были выполнены и цель работы достигнута.
Список литературы
- Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
- Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
- Мазуркевич, А. PHP: настольная книга программиста / А. Мазуркевич. - М.: Новое знание, 2003. - 480 с.
- Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
- http://biblioclub.ru/index.php?page=book&id=428953
- Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.
- PHP, SQL [Electronic resource] / блог. - Россия, 2010.: http://phpsql.ru/.
- Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
- Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.
- Парк, Д. 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;}
- Автоматизация контроля исполнения документов в приемной комиссии ВУЗ
- Система управления персоналом в современной организации (на примере организации)(Понятие и принципы управления персоналом)
- Управление приемом, размещением и хранением товаров. Классификация запасов. На примере реально существующей организации (характеристика хозяйственной деятельности организации)
- Этапы и факторы организационного планирования
- Проектирование организации ( Теоретические основы организационного проектирования )
- Понятие и классификация функций государства (ПОНЯТИЕ И ФОРМЫ ОСУЩЕСТВЛЕНИЯ ФУНКЦИЙ ГОСУДАРСТВА)
- Особенности пенсионного обеспечения судей (Понятие, сущность и особенности пенсионного обеспечения судей в Российской Федерации)
- Ассортиментная политика предприятия промышленности
- Управление конфликтами в организации
- Управление запасами (Теоретические аспекты логистического подхода при управлении запасами на предприятии)
- Понятие и классификация функций государства (о функциях государства и их эволюция)
- Гарантии прав и свобод человека и гражданина, Обеспечение экономических гарантий прав и свобод человека и гражданина