Содержание:

ВВЕДЕНИЕ

Сегодня рынок игрушек и сопутствующих товаров по мотивам популярных фильмов, мультфильмов, сериалов и разного рода книг – огромен. Компании, имеющие права на персонажей зарабатывают на продаже игрушек больше, чем с самих произведений. Любой поклонник супергероев имеет какую-то вещь, связанную с кумиром. Актёры так же строят карьеру на основе популярных персонажей, и имеют много «мерча». По этому, бизнес-ниша «взрослых» игрушек очень прибыльна: их хотят заполучить как дети, так и взрослые. И самым удобным инструментом популяризации товара является интернет, так как поиск необходимого начинается с запроса информации в поисковых системах.

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

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

Для достижения данной цели необходимо решить следующие задачи:

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

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

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

Руководство магазином осуществляет руководитель организации, в непосредственном подчинении которого находятся бухгалтер, IT инженер и руководитель отдела продаж, у последнего в подчинении двое помощников-консультантов (рис.1).

Рис. 1 – Организационная структура магазина

В обязанности бухгалтера входит работа со всеми финансовыми документами компании, а в обязанности IT инженера компании своевременное обновление информации на сайте и обслуживание парка машин компании.

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

Таким образом, в рассматриваемой организации существуют два основных бизнес-процесса, в которых необходимо использование сайта:

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

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

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

Системы управления базами данных классифицируются по модели данных:

• Иерархические
• Сетевые
• Объектно-ориентированные
• Реляционные

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

Также СУБД подразделяются по способу доступа к базе данных:

Файл-серверные: (Microsoft Access, Paradox, dBase, FoxPro, Visual FoxPro.)

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

Достоинства: низкая нагрузка на процессор файлового сервера.

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

Клиент-серверные: (Oracle, Firebird, Interbase, IBM DB2, Informix, MS SQL Server, Sybase Adaptive Server Enterprise, PostgreSQL, MySQL, Caché, ЛИНТЕР)

Располагаются на сервере вместе с БД и осуществляют доступ к БД непосредственно, в монопольном режиме.

Достоинства: потенциально более низкая загрузка локальной сети; удобство централизованного управления; удобство обеспечения таких важных характеристик как высокая надёжность, высокая доступность и высокая безопасность.

Недостатки: повышенные требования к серверу.

Встраиваемые: (OpenEdge, SQLite, BerkeleyDB, Firebird Embedded, Microsoft SQL Server Compact, ЛИНТЕР)

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

Учитывая необходимость использования базы данных в сети, а также высокие требования к надежности, доступности и безопасности, для решаемой задачи подходят клиент-серверные СУБД.

Из приведенных выше клиент-серверных СУБД была выбрана MySQL, так как:

• Является одной из самых быстрых баз данных из имеющихся на современном рынке
• Является высокопроизводительной и относительно простой в использовании СУБД
• Работает на языке запросов SQL
• Количество строк в таблицах может достигать 50 миллионов
• Сервер позволяет одновременно подключаться неограниченному количеству пользователей
• Возможен и с помощью приложений, поддерживающих ODBC
• Предназначена для работы в сети и может быть доступна через Internet
• Снабжена развитой системой защиты от несанкционированного доступа
• Отлично работает как под управлением самых различных версий UNIX, так и под управлением систем, таких как Windows и OS/2
• Имеет ограниченный размер

Также необходимо выбрать, каким образом будет представлена пользователю форма авторизации. Так как авторизация будет происходить при входе пользователя на сайт, то наиболее логичным является использование языка гипертекстовой разметки HTML с библиотекой стилей CSS и языком программирования JavaScript.

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

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

Основные архитектурные черты:

• Слабая типизация,
• Динамическая типизация,
• Прототипное программирование,
• Автоматическое управление памятью,
• Функции как объекты первого класса.

На рассматриваемый язык оказали влияние многие языки. В самом начале при разработке ставилась цель сделать язык похожим на Java, однако, при этом легким для использования непрограммистами. Язык JavaScript не является собственностью какой-либо компании или организации, что является одним из его отличий от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» – зарегистрированный товарный знак компании Oracle Corporation.

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

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

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

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

• Язык запросов – SQL,
• Система управления базами данных – MySQL,
• Язык гипертекстовой разметки – HTML,
• Язык программирования на стороне клиента – JavaScript,
• Язык программирования на стороне сервера – PHP.

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

