IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 1 - E-shop v ASP.NET MVC - Struktura řešení

Technologie ASP.NET MVC je již staršího data a byla překonána ASP.NET Core. Doporučujeme přejít na kurz ASP.NET Core.

Vítám všechny středně pokročilé a pokročilé programátory u kurzu E-shop v ASP.NET MVC. Je určen pro všechny, kteří mají za sebou základy této technologie alespoň v rozsahu zdejších Základů ASP.NET MVC a chtějí se posunout na další úroveň. V tomto on-line kurzu vytvoříme plně funkční e-shop s využitím následujících technologií:

  • Entity Framework - ORM s metodikou Code First
  • Repository - návrhový vzor pro práci s daty
  • ASP.NET Identity - framework pro správu uživatelů a rolí, autentizaci a autorizaci
  • Extension metody - nebude jich mnoho, ale ukážeme si příklady jak rozšířit funkcionalitu stávajících tříd
  • Generické třídy - umí ušetřit spoustu psaní a věřím, že si je oblíbíte
  • AutoMapper - pomáhá s mapováním tříd
  • Javascript - trocha kódu bude i na straně klienta ...
  • AJAX a mnoho dalších ...

Seriál vás dokonale připraví na zaměstnání v C# .NET, jelikož většina pracovních pozic vyžaduje kromě samotného C# dobrou znalost webového frameworku ASP.NET MVC. Samozřejmě můžete znalosti využít i do svého podnikání.

Základní požadavky na e-shop

Jelikož obchod bude opravdu reálně použitelný, zamysleme se alespoň nad základními požadavky:

  • Správa uživatelů a rolí - tak jako ve většině webových aplikací i zde je potřeba rozlišovat běžné návštěvníky e-shopu od administrátorů, kteří mají dostupných více funkcionalit. Navíc ještě musíme umožnit nákup i neregistrovaným uživatelům (uživatelům bez přihlašovacích údajů).
  • Správa produktů a kategorií - přehledně zobrazit produkty (včetně jejich obrázků) s možností vkládání a editace. Zařazovat produkty do kategorií. Vyhledávat, filtrovat a řadit produkty ve výpisu. Umožnit uživatelům napsat hodnocení zakoupeného produktu.
  • Systém objednávek - vést uživatele nákupním procesem od vložení zboží do nákupního košíku přes zadání fakturačních údajů a výběr způsobu dopravy až po dokončení objednávky včetně odeslání potvrzovacího emailu.
  • Historizace záznamů - zajistit integritu a platnost dat. Žádné provedené úpravy nesmějí ovlivnit již provedené transakce v e-shopu.
  • Responzivní web design - přehledně zobrazovat stránky i na displejích s menším rozlišením.

Požadovaný vzhled aplikace

Požadovaný vzhled si přiblížíme na následujících obrázcích:

Přehled produktů z vybrané kategorie - Kompletní e-shop v ASP.NET MVC Přehled produktů z vybrané kategorie

Registrační formulář - Kompletní e-shop v ASP.NET MVC Registrační formulář

Přehled produktů v košíku – první krok při dokončení objednávky - Kompletní e-shop v ASP.NET MVC Přehled produktů v košíku - první krok při dokončení objednávky

Začínáme...

Ve Visual Studiu si vytvořte si nový projekt typu ASP.NET Web Application (já budu pracovat ve Visual studiu 2015 Community Edition). Vzhledem k tomu, že ASP.NET 5 je teprve ve verzi RC1, použijeme template MVC z ASP.NET 4.5.2 Templates (viz obrázek 4) a ponecháme Authentication Individual User Accounts. Až bude verze 5 nějak rozumně rozšířená, přidám do seriálu pár novinek které umožňuje a dopíši o tom článeček.

Obrázek 4 - Kompletní e-shop v ASP.NET MVC

Obrázek 4 - Vytvoření projektu

Struktura řešení

