Návštěvní kniha v ASP.NET a MS SQL

V dnešním článku si ukážeme, jak vytvořit jednoduchou knihu návštěv. V mnohých článcích se dozvíte, že tato záležitost je určena spíše pro pokročilé uživatele. Ovšem pro ty, co se rozhodli pracovat s ASP.NET, bude milé překvapení, jak snadné to je. Koneckonců, můžete se o tom přesvědčit sami.

Pokud vás snad odradily hrůzné kódy u jiných skriptovacích platforem, které jsou zapotřebí při tvorbě návštěvní knihy, nebo snad už nechcete na své stránky umisťovat parazitní guestbooky, s nehezkými reklamami obtěžujícími návštěvníky, a věnujete se alespoň trochu ASP.NET, pak vám tento návod pravděpodobně přijde vhod. Naše návštěvní kniha nebude nijak složitá. Data získaná od uživatelů se budou ukládat do lokální databáze. Bude zde pole pro uživatelské jméno, e-mail, www stránku a samotný text.

Takováto kniha si však vyžaduje i ochranu proti škodlivým botům nebo zlým návštěvníkům. Budeme tedy muset ošetřit formuláře tak, aby nebylo možné infikovat databázi útočným kódem „script injection“.

Vytvoření databáze

Nejprve vytvoříme databázi. Databázi vytvoříte například kliknutím pravého tlačítka myši na aplikační složku App_Data v Solution Exploreru, kde vyberete z kontextového menu položku Add New Item… Po kliknutí na tuto položku se vám otevře okno s možnými soubory, které můžete do této složky přidat. Vybereme tedy soubor SQL Server Database. Pokud se tento soubor v okně nenachází, pravděpodobně nemáte nainstalovaný MS SQL Server (Express), který je pro práci s databázemi nutný. Pokud tedy máte vytvořený soubor s databází, přejdeme do Database Exploreru. Po kliknutí pravého tlačítka myši na složku s názvem Tables vybereme položku Add New Table. Do právě vytvořené databázové tabulky vložíme 5 sloupečků. Sloupeček pro jméno, e-mail, web, text a datum.

Sloupeček pro jméno bude mít datový typ nvarchar s hodnotou 50. Dále pak sloupeček pro email a web, zde dáme stejný datový typ akorát s hodnotou 200. Sloupečku s textem nastavíme datový typ nvarchar(MAX) a nakonec čas, kde nastavíme datový typ datetime. U času se ještě zastavíme. Abychom nemuseli vkládat čas z aplikační vrstvy stránky, napíšeme (getdate()) do položky Default Value or Binding. Tím se vloží čas do databáze až tehdy, když jsou data ukládána.

Pro zdatnější čtenáře jsem vygeneroval SQL Script:

CREATE TABLE dbo.GuestBook
	(
	Jmeno nvarchar(50) NOT NULL,
	Text nvarchar(MAX) NULL,
	Email nvarchar(200) NULL,
	Web nvarchar(200) NULL,
	Datum datetime NULL
	)  ON [PRIMARY]
	 TEXTIMAGE_ON [PRIMARY]
GO
ALTER TABLE dbo.GuestBook ADD CONSTRAINT
	DF_GuestBook_Datum DEFAULT (getdate()) FOR Datum
GO

Vytvoření připojení

Databázi máme i s patřičnou tabulkou vytvořenou. Přejdeme tedy na stránku, kde vložíme komponentu SqlDataSource. Poté přejdeme do Design módu a v okně Configuration Data Source, pro SqlDataSource, vybereme z rozevíracího seznamu naši databázi a stiskneme tlačítko „Next“. Tím vytvoříme ConectingString v aplikačním souboru web.config. Po stisknutí tlačítka „Next“ přejdeme k dalšímu kroku průvodce. Zde vybereme z rozevíracího seznamu naši tabulku a z pole pod seznamem vybereme všechny sloupečky nebo jedinou položku *. Tímto jsme nastavili SqlDataSource, aby načetl všechny sloupečky z tabulky.

Před tím, než přejdete na další krok, stiskněte tlačítko ORDER BY…. V regionu Sort by vyberte položku s datem a přepněte na sestupné řazení Descending. Tím se zobrazený text z databáze bude řadit od nejnovějšího k nejstaršímu příspěvku, podle času vložení. Poté tlačítkem „Next“ dojděte až ke konci průvodce. Kód na stránce by měl vypadat takto:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
     ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
     SelectCommand="SELECT * FROM [GuestBook] ORDER BY [Datum] DESC">
</asp:SqlDataSource>

Zobrazení příspěvků na stránce

Pro zobrazení dat z databáze použijeme novou komponentu přicházející s ASP.NET 3.5 nazvanou ListViewer. Vybereme tedy z toolboxu tento prvek a vložíme jej do stránky. Nejprve připojíme tuto komponentu ke zdroji dat DataSourceID="SqlDataSource1". Dále pak přidáme do ListVieweru LayoutTemplate a do něj vložíme jakýkoliv HTML layout. Tento layout musí mít nastavenou hodnotu atributu runat="server" a ID="itemPlaceholder". Nakonec přidáme ListVieweru tag ItemTemplate. Zde umístíme, po patřičné úpravě, Evaly s názvy sloupců.

