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

C# .NET ASP.NET E-shop E-shop v ASP.NET MVC - Struktura řešení

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 Přehled produktů z vybrané kategorie

Registrační formulář Registrační formulář

Přehled produktů v košíku – první krok při dokončení objednávky 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

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

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

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.


 

 

Článek pro vás napsal JOF
Avatar
Jak se ti líbí článek?
12 hlasů
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (18)

Avatar
Ondřej Krsička
Redaktor
Avatar
Ondřej Krsička:15.4.2016 13:58

Na kolik dílů bude tenhle seriál?

 
Odpovědět  +1 15.4.2016 13:58
Avatar
JOF
Tým ITnetwork
Avatar
Odpovídá na Ondřej Krsička
JOF:15.4.2016 14:03

Přesně to nevím, odhadem kolem třiceti ...

 
Odpovědět  +2 15.4.2016 14:03
Avatar
Ondřej Krsička
Redaktor
Avatar
 
Odpovědět 15.4.2016 14:29
Avatar
JosefSenkerikxw:24. dubna 17:35

Ahoj, chci se zeptat, jak to s placením tohoto seriálu, platí se každý jednotlivý článek nebo plošně za celý seriál? Děkuji

 
Odpovědět 24. dubna 17:35
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na JosefSenkerikxw
vajkuba1234:25. dubna 2:17

Plati se za jednotlive dily...

Odpovědět 25. dubna 2:17
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na JosefSenkerikxw
David Čápka:3. května 15:51

Platí se jednou a následně si odemykáš články za body, které sis koupil. Je to tam napsané :)

Odpovědět 3. května 15:51
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Test Case
Redaktor
Avatar
Test Case:19. května 11:49

Hoj, je v planu aktualizace pod ASP.NET Core? :)

 
Odpovědět 19. května 11:49
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Test Case
David Čápka:20. května 21:52

Samozřejmě, všechny kurzy na síti průběžně aktualizujeme. Nemyslím si však, že je to v dohledné době nutné, zatím je to stále nejaktuálnější a nejkompletnější kurz ASP.NET MVC na českém internetu a odpovídá tomu, co je ve firmách nejrozšířenější.

Odpovědět 20. května 21:52
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Test Case
Redaktor
Avatar
Odpovídá na David Čápka
Test Case:20. května 23:37

Jasne, jasne :) Ja prave nevim, jestli mam zacinat s ASP.NET MVC nebo Core, protoze nez se naucim poradne MVC tak uz bude Core 3/4/... :D

A nevim jestli core je stejne jak MVC, protoze jsem cetl, ze je to vlastne MVC6(teoreticky by melo byt, ale jisty si nejsem...)

 
Odpovědět 20. května 23:37
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Test Case
patrik.valkovic:20. května 23:40

Od ASP.NET MVC5 by měl jít ten stejný kód na core i klasickém .NETu, takže je asi jedno, co budeš používat.

Odpovědět  +1 20. května 23:40
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 28. Zobrazit vše