Reálné komerční projekty mají spoustu tříd a určitě bychom si v nich nevystačili pouze s rozdělením struktury projektu na modely, kontrolery a pohledy. Mít v jedné složce desítky souborů je minimálně nepřehledné. Kód by se špatně spravoval a z vlastní zkušenosti mohu říci, že byste se dostali do bodu, kdy byste psali podobné metody znovu a znovu místo toho, abyste parametrizovali nějakou existující, protože byste zkrátka ani nevěděli, že v projektu nějaká podobná již je. A to je začátek konce :). Jak z toho ven?

Projekty

Celé řešení rozdělíme do více vrstev. Každá vrstva bude v samostatném projektu. Náš projekt bude středně složitý, proto si vystačíme s následujícími vrstvami:

  • Datová vrstva - bude obsahovat část, která se bude starat o ukládání a načítání dat. Ostatní části řešení budou využívat její metody (a v našem případě asi i třídy) aniž by se zajímaly o to, kde jsou vlastně data uložena a jakým způsobem. Metody pro práci s daty implementujeme do této vrstvy v podobě repositářů.
  • Business vrstva - bude obsahovat téměř všechnu logiku našeho řešení rozdělenou do tzv. manažerů podle entit, ke kterým dané metody patří. Dále sem přidáme nějaké pomocné třídy, ViewModely a nějaký "mapper", který nám pomůže přetypovávat třídy mezi sebou.
  • Aplikační vrstva - to je ten náš (zatím jediný) vytvořený projekt. Bude obsahovat hlavně kontrolery a pohledy (většina modelů bude v business vrstvě) a samozřejmě také další části, které patří k webové aplikaci - css styly, skripty, obrázky apod.

Přidejte si tedy do nového řešení 2 projekty (například v místní nabídce Solution -> Add -> New Project -> Class Library). Co se pojmenování týče, doporučuji všude používat výhradně angličtinu, takže například EShop.Business a EShop.Data. Čeština je v programování pouze pro začátečníky a v reálných aplikacích by se objevovat neměla. Minimálně to zvýší čitelnost vašeho kódu pro další programátory.

Nastavení referencí

Abychom mohli v jednom projektu využívat objektů z jiného projektu, musíme si nastavit reference. Nejjednodušším způsobem je asi využít místní nabídku. V Solution Exploreru klikněte v Business projektu pravým tlačítkem myši na References, z místní nabídky vyberte Add Reference..., v levé části okna vyberte Projects a zaškrtněte Data projekt (viz obrázek č. 5). Obdobným způsobem nastavte referenci z Aplikačního projektu na Business projekt. Protože naše aplikace bude ještě v udržitelném rozsahu, nebudeme v business vrstvě využívat žádné DTO nebo DAO modely a nastavíme si referenci i z Aplikačního projektu na Data projekt. U ještě větších aplikací bývá Aplikační vrstva od datové úplně odstíněna, nám bude bohatě stačit když si vyzkoušíme jen toto logické rozdělení.

Nastavení reference - Kompletní e-shop v ASP.NET MVC

Obrázek 5 - Nastavení reference

Složky

V jednotlivých projektech si budeme uspořádávat soubory s kódem do složek (a třídy do odpovídajících jmenných prostorů). Výslednou strukturu hotového projektu můžete vidět na obrázku č. 6. Význam složek se dá většinou odvodit z jejich názvu. Složky si nyní vytvářet nemusíte, budeme je vytvářet postupně podle potřeby.

Obrázek 5 - Kompletní e-shop v ASP.NET MVC

Obrázek 6 - Navrhovaná struktura řešení

To by bylo pro dnešek vše. Máme představu o tom, jak bude vypadat struktura našeho řešení a proč.

V příští lekci, E-shop v ASP.NET MVC - Konfigurace ASP.NET Identity, se podíváme na konfiguraci ASP.NET Identity.


 

Všechny články v sekci
Kompletní e-shop v ASP.NET MVC
Přeskočit článek
(nedoporučujeme)
E-shop v ASP.NET MVC - Konfigurace ASP.NET Identity
Článek pro vás napsal JOF
Avatar
Uživatelské hodnocení:
17 hlasů
Aktivity