1 2
Содержание
Введение
1. Изучение предметной области.
1.1 Описание предметной области
1.2 Цель и задачи разработки
1.3 Обзор аналогов программного обеспечения
1.4 Требования к веб-приложению
2. Проектирование веб-приложения
3. Реализация серверной части
3.1 Обоснование выбора СУБД
3.2. Составление реляционных отношений
4. Реализация клиентской части
4.1 Обоснование выбора средства разработки
4.2 Выбор технологии разработки
4.3 Разработка интерфейса веб-приложения
4.4 Выбор редактора кода и менеджера баз данных
4.5 Реализация интерфейса веб-приложения
5. Тестирование и отладка программного обеспечения
6. Экономическая часть
Анализ экономической эффективности программного продукта
Заключение
Список литературы
Приложение А
Приложение Б
Приложение В
Приложение Г
ВВЕДЕНИЕ
Интернет-магазин — это магазин, «витрина» которого расположена в сети интернет и который дает возможность заказать товар через интернет.
В Интернет-магазине могут быть реализованы практически любые торговые схемы: торговля со склада и на заказ, торговля с частными лицами и с организациями, торговля вещественными и цифровыми товарами, услугами, информацией и т.д. На сайте магазина обычно представлен подробный каталог товаров с ценами, на основе которого пользователь формирует свой заказ.
Заказывая товары в Интернет-магазине, вы можете получать их по почте или с курьером, а оплачивать непосредственно при получении или также через Интернет.
Актуальность выбранной темы заключается в том, что в настоящее время миллионы людей ежедневно, не выходя из дому, покупают различные товары в электронных магазинах. Поиск клиентов является по-прежнему основной задачей любого бизнеса.
Новизной работы является разработка полноценного интернет-магазина с использованием AJAX технологий, собственной системой безопасности, а так же собственной системой управления содержимым.
Практическая значимость – данный проект может быть внедрён в одну из организаций для коммерческого использования. Объектом исследования выступает интерфейс информационной системы электронного магазина.
Целью выполнения дипломного проекта является разработка сайта интернет-магазина по продаже компьютерной техники. В нем должен быть необходимый перечень товара, а также интуитивно понятный пользователю интерфейс.
Изучение предметной области.
Описание предметной области
В наличии есть условный магазин «ООО IT-shop», который занимается продажей компьютерной техники. Данный магазин хотел бы увеличить свой доход с продаж. Требуется разработать WEB — сайт, основной задачей, которого будет, являться привлечение новых покупателей и получение прибыли с продаж.
Данное программное средство могут использовать неограниченное количество пользователей. Покупателю при регистрации необходимо указать следующие данные:
— ФИО;
— логин (имя пользователя);
— почту;
— пароль;
Администратору и покупателю при авторизации необходимо ввести:
— логин;
— пароль;
Если забыли свой пароль нужно ввести свой логин (имя пользователя) или электронную почту. На почту придёт уведомление о создании нового пароля. Перейдя по ссылке «Нажмите здесь, чтобы сбросить свой пароль» вы будете перенаправлены на страницу создания нового пароля, где нужно будет ввести новый пароль, подтвердить новый пароль и нажать кнопку «Сохранить».
Администратору при добавлении товара на сайт необходимо указать:
— название;
— стоимость;
— описание;
— артикул;
— изображение;
— бренд;
— категорию;
— статус остатка;
При изменении товара – администратору откроется окно с изменениями данных, где будут поля с записями данного продукта.
При выборе товара покупателем и нажатием кнопки «В корзину», товар добавляется в корзину.
После добавления покупателем товара в корзину и нажатием кнопки «Оформить заказ» — данные отправляются в базу данных о текущем заказе.
Интернет-магазин предоставляет интерфейс клиентам магазина для просмотра каталога и заказа компьютерной техники. Заказ осуществляется путем заполнения формы. Выбранный товар сохраняется в Корзине.
Оформить заказ на самовывоз Вы можете на сайте, придя в магазин, пункт интернет-магазина/интернет-гипермаркет.
При заказе на сайте Вы выбираете удобный Вам магазин, пункт интернет-магазина, в котором хотите самостоятельно забрать заказ.
О готовности Вашего заказа Вы будете уведомлены по электронной почте. Также Вы всегда самостоятельно можете проверить статус заказа в Личном кабинете или электронной почте.
Сформированный заказ комплектуется работником магазина.
Вы приезжаете в выбранную Вами точку самовывоза. Сообщаете номер заказа, оплачиваете и забираете свой заказ.
Перед тем как ехать в точку самовывоза, убедитесь в том, что у Вас есть номер Вашего заказа. Узнать его Вы можете из письма заказа.
Цель и задачи разработки
Целью данной дипломной работы является разработка интернет-магазина компьютерной техники «IT-shop».
Для достижения поставленной цели, в работе будут решены следующие виды задач:
- изучение существующей организации интернет-магазинов и выявление ее недостатков;
- обоснование необходимости создания Интернет-магазина;
- проведение анализа и выбор Интернет-технологий для разработки Интернет-магазина;
- разработка динамических web-страниц Интернет-магазина, управляемых базой данных;
- оценка эффективности выполненной разработки.
Обзор аналогов программного обеспечения
Принимая решение о создании собственного представительства, перед руководителем лежит выбор: создать свой интернет-магазин, воспользоваться существующими разработками.
Чтобы определится с этим тяжелым выбором, был произведен анализ магазинов схожих тематик и определится, соответствуют ли они требованиям.
Интернет-магазин магазина компьютерной техники «AliExpress» (https://best.aliexpress.ru)
В соответствии с рисунком 1 показана главная страница магазина «AliExpress»
Рисунок 1 – Главная страница интернет-магазина компьютерной техники «AliExpress»
Заходя на главную страницу, мы видим:
- общую информацию о сайте;
- слева можно увидеть категории товаров для удобства навигации по сайту;
- акции, которые действуют в данный момент в магазине;
Заказать товар может любой желающий и с регистрацией по телефону – звонок бесплатный.
Рисунок 2 – Главная страница интернет-магазина компьютерной техники «М.видео»
Интернет-магазин магазина компьютерной техники (https://www.mvideo.ru)
В соответствии с рисунком 2 представлена главная страница интернет-магазина компьютерной техники «М.видео».
Перейдя на сайт, перед покупателем магазина «М.видео» предстает главная страница, где он может увидеть:
- телефон магазина;
- сверху можно увидеть каталог товаров, статус заказа, корзина, сравнение, избранное;
- снизу можно увидеть товары со скидкой.
Для того чтобы осуществить заказ, посетитель может зарегистрироваться себя как физическое лицо или юридическое лицо или может зайти как гость после этого нужно оставить свои данные, а именно ФИО, E-mail и номер телефона, способ доставки и способ оплаты.
Рисунок 3 – Главная страница интернет-магазина компьютерной техники «Эльдорадо»
Интернет-магазин компьютерной техники «Эльдорадо» (https://www.eldorado.ru)
В соответствии с рисунком 3 можно увидеть главную страницу интернет-магазина компьютерной техники «Эльдорадо».
Покупатель, открывая главную страницу, может видеть:
- регистрация и вход;
- слева находятся категории товаров;
- сверху находятся телефон магазина, поиск по сайту и корзина.
Рисунок 4 – Главная страница интернет-магазина компьютерной техники «РЕГАРД»
Интернет-магазин компьютерной техники «РЕГАРД» (https://www.regard.ru)
В соответствии с рисунком 4 можно увидеть главную страницу интернет-магазина компьютерной техники «РЕГАРД».
Покупатель, открывая главную страницу, может видеть:
- личный кабинет;
- слева находятся категории товаров по типам и по брендам;
- сверху находятся телефоны магазина, время работы, поиск по сайту, корзина и проверка заказа.
В таблице 1 представлена сравнительная характеристика исследуемых аналогов.
Таблица 1 – Сравнительный анализ аналогов интернет-магазинов компьютерной техники.
| Параметр | Интернет-магазин «AliExpress» | Интернет-магазин «М.видео» | Интернет-магазин «Эльдорадо» | Интернет-магазин «РЕГАРД» |
| Доступ посетителю круглосуточно | + | + | + | + |
| Ассортимент | + | + | + | + |
| Доставка | + | + | + | + |
| Удобство навигации | — | + | + | — |
| Способ оплаты | + | + | + | + |
| Описание товара | — | + | + | + |
| Специальные предложения и акции | + | + | + | — |
| Поддержка часто используемых браузеров | + | + | + | + |
| Версия сайта для слабовидящих | — | — | — | — |
При анализе известных аналогов было, что сравниваемые в ней интернет-магазины имеют незначительные различия. На мой взгляд, эти интернет-магазины не полностью соответствуют требованиям разрабатываемого интернет-магазина, поскольку у этих интернет-магазинов есть недостатки, связанные с интерфейсом, которые затрудняют использование этих ресурсов, что отрицательно влияет на их прибыль.
Данная ситуация способствует принятию решения о разработке и внедрении нового интернет-магазина «IT-shop».
С помощью внедрения интернет-магазина у Заказчика появляется возможность увеличить свою прибыль, а также овладеть большей аудиторией.
Требования к веб-приложению
Главным недостатком всех аналогов является отсутствие версии сайта для слабовидящих. Разрабатываемая система должна обладать данными функциями. Функционал у всех приложений почти одинаковый и возможность выбрать.
Рассматривая существующие аналоги, можно выделить необходимые к реализации отличительные черты сервиса:
- должна быть реализована система хранения и управления учетными записями пользователей в целевой базе данных. Это требуется для соответствия законам РФ в области защиты информации и персональных данных, а также, для обеспечения локального развертывания на территории учреждения.
- должен быть реализован ввод и обновление данных о товарах.
- максимально автоматизирован процесс подсчета стоимости.
- должна быть организована обратная связь с работниками магазина для предоставления жалоб и пожеланий через сервис работы с клиентами или связи через телефон и электронную почту.
Проектирование веб-приложения
Контекстная диаграмма — вид IDEF0-диаграммы. Это диаграмма, расположенная на вершине древовидной структуры диаграмм, представляющая собой самое общее описание системы и ее взаимодействие с внешней средой (как правило, здесь описывается основное назначение моделируемого объекта). Контекстная диаграмма состоит из одного блока, описывающего функцию верхнего уровня, ее входы, выходы, управления, и механизмы, вместе с формулировками цели модели и точки зрения, с которой строится модель.
Контекстная диаграмма представлена на рисунке 5.
Рисунок 5. Контекстная диаграмма
Основные информационные потоки:
Входящие потоки:
- Информация о клиенте;
- Каталог товаров;
Управляющие потоки:
- Закон РФ о защите прав потребителей;
Ресурсные потоки:
- Клиент;
- Менеджер;
- Администратор.
Выходящие потоки:
- Накладная
Созданная модель описывает деятельность интернет-магазина.
Объектом моделирования является аптека.
После описания системы в целом проводится разбиение ее на крупные фрагменты. Этот процесс называется функциональной декомпозицией, а диаграммы, которые описывают каждый фрагмент и взаимодействие фрагментов, называются диаграммами декомпозиции.
После декомпозиции контекстной диаграммы проводится декомпозиция каждого большого фрагмента системы на более мелкие и так далее, до достижения нужного уровня подробности описания. Так достигается соответствие модели реальным процессам на любом и каждом уровне модели. Синтаксис описания системы в целом и каждого ее фрагмента одинаков во всей модели.
После декомпозиции контекстной диаграммы «Интернет-магазин» возникло пять диаграмм декомпозиции:
- Просмотр каталога;
- Авторизация покупателя;
- Заказ покупателя;
- Наличие составляющих;
- Расчет стоимости.
В соответствии с рисунком 6 представлена диаграмма декомпозиции.
Рисунок 6. Диаграмма декомпозиции
Далее в соответствии с рисунком 7 представлена диаграмма процесса, на которой имеется пользователи «Клиент», «Менеджер» и «Администратор».
При заходе на сайт, клиенту доступно просмотр каталога, после чего выбранный товар он может добавить в корзину. Для того чтобы совершить заказ данного товара необходимо зарегистрироваться или авторизоваться.
После успешной авторизации, покупатель может оформить заказ.
При авторизации менеджера на сайте, ему доступен просмотр каталога и Панель Менеджера, в которой возможно удалять, добавлять, редактировать товар на сайте.
При авторизации администратора на сайте, ему доступен просмотр каталога и Панель Администратора, в которой возможно удалять, добавлять, редактировать товар на сайте.
Рисунок 7. Диаграмма процесса «Работа с клиентами» в нотации «Процедура»
Согласно описанию интернет-магазина, можно выделить следующих действующих лиц: клиент, менеджер и администратор.
Далее необходимо определить варианты использования системы и дать описание каждому из них:
- Оформление заказа – можно оформить заказ, который представлен в каталоге, последующим добавлением его в корзину;
- Отправка сообщений на Email – пользователь может отправить сообщение на почту с интересующим вопросом;
- Просмотр каталога – на сайте имеется товар, который содержит информацию о нем (название, старая цена, новая цена, информация о скидке товара);
- Редактирование товара – менеджер редактирует товары на сайте, при помощи админ – панели;
- Добавление товара – добавление товара на сайт;
- Удаление товара – удаление товара с сайта;
- Ответ на сообщение от покупателя – администратор, при получении на почту сообщения от покупателя – отвечает на него;
- Добавление пользователей – добавление нового пользователя;
- Удаление пользователей – удаление пользователя;
- Просмотр заказов – просмотреть заказы можно в личном кабинете клиента, а также в админ – панели администратора и менеджера;
- Изменение пароля – клиент может изменить пароль в личном кабинете;
- Редактирование профиля – клиент может редактировать свой профиль по своему усмотрению;
- Изменение статуса заказа – администратор или менеджер может изменить статус заказа;
- Подтверждение заказа – администратор подтверждает выполненный заказ;
- Отмена заказа – администратор может отменить заказ.
В соответствии с рисунком 8 представлена диаграмма вариантов использования.
Рисунок 8. Диаграмма вариантов использования предметной области «Интернет-магазина»
Диаграмма классов — структурная диаграмма языка моделирования UML, демонстрирующая общую структуру иерархии классов системы, их коопераций, атрибутов (полей), методов, интерфейсов и взаимосвязей между ними. Широко применяется не только для документирования и визуализации, но также для конструирования посредством прямого или обратного проектирования.
Основными элементами являются классы и связи между ними. Классы характеризуются при помощи атрибутов и операций.
Атрибуты описывают свойства объектов класса. Большинство объектов в классе получают свою индивидуальность из-за различий в их атрибутах и взаимосвязи с другими объектами. Имя атрибута должно быть уникально в пределах класса.
Операция есть функция или преобразование. Операция может иметь параметры и возвращать значения.
В соответствии с рисунком 9 представлена диаграмма классов для «Интернет-магазина».
Рисунок 9. Диаграмма классов предметной области «Интернет-магазин»
В системе «Интернет-магазин» — существуют несколько подсистем, в которых имеются функции, выполняемые этой подсистемой.
Подсистема оформления заказов включает в себя следующие функции:
- предоставление каталога;
- добавление в корзину;
- оформление заказа.
Подсистема редактирования товаров на сайте включает в себя следующие функции:
- добавление;
- редактирование;
- удаление.
Подсистема безопасности включает в себя следующие функции:
- регистрация;
- авторизация;
- выход из личного кабинета.
В соответствии с рисунком 10 показана структурная схема программного обеспечения «Интернет-магазин».
Рисунок 10. Структурная схема программного обеспечения «Интернет-магазин»
Функциональная схема – это схема взаимодействия компонентов программного обеспечения с описанием информационных потоков, состава данных в потоках и указанием используемых файлов и устройств.
В соответствии с рисунком 11 представлена функциональная схема, в ней изображен процесс от предоставления информации о имеющихся товарах до реализации данного заказа.
При открытии интернет-магазина выполняется функция, выводящая на экран информацию каталоге.
Если покупатель нашел товар, который хочет купить, то он его оформляет как заказ и информация об этом заказе записывается в базу данных. После чего работники склада выполняют свои функции и обрабатывают заказ.
Рисунок 11. Функциональная схема программного обеспечения «Интернет-магазин»
Диаграмма деятельности — UML-диаграмма, на которой показаны действия, состояния которых описаны на диаграмме состояний. Диаграммы деятельности используются при моделировании бизнес-процессов, технологических процессов, последовательных и параллельных вычислений.
UML — унифицированный язык моделирования — это система обозначений, которую можно применять для объектно-ориентированного анализа и проектирования. Его можно использовать для визуализации, спецификации, конструирования и документирования программных систем.
В соответствии с рисунком 12 представлена диаграмма деятельности, где показан процесс оформления заказа.
Если покупатель нашел в просмотренном каталоге нужный товар, то он добавляет его в корзину, но для этого необходимо авторизоваться. На странице с корзиной, где имеются уже добавленные товары – покупатель, оформляет заказ, после чего рядом с заказанным товаром находится статус о товаре, где информирует покупателя о его готовности к выдаче со склада.
Рисунок 12. Диаграмма деятельности для покупателя
В соответствии с рисунком 13 показана диаграмма деятельности для менеджера, которая отображает изменение информации о товаре на сайте.
Рисунок 13. Диаграмма деятельности для менеджера
Диаграмма последовательности — UML-диаграмма, на которой для некоторого набора объектов на единой временной оси показан жизненный цикл объекта (создание-деятельность-уничтожение некой сущности) и взаимодействие актеров (действующих лиц) информационной системы в рамках прецедента.
Клиент, при заходе на сайт заказывает товар, после чего идет оформление заказа. Когда оформление заказа прошло успешно в историях заказа отображается статус заказа, и если он информирует о его готовности клиента, то можно идти к пункту выдачи товара, чтобы его оплатить и забрать.
В соответствии с рисунком 14 показана диаграмма последовательности для моделирования операции «Оформления заказа»
Рисунок 14. Диаграмма последовательности для моделирования операции оформления заказа
1 2