Návštěvní kniha v ASP.NET a MS SQL
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

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

Google       Google       29. 7. 2009       15 679×

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.

Reklama
Reklama

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.

- guestbook.aspone.cz
- guestbook.aspone.cz/GuestBook.rar

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Ladislav JanečekAutor se zajímá o ASP.NET, ADO.NET, AJAX a C#. Nově přirostl autorovi k srdci Wordpress, PHP, AJAX? jQuery, webdesign a tvorba stránek celkově.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý