Triton/homework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ЛР 1: дизайн интернет-магазина, деплой и ответы на контрольные вопросы

Browse Source
This commit is contained in:
Triton 2026-09-14 03:11:50 +05:00
parent de01dbf78e
commit fb076b21d6
17 changed files with 1756 additions and 696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.gitignore vendored
View File

@ -1,25 +1,6 @@
# файлы, которые не нужно коммитить в Git bin/
# это стандартный .gitignore для ASP.NET Core проектов obj/
# папки с результатами сборки
[Bb]in/
[Oo]bj/
# папки пакетов NuGet
*.nuget/
# файлы настроек IDE
.vs/ .vs/
.idea/
*.suo
*.user *.user
*.userosscache *.suo
*.sln.docstates appsettings.Development.json
# логи и временные файлы
*.log
*.tmp
# файлы тестовой базы данных
*.db
*.db-journal

12
Controllers/CatalogController.cs
View File

@ -1,20 +1,18 @@
// подключаем базовые классы MVC 
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
// подключаем модель ошибки
using TechnoWorld.Models; using TechnoWorld.Models;
// контроллер каталога — отвечает за страницу с карточками товаров
namespace TechnoWorld.Controllers; namespace TechnoWorld.Controllers;
public class CatalogController : Controller public class CatalogController : Controller
{ {
// метод Index — страница каталога
// вызывается когда пользователь заходит на /Catalog или /Catalog/Index
public IActionResult Index() public IActionResult Index()
{ {
// ставим заголовок страницы
ViewData["Title"] = "Каталог"; ViewData["Title"] = "Каталог";
// рендерим представление Views/Catalog/Index.cshtml
return View(); return View();
} }
} }

51
Controllers/HomeController.cs
View File

@ -1,98 +1,81 @@
// подключаем Activity — он нужен для Diagnosis-страницы (чтобы узнать ID запроса) 
using System.Diagnostics; using System.Diagnostics;
// подключаем ASP.NET MVC — здесь Controller, IActionResult и другие классы
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
// подключаем наши модели — ErrorViewModel и ContactViewModel
using TechnoWorld.Models; using TechnoWorld.Models;
// пространство имён нашего проекта — все контроллеры лежат в папке Controllers
namespace TechnoWorld.Controllers; namespace TechnoWorld.Controllers;
// главный контроллер — отвечает за Most страниц: главную, о системе, контакты и ошибки
public class HomeController : Controller public class HomeController : Controller
{ {
// логгер — через него можно писать сообщения в консоль/логи для отладки
private readonly ILogger<HomeController> _logger; private readonly ILogger<HomeController> _logger;
// конструктор — сюда ASP.NET сам подставит логгер (внедрение зависимостей, dependency injection)
public HomeController(ILogger<HomeController> logger) public HomeController(ILogger<HomeController> logger)
{ {
_logger = logger; _logger = logger;
} }
// метод Index — это главная страница сайта
// когда кто-то заходит на localhost:5000/ — вызывается именно этот метод
public IActionResult Index() public IActionResult Index()
{ {
// передаём в представление, что заголовок страницы — "Главная"
ViewData["Title"] = "Главная"; ViewData["Title"] = "Главная";
// возвращаем представление (страницу Views/Home/Index.cshtml)
return View(); return View();
} }
// метод About — страница "О системе"
public IActionResult About() public IActionResult About()
{ {
// ставим заголовок страницы
ViewData["Title"] = "О системе"; ViewData["Title"] = "О системе";
// рендерим представление Views/Home/About.cshtml
return View(); return View();
} }
// метод Contacts — страница "Контакты" с формой обратной связи [HttpGet]
[HttpGet] // эта страница открывается обычным GET-запросом (просто открыли ссылку)
public IActionResult Contacts() public IActionResult Contacts()
{ {
// заголовок страницы
ViewData["Title"] = "Контакты"; ViewData["Title"] = "Контакты";
// рендерим представление Views/Home/Contacts.cshtml
return View(); return View();
} }
// перегрузка Contacts для POST — когда пользователь отправил форму
// атрибут [HttpPost] говорит: этот метод обрабатывает POST-запросы
[HttpPost] [HttpPost]
// принимаем модель формы — ContactViewModel (там имя, телефон, сообщение)
public IActionResult Contacts(ContactViewModel model) public IActionResult Contacts(ContactViewModel model)
{ {
// проверяем, заполнил ли пользователь все обязательные поля
if (ModelState.IsValid) if (ModelState.IsValid)
{ {
// если форма заполнена нормально — сохраняем сообщение в TempData
// TempData — это временная переменная, которая живёт один редирект
// потом покажем пользователю "Ваше сообщение принято"
TempData["ContactSuccess"] = "Ваше сообщение принято! Мы свяжемся с вами в ближайшее время."; TempData["ContactSuccess"] = "Ваше сообщение принято! Мы свяжемся с вами в ближайшее время.";
// перенаправляем обратно на страницу Contacts (PRG-паттерн — Post/Redirect/Get)
// это нужно, чтобы при обновлении страницы форма не отправилась заново
return RedirectToAction(nameof(Contacts)); return RedirectToAction(nameof(Contacts));
} }
// если валидация не прошла — показываем форму снова с ошибками
ViewData["Title"] = "Контакты"; ViewData["Title"] = "Контакты";
return View(model); return View(model);
} }
// метод Error — страница ошибок (404, 500 и т.д.)
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
// отключаем кеширование этой страницы — чтобы браузер не запоминал ошибку
public IActionResult Error(int? statusCode = null) public IActionResult Error(int? statusCode = null)
{ {
// создаём модель ошибки и передаём туда ID текущего запроса (чтобы можно было найти в логах)
var model = new ErrorViewModel var model = new ErrorViewModel
{ {
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier, RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier,
// передаём код ошибки (404, 500 и т.д.) — он приходит из UseStatusCodePagesWithReExecute
StatusCode = statusCode StatusCode = statusCode
}; };
// передаём заголовок в зависимости от кода ошибки
if (statusCode == 404) if (statusCode == 404)
ViewData["Title"] = "Страница не найдена"; ViewData["Title"] = "Страница не найдена";
else else
ViewData["Title"] = "Ошибка"; ViewData["Title"] = "Ошибка";
// рендерим представление Views/Shared/Error.cshtml
return View(model); return View(model);
} }
} }

8
Models/ContactViewModel.cs
View File

@ -1,20 +1,16 @@
// пространство имён моделей — все модели лежат в папке Models 
namespace TechnoWorld.Models; namespace TechnoWorld.Models;
// модель для формы обратной связи
// когда пользователь заполняет форму на странице "Контакты" — данные попадают сюда
public class ContactViewModel public class ContactViewModel
{ {
// имя пользователя — обязательное поле
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите ваше имя")] [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите ваше имя")]
public string Name { get; set; } = string.Empty; public string Name { get; set; } = string.Empty;
// телефон — тоже обязательный, добавил атрибут телефона для валидации на клиенте
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите телефон")] [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите телефон")]
[System.ComponentModel.DataAnnotations.Phone(ErrorMessage = "Некорректный номер телефона")] [System.ComponentModel.DataAnnotations.Phone(ErrorMessage = "Некорректный номер телефона")]
public string Phone { get; set; } = string.Empty; public string Phone { get; set; } = string.Empty;
// сообщение — обязательное поле
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите сообщение")] [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Введите сообщение")]
public string Message { get; set; } = string.Empty; public string Message { get; set; } = string.Empty;
} }

