Загрузил D Duxter

создание сайта ВКРБ

Реклама
СОДЕРЖАНИЕ
ВВЕДЕНИЕ .............................................................................................................. 5
1. Анализ исследуемой предметной области ..................................................... 8
1.1. Описание предметной области ..................................................................... 8
1.2. Обзор аналогов ............................................................................................... 8
1.3. Назначение разработки ............................................................................... 14
2. Выбор программных средств для разработки web-сайта ........................... 15
2.1. Выбор редактора кода ................................................................................. 15
2.2. Выбор СУБД................................................................................................. 19
2.3. PHPMyAdmin ............................................................................................... 22
2.4. Выбор web-сервера ...................................................................................... 23
2.5. Язык гипертекстовой разметки HTML ...................................................... 24
2.6. Каскадные таблицы стилей (CSS) .............................................................. 25
2.7. Язык программирования PHP..................................................................... 26
2.8. Язык программирования JavaScript ........................................................... 26
2.9. Результаты выбора программных средств для разработки web-сайта... 27
3. Разработка web-сайта ..................................................................................... 28
3.1. Моделирование в IDEF0 ............................................................................. 28
3.2. Реализация базы данных ............................................................................. 30
3.3. Структура web-сайта ................................................................................... 32
3.4. Разработка интерфейса web-сайта ............................................................. 34
3.4.1. Интерфейс пользователя .......................................................................... 34
3.4.2. Интерфейс администратора ..................................................................... 43
Заключение ............................................................................................................ 45
Список используемых источников ...................................................................... 46
Приложение ........................................................................................................... 47
3
СПИСОК ИСПОЛЬЗУЕМЫХ СОКРАЩЕНИЙ
ИС – Информационная Система
ПО – Программное Обеспечение
БД – База Данных
СУБД – Система Управления Базами Данных
CSS – Cascading Style Sheets (Каскадные Таблицы Стилей)
HTML – HyperText Markup Language (Язык Гипертекстовой Разметки)
SQL – Structured Query Language (Язык Структурированных Запросов)
PHP – Hypertext Preprocessor (Процессор Гипертекста)
WAMP
–
сокращением
акроним от
описывается
«Windows, Apache, MySQL и PHP».
комплектация
пакетов
Данным
программ,
под
соответствующую ОС, обозначаемую первой буквой.
WNMP – акроним от «Windows, Nginx, MySQL и PHP». Данным сокращением
описывается комплектация пакетов программ, под соответствующую ОС,
обозначаемую первой буквой.
4
ВВЕДЕНИЕ
На данном временном этапе в обществе всё большую популярность
набирает продажа через интернет-магазины. В современных реалиях общества
любой фирме необходимо следовать текущим тенденциям развития
информационных технологий. Для получения наибольшей прибыли торговой
организации требуется использовать актуальные инструменты для работы.
Одним из таких инструментов является информационная система.
Информационная система — это взаимосвязанная совокупность средств,
методов и персонала, используемых для хранения, обработки и выдачи
информации для достижения цели управления. В современных условиях
основным
техническим
средством
обработки
информации
является
персональный компьютер. Большинство современных информационных
систем преобразуют не информацию, а данные. Поэтому часто их называют
системами обработки данных.[1]
В общем понимании под информационной системой подразумеваются
следующие основные компоненты: данные, техническое и программное
обеспечение, а также организационные мероприятия и персонал. В
деятельности предприятия информационная система рассматривается как
программное обеспечение, которое способно реализовать деловую стратегию
и бизнес-процессы определённой организации.
Активная конкуренция в условиях рыночной экономики возможна только
при наличии современной и удобной системы управления ресурсами и
процессами определённой организации, в следствии чего с каждым годом
растёт
важность
и
востребованность
информационных
систем,
удовлетворяющих всем потребностям предприятия.
Потребность в информационной системе возникает у предприятия при
наличии следующих проблем:
− Обширные объёмы данных, с которыми затруднительно работать
без
использования
дополнительных
инструментов;
5
информационных
− Необходимость обеспечения возможности удалённого доступа к
информации;
− Необходимость обеспечения удобного коммуницирования между
работниками предприятия;
− Необходимость автоматизирования постоянно повторяющихся
процессов.
Одной из разновидностей современной информационной системы
является web-сайт, предназначенный не только для клиентов компании, но и
для работников фирмы, на который могут зайти одновременно несколько
работников организации, вне зависимости от их местоположения.
Для успешной реализации информационной системы необходимо
помнить о подсистемах, входящих в её состав, которые обеспечивают
эффективную работу всей системы:
− Информационное обеспечение – совокупность единой системы
кодирования и классификации информации, а также принципы и
методы создания баз данных;
− Техническое обеспечение – совокупность технических средств ,
задействованных в технологическом процессе преобразования
информации в системе, а также соответстующая техническая
документация;
− Программное обеспечение – комплекс программ и правил
регулярного применения, которые необходимы для решения
функциональных задач информационной системы;
− Математическое обеспечение – совокупность математических
моделей, алгоритмов и методов обработки информации, которые
необходимо использовать в информационной системе при решении
функциональных и проектных задач;
6
− Лингвистическое обеспечение – совокупность языковых средств,
которые используются в системе с целью повышения качества
разработки.
Цель
данной
выпускной
квалификационной
работы
–
создать
информационную систему компании, занимающейся продажей комнатных
растений через интернет.
Основные задачи проекта:
− анализ предметной области;
− обзор аналогов в данной области;
− выбор ПО и программных средств для реализации ИС;
− разработка базы данных;
− выбор интерфейса и разработка страниц web-сайта.
7
1. Анализ исследуемой предметной области
1.1.
Описание предметной области
Интернет-магазин — сайт, торгующий товарами посредством Интернета.
Позволяет пользователям онлайн, в своём браузере или через мобильное
приложение, сформировать заказ на покупку, выбрать способ оплаты и
доставки
заказа,
оплатить
заказ.
При
этом
продажа
товаров
осуществляется дистанционным способом и она накладывает ограничения на
продаваемые товары.
Интернет-магазин использует совокупность программных средств,
позволяющих потенциальному покупателю просмотреть и выбрать товар или
услугу, оформить заказ и произвести оплату на сайте фирмы.
В мире с каждым днём увеличивается количество пользователей сети
Internet,
соответственно
и
увеличивается
количество
потенциальных
покупателей посредством интернет-магазина. По данным ежегодного
глобального исследования от «We Are Social» количество интернетпользователей в мире выросло до 4,54 миллиарда, что на 7% больше
прошлогоднего значения (+ 298 миллионов новых пользователей в сравнении
с данными на январь 2019 года). Людям очень важен собственный комфорт,
один из способов его поддержки – покупка необходимых товаров и услуг не
выходя из дома – online, с доставкой на дом. Также интернет-продажи
интересны и владельцам фирм – нет необходимости арендовать помещение
для торговли, организовывать перевозки со склада.
1.2.
Обзор аналогов
Одна из основополагающих деталей успешных продаж – хороший,
понятный, удобный и интуитивно-понятный интерфейс web-сайта.
В данный момент времени, в связи с ростом у молодого поколения (20-35
лет) интереса к комнатным растениям, изменилась и целевая аудитория
данного бизнеса. Но далеко не все фирмы успели это заметить, из-за чего у
8
многих компаний остался старый дизайн сайта, который не удовлетворяет
потребности новой целевой аудитории.
Проанализируем несколько web-сайтов конкурентов.
Начнём с анализа web-сайта компании GardenGrove, находящемся по
адресу https://gardengrove.ru/. Рисунки 1.1-1.2.
Рисунок 1.1 – Главная страница сайта https://gardengrove.ru/.
Рисунок 1.2 – Каталог товаров фирмы GardenGrove
Положительные стороны web-сайта:
− интуитивно-понятный интерфейс;
− реализована обратная форма связи с продавцом;
9
− адаптивность данного сайт к мобильным устройствам;
− удобная сортировка товара.
Отрицательный стороны web-сайта:
− устаревший дизайн сайта;
− широкая шапка сайта.
Далее
проанализируем
web-сайт
компании
РастенияМаркет.РФ,
находящийся по адресу https://растениямаркет.рф. Рисунки 1.3-1.5.
Рисунок 1.3 – Главная страница сайта https://растениямаркет.рф.
Рисунок 1.4 – Каталог товаров сайта фирмы РастенияМаркет.РФ.
10
Рисунок 1.5 – Подвал сайта фирмы РастенияМаркет.РФ.
Положительные стороны web-сайта:
− удобная навигация для покупки товара;
− реализована обратная форма связи с продавцом;
− адаптивность данного сайт к мобильным устройствам;
− современный дизайн сайта;
− плохой логотип;
− удобная сортировка товара.
Отрицательный стороны web-сайта:
− шапка сайта скрыта до прокрутки вниз;
− отсутствие логотипа.
Последним рассмотрим web-сайт компании VipPlant, находящийся по
адресу http://vip-plant.ru/. Рисунки 1.6 – 1.8.
11
Рисунок 1.6 – Главная страница сайта http://vip-plant.ru/.
Рисунок 1.7 – Каталог товаров сайта фирмы VipPlant.
12
Рисунок 1.8 – Поиск по сайту фирмы VipPlant.
Отрицательный стороны web-сайта:
− устаревший дизайн сайта;
− неудобно реализован поиск по сайту;
− отсутствует адаптивность данного сайт к мобильным
устройствам;
− широкая шапка сайта.
Таблица 1.2.1. – Оценка сайтов аналогов.
Критерий
GardenGrove
РастенияМаркет.РФ VipPlant
Дизайн сайта
-
+
-
Понятный
+
+
-
Логотип
+
-
-
Адаптивность
+
+
-
интерфейс
После рассмотрения нескольких сайтов фирм по продаже комнатных
растений становится понятно почему некоторые фирмы пользуются более
большой популярностью, в отличии от своих конкурентов. Потенциальный
покупатель должен легко найти информацию об интересующем его товаре, а
также информацию о доставке. Также дизайн сайта не должен отпугивать
пользователей: он должен быть современным и понятным. Адаптивность
13
сайта играет важную роль – многие пользователи пользуются мобильными
устройствами при заказе через интернет.
Главными преимуществами разрабатываемой ИС станут современный и
удобный дизайн, интуитивно-понятный пользовательский интерфейс.
1.3.
Назначение разработки
Целью данной выпускной квалификационной работы является разработка
информационной системы для фирмы, занимающейся продажей комнатных
растений. В данной ИС будут реализованы следующие функции:
− БД товаров компании;
− онлайн-список товаров компании;
− возможность оформления заказа онлайн;
− форма обратной связи с фирмой.
При разработке ИС необходимо будет соблюсти следующие условия к
web-сайту:
− интуитивно-понятный пользовательский интерфейс;
− современный адаптивный дизайн;
− совместимость с последними версиями браузеров Chrome,
Yandex и Safari.
Страницы сайта:
− главная страница;
− о компании;
− контакты;
− каталог товаров;
− корзина покупок;
− оформление и оплата заказа.
14
2. Выбор программных средств для разработки web-сайта
Проблема выбора программных средств важна и требует достаточных
знаний в теме. Критерии выбора программных средств взаимосвязаны, но для
определённого проекта требуются индивидуальные свойства программного
обеспечения, поэтому традиционные операторы агрегации на основе
аддитивных мер для объединения критериев в данном случае не подходят.
Задача
выбора
программного
обеспечения
является
задачей
многокритериального выбора.
Требования к программному обеспечению, предъявляемые в данной
работе:
− стоимость использования ПО;
− актуальность ПО;
− функциональные возможности ПО.
2.1.
Выбор редактора кода
В данной дипломной работе используется язык гипертекстовой разметки
HTML. Обеспечение более эффективного и продуктивного процесса
разработки возможно с использованием подходящего редактора кода. Многие
из современных редакторов кода предоставляют широкий ассортимент
инструментов, которые упрощают работу.
Выделим базовые требования для редактора кода:
− Комфорт и простота. Редактор должен иметь интуитивнопонятный интерфейс, чтобы можно было сразу начать с ним
работу;
− Потребляемость
ресурсов.
Редактор
кода
должен
быть
экономичным в использовании оперативной памяти и достаточно
быстрым для комфортной работы;
− Функциональные
возможности.
Редактор
кода
должен
поддерживать плагины, необходимые для работы.
Далее будут рассмотрены несколько редакторов кода и выделены их
положительные и отрицательные стороны для выбора подходящего.
15
Notepad++
Notepad++ — свободный текстовый редактор с открытым исходным
кодом для Windows с подсветкой синтаксиса большого количества языков
программирования и разметки. Пользователи Linux также могут использовать
его через Wine.
Достоинства редактора:
− не требователен к ресурсам;
− полностью бесплатный редактор;
− подсветка кода и возможность сворачивания блоков;
− возможность одновременной работы с множеством документов;
Недостатки редактора:
− неудобное расположение вкладок;
− отсутствие кроссплатформенности;
− ограниченный функционал.
Ниже представлен скриншот рабочей области Notepad++.
Рисунок 2.1.1. – Рабочее окно редактора Notepad++.
16
Atom
Atom - бесплатный текстовый редактор с открытым исходным кодом для
Linux, macOS, Windows с поддержкой плагинов. Большинство плагинов
имеют статус свободного программного обеспечения.
Достоинства редактора:
− Кроссплатформенность. Atom работает на таких операционных
системах, как Windows, OS X и Linux;
− Механизм автозаполнения;
− Распространяется бесплатно;
− Большое количество плагинов;
− Удобный дизайн.
Недостатки редактора:
− Потребление большого количества ресурсов. Atom забирает
относительно большой объём оперативной памяти;
− Поддержание
тех
или
иных
языков
программирования
определяется не единой организацией, а зависит от функционала
плагинов, написанных разными разработчиками.
Ниже представлена рабочая область Atom.
Рисунок 2.1.2. – Рабочее окно редактора Atom.
17
Visual Studio Code
Visual
Studio
Code
— редактор
(VSCode)
исходного
кода,
разработанный Microsoft для Windows, Linux и macOS. Visual Studio Code
позиционируется
как
простой
в
освоении
редактор
кода
для
кроссплатформенной разработки веб- и облачных приложений.
Достоинства редактора:
− Встроенный мощный механизм автозаполнения;
− Большое количество расширений и дополнений;
− Имеется встроенный отладчик кода JavaScript, TypeScript, Node.js;
− Возможность разбиения окон. VSCode позволяет разбивать
интерфейс на множество окон, для возможности сравнения и
одновременного написания кода в двух окнах;
− Удобный дизайн;
− Большое количество плагинов;
− VSCode распространяется бесплатно.
Недостатки редактора:
− Достаточно большое время запуска приложения;
− Медленный поиск по проектам.
Ниже представлен скриншот рабочей области Visual Studio Code.
Рисунок 2.1.3. – Рабочая область Visual Studio Code.
18
После анализа положительных и отрицательных сторон некоторых
редакторов, был выбран редактор Visual Studio Code, так как он бесплатный,
имеет возможность раздваивания окон, хороший и удобный дизайн, а также
имеет большое
количество
плагинов,
что
повышает
эффективность
разработки.
2.2.
Выбор СУБД
Система управления базами данных (СУБД) – комплекс программ, позволяющих создать базу данных (БД) и манипулировать данными (вставлять,
обновлять, удалять и выбирать). Система обеспечивает безопасность, надёжность хранения и целостность данных, а также предоставляет средства для администрирования БД.
Системы
управления
базами
данных помогают отсортировать
информацию, а также связать базы данных между собой, при этом предоставив
отчет об изменениях и зарегистрированных событиях.
Требования, предъявляемые у СУБД в рамках данной работы:
− Удобство использования;
− Масштабируемость СУБД;
− Удобный и понятный дизайн;
− Стоимость системы и поддержки.
Ниже будут рассмотрены популярные СУБД, их положительные и
отрицательные стороны.
Oracle 19c
Oracle Database — объектно-реляционная система управления базами
данных компании Oracle. Oracle 19c предназначена для облачных сред и может
быть размещена на одном или нескольких серверах, это позволяет управлять
базами данных, которые сдержат миллиарды записей.
Достоинства СУБД:
− Высокая надёжность;
− Возможность обрабатывать большое количество записей;
19
− Удобный дизайн;
− Широкий функционал.
Недостатки СУБД:
− Высокая стоимость;
− Система требует значительных ресурсов памяти для работы.
Ниже представлен скриншот рабочей области Oracle 19c.
Рисунок 2.2.1. – Рабочая область Oracle 19c.
DB2
DB2 — семейство систем управления реляционными базами данных,
выпускаемых корпорацией IBM. Система является кроссплатформенной и
работает на Windows, Linux и Unix.
Достоинства СУБД:
− Поддерживает обработку объёмных БД;
− Несколько задач могут выполняться одновременно с помощью
планировщика задач.
20
Недостатки СУБД:
− Высокая стоимость продукта;
− Неудобный дизайн.
Ниже представлен скриншот рабочей области DB2.
Рисунок 2.2.2. – Рабочая область DB2.
MySQL
MySQL — свободная реляционная система управления базами данных. Эта
СУБД позволяет выбирать различные движки для системы хранения, которые
позволяют менять функционал инструмента и выполнять обработку данных,
хранящихся в различных типах таблиц.
Достоинства СУБД:
− Бесплатное распространение;
− Имеет хорошую документацию;
− Масштабируемость - MySQL поддерживает работу с большими
объёмами данных;
− Высокая скорость обработки данных:
− Имеет большое количество функций.
Недостатки СУБД:
− Платная поддержка;
− Отсутствует встроенная поддержка XML файлов.
Ниже представлен скриншот рабочей области MySQL.
21
Рисунок 2.2.3. – Рабочая область MySQL.
После анализа некоторых СУБД для данной работы была выбрана
MySQL, так как он бесплатный, имеет высокую скорость обработки данных,
хорошую масштабируемость и большое количество встроенных функций.
2.3.
PHPMyAdmin
PHPMyAdmin — веб-приложение с открытым кодом, написанное на
языке
PHP
и
представляющее
собой
веб-интерфейс
для
администрирования СУБД MySQL. PhpMyAdmin позволяет через
браузер и не только осуществлять администрирование сервера MySQL,
запускать команды SQL и просматривать содержимое таблиц и баз
данных.
Преимущества PHPMyAdmin:
− Лаконичный, удобный и понятный интерфейс;
− Возможность запуска приложения сразу на сервере;
− Высокий функционал работы с БД.
22
Ниже представлен скриншот рабочей области PHPMyAdmin.
Рисунок 2.3.1. – Рабочая область PHPMyAdmin.
Исходя из перечисленных выше преимуществ для данной работы был
выбран PHPMyAdmin.
2.4.
Выбор web-сервера
Web-сервер — сервер, принимающий HTTP-запросы от клиентов,
обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с
HTML-страницей, изображением, файлом, медиа-потоком или другими
данными. Для тестирования данной выпускной работы было принято решение
ограничить выбор локальными web-серверами.
Denver
Denver
–
набор
дистрибутивов
(локальный
сервер WAMP) и
программная оболочка, предназначенные для создания и отладки сайтов (вебприложений, прочего динамического содержимого интернет-страниц) на
локальном ПК (без необходимости подключения к сети Интернет) под
управлением ОС Windows. Denver работает на всех версиях операционной
системы Windows, даже самых старых, таких как Windows 98 и Windows 2000,
это одна из самых программ для web-разработки.
Достоинства Denver:
− Простота использования;
− Малый вес установочных файлов программы.
23
Недостатки Denver:
− Отсутствие удобного графического интерфейса;
− Малое количество компонентов администрирования.
Open Server
Open Server – это портативный локальный WAMP/WNMP сервер,
имеющий многофункциональную управляющую программу и большой выбор
подключаемых компонентов. Open Server работает с операционной системой
Windows от 7-ой версии и выше, также частично поддерживается на XP и
Vista.
Достоинства Open Server:
− Не требует установки на компьютер – Open Server можно
запустить с любого электронного носителя;
− Быстрота запуска и загрузки;
− Возможность переключать модули HTTP, MySQL, PHP;
− Удобный графический интерфейс пользователя;
− Широкое разнообразие функций для администрирования и
управления компонентами.
Недостатки Open Server:
− Отсутствие поддержки автообновления.
После анализа некоторых из web-серверов, представленного выше, для
данной работы был выбран Open Server из-за удобного графического
интерфейса, большого разнообразия функций и быстроты запуска.
2.5.
Язык гипертекстовой разметки HTML
Hyper Text Markup Language (HTML) — язык разметки гипертекста,
предназначенный для создания гипертекстовых документов в среде WEB.
HTML позволяет структурировать разделы, параграфы, заголовки, ссылки и
блоки для web-страниц и приложений.
HTML не является языком программирования и не имеет возможности
создавать и работать с динамическими функциями. При работе с HTML
24
используются простые структуры кода, такие как теги и атрибуты, для
создания разметки страницы web-сайта, HTML позволяет организовывать и
форматировать документы. Также использование HTML – разметки даёт
возможность
форматировать
документы
для
их
представления
с
использованием различных шрифтов, линий и прочих графических элементов
на любой системе, их просматривающей.
Гипертекст – совокупность документов, которые содержат текстовую,
аудио и видеоинформацию, эти документы связаны между собой взаимными
ссылками в единый текст. Гипертекстовый документ включает в себя две
части: сам информационный текст и теги для разметки этого текста.
Главным преимуществом HTML является то, что документ может быть
просмотрен на web-браузерах различных типов и различных платформах, при
этом внешний вид web-страницы будет иметь не принципиальные различия в
зависимости от браузера.
2.6.
Каскадные таблицы стилей (CSS)
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) —
технология описания внешнего вида документа, который оформлен с
применением языка разметки. Преимущественно CSS используется как
средство оформления web-страниц в формате HTML и XHTML.
Каскадные таблицы стилей отвечают за визуальное представление
документов и web-страниц.
Каскадные таблицы стилей – мощный механизм управления
представлением отдельных документов или их наборов. В первую очередь
CSS обеспечивают наиболее богатое представление документа. CSS дают
возможность задавать цвета текста и фона различных элементов, создавать
рамки и увеличивать либо уменьшать отступы вокруг элементов. Благодаря
им возможно сделать так, чтобы текст отображался прописными буквами, и
добавить
дополнительные
элементы
оформления
(например,
подчеркивание), разбивки, а также управлять тем, будет ли он отображаться
вообще, а кроме того, они предоставляют возможность осуществить
25
множество других эффектов [2].
Под стилем подразумеваются все типы элементов дизайна: шрифт, фон,
текст, цвета и расположения объектов на странице. CSS обеспечивает большой
уровень контроля над размещением текста и графики. Также каскадные
таблицы стилей обеспечивают единство оформления и организации, которые
нельзя достичь, используя только HTML.
2.7.
Язык программирования PHP
PHP (PHP: Hypertext Preprocessor) - это распространенный язык
программирования общего назначения с открытым исходным кодом. PHP
специально сконструирован для веб-разработок и его код может внедряться
непосредственно в HTML. PHP позволяет создавать web-приложения за очень
короткие
сроки,
получающиеся
в
итоге
продукты,
можно
легко
модифицировать и поддерживать в будущем.
PHP – это язык программирования, рассчитанный для интерактивного
создания web-страниц на компьютере, который называется web-сервером.
PHP-код исполняется между запрошенной страницей и web-сервером,
добавляя и изменяя основной код HTML. Язык PHP упрощает разработку
web-страниц, потому что платформа PHP включает в себя весь необходимый
программный код [3].
2.8.
Язык программирования JavaScript
JavaScript – это язык программирования для Веб. Подавляющее
большинство веб-сайтов используют JavaScript, и все современные вебброузеры – для настольных компьютеров, игровых приставок, электронных
планшетов и смартфонов – включают интерпретатор JavaScript, что делает
JavaScript самым широкоприменимым языком программирования из когдалибо существовавших в истории.[4]
Также для данной работы была использована библиотека jQuery.
26
—
JQuery
набор
функций
JavaScript,
фокусирующийся
на
взаимодействии JavaScript и HTML. Библиотека jQuery была создана с целью
облегчить для разработчиков использование JavaScript на web-сайтах.
2.9.
Результаты выбора программных средств для разработки webсайта
Результаты выбора ПО представлены в таблице 2.1.
Таблица 2.9. – Выбранное ПО
Наименование
Обоснование выбора
Визуальный редактор кода Visual − Удобный интерфейс;
− Встроенный
Studio Code
отладчик
кода
JavaScript;
− Возможность разбиения окон;
− Доступность.
− Бесплатное распространение;
СУБД MySQL
− Высокая
скорость
обработки
данных:
− Большое количество функций.
Web-сервер Open Server
− Быстрота запуска и загрузки;
− Возможность
переключать
модули HTTP, MySQL, PHP;
− Удобный графический интерфейс
пользователя;
− Широкое разнообразие функций;
− Доступность.
Интерфейс
для
СУБД
MySQL − Управление СУБД без ввода SQL
команд;
phpMyAdmin
− Удобный интерфейс.
27
3. Разработка web-сайта
3.1.
Моделирование в IDEF0
IDEF0 — методология функционального моделирования и графическая
нотация, с помощью которой формализируют и описывают бизнес-процессов.
Методология IDEF0 – один из самых популярных подходов для
описания
бизнес-процессов,
у
данной
методологии
можно
выявить
следующие особенности:
− Использование контекстной диаграммы;
− Поддержка последовательной декомпозиции до требуемого
уровня детализации;
− Доминирование (в верхнем левом углу находится наиболее важная
функция);
− Выделение нескольких видов стрелок.
Такая функциональная модель состоит из набора блоков со входами и
выходами, с определёнными механизмами и управлением, которые далее
декомпозируются до определённого уровня для достижения необходимой
степени подробности. Функции соединяются между собой с помощью стрелок
и описаний функциональных блоков.
В функциональной системе стрелки и активности разделяются на виды,
каждый из которых имеет своё собственное значение.
Виды стрелок, использующихся в IDEF0:
− Входящие – это вводные стрелки, которые ставят определённую
задачу;
− Исходящие
–
это
стрелки,
которые
выводят
результат
деятельности;
− Управляющие (идут сверху вниз) – это стрелки, которые
показывают механизмы управления;
− Механизмы (идут снизу вверх) используются для произведения
необходимой работы.
28
Ниже представлены диаграммы, разработанные для данного проекта.
Рисунок 3.1.1 – Контекстная диаграмма
Рисунок 3.1.2. – Декомпозиция 1-ого уровня
29
3.2.
Реализация базы данных
Для данного проекта была разработана база данных, представленная на
рисунке ниже.
Рисунок 3.2.1 – модель БД
В данной базе данных присутствуют следующие таблицы:
Таблица «Plants», в которой отображены данные об имеющихся
растениях (Таблица 3.2.1.).
Таблица 3.2.1.
Название
Тип
Назначение
idPlant
integer
Идентификационный номер записи
Plants_name
nvarchar
Название товара
Price
double
Цена товара
Count
integer
Количество имеющегося товара
Img
nvarchar
Ссылка на изображение товара
Таблица «User», в которой отображены данные о пользователях
(Таблица 3.2.2.).
30
Таблица 3.2.2.
Название
Тип
Назначение
idUser
integer
Идентификационный номер записи
Login
nvarchar
Логин
от
личного
кабинета
личного
кабинета
пользователя
Password
nvarchar
Пароль
от
пользователя
idWish
integer
Идентификационный
номер
списка
желаний данного пользователя
idOrder
integer
Идентификационный
номер
заказа
данного пользователя
Email
nvarchar
Адрес электронной почты пользователя
Таблица «Order», в которой хранится заказ пользователя (Таблица
3.2.3.).
Таблица 3.2.3.
Название
Тип
Назначение
idOrder
integer
Идентификационный номер записи
idPlant
integer
Идентификационный номер растения,
которое находится в данном заказе
Sum_price
double
Итоговая стоимость заказа
Date_sale
datetime
Дата оформления заказа
Address
nvarchar
Адрес отправки заказа
Таблица «Wish», в которой хранится список товаров, отложенных
пользователем (Таблица 3.2.4.).
Таблица 3.2.4.
Название
Тип
Назначение
idWish
integer
Идентификационный номер записи
31
idPlants
integer
Идентификационный номер растения,
которое находится в данном списке
Таблица «Admin», в которой отображены данные для входа в систему
администратора (Таблица 3.2.5.).
Таблица 3.2.5.
Название
Тип
Назначение
Login
nvarchar
Логин
от
личного
кабинета
личного
кабинета
администратора
Password
nvarchar
Пароль
от
администратора
3.3.
Структура web-сайта
Сайт состоит из семи основных страниц:
− «Home» - главная страница сайта;
− «Plants» - страница с товарами магазина;
− «Delivery» - страница с информацией об условиях доставки;
− «About us» - страница с информацией об организации и
контактами;
− Страница профиля пользователя;
− Страница, содержащая в себе список желаний;
− Корзина пользователя;
У пользователя с правами администратора есть право доступа к ещё
одной странице сайта - «DataBase», с помощью которой есть возможность
работы с базой данных, а именно: просматривать, изменять или удалять
записи.
На рисунках ниже представлены структура сайта для обычного
пользователя и для пользователя с правами администратора.
32
Рисунок 3.3.1. – Структура сайта для обычного пользователя.
Рисунок 3.3.2. – Структура сайта для пользователя с правами
администратора.
33
3.4.
Разработка интерфейса web-сайта
Для данного сайта был разработан логотип, представленный на рисунке
ниже.
Рисунок 3.4.1 – Логотип сайта.
3.4.1. Интерфейс пользователя
Графический интерфейс web-сайта – это разновидность пользовательского
интерфейса, в котором человек взаимодействует с системой при помощи
графических
компонентов,
отображаемых
на
экране.
Эффективный
графический интерфейс пользователя должен объединять в себе две
составляющие: удобство использования и приятный внешний вид.
На каждой странице, кроме страницы «Home» в шапке присутствует
логотип компании «Plantae». Также в шапке каждой старницы располагается
меню, состоящее из следующих ссылок:
− Home;
− Plants;
− Delivery;
− About us;
− Страница корзины, обозначающаяся иконкой, представленной на
рисунке 3.4.1.1. а;
− Страница профиля пользователя, которая обозначена иконкой,
представленной на рисунке 3.4.1.1. б.
34
а)
б)
Рисунок 3.4.1.1. – а) иконка корзины; б) иконка профиля пользователя.
Главная страница, на которую попадает пользователь только перейдя на
сайт, разделена на две колонки, справа представлен логотип компании, а слева
– краткая информация о фирме (Рисунок 3.4.1.2.)
Рисунок 3.4.1.2. – Главная страница сайта.
Страница «Plants» содержит в себе карточки товаров с их названием,
изображением и ценой. Также у каждой карточки имеются активные кнопки:
− « - » - уменьшение количества товара;
− « + » - увеличение количества товара;
− «Купить» - добавление необходимого товара в корзину;
− Иконка сердца, обозначающая добавление в список желаний.
35
Рисунок 3.4.1.3. – Страница «Plants».
Страница «Delivery» содержит в себе информацию об условиях
доставки компании (Рисунок 3.4.1.4.)
Рисунок 3.4.1.3. – Страница «Delivery».
Страница «About us» содержит информацию о фирме, контакты
организации и карту с адресом (Рисунок 3.4.1.4-5.)
36
Рисунок 3.4.1.4. – Страница «About us».
Рисунок 3.4.1.5. – Карта в полной версии сайта.
Корзина пользователя представляет собой список товаров с расчётом
итоговой стоимости.
37
Рисунок 3.4.1.6. – Корзина пользователя.
Ссылка
по
иконке
профиля
перенаправляет
неавторизованного
пользователя на страницу с формой входа. Форма входа содержит в себе
необходимые для заполнения поля, также кнопку войти, и активную ссылку,
которая перенаправляет пользователя на форму регистрации (Рисунок 3.4.1.78).
Рисунок 3.4.1.7. – Форма входа пользователя в систему.
38
Рисунок 3.4.1.8. – Форма регистрации пользователя в системе.
Профиль авторизованного пользователя содержит карточку с личными
данными пользователя, и активной кнопкой «Список желаний», которая
перенаправит пользователя к списку отложенных товаров (Рисунок 3.4.1.1011)
Рисунок 3.4.1.10. – Страница профиля пользователя.
39
Рисунок 3.4.1.11. – Список желаний пользователя.
Сайт, представленный в данной выпускной работе, имеет адаптивный
дизайн, который был достигнут с помощью медиа-запросов и использования
некоторых библиотек технологии Bootstrap 4.
С помощью медиа-запросов было реализовано сворачивающееся меню в
мобильной версии сайта для более удобного использования (Рисунок 3.4.1.12)
40
Рисунок 3.4.1.12. – Сворачивающееся меню в мобильной версии сайта.
Отображение страниц сайта в мобильной версии представлено на рисунке
ниже.
а)
б)
в)
г)
41
д)
е)
ж)
з)
42
и)
Рисунок 3.4.1.13. – a) мобильная версия страницы «Home»; б) мобильная
версия страницы «Plants»; в) мобильная версия страницы «Delivery»; г)
мобильная версия страницы «About us»; д) мобильная версия карты; е)
мобильная версия формы входа в систему; ж) мобильная версия формы
регистрации в системе; з) мобильная версия профиля пользователя;
и)мобильная версия списка желаний пользователя.
3.4.2. Интерфейс администратора
В профиле администратора реализованы возможности просмотра,
изменения и удаления записей таблиц (Рисунок 3.4.2.1.)
43
Рисунок 3.4.1.12. – Интерфейс администратора.
44
Заключение
В данной выпускной квалификационной работе была разработана
информационная система для организации по продаже комнатных растений.
В ходе выполнения данного дипломного проекта была изучена предметная
область,
описаны
существующие
аналоги
информационных
систем
организаций-конкурентов.
При создании ИС была разработана база данных для хранения информации
о продукции магазина, заказах и пользователях с помощью языка
программирования PHP и программы phpMyAdmin.
В процессе выполнения работы была разработана концептуальная модель
базы данных. С помощью сравнительного анализа было выбрано подходящее
для создания данной ИС программное обеспечение.
Были разработаны качественный, удобный для использования интерфейс с
хорошим дизайном и модуль администрирования для быстрого доступа к
информации, хранящейся в БД.
Результатом дипломной работы является информационная система,
которая обеспечивает следующие задачи:
− Просмотр товаров организации;
− Просмотр контактной информации фирмы, а также условий доставки,
предоставляемых данной организацией;
− Внесение изменений в базу данных.
В процессе практического использования ИС имеет возможность
доработки.
45
Список используемых источников
1. Избачков, Ю.С. Информационные системы: Учебник для вузов/
Ю.С. Избачков, В.Н. Петров. – 2-е изд.; Санкт-Петербург: Питер,
2010. 656 с.
2. Мейер, Э. CSS – Каскадные таблицы стилей. Подробное
руководство. Третье издание; Санкт-Петербург – Москва: СимволПлюс, 2008. 17–24 с.
3. Дэвис, М. Изучаем PHP и MySQL; Санкт-Петербург – Москва:
Символ-Плюс, 2008. 17 с.
4. Флэнаган, Д. JavaScript. Подробное руководство, 6-е издание;
Санкт-Петербург: Символ-Плюс, 2012. 1080 с.
46
Приложение
Листинг заглавной HTML-страницы «HOME»
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">
<title>Plants</title>
<link rel="shortcut icon" href="images/icon.png" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/stylehome.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left">
<img src="images/logo.jpg" class="img-fluid" id="imglogo">
</div>
<div class="col-sm-6 right">
<div class="header2">
<nav class="navbar navbar-light navbar-expand-lg menu2">
<a class="navbar-brand">
<img src="images/logo2.JPG" id="imglogomini">
</a>
<button class="navbar-togglier buts" type="button" datatarget="#my-nav" data-toggle="collapse">
<span class="navbar-toggler-icon">
</span>
</button>
47
<div id="my-nav" class="collapse navbar-collapse justify-contentleft">
<ul class="navbar-nav minimenu">
<li class="nav-item active">
<a class="nav-link" href="home.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">PLANTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="delivery.html">DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT US</a>
</li>
<li class="nav-item">
<a class="navlink" href="cart.html"><img src="images/card4.png" id="cartimg"></a>
</li>
<li class="nav-item">
<a class="navlink" href="profile.html"><img src="images/cat.png" id="cartimg"></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="header">
<nav class="top-menu">
<ul class="menu-main">
48
<li><a href="home.html">HOME</a></li>
<li><a href="index.html">PLANTS</a></li>
<li><a href="delivery.html">DELIVERY</a></li>
<li><a href="about.html">ABOUT US</a></li>
<li>
<a href="cart.html"><img src="images/card2.png" id="cartim
g"></a>
</li>
<li>
<a href="profile.html"><img src="images/cat.png" id="cartim
g"></a>
</li>
</ul>
</nav>
</div>
<div class="view">
<h2>Привет!</h2>
<p>Мы - онлайнмагазин суккулентов, рады тебя видеть. Суккуленты очень изящные и неприх
отливые в уходе растении, что делает их прекрасным компаньоном и просто
чудесным подарком. У нас ты точно найдёшь себе нового хорошего друга.
</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
49
Листинг CSS-файла stylehome.css
.pic {
height: 250px;
width: 250px;
margin: 2px;
}
.header {
width: 100%;
min-height: 20%;
}
.logo {
text-align: center;
}
#imglogo {
height: 200px;
}
#imglogosmall {
display: none;
height: 75px;
margin: auto;
}
.menu-main {
list-style: none;
text-align: center;
margin: 0;
50
padding: 0;
}
.menu-main li {
display: inline-block;
}
.menu-main a {
text-decoration: none;
display: block;
position: relative;
line-height: 61px;
padding-left: 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: Century Gothic;
color: #000000;
transition: .3s linear;
}
.menu-main a:hover {
color: #ffffff;
}
.left {
height: 100vh;
background-color: #bfd9d6;
display: flex;
text-align: center;
justify-content: center;
51
align-items: center;
}
.right {
height: 100vh;
background-color: #997239;
font-family: Century Gothic;
}
.buts {
background: #bfd9d6;
border: none;
}
#cartimg {
width: 40%
}
.text h2 {
padding-left: 10%;
padding-top: 25%;
font-family: Century Gothic;
}
.text p {
width: 80%;
min-height: 100%;
float: left;
padding-left: 10%;
margin: 0;
52
display: flex;
text-align: justify;
justify-content: center;
align-items: center;
height: 100%;
font-family: Century Gothic;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#imglogomini {
width: 100px;
}
a{
text-decoration: none;
display: block;
position: relative;
line-height: 61px;
padding-left: 20px;
font-size: 18px;
letter-spacing: 2px;
font-family: Century Gothic;
color: #000000;
transition: .3s linear;
53
}
.view {
margin-left: 10%;
margin-right: 10%;
margin-top: 15%;
}
.menu2 {
background-color: #bfd9d6;
}
.minimenu {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.collapse,
.container-fluid {
padding: 0;
}
.nav>li>a {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 576px) {
54
.header2 {
display: none;
}
}
@media (max-width: 575px) {
.header {
display: none;
}
.left {
display: none;
}
}
55
Скачать