Разработка сайта по заказу товаров и продуктов

ВВЕДЕНИЕ 3
АКТУАЛЬНОСТЬ РАБОТЫ. 4
ЦЕЛИ ДИПЛОМНОЙ РАБОТЫ. 4
1. ОБЗОРНО-АНАЛИТИЧЕСКАЯ ЧАСТЬ 6
1.1. ОПИСАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ 6
1.2. ФУНКЦИОНАЛ САЙТА 8
1.3. ПРЕИМУЩЕСТВА И НЕДОСТАТКИ 9
1.4. СРАВНЕНИЕ С АНАЛОГАМИ 10
1.5. ТРЕБОВАНИЕ К ПРОЕКТУ 16
1.6. ВЫБОР СРЕДСТВ РАЗРАБОТКИ И РЕАЛИЗАЦИЯ 17
2. ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ 18
2.1. ЭМУЛЯТОР ВЕБ-СЕРВИСА DENWER И PHP DESIGNER 7 18
2.2. ЯЗЫК WEB-ПРОГРАММИРОВАНИЯ PHP 20
2.3. БАЗА ДАННЫХ MYSQL 20
2.4. CSS 21
2.5. РАЗМЕТКА ДОКУМЕНТОВ HTML 21
3. РАЗРАБОТКА ПРОЕКТА 23
3.1. БАЗА ДАННЫХ 23
3.2. ИНТЕРФЕЙС ПРОГРАММЫ 27
3.2.1. ИНТЕРФЕЙС САЙТА ДЛЯ ПОКУПАТЕЛЯ 28
3.2.2. ПОЛЬЗОВАТЕЛЬ С ПРАВАМИ КУРЬЕРА 34
3.2.3. ИНТЕРФЕЙС САЙТА ДЛЯ АДМИНИСТРАТОРА 35
ЗАКЛЮЧЕНИЕ 38
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 39
ПРИЛОЖЕНИЕ 40

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

АКТУАЛЬНОСТЬ РАБОТЫ.
Все хоть раз сталкивались с такой проблемой, что нет сил идти в магазин за продуктами, бывало, что попросту нет такой возможности в связи заболеванием и постельным режимом, ну или же не успеваете посетить супермаркет до его закрытия.
Помимо этого все мы стараемся сэкономить на покупках, купив подешевле аналогичный товар в другом магазине, но попросту нет времени или желания обходить все магазины вблизи дома или работы. Но надо же еще суметь выбрать свежий товар, а для начала найти на этом товаре срок его годности. А на состав вообще нет никакого желания обращать свое внимание.
Все это можно будет сделать, а так же купить и оплатить заказ на мною разработанном сайте. Вопрос с доставкой только свежих продуктов решается очень просто, если же вы получили в своем заказе, хоть одну просрочку, то вся покупка за счёт курьера.
...

ЦЕЛИ ДИПЛОМНОЙ РАБОТЫ.
Данный проект подразумевает создание своего сайта по заказу товаров
и продуктов с известных всеми нами магазинов, таких как пятерочка, карусель, магнит, лента, эдельвейс, бахетле и т.д. Цели, которые будут реализованы в работе:
• создание понятного и простого в использовании сайта, который предоставит пользователю обширную информацию о товарах и продуктах.
• реализация сортировки по цене, названию, магазинам.
• просмотр как краткого содержания, так и полного описания о товаре, включая производителя, состав и срок годности.
• добавление в корзину интересующих вас товаров.
• создание пригодной и рациональной в использовании системы, которая даст возможность пользователю сделать заказ, не выходя из дома.
• просмотр новостей и акций.

1.1. ОПИСАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ
Создание моей выпускной квалификационной работы пало на выбор разработки сайта по заказу товаров и продуктов. Все мы знаем, что огромное количество людей пользуются интернетом и постоянно сидят на разных сайтах. Помимо этого все также привыкли уже заказывать себе одежу, сотовые телефоны, бытовую технику, всякую мелочевку для дома и все это они делают через интернет, а именно через интернет магазины. Потому что покупки через интернет:
• Экономят ваше время. Нет никакой необходимости, чтобы ехать в магазин за продуктами, а если ехать в такие магазины как Ашан или Лента, то они расположены далеко от дома. Вам приходится тратить свое время, чтобы добраться, выбрать все что вам нужно, а потом еще и с тяжелыми сумками ехать домой;
• Экономят деньги. В основном, когда проводят магазины свои акции, то эти акции в магазинах отличаются товарами так и ценами.
...

