Internetes alkalmazásfejlesztés Endrődi Tamás

HTML alapok

Alap HTML tagok (1) HTML konténer tagok Karakter formázó HTML tagok Sorformázó HTML tagok P H1, H2, stb. BR, NOBR PRE CENTER 1.1 1.2 1.3 1.4 1.5 1.6

Alap HTML tagok (2) Kép (IMG) Hiperhivatkozás (A) Listák létrehozása A HREF attribútum megadásának lehetőségei Listák létrehozása Rendezetlen lista (UL) Rendezett, sorszámozott lista (OL) Lista elemek (LI) 1.7 1.8 1.9

HTML tábla TABLE elem Táblázatok formázásának attribútumai Táblasorok (TR) Táblacellák (TD) Táblázatok formázásának attribútumai BORDER CELLSPACING, CELLPADING BGCOLOR, BACKGROUND COLSPAN, ROWSPAN HTML táblák egymásba ágyazása Összetett Web lap megjelenítése táblaként 1.10 1.11 1.12 1.13 1.14

HTML keret (Frame) Frame és Frameset szerepe COLS attribútum In-line keretek alkalmazása (IFRAME) Frameset-ek egymásba ágyazása Navigálás a keretek között TARGET attribútum 1.15 1.16 1.17

További HTML elemek COMMENT FIELDSET és LEGEND MAP SPAN és DIV XMP A karakter egyedek használata 1.18 1.19 1.20 1.21 1.22 1.23

Cascading Style Sheet

A CSS előnyei A tartalom szétválasztható a formától Önállóan tervezhető és újrafelhasználható A régi technikában számos szöveg grafikaként jelent meg, ami lassú A CSS csak egyszer megy le a kliens gépre, és nem laponként külön-külön Egységes megjelenés Külön CSS lehet a képernyőre, és külön a nyomtatóra.

CSS vezérlés Láthatóság (visibility) Megjelenítés (Display) pl. reflow (maradjon-e üres hely, vagy az alatta lévők feljebb kússzanak) Z-sorrend (Z order) Az adott elem relatív mélysége Web Embedding Font Tool (WEFT) Csak az IE használja

CSS szabályok definiálása Szintaktika: szabályhatáskör {attr:érték;attr:érték;…} Tag példa: body {font-family:ariel;font-size:10;} Osztály példa: .error {font-color:red} A pont (.) jelenti azt, hogy ez egy osztályszabály

CSS használata Magába a tagba is rakható stílus információ Kivételes körülmények között Stíluslap szintaktikája Globális stíluslap a /HEAD szekcióban HTML LINK tag használata Az elsődlegeshez ezt célszerű használni Osztályok Stílus osztályok Globális osztályok Pszeudoosztályok 2.1 2.2 2.3 7.6 2.4 2.5 2.6

DHTML alapok

A DHTML komponensei (1) Document Object Model Dynamic Styles Objektumok, tulajdonságok, metódusok, események Dynamic Styles Dinamikus stílus beállítás lehetősége A stílus élesen elválik a tartalomtól Dynamic Positioning A betöltést követő helyváltoztatás lehetőségét nyújtja. Animáció készítésének lehetősége.

A DHTML komponensei (2) Dynamic Contect Data binding A tartalom dinamikus változtathatósága Elemek beillesztése, illetve törlése Szöveg és egyéb attribútumok módosítása Data binding Adathordozó vezérlőelemek beépíthetősége

Kliensoldali script alkalmazása HTML komment technikát kell használni <SCRIPT Language=VBScript> <!-- Function Valami() …….. End --> </SCRIPT> Ha a böngésző nem ért VB-ül, akkor ignorálja, mert kommentnek tekinti. 5.2 5.3

VBScript szabályok VBScript-nél csak Variant adattípus van. A típust a VarType fg-vel lehet lekérdezni. Nem lehet konstans deklarálni. Automation objektumok: Dictionary, Err, FileSystemObject, TextStream Szerveroldali VBScript-ben tilosak: InputBox, MsgBox, GetObject függvények