Серверная часть программы отвечает за взаимодействие клиентской части программы с базой данных, а также за формирование динамического содержания страниц сайта. В структуре серверной части приложения содержатся три основных модуля (рисунок 2), каждый из которых отвечает за определенную функциональность системы:

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

Рис. 2 – Общая структура серверной части приложения

На рисунке 3 представлено дерево вызова программных модулей, используемых в работе серверной части приложения.

Рис. 3 – Дерево вызова программных модулей

Таблица описания программных модулей (Таблица 1):

Программный модуль	Пакет	Описание
Авторизация	Модуль управления пользователями	Проверяет данные введенные пользователем. При отсутствии пользователя с указанными данными производит перенаправление на страницу регистрации, при наличии пользователя типа «Администратор» производит перенаправление на страницу администратора, при наличии пользователя типа «Обычный пользователь» производит перенаправление на главную страницу.
Регистрация		Добавляет пользователя с введенными регистрационными данными в базу данных.
Добавление данных	Модуль управления данными	Добавляет записи в таблицы базы данных
Редактирование данных		Редактирует записи в таблицах базы данных
Удаление данных		Удаляет записи в таблицах базы данных
Загрузка категорий	Модуль отображения данных	Выбирает категории, которые необходимо отобразить на данной странице из базы данных, и выводит их на экран
Загрузка объектов категории		Выбирает объекты, соответствующей категории из базы данных, и выводит их на экран

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

3.1. Разработка инфологической модели

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

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

Сущности:

• Пользователи
• Категории
• Коллекционные вещи
• Печатная продукция
• Партнёры
• Вопросы/Ответы
• Отзывы

Атрибуты сущностей:

Пользователи:

• Логин
• Пароль
• Дата последнего посещения
• Тип

Категории:

• Название категории
• Краткое описание
• Фотография
• Ссылка на страницу

Коллекционные вещи:

• Название
• Описание
• Категория товара
• Ссылка на фотографию
• Редкость
• Минимальная стоимость

Партнеры:

• Название
• Категория товара
• Фотография
• Краткая информация

Печатная продукция

• Название
• Описание
• Категория товара
• Ссылка на фотографию
• Редкость
• Минимальная стоимость

Вопросы/ответы:

• Идентификационный номер
• Категория
• Вопрос
• Ответ

Отзывы:

• Идентификационный номер
• Категория товара
• Текст
• Оценка

Теперь рассмотрим связи между описанными сущностями (Таблица 2):

Таблица сущностей (Таблица 2):

Сущность		Связь		Сущность
Категории	1	присвоена	n	Коллекционные вещи
	1	присвоена	n	вопрос/ответ
	1	присвоена	n	отзыв
	n	соответствует	n	партнер
	1	присвоена	n	Печатная продукция

Связь «присвоена» представляет собой связь типа «один ко многим», то есть, если услуге/отзыву/вопросу присвоена одна категория, то одной услуге/отзыву/вопросу присвоена только одна категория, в то же время, одна категория может быть присвоена нескольким услугам/отзывам/вопросам. Связь «соответствует» является связью типа «многие ко многим», что означает, что один партнер/музыка может соответствовать нескольким категориям. Точно также, одной категории соответствует несколько партнеров/экземпляров музыки.

На основе приведенных выше данных построена «ER - диаграмма», которая представлена на рисунке 4.

Рис. 4 – ER-диаграмма

3.2. Даталогическое проектирование

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

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

В каждой из представленных ниже таблиц представлены имена столбцов данной таблицы. Красным цветом выделено имя/имена столбца/столбцов, которое является первичным ключом для данной таблицы.

Таблица 3 – Пользователи

Логин

Пароль

Тип

Дата последнего посещения

Таблица 4 – Категории

Название категории

Краткое описание

Фотография

Ссылка на страницу

Таблица 5 – Коллекционные вещи

Название

Описание

Категория

Ссылка на фотографию

Редкость

Минимальная стоимость

Таблица 6 – Партнеры

Название

Категория

Краткая информация

Фотография

Таблица 7 – Печатная продукция

Название

Описание

Категория

Ссылка на фотографию

Редкость

Минимальная стоимость

Таблица 8 – Вопросы/ответы

Идентификационный номер

Категория услуги

Вопрос

Ответ

Таблица 9 – Отзывы