8
Models/ErrorViewModel.cs
View File

@ -1,16 +1,12 @@
// пространство имён моделей 
namespace TechnoWorld.Models; namespace TechnoWorld.Models;
// расширяем ErrorViewModel — добавляем код ошибки (404, 500 и т.д.)
// этот класс наследуется от базового ErrorViewModel, который уже есть в шаблоне
public class ErrorViewModel public class ErrorViewModel
{ {
// ID запроса — нужен для отладки, чтобы найти конкретный запрос в логах
public string? RequestId { get; set; } public string? RequestId { get; set; }
// свойство — показывать ли ID запроса на странице (если не пустой, то показываем)
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
// код HTTP-ошибки (404, 500 и т.д.) — передаётся из контроллера
public int? StatusCode { get; set; } public int? StatusCode { get; set; }
} }

18
Program.cs
View File

@ -1,44 +1,32 @@
// подключаем пространство имён Microsoft.AspNetCore для базовых классов 
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
// создаём билдер — через него регистрируем сервисы и настраиваем приложение
var builder = WebApplication.CreateBuilder(args); var builder = WebApplication.CreateBuilder(args);
// регистрируем сервисы для MVC — контроллеры, представления, tag helpers
builder.Services.AddControllersWithViews(); builder.Services.AddControllersWithViews();
// собираем приложение из зарегистрированных сервисов
var app = builder.Build(); var app = builder.Build();
// проверяем, не в продакшене ли мы
if (!app.Environment.IsDevelopment()) if (!app.Environment.IsDevelopment())
{ {
// в продакшене перенаправляем ошибки на страницу Error
app.UseExceptionHandler("/Home/Error"); app.UseExceptionHandler("/Home/Error");
// HSTS — браузер будет ходить только по HTTPS (для безопасности)
app.UseHsts(); app.UseHsts();
} }
// редирект с HTTP на HTTPS — чтобы всё шло по защищённому каналу
app.UseHttpsRedirection(); app.UseHttpsRedirection();
// раздаём статические файлы из папки wwwroot (css, js, картинки и т.д.)
app.UseStaticFiles(); app.UseStaticFiles();
// включаем маршрутизацию — приложение умеет понимать URL-ы
app.UseRouting(); app.UseRouting();
// пока авторизации нет, но middleware уже на месте (по заданию она будет в ЛР 6)
app.UseAuthorization(); app.UseAuthorization();
// описание страницы 404 — если страница не найдена, покажем красивую ошибку
app.UseStatusCodePagesWithReExecute("/Home/Error", "?statusCode={0}"); app.UseStatusCodePagesWithReExecute("/Home/Error", "?statusCode={0}");
// задаём маршрут по умолчанию: /{controller}/{action}/{id?}
// то есть localhost:5000/Home/Index → HomeController → метод Index
app.MapControllerRoute( app.MapControllerRoute(
name: "default", name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}"); pattern: "{controller=Home}/{action=Index}/{id?}");
// запускаем приложение — оно начинает слушать HTTP-запросы
app.Run(); app.Run();

129
README.md
View File

@ -1,70 +1,101 @@
# ТехноМир — Лабораторная работа №1 # ТехноМир — Лабораторная работа №1
## Информация об авторе ASP.NET Core MVC проект интернет-магазина техники.
- **ФИО:** Борисов Иван Сергеевич **Автор:** Борисов Иван Сергеевич, РПО 23/1, 2026
- **Группа:** РПО 23/1
- **Год:** 2026 ---
## Описание проекта ## Описание проекта
Интернет-магазин техники «ТехноМир» — веб-приложение на ASP.NET Core MVC. Интернет-магазин «ТехноМир» — многостраничный сайт для продажи компьютерной и мобильной техники: ноутбуки, смартфоны, планшеты и наушники.
Создано в рамках лабораторной работы №1 по дисциплине "Разработка программного обеспечения".
### Реализованные страницы ### Реализованные страницы
| Страница | Описание | | Страница | Описание |
|----------------|------------------------------------------------------------------| |----------------|-----------------------------------------------------------------|
| **Главная** | Баннер, описание сервиса, 3 преимущества, кнопка «Перейти в каталог» | | **Главная** | Промо-баннер, преимущества магазина, хиты продаж, CTA |
| **Каталог** | 4 карточки товаров-заглушки (ноутбук, смартфон, планшет, наушники) | | **Каталог** | 4 карточки товаров с характеристиками и кнопкой «Купить» |
| **О системе** | Описание сервиса, роли пользователей (Гость, Покупатель, Админ) | | **О системе** | Описание сервиса, роли пользователей, план развития |
| **Контакты** | Адрес, телефон, форма обратной связи с валидацией | | **Контакты** | Контактная информация, форма обратной связи с валидацией |
| **404** | Красивая страница ошибки с ссылкой на главную | | **404** | Страница ошибки с кнопкой возврата на главную |
### Технологии ### Технический стек
- ASP.NET Core 8.0 (MVC) - **ASP.NET Core MVC** (.NET 10)
- Bootstrap 5.3 (CDN) - **Bootstrap 5.3** (CDN) — сетка, меню, формы
- Кастомная CSS-тема с переключением светлой/тёмной темы - **Bootstrap Icons** (CDN) — иконки интерфейса
- Tag Helpers - HTML, CSS, JavaScript
- TempData для сообщений - Светлая / тёмная тема (localStorage)
- Адаптивная вёрстка (1200 px и 375 px)
## Как запустить ### Функциональность ЛР №1
1. Установить [.NET 8 SDK](https://dotnet.microsoft.com/download/dotnet/8.0) - Маршрутизация: `/{controller=Home}/{action=Index}/{id?}`
2. Открыть терминал в папке проекта - Tag Helpers: `asp-controller`, `asp-action`, `asp-for`, `asp-validation-for`, `asp-append-version`
3. Выполнить команду: - Клиентская и серверная валидация формы `ContactViewModel` (`[Required]`, `[Phone]`)
- PRG-паттерн + `TempData` для отображения результата POST-запроса
- Переключение темы через `data-theme` на `<html>` с ранней блокировкой от мигания
- Open Graph мета-теги, favicon
- Кастомная страница ошибки через `UseStatusCodePagesWithReExecute`
### Запуск
```bash ```bash
dotnet run dotnet run --urls http://localhost:5000
``` ```
4. Открыть в браузере: `https://localhost:5000` или `http://localhost:5000` ---
## Структура проекта ## Контрольные вопросы
### 1. Чем ASP.NET Core отличается от классического ASP.NET Framework?
ASP.NET Core — это полностью переписанный, модульный кросс-платформенный фреймворк, в то время как классический ASP.NET Framework работает только на Windows и зависит от IIS.
Основные отличия:
- **Кросс-платформенность:** ASP.NET Core запускается на Windows, Linux и macOS через встроенный Kestrel-сервер, не зависящий от IIS.
- **Модульность:** каждая функция подключается как отдельный NuGet-пакет (Middleware), а не встроена в ядро. Вместо тяжёлого System.Web используется минимальный pipeline из компонентов.
- **Производительность:** Kestrel оптимизирован под асинхронные сценарии и обрабатывает запросы значительно быстрее, чем IIS + ASP.NET.
- **Среда выполнения:** приложение может быть self-contained (без установки .NET Runtime на целевой машине) или framework-dependent. Модель деплоя более гибкая: Docker-контейнеры, systemd-юниты, консоль.
- **Конфигурация:** вместо web.config используется appsettings.json + environment variables, что упрощает управление параметрами в разных средах.
### 2. Что такое middleware и в каком порядке они выполняются при обработке запроса?
Middleware — это компоненты, образующие конвейер (pipeline), через который проходит каждый HTTP-запрос. Каждый middleware может обработать запрос, передать его дальше или вернуть ответ, не передавая дальше.
Порядок важен. Типичный pipeline:
1. **ExceptionHandler** — перехватывает необработанные исключения
2. **HSTS** — принудительное HTTPS в продакшене
3. **HttpsRedirection** — перенаправление HTTP на HTTPS
4. **UseStaticFiles** — раздача статических файлов из `wwwroot`
5. **Routing** — сопоставление URL с маршрутами
6. **UseEndpoints** — вызов соответствующего контроллера/действия
Для 404 используется `UseStatusCodePagesWithReExecute`: он перехватывает ответ с кодом 404/500 и перезапускает обработку, передавая код ошибки параметром.
### 3. Зачем нужны `_ViewStart.cshtml` и `_ViewImports.cshtml`?
**`_ViewStart.cshtml`** выполняется перед каждым представлением и задаёт общие настройки. Здесь он определяет, что все страницы автоматически используют макет `_Layout.cshtml`.
**`_ViewImports.cshtml`** определяет общие `using`-директивы и подключает Tag Helpers для всех представлений в текущей папке. Здесь подключаются:
- `@using TechnoWorld` — доступ к моделям без полного namespace.
- `@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers` — включение Tag Helpers.
### 4. Откуда берутся CSS/JS/изображения и как они подключаются через Razor?
Файлы хранятся в `wwwroot/` проекта и подключаются через Razor:
```html
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>
``` ```
TechnoWorld/ Тег `~` разрешается в корень `wwwroot`. Атрибут `asp-append-version` добавляет хеш для инвалидации кеша браузера. Библиотеки подключаются через CDN (Bootstrap) или локально из `wwwroot/lib/`.
├── Controllers/
│ ├── HomeController.cs — главная, о системе, контакты, ошибки ### 5. Что такое Tag Helper и почему он удобнее обычного HTML?
│ └── CatalogController.cs — каталог товаров
├── Models/ Tag Helper — серверная замена HTML-тегов с атрибутами, начинающимися с `asp-`. Преимущества:
│ ├── ErrorViewModel.cs — модель ошибки - **Автоматическая генерация URL:** `<a asp-controller="Home" asp-action="Index">` вместо ручного прописывания пути.
│ └── ContactViewModel.cs — модель формы обратной связи - **Валидация:** `<input asp-for="Name" />` автоматически генерирует атрибуты для клиентской валидации.
├── Views/ - **Безопасность:** экранирование значений, защита от XSS.
│ ├── Home/ - **Инвалидация кеша:** `asp-append-version="true"` без написания хелпера.
│ │ ├── Index.cshtml — главная страница - **Читаемость:** разметка выглядит как чистый HTML с понятными серверными атрибутами.
│ │ ├── About.cshtml — о системе
│ │ └── Contacts.cshtml — контакты с формой
│ ├── Catalog/
│ │ └── Index.cshtml — каталог товаров
│ └── Shared/
│ ├── _Layout.cshtml — общий макет (навбар + футер)
│ └── Error.cshtml — страница ошибки 404
├── wwwroot/
│ ├── css/site.css — кастомные стили + тёмная тема
│ └── js/site.js — скрипт переключения темы
├── Program.cs — точка входа приложения
└── TechnoWorld.csproj — файл проекта
```

123
Views/Catalog/Index.cshtml
View File

@ -1,100 +1,85 @@
@{ @{
ViewData["Title"] = "Каталог"; ViewData["Title"] = "Каталог";
} }
@* заголовок страницы *@ <div class="page-head">
<h1 class="mb-4">Каталог товаров</h1> <span class="section-overline">Каталог</span>
<h1 class="page-title">Каталог техники</h1>
<p class="page-subtitle">4 товара · Ноутбуки, смартфоны, планшеты, наушники</p>
</div>
@* описание — по заданию: 4 карточки-заглушки *@ <div class="row g-3 g-md-4">
<p class="text-muted mb-4">
Выберите товар для подробной информации. Пока что это заглушки —
позже карточки будут заполняться данными из базы.
</p>
@* строка с четырьмя карточками *@
@* g-4 — отступы между колонками 1.5rem *@
<div class="row g-4">
@* === КАРТОЧКА 1: НОУТБУК === *@
@* col-lg-3 — на больших экранах 4 карточки в ряд (3/12 = 25%) *@
@* col-md-6 — на средних — 2 в ряд *@
@* col-12 — на маленьких — 1 в ряд *@
<div class="col-lg-3 col-md-6 col-12"> <div class="col-lg-3 col-md-6 col-12">
<div class="card h-100 shadow-sm product-card"> <article class="product-card">
@* заглушка для картинки — вместо реального фото просто серый блок *@ <span class="product-card__badge badge-hit">Хит продаж</span>
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center"> <div class="product-card__media"><i class="bi bi-laptop"></i></div>
<span class="fs-1">&#128187;</span> <div class="product-card__body">
</div> <h5 class="product-card__name">Ноутбук Pro 15</h5>
<div class="card-body d-flex flex-column"> <div class="product-card__specs">
<h5 class="card-title fw-bold">Ноутбук ProBook 15</h5> <span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
<p class="card-text text-muted small flex-grow-1">
15.6", Intel Core i5, 8 ГБ RAM, 512 ГБ SSD
</p>
<div class="d-flex justify-content-between align-items-center mt-2">
@* цена *@
<span class="fw-bold fs-5 text-primary">45 990 &#8381;</span>
@* кнопка "Подробнее" — заглушка *@
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
</div> </div>
<div class="product-card__footer">
<span class="product-card__price">89 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div> </div>
</div> </div>
</article>
</div> </div>
@* === КАРТОЧКА 2: СМАРТФОН === *@
<div class="col-lg-3 col-md-6 col-12"> <div class="col-lg-3 col-md-6 col-12">
<div class="card h-100 shadow-sm product-card"> <article class="product-card">
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center"> <span class="product-card__badge badge-hit">Хит продаж</span>
<span class="fs-1">&#128241;</span> <div class="product-card__media"><i class="bi bi-phone"></i></div>
</div> <div class="product-card__body">
<div class="card-body d-flex flex-column"> <h5 class="product-card__name">Смартфон Nova X</h5>
<h5 class="card-title fw-bold">Смартфон Nova X</h5> <div class="product-card__specs">
<p class="card-text text-muted small flex-grow-1"> <span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
6.5", AMOLED, 128 ГБ, 48 Мп камера
</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fw-bold fs-5 text-primary">29 990 &#8381;</span>
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
</div> </div>
<div class="product-card__footer">
<span class="product-card__price">29 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div> </div>
</div> </div>
</article>
</div> </div>
@* === КАРТОЧКА 3: ПЛАНШЕТ === *@
<div class="col-lg-3 col-md-6 col-12"> <div class="col-lg-3 col-md-6 col-12">
<div class="card h-100 shadow-sm product-card"> <article class="product-card">
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center"> <span class="product-card__badge badge-new">Новинка</span>
<span class="fs-1">&#128246;</span> <div class="product-card__media"><i class="bi bi-tablet"></i></div>
</div> <div class="product-card__body">
<div class="card-body d-flex flex-column"> <h5 class="product-card__name">Планшет Tab Lite</h5>
<h5 class="card-title fw-bold">Планшет Tab Lite</h5> <div class="product-card__specs">
<p class="card-text text-muted small flex-grow-1"> <span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
10.1", 64 ГБ, Wi-Fi, идеален для учёбы
</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fw-bold fs-5 text-primary">18 490 &#8381;</span>
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
</div> </div>
<div class="product-card__footer">
<span class="product-card__price">18 490 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div> </div>
</div> </div>
</article>
</div> </div>
@* === КАРТОЧКА 4: НАУШНИКИ === *@
<div class="col-lg-3 col-md-6 col-12"> <div class="col-lg-3 col-md-6 col-12">
<div class="card h-100 shadow-sm product-card"> <article class="product-card">
<div class="card-img-top placeholder-img d-flex align-items-center justify-content-center"> <span class="product-card__badge badge-hot">Выгодно</span>
<span class="fs-1">&#127911;</span> <div class="product-card__media"><i class="bi bi-headphones"></i></div>
</div> <div class="product-card__body">
<div class="card-body d-flex flex-column"> <h5 class="product-card__name">Наушники SoundMax</h5>
<h5 class="card-title fw-bold">Наушники SoundMax</h5> <div class="product-card__specs">
<p class="card-text text-muted small flex-grow-1"> <span>Bluetooth 5.3 · ANC · 40 ч автономной работы</span>
Накладные, Bluetooth 5.0, шумоподавление, 40 ч
</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="fw-bold fs-5 text-primary">3 990 &#8381;</span>
<a href="#" class="btn btn-outline-primary btn-sm">Подробнее</a>
</div> </div>
<div class="product-card__footer">
<span class="product-card__price">3 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div> </div>
</div> </div>
</article>
</div> </div>
</div> </div>

127
Views/Home/About.cshtml
View File

@ -1,61 +1,92 @@
@{ @{
ViewData["Title"] = "О системе"; ViewData["Title"] = "О системе";
} }
@* заголовок страницы *@ <div class="page-head">
<h1 class="mb-4">О системе «ТехноМир»</h1> <span class="section-overline">О системе</span>
<h1 class="page-title">О системе «ТехноМир»</h1>
<p class="page-subtitle">
Интернет-магазин компьютерной и мобильной техники.
Проект развивается в рамках учебных лабораторных работ.
</p>
</div>
@* описание для кого сервис *@ <section class="mb-5">
<section class="mb-4"> <div class="about-panel">
<h3>Для кого этот сервис?</h3> <p class="about-text">
<p> «ТехноМир» предназначен для всех, кто хочет купить качественную технику
«ТехноМир» — это интернет-магазин компьютерной и мобильной техники. по честным ценам: от обычных покупателей до компаний, которые закупают
Сервис предназначен для всех, кто хочет купить качественную технику
по доступным ценам: от обычных покупателей до компаний, которые закупают
технику для сотрудников. технику для сотрудников.
</p> </p>
</div>
</section> </section>
@* описание ролей *@ <section class="mb-5">
<section class="mb-4"> <h2 class="block-title">Роли пользователей</h2>
<h3>Роли пользователей</h3>
@* таблица с ролями — сделана через Bootstrap table *@ <div class="row g-3 g-md-4">
<table class="table table-bordered table-hover">
@* шапка таблицы *@ <div class="col-md-4">
<thead class="table-primary"> <div class="role">
<tr> <span class="role__icon"><i class="bi bi-person"></i></span>
<th>Роль</th> <h3 class="role__title">Гость</h3>
<th>Описание</th> <p class="role__text">Просмотр каталога и главной страницы без регистрации.</p>
</tr> </div>
</thead> </div>
<tbody>
@* строка — Гость *@ <div class="col-md-4">
<tr> <div class="role">
<td><strong>Гость</strong></td> <span class="role__icon"><i class="bi bi-bag"></i></span>
<td>Пользователь без аккаунта. Может смотреть каталог и главную страницу.</td> <h3 class="role__title">Покупатель</h3>
</tr> <p class="role__text">Работа с товарами и заказами после регистрации.</p>
@* строка — Покупатель *@ </div>
<tr> </div>
<td><strong>Покупатель</strong></td>
<td>Зарегистрированный пользователь. Может добавлять товары в корзину и оформлять заказы.</td> <div class="col-md-4">
</tr> <div class="role">
@* строка — Администратор *@ <span class="role__icon"><i class="bi bi-shield-lock"></i></span>
<tr> <h3 class="role__title">Администратор</h3>
<td><strong>Администратор</strong></td> <p class="role__text">Управление каталогом, товарами и заказами.</p>
<td>Управляет каталогом: добавляет, редактирует и удаляет товары. Управляет заказами.</td> </div>
</tr> </div>
</tbody> </div>
</table>
</section> </section>
@* дополнительная информация *@
<section> <section>
<h3>Что планируется</h3> <h2 class="block-title">План развития</h2>
<ul>
<li>Каталог товаров с фильтрацией и сортировкой (уже готово в базовой форме)</li> <ul class="steps">
<li>Корзина и оформление заказов</li>
<li>Личный кабинет покупателя</li> <li class="steps__item">
<li>Панель администратора для управления товарами</li> <span class="steps__num">01</span>
<li>Система авторизации и аутентификации (ЛР 6)</li> <div>
<div class="steps__name">Авторизация</div>
<div class="steps__desc">Вход и регистрация с ролями пользователей</div>
</div>
</li>
<li class="steps__item">
<span class="steps__num">02</span>
<div>
<div class="steps__name">Личный кабинет</div>
<div class="steps__desc">Профиль покупателя и история обращений</div>
</div>
</li>
<li class="steps__item">
<span class="steps__num">03</span>
<div>
<div class="steps__name">Заказы</div>
<div class="steps__desc">Корзина и оформление заказов</div>
</div>
</li>
<li class="steps__item">
<span class="steps__num">04</span>
<div>
<div class="steps__name">Администрирование</div>
<div class="steps__desc">Панель управления каталогом</div>
</div>
</li>
</ul> </ul>
</section> </section>

111
Views/Home/Contacts.cshtml
View File

@ -1,73 +1,108 @@
@* подключаем модель ContactViewModel — она нужна для Tag Helpers (asp-for) *@ 
@model ContactViewModel @model ContactViewModel
@{ @{
ViewData["Title"] = "Контакты"; ViewData["Title"] = "Контакты";
} }
@* заголовок страницы *@ <div class="page-head">
<h1 class="mb-4">Контакты</h1> <span class="section-overline">Контакты</span>
<h1 class="page-title">Свяжитесь с нами</h1>
<p class="page-subtitle">Ответим в ближайшее время в рабочие часы.</p>
</div>
@* === КОНТАКТНАЯ ИНФОРМАЦИЯ (адрес, телефон) === *@ <div class="contacts-panel">
<section class="mb-4"> <div class="row g-4">
<div class="row">
@* левая колонка — адрес и телефон *@
<div class="col-md-6 mb-3"> <div class="col-md-5">
<h3>Наш адрес</h3> <h2 class="form-heading">Наши контакты</h2>
<p>г. Москва, ул. Примерная, д. 42, офис 101</p>
<h3>Телефон</h3>
<p>+7 (999) 123-45-67</p> <div class="contact-row">
<h3>Электронная почта</h3> <span class="contact-row__icon"><i class="bi bi-geo-alt"></i></span>
<p>info@technomir.ru</p> <div>
<div class="contact-row__label">Адрес</div>
<p class="contact-row__value">г. Москва, ул. Примерная, д. 42, офис 101</p>
</div>
</div> </div>
@* правая колонка — форма обратной связи *@
<div class="col-md-6">
<h3>Напишите нам</h3>
@* проверяем, есть ли сообщение об успехе в TempData *@
@* TempData доступен только один раз — после чтения он удаляется *@ <div class="contact-row">
<span class="contact-row__icon"><i class="bi bi-telephone"></i></span>
<div>
<div class="contact-row__label">Телефон</div>
<p class="contact-row__value">
<a href="tel:+79991234567">+7 (999) 123-45-67</a>
</p>
</div>
</div>
<div class="contact-row">
<span class="contact-row__icon"><i class="bi bi-envelope"></i></span>
<div>
<div class="contact-row__label">Почта</div>
<p class="contact-row__value">
<a href="mailto:info@technomir.ru">info@technomir.ru</a>
</p>
</div>
</div>
<div class="contact-row">
<span class="contact-row__icon"><i class="bi bi-clock"></i></span>
<div>
<div class="contact-row__label">Режим работы</div>
<p class="contact-row__value">Пн–Вс: 10:00 — 20:00</p>
</div>
</div>
</div>
<div class="col-md-7">
<h2 class="form-heading">Напишите нам</h2>
@if (TempData["ContactSuccess"] != null) @if (TempData["ContactSuccess"] != null)
{ {
@* показываем зелёное уведомление об успехе *@
<div class="alert alert-success alert-dismissible fade show" role="alert"> <div class="alert alert-success alert-dismissible fade show" role="alert">
@TempData["ContactSuccess"] @TempData["ContactSuccess"]
@* кнопка закрытия уведомления (крестик) *@
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div> </div>
} }
@* форма обратной связи *@
@* asp-action="Contacts" — при отправке данные уйдут на метод Contacts (POST) контроллера Home *@
@* method="post" — данные отправляются POST-запросом (не в URL, а в теле запроса) *@
<form asp-action="Contacts" method="post"> <form asp-action="Contacts" method="post">
@* поле "Имя" *@
<div class="mb-3"> <div class="mb-3">
@* label with asp-for — Tag Helper, который генерирует <label for="Name"> *@
<label asp-for="Name" class="form-label">Ваше имя</label> <label asp-for="Name" class="form-label">Ваше имя</label>
@* input with asp-for — генерирует <input id="Name" name="Name" ...> *@
@* class="form-control" — стиль Bootstrap для полей ввода *@
<input asp-for="Name" class="form-control" placeholder="Иван Иванов" /> <input asp-for="Name" class="form-control" placeholder="Иван Иванов" />
@* span для отображения ошибки валидации (если имя не заполнено) *@
<span asp-validation-for="Name" class="text-danger"></span> <span asp-validation-for="Name" class="field-validation-error"></span>
</div> </div>
@* поле "Телефон" *@
<div class="mb-3"> <div class="mb-3">
<label asp-for="Phone" class="form-label">Телефон</label> <label asp-for="Phone" class="form-label">Телефон</label>
<input asp-for="Phone" class="form-control" placeholder="+7 (999) 123-45-67" /> <input asp-for="Phone" class="form-control" placeholder="+7 (999) 123-45-67" />
<span asp-validation-for="Phone" class="text-danger"></span> <span asp-validation-for="Phone" class="field-validation-error"></span>
</div> </div>
@* поле "Сообщение" *@
<div class="mb-3"> <div class="mb-3">
<label asp-for="Message" class="form-label">Сообщение</label> <label asp-for="Message" class="form-label">Сообщение</label>
@* textarea — многострочное поле ввода *@ <textarea asp-for="Message" class="form-control" rows="4" placeholder="Ваш вопрос или пожелание..."></textarea>
<textarea asp-for="Message" class="form-control" rows="4" placeholder="Напишите ваше сообщение..."></textarea> <span asp-validation-for="Message" class="field-validation-error"></span>
<span asp-validation-for="Message" class="text-danger"></span>
</div> </div>
@* кнопка отправки формы *@
<button type="submit" class="btn btn-primary">Отправить сообщение</button> <button type="submit" class="btn btn-primary">Отправить сообщение</button>
</form> </form>
</div> </div>
</div> </div>
</section> </div>
@section Scripts {
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

196
Views/Home/Index.cshtml
View File

@ -1,75 +1,153 @@
@*告诉他布局使用 _Layout.cshtml*@ @{
@{
ViewData["Title"] = "Главная"; ViewData["Title"] = "Главная";
} }
@* === ГЛАВНЫЙ БАННЕР (JUMBOTRON) === *@ <section class="promo-banner">
@* jumbotron — большой блок-баннер вверху страницы *@ <div>
<section class="hero-section text-center text-white py-5 mb-5 rounded-3"> <h1 class="promo-banner__title">ТехноМир — техника по честным ценам</h1>
<div class="container py-4"> <p class="promo-banner__text">
@* главное заголовок сайта *@ Ноутбуки, смартфоны, планшеты и наушники.
<h1 class="display-4 fw-bold">Добро пожаловать в ТехноМир!</h1> Бесплатная доставка от 5 000 &#8381; по всей России.
@* короткое описание — о чём этот сайт *@
<p class="lead mt-3 mb-4 mx-auto" style="max-width: 650px;">
Мы поможем вам найти технику по лучшим ценам.
Ноутбуки, смартфоны, планшеты и наушники — всё в одном месте.
</p> </p>
@* кнопка-призыв к действию — перейти в каталог *@ <a asp-controller="Catalog" asp-action="Index" class="btn btn-primary">Перейти в каталог</a>
@* asp-controller="Catalog" — ссылка на контроллер каталога *@ </div>
<a asp-controller="Catalog" asp-action="Index" class="btn btn-light btn-lg px-4">
Перейти в каталог &rarr; <div class="promo-banner__icon">
</a> <i class="bi bi-laptop"></i>
</div> </div>
</section> </section>
@* === ТРИ ПРЕИМУЩЕСТВА === *@ <div class="advantages">
@* по заданию: 3 преимущества сервиса *@
<section class="mb-5"> <div class="advantage">
<h2 class="text-center mb-4">Почему выбирают нас?</h2> <span class="advantage__icon tint-blue"><i class="bi bi-truck"></i></span>
@* row — строка Bootstrap, col-md-4 — три колонки по 4/12 = по трети экрана *@ <div>
@* на мобильных они встанут друг под друга (автоматически) *@ <p class="advantage__title">Доставка от 1 дня</p>
<div class="row g-4"> <p class="advantage__text">По Москве и области</p>
@* === ПРЕИМУЩЕСТВО 1 === *@
<div class="col-md-4">
<div class="card h-100 text-center border-0 shadow-sm advantage-card">
<div class="card-body py-4">
@* эмодзи-иконка *@
<div class="fs-1 mb-3">&#128293;</div>
@* заголовок карточки *@
<h5 class="card-title fw-bold">Низкие цены</h5>
@* описание *@
<p class="card-text text-muted">
Мы предлагаем лучшие цены на рынке.
Сравнивайте и убеждайтесь сами!
</p>
</div> </div>
</div> </div>
</div>
@* === ПРЕИМУЩЕСТВО 2 === *@
<div class="col-md-4"> <div class="advantage">
<div class="card h-100 text-center border-0 shadow-sm advantage-card"> <span class="advantage__icon tint-green"><i class="bi bi-shield-check"></i></span>
<div class="card-body py-4"> <div>
<div class="fs-1 mb-3">&#128666;</div> <p class="advantage__title">Гарантия на весь товар</p>
<h5 class="card-title fw-bold">Быстрая доставка</h5> <p class="advantage__text">Официальная гарантия</p>
<p class="card-text text-muted">
Доставим ваш заказ за 1-3 дня по всей России.
Бесплатно при заказе от 5000 рублей.
</p>
</div> </div>
</div> </div>
</div>
@* === ПРЕИМУЩЕСТВО 3 === *@
<div class="col-md-4"> <div class="advantage">
<div class="card h-100 text-center border-0 shadow-sm advantage-card"> <span class="advantage__icon tint-amber"><i class="bi bi-arrow-return-left"></i></span>
<div class="card-body py-4"> <div>
<div class="fs-1 mb-3">&#128736;</div> <p class="advantage__title">Возврат 14 дней</p>
<h5 class="card-title fw-bold">Гарантия и сервис</h5> <p class="advantage__text">Без вопросов</p>
<p class="card-text text-muted">
На всю технику действует гарантия от 12 месяцев.
Официальный сервисный центр.
</p>
</div> </div>
</div> </div>
<div class="advantage">
<span class="advantage__icon tint-violet"><i class="bi bi-credit-card"></i></span>
<div>
<p class="advantage__title">Удобная оплата</p>
<p class="advantage__text">Картой, наличными, рассрочка</p>
</div>
</div>
</div>
<section class="home-section">
<div class="section-head">
<div>
<span class="section-overline">Популярное</span>
<h2 class="section-title">Хиты продаж</h2>
</div>
<a class="section-link" asp-controller="Catalog" asp-action="Index">Все товары &rarr;</a>
</div>
<div class="row g-3 g-md-4">
<div class="col-lg-3 col-md-6 col-12">
<article class="product-card">
<span class="product-card__badge badge-hit">Хит продаж</span>
<div class="product-card__media"><i class="bi bi-laptop"></i></div>
<div class="product-card__body">
<h5 class="product-card__name">Ноутбук Pro 15</h5>
<div class="product-card__specs">
<span>Экран 15.6" · 8 ГБ RAM · SSD 512 ГБ</span>
</div>
<div class="product-card__footer">
<span class="product-card__price">89 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div>
</div>
</article>
</div>
<div class="col-lg-3 col-md-6 col-12">
<article class="product-card">
<span class="product-card__badge badge-hit">Хит продаж</span>
<div class="product-card__media"><i class="bi bi-phone"></i></div>
<div class="product-card__body">
<h5 class="product-card__name">Смартфон Nova X</h5>
<div class="product-card__specs">
<span>Экран 6.7" · Камера 108 Мп · 128 ГБ</span>
</div>
<div class="product-card__footer">
<span class="product-card__price">29 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div>
</div>
</article>
</div>
<div class="col-lg-3 col-md-6 col-12">
<article class="product-card">
<span class="product-card__badge badge-new">Новинка</span>
<div class="product-card__media"><i class="bi bi-tablet"></i></div>
<div class="product-card__body">
<h5 class="product-card__name">Планшет Tab Lite</h5>
<div class="product-card__specs">
<span>Экран 11" · 4 ГБ RAM · 128 ГБ</span>
</div>
<div class="product-card__footer">
<span class="product-card__price">18 490 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div>
</div>
</article>
</div>
<div class="col-lg-3 col-md-6 col-12">
<article class="product-card">
<span class="product-card__badge badge-hot">Выгодно</span>
<div class="product-card__media"><i class="bi bi-headphones"></i></div>
<div class="product-card__body">
<h5 class="product-card__name">Наушники SoundMax</h5>
<div class="product-card__specs">
<span>Bluetooth 5.3 · ANC · 40 ч</span>
</div>
<div class="product-card__footer">
<span class="product-card__price">3 990 &#8381;</span>
<a href="#" class="btn btn-primary btn-sm product-card__btn">Купить</a>
</div>
</div>
</article>
</div> </div>
</div> </div>
</section> </section>
<section class="home-section">
<div class="cta">
<h2 class="cta__title">Не нашли нужное?</h2>
<p class="cta__text">
Напишите нам — поможем выбрать технику под ваши задачи и бюджет.
</p>
<a asp-controller="Home" asp-action="Contacts" class="btn btn-primary">Перейти к контактам</a>
</div>
</section>

46
Views/Shared/Error.cshtml
View File

@ -1,48 +1,42 @@
@* подключаем модель ErrorViewModel — она нужна чтобы вывести ID ошибки *@ 
@model ErrorViewModel @model ErrorViewModel
@{ @{
// ставим заголовок страницы — "Ошибка" (или "Страница не найдена", зависит от контроллера)
ViewData["Title"] = "Ошибка"; ViewData["Title"] = "Ошибка";
} }
@* === СТРАНИЦА ОШИБКИ 404 / ДРУГИЕ ОШИБКИ === *@ <div class="error-page">
<div class="text-center py-5">
@* большая эмодзи-иллюстрация *@
<div class="fs-1 mb-3">&#128533;</div>
@* проверяем, есть ли код ошибки и равен ли он 404 *@
@if (Model?.StatusCode == 404) @if (Model?.StatusCode == 404)
{ {
@* если 404 — показываем сообщение "Страница не найдена" *@ <div class="error-code">404</div>
<h1 class="display-5 fw-bold mb-3">404 — Страница не найдена</h1> <h1 class="error-title">Страница не найдена</h1>
<p class="lead text-muted mb-4"> <p class="error-text">
К сожалению, такой страницы на нашем сайте нет. Такой страницы нет на сайте.
Возможно, она была перемещена или удалена. Возможно, она была перемещена или удалена.
</p> </p>
@* кнопка возврата на главную *@
<a asp-controller="Home" asp-action="Index" class="btn btn-primary btn-lg">
&larr; Вернуться на главную
</a>
} }
else else
{ {
@* для всех остальных ошибок (500 и т.д.) *@
<h1 class="display-5 fw-bold mb-3">Что-то пошло не так</h1> <div class="error-code">Ошибка</div>
<p class="lead text-muted mb-4"> <h1 class="error-title">Что-то пошло не так</h1>
Произошла ошибка при обработке вашего запроса. <p class="error-text">
Попробуйте вернуться на главную или повторить попытку позже. Попробуйте вернуться на главную
или повторить попытку позже.
</p> </p>
<a asp-controller="Home" asp-action="Index" class="btn btn-primary btn-lg">
&larr; Вернуться на главную
</a>
} }
@* показываем ID запроса — полезно при обращении в поддержку *@
<a asp-controller="Home" asp-action="Index" class="btn btn-primary">
Вернуться на главную
</a>
@if (Model?.ShowRequestId == true) @if (Model?.ShowRequestId == true)
{ {
<p class="text-muted mt-3 small"> <p class="error-request-id">
ID запроса: <code>@Model.RequestId</code> Request ID: <code>@Model.RequestId</code>
</p> </p>
} }
</div> </div>

255
Views/Shared/_Layout.cshtml
View File

@ -1,124 +1,217 @@
<!DOCTYPE html> 
@{
var currentController = ViewContext.RouteData.Values["controller"]?.ToString();
var currentAction = ViewContext.RouteData.Values["action"]?.ToString();
}
@{
string ActiveClass(string controller, string action)
{
return (currentController == controller && currentAction == action) ? "nav-link--active" : "";
}
}
<!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head> <head>
@* кодировка UTF-8 — чтобы русские буквы отображались корректно *@
<meta charset="utf-8" /> <meta charset="utf-8" />
@* viewport — чтобы сайт нормально смотрелся на телефонах *@
@* width=device-width — ширина = ширина экрана, initial-scale=1.0 — без масштабирования *@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@* Open Graph — чтобы при ссылке в соцсети показывалось красивое превью *@
<meta property="og:title" content="ТехноМир — Интернет-магазин техники" /> <meta property="og:title" content="ТехноМир — Интернет-магазин техники" />
<meta property="og:description" content="Лучшие цены на ноутбуки, смартфоны, планшеты и наушники" /> <meta property="og:description" content="Ноутбуки, смартфоны, планшеты и наушники по честным ценам" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:locale" content="ru_RU" />
<title>@(ViewData["Title"] ?? "ТехноМир") — ТехноМир</title>
@* заголовок страницы — берётся из ViewData["Title"], который задаётся в каждом представлении *@
<title>@ViewData["Title"] — ТехноМир</title>
@* подключаем Bootstrap 5 через CDN (Content Delivery Network) *@
@* это значит что CSS-файл подгружается с сервера Bootstrap, а не лежит у нас *@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/1p0KQLI8apkWKaIl2pCeM0oG6mDcK0h" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YcnS/1p0KQLI8apkWKaIl2pCeM0oG6mDcK0h"
crossorigin="anonymous" /> crossorigin="anonymous" />
@* подключаем наш кастомный CSS — он лежит в wwwroot/css/site.css *@
@* asp-append-version="true" — добавляет хеш к файлу, чтобы браузер перезагружал CSS при изменениях *@ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
@* иконка сайта (favicon) — маленькая картинка во вкладке браузера *@
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
</head>
@* data-theme — атрибут для переключения темы (светлая/тёмная) *@
<body data-theme="light">
@* === ШАПКА САЙТА (HEADER) === *@ <link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<header>
@* навигационная панель Bootstrap — сверху сайта *@
@* navbar-expand-sm — на маленьких экранах схлопывается в бургер *@ <script>
@* navbar-dark — тёмный стиль навбара (белый текст на тёмном фоне) *@ (function () {
@* bg-primary — фон навбара — наш акцентный цвет *@ var saved = localStorage.getItem('theme');
<nav class="navbar navbar-expand-sm navbar-dark bg-primary shadow-sm mb-3"> if (saved === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
<div class="container"> })();
@* логотип / название сайта — ссылка на главную *@ </script>
@* asp-controller="Home" asp-action="Index" — Tag Helper, который генерирует href="/" *@ </head>
<a class="navbar-brand fw-bold" asp-controller="Home" asp-action="Index">
ТехноМир <body>
<div class="topbar">
<div class="container topbar__inner">
<span class="topbar__item">
<i class="bi bi-telephone"></i> +7 (999) 123-45-67
</span>
<span class="topbar__item topbar__item--hide-mobile">
<i class="bi bi-clock"></i> Пн–Вс: 10:00–20:00
</span>
<div class="topbar__nav">
<a asp-controller="Home" asp-action="About">О системе</a>
<a asp-controller="Home" asp-action="Contacts">Контакты</a>
</div>
</div>
</div>
<header class="site-header">
<div class="container header-main">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">
<span class="brand-badge"><i class="bi bi-lightning-charge-fill"></i></span>
<span>ТехноМир</span>
</a> </a>
@* кнопка-бургер — появляется на маленьких экранах *@
@* data-bs-target="#mainNav" — ссылается на ID меню, которое нужно свернуть/развернуть *@ <form class="header-search" asp-controller="Catalog" asp-action="Index" method="get">
<button class="navbar-toggler" type="button" <input class="header-search__input" type="search" name="q"
data-bs-toggle="collapse" data-bs-target="#mainNav" placeholder="Найти: ноутбук, смартфон..." aria-label="Поиск" />
aria-controls="mainNav" aria-expanded="false" aria-label="Меню"> <button class="header-search__btn" type="submit" aria-label="Искать">
@* иконка-бургер (три полоски) *@ <i class="bi bi-search"></i>
<span class="navbar-toggler-icon"></span> </button>
</form>
<div class="header-actions">
<button id="themeToggle" class="theme-toggle"
type="button" title="Переключить тему" aria-label="Переключить тему">
<span id="themeIcon">☾</span>
</button> </button>
@* само меню — сворачивается на маленьких экранах *@
<div class="collapse navbar-collapse" id="mainNav">
@* список ссылок навигации *@
<ul class="navbar-nav me-auto">
@* Главная *@
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="Index">Главная</a>
</li>
@* Каталог *@
<li class="nav-item">
<a class="nav-link" asp-controller="Catalog" asp-action="Index">Каталог</a>
</li>
@* О системе *@
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="About">О системе</a>
</li>
@* Контакты *@
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="Contacts">Контакты</a>
</li>
</ul>
@* кнопка переключения темы — справа в навбаре *@ <a href="#" class="header-action">
<button id="themeToggle" class="btn btn-outline-light btn-sm" title="Переключить тему"> <i class="bi bi-person header-action__icon"></i>
@* по умолчанию показываем луну (переключиться на тёмную) *@ <span class="header-action__label">Войти</span>
<span id="themeIcon">&#9790;</span> </a>
</button>
<a href="#" class="header-action">
<i class="bi bi-cart3 header-action__icon"></i>
<span class="header-action__label">Корзина</span>
</a>
</div> </div>
</div> </div>
</nav>
</header> </header>
@* === ОСНОВНОЕ СОДЕРЖИМОЕ СТРАНИЦЫ === *@
@* контейнер — ограничивает ширину контента, чтобы на широком экране не растягивался *@
<nav class="category-nav" aria-label="Категории товаров">
<div class="container category-nav__inner">
<a class="category-nav__all @ActiveClass("Catalog", "Index")"
asp-controller="Catalog" asp-action="Index">
<i class="bi bi-list"></i> Все товары
</a>
<a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Ноутбуки</a>
<a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Смартфоны</a>
<a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Планшеты</a>
<a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Наушники</a>
<a class="category-nav__link" asp-controller="Catalog" asp-action="Index">Аксессуары</a>
</div>
</nav>
<main class="site-main">
<div class="container"> <div class="container">
@* main — основной блок, сюда подставляется содержимое текущей страницы *@
@* RenderBody() — вот сюда вставляется то, что написано в Index.cshtml, About.cshtml и т.д. *@
<main role="main" class="pb-4">
@RenderBody() @RenderBody()
</div>
</main> </main>
<footer class="site-footer">
<div class="container">
<div class="row g-4">
<div class="col-lg-4 col-md-6">
<span class="footer-logo">
<span class="brand-badge"><i class="bi bi-lightning-charge-fill"></i></span>
<span>ТехноМир</span>
</span>
<p class="footer-desc">
Интернет-магазин техники: ноутбуки, смартфоны,
планшеты и наушники по честным ценам.
</p>
</div> </div>
@* === ПОДВАЛ (FOOTER) === *@
@* footer — самый низ сайта *@ <div class="col-6 col-lg-2">
<footer class="footer mt-auto py-3 bg-dark text-light"> <h6 class="footer-heading">Разделы</h6>
<div class="container text-center"> <ul class="footer-links">
@* группа, ФИО и год — как просили в задании *@ <li><a asp-controller="Home" asp-action="Index">Главная</a></li>
<span class="text-muted"> <li><a asp-controller="Catalog" asp-action="Index">Каталог</a></li>
РПО 23/1 &mdash; Борисов Иван Сергеевич &mdash; 2026 <li><a asp-controller="Home" asp-action="About">О системе</a></li>
</span> <li><a asp-controller="Home" asp-action="Contacts">Контакты</a></li>
</ul>
</div>
<div class="col-6 col-lg-3">
<h6 class="footer-heading">Каталог</h6>
<ul class="footer-links">
<li><a asp-controller="Catalog" asp-action="Index">Ноутбуки</a></li>
<li><a asp-controller="Catalog" asp-action="Index">Смартфоны</a></li>
<li><a asp-controller="Catalog" asp-action="Index">Планшеты</a></li>
<li><a asp-controller="Catalog" asp-action="Index">Наушники</a></li>
<li><a asp-controller="Catalog" asp-action="Index">Аксессуары</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3">
<h6 class="footer-heading">Контакты</h6>
<ul class="footer-links">
<li>+7 (999) 123-45-67</li>
<li>info@technomir.ru</li>
<li>г. Москва, ул. Примерная, д. 42</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>&copy; 2026 ТехноМир</span>
<span>Борисов Иван Сергеевич · РПО 23/1</span>
</div>
</div> </div>
</footer> </footer>
@* === СКРИПТЫ === *@
@* подключаем Bootstrap JS-бандл (включает Popper.js — нужен для выпадающих меню и тултипов) *@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
@* наш скрипт — переключение темы *@
<script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/site.js" asp-append-version="true"></script>
@* рендерим дополнительные скрипты, если они нужны конкретной странице *@
@* required: false — секция необязательная, страницы без неё не ошибутся *@
@await RenderSectionAsync("Scripts", required: false) @await RenderSectionAsync("Scripts", required: false)
</body> </body>
</html> </html>

6
Views/_ViewImports.cshtml
View File

@ -1,8 +1,6 @@
@* подключаем пространства имён проекта — чтобы в представлениях не писать полное имя классов *@ 
@* например ErrorViewModel вместо TechnoWorld.Models.ErrorViewModel *@
@using TechnoWorld @using TechnoWorld
@using TechnoWorld.Models @using TechnoWorld.Models
@* подключаем Tag Helpers — они нужны для asp-controller, asp-action, asp-for и других атрибутов *@
@* Tag Helpers — это специальные атрибуты, которые превращаются в HTML на сервере *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

4
Views/_ViewStart.cshtml
View File

@ -1,5 +1,5 @@
@* этот файл говорит всем представлениям: используй макет _Layout *@ 
@* то есть каждый .cshtml автоматически обёрнётся в _Layout.cshtml *@
@{ @{
Layout = "_Layout"; Layout = "_Layout";
} }

1251
wwwroot/css/site.css
View File

File diff suppressed because it is too large Load Diff

40
wwwroot/js/site.js
View File

@ -1,52 +1,32 @@
// ============================================ 
// СКРИПТ ПЕРЕКЛЮЧЕНИЯ ТЁМЫ (СВЕТЛАЯ / ТЁМНАЯ)
// Борисов Иван Сергеевич, РПО 23/1, 2026
// ============================================
// ждём пока вся страница загрузится
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// находим кнопку переключения темы по её ID
var btn = document.getElementById('themeToggle'); var btn = document.getElementById('themeToggle');
// находим элемент body чтобы менять атрибут data-theme
var body = document.body;
// находим иконку внутри кнопки (луна/солнце)
var icon = document.getElementById('themeIcon'); var icon = document.getElementById('themeIcon');
// при загрузке страницы — проверяем в localStorage, какую тему выбрал пользователь раньше if (!btn || !icon) return;
// если там ничего нет — ставим "light" (светлая по умолчанию)
var root = document.documentElement;
var savedTheme = localStorage.getItem('theme') || 'light'; var savedTheme = localStorage.getItem('theme') || 'light';
// применяем сохранённую тему — ставим атрибут data-theme на body root.setAttribute('data-theme', savedTheme);
body.setAttribute('data-theme', savedTheme);
// обновляем иконку: если тёмная тема — показываем солнце, если светлая — луну
updateIcon(savedTheme); updateIcon(savedTheme);
// вешаем обработчик клика на кнопку
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
// читаем текущую тему из атрибута data-theme var current = root.getAttribute('data-theme');
var current = body.getAttribute('data-theme');
// переключаем: было light → станет dark, было dark → станет light
var next = current === 'light' ? 'dark' : 'light'; var next = current === 'light' ? 'dark' : 'light';
// ставим новую тему root.setAttribute('data-theme', next);
body.setAttribute('data-theme', next);
// сохраняем выбор в localStorage — чтобы при обновлении страницы тема осталась
localStorage.setItem('theme', next); localStorage.setItem('theme', next);
// обновляем иконку
updateIcon(next); updateIcon(next);
}); });
// функция обновления иконки на кнопке
// если тема тёмная — показываем солнце (чтобы переключить на светлую)
// если тема светлая — показываем луну (чтобы переключить на тёмную)
function updateIcon(theme) { function updateIcon(theme) {
if (theme === 'dark') { if (theme === 'dark') {
// HTML-код солнца (☀) icon.textContent = '☀';
icon.innerHTML = '&#9788;';
} else { } else {
// HTML-код луны (☽) icon.textContent = '☾';
icon.innerHTML = '&#9790;';
} }
} }
}); });