V této sérii článků jste zatím poznali, jak vytvořit stránku HTML pomocí sady WebMatrix, jak efektivně definovat styl stránky pomocí šablony stylů CSS a jak využít funkci rozložení integrovanou do sady WebMatrix a syntaxi Razor k tomu, abyste se mohli soustředit na obsah stránky a nebyli rozptylováni zbytečnými podrobnostmi.
V této kapitole se zaměříme na to, jak statický seznam filmů, který dosud používáte, převést na dynamický. Jinými slovy – místo používání seznamu filmů ručně napsaného v kódu HTML vložíte tyto filmy do databáze a pak necháte sadu WebMatrix načíst databázi a vygenerovat kód HTML. Tímto způsobem můžete databázi snadno měnit, přičemž stránka bude aktualizována automaticky.
Vytvoření databáze v rozhraní WebMatrix
Začněte vyhledáním pracovního prostoru Databases (Databáze) a jeho otevřením. Uprostřed okna je zobrazena možnost Add a Database to your site (Přidat na web databázi).
Vyberte tuto možnost a v rozhraní WebMatrix se vytvoří nová databáze s názvem Movies.sdf. Pokud má web odlišný název (například Pokus), vytvoří sada WebMatrix databázi na základě tohoto názvu (například pokus.sdf).
Tato databáze je zobrazena v průzkumníku databází na levé straně okna:
Přidání tabulky do databáze
V horní části tohoto okna se nachází pás karet s nástroji, které znázorňují různé akce, jež lze s databází provádět, včetně vytváření tabulek a dotazů a migrace do jiných databází. Na tomto pásu karet vyberte nástroj New Table (Nová tabulka). Pokud se po výběru tohoto nástroje nic nestane, ověřte, zda je v průzkumníku databází vybrána databáze Movies.sdf.
Sada WebMatrix vytvoří automaticky tabulku a otevře editor sloupců. Tento editor umožňuje vytváření nových sloupců v databázové tabulce. V databázovém žargonu se pod pojmem záznam rozumí veškerá data konkrétní entity. údaje určité osoby tedy mohou mít formu záznamu s jejím jménem, věkem, adresou a telefonním číslem. Sloupce jsou hodnoty jednotlivých dílčích údajů bez ohledu na to, do jakého záznamu patří. V předchozím příkladu by tedy Jméno bylo sloupec, stejně jako Věk.
Pro filmy tedy vytvoříte databázi, která bude vypadat takto:
Nejprve vytvoříte ID. ID je vlastně identifikátorem konkrétního záznamu. Identifikátor není zapotřebí, zvláště u takto jednoduchých databází, ale je dobré jej vytvořit, protože při vývoji složitějších databází zjistíte, že identifikátory jsou nezbytné ke sledování a dotazování dat.
V editoru sloupců vyplňte podrobnosti podle následujícího obrázku:
Název tohoto sloupce je id a jeho datový typ je nastaven jako číslo (bigint), které musí obsahovat hodnotu (možnost Allow Nulls (Povolit hodnoty null) je nastavena na hodnotu False (Ne)). Dále je u tohoto pole nastavena možnost Identity, což pro databázi znamená, že toto pole bude použito jako ID. Skvělé na tom je, že kdykoli do databáze přidáte nový záznam, ID se automaticky aktualizuje, takže nemusíte sledovat položku, která byla přidána jako poslední, zjišťovat její ID a pak vymýšlet nové ID.
Dále toto pole nastavíte jako primární klíč. Jedná se opět o termín z oboru databází. Klíče jsou sloupce v databázi obsahující speciální hodnoty a jsou často hlavním prvkem, který potřebujete při výběru záznamů. Databáze je používá ke snadnějšímu hledání dat. Můžete například pracovat u firmy, která vám přidělí číslo zaměstnance. Podle tohoto čísla jste snadněji sledovatelní, protože hledání čísla 333102 je mnohem jednodušší než hledání zaměstnance jménem Nizhoni Benally, zejména pokud má organizace velký počet zaměstnanců. Číslo zaměstnance je tedy klíčem pro vaše vyhledání. Můžete mít množství klíčů, které v datech slouží k vašemu vyhledání, přičemž primární klíč by měl být považován za hlavní.
Při zadávání filmů do databáze udělíte každému filmu ID a toto ID zároveň nastavíte jako primární klíč.
Pomocí tlačítka New Column (Nový sloupec) na pásu karet vytvořte další tři sloupce. V tabulce uvidíte tři prázdné nepojmenované sloupce.
Vyberte první prázdný řádek, pojmenujte jej Název a nastavte datový typ ntext. Možnosti Is Identity (Je identitou) a Is Primary Key (Je primárním klíčem) nastavte na hodnotu False (Ne).
Druhý prázdný řádek pojmenujte ReleaseYear a ponechejte datový typ bigint.
Třetí prázdný řádek pojmenujte Genre a nastavte datový typ ntext.
Kliknutím na tlačítko pro uložení v záhlaví prostředí WebMatrix tabulku uložte.
Zobrazí se dialogové okno s výzvou k zadání názvu tabulky. Pojmenujte ji Favorites.
Tato tabulka se zobrazí v levé straně okna.
Přidání dat do tabulky
Dvojitým kliknutím na tabulku v průzkumníku se otevře tabulka, ve které nejsou žádná data.
Umístěte kurzor do pole Name (Název) a zadejte do něj hodnotu. Jakmile budete hotovi, stisknutím klávesy TAB na klávesnici přejděte do dalšího pole Release Year (Rok vydání), zadejte hodnotu, stiskněte klávesu TAB a zadejte hodnotu do pole Genre (Žánr).
Jakmile znovu stisknete klávesu TAB, v poli id se automaticky vyplní číslo 1. Do tohoto sloupce nic nezadávejte a nechejte databázi vyplňovat hodnoty automaticky. Kurzor se nyní nachází v tomto poli, stisknutím klávesy TAB se proto vraťte do pole Name.
Opakováním tohoto postupu zadejte několik filmů. Zde jsou zobrazeny čtyři filmy, které jste používali dosud.
Vytvoření stránky využívající tato data
V předchozím článku jste se dozvěděli, že web k vytvoření značky HTML <head>, definování stylu a všemu ostatnímu používá rozložení. Pokud jste postupovali podle pokynů, máte již vytvořeny stránky _siteLayout.cshtml a _PageStart.cshtml. Pokud ne, nebude zbytek tohoto kódu fungovat, takže se budete muset vrátit k článku 3 a napravit to.
Na rozložení je výhodné, že nyní pouze potřebujete napsat konkrétní kód pro konkrétní stránku, přičemž volání příkazu @RenderBody() v šabloně jej vloží do úplné stránky.
Vytvořte proto novou stránku CSHTML a pojmenujte ji dataMovies.cshtml.
Veškerý kód na této stránce nahraďte tímto statickým kódem HTML, který jste používali dosud:
1: <div id="movieslist">
2: <ol>
3: <li><a href="#">It's a wonderful life</a></li>
4: <li><a href="#">Lord of the Rings</a></li>
5: <li><a href="#">The Fourth World</a></li>
6: <li><a href="#">The Lion King</a></li>
7: </ol>
8: </div>
9:
Pokud se na kód podíváte blíže, můžete si všimnout, že seznam <ol> je určen značkou <div>.
Tento statický seznam obsahuje čtyři položky. Pokud potřebujete pátou položku, přidáte nový záznam <li></li>.
Při načítání dat z databáze do stránky není známo, kolik položek databáze obsahuje, takže by vzniklo n elementů <li></li>, kde n je počet záznamů v databázi. K tomu se skvěle hodí kód smyčky, který za chvíli vytvoříte.
Předtím je ale třeba stránku informovat o databázi. Na začátek stránky dataMovies.cshtml zadejte následující kód:
1: @{
2: var db= Database.Open("Movies");
3: var sqlQ = "SELECT * FROM Favorites";
4: var data = db.Query(sqlQ);
5: }
6:
Z minulého článku si pamatujete symbol @, jenž serveru dává pokyn, že následuje kód Razor, který má provést. V tomto případě má kód několik řádků, takže namísto vložení symbolu @ před každý řádek můžete použít znaky @{, napsat potřebný kód a poté blok kódu ukončit znakem }.
Pokud jste používali jazyk Java, C++, C nebo C#, pravděpodobně víte, že se jedná o složené závorky.
Rozeberme tento kód řádek po řádku:
var db= Database.Open("Movies");
var znamená Variable (proměnná) a jedná se o adresovatelnou položku obsahující data. Tento kód dává serveru pokyn, aby otevřel databázi s názvem Movies a uložil do proměnné s názvem db odkaz na tuto databázi.
var sqlQ = "SELECT * FROM Favorites";
Tento řádek kódu pak vytvoří proměnnou s názvem sqlQ a uloží do ní SQL příkaz SELECT * FROM Favorites.
Při používání databází se k hledání požadovaných dat často používá jazyk SQL (Structured Query Language). Jeho možnosti přesahují pouhé dotazování dat a lze jej použít ke vkládání nových dat, jak uvidíte v dalším článku, ale prozatím jej použijeme pouze k získání dat.
Při získávání dat z databáze se často používá příkaz SELECT. Syntaxe je následující: SELECT <co> FROM <odkud> WHERE <podmínka>.
Parametr <co> může být seznam polí nebo zástupný znak (*) znamenající „vše“. Protože není zadána podmínka, příkaz SELECT * FROM Favorites získá všechny sloupce a všechny záznamy z tabulky Favorites.
var data = db.Query(sqlQ);
Tento příkaz je jádrem stránky. Předtím jste otevřeli databázi a jako odkaz na tuto databázi použili proměnnou db. Sada WebMatrix dokázala rozpoznat, že jste otevřeli databázi, přičemž databázový objekt má v sadě WebMatrix celou řadu funkcí (zpravidla nazývaných metody), které vůči němu můžete volat. Jednou z nich je metoda Query, která spustí SQL příkaz. Tento příkaz předáte ve formě řetězce, který databáze provede a vrátí sadu záznamů. Tato sada záznamů je poté načtena do proměnné s názvem data. Jakmile máte data, můžete s nimi dělat zajímavé věci.
V tomto okamžiku by stránka měla vypadat takto:
1: @{
2: var db= Database.Open("Movies");
3: var sqlQ = "SELECT * FROM Favorites";
4: var data = db.Query(sqlQ);
5: }
6: <div id="movieslist">
7: <ol>
8: <li><a href="#">It's a wonderful life</a></li>
9: <li><a href="#">Lord of the Rings</a></li>
10: <li><a href="#">The Fourth World</a></li>
11: <li><a href="#">The Lion King</a></li>
12: </ol>
13: </div>
14:
Získali jste data z databáze, ale zatím s nimi nic neudělali. Na stránce se stále nachází statický kód HTML. To se brzy změní.
Nejprve odstraňte vše kromě jedné ze značek <li>, aby seznam <ul> vypadal takto:
1: <ul>
2: <li><a href="#">It's a wonderful life</a></li>
3: </ul>
Vzpomeňte si na dřívější tvrzení, že pokud existuje n databázových polí, měli bychom mít v seznamu n položek. Toho lze dosáhnout pomocí smyčky, kterou nyní vytvoříte.
S využitím syntaxe Razor přidáte kód pomocí symbolu @, takže smyčka bude vypadat takto:
1: <ul>
2: @foreach(var row in data)
3: {
4: <li><a href="#">It's a wonderful life</a></li>
5: }
6: </ul>
7:
Tento kód dává serveru pokyn, aby spočítal počet řádků dat a pro každý z nich zapsal značku <li>.
Výsledkem tohoto kódu by samozřejmě bylo, že film „It’s a wonderful life“ by byl zapsán čtyřikrát, protože databáze obsahuje čtyři položky.
Server provádí pouze to, co mu přikážete, přičemž tento kód mu dává pokyn, aby zapsal název tohoto filmu do každého řádku dat.
Chtělo by to trochu vylepšit. Ve skutečnosti chcete, aby byl pro každý řádek dat zapsán název filmu v tomto řádku. Jinými slovy potřebujete, aby text „It’s a wonderful life“ zmizel a byl nahrazen názvem filmu v řádku, na kterém se smyčka aktuálně nachází.
Při vytváření databáze jste sloupec, který obsahuje název filmu, pojmenovali „Name“, a také již víte, že aktuálnímu záznamu se říká „řádek“, takže můžete odvodit, že hodnota row.Name bude obsahovat název filmu.
Změňte tedy tento kód takto:
1: <ul>
2: @foreach(var row in data)
3: {
4: <li><a href="#">@row.Name</a></li>
5: }
6: </ul>
Nyní serveru dáváte pokyn, aby pro každý řádek dat zapsal do elementu <li> pole Name z tohoto řádku. Výsledek bude vypadat takto:
Jak vidíte, jsou zde znovu všechny filmy.
Nyní, když je stránka dynamická a načítá filmy na základě dat v databázi, přidáte do databáze další film a zjistíte, co se stane.
Jednoduše se vraťte do editoru databáze, otevřete tabulku Favorites a přidejte nový řádek dat, který vypadá takto:
Pak stránku spusťte. Seznam obsahuje nový film, aniž jste napsali jakýkoli kód HTML.
Pokud jste již v minulosti vytvářeli kód v řádkových jazycích jako je tento, mohli jste si všimnout, že sada WebMatrix je natolik inteligentní, že zapíše obsah, pokud jej umístíte do řádku ve značce <li>. Není nutné používat příkazy write row.Name ani podobné, stačí pouze zadat @row.Name na požadované místo. Díky tomu je úprava a údržba souborů CSHTML mnohem jednodušší než u jazyků, jako je například PHP, kde byste museli použít příkaz <?php echo(row.Name);> nebo něco podobného.
Tato vlastnost také umožňuje bezproblémově kombinovat dynamický a statický obsah. Kód můžete například změnit takto:
1: <div id="movieslist">
2: <ol>
3: @foreach(var row in data){
4: <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>
5: }
6: </ol>
7: </div>
Výsledkem je jednoduchá integrace statického kódu HTML (čárek) a dynamického databázového obsahu (polí), který vypadá takto:
Právě jste tedy vytvořili svoji první dynamickou webovou datově orientovanou stránku. Je to jednodušší, než byste řekli!
Shrnutí
V tomto článku jste dříve vytvořený seznam filmů převedli na dynamický datově orientovaný web. Vytvořili jste databázi SQL Server Compact s tabulkou obsahující oblíbené filmy a poté zjistili, jak napsat kód, který tyto filmy načte z databáze a odešle do prohlížeče jejich údaje ve formě kódu HTML. Ve spojení s funkcí rozložení popsanou v článku 3 jste poznali, jak pro tento účel vytvořit stránku CSHTML, která je velmi jednoduchá a dělá to, co potřebujete.
V následujícím článku bude vysvětlen další krok – co se stane, chcete-li uživatelům umožnit přidávání filmů do databáze, pokud nemají přístup ke zdrojovému kódu sady WebMatrix jako vy. Zjistíte, jak vytvořit webové rozhraní, které jim umožní zadat podrobnosti pomocí prohlížeče, a vytvoříte kód, který tyto podrobnosti načte do databáze, přičemž na webu se tyto změny okamžitě projeví.