Идентификационный номер

Категория услуги

Оценка

Текст

На основе представленных выше таблиц можно построить схему разрабатываемой базы данных (рисунок 5).

Рис. 5 – Схема базы данных

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

4.1. Общее описание

Общая структура клиентской части приложения представлена на рисунке 6.

Рис. 6 – Структура клиентской части приложения

Клиентская часть приложения делится на три части с разными настройками доступа:

• Гостевая часть (светло серый фон) – данная часть состоит из страницы авторизации и страницы регистрации, которые доступны всем посетителям сайта (зарегистрированным или незарегистрированным),
• Административная часть (темно серый фон) – данная часть состоит из страницы администратора, а также страниц добавления, редактирования и удаления информации, которые доступны только администратору сайта,
• Пользовательская часть (белый фон) – данная часть состоит из страниц сайта, представляющих основную информацию об услугах, которые доступны только зарегистрированным пользователям.

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

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

После авторизации обычный пользователь попадает на главную страницу (рисунок 7), которая является единственной страницей первого уровня интерфейса обычного пользователя.

С главной страницы пользователь может попасть на любую из страниц второго уровня:

• О нас (рис. – 8)
• Коллекционные вещи (рис. – 9)
• Печатная продукция (рис. – 10)
• Партнеры (рис. – 11)
• Отзывы (рис. – 12)
• Вопросы/Ответы (рис. – 13)
• Вход/Регистрация (рис. – 14)

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

Страницы, на которых представлены объекты, относящиеся к одной категории, являются страницами третьего уровня.

Рис. 7 – Главная страница интерфейса «Обычный пользователь» Рис. 8 – О нас Рис. 9 – Коллекционные вещи Рис. 10 – Печатная продукция Рис. 11 – Партнеры Рис. 12 - Отзывы Рис. 13 - Вопросы

Рис. 14/15 – Вход/Регистрация

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

После авторизации как администратор, открывается новый интерфейс.

Интерфейс администратора (рисунок 16) предназначен для управления данными в базе данных. На главной странице интерфейса администратора представлены ссылки, каждая из которых открывает соответствующую форму для редактирования, добавления и удаления данных.

Рис. 16 – Пример формы редактирования

Заключение

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

Обоснован выбор следующих средств разработки:

• Язык запросов – SQL,
• Система управления базами данных – MySQL,
• Язык гипертекстовой разметки – HTML,
• Язык программирования на стороне клиента – JavaScript,
• Язык программирования на стороне сервера – PHP.

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

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

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

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

В результате выполнения работы достигнута её основная цель – разработан сайт магазина игрушек “Geek Toys”.

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

1. Куликов Г.Г. Набатов А.Н. Речкалов А.В. Автоматизированное проектирование информационно-управляющих систем. Системное моделирование предметной области.. — Уфа: Уфимский государственный авиационный технический университет, 1998. — 104 с. — ISBN 5-89611-190-0.
2. Мейер, Б. Инструменты, алгоритмы и структуры данных / Б. Мейер. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016.
3. Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - СПб.: БХВ - Петербург., 2010. - 900 с.
4. Богданов, М.Р. Перспективные языки веб-разработки / М.Р. Богданов. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
5. Савельева, Н.В. Язык программирования PHP / Н.В. Савельева. - 2-е изд., испр. - М. : Национальный Открытый Университет «ИНТУИТ», 2016
6. Никсон, Р. Создаем динамические web-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон. - П.: Питер, 2011. - 496 с.
7. Томсон, Л. Разработка Web-приложений на РНР и MySQL/ Л. Томсон. - М.: ДиаСофтЮП, 2003. - 672 с.
8. PHPForum [Электронный ресурс] /форум.- Россия, 2003. - Режим доступа: http://phpforum.ru. - Дата доступа: 09.02.2012.
9. Харрис, Э. PHP/MySQL для начинающих / Э. Харрис. - М.: Кудиц - образ, 2005.
10. Парк, Д. PHP и MySQL. Библия программиста / Д. Парк, С. Суэринг. - Диалектика, 2010. - 912 с.
11. Гущин А.Н. Базы данных: учебник. - М.: Директ-Медиа, 2014. - 266с
12. Дейт К. Дж. Введение в системы баз данных = Introduction to Database Systems. — 8-е изд. — М.: «Вильямс», 2006. — 1328 с. — ISBN 0-321-19784-4.
13. Peter Pin-Shan Chen «The Entity-Relationship Model — Toward a Unified View of Data» (англ.) // ACM Transactions on Database Systems (TODS) : Сб. — Нью-Йорк: ACM, 1976. — Vol. 1. — P. 9-36. — ISSN 0362-5915. — DOI:10.1145/320434.320440.
14. Когаловский М. Р. Энциклопедия технологий баз данных. — М.: Финансы и статистика, 2002. — 800 с. — ISBN 5-279-02276-4.
15. Федоренко, Е.В.Базы данных: учебное пособие / Е.В. Федоренко, А.С. Самардак. – М. : Находка, 2016. – 116 с.
16. Гарсиа-Молина Г., Ульман Дж., Уидом Дж. Системы баз данных. Полный курс = Database Systems: The Complete Book. — Вильямс, 2003. — 1088 с. — ISBN 5-8459-0384-X.
17. MySQL 5.7 Reference Manual [Электронный ресурс] // Официальный сайт MySQL URL: https://dev.mysql.com/doc/refman/5.7/en/
18. Учебное пособие по MySQL [Электронный ресурс] URL:http://www.mysql.ru/docs/man/Tutorial.html
19. Триггеры в MySQL [Электронный ресурс] URL: https://habrahabr.ru/sandbox/65316/
20. Date, C. J. Database in Depth. — O'Reilly, 2005. — 240 с. — ISBN 0-596-10012-4.

