РАЗРАБОТКА ПРОСТОГО ВЕБ МАГАЗИНА

Поварницын Е.Н.

УДК 004.6

Поварницын Е.Н.

студент

3 курс, факультет «Информационные системы

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

Северный Арктический Федеральный Университет

Россия, г. Архангельск

РАЗРАБОТКА ПРОСТОГО ВЕБ МАГАЗИНА

Аннотация: Статья посвящается созданию простого веб магазина. Разработка ведётся на ASP NET Core с использованием языков программирования C#, JavaScript, с языком разметки HTML и таблицей стилей CSS.

Ключевые слова: ASP NET Core, CSS, HTML, C#, JavaScript, веб магазин, язык программирования.

Povarnitsyn E. N.

student

3rd year, faculty of Information systems and technologies»

Northern Arctic Federal University Russia, Arkhangelsk

DEVELOPING A SIMPLE WEB STORE

Annotation: This article is devoted to creating a simple web store. Development is conducted on ASP NET Core using C# programming languages, JavaScript, HTML markup language and CSS style sheet.

Key words: ASP NET Core, CSS, HTML, C#, JavaScript, web store, programming language.

1 ОБЗОР ПРОЕКТА

Данный проект будет представлять собой интернет-магазин с такими вещами, как футболки, толстовки, браслеты и головные уборы. Название магазина будет иметь «Big House». Дизайн проекта будет иметь тёплые цвета, такие как зелёный, серый и чёрный.

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

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

Рисунок 1 - Начальная страница магазина

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

Расположение товаров по две штуки. Так же справа расположены краткая характеристика товара, это название товара, его цена. Из интерактивных элементов это кнопка «Подробнее», благодаря которой пользователь сможет перейти на сам товар, далее выбор нужного размера и «Добавить в корзину», нажав её будет переадресация в корзину, где будут расположены все товары уже ранее в неё добавленные. Корзина будет выглядеть в соответствии с рисунком 2.

Рисунок 2 - Корзина с товаром

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

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

Рисунок 3 - Поиск товара по его названию

Если нажать на «Подробнее» у товара его перебросит на сам товар, в соответствии с рисунком 4.

Рисунок 4 - Подробное описание товара

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

Окно авторизации выглядеть в соответствии с рисунком 5.

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

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

Так же данный сайт адаптирован для мобильный устройств благодаря Ьоов1хар, это можно увидеть, перейдя в режим телефона. Выделить будет сайт в соответствии с рисунком 6.

Рисунок 6 - Открытие меню в мобильной версии сайта

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

Рисунок 7 - Подробное описание в мобильной версии

2 ПРОЕКТИРОВАНИЕ СИСТЕМЫ

Проектирование системы было выполнено с помощью ASP NET Core 3.0 в программе Microsoft Visual Studio. Были задействованы такие языки программирования как C# и JavaScript. Так же был использован язык разметки HTML и таблица стилей CSS.

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

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

работы. База данных использовалась встроенная в программу под названием SQL Server.

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

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

Так же стоит отметить, что в проекте был использован bootstrap, для адаптивного дизайна веб-магазина.

3 РЕАЛИЗАЦИЯ ПРОЕКТА

На данном этапе будет рассмотрен основой код в проекте. Соединение с базой данной будет иметь код в соответствии с листингом 1.