Jak jsem zmiňoval v úvodní části článku, musíme se taky postarat o to, abychom ochránili naši stránku od script injection útoků. Abychom ošetřili zobrazení HTML tagů z databáze, vložíme jednotlivé Evaly do komponent Label nebo Literar. U komponenty Literar musíme ještě nastavit Mode="Encode“. Celý kód komponenty ListViewer by měl vypadat takto:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
     <div runat="server" id="itemPlaceholder"></div>
  </LayoutTemplate>
  <ItemTemplate>
    <strong>
    <a href='mailto:<%#Eval("Email")%>'>
    <asp:Literal ID="Literal1" runat="server" Text='<%#Eval("Jmeno")%>' Mode="Encode" /></a>
    </strong> | <%#Eval("Datum")%> | 
    <a href='<%#Eval("Web")%>'>Www</a><br />
    <asp:Literal ID="Literal2" runat="server" Text='<%#Eval("Text")%>' Mode="Encode" /><hr />
  </ItemTemplate>
</asp:ListView>

Pokud v tuto chvíli spustíte projekt a v databázi máte nějaká data, měla by se vypsat na stránce jako text.

Stránkovaní příspěvků

Záměrně jsem použil pro zobrazování příspěvků na stránce komponentu ListViewer. U této komponenty totiž můžeme použít stránkovací prvek DataPager. Vybereme si tedy komponentu DataPager z toolboxu a vložíme ji mezi tagy LayoutTemplate v ListVieweru. Nejprve nastavíme hodnotu atributu PageSize="10". Tím nastavíme množství zobrazovaných příspěvků na stránce. V dalším kroku přidáme tagy Fields a do nich vložíme prvek pro typ stránkování. Zdrojový kód celého ListVieweru potom vypadá takto:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <div runat="server" id="itemPlaceholder"></div>
    <asp:DataPager ID="pagerBottom" runat="server" PageSize="10">
    <Fields>
    <asp:NumericPagerField ButtonCount="6" 
             NumericButtonCssClass="command" CurrentPageLabelCssClass="current" 
             NextPreviousButtonCssClass="command" />                                         
    </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <strong>
    <a style="text-decoration:underline;" href='mailto:<%#Eval("Email")%>'>
    <asp:Literal ID="Literal1" runat="server" Text='<%#Eval("Jmeno")%>' Mode="Encode" /></a>
    </strong> | <%#Eval("Datum")%> | 
    <a style="text-decoration:underline;" href='<%#Eval("Web")%>'>Www</a><br />
    <asp:Literal ID="Literal2" runat="server" Text='<%#Eval("Text")%>' Mode="Encode" /><hr />
  </ItemTemplate>
</asp:ListView>

Formulář pro přidávání příspěvků

V tuto chvíli máme funkční zobrazovaní příspěvků a jejich stránkování. Zbývá tedy již jen formulář pro přidávání. Na to použijeme komponentu FormViewer. Nejprve připojíme k formuláři patřičný zdroj dat, tedy DataSourceID="SqlDataSource1", a poté nastavíme defaultní režim pro vkládání, DefaultMode="Insert". Poté vložíme tagy InsertItemTemplate, abychom mohli editovat šablonu pro vkládání. Mezi tyto tagy pak vložíme formulář s TextBoxy, kde hodnota text bude <%#Bind("Sloupecek") %>.

Protože jsme nastavili v tabulce databáze určitou délku nvarcharu, musíme nastavit i omezený počet znaků v textboxech. Tím předejdeme chybovým hláškám aplikace způsobeným příliš dlouhým textem, který se snažíme vložit do databáze.

Nakonec do formuláře vložíme tlačítko. Jedinou hodnotou, kterou budeme nastavovat, je CommandName="Insert". Celý formulář by potom měl vypadat asi takto:

<asp:FormView ID="FormView1" runat="server" DefaultMode="Insert" 
       DataSourceID="SqlDataSource1">
  <InsertItemTemplate>
    Jméno:<br />
    <asp:textbox id="textName" runat="server" Width="350px" Text='<%#Bind("Jmeno") %>' MaxLength="<%# 50 %>" /><br />
    E-mail:<br />
    <asp:textbox id="textEmail" runat="server" Width="350px" Text='<%#Bind("Email")%>' MaxLength="<%# 200 %>"/><br />
    Web:<br />
    <asp:textbox id="textWeb" runat="server" Width="350px" Text='<%#Bind("Web")%>' MaxLength="<%# 200 %>" /><br />
    Text:<br />
    <asp:TextBox id="textText" Height="150px" runat="server" Width="350px" TextMode="MultiLine" Text='<%#Bind("Text")%>' /><br />
    <asp:button id="btnSubmit" CommandName="Insert" runat="server" Text="Odeslat"></asp:button>
  </InsertItemTemplate>
</asp:FormView>

Abych nezapomněl, u vytvoření připojení jsme nastavovali pouze SelectComand. Pokud však chceme do databáze vkládat data, musíme definovat i InsertComand a InsertParameters. U InsertComand je bohužel nutností znát jazyk SQL, u InsertParameters pak jen vypíšeme parametry, které jsou použity v InsertComand. Celý kód pak vypadá následovně:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
    SelectCommand="SELECT * FROM [GuestBook] ORDER BY [Datum] DESC"
    InsertCommand="INSERT INTO [GuestBook] ([Jmeno], [Text], [Email], [Web]) VALUES (@Jmeno, @Text, @Email, @Web)">
        <InsertParameters>
            <asp:Parameter Name="Jmeno" />
            <asp:Parameter Name="Text" />
            <asp:Parameter Name="Email" />
            <asp:Parameter Name="Web" />
        </InsertParameters>
</asp:SqlDataSource>

Závěrem

Jak již bývá mým zvykem, přidávám na závěr odkaz, kde si můžete výsledek mého snažení vyzkoušet. Celý projekt si pak můžete zase stáhnout z odkazu pod ním.