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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BIG HOUSE

Официальный онлайн магазин BIG HOUSE

Худи Чёрная

Уход за вещамибережная стирка при 30 градусах Декоративные элементыбез элементов

Покройсвободный Длина изделия по спинкеб4 см Ко м пл е кта ци яфутб о л ка ПолМужской Страна брендаРоссия Страна производительУзбекистан

Цена: 2 999,00 ₽

Рисунок 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

{ 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 CategoryID { set; get; } public string url { set; get; } public string size { set; get; } public virtual Category Category { set; get; }

}

}

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

Листинг 3

{ public interface IAllMerches

{

IEnumerable Merches { get; }

IEnumerable GetFavMerches { get; }

Merch getObjectMerch(int MerchId);

}

}

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

Листинг 4

using Microsoft.EntityFrameworkCore;

{ public class MerchRepository : IAllMerches

{ private readonly AppDBContext appDBContent public MerchRepository(AppDBContext appDBContent)

{ this.appDBContent = appDBContent;

}

После создания предыдущих файлов следует создать контроллер с помощью которого будет отображена страница. Важной деталей в контроллере будет написания отображения самих товаров в соответствии с листингом 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 merches = null;

string currCategory = "";

if (string.IsNullOrEmpty(category))

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

} else

.OrderBy(i => 1);

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

{ merches = _allMerches.Merches

.Where(i => i.Category.CategoryName

.Equals("Толстовка")

.OrderBy(i => 5);

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

} else if (string. Equals("caps ", category, StringComparison.OrdinalIgnoreCase)) { merches = allMerches.Merches

.Where(i => i.Category.CategoryName

.Equals("Кепка"))

.OrderBy(i => i.Id);

currCategory = "Кепки";

.Equals("Браслет")).OrderBy(i => i.Id);

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

}

} var merchObj = new MerchListViewModel { allMerches = merches, currCategory = currCategory

};

return View(merchObj);

}

}

}

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

Листинг 6

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

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

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

BIG HOUSE	Главная Футболки Толстовки Кепки Браслеты поиск	Q, Корзина
Официальный онлайн на tai ин BIG HOUSE		Выйти

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

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

Листинг 7