Jscript szabályok Java-tól függetlenül jött létre Pontosvessző az utasítások végén Nem kötelező használni! Kommentjelek ( //, illetve /*…..*/ ) Változódeklaráció var Kakukk Érzékeny a kisbetű-nagybetű különbségre! A deklaráció nem kötelező.

Jscript műveletek Boole algebrai műveletek: Matematikai műveletek: && AND | | OR ! NOT Matematikai műveletek: A Math objektum metódusai: x = Math.PI y = Math.LN10 z = Math.max(num1, num2) String változók objektumként működnek

Jscript vezérlőszerkezetek if (feltétel { // igaz ág } else { // hamis ág } For (x=1;x<=10;x++) { // ciklusmag }

Kliensoldali programozás elemei Az IIS simán leküldi a böngészőnek Tipikusan UI elemek ActiveX control és Java applet ActiveX control ToolBox-ból kényelmesen felrakható Bármit megtehet a user gépén A VBScript és a Jscript nem tudott a file rendszerbe belenyúlni Certificate és Authenticode mechanizmus Eldöntheti a user, hogy letölti vagy sem.

ActiveX control Szintaktika: <OBJECT classid="clsid:registryszám" id=név <PARAM NAME="Year" VALUE="1999"> ….. </OBJECT> A classid egy Global Unique Identifier (GUID) az időből (msec), és az aktuális gép infoból csinál egy hexa számot A PARAM tagban lehet serverscript is, pl: <PARAM NAME <%=változó%>….. CodeBase tulajdonság adja meg a control URL-jét Akkor kell, ha le kellene tölteni, mert nincs a user gépén.

Java appletek Szintaktika: <APPLET code=valami.class id=kutya <PARAM NAME=Ez VALUE="Az"> /APPLET> Toolbox-ra felrakható, és újrafelhasználható A class file gépfüggetlen byte kódból áll. .java file-ból generálja a Java compiler Egy applet több .class-ból is állhat. Intranet=ActiveX, Internet=Applet A legjobb a sima HTML(?!)

window objektum Metódusok Tulajdonságok Események Kollekció open, showModelDialog, showModelessDialog, close, navigate Tulajdonságok document, event, history, location, navigator Események onload, onbeforeunload, onunload, onfocus, onblur Kollekció frames

document objektum Metódusok Tulajdonságok Események Kollekciók open, write, close, createElement, insertAdjacentElement, insertBefore Tulajdonságok body, cookie, title Események onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx Kollekciók all, frames, forms 5.4

További DHTML objektumok navigator objektum Csak tulajdonságadatai vannak event objektum srcElement, type, propertyName, fromElement, toElement, returnValue tulajdonságok A cancelBubble szerepe form objektum A document.forms kollekcióból származtatható 5.5 5.6

Behavior Script encapsulation (component) Szintaktikai alakja: {behavior:string}, ahol a string lehet: "url(a1.htc) url(a2.htc)…" "url(#objID)" "url(#default# név)" Dinamikus hozzárendelés is használható: addBehavior(), removeBehavior() Elkészítés eszköze: VBScript, Jscript, Windows Scripting Components (WSC) vagy C++

HTC referencia (1) ATTACH (eseménykezelő hozzárendelése) <PUBLIC:ATTACH EVENT=sNev FOR=document | element | window ONEVENT=sFg ID=sID/> METHOD (dokumentumból hívható) <PUBLIC:METHOD NAME=sNev INTERNALNAME=sIntNev ID=sID/> PROPERTY (dokumentumban használható) <PUBLIC:PROPERTY NAME=sNév ID=sId INTERNALNAME=sIntNév GET=sFg1 PUT=sFg2 PERSIST=bPersist VALUE=vKezdőÉrték/>

HTC referencia (2) EVENT (a dokumentumnál lép fel) <PUBLIC:EVENT NAME=sNév ID=sID/> COMPONENT (a legkülső konténer) <PUBLIC:COMPONENT NAME=sNev ID=sID URN=sURN> …. </PUBLIC:COMPONENT> element objektum A komponensen belül az elem elérésére szolgál createEventObject és fire metódusok

HTC referencia (3) Speciális behavior események ondocumentready Amikor a dokumentum ellenőrzött (parsed) oncontentready Az adott elem ellenőrzött (parsed) ondetach Amikor az elemről leszedtük a behavior-t (pl. egy removeBehavior metódussal vagy az ablak bezárásával)

HTC referencia (4) Fontos tulajdonságadatok style.behavior Így lehet hozzáférni a behavior-hoz. behaviorUrns Az adott elemhez rendelt behavior-ok URN-jeinek kollekciója document.all.urns("x") Azokat az elemeket adja vissza, amelyekhez az adott behavior-t rendeltük. scopeName A namespace-t adja vissza (XMLNS:név) tagURN A namespace helyettesítő értékét adja vissza (XMLNS:név="http:…")

Default Behavior elemek Multimédia elemek img, anim, animation, audio, video, media, seq, time, par clientCaps (információ a böngészőről) download (egy letöltés végigvitele) startDownload metódussal anchor, httpFolder (folder nézet megjelenítése)

Perzisztencia Előnyei userData saveFavorite, saveHistory, saveSnapshot Keresésnél megmarad a régi keresőkifejezés A fastruktúra úgy jön be, ahogy hagytuk Űrlap adatokat nem kell ide-oda cipelni, amíg nincs minden kitöltve Vásárlókosárnál az eddig bejelöltek megmaradnak. userData Jobb, mint a cookie, mivel session-ök közt is működik (64K/lap) save és load metódus Tárolás: XML Store saveFavorite, saveHistory, saveSnapshot

Custom Tag használata Példa: <HTML XMLNS:SAJAT> <STYLE> @media all {SAJAT\: IGAZIT { text-align:justify; width:500} } </STYLE> … <SAJAT:IGAZIT> …. …. </SAJAT:IGAZIT>

Dinamikus tulajdonságok Sok helyen a scriptek helyett elég egy képlet Excel-szerű táblázat automatikusan frissülő összesen cellával. Elem pozíciója az egértől függ. (drag & drop) Időzített elemmozgatás valósítható meg Metódusok object.setExpression(sProperty,sKif,sNyelv) bSiker=object.removeExpression(sProperty) document.recalc() implicit függőségeknél vKif=object.getExpression(sProperty)

Dinamikus tartalom sajatH1.innerText = "Új szöveg" sajatH1.innerHTML = "Új <I>szöveg</I>" sajatH1.outerText = "Valami" sajatH1.outerHTML="<SPAN>..</SPAN>" Ez lecseréli a <H1> tagot <SPAN>-re Figyelem! Csak a window.onload után!

Mouse Capture Adott objektumhoz rendelhetjük az egéresemények kezelését object.setCapture Ha pl. az object egy DIV, akkor a benne lévő összes elemnél a DIV-beli eseménykezelés él. object.releaseCapture Megszüntetés (fellép az onlosecapture esemény) Példa: Dinamikus pop-up menü készíthető, ami mindig az aktuális objektum tulajdonságadatait mutatja Kétszintű lebomló menü is előállítható

Adatkezelés a DHTML segítségével

DHTML adatbázis komponensek Data Source Objects Az adatot biztosítja a Web lap számára Data Consumers Az adat megjelenítéséről gondoskodik Binding Agent A szinkronizálásért felelős Table repetition agent

DHTML adat architektúra

DSO objektumok Tabular Data Control (TDC) Remote Data Services (RDS) Régebben ADC volt a neve) JDBC applet XML adatforrás objektum MSHTML adatforrás objektum

A DSO feladatai és működése Feladatok: Meghatározza hogyan néz ki az adat Lehozza az adatot a Web lapra Manipulál az adattal Visszajuttatja a módosításokat a szerverre. Aszinkron vagy szinkron transzport. Az aszinkron a javasolt. OLE DB API-t kell tudni az adatszolgáltatónak.

Tabular Data Control (TDC) ActiveX control az IE 4.0-ban Mezőszeparátorokkal elválasztott mezők és sorszeparátorokkal elválasztott sorok. A legtöbb adatbázis-kezelő képes ilyet előállítani. UseHeader=True Az első sor a mezőinfot tartalmazza

A TDC tulajdonságai és metódusai Tulajdonságok DataURL Az adatfile URL címe. FieldDelim A vessző az alapértelmezés. RowDelim Az NL az alapértelmezés. Sort Pontosvesszőkkel elválasztott mezőlista. A mezőnév előtt + vagy - állhat. Filter Szűrőfeltétel. Metódusok Reset Végrehajtja a rendezést és a szűrést.

Remote Data Service (RDS) Komplexebb és robosztusabb, mint a TDC. Data-marshalling (Spec. MIME formátum) Kétirányú kapcsolat az adatbáziskezelőkkel. Komponensek RDS.DataControl (kliensoldalon) RDS.DataFactory (szerveroldalon) SubmitChanges (RDS.DataControl metódusa) A módosítások élesítése. Csak a módosított rekordok mennek át a szerverre.

Remote Data Service (2) A kliensoldalon a következő szükséges: <OBJECT id=valami classid="clsid:…….."> <PARAM name="Server" value="http://X.Y.hu"> <PARAM name="Connect" value="DSN=kakukk"> <PARAM name="SQL" value="select * from g"> </OBJECT> Protokollok: HTTP HTTPS DCOM in-process COM

XML adatforrás objektum XML = Extensible Markup Language Az adatformátum leírását tartalmazza. Bármilyen TAG használható, nemcsak a normál HTML tagok. XML Parser kell az értelmezéshez. (XMLDSO.class nevű JAVA)

Data Consumers Adatfogyasztó elemek Attribútumok Normál HTML elemek ActiveX-ek Java appletek Attribútumok DATASRC Az adatelem (pl. TDC) ID-je DATAFLD Melyik mezőhöz kapcsoljuk az adott HTML elemet. DATAFORMATAS"text" vagy "html" lehet. DATAPAGESIZE Hány sor jelenjen meg egyszerre.

Adatfogyasztó HTML elemek

Szinkronizálás Binding agent Table repetition agent Az MSHTML.DLL-ben van (Ez a HTML Viewer) Scriptekkel felfogható eseményeket tüzel ki, melyek a DSO és a Consumer közötti szinkront teremtik meg (Notify mechanizmus) Table repetition agent Ez biztosítja, hogy HTML TABLE-ként jelenjenek meg a táblázatos adatok.

XML alapok

XML (Extensible Markup Language) Az SGML (Standard Generalized Markup Language) subset-je Platform-független adatátadás Bármilyen dokumentum Adatrekord Objektum adatokkal és metódusokkal Grafikai UI elem Séma információ Meta elem (pl. Channel Definition Format)

XML példa <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="konyv.xsl"?> <!DOCTYPE filmek SYSTEM "filmek.dtd"> <filmek> <film nyelv="angol"> <cím>Matrix</cím> <szereplő>Keanu Reeves</szereplő> <szereplő>Laurence Fishburne</szereplő> </film> <film nyelv="magyar"> <cím>Csinibaba</cím> <szereplő>Gálvölgyi János</szereplő> <rendező>Tímár Péter</rendező> </film> </filmek>

Az XML előnyei (1) Keresések értelmesebbek lehetnek: Könyvkeresésnél pl. ma a "Bill Gates"a róla szóló és az általa írt könyveket is kihozza Az egymással inkompatibilis adatbázisokban való kombinált keresés megoldható Az adat a séma révén az értelmezési és validálási infot is hordozza Egy XML a szervertől függetlenül is kezelhető, sőt módosítható is. Granuláris update: nem kell az egész lapot letölteni, ha csak egy adatsor változott

XML előnyei (2) Független a UI-től, ezért a user ízlésének megfelelő prezentációt lehet hozzá csatolni Hasonló a mail-merge-höz Jól tömöríthető az adatátadásnál A tagok szabályos ismétlődő szerkezete jól fekszik a tömörítő eljárásoknak A HTTP 1.1 szerverek és kliensek már ki is használják ezt.

Namespaces A különböző XML dokumentumok összekapcsolásakor a tagok megkülönböztetése miatt kell Példa: <Rendelesek xmlns:partner="//www.et.hu/x" xmlns:dsig="//dsig.org"> <partner:nev> <partner:vezeteknev>Nagy</partner:vezeteknev> <partner:keresztnev>Pál</partner:keresztnev> </partner:nev> <dsig:digalair>1235801</dsig:digalair> </Rendelesek>

Adat és prezentáció szétválasztása HTML A Web lap "szöveges", nem változó része CSS A HTML rész stílus információi XML A Web lap "adat" része. (Minden, ami változhat) XSL (Extensible StyleSheet Language) Az "adat" rész stílusinformációi

XML dokumentum szabályok Kezdő és záró tag mindig kell (well-formed document) Rövidítés lehetséges, pl.: <Kutya/> Kisbetű/nagybetű különbségre érzékeny! Az XML dokumentum gyökéreleme egyedi Unicode-os karakterkészletet használ (1 karakter=16 bit) Az attribútumok megadásakor idézőjelek használata

XML Data Island Az adatsziget egy XML a HTML lap belsejében Inline megadás <XML ID="Valami"> <film> <cím>Matrix</cím> </film> </XML> SRC hivatkozás <XML ID="Valami" SRC="film.xml"</XML> Script tag <SCRIPT LANGUAGE="xml" ID="Valami"> <film> … stb. </SCRIPT>

XML ágak elérése a DOM-ból Valami.documentElement A komplett gyökér elemet éri el Valami.documentElement.childNodes A gyökér alatti ágak kollekcióját éri el Valami.documentElement.childNodes.item(0). nodeName A gyökér alatti első ág nevét adja vissza nodeName helyett a text a tartalmat adná vissza nodeName helyett a childNodes.item(0).text eggyel beljebb menne a hierarchiában.

XML attribútumok elérése Valami.documentElement.childNodes.item(n).attributes.item(z).nodeName Az első szinten található n-edik ág z-edik attribútumának a neve Valami.documentElement.childNodes.item(n).getAttribute("nyelv") Az első szinten található n-edik ág "nyelv" nevű attribútumának az értéke

További elemek az XMLDOM-ban Data Island elemeinek elérése Valami.XMLDocument.documentElement.stb. Namespace elemek elérése xmlns:partner="//www.et.hu/x" esetén: nodeName a teljes nevet adja vissza prefix-szel együtt namespaceURI az URI nevet vagy ""-t ad vissza prefix a példában "partner" baseName a prefix nélküli nevet adja vissza adottTag.xml A teljes XML string-et adja vissza

XMLDOMDocument Kétféle interfész létezik: XMLDOM Interface (COM prog. Interface) XMLDOM Objects (ActiveX interface) XMLDOMDocument objektum létrehozása VBScript Set xmldok = CreateObject("Microsoft.XMLDOM") Jscript Var xmldok = new ActiveXObject("Microsoft.XMLDOM") Visual Basic Dim xmldok = New DOMDocument

XML file betöltése xmldok.load("//et/kakukk.xml") xmldok.loadXML("<vevő>….</vevő>") Aszinkron (default) és szinkron betöltés xmldok.async = false (még a load előtt) xmldok.abort-ra az aszinkron betöltés leállítható Az értelmezés elhalasztható xmldok.validateOnParse = false (ezt is a load előtt) Hiba esetén a parseError ad információt Mentés xmldok.save(Server.MapPath("Minta.xml"))

Dokumentumágak elérése Set root = xmldok.documentElement For Each gyerek In root.childNodes MsgBox gyerek.text Next Set yNode=xmldok.documentElement. nodeFromID("xxxyyzz") Set yNodeList=xmldok.documentElement. getElementsByTagName("film") vagy Set yNodeList=xmldok.documentElement. selectNodes("film/cím")

Új ágak beépítése createNode(típus,név,namespaceURI) Az egyes típusokra külön createTípus metódusok léteznek createElement példa: Set ujElem = xmldok.createElement("film") ujElem.setAttribute("nyelv","német") ujElem.text = "akármi" xmldok.documentElement.childNodes.item(3). appendChild ujElem Egyéb lehetőségek replaceChild, removeChild, insertBefore

XMLDOMNode (1) Információ a Node-ról hasChildNodes() igaz vagy hamis nodeName prefix:név formában nodeType és nodeTypeString NODE_ELEMENT 1 NODE_ATTRIBUTE 2 NODE_TEXT 3 NODE_CDATA_SECTION 4 stb. parsed logikai iagz, ha ellenőrzött specified attribútumoknál, ha van default vagy meg van adva Xml az adott node xml string-ként

XMLDOMNode (2) Adat olvasása és írása Navigálás az adott Node-ból nodeValue nodeTypedValue Text Navigálás az adott Node-ból parentNode, firstChild, lastChild, previousSibling, nextSibling, ownerDocument tulajdonságok childNodes kollekció attributes kollekció révén jutunk el az attribútumokhoz definition visz el a sémához

XSL Extensible Stylesheet Language Olyan, mint a mail-merge, ahol az XSL a template, és az XML az adat Hasonlít az ASP ciklushoz és a Tabular Data Control-hoz Kétféle modell ötvözhető Template-driven model Data-driven model

Egyszerű XML-XSL-HTML példa <?xml version="1.0"?> <portfolio xmlns:dt="urn:schemas-microsoft- com:datatypes"> <részvény tőzsde="BSE"> <név>OTP Bank Rt.</név> <jel>OTP</jel> <árf dt:dt="number">16000</árf> </részvény> <részvény tőzsde="Nasdaq"> <név>…</név> … </részvény> </portfolio>

HTML template <HTML> <BODY> <TABLE Border="2"> <TR> <TD>Jel</TD> <TD>Név</TD> <TD>Árfolyam</TD> </TR> <TD>…</TD> </TABLE> </BODY> </HTML>

A template "feltöltése" (1) <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="//www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <BODY> <TABLE Border="2"> <TR> <TD>Jel</TD> <TD>Név</TD> <TD>Árfolyam</TD> </TR>

A template "feltöltése" (2) <xsl:for-each select="portfolio/részvény"> <TR> <TD><xsl:value-of select="jel"/></TD> <TD><xsl:value-of select="név"/></TD> <TD><xsl:value-of select="árf"/></TD> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet>

XSL alapszabályok <xsl:for-each> tag adja meg az elemhalmazt <xsl:value-of select="minta"> Az elemhalmazon belül egy gyereket azonosít A select adja meg az XSL pattern-t A file-könyvtár struktúrához hasonlít, de sima perjellel Az elért adat (attribútum, érték) kerül a hívás helyére A navigáció az aktuális node-nál indul

HTML template szabályok Well-formed HTML (nyitó és záró tagok) Kisbetű/nagybetű a tagokban fontos Legyenek nagybetűsek! Minden attribútum idézőjelek vagy aposztrófok között legyen HTML és HEAD tag sem maradhat ki Csak a következő karakter egyedek vannak < > & " &apos; A scriptek belsejében sem lehetnek más jelek <SCRIPT><![CDATA[ ide jön a script ] ] ></SCRIPT>

HTML tag új attribútuma <xsl:attribute name="TITLE"> <xsl:value-of select="jel"/> adatai a <xsl:value-of select="@tőzsde"/>-ról származnak </xsl:attribute> <TD>… Csak akkor lehet "TITLE"-t adni, ha még nincs neki. A <TD> tag előtt kell lennie, hogy a <TR>-re vonatkozzon

Feltételes template-ek <TD> <xsl:value-of select="jel"/> <xsl:if test="@tőzsde[.='BSE']">* </xsl:if> </TD> <xsl:attribute name="STYLE">color: <xsl:choose> <xsl:when test="price[. $le$ 25]">red </xsl:when> <xsl:otherwise>green</xsl:otherwise> </xsl:choose> </xsl:attribute>

"for-each" rendezése <xsl:for-each select="portfolio/részvény" order-by="árf"> Lehet csökkenő is order-by = "-árf" Több szempont is megadható order-by = "mező1; -mező2" order-by = "date(mező1);-number(mező2)" Ha a select-beli adatra akarunk rendezni: <xsl:for-each select="portfolio/részvény/név" order-by="-."

XSL pattern Egy egyszerű query nyelvhez hasonlít portfolio/részvény az összes ilyen node portfolio/*/név példa a joker használatára portfolio/részvény/* 3 részvény esetén 9 elemet ad portfolio/részvény[jel]/név csak azok, amelyeknek van "jel" node-juk portfolio/részvény[jel='OTP']/árf csak az 'OTP' jelű részvények árfolyama jön le portfolio/részvény[@tőzsde="BSE"] csak a BSE-n lévő részvények jönnek le portfolio/részvény/@tőzsde csak az attribútum értékpár jön vissza

Internetes alkalmazás rétegei

Háromrétegű Web architektúra

Többrétegű architektúra példa

Thin/Thick-client Vékony kliens (Thin-client) Böngésző-független Sok forduló a Web szerver és a kliens gép között Vastag kliens (Thick-client) Böngésző-függő Látványos Web-lapok Gyors interaktív funkciók

Alkalmazásfejlesztési csapat tagjai Web fejlesztő Programozó HTML szerző Grafikus Web adminisztrátor Adatbázis adminisztrátor

Active Server Pages alapfogalmak

ASP környezet IIS 3.0-tól felfele létezik az ASP. Állapotkezelés A stateless HTTP-vel szemben biztosítja a userenkénti, alkalmazásonkénti, illetve szerverenkénti állapotkezelést. MS ActiveX Data Objects (ADO) Adatbáziskezelés megvalósítása ASP komponensek is használhatók Nyelvek: VBScript, JScript, Perl

ASP file tartalma és nyelve Az ASP file tartalma: Sima szöveg HTML Script Kliens oldali Szerver oldali (<% ……….%>) Script nyelvek VBScript Jscript Perl

ASP szintaktikai elemek Határolójelek <…….> a HTML határolójelei <%……..%> az ASP Script határolójelei Response.Write helyett sima egyenlőségjel Példa: Ez a lap <% =Now %> -kor lett frissítve. Script példa: <SCRIPT RUNAT=Server | Client LANGUAGE=VBScript | JavaScript> …… itt van maga a script </SCRIPT>

Scriptek és HTML vegyítése Példa: <% If Time < #12:00:00PM# Then %> Good Morning <% Else %> Good Afternoon <% Endif %>

Beépített (built-in) objektumok Request Response Application Session Server

Request objektum A böngésző által küldött információ visszanyerésére szolgál. Gyűjtemények QueryString A kérdőjel utáni paraméterek Form A kérdőjel utáni paraméterek Cookies Adott változó tartalma Példa: Request.Cookies("Dolgozo")("Nev") ClientCertificate (Kulcs[almező]) Secure Sockets Layer (SSL) használatakor https lesz a sima http helyett

HTML Form készítése 3 lehetőség van Megvalósítás: Statikus .HTM egy formCX-szel adatot ad át egy .ASP-nek .ASP küld adatot egy másik .ASP-nek .ASP küld adatot önmagának (self-posting) Megvalósítás: <Form Method=Post Action=kakukk.asp> Begyűjti az adatokat és a SUBMIT gombra elküldi a kakukk.asp-nek.

Az átküldött adatok elérése Példák X = Request.Form("mezőnév") X = Request.Form("mezőnév")(n) Ha ugyanazzal a mezőnévvel több textbox is van Az index nélkül vesszőkkel elválasztott string jön Request.Form("mezőnév").Count Ezzel lehet megtudni, hogy hány azonos nevű van IsEmpty(Request("mezőnév") Ez dönti el, hogy van-e adat a mezőben. Self-posting-nál így dönthető el, hogy első hívás vagy önhívás történt-e

QueryString gyűjtemény QUERY_STRING szerver változóba kerül a kérdőjelet követő rész Request.QueryString("mezőnév") A sima Request helyett akkor kell, ha nem form-ból jött ide a felhasználó pl. http://www.x.y/kakukk.asp?kutya=d&m=n REQUEST_METHOD nevű szerver változó X=Request.ServerVariables ("REQUEST_METHOD") "POST" vagy "GET" lesz az X értéke

Response objektum (1) Információ küldése a böngészőnek Tulajdonságadatok Buffer True esetén visszatartja a küldést, amíg az ASP le nem fut. Expires Meddig érvényes a lap a Cache-ben percekben. ExpiresAbsolute Meddig érvényes a lap abszolút időben mérve.

Response objektum (2) Metódusok Write Redirect End Clear Sima egyenlőségjellel helyettesíthető Redirect Buffer=True esetén átszállhatunk egy másik ASP-re Response.Redirect "http://www.x.y/h.asp" End Pufferezett esetben ekkor küldi el a böngészőnek Clear Ha mégse küldjük el, akkor az End helyett ez jön.

Response objektum (3) Cookies gyűjtemény Cookie: a felhasználó gépén tárolt adat. A böngészőben értesítés kérhető, sőt le is tiltható a használata. Példa: Response.Cookies("Kakukk") = "Valami" Response.Cookies("Dolgozo")("Nev") = "Kovács" Tulajdonságok Secure Haskeys (True vagy False)

Application objektum Metódusok Események Változók Gyűjtemények Lock és Unlock az objektum zárolására Események Application_OnStart és Application_OnEnd A Global.Asa-ban kell ezeket deklarálni Változók Application("Macska") = "Nokedli" X = Application("Macska") Gyűjtemények Contents Az összes változó StaticObjects <OBJECT>-en belüli obj-ok

Session objektum Az állapot nélküli HTTP feloldására Példa: "Vásárlókosár" jellegű alkalmazás készíthető A Global.Asa kezeli Példa: Session("KakukkValt") = érték X = Session("KakukkValt") Tulajdonságok SessionID (long) és TimeOut (percek) Metódus Abandon Kierőszakolja a Session végét.

Események Application_OnStart Application_OnEnd Session_OnStart Akkor, amikor az első user az első session-t nyitja. Application_OnEnd Akkor, amikor leállítják a Web szervert. Session_OnStart Minden usernél egyszer az elején fellép (Form_Load szerű). Itt lehet számolni a látogatókat. Session_OnEnd Amikor egy adott user elmegy.

Változók hatáskörei Dim Kakukk Session("Kakukk") Application("Kakukk") Az adat elvész, amikor a user lemegy a lapról. Session("Kakukk") Annyi példány lesz, ahány user éppen benn van Application("Kakukk") Egy közös példány lesz. (Variant) Ha többen akarják egyszerre módosítani: Application.Lock Application("Adat") = Application("Adat") + 1 Application.Unlock

Server objektum A Web szerverrel való kapcsolattartásra Tulajdonság ScriptTimeout Metódusok CreateObject Ezzel lehet az ActiveX komponenseket a szerveroldalon felhasználni. (ProgID-t kell átadni.) HTMLEncode MapPath URLEncode

Request.ServerVariables A szerverről, illetve a böngészőről ad infot. QUERY_STRING REMOTE_ADDR A request-et kiadó host gép IP-címe. SERVER_PORT Az a port szám, ahova a request-et küldtük. SERVER_SOFTWARE Név és verzió URL Az URL cím alaprésze

ActiveX szerver komponensek COM-ot tudó OLE Automation szerverek Elérik a file rendszert és a szerver hálózatot is (A VBScript és a Jscript nem éri el!) DLL-ként vagy EXE-ként működnek VB, C, C++, Cobol, Pascal, Java, stb. Jobb, mint a CGI Egy példány szolgálhatja ki az összes felhasználót

Szerveroldali komponensek ADO Command, Connection, Recordset Ad Rotator Browser Capabilities Content Linking Index Server Dictionary Filesystem Object

Web alkalmazás Az adott Web site-on található .asp, .htm és egyéb file-ok összessége. A virtuális gyökérben kell egy Global.Asa Analógia: .EXE ===> .ASA .DLL ===> .ASP és .HTM .ASP és .HTM több alkalmazás része is lehet Application objektum =globális tárolóhely Alkalmazások közötti adatcserére nem jó.

Az ASP.NET alapjai

A .NET keretrendszer Nyelvfüggetlen futtatórendszer (Common Language Runtime – CLR) Alaposztályok és könyvtárak Adatkezelés (ADO.NET) Felhasználói interfész Web Forms Windows Forms Web szolgáltatások

Az ASP.NET újításai (1) Sokféle nyelvet támogat, nemcsak script nyelveket Lefordított kódot használ A teljes keretrendszer elérhető Intelligens szerver vezérlőelemeket tartalmaz Web szolgáltatások építhetők Kibővített engedélyezési rendszer működik benne

Az ASP.NET újításai (2) Többrétegű skálázhatóság Munkamenet (session) kezelés sütik (cookies) nélküli böngészőknél Sokféle konfigurálási lehetőség Egyszerű telepítés

Web űrlap (Web Form) .ASPX kiterjesztésű file @Page direktívát tartalmaz: <%@ Page Language=Vb %> Szerveroldali űrlappal rendelkezik: <Form runat=„server”> </Form> Egy ASPX lap a System.Web.UI.Page osztályból öröklődő dinamikus osztály Az ASPX lapon lévő vezérlőelemek objektumok

Szerver vezérlőelemek A szerver oldalon programozható objektumok Tulajdonságok, metódusok, események Az események a kliensen következnek be, de a szerveren fut le az eseményvezérlő metódus Runat=„server” attribútummal rendelkeznek Böngészőfüggő HTML-t küldenek Típusai: Szerveroldali HTML vezérlőelemek Web vezérlőelemek

Szerveroldali HTML vezérlőelem Megegyezik a megfelelő HTML elemmel Runat=„server” attribútumot tartalmaz Egyedi „ID” tag van benne A System.Web.UI.HtmlControls névteret használja Well-formed XML szintaktikát kell használni <tag attr=„érték” runat=„server”>….</tag> vagy <tag attr=„érték” runat=„server”/>

Web vezérlőelem Intelligens komponensként funkcionálnak Az „asp” névtérben működő tagok <asp:textbox id=„kakukk” runat=„server”/> A System.Web.UI.Webcontrols névteret használja Ez van leképezve az „asp:” tagprefixre Négyféle típusba sorolható: Belső (beépített, intrinsic) Gazdag (rich) Ellenőrzés (validation) Lista

Hogyan működik egy Web űrlap? Method=„post” Action=„ugyanez a lap” Az űrlap egyedi „id” és „name” attribútumot kap Mindegyik vezérlőelemhez hozzárendelődik egy „value” tag Rejtett vezérlőelem gondoskodik az állapot megőrzéséről (_VIEWSTATE néven) Kikapcsolható az enableviewstate=„false” megadásával bármelyik vezérlőelemnél

Eseményvezérlő eljárás írása Kód deklarációs blokk vagy mögöttes kód <SCRIPT Language=„VB” Runat=„server”> Sub Valami(s As Object, e As EventArgs) …. End Sub </SCRIPT> Code-behind class file Összekapcsolás a szerver vezérlőelemnél: <tag runat=„server” onserverclick=„Valami” /> A metódus nevét kell leírni, és nem egy függvényhívást, mint az ASP-nél.

Page események sorrendje Page_Init Page_Load Ahányszor csak meghívják az ASPX lapot Change típusú események AutoPostBack nélkül Click esemény és az AutoPostback-es Change események Vagyis az az esemény, amitől az űrlap elindult Page_Unload

Page.IsPostback Ezzel tesztelhető, hogy első meghívás vagy újrahívás történt: If Not Page.IsPostBack Then ‘ Első meghívás Else ‘ Újrahívás End If

Belső (instrinsic) Web vezérlőelem Az eredeti HTML vezérlőelemek helyett Standard névkonvenciót használnak <input type=xxx> helyett Közös tulajdonsághalmaz Pl. Text, BackColor, ForeColor mindegyiknél A Windows-nál megszokott specifikus nevek Pl. Checked az asp:Checkbox-nál SelectedItem az asp:ListBox-nál Böngészőfüggő kódot generál

A Web vezérlőelemek típusai <asp:textbox> <input type=text> <asp:button> <input type=button> <asp:imagebutton> <input type=image> <asp:checkbox> <input type=checkbox> <asp:radiobutton> <input type=radiobutton> <asp:listbox> <select size=„5”> </select> <asp:dropdownlist> <select> </select> <asp:hyperlink> <a href=„..”> </a> <asp:image> <img src=„…”> <asp:label> <span>…</span> <asp:panel> <div>…</div> <asp:table> <table>…</table>

Web vezérlőelemek eseménykezelése Csak szerveroldali eseményekre reagál Click-típusú események Listadobozoknál Change-típusúak (pl. SelectionChanged) esemény=„metódusnév” Pl. onclick=„valami” Itt az onclick jelenti azt, amit a HTML vezérlőelemnél az onserverclick jelentett autoPostBack tulajdonság Ha true, akkor egy change típusú esemény is azonnal a szerverhez fordul

Adatellenőrző vezérlőelemek Típusok: RequiredFieldValidator CompareValidator RangeValidator RegularExpressionValidator CustomValidator Ellenőrzés helye Kliens (Javascript kezelő böngészőknél) Szerver (a többi böngészőnél)

Közös tulajdonságok controlToValidate="Ellenőrzendő control ID-je" errormessage="Hibaüzenet szövege" display="dynamic" vagy "static" vagy "none" static=fix helyet foglal el a képernyőn dynamic=ha nincs hiba, akkor nem foglal el helyet enableClientScript="true" vagy "false"

CompareValidator Összehasonlítás egy konstanssal vagy egy másik vezérlőelem értékével ValueToCompare="konstans" vagy ControlToCompare="másik vezérlőelem ID-je" Type="String" | "Integer" | "Date" | "Double" | "Currency" Operator="Equal" | "NotEqual" | "GreaterThan" | "GreaterThanEqual" |LessThan" | "LessThanEqual" | "DataTypeCheck"

RangeValidator Értéktartomány ellenőrzés MinimumValue="konstans" MaximumValue="konstans" Type="String" | "Integer" | "Date" | "Double" | "Currency"

ValidationSummary Page.isValid="true" esetén jelenik meg Az adott lap összes hibáját kiírja Az eredeti ellenőrző vezérlőelemek helyén ilyenkor "*" jel íratható ki <asp:xxValidator …>*</asp:xxValidator>

RegularExpressionValidator Minta alapján történő ellenőrzés ValidationExpression="formátum" Példa adószámra: ValidationExpression="[0-9]{8}-[0-9]-[0-9]{2}"

Az ADO.NET alapjai

ADO .NET

Connection objektum Kétféle típusa van: SQLConnection (SQLServer 7.0, 2000) OLEDBConnection (a többi esetén) ConnectionString (SQLConnectionnél) Data Source=.. vagy Server=.. ; Initial Catalog=.. vagy Database=.. ; Integrated Security= vagy Trusted_Connection=sspi; vagy User ID=.. Pwd=.. Connection String (OLEDBConnectionnél) Provider=..; a többi ugyanaz ODBC-t nem támogat (külön ODBC .NET provider kell)

Connection példa Az open nem kötelező Dataset esetén Dim conDB = new SQLConnection() conDB.ConnectionString="Integrated Security=SSPI;Initial Catalog=northwind" conDB.open() Az open nem kötelező Dataset esetén

Command objektum Kétféle típusa van: Konstruktor paraméterek SQLCommand (SQLConnection-nél) OLEDBCommand (OLEDBConnection-nél) Konstruktor paraméterek CommandText (Maga az SQL mondat) Connection (Az xxxConnection objektum) Transaction (A Transaction objektum) Egyéb tulajdonság CommandType=CommandType.StoredProcedure | .TableDirect | .Text (default) Parameters

Command objektum metódusai ExecuteScalar Az eredményhalmaz első sorának első oszlopát adja ExecuteReader DataReader (Sql vagy OleDb) objektumot szolgáltat ExecuteXmlReader XmlReader objektumot szolgáltat ExecuteNonQuery Végrehajtja a megadott DDL vagy DML utasítást Visszaadja az érintett sorok számát Output paraméterek feltöltődnek

SqlParameter objektum Konstruktor paraméterek: ParameterName (pl. "@SzlaSzam") SqlDbType (pl. SqlDbType.Int) Size (a méret byte-ban, pl. 4) Egyéb tulajdonságok Direction = ParameterDirection.Input | Output | InputOutput | ReturnValue Value (A paraméter értéke írható és olvasható) SourceColumn (Dataset-nél az eredeti oszlop neve)

SqlCommand paraméterei Paraméter hozzáadása SQLCommand-hoz cmdSqlCom.Parameters.Add(Para1) ahol Para1 egy SqlParameter objektum Paraméterérték írása, olvasása: cmdSqlCom.Parameters("@Szla").Value="11" Az Executexxx után output paraméterre is A visszaadott érték átvétele cmdS.Parameters("@RETURN_VALUE"). Value

DataReader objektum Két típusa van: SqlDataReader OleDbDataReader Az xxCommand.ExecuteReader hozza létre Saját konstruktorral nem lehet létrehozni! Csak előrefele olvasható adathalmaz Nyitott xxConnection kell hozzá A végén le kell zárni a Readert és a Connection-t Memóriakímélő

DataReader tulajdonságok és metódusok Read metódus A következő sor beolvasása "False"-t ad vissza, ha nincs több rekord (EOF) Item (default property) dr.Item("SzlaSzam").Value vagy dr(1).Value Object-et ad vissza, ezért gyakran CType kell GetValues (tömböt vár és tölt fel) GetOrdinal("SzlaSzam") IsDbNull(i) "true", ha az oszlop DbNull

DataReader példa Dim cmdPartner As SqlCommand=new SqlCommand( "SELECT PartAzon,PartNev FROM Partner",conDB) conDB.open() Dim rdrPartner As SqlDataReader rdrPartner=cmdPartner.ExecuteReader() Do While rdrPartner.Read() ListBox1.Items.Add(rdrPartner.GetInt16(0) & vbTab & _ rdrPartner.getString(1)) Loop rdrPartner.Close() I = rdrPartner.RecordsAffected ' -1-et ad, mert SELECT conDb.Close()

Több Recordset kezelése Tárolt eljárás több eredményhalmazt is adhat vissza, ha több SELECT van benne rdrPartner.NextResult() megy rá a következő rekordhalmazra A RecordsAffected összeadja az INSERT, UPDATE, DELETE által érintett rekordokat

Tranzakciókezelés ADO .NET-ben SqlConnection.BeginTransaction adja vissza az SqlTransaction objektumot. A tranzakció hatálya alá tartozó Command objektumoknál cmdPartner.TransAction = tranObj tranObj.IsolationLevel = IsolationLevel.Serializable Tranzakció metódusai tranObj.Commit() tranObj.Save() tranObj.Rollback()

Dataset Memóriában tárolt relációs adathalmaz Adatbázis kapcsolat nélkül működik Alaposztályok System.Data.DataSet System.Data.DataTable System.Data.DataColumn System.Data.Constraint System.Data.DatRelation System.Data.DataRow System.Data.DataView

A DataSet osztály objektummodellje

DataSet létrehozása és feltöltése Programozott módon A Visual Studio .NET grafikus eszközeivel XML segítségével DataAdapter használatával

DataSet programozott létrehozása Új DataSet objektum létrehozása Dim dsSzamla As New DataSet("Szla") Új DataTable objektum létrehozása és hozzákapcsolása a DataSet objektumhoz Dim dtPartner As New DataTable = dsSzamla.Tables.Add("Partner") Ha nem adunk meg táblanevet, akkor "Table0,1,2" nevet ad Új DataColumn objektum hozzáadása a táblához Dim colPartAzon As New DataColumn = dtPartner.Columns.Add("PartAzon", GetType(System.Int32))

DataTable tulajdonságok Columns A tábla oszlopainak kollekciója (DataColumnCollection) Constraints A tábla Constrainst kollekciója (ConstraintCollection) ForeignKeyConstraint vagy UniqueKeyConstraint osztály PrimaryKey DataColumn() tömbként kell megadni dtPartner.PrimaryKey=New DataColumn() _ {dtPartner.Column("PartAzon")} Rows Az adatsorok kollekciója

DataColumn tulajdonságok AllowDbNull NULL constraints alkalmazása Unique UNIQUE constraints alkalmazása AutoIncrement colPartAzon.AutoIncrement = True colPartAzon.AutoIncrementSeed = 1000 'Innen indul colPartAzon.AutoIncrementStep = 1 ' Egyesével megy SqlTypes.SqlGuid alkalmazása biztonságosabb, ha adatbázishoz nem kapcsolt környezetet használunk Expression Számított kifejezés használata

DataRelation objektum Két DataTable összekapcsolása DataColumn objektumok mentén Rel1 = dsSzamla.Relations.Add("FK_Szamla_Partner", _dtPartner.Columns("PartAzon"), _dtSzamla.Columns("PartAzon"),True) "True" jelentése: constraint-ek felépítését kérjük A kapcsolt táblák elősegítik a navigálást DataRow.GetChildRows metódus pl. az adott partnerhez tartozó számlasorokat adja vissza DataRow() tömbként Törlési szabály beállítása Rel1.DeleteRule = Rule.Cascade | Rule.SetNull | Rule.SetDefault | Rule.None

DataException események ConstraintException Kísérlet egy éles constraint megsértésére DuplicateNameException Valamelyik Add metódus duplikált elemet hozna létre InvalidConstraintException Rossz reláció létrehozása vagy elérése NoNullAllowedException Egy AllowDbNull=False mezőben NULL-t akarunk írni

Új sorok beillesztése a táblába DataRow objektum létrehozása drPartner = dtPartner.NewRow() DataRow objektum feltöltése adatokkal drPartner("PartNev") = "Kakukk Kft." drPartner("PartVaros") = "Budapest" …. vagy drPartner.ItemArray = new Object() {"Kakukk Kft.","Bp"…} DataRow hozzáadása a DataTable objektumhoz dtPartner.Rows.Add(drPartner)

Adott sor megkeresése a táblában A DataTable.Rows kollekció segítségével DataRowCollection típusú objektumot ad vissza Item tulajdonság dtPartner.Rows(3) a negyedik sort adja vissza Count tulajdonság a sorok számát adja A Find metódus az elsődleges kulcs alapján keres Dim Kulcs As Object Dim Sor As DataRow Kulcs = 214 Sor = dtPartner.Find(Kulcs) If Sor Is Nothing Then ' Nincs meg a keresett rekord

Meglévő sorok módosítása a táblában DataRow.BeginEdit metódussal kezdődik Kikapcsolja a constraint események kezelését DataRow.EndEdit vagy .CancelEdit metódussal zárjuk le a módosítást Visszakapcsolja az eseménykezelést Mintapélda: ' Behozzuk a keresett sort, például: drPartner = dtPartner.Rows(7) drPartner.BeginEdit() drPartner("PartNev") = "Teszt Kft." drPartner.EndEdit()

Sorok törlése a táblából Fizikai törlés dtPartner.Rows.RemoveAt(5) 'Törli a 6. sort drPartner = dtPartner.Rows(5) dtPartner.Rows.Remove(drPartner) ' Ez is törli a 6. sort Logikai törlés drPartner.Delete A drPartner.RowState értékét RowState.Deleted-re állítja

Adatellenőrzés menete DataTable események ColumnChanging (oszlop módosítása előtt) ColumnChanged (oszlop módosítását követően) RowChanging (minden oszlop módosítását követően) RowChanged (minden RowChanging után) RowDeleting (akkor, amikor törlésre jelölünk egy sort) RowDeleted (a sor törlését követően) BeginEdit, EndEdit esetén Csak egyszer lép fel a RowChanging és a RowChanged Az események kezeléséhez WithEvents opcióval kell deklarálni a DataTable-t Throw-val lehet megakadályozni a módosítást

RowState és RowVersion DataRow.RowState lehetséges értékei: Deleted = a sort törölték DataRow.Delete-tel Modified = módosították, de AcceptChanges még nem volt Added = új sort vettek fel, de AcceptChanges még nem volt Unchanged = a legutolsó AcceptChanges óta nem módosult Detached = a DataRow nincs DataTable-hez kapcsolva DataRow.RowVersion lehetséges értékei: Current = az éppen aktuális értékek Default = az alapértelmezett értékek Original = az eredeti (módosítás előtti) értékek Proposed = módosítás közbeni (még nem elfogadott) értékek DataRow("PartAzon",DataRowVersion.Original) DataRow.HasVersion-nel lekérdezhető, hogy van-e olyan verzió

A módosítások véglegesítése AcceptChanges metódus DataRow, DataTable vagy DataSet szinten is kiadható Az "Original" értékek felveszik a "Current" értékeket A RowState értéke Unchanged lesz A RowError információk törlődnek A DataTable.HasErrors értéke false lesz RejectChanges metódus

DataView objektum Az SQL View szerepét tölti be DataSet-nél, DE!: A DataView nem tekinthető DataTable-nek Csak egy DataTable-re alapulhat (join-ok nem lehetnek) Nem hagyhatók ki oszlopok az eredményből Tipikusan rendezésre és szűrésre alkalmas Dim dv As New DataView(dsSzamla.Tables("Partner")) dv.Sort = "PartNev" dv.Filter = "Irszam = '5600'" A felhasználói interfészen használjuk Így pl. több vezérlőelemet is hozzákapcsolhatunk ugyanahhoz a DataTable objektumhoz. DataTable.DefaultView használata

DataAdapter objektum Kétféle formája van: SqlDataAdapter OleDbDataAdapter Hídnak tekinthető az adatbázis és a DataSet egy adott DataTable objektuma között Fill metódus tölti fel a DataTable-t az adatbázisból Update metódus viszi vissza a módosításokat a DataTable-ből az adatbázisba Mire alkalmas, és mire nem Jó: Tábla másolata egy közbenső rétegben Rossz: Kereső funkció eredménye egy Web site-on

DataAdapter létrehozása Két módszer kínálkozik Data Adapter Configuration Wizard használata Saját kód készítése DataAdapter felépítése – egyelőre csak olvasásra Dim daPartner As SqlDataAdapter Dim cnSzamla As SqlConnection("connection string adatok") Dim cmdPartner As New SqlCommand( _ "SELECT * FROM Partner",cnSzamla) daPartner.SelectCommand = cmdPartner DataSet feltöltése DataAdapter-rel intSorok = daPartner.Fill(dsSzamla | dtPartner | dsSzamla, "Partner")

Módosítások visszaírása az adatbázisba DataAdapter.Update(Para1) metódus meghívása A Para1 lehet DataSet, DataTable vagy DataRow() tömb A megfelelő SQL parancsok végrehajtása InsertCommand UpdateCommand DeleteCommand A kapcsolatot a DataTable-vel a megfelelő SQLParameter objektumok hozzák létre

Mintapélda módosításra Dim cmdModos As New SqlCommand("UPDATE Partner SET" & _ "PartAzon=@ID, PartNev=@Nev WHERE PartAzon=@EredID", _ cnSzamla) cmdModos.Parameters.Add(New SqlParameter("@ID", _ SqlDbType.Int32, 4, ParameterDirection.Input, False, _ 0, 0, "PartAzon", DataRowVersion.Current, Nothing)) cmdModos.Parameters.Add(New SqlParameter("@Nev", _ SqlDbType.Char, 30, ParameterDirection.Input, False, _ 0, 0, "PartNev", DataRowVersion.Current, Nothing)) cmdModos.Parameters.Add(New SqlParameter("@EredID", _ SqlDbType.Int32, 4, ParameterDirection.Input, False, _ 0, 0, "PartAzon", DataRowVersion.Original, Nothing))

DataSet módosítások kezelése DataTable.GetChanges metódus Előállít egy újabb DataTable-t, amibe csak az adott módosítások (pl. csak a törlések) kerülnek DataSet.GetChanges is hasonlóan működik DataTable.Select metódus Szűrő, rendezés és RowState alapján kijelölt sorokat egy DataRow() tömbbe rakja Nem másolás(!), hanem pointerek kialakítása DataSet.Merge metódus Az adott DataSet-hez hozzárakja egy másik DataSet vagy DataTable tartalmát

Konfliktusok kezelése Az optimista zárolás miatt konfliktusok keletkezhetnek Konfliktusok detektálása Konfliktusok feloldása "Az utolsó győz" elv alapján A konfliktust okozó adatok a DataSet-ben maradnak A helyi DataSet-ben visszaállunk az eredeti adatra A helyi DataSet-be betöltjük a legutolsó adatokat

DataSet és az XML XSD Schema Erős típusú DataSet Az XML dokumentum struktúráját írja le Az adatbázis szerkezeti leírásához hasonló Adattáblák és a táblák közötti kapcsolatok Adatmezők neve és adattípusa Kényszerek (pl. elsődleges kulcs, egyedi kulcs, stb.) Erős típusú DataSet Sémainformációval rendelkező DataSet A séma segíti az adatellenőrzést Hatékonyabb az adatimport és az adatexport

XSD séma alapelemei: element <xs:element name="PartAz" type="xs:integer" /> Egyszerű vagy komplex adat leírására Kisbetű-nagybetű megadására érzékeny Primitív XML adattípusok string, Boolean, float, double, decimal, dateTime, time, date, anyURI Származtatott XML adattípusok integer, long, short, int, byte, positiveInteger, unsignedLong Példa adatfeltöltésre <PartAz>2547</PartAz> ' Jó példa <PartAz>XC35</PartAz> ' Rossz példa

XSD séma alapelemei: attribute <xs:attribute name="PartPri" type="xs:number"/> Csak egyszerű adat leírására jó Alapértelmezésbeli érték megadható Az attribútumok sorrendje tetszőleges, míg az elemek sorrendje a séma szerinti kell hogy legyen

XSD séma alapelemei: simpleType Létrehozás: <xs:simpleType name="ketJegyuSzam"> <xs:restriction base="xs:positiveInteger"> <xs:maxInclusive value="99" /> </xs:restriction> </xs:simpleType> Felhasználás: <xs:element name="Db" type="ketJegyuSzam" /> Tipikus facet elemek: length, maxLength, minLength, maxExclusive, pattern

XSD séma alapelemei: complexType Létrehozás: <xs:complexType name="Cim"> <xs:sequence> <xs:element name="Varos" type="xs:string" /> <xs:element name="UtcaHsz" type="xs:string" /> <xs:element name="Irsz" type="xs:string" /> </xs:sequence> </xs:complexType> Felhasználás: <xs:element name="SzlaCim" type="Cim" /> A komplex típusok egymásba ágyazhatók

XSD séma alapelemei: group Példa: <xs:group name="RendFej"> <xs:sequence> <xs:element name="VevoNev" type="xs:string" /> <xs:element name="RendSzam" type="xs:number" /> <xs:element name="RendDat" type="xs:date" /> </xs:sequence> </xs:group> Csoportok típusai: sequence kötött sorrendben minden elem kötelező choice a felsoroltak közül csak az egyik kell all nulla vagy több elem bármilyen sorrendben

XSD séma adatkiegészítése A névtartományt meg kell adni: xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" Elsődleges kulcs megadása <xs:key name="pkPartner" msdata:PrimaryKey="true"> <xs:selector xpath=".//Partner"/> <xs:field xpath="PartAzon"/> </xs:key> Egyedi kulcs megadása <xs:unique name="Adoszam"> ….stb. Idegen kulcs megadása <xs:keyref name="fkRendPart" refer="pkPartner"> … stb.

XSD betöltése egy DataSet-be Mintapélda: DS1 = new DataSet() DS1.ReadXmlSchema("C:\Proba\Kakukk.Xsd") Közvetlen filenév helyett használható: StreamReader, TextReader, XmlReader objektum is Metaadatok lekérdezhetők ezután: Ds.Tables tulajdonság, Ds.Relations tulajdonság Tables(index vagy név).Columns(index).ColumnName Tables(index vagy név).Columns(index).DataType Az InferSchema metódussal XML-ből is felépíti az adatszerkezetet

XML adatok betöltése a DataSet-be Ds.ReadXml(XmlObjektum,XmlReadMode) Az XmlObjektum filenév, stream, text vagy Xmlreader Az XmlReadMode lehetséges értékei: ReadSchema Az inline séma és az adatok együttesen IgnoreSchema Inline séma nélkül csak az adatok InferSchema Az adatok alapján épül fel a séma is DiffGram Berakja a DiffGram-ot a DataSet-be Fragment SQLServer-ből generált XML-nél A sémának nem megfelelő adatok kimaradnak

XML írása DataSet-ből Ds.WriteXmlSchema(XmlObjektum) Ds.GetXmlSchema() Csak a sémainformációt írja ki egy file-ba vagy reader-re Ds.GetXmlSchema() String-ként írja ki a sémainformációt Ds.WriteXml(XmlObjektum,XmlWriteMode) IgnoreSchema Csak az adatokat írja ki az XML-be WriteSchema Inline sémát és az adatokat írja ki DiffGram Diffgram-ot ír eredeti és aktuális adattal

DiffGram Csak a DataSet változásait írja ki DiffGram névtér: Disconnected DataSet esetén pont ez kell DiffGram névtér: xmlns:diffgr="urn:schemas-microsoft-com:xml:diffgram-v1" Három részre osztható: Aktuális adat a sémának megfelelő elemekkel, majd ezután <diffgr:before> elemben az eredeti tartalom <diffgr:errors> elemben a fellépett hibák DiffGram attribútumok (annotációk) diffgr:hasChanges="modified | inserted | descent" diffgr:id = sorok egyedi azonosítása az összekapcsolás miatt

Adatok megjelenítése a Web űrlapon

Adatok vezérlőelemhez kapcsolása Szintaktikai alakja <tagprefix:tagnév attr1=<%# Adatkötési kifejezés %> runat="server"> sima szöveg <%# Adatkötési kifejezés %> A DataBind() metódus hozza létre a kapcsolatot Page.DataBind() Az adott lap összes adatkötését élesíti ctlValami.DataBind() Csak az adott vezérlőelem adatkötéseire vonatkozik

Adatkötési kifejezés lehetséges formái Template vezérlőelemeknél (DataGrid, DataList, Repeater) Container.DataItem("mezőnév") Csak akkor egyszerű, ha a mező string-et ad, egyébként a String.Format segítségével át kell alakítani DataBinder.Eval(Container.DataItem,"mezőnév", "formátum") Futáskori kötéssel működik Szerver vezérlőelemek között Az adott vezérlőelem valamelyik tulajdonsága <asp:label text=<%# lstOrszag.SelectedItem.Text %> runat="server">

DataGrid vezérlőelem Táblázatos adat megjelenítése Rendezhető, editálható elemek Bármelyik Collection osztály, ami IEnumerable System.Data.DataView, System.Collections.ArrayList, stb. A vezérlőelem létrehozása <asp:DataGrid id="dgPartner" runat="server"> Hozzákapcsolás egy adatforráshoz dgPartner.DataSource=ds.Tables("Partner").DefaultView dgPartner.DataBind()

DataGrid oszlopok típusai AutoGenerateColumns=true az alapértelmezés <Columns>….</Columns> között asp:BoundColumn Adatmegjelenítő oszlop asp:ButtonColumn Nyomógombot tartalmazó oszlop asp:EditCommandColumn Edit nyomógombot tartalmaz asp:HyperLinkColumn Adatmegjelenítés hyperlink-ként asp:TemplateColumn Saját template adható ezen belül

DataGrid oszlopok tulajdonságai HeaderText, FooterText HeaderImageUrl HeaderStyle, FooterStyle, ItemStyle SortExpression Az OnSortCommand metódusnak átadott mező neve ReadOnly (csak a BoundColumn-nál) ButtonType (ButtonColumn, EditCommandCol.) ButtonColumnType.LinkButton vagy .PushButton CancelText, EditText, UpdateText EditCommandColumn esetén vagy az EditText vagy az UpdateText/CancelText kombináció látszik

Adathoz kapcsolható tulajdonságok BoundColumn esetén DataField a megjelenített és editálható mező neve ButtonColumn esetén DataTextField adja a Text-hez kapcsolt mező nevét DataTextFormatString írja elő a megjelenítési formátumot HyperLinkColumn esetén DataNavigateUrlField adja az URL-t hordozó mező nevét, ami a NavigateUrl tulajdonságba kerül DataNavigateUrlFormatString írja elő a megjelenítési formátumot

Template elemek használata TableRow-hoz vagy TableCell-hez rendelhető Hierarchikus sorrend EditItemStyle SelectedItemStyle AlternatingItemStyle ItemStyle ControlStyle Egyéb stíluselemek HeaderStyle, FooterStyle PagerStyle

DataGrid példa <asp:DataGrid id="Racs1" runat="server" BorderColor="black" BorderWidth="1" CellPadding="3" ShowFooter="true" OnItemDataBound="Item_Bound" AutoGenerateColumns="false"> <HeaderStyle BackColor="#00aaaa"> </HeaderStyle> <FooterStyle BackColor="#00aaaa"> </FooterStyle> <Columns> <asp:BoundColumn HeaderText="Number" DataField="IntegerValue"> <ItemStyle BackColor="yellow"> </ItemStyle> </asp:BoundColumn> <asp:BoundColumn HeaderText="Item" DataField="StringValue"/> <asp:BoundColumn HeaderText="Price" DataField="CurrencyValue" DataFormatString="{0:c}"> <ItemStyle HorizontalAlign="right"> </ItemStyle></asp:BoundColumn> </Columns> </asp:DataGrid>

Repeater vezérlőelem A megadott template alapján ismétli az adatokat Ez az egyetlen olyan elem, ahol a HTML tagok szétbonthatók, például: A nyitó <table> a <HeaderTemplate>-be kerül A <tr> az <ItemTemplate>-be A záró </table> pedig a <FooterTemplate>-be Adathordozó template elemek: ItemTemplate és AlternatingItemTemplate Az ItemTemplate az egyetlen kötelező elem Nem adathordozó template elemek: HeaderTemplate, FooterTemplate, SeparatorTemplate

Repeater példa <asp:Repeater id="Tabla1" runat="server"> <HeaderTemplate> Partnerek neve és címe: </HeaderTemplate> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "PartNev") %> (<%# DataBinder.Eval(Container.DataItem, "PartCim") %>) </ItemTemplate> <SeparatorTemplate>, </SeparatorTemplate> </asp:Repeater> Tabla1.DataSource = ds ' Ez egy feltöltött DataSet Tabla1.DataMember = "Partner" Tabla1.DataBind()

DataList vezérlőelem A Repeater-hez hasonló template-ek EditItemTemplate és SelectedItemTemplate is létezik Ennek megfelelően editálható (a DataGrid-hez hasonlóan) Az ItemTemplate az egyetlen kötelező elem A DataGrid-hez hasonló stílusok Minden template-hez stílus is tartozhat, pl. ItemStyle Tulajdonságok RepeatLayout = Table vagy Flow RepeatColumns = Hány oszlopba rendezze az adatokat RepeatDirection = Horizontal vagy Vertical

Felhasználói vezérlőelemek és komponensek készítése

Code-behind Page A Page direktíva kapcsolja össze a két file-t <%@ Page Inherits="Lap1" Src= "Minta.vb" %> A Page direktíva kapcsolja össze a két file-t Eljáráshívás a Code-Behind Page alapján <%@ Page Inherits="Lap1" Src="Minta.vb"%> Imports System Imports System.Web Public Class Lap1 Inherits System.Web.Ui.Page Public Function Adat1() … End Function End Class ds = Adat1()

Vezérlőelemek elérése a kódból A névtartományokat célszerű importálni Imports System.Web.UI.WebControls Imports System.Web.UI.HTMLControls A vezérlőelemeket azonos névvel Public-ként deklarálni kell Public lblPartNev As Label Public txtVaros As TextBox Eseményvezérlő eljárásokat kell írni Public Sub btnKuld_Click(s as Object, e as EventArgs) lblPartNev.Text = "Kakukk Kft." End Sub

User Control Felhasználói szerver vezérlőelem (.ascx file) Az Include helyett használható Tipikus alkalmazás: fejléc, navigációs gombsor <Head>, <Body> és <Form> nem lehet benne @Page helyett a @Control direktívát használjuk <%@ Control Language="vb" Inherits="Elem1" Src="UIElem.vb" %> Információátadás a controlt tartalmazó lapnak Public Property pAdat As Integer Get Return Cint(txtAdat.Text) End Get End Property

User Control beépítése Regisztrálni kell az adott ASP .NET lapon <%@ Register TagPrefix="FoNev" TagName="AlNev" Src="Kakukk.ascx" %> A TagPrefix adja az egyedi névteret A TagName adja a user control egyedi nevét Szerver vezérlőelemként építjük be a lapra: <FoNev:AlNev id="Vez1" runat="server"> FoNev:AlNev id="Vez2" runat="server"> Információátadás a lap és a control között lblSzam = Vez1.pAdat ' A Public Property Get-je alapján Vez1.pAdat = 23 ' A Public Property Set-je alapján

.NET komponensek A .NET komponensek előnyei a COM-hoz képest a telepítés szempontjából Nincs szükség regisztrációra Az alkalmazás/bin könyvtárba kell bemásolni Nincs névtartomány ütközés Nem kell a Web szervert újraindítani Minimum egy névtér és egy osztály Namespace EtKomp Public Class Szamla … End Class End Namespace

Komponensek felhasználása Az alkalmazás indításakor a /bin könyvtárból a komponensek betöltődnek A Web.Config-ban beállítható, hogy melyek kellenek A komponens elérése az ASP .NET lapról <%@ Import Namespace="projektnév.EtKomp" %> Dim x As New Szamla Import nélkül: Dim x As New projektnév.ETKomp.Szamla

Web szolgáltatás Web Service

Web szolgáltatás működési modellje

Web szolgáltatások jellemzői Alkalmazások közötti információátadás Nyílt Internet protokollt használ (nem DCOM!) Lehetséges protokollok: HTTP GET, HTTP POST XML és SOAP (Simple Open Access Protocol) WSDL (Web Services Description Language) által leírt üzenetek Nyilvános használatra szánt szolgáltatásoknál Discovery információ kialakítása UDDI (Universal Discovery Description and Integration)

Web szolgáltatás létrehozása Egy .asmx és egy .asmx.vb file-ból áll Az .asmx file tartalma: <%& WebService Language="vb" Codebehind="Szemely.asmx.vb" Class="Projektnév.Szemely" %> Az .asmx.vb file tartalma: <WebService(Description:="Info…")> Public Class Szemely Inherits System.Web.Services.WebServices ' Nem kell <WebMethod(Description:="Info…")> Public Function FelvSzemely(strNev As String) As String … End Function End Class

Nyilvánosságra hozatal (discovery) Manuális discovery dokumentum <disco:discovery xmlns:disco=… xmlns:WSDL=…> <WSDL:contactRef ref="//et/Proj/Szemely.asmx?WSDL"/> <disco:discoveryRef ref="Folder/default.disco"/> </disco:discovery> Dinamikus discovery dokumentum A VS .NET automatikusan létrehozza .vsdisco kiterjesztéssel <dinamycDiscovery xmlns=…> <exclude path="_vti_cnf"/> … </dynamicDiscovery> A tényleges discovery dokumentum futásidőben jön létre akkor, amikor a kliens alkalmazás rákérdez erre az info-ra

Web szolgáltatás elérése HTML leíró lap //et/projektnév/Szamla.asmx hatására jelenik meg Az elérhető metódusok és argumentumok Egyszerű tesztelési célú szervizprogram Leírás a Description paraméterek tartalma alapján WSDL dokumentum //et/projektnév/Szamla.asmx?WSDL hatására jelenik meg XML formátumú leírás (szerződés)

Web szolgáltatás meghívása Böngészőprogramból //et/Szamla.asmx/FelvSzemely?strNev=Kakukk XML-ként adja vissza a felvett személy kódját <?xml version="1.0"> <string xmlns=…>13479</string> A HTTP-GET protokollt használja Kliens alkalmazásból Web References hozzáadásával a VS .NET létrehoz egy proxy osztályt korai kötéssel Ezután úgy hivatkozunk, mint egy lokális komponensre Dim x As New Szamla.Szemely UjKod = x.FelvSzemely("Kakukk")

A Visual Studio .NET vizuális eszközei

Solution Explorer

IDE ToolBox-ok Típusok General Data Components XML Schema Web Forms HTML Clipboard Ring Windows Forms

További ablakok Class View Properties Window Server Explorer Object Browser Resource View Task List Output Window Command Window Document Outline

Projekt szemlélet File-ok gyűjteménye Több projekt is megnyitható egyszerre A projekt megnyitása az éles Web site-ot jelenti Projekt nélkül is megnyitható egy file File menü Open File parancs Solution (.SLN) Projekt-konténer 1:N kapcsolat van a solution és a projekt között

Server Explorer Adatbázisok kezelése SQLServer Message Queues Crystal Services Event Logs

ASP .NET Web alkalmazás telepítése és konfigurálása

Konfigurációs file szekciói <configuration> <configSections> <sectionGroup name="system.web"> <section name="authorization" type="System.Web.Configuration.AuthorizationConfigHandler, System.Web, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> <section name="sessionState" type="System.Web.SessionState.SessionStateSectionHandler, System.Web, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" allowDefinition="MachineToApplication" /> </sectionGroup> … </configSections> </configuration>

Szekciók kitöltése információval <system.web> <authorization> <allow users="*" /> <!—Ha az összes felhasználót engedjük --> <!-- Allow or deny specific users. allow users="[felhasználók vesszővel elválasztott listája]" roles="[szerepkörök vesszővel elválasztott listája]"/> <deny users="[felhasználók vesszővel elválasztott listája]" --> </authorization> <sessionState sqlConnectionString="data source=127.0.0.1; user id=sa;password=" cookieless="false" timeout="10"/> </system.web>

Hitelesítés (authentication) Windows Az IIS végzi el Basic Digest Integrált (Kerberos) Forms Cookie-t használhat Passport None

Forms hitelesítés konfigurálása <authentication mode="forms"> <forms name="cookie_neve" loginurl="/login.aspx"> <credentials passwordFormat=SHA1> <user name="Gipsz Jakab" password="9EF4GZ5634HJ67F8"/> <user name="Teszt Elek" password="8G6K734FWP57FZQ0"/> </credentials> </forms> </authentication>

Forms hitelesítés programozása FormsAuthentication.Authenticate Két paramétert vár (felhasználónév, jelszó) Logikai értéket ad vissza, hogy szerepel a Credentials szekcióban, vagy sem FormsAuthentication.RedirectFromLoginPage Két paramétert vár (felhasználónév, kell-e cookie) Kiállít egy "jegyet" az adott felhasználó nevére FormsAuthentication.SignOut() Érvényteleníti a korábban kiállított "jegyet"

Jogosultság (authorization) <location path="szamla" <system.web> <authorization> <allow users="Nagy Jolán, Németh Péter"/> <deny users="Kiss Péter" /> <deny users="?" /> </authorization> </system.web> </location> <location path="mindenki" <allow users="*"/>