РАЗРАБОТКА ИНТЕРНЕТ-МАГАЗИНА Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004

Федотов В.А. студент 4 курса факультет «Информационные системы

и технологии»

Северный Арктический Федеральный Университет Высшая школа информационных технологий и

автоматизированных систем Россия, г. Архангельск

РАЗРАБОТКА ИНТЕРНЕТ-МАГАЗИНА

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

Ключевые слова: Разработка, веб-приложения, интернет-магазин, asp.net.

Fedotov V. A. student 4 year

faculty "Information Systems and Technology " Northern Arctic Federal University Graduate School of Information Technology and Automated Systems Russia, Arkhangelsk

DEVELOPMENT OF AN ONLINE STORE

Annotation: This article describes how to develop an online store using the asp.net web application development platform.

Keywords: Development, web applications, online store, asp.net.

1 ПРОЕКТИРОВАНИЕ МОДУЛЕЙ РЕШЕНИЯ

1.1 Выбор и обоснование варианта архитектуры решения

Существует множество различных шаблонов проектирования, например:

- MVC;

- adapter;

- decorator.

Для нашего интернет-магазина будем использовать шаблон MVC, потому что шаблон проектирования MVC предполагает разделение данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: Модель, Представление и Контроллер - таким

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

Рисунок 1 - Схема шаблона проектирования МУС

Модель предоставляет данные и методы работы с ними: запросы в базу данных, проверка на корректность. Модель не зависит от представления (не знает как данные визуализировать) и контроллера (не имеет точек взаимодействия с пользователем), просто предоставляя доступ к данным и управлению ими.

Представление отвечает за получение необходимых данных из модели и отправляет их пользователю. Представление не обрабатывает введённые данные пользователя.

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

Проектирование системы состоит из нескольких модулей: база данных (БД) и пользовательский интерфейс.

1.2 Проектирование базы данных

ЕЯ-диаграмма (диаграмма «сущность-связь») для разрабатываемого интернет-магазина представлена на рисунке 2.

Рисунок 2 - ЕЯ-диаграмма

На основе ЕЯ-диаграммы создадим словарь данных для более простой и удобной работы с базой данных. В нем подробно опишем каждую таблицу. Словарь данных представлен в таблицах 1-8.

Таблица 1 - Характеристика сущности «Детали заказа»

Название атрибута Описание Тип данных Комментарий

id_orderDetail id_детали_заказа INT NOT NULL

id_order id_заказ INT NOT NULL

id_product id_товар INT NOT NULL

count количество INT

price цена DOUBLE

Таблица 2 - Характеристика сущности «Заказ»

Название атрибута Описание Тип данных Комментарий

id_order id_заказ INT NOT NULL

id_user id пользователи INT NOT NULL

date_order дата_заказа DATETIME

ready_to_delivery готовность к отправке BOOL

order_status статус_заказа STRING

payment_status статус оплаты STRING

payment_date дата_оплаты DATETIME

phone number номер_телефона STRING

city город STRING

region область STRING

post_code индекс STRING

name имя STRING

Таблица 3 - Характеристика сущности «Пользователи»

Название атрибута Описание Тип данных Комментарий

id_user id пользователи INT NOT NULL

name имя STRING

email почта STRING

password пароль STRING

phone number номер_телефона STRING

address адрес STRING

city город STRING

region область STRING

post_code индекс STRING

Таблица 4 - Характеристика сущности «Корзина»

Название атрибута Описание Тип данных Комментарий

id_basket id корзины INT NOT NULL

id_user id пользователи INT NOT NULL

id_product id_товары INT NOT NULL

count количество INT

Таблица 5 - Характеристика сущности «Поставщик»

Название атрибута Описание Тип данных Комментарий

id_provider id поставщик INT NOT NULL

name имя STRING

address адрес STRING

city город STRING

region область STRING

post_code индекс STRING

phone number номер_телефона STRING

authorize авторизация BOOL

Таблица 6 - Характеристика сущности «Товары»

Название атрибута Описание Тип данных Комментарий

id_product id_товары INT NOT NULL

name имя STRING

description описание STRING

manufacturer производитель STRING

price цена DOUBLE

image изображение STRING

id_category id категории INT NOT NULL

id_model id_модель INT NOT NULL

id_provider id поставщик INT NOT NULL

Таблица 7 - Характеристика сущности «Модель»

Название атрибута Описание Тип данных Комментарий

id_model id_модели INT NOT NULL

name название STRING

Таблица 8 - Характеристика сущности «Категории»

Название атрибута Описание Тип данных Комментарий

id_catogory id категории INT NOT NULL

name название STRING

1.3 Проектирование пользовательского интерфейса

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

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

Рисунок 3 - Макет главной страницы

Макеты регистрации и авторизации изображены на рисунках 4 и 5 соответственно.

Рисунок 4 - Макет окна регистрации

Рисунок 5 - Макет окна авторизации

Макет добавления товаров изображен на рисунке 6.

Рисунок 6 - Макет окна добавления товаров

При нажатии на кнопку «Подробнее», рисунок 3, открывается окно для добавления товара в корзину, изображенное на рисунке 7.

Рисунок 7 - Макет окна добавления товара в корзину

Макет отображения товара в корзине изображен на рисунке 8.

Рисунок 8 - Макет окна отображения товара в корзине

2 РЕАЛИЗАЦИЯ

2.1 Создание базы данных

Для начала установим SQL Server Express и Microsoft SQL Server. При открытии Microsoft SQL Server необходимо произвести соединение с сервером в соответствии с рисунком 9.

Рисунок 9 - Соединение с сервером

Для подключения СУБД к среде разработки необходимо в Microsoft Visual Studio открыть «Обозреватель решений» и открыть файл «appsetting.json» и прописать код для подключения к базе данных, в соответствии листингом 1.

