27. března 2008 8:09
výuka, semináře
Dnes ráno jsem začal vyučovat nový dobrovolný seminář, který se
zabývá programováním na webu – práci
s formuláři a aktivními prvky internetových stránek. Svým
žákům jsem slíbil, že materiály budu zveřejňovat na webu, tak se třeba
budou hodit i vám.
Seminář ve škole probíhá každý čtvrtek od 7.00 do
7.45 a je otevřený všem žákům ZŠ Vrchlického
v Liberci a mohou tedy přijít a kdykoliv se zapojit.
Jednotlivé lekce jsou pouze hodinové a řešené příklady tedy budou
krátké a snad i dostatečně názorné.
Důležité je zmínit, že momentálně stránky tvoříme s pomocí
Microsoft Visual Studia 2005 a píšeme je za využití
ASP.net 2.0, ale velmi brzy (po nějakých komplexnějších
úpravách na síti školy) budeme používat Visual Web Developer
2008 Express a tedy i ASP.net
3.5 a to včetně ASP.net AJAX.
Otevření Visual Studia a založení webového projektu
Naši první lekci dnes začneme spuštěním Visual Studia (případně
Visual Web Developeru), které naleznete po instalaci někde v menu Start.
Pozor, první spuštění trvá o něco déle…
Jakmile je před vámi již spuštěné prostředí Visual Studia,
založíme nový webový projekt kliknutím na položku
v menu: File > New Web Site… Otevře se okno, ve
kterém můžete zvolit typ projektu a jeho vlastnosti. My budeme všechny
projekty psát za pomocí jazyka Visual Basic .net a budeme je tvořit klasicky
v souborech na našem disku C:
Důležité je zvolit jako typ projektu ASP.NET Web Site, nechat vybraná
nastavení dle obrázku a určit název adresáře, do kterého se má webový
projekt uložit.
Webový projekt se
otevře rovnou i s vytvořenou základní internetovou stránkou
Default.aspx, kterou ihned můžeme začít editovat a
připraveným konfiguračním souborem web.config. Všechny
soubory, které máme ve webovém projektu, nalezneme v okně
Solution Explorer, kterou naleznete ve standardním
rozložení v pravém horním rohu Visual Studia. Důležité je si
všimnout, že internetové stránky, které budeme tvořit v ASP.net
mají příponu .aspx a navíc k nim je přiřazen
i druhý soubor se stejným názvem rozšířeným o příponu
.vb (Visual Basic) nebo .cs
(v případě jazyku C#). Do souboru ASPX píšeme přímo (X)HTML
kód případně doplněný o speciální objekty ASP.net a
do souboru VB píšeme program ve Visual Basicu, který
zajišťuje námi požadovanou funkci internetové aplikace.
Vytvoření jednoduchého formuláře
Nyní si konečně
vyzkoušíme jak lze do stránky vložit formulářové prvky ASP.net. Naše
aplikace bude obsahovat jedno textové pole, tlačítko a místo, do kterého
budeme moci programem zapisovat text.
Pokud chcete na stránku vložit jakýkoliv objekt, stačí jej najít na
liště Toolbox (standardně je umístěn na levé straně VS)
a následně přetáhnout pomocí myši přímo do stránky (a to lze jak do
stránky, na kterou nahlížíte v režimu design i stránky
zobrazené v režimu zdrojový kód). Tímto způsobem do
stránky vložte objekty TextBox (textové pole), Button (tlačítko) a
Label (pole pro textové popisky). Jedinou podmínkou je, že všechny
ASP.net objekty musí být vloženy dovnitř do značky <form
runat="server"></form>. Navíc stránku (například
v režimu zdrojového kódu) doplňte o další (X)HTML značky
například nadpisu stránky,…
Nastavení vlastností
U každého objektu ASP.net můžete nastavovat vlastnosti.
K vlastnostem každého objektu se dostanem tak, že na něj jednou
klikneme (tedy pouze ho vybereme) a pak všechny vlastnosti tohoto objektu
uvidíme v okně Properties, které standardně nalezneme
vpravo dole ve VS.
Tou základní vlastností je název – ID –
každého objektu, který slouží k jednoznačné identifikaci každého
objektu na stránce při programování funkčnosti webové stránky. Je tedy
logické, že ve stránce nesmí být žádné dva objekty se stejným
ID. Navíc je potřeba, aby ID nezačínalo číslicí a nesmí
obsahovat žádné mezery. Navíc doporučuji nepoužívat české znaky
s háčky a čárkami. Osobně jsem si navíc navykl na to, že do názvu
na začátku použiji zhruba 3 znaky na zkratku, která označí
o jaký typ objektu jde (např. txt pro TextBox, btn pro
Button,…) a následně doplním samotný název objektu dle jeho významu
začínající velkým písmenem.
Další velmi používanou vlastností, kterou má velká skupina objektů a
my ji dnes také využijeme, je Text. V této vlastnosti
jsou uchovávány texty, které se na objektu nějak zobrazují. Může jít
například o popisku tlačítka, text zobrazený nebo aktuálně
uživatelem zapisovaný do textového pole,…
Výsledný kód (X)HTML stránky
Nyní tedy můžeme upravit názvy a texty jednotlivých objektů.
A přímo do stránky doplnit texty a nadpisy. Když se pak podíváme do
zdrojového kódu stránky, měli bychom získat přibližně takovýto (X)HTML
kód:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Můj první formulář v ASP.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Můj první formulář</h1>
<p>
Zadejte své jméno:
<asp:TextBox ID="txtJmeno" runat="server"></asp:TextBox>
<asp:Button ID="btnOdeslat" runat="server" Text="Odeslat formulář..." />
</p>
<p>
<asp:Label ID="lblVypis" runat="server" Text="Zde bude text"></asp:Label>
</p>
</div>
</form>
</body>
</html>
Naprogramování funkce webové stránky
Teď konečně do stránky doplníme i její funkčnost. Od aplikace
budeme očekávat, že když uživatel zadá do textového pole jméno a
následně klikne na tlačítko „Odeslat formulář…“,
zadané jméno se zobrazí v popisce (Labelu) pod celým formulářem.
Pokud chceme napsat nějaký program, který se má vykonat při kliknutí na
tlačítko, stačí ve Visual Studiu v designu poklepat (dvojklikem) na
požadované tlačítko „Odeslat formulář…“. Tím se
dostanete do souboru se zdrojovým kódem zapsaným ve Visual Basicu. Visual
Studio za vás samo vytvoří potřebnou hlavičku procedury a vy se tak
můžete postarat jen o dopsání programu, který zajistí požadovanou
funkci.
Zapíšeme tedy program
lblVypis.Text = txtJmeno.Text
To zajistí, že do Labelu lblVypis, do jeho
vlastnosti Text se vloží aktuální hodnota
Textu zadaného do TextBoxu
txtJmeno.
Rozšíříme aplikaci o oslovení
Aby byla webová aplikace zajímavější, doplníme ji tak, že po zadání
jména a kliknutí na tlačítko se zobrazí text Ahoj Zadané
jméno, moc mě těší….
Musíme tedy program doplnit o přičtení potřebných textů před
jméno a za jméno. Texty se zapisují do uvozovek a
sčítají pomocí znaku &. Původní řádek tedy
přepíšeme na:
lblVypis.Text = "Ahoj " & txtJmeno.Text & ", moc mě těší..."
Celý kód aplikace
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub btnOdeslat_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOdeslat.Click
lblVypis.Text = "Ahoj " & txtJmeno.Text & ", moc mě těší..."
End Sub
End Class
Spuštění webové aplikace
Narozdíl od jednoduché (X)HTML stránky se nemůžeme přímo
v internetovém prohlížeči podívat na soubor stránky, ale musíme
spustit celou webovou aplikaci.
Spuštění webové aplikace provedeme stisknutím klávesy
F5. Při prvním spuštění budete dotázáni, zda chcete povolit
krokování programu (tzv. debugging) webové aplikace v době
testování.
Zvolíme, že chceme povolit debugging a během chvíle se nám již otevře
internetový prohlížeč a v něm naše funkční stránka.
Tím se nám dnes podařilo vytvořit naši první ASP.net stránku
s úplně jednoduchým formulářem. Pokud máte nějaké dotazy či
připomínky, napište je do komentářů pod článek a já se pokusím co
nejrychleji odpovědět.
autor: jerrysohn |
trvalý odkaz |
21. září 2006 7:31
výuka, semináře
Jak jsem slíbil, začnu zde zveřejňovat podklady pro výuku tvorby www
stránek. A tak začínám plnit svůj slib.
Pokud chcete začít tvořit vlastní www stránky, v tomto seriálu
– v této rubrice snad naleznete dostatek informací, které vám
s tím pomohou. Moji žáci ze ZŠ Vrchlického, Liberec budou mít navíc
tu výhodu, že zde uvedené návody budou moci snadno aplikovat ve škole na
svých žákovských účtech a pokud své výsledky práce uloží na
svůj osobní disky do složky html, rovnou se tyto stránky zobrazí
na osobních internetových
stránkách.
První www stránka
Dnes si ukážeme jak vytvořit první vlastní www stránku. Dnes ještě
opomeneme všechny nutné definice, ke kterým se vrátíme později.
Pokud chceme vytvořit (X)HTML stránku, mějme na paměti, že jde
o obyčejný textový soubor. Proto si nyní otevřte například
Poznámkový blok a můžeme začít tvořit.
WWW stránka se skládá z jednotlivých značek
(tagů), které označují, jak se která část www stránky má
zobrazit. Důležité je si uvědomit, že každý tag má svůj
začátek (název tagu v špičatých závorkách –
většítku a menšítku) a konec (hned po většítku je
uvedeno lomeno).
Základní struktura www stránky
<html>
<head>
<title>Titulek mé první www stránky</title>
</head>
<body>
</body>
</html>
Jak si můžete všimnout, stránka se skládá z několika základních
částí:
- stránka je celá zabalena do tagu , všechny
tagy musí být uvnitř této dvojice.
- stránka má svou hlavičku, která je umístěna v tagu
.
- obsahová část www stránky je umístěna v tagu
.
Jaký je rozdíl mezi částí head a body?
Do části
head zapisujeme informace, které nejsou
přímo zobrazeny uživateli. Jediná část, která se ve stránce zobrazí
uživateli, je titulek stránky. Ten je uveden v tagu
Titulek stránky. Tento titulek pak uživatel
vidí v titulkovém pruhu okna prohlížeče (nejčastěji modrý pruh
okna prohlížeče ve Windows).
Do části body pak zapisujeme samotný obsah www
stránky, kterou chceme uživateli zobrazit. Zde tedy budou tagy
s odstavci textu, obrázky, odkazy, seznamy,… Tato část se tedy
přímo zobrazuje v internetovém prohlížeči.
Odstavec textu a nadpisy
No a abychom dnes ještě do naší www stránky umístili alespoň nějaký
text, tak si řekneme, jak vložit odstavec textu a nadpis.
Odstavec textu musíme umístit do tagu
<p></p>, takže je to velice snadné.
No a pokud bychom chtěli na stránce mít také nadpis, můžeme použít
jeden z tagů pro nadpisy; od tagu
<h1></h1> (nadpis nejvyšší
úrovně) až po tag <h6></h6>
(nadpis nejnižší úrovně).
Takže naše první www stránka, která bude obsahovat dva odstavce textu a
dva nadpisy, bude vypadat následovně:
<html>
<head>
<title>Titulek mé první www stránky</title>
</head>
<body>
<h1>Moje první www stránka</h1>
<p>A takhle vypadá první odstavec textu, který jsem na svou stránku umístil.</p>
<h2>Nadpis úrovně 2</h2>
<p>
No a tady je další odstavec. Zde si můžete všimnout toho,
že v HTML jsou ignorovány mezery, vždy se akceptuje pouze
jedna mezera.
</p>
</body>
</html>
A co nakonec se stránkou udělat?
Stačí ji v poznámkovém bloku uložit s příponou
.htm nebo .html a pak už
si ji můžete prohlížet ve svém internetovém prohlížeči.
Co nás čeká příště?
V příští lekci se podíváme na další (X)HTML tagy.
autor: jerrysohn |
trvalý odkaz |