1.2. ФУНКЦИОНАЛ САЙТА
Весь функционал сайта будет выглядеть примерно таким образом:
◦ Регистрация покупателей на сайте;
◦ Авторизация (вход со своим логином и паролем);
◦ Корзина покупок, где можно будет изменять количество товаров и удалять их;
◦ Мониторинг товаров и продуктов по всем магазина и категориям;
◦ Сортировка по именованию, цене, категориям и магазинам;
◦ Просмотр как краткого содержания, так и полного описания о товаре, включая производителя, состав и срок годности;
◦ Новости и акции магазинов;
А так же сайт имеет несколько прав доступа:
• незарегистрированные пользователи могут как и просматривать сайт так и делать заказ;
• зарегистрированные пользователи имеют точно такие же права как и незарегистрированные, только есть одно преимущество - при заказе не придется вводить контактную информацию о себе;
• зарегистрированные, которые имеют права курьера- могут видеть списки заказов и принимать их.

1.
...

1.3. ПРЕИМУЩЕСТВА И НЕДОСТАТКИ
Ниже представлены преимущества интернет-магазина:
• Сайтом вы можете пользоваться круглосуточно, а также добавлять в корзину интересующей вас товары;
• Удобный поиск нужного товара по магазинам для его покупки подешевле;
• Полная информация о товаре, не нужно всматриваться в мелкий шрифт производителя на упаковке;
• Так как на дворе уже 21 век и прогресс идет вперед, то через сайт можно контактировать с аудиторией дистанционно. Можно отслеживать предпочтения клиентов, создавать опросы и имеется обратная связь для общения с пользователями.

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

1) ЕДАДИЛ
1.4.
...

1.4. СРАВНЕНИЕ С АНАЛОГАМИ

Уникальность этого проекта состоит в том, что (данное web- приложение и сайт) показывает на своем ресурсе только акции и скидки, исходя из каталога товаров магазинов.
Регистрация на данном ресурсе не обязательна. Тут нужно выбрать город, в котором вы живете или находитесь, чтобы отследить скидки в интересующих вас магазинах (просмотреть своего рода бумажный каталог, только через интернет на вашем устройстве) см рисунок 1.1.

Рисунок 1.1 Вход
На рисунке 1.2 представлен список магазинов расположенных в вашем городе.

Рисунок 1.2 Магазины

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

Рисунок 1.3 Категории
После того как выбираем категорию попадаем в список товаров данной категории. Тут все товары из каталога с указанной процентной скидкой и сроком действия акции на рисунке 1.4.
Рисунок 1.
...