Листинг 1 {

"ConnectionStrings": { "DefaultConnection" : "Server=(localdb)\\MSSQLLocalDB;Database=Magazin;Trusted_Connection=Tru

e;MultipleActiveResultSets=true" }

}_

Для того чтобы взаимодействовать с атрибутами товара нужно в первую очередь создать модель товара, в соответствии с листингом 2. _Листинг 2_

namespace Shop.Data.Models {

public class Merch

{

public int Id { set; get; } public string Name { set; get; } public string Description { set; get; } public string Img { set; get; } public int Price { set; get; } public bool IsFavourite { set; get; } public int Available { set; get; } public int CategorylD { set; get; } public string url { set; get; } public string size { set; get; }

public virtual Category Category { set; get; } }

}

Создаём интерфейс для данной модели, чтобы хранить данные, которые будут получены из базы данных, в соответствии с листингом 3. _Листинг 3_

namespace Shop.Data.Interfaces {

public interface IAllMerches {

IEnumerable<Merch> Merches { get; } IEnumerable<Merch> GetFavMerches { get; }

Merch getObjectMerch(int MerchId); }

}_

Создаём репозиторий который будет брать данные из базы данных. Для того что бы взять определённые данные используем LINQ, в соответствии с листингом 4.

_Листинг 4_

using Microsoft.EntityFrameworkCore ; using Shop.Data.Interfaces; using Shop.Data.Models;

namespace Shop.Data.Repository {

public class MerchRepository : IAllMerches {

private readonly AppDBContext appDBContent

public MerchRepository(AppDBContext appDBContent) {

this.appDBContent = appDBContent;

}

public IEnumerable<Merch> Merches => appDBContent.Merch.Include(c => c.Category);

public IEnumerable<Merch> GetFavMerches => appDBContent.Merch.Where(p => p.IsFavourite) .Include(c => c.Category);

public Merch getObjectMerch(int Id) =>

appDBContent.Merch.FirstOrDefault(p => p.Id == Id); }

}_

После создания предыдущих файлов следует создать контроллер с помощью которого будет отображена страница. Важной деталей в контроллере будет написания отображения самих товаров в соответствии с листингом 5.

Листинг 5

public class MerchesController: Controller

{

private readonly IAllMerches _allMerches; private readonly IMerchesCategory _allCategories; public MerchesController (IAllMerches iAllMerches,

IMerchesCategory iMerchesCategory) {

_allMerches = iAllMerches;

_allCategories = iMerchesCategory; }

[Route("Merches/List")] [Route("Merches/List/ {category}")]

public ViewResult List(string category) {

string _category = category; IEnumerable<Merch> merches = null; string currCategory = "";

if (string.IsNullOrEmpty(category)) {

merches = _allMerches.Merches.OrderBy(i => i.Id); }

else {

if (string.Equals("t-shirts", category,

StringComparison.OrdinalIgnoreCase)) {

merches = _allMerches.Merches

.Where(i => i.Category.CategoryName.Equals(мФутболкам)) .OrderBy(i => 1);

currCategory = "Футболки"; }

else if (string.Equals("sweatshirts", category,

StringComparison.OrdinalIgnoreCase)) {

merches = _allMerches.Merches .Where(i => i.Category.CategoryName ^^^СТолстовка") .OrderBy(i => 5);

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

currCategory = "Толстовки"; }

else if (string.Equals("caps", category,

StringComparison.OrdinalIgnoreCase)) {

merches = allMerches.Merches

.Where(i => i.Category.CategoryName ^ш^^епка"))

.OrderBy(i => i.Id);

currCategory = "Кепки"; }

else if (string.Equals("bracelets", category,

StringComparison.OrdinalIgnoreCase)) {

merches = _allMerches.Merches.Where(i => i.Category.CategoryName .Equals("Браслет")).OrderBy(i => i.Id);

currCategory = "Браслеты"; }

}

var merchObj = new MerchListViewModel {

allMerches = merches,

currCategory = currCategory

};

ViewBag.Title = "BIG HAUSE";

return View(merchObj); }

}

}_

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

_Листинг 6_

@modelShop.Data.Models.Merch <divclass=" col-lg-3">

<div class="col-lg-3"> <h2>@Model.Name </h2> <p>Цена: @ModeLPrice.ToString("c")</p> <p style="display: inline-flex"><a href="/Item/@Model.url">Подробнее</a></p>

Таким образом после создания модели Category на сайте по ссылке «/merches/list/» будет отображены все товары, которые имеются в магазине, в соответствии с рисунком 8.

Рисунок 8 - Отображение всех товаров в магазине

Так же нужно понимать, что все данные, которые будут входить в вид будут вставляться в _1ауои1 В нём стоит прописать те данные, которые будут постоянно появляться на страницу, к примеру это верхнее меню на странице сайта, в соответствии с рисунком 9.

Рисунок 9 - Меню магазина

Часть кода будет выглядеть в соответствии с листингом 7. Листинг 7

<!DOCTYPE html> <html lang="en"> <head>

<title>@ViewBag. Title</title>

<h1 asp-action="Index" asp-controller="Home">BIG HOUSE</h1> <span style="display:grid; font-size: 15px; padding-bottom: 1rem;">Официальныйонлайнмагазин BIG HOUSE</span>

</div>_

После чего нужно выбрать то место куда необходимо вставлять динамический элемент, в соответствии с листингом 8.

_Листинг 8_

</div>

@RenderBody()

</body>_

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

9.

@model Shop.Data.Models.Merch

<div><img class-'img-thumbnail" src-"@Model.Img"

alt- "@Model.Name" /></div>

<h2>@Model.Name </h2>

<p>@Model.Description</p>

<р>Цена: @Model.Price.ToString("c")</p>

<form asp-controller-"ShoppingCart" asp-action-"AddToCart" asp-route-

id- '@Model.Id" asp-route-size-"size">

</select>

<input type-"submit" value="Добавитьвкорзину" class-"btn btn-warning

btn_ color more" />

</form>

</div>

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

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

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

Рисунок 10 - Юнит тест

После данного теста можно понять, что соединение работает успешно.

ЗАКЛЮЧЕНИЕ

В заключении можно сказать, что получился полноценно работающий сайт по покупке товаров в ASP NET Core на языке C#. В котором реализован просмотр, поиск, регистрация, авторизация, удаление, просмотр отдельных товаров. Сайт привязан к базе данных, откуда берутся сами данные.

Использованные источники:

1. Столбовский, Д.Н. Разработка Web-приложений ASP .NET с использованием Visual Studio .NET: учебное пособие / Д.Н. Столбовский. — 2-е изд. — Москва: ИНТУИТ, 2016 г.

2. Основы работы с HTML: учебное пособие. — 2-е изд. — Москва: ИНТУИТ, 2016 г.

3. Тюкачев, Н.А. C#. Основы программирования : учебное пособие / Н.А. Тюкачев, В.Г. Хлебостроев. — 3-е изд., стер. — Санкт-Петербург : Лань, 2018 г.

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

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Поварницын Е. Н.

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Поварницын Е. Н.

DEVELOPING A SIMPLE WEB STORE

Текст научной работы на тему «РАЗРАБОТКА ПРОСТОГО ВЕБ МАГАЗИНА»