Листинг 1 - Подключение к базе данных_

"ConnectionStrings": {

"DefaultConnection": "Server=DESKTOP-2DN90T9\\SQLEXPRESS;Database=StoreCaseTop;Trusted_Connection=True;Mu ltipleActiveResultSets=true"

Для создания таблиц в базе данных будем использовать новый класс, например, «Category.cs», листинг 2.

Листинг 2 - Создание переменных для таблицы Category_

public class Category {

[Key]

public int Id { get; set; }

[Display(Name = "Category Title")]

[Required]

[MaxLength(50)]

public string Title { get; set; }

}

Потом переходим в меню «Инструменты» выбираем «Диспетчер пакетов NuGet», а затем «Консоль диспетчера пакетов». В открывшейся консоли прописываем «add-migration AddCategoryToDb». После этого Visual Studio автоматически сгенерирует класс миграции. И в завершении чтобы выполнить миграцию, применим этот класс, набрав в той же консоли команду «update-database». Остальные таблицы созданы аналогичным образом.

После создания БД перейдем к созданию веб-сайта.

2.2 Создание интернет-магазина

Для начала необходимо создать новый проект в Visual Studio, используя шаблон «Веб-приложение ASP.NET Core». При загрузке открывается страница, представленная на рисунке 10.

Рисунок 10 - Стартовая страница

На данной странице можно пройти авторизацию, регистрацию и просмотреть имеющиеся товары.

Метод отображения товаров представлен в листинге 3.

Листинг 3 - Метод отображения товаров_

@model IEnumerable<StoreCase.Models.Product> <br /> <br /> <br />

<div class="row pb-3 backgroundWhite">

@foreach (var product in Model) {

<div class="col-lg-3 col-md-6"> <div class="row p-2">

<div class="col-12 p-lg-1" style="border:1px solid white; border-radius: 5px; ">

<div class="card" style="border:0px;

background-color: rgba(255, 255, 255, 0.5);" >

<img src="@product.Image" class="card-img-

top rounded" />

<div class="pl-1"> <p></p>

<p class="card-title h5"><b

style="color:black">@product.Title</b></p>

<p class="card-title text"

style="color:black">Производитель: <b>@product.Manufacturer</b></p>

</div>

<div style="padding-left:5px;">

<p style="color:black">Цена: <strike><b class="card-title text"

style="color:black">@product.ListPrice.ToString("0.00") P</b></strike></p>

</div>

<div style="padding-left:5px;">

<p style="color:black">HoBaH цена: <b class="card-title text"

style="color:black">@product.Price.ToString("0.00") P</b></p>

</div> </div> <div>

<a asp-action="Details"

style="color:white" class="btn btn-dark form-control" asp-route-id="@product.Id">Подробнее</a>

</div> </div> </div>

</div> }

</div>

Окна регистрации и авторизации представлены на рисунках 11 и 12 соответственно. Логика работы регистрации представлена в приложении А. Логика работы авторизации представлена в приложении Б.

StoreCaw ишчп Ц

Регистрация

нового аккаунта для пользователя

Иыа

Почта

используя другие сервисы

Facctedc Googr

fVje«

Репюроция

Рисунок 11 - Окно регистрации

Авторизация

используя свои данные

используя другие сервисы

ЭДып» napoib?

мгмюг* («nglr

• »

Рисунок 12 - Окно авторизации

2.3 Описание работы интернет-магазина

После авторизации, например, Администратором, появляется возможность добавлять товары в корзину. Нажимаем кнопку подробнее, шсунок 13.

Рисунок 13 - Добавление товара в корзину

После открывается страница, изображенная на рисунке 14 с описанием товара и возможностью выбрать необходимое количество

Рисунок 14 - Выбор количества товара

При покупке, например, более 50 товаров одного вида, цена будет ниже. Добавленный товар в корзине представлен на рисунке 15.

Рисунок 15 - Отображение товара в корзине

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

Рисунок 16 - Редактирование данных для отправки

Для оплаты воспользуемся сервисом «Stripe», который позволяет производить пробную оплату, вводя определенные данные банковской карты. При нажатии на кнопку «Оплата заказа» откроется окно, представленное на рисунке 17, где необходимо ввести данные для оплаты.

Рисунок 17 - Оплата товара

После успешной оплаты появится сообщение об успешной оплате, представленное на рисунке 18.

Рисунок 18 - Успешная оплата товара

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

Рисунок 19 - Список товаров

Окно, в котором происходит добавление товара представлено на рисунке 20.

Рисунок 20 - Добавление нового товара

Добавление категорий и моделей, а также их отображение аналогично товарам.

Также предусмотрена возможность управления заказами для администратора. Созданный и оплаченный ранее заказ представлен на рисунке 21._

Рисунок 21 - Отображение списка заказов

После отправки товара заказ получает статус «Завершенный». Данный параметр меняется в настройках заказа, которые изображены на рисунке 22.

»

<<гваи\

Рисунок 22 - Изменение статуса заказа

После произведенный действий заказ получает статус «Завершенные». Изменение статуса изображено на рисунке 23.

Рисунок 23 - Получение заказом статуса «Завершенные.»

3 ТЕСТИРОВАНИЕ

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

Регистрация

ииммп нккиуим дни

ИШ»ЛН«у* Ару*ин ГИ|МКМ

Рисунок 24 - Регистрация пользователя с существующим email

Авторизация

исполмуя сми данные исгюльлуя другие сервисы

♦ ---ffi

~ф Л

Рисунок 25 - Авторизация пользователя без пароля

9спС«е

Рисунок 26 - Добавление категории с пустым полем «Название»