1.5. ТРЕБОВАНИЕ К ПРОЕКТУ
Самое главное при разработке это качественно разработать все функции и сделать сайт наиболее простым для пользователя, как это только возможно. Пользователи ожидают от сайта простого и понятного интерфейса, удобных настроек под себя и просто поиска товаров на сайте.
Требования к проекту:
1. Отображение на сайте полной информации о товарах (просмотр как краткого содержания, так и полного описания о товаре, включая производителя, состав и срок годности;
2. Чтобы было окно с поиском товаров и сортировке. Поиск товаров осуществляется по ключевым словам или по полному названию. Также можно сортировать товары по названию от А до Я, от Я до А, по уменьшению или увеличению цены, по категориям и магазинам.
3. Возможность обратной связи для подтверждения заказов или в случае вопросов.
4. Простая система заказа товара, состоящая из трех шагов.
5. Администратор может добавлять и редактировать товары, обновление или редактирование информации о товаре.
...

1.6. ВЫБОР СРЕДСТВ РАЗРАБОТКИ И РЕАЛИЗАЦИЯ
Изучив все существующие программы по созданию сайтов, выбор пал на PHP Designer. Ключевым моментами по выбору были, такие что:
◦ Он делает код программы доступным для пользователя и помогает сэкономить время при написании кода благодаря многочисленным инструментам и утилитам;
◦ Очень много популярных библиотек , присутствуют готовые коды. При написании кода всплывают подсказки описания функции, выбора функции и завершает код;
◦ Программа имеет очень простой и удобный интерфейс с большим количеством отображений файлов проекта на рабочем экране и очень удобно между ними перемещаться. А так же он бесплатный и имеет русский язык;
◦ Присутствует поддержка HTML, JavaScript, MySQL, PHP, CSS и многое другое;
◦ Присутствует автоматическое завершение кода для JavaScript, PHP и CSS;
◦ Легко выбирать файлы и перемещаться по ним.
2.
...

2.1. ЭМУЛЯТОР ВЕБ-СЕРВИСА DENWER И PHP DESIGNER 7
Нам нужно будет проверять работу скриптов используемых в сайте на его страницах. Но это не предоставляется возможным так как мы работаем дома и отсутствует хостинг, так как PHP, SSI, CGI требуют чтобы использовался сервер. Для этого нам понадобится Denwer, который создаст локальный сервер на нашем компьютере и вы сможем работать без отсутствия интернета.
Так же Denwer удобен тем, что предоставляет возможность создания своего хостинга и можно реализовывать БД, используя MySQL.
PhpDesigner 7 - это быстрый и мощный PHP IDE и PHP-редактор с полномасштабными встроенными редакторами HTML5 , CSS3 и JavaScript .
...

2.3. БАЗА ДАННЫХ MYSQL
Чтобы сайт был более информативным нам будут нужны базы данных, которые будут содержать основную информацию. Это может быть база данных товаров, пользователей, новости и т.д. Хранить данные в этой системе безопасно и удобно для использования. Тем самым нам не придется прописывать все товары в самом коде и сайт не будет очень долго погружаться. А чтобы выводить товары мы в коде пропишем обращение к MySQL. Еще одно преимущество данного способа, что хранение всей информации на себя берет не диск вашего компьютера, а база данных.
В своем дипломном проекте я использовал встроенную в эмулятор Denwer базу данных MySQL, которая является одним из самых распространенных СУБД (система управления базами данных) в разработке интернет-проектов.
2.4. CSS
CSS (Cascading Style Sheets — каскадные таблицы стилей) – язык стилей. Он определяет то, как будет отображаться текст, позволяет изменить шрифт, размер, цвет, высоту, отступы, поля.
...

2.5. РАЗМЕТКА ДОКУМЕНТОВ HTML
HTML (Hyper Text Markup Language) – язык гипертекстовой разметки, с помощью которой создаются веб-страницы сайтов.
Язык HTML описывает отображение для форматирования шрифтов и абзацев, гипертекстовые ссылки на другие документы, поведение веб- страницы в программе-обозревателе при перемещении над ней указателя мыши.
Структуру HTML документа составляют теги или же, говоря простым языком, инструкции, которых в языке HTML достаточно много. Теги описывают структуру и стиль оформления, позволяя до тонкостей сформировать вид веб-страницы, и находятся внутри гипертекстового документа. В окне браузера пользователя эти теги не видны, пользователь видит только информацию, которую формируют теги. Да и, практически, во всех офисных программах (MS Word, MS Excel, MS Access, MS Power Point и т.д.), которые позволяют создавать Web-страницы благодаря специальным программным средствам, пользователь теги не видит, так как они вводятся автоматически.
...

3. РАЗРАБОТКА ПРОЕКТА
Эта глава опишет разработку проекта.

3.1. БАЗА ДАННЫХ
Для начала, нам нужна база данных, где мы будем хранить информацию о товарах. Все таблицы мы будем создавать в phpMyAdmin. Таблицу мы назовем «table_products». В ней мы пропишем такие поля как
«products_id» –id продукта, который будет уникальным и иметь auto_increment, «title» -название товара, «price»-стоимость товара, «brand»- название категории, «seo_words»-тут перечнь ключевых слов, по которым будет осуществляться поиск, «seo_description»-содержание о товаре, «image»- сама картинка товара (ее название), «Pcomposition»-вкладка с составом товара, его сроке годности и способе хранения, «sale»-отображение данного товара во вкладке акции, «visible»-отображение товара на сайте, «count»- количество просмотров товара, «type_tovara»-в каком из магазинов будет отображаться товар, «brand_id»-в какой категории будет расположен см рисунок 3.1.

Рисунок 3.
...

2.3. БАЗА ДАННЫХ MYSQL
Чтобы сайт был более информативным нам будут нужны базы данных, которые будут содержать основную информацию. Это может быть база данных товаров, пользователей, новости и т.д. Хранить данные в этой системе безопасно и удобно для использования. Тем самым нам не придется прописывать все товары в самом коде и сайт не будет очень долго погружаться. А чтобы выводить товары мы в коде пропишем обращение к MySQL. Еще одно преимущество данного способа, что хранение всей информации на себя берет не диск вашего компьютера, а база данных.
В своем дипломном проекте я использовал встроенную в эмулятор Denwer базу данных MySQL, которая является одним из самых распространенных СУБД (система управления базами данных) в разработке интернет-проектов.
2.4. CSS
CSS (Cascading Style Sheets — каскадные таблицы стилей) – язык стилей. Он определяет то, как будет отображаться текст, позволяет изменить шрифт, размер, цвет, высоту, отступы, поля.
...

3.2.1. ИНТЕРФЕЙС САЙТА ДЛЯ ПОКУПАТЕЛЯ
Попадая на сайт, пользователь видит перед собой главную страницу рисунок 3.10. В верхней части сайта, город, информация о нас, магазины и контакты для связи. Выбирая свой город у вас отобразится тот список магазинов, который есть в вашем городе. Правее поле для регистрации и входа, чуть ниже осуществляется поиск товаров по сайту. Так же верхней части отображены ссылки для перехода на главную страницу, акции – где список всех акций и магазинов, поле заказы для того чтобы принять заказ курьеру и корзина товаров. Ниже представлены сами товары, которые можно сортировать. Справа столбец для выбора магазина и категории товаров. И сортировка по цене или же категории.

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

3.2.3. ИНТЕРФЕЙС САЙТА ДЛЯ АДМИНИСТРАТОРА
Тут своя панель для входа рисунок 3.20.

Рисунок 3.20 Панель входа
Окно панели управления рисунок 3.21. Где можно просматривать заказы, весь список товаров, отзывы, категории, клиенты и новостную ленту.

Рисунок 3.21 Панель управления

Так же у нас будет свое окно для добавления администратора с нужными для нас привилегиями рисунок 3.22. Выбираем нужного нам пользователя, вводим его данные.

Рисунок 3.22 Добавление прав

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

Рисунок 3.
...

1. Java course. JSP – расширяем возможности представления. — http://javacourse.ru/student/book1/jsp/. — 2017. — [Online; accessed 16-May- 2017].
2. Воронина Ю. Сверстаем сами. 2015 [Электронный ресурс]. URL: https://rg.ru/2015/09/22/magaziny.html (дата обращения: 09.06.2017).
3. Ржеуцкая С.Ю. Базы данных. Язык SQL. – М.: ВоГТУ, 2010 г. –
159 с.
4. Основы PHP [Электронный ресурс] Добавлено: 02.06.2017 –
Проверено: 18.06.2017. http://www.php.su/php/?php
5. Эрик А. Мейер. CSS. Каскадные таблицы стилей. Подробное руководство – М.: Символ-Плюс. 2008 г. – 576 с.
6. Робин Никсон. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 [Электронный ресурс] Добавлено 10.06.2017 – Проверено: 18.06.2017. http://forcoder.ru/html-css/sozdaem- dinamicheskie-veb-sayty-s-pomoschyu-php-mysql-javascript-css-i-html5-1525
7. Определение веб-сайта. Виды и классификации веб-сайтов. [Электронный ресурс] Добавлено: 28.05.2017 – Проверено: 18.06.2017. http://iamag.ru/opredelenie-veb-sajta-vidy-i-klassifikacii-veb-sajtov/