Приложения

Фрагмент кода модуля отображения данных, который получает данные из таблицы базы данных и выводит их на страницу сайта:

<?php

$host='localhost'; // имя хоста

$database='ancifiox_bd'; // имя базы данных

$user='ancifiox_bd'; // имя пользователя на хосте

$pswd='vepZ9EaN'; // пароль

$dbh = mysql_connect($host, $user, $pswd) or die("Не могу соединиться с MySQL.");

mysql_select_db($database) or die("Не могу подключиться к базе.");

mysql_set_charset('utf8');

mysql_query("set_client = 'utf8'");

mysql_query("set character_set_results = 'utf8'");

mysql_query("set collation_connection = 'utf8'");

mysql_query("SET NAMES cp1251");

$query = "select * from musics";

$sql = mysql_query($query);

while ($result = mysql_fetch_array($sql)) {

echo "<br>Название: {$result['Name']} <br> Исполнитель: {$result['Singer']} <br> Год выпуска: {$result['Year']} <br> Категория: {$result['Category']} <br>";

echo ('<br>');

}

?>

Фрагмент кода модуля управления пользователями, который добавляет в базу данных регистрационные данные нового пользователя:

<script language="php">

$host='localhost:3306'; // имя хоста

$database='spartal'; // имя базы данных

$user='root'; // имя пользователя

$pswd='23021982'; // пароль

$dbh = mysql_connect($host, $user, $pswd) or die("Не могу соединиться с MySQL.");

mysql_select_db($database) or die("Не могу подключиться к базе.");

$query = "INSERT INTO users (username, name, password) VALUES (" + $_POST['username'] + ","+ $_POST['name'] + "," + $_POST['password'] + ")";

mysql_query($query);

</script>

Успешно отправлено!

Таблица хранящая логины и пароли.

На сайте присутствует реклама и новости.

const canvasSlideShow = document.getElementById("canvasSlideShowId");

const ctxSlideShow = canvasSlideShow.getContext("2d");

const sld = document.getElementById("slideShow");

let news1 = " В мае в нашем магазине скидки на все комиксы и книги! Упаковка бесплатно! Успейте забрать лучшие комиксы мира по антикризисным ценам!";

let news2 = " Только в мае! При покупке назови кодовое слово ГикСайт, и получи бесплатный комикс наших партнёров на выбор! Дюжина десятков разных историй от компании РосКомикс - Мы тоже можем!";

let selector = 1;

function slide() {

ctxSlideShow.clearRect(0, 0, canvasSlideShow.width, canvasSlideShow.height);

if (selector === 1) {

//ctxSlideShow.strokeText(news1, 10, 10, 700);

sld.textContent = news1;

selector = 2;

} else {

//ctxSlideShow.strokeText(news2, 10, 10, 700);

sld.textContent = news2;

selector = 1;

}

ctxSlideShow.stroke();

}

setInterval(slide, 10000);