Internet alapú alkalmazásfejlesztés gyakorlat 1 ASPX feladatok (adatkezelés nélkül) 1-1 Egyszerű HTML űrlap készítése Hozzunk létre egy egyszerű HTML file-t, melyen egy text és egy password típusú beviteli elemet, valamint egy submit gombot szerepeltetünk egy űrlapon. Az első beviteli mezőbe egy nevet, a másodikba egy jelszót lehet írni. A submit gombra kattintásra hívjunk meg egy aspx file-t, mely kiírja a szerveroldalon átvett nevet, jelszót és a kérést végző gép IP-címét. Vizsgáljuk meg a post és a get típusú átadás közti különbséget.
1-2 Űrlap készítése szerveroldali HTML vezérlőelemmel Készítsünk ASPX file-t, melyben bekérhetjük a felhasználó nevét, életkorát és kedvenc autómárkáját. A lapon levő gombra való rákattintáskor íródjon ki a lap alján az összes bekért adat. A név és életkor bekérésére Text Field, az autómárka kiválasztására Listbox szerveroldali HTML elemet használjunk. Az eseménykezelést a gomb onServerlick eseményéhez rendeljük, a kódot szerveroldali scriptblokkba írjuk. Helyezzünk fel a lapra egy Text Field elemet, mely megjeleníti, hogy a lap első hívásáról van-e szó, vagy sem. Ehhez a Page.IsPostBack tulajdonság értékét olvassuk ki a Page_Load() eseményvezérelt eljáráson belül.
–1–
1-3 Összetett ASPX lap készítése Készítsük el az alábbi űrlapot:
Az alábbi követelmények alapján készítsük el a weblapot: · A Megye mező DropDownList control legyen, és négy magyarországi megyét vegyünk fel hozzá manuálisan. –2–
· A Jelszó mezőt TextMode=Password értékre állítsuk. · A Személyes információ megadása mellett két rádiógomb szerepel (ToolTip kitöltéssel), alatta egy Panel-ben egy CheckboxList és egy RadioButtonList · A Kategória DropDownList, az alkategória ListBox legyen, alattuk egy 2*3 cellából álló HTML táblázat szerepeljen. Ebben a Kategória Label elemként, az alkategória Read-only Textbox-ként, a szállítási cím pedig szerveroldali TD elemként jelenjen meg. · A táblázat alatt egy Button szerepeljen OK felirattal, majd egy Literal és egy Checkbox elem jön. Alá egy Image elemet rakjunk fel, melyhez egy létező képet rendeljünk hozzá. · Végül legalulra egy Hyperlink elem kerül. · Mentsük el a lapot Rendeles.Aspx néven
1-4 ASPX programozása Az 1-3 feladatban létrejött ASPX lapon végezzük el a következő kódolási feladatokat: · Az OK gomb lenyomása után a 2*3 cellából álló HTML táblázatban a Kategória jelenítse meg a legördülő listából kiválasztott kategóriát, az alkategória a Listbox-ban kiválasztott alkategóriát. Végül a szállítási cím a név, megye, irányítószám, város, utca-házszám adatok konkatenálását jelenítse meg. · A termék képének megmutatása jelölőnégyzet aktuális értékétől függően jelenjen meg, illetve tűnjön el a kép. Hasonló logikát építsünk be a panel megjelenítésébe, illetve eltüntetésébe. · Cseréljük le a Hyperlink-et LinkButton-ra. Response.Redirect-tel kell ilyenkor eljutni a megadott címre. · A termék kategória és az alkategória esetében szimuláljuk a hierarchikus kapcsolatot úgy, hogy a kategória egyjegyű számot tartalmaz, és az adott kategóriához tartozó alkategóriák ezzel a számmal kezdődnek (pl. kategória esetén az 1=Bikes, 2=Components. A Bikes kategóriában pedig 11=Mountain Bikes, 12=Road Bikes, 13=Touring Bikes, a Components kategóriában 21=Brakes, 22=Chains, stb.) Készítsük el a megfelelő kódot, hogy az alkategóriák mindig csak a kiválasztott kategóriához tartozó elemeket jelenítik meg. · Opcionális feladatként (Visual Studio 2008 használata esetén) AJAX-osítsuk az alkalmazást. Tegyünk fel egy ScriptManager controlt, valamint egy UpdatePanel-t. Figyeljük meg, hogy szerverhez fordulás nélkül működik a kategória/alkategória módosítás.
1-5 Adatellenőrzés Web vezérlőelemeket tartalmazó űrlapon Készítsük el az előző feladatban szereplő űrlapot Web vezérlőelemek felhasználásával. Használjuk a Label, TextBox, DropDownList, Button elemeket. A gombra történő kattintáshoz tartozó kódot mögöttes kódfile-ban helyezzük el, mely egy Label elembe jeleníti meg a lapon beírt és kiválasztott értékeket. Adjunk meg ellenőrzést az egyes elemekre a RequiredFieldValidator és a RangeValidator vezérlőelemek használatával: a név és kor kitöltése kötelező, emellett a kornak 0 és 120 közötti számértéknek kell lennie. A hibaüzenetek összesített megjelenítésére helyezzük fel a ValidationSummary vezérlőelemet, és töltsük ki az egyes validátorobjektumok Text tulajdonságát (pl.:*).
–3–
1-6 Témák (themes), bőrök (skins), CSS létrehozása · · ·
· · ·
Hozzuk létre a témakönyvtárat (App_Themes)! Ezen belül alakítsunk ki egy Alaptema nevű alkönyvtárat! Készítsünk egy Default.Css fájlt, melyben minimálisan a body tagra, a .forditott , a .textbox és a .button osztályra és a #balra ID-jű elemre írjunk elő stílust! Készítsünk egy Default.Skin nevű állományt! Ebben vegyünk fel egy asp:label-t default skin formában (azaz SkinID nélkül)! Vegyünk fel egy másik asp:label-t SkinID=”vastag” megjelöléssel! Vegyünk fel default skin-t az asp:textbox-hoz CssClass=”textbox” megjelöléssel! Vegyünk fel ugyanilyet a button-ra is! Állítsuk be az adott témát a web-config <pages> szekciójában! Próbáljuk ki az egyes elemeket! Ha marad idő, akkor készítsünk egy másik témát, amiben a CSS-t kissé átalakítjuk. Az egyik aspx lapra vegyünk fel két rádiógombot, és ezekkel lehessen módosítani a témát a lapon.
1-7 Masterpage · ·
Hozzunk létre egy Master Page-et! Felülre rakjunk egy képet, majd 3 Contentplaceholder-t helyezzünk el: balfelso, balalso és tartalom néven. Hozzunk létre egy Default.Aspx-et, és az egyik ContentPlaceHolder-be vigyünk be elemeket!
1-8 Lokalizáció, globalizáció · · · · · ·
Generate Local Resource menüponttal hozzunk létre a Rendeles.Aspx-hez .resx fájlt. Változtassuk meg a fájl nevét Rendeles.aspx.en.resx névre. Töltsünk fel angol nyelvű feliratokat az egyes aspx vezérlőelemekhez. Változtassuk meg a Page direktívában az uiculture értékét „en”-re, és próbáljuk ki a lapot a böngészőben. Készítsünk Kozos.resx néven egy explicit lokalizációt az App_Globalresources mappában. Vegyünk fel egy Cegnev nevű kulcsot, és állítsuk be Gábor Dénes Főiskola-ra. Próbáljuk megjeleníteni ezt az adatot markup bind révén, programból a GetGlobalResourceObject révén, és erős típusos módszerrel. –4–
2 Adatbázis-kezelés és megjelenítés 2-1 SQLDataSource használata DataList megjelenítéssel kombinálva · · · ·
Hozzunk létre egy Web controlt ctlFocsoport.ascx néven! Vegyünk fel egy SQLDataSource controlt, amivel az S_FOCSOPORT tábla tartalmát olvassuk ki – névre rendezve! Vegyünk fel egy DataList controlt, ami az előbbiből veszi az adatokat! Az egyes elemek híperhivatkozások legyenek az frmAlcsoport.aspx felé. Készítsünk egy frmFocsoport.aspx lapot, ahol felhasználjuk az imént létrehozott web controlt! A controlt a balfelso helyre helyezzük!
2-2 ObjectDataSource használata Repeater elemmel · · · · ·
Az App_Code könyvtárban készítsünk egy adatkezelő komponenst. Ebben a komponensben készítsünk el egy függvényt, ami meghív egy általános célú eljárást (paraméterekkel), és visszaad egy DataTable objektumot. (ETFill)! Gondoskodjunk arról, hogy a Connection információ a web.config-ból származzon! Írjuk meg a konkrét függvényt az alcsoport adatok elérésére! Készítsünk egy frmAlcsoport.aspx nevű lapot, ahova felrakunk egy Repeater elemet. Az adott elem adatforrása az előző pontban készített adatkezelő rétegbeli függvény legyen! Az egyes elemek hiperhivatkozások legyenek az frmTermek.aspx lap felé.
2-3 XSD-ként létrehozott ObjectDataSource használata GridView elemmel · · · ·
Az App_Code könyvtárban készítsünk egy új XSD-t, mely a Termek táblát írja le! Gondoskodjunk arról, hogy generált tárolt eljárások valósítsák meg az adatlekérést és a módosítást is (Insert, Update, Delete)! Az adatlekérés két paramétert kap (főcsoport és alcsoport) Készítsünk egy frmTermek.aspx lapot, ahol egy GrdiView elemmel oldjuk meg a megjelenítést és módosítást! Ha marad idő, akkor egy DetailsView elemet is rakjunk fel ide, és kapcsoljuk össze a két komponenst. A szerkesztés az utóbbi elemmel történjen.
2-4 TreeView elem használata hierarchikus adatok megjelenítésére · · · ·
Hozzunk létre egy új lapot frmFa.aspx néven. Vegyünk fel ebben egy TreeView elemet! Készítsük el SQL Server 2005-ben a megfelelő FOR XML PATH tagot tartalmazó SELECT-et tárolt eljárásként, ami visszaadja a főcsoport és alcsoport adatokat XMLként egymásba ágyazva. Az adatkezelő rétegben készítsük el ennek az eljárásnak a meghívását, és az XML adatok string-ként való visszaadását. Vegyünk fel egy XMLDataSource vezérlőelemet. Kapcsoljuk hozzá a fához (TreeNodeBind), és az előző pontban kapott XML string-et vigyük bele ebbe az elembe.
Web Service 3-1 Egyszerű web-szolgáltatás készítése ·
Készítsünk egy Web Service projektet abból a célból, hogy adott városhoz tartozó partnerek adatait lekérhessük. –5–
· ·
A GetPartnerFromVaros nevű metódus egy string-et vár, és egy DataTable objektumot ad vissza. Vegyünk fel egy Partner.aspx lapot. Ezen a lapon legyen egy GridView és egy TextBox. Az utóbbiba begépelt városhoz tartozó partnerek jelenjenek meg a táblázatban.
ASP.NET Membership 4-1 Login vezérlők használata · · · · · · · ·
Hozzunk létre egy MemberPages nevű mappát, ahova majd a korlátozottan elérhető lapok kerülnek! Konfiguráljuk a webes alkalmazást a Website… ASP.NET COnfiguration menüpont segítségével! Vegyünk fel egy új felhasználót! Vizsgáljuk meg az ASPNETDB.MDF adatbázist! Az Access Rules-nál tiltsuk ki az anonim felhasználókat ebből a mappából! Vegyünk fel egy nyitó oldalt (Nyito.Aspx vagy Default.Aspx néven)! Egy üdvözlő szöveg mögé rakjunk fel egy LoginStatus vezérlőelemet! Készítsünk egy Login.Aspx oldalt, melyre rakjunk fel egy Login vezérlőelemet! Tegyünk ValidationSummery-t is az üzenetek megjelenítéséhez! A nyitó lapra rakjunk egy LoginView vezérlőelemet, és töltsük ki a két template-et értelemszerűen. A bejelentkezett felhasználó nevét a LoginName vezérlővel írassuk ki. Vegyünk fel egy Tag.aspx lapot a MemberPages mappába, és teszteljük le, ki férhet ehhez hozzá! Készítsünk regisztrációs lapot Register.aspx néven! A ContinueDestinationPageUrl tulajdonságba állítsuk be a nyitó lapot. A nyitó lap anonim template-jébe rakjunk be egy hiperhivatkozást a regisztrációra! Vegyünk fel egy JelszoCsere,Aspx-et a MemberPages mappába! Tegyünk fel ChangePassword vezérlőelemet, töltsük ki a megfelelő tulajdonságokat (pl. ContinueDestinationPageUrl, CancelDestinationPageUrl)
–6–
