A gyakorlaton megoldandó feladat Egy leegyszerűsített online könyváruházat fogunk elkészíteni, amely két oldalból fog mindösszesen állni. Az egyik lapon kilistázzuk a legfrissebb 5 könyvet, míg a másikon a szerző neve alapján tudunk majd keresni a könyvek között. Áttekintés Eme alkalmazáson keresztül megismerkedünk az ASP.NET-es adatbázis kezelés alapjaival. Az alábbi új vezérlőket, illetve segédosztályokat fogjuk felhasználni a feladat megvalósítása közben: SqlDataSource, GridView, WebConnfigurationManager, SqlConnection, SqlCommand, SqlDataReader, DataTable, stb.. Probléma - Tervezés A mai rohanó világban, ahol egyre több és több információra van szükségünk, egyedül csak az internet képes csillapítani eme szomjúságunkat. A világhálón lévő dinamikus weboldalak 99%-a mögött valamilyen adatbázis található, melyekben eltárolják ezeket az információkat. Könnyen látható tehát, hogy a web-es alkalmazások fejlesztésénél kulcsfontosságú szerepet kap az adatbázisokkal történő kommunikáció. 2001 óta (.NET 1.0 megjelenése) a Microsoft rendkívül sokféle megoldással állt elő erre a problémára. Ezen a gyakorlaton mi most két technikával fogunk foglalkozni, míg a következőn még további két lehetőséggel fogunk megismerkedni. Az első módszer lényege, hogy színtisztán csak markup kód segítségével le tudunk kérdezni, meg tudunk jeleníteni, illetve esetleg akár módosítani is tudunk adatbázisban tárolt adatokat. A dolog legnagyobb előnye, hogy nullasornyi C# kód írással képesek vagyunk sokféle adatbázissal kapcsolatos feladat elvégezésére. Ennek persze ára van még pedig, hogy a felhasználói felületet leíró kódban nem csak az adatok megjelenítésével foglalkozunk, hanem azt is meg mondjuk, hogy miként és honnan szeretnénk kinyerni ezeket az információkat. Nagyobb alkalmazások esetén célszerű a megjelenítést és az üzleti logikát (jelenesetben az adatbázisbeli adatok elérést) különválasztani! Emiatt a második technikát gyakrabban is szokták alkalmazni üzleti alkalmazások fejlesztése során. Ebben az esetben nekünk kell megírnunk kézzel C# nyelven az adatbázis kezeléssel kapcsolatos kódokat. Ennek az egyik legnagyobb előnye, hogy így egyszerre két fejlesztő is képes dolgozni ugyanazon az oldalon (egyikőjük a megjelenítésen dolgozik, míg a másik az adatelérésen). Megvalósítás Nulladik lépésként az adatbázis létrehozásával foglalkozunk, majd ezek után az adatok megjelenítéssel folytatjuk tovább az ismerkedést, ugyanis mindkét technika esetén ez azonos módon történik. Végül pedig az adatok kinyerésének fent említett módjait nézzük meg a gyakorlatban.
Adatbázis létrehozás Egy adatbázist sokféleképpen létre lehet hozni. Alapvetően vagy egy szöveges sql script fájl segítségével vagy pedig egy grafikus felületen keresztül. Mi az utóbbit választjuk. Itt két segédeszköz közül válogathatunk, az egyik a Visual Studio-ba beépített Server Explorer-en keresztül elérhető adatbáziskezelő felület, a másik pedig az SQL Management Studio, amely mindenféle adminisztrátori feladat elvégzését is lehetővé teszi. Mi most csak a Visual Studio-s segédeszközt fogjuk megnézni. Először létre kell hozni egy adatbázist (App_Data mappán jobb klikk >> Add New Item >> DataBase), amelyre duplán kattintva a Solution Explorer-ben, kapcsolódni tudunk. Ezek után a Server Explorerben keressük meg a Tables mappát, melynek a helyi menüben válasszuk ki az Add New Table menüpontot. Itt egy olyan felületet kapunk, melyen keresztül fel tudjuk sorolni az egyes mezőket (mezőnév, adattípus, lehet-e null) hármasok megadásával. Íme, egy képernyőkép a KönyvÁruház adatbázisunk Könyv táblájáról. A könyváruház adatbázis sok féleképpen megvalósítható, mi az alábbi módon tettük meg ezt, amelyet az 1. függelékben található entitás modellel 1 reprezentálunk. A Konyv tábla felelős a könyvek adatainak tárolásáért. A Szerzo adattáblában a szerzőkről tartunk nyílván információkat. A KonyvSzerzoKapcsolo segédtábla a sok-sok kapcsolatok leírásához kell. Ugyanis egy könyvnek lehet több szerzője is, illetve egy szerzőnek lehet több könyve is. A Raktar-ban a raktáron lévő könyvek darabszámot tároljuk. A Vasarlo-ban a vevő adatai, míg a Rendeles-ben a hozzájuk kapcsolódó rendelések adatai találhatóak. 1 Entitás modell: Az adatbázisok relációs modelljének objektumokkal történő reprezentálása. A tábláknak az objektumokat (entitásokat) feleltetjük meg és a táblázatok mezőit pedig az entitások tulajdonságainak. A relációk közötti kapcsolatok is megjelennek a modellben oly módon, hogy például egy 1-sok kapcsolatnál az 1 oldali objektum tulajdonságai között lesz egy olyan lista, mely a hozzákapcsolódó sok oldali objektumokra mutat.
Adatmegjelenítés Ebben a feladatban mi most egy úgynevezett GridView-t fogunk használni az adatok reprezentálásához. Ezen vezérlő segítségével táblázatos formában tudjuk felsorolni egymás alatt az egyes adattáblabeli rekordokat. Ehhez viszont arra van szükségünk, hogy megmondjuk, hogy a táblázat egy adott oszlopa, mely mezőjét jelenítse meg a rekordoknak. 2 Ezeket a GridView Columns tulajdonságán keresztül tudjuk felsorolni, amelyet akár grafikus felületen keresztül is beállíthatunk. Design vagy Split nézetben a GV gyorsmenüjéből válasszuk ki az Edit Columns... menüpontot. Itt az Available fields listában találhatóak a választható oszloptípusok. Nekünk most csak a Boundfield-re és az Imagefield-re lesz szükségünk. A Boundfield DataField tulajdonsága szolgál arra, hogy megszabjuk, melyik mezővel szeretnék összekapcsolni. Itt egy legördülő listából választhatjuk ki a megfelelő mező nevét 3. Míg Imagefield esetén ugyanezt a DataImageUrlField-en keresztül tudjuk beállítani. Íme, egy egyszerű példa a GridView használatára: <asp:gridview ID="gv_books" runat="server" AutoGenerateColumns="False"> <Columns> <asp:imagefield DataImageUrlField="Borito" HeaderText="Borító"/> <asp:boundfield DataField="Cim" HeaderText="Cím"> <ItemStyle Font-Bold="True" /> </asp:boundfield> <asp:boundfield DataField="Kategoria" HeaderText="Kategória"> <ItemStyle Font-Italic="True" /> </asp:boundfield> </Columns> </asp:gridview> A GridView alap kinézete könnyedén megváltoztatható még pedig úgy, hogy valamelyik előre definiált stílust beállítjuk neki. Ezt a GV gyorsmenüjében lévő Auto Format menüpontra kattintva tehetjük meg. A gyakorlat folyamán mi a Professional sémát fogjuk használni. 2 Az objektumok tulajdonságait összekapcsoljuk a táblázat mezőivel. 3 A listában csak akkor fog elem szerepelni, ha van DataSource vezérlőnk. Lásd később.
Adatelérés 1. változat Markup kódból A nulla kódsoros adatelérést úgynevezett DataSource (adatforrás) vezérlők segítségével tudjuk megvalósítani. Ezek mindegyikéhez tartozik egy-egy varázslófelület, amelyen keresztül grafikusan választhatjuk ki, hogy milyen adatokra is van nekünk szükségünk. ASP.NET 4.0 esetén már 7 különböző adatforrás vezérlő található alapból a Toolbox-on. Ezek közül mi most csak az SqlDataSource-szal fogunk foglalkozni, amely segítségével Microsoft SQL Server példányokhoz tudunk kapcsolódni. Mindenegyes DS vezérlőhöz tartozó varázsló kicsit eltér a másiktól, de abban mindegyik megegyezik, hogy először azt kell megszabni, hogy mihez akarunk csatlakozni (szervernév + adatbázisnév), illetve mely felhasználó nevében. Ezeket az információkat egy speciális string-be gyűjtjük össze, melyet ConnectionString-nek neveznek. Ezt a web.config-ban szokás tárol. A varázsló természetesen felajánlja nekünk, hogy az összekattintgatott connectionstring-et elmenti a web.config-ba. Íme, egy példa: Data Source=.\sqlexpress08;Initial Catalog=KonyvAruhaz; Integrated Security=True. Bővebb információ: http://connectionstrings.com/ Az SqlDataSource-hoz tartozó varázsló további lapjain magát az sql lekérdezés kattintgathatjuk össze, illetve próbálhatjuk ki. Miután ezzel megvagyunk, már csak egyetlen dolgunk maradt: az adatforrás vezérlőt össze kell kapcsolnunk valamelyik megjelenítésre szolgáló vezérlővel. Ezt a DataSourceID tulajdonsággal tudjuk megtenni, ahol az adatforrás vezérlő azonosítóját (ID-ját) kell megadnunk.
Adatelérés 2. változat C# kódból Most ismerkedjünk meg a kódolós lehetőséggel. Ebben az esetben hasonlóan az előzőhöz, először egy kapcsolatot kell létrehoznunk az adatbázissal. Erre a feladatra az SqlConnection nevezetű objektumot fogjuk használni, melynek a konstruktorában megadható a már fentebb is említett ConnectionString. Mivel ez a string a web.config-ban van eltárolva, ezért ezt előbb onnan ki kell nyernünk. Ehhez a WebConfigurationManager segédosztályt kell használnunk. Miután létrehoztunk egy példányt az SqlConnection-ből és megadtuk neki a megfelelő kapcsolódási paramétereket, utána meg kell nyitnunk az adatcsatornát. Ezt az Open metódussal tehetjük meg. Most, hogy már van egy élő adatbázis kapcsolatunk, az alábbi négy feladat vár még ránk: 1.) adott sql utasítás előállítása 2.) végrehajtása 3.) adatok kinyerése az eredményhalmazból 4.) megjelenítővel történő összekapcsolása. 1.) Ehhez egy SqlCommand objektum példányra lesz szükségünk. Ennek a CommandText tulajdonságán keresztül tudjuk beállítani az adott SQL utasítást, amelyet végre szeretnénk hajtatni. 2.) A végrehajtásnak többféle módja lehetséges attól függően, hogy milyen eredményt várunk az sql utasítástól. Az alábbi táblázat ezt hivatott összefoglalni. SQL utasítás által visszaadott eredmény nem ad vissza (pl.: Update ) egyetlen érték (pl.: Select count(*) ) több rekord/táblaértékű (pl.: Select * ) Az SqlCommand-on meghívandó függvény ExecuteNonQuery() ExecuteScalar() ExecuteReader() 3.) Vegyük azt az esetet, amikor a lekérdezésünk táblaértékű, vagyis több rekordot is visszaadhat. Ilyenkor ugyebár az ExecuteReader() metódust hívjuk meg, amely visszaad egy SqlDataReader objektumot. Ebből úgy tudjuk a legegyszerűbben kinyerni az adatot, ha betöltjük egy DataTable objektumba. Vagyis létre kell hoznunk belőle egy példányt és meg kell rajta hívnunk a Load metódust úgy, hogy paraméterként megadjuk az ExecuteReader-től kapott SqlDataReader-t. 4.) A megjelenítő vezérlő DataSource tulajdonságának értékül kell adnunk a DataTable-t, majd utána meg kell hívnunk rajta a DataBind() metódust. Fontos 1.) DataSource!= DataSourceId 2.) Ne felejtsük le a DataBind metódushívást, mivel enélkül nem fog megjelenni semmi a UI-on! Végezetül, íme, az általános váza a kódírásos módszernek: string connstring = WebConfigurationManager.ConnectionStrings["ConnStringName"].ConnectionString; DataTable table = new DataTable(); using (SqlConnection conn = new SqlConnection(connstring)) { conn.open(); using (SqlCommand comm = conn.createcommand()) { comm.commandtext = "SELECT * FROM "; SqlDataReader reader = comm.executereader(); table.load(reader); } } gridview_result.datasource = table; gridview_result.databind();
Néhány megjegyzés a fentebbi kódrészlethez: - Az SqlConnection-t azért tesszük bele egy using blokkba, mivel így a blokk végén automatikusan meghívódik a destruktor, ami pedig meghívja a Close metódust, vagyis így bezáródik az adatcsatorna. (Valós rendszerek esetén try catch blokkba érdemes elhelyezni az SqlConnection-t és a finally blokkban pedig bezárni az adatcsatornát). - A DataTable oszlopai a SELECT listában szereplő mezők lesznek, amelyeket a Load metódus automatikusan létrehoz. (Kézzel is lehetséges az oszlopok megadása, így egyszerűen lehetséges számított mező létrehozása). - Az SqlDataReader-ből közvetlenül is ki lehet nyerni az adatokat rekordonként és azon belül mezőnként. Ilyenkor egy while ciklussal addig hívogatjuk a Read metódust, amíg igazat ad vissza és ezen belül, mint egy asszociatív tömb tekintünk a DataReader objektumra, ahol a tömb index az oszlop nevek. (Az értékek típusos kinyeréséhez a GetXYZ metódusok használandók). - A gridview_result jelenesetben a gv_books GridView-t jelöli. A kereső oldal A keresési funkció egyszerűen megvalósítható a fentiek alapján. A felhasználói felületet 1 Button-nal és 1 TextBox-szal kell kibővíteni. A kódban pedig egy WHERE feltételbe be kell ágyazni a TextBox tartalmát. Képernyőképek
1. Függelék