Fejlett Programozási Technikák 2. 14/3
A mai előadás tartalma: Dinamikus Tartalom Kliens oldali Programozás JavaScript VBScript Szerver Oldali Programozás SSI CGI NSAPI/ISAPI FastCGI
Dinamikus Tartalom Komolyabb feladatokhoz nem elegendő a statikus weboldal Cégek adatbázisokban tárolják adataikat Portál építés adatbázisban van a tartalom Felhasználói műveletek lekezelése Teljesítményelosztás
Technikák Kliens oldali Szerver oldali JavaScript VBScript Java Applet CGI (C, C++, Perl, Python …) Java Servlet, ActiveX ASP,PHP,XSP,JSP
Kliens Oldali Programozás Feladata a webszerver tehermentesítése A felhasználói akciók lekezelése A helyszínen ellenőrizni a bevitelt Szervert nem igénylő megoldások (pl.: számológép) Design eszköz Dinamikus weboldal (pl.: óra az oldalon) JavaScript VBScript Java Applet
JavaScript A Netscape és a SUN fejlesztette ki Java-nál egyszerűbb, Netscape böngésző használja Közös tulajdonság a Java-val 4 betű Szintakszisát a C nyelvtől örökölte A kis és a nagy betűket megkülönbözteti A sorok végére pontosvesszőt kell írni Objektum alapú -> lehetőség van objektumok létrehozására de osztályokat típusokat nem definiálhatunk A program szövege kerül interpretálásra (lassú, a kódot nem lehet elrejteni) A váltózók típusa változó Integráns része a HTML lapnak A leggyakrabban használt kliens oldali szkriptnyelv
JavaScript és a HTML A JavaScript kód helye: HTML törzs HTML fejléc Külső fájl A kódban vegyesen szerepelhet függvény definíció és egyszerű utasítás Célszerű a függvényeket a HTML fejrészébe definiálni Futása: Eseményre, függvényhívás (függvények esetén) Betöltéskor (ha nem függvényt írtunk)
JavaScript a HTML-ben <SCRIPT LANGUAGE="JavaScript” type="text/javascript"> <!-- program //--> </SCRIPT> <script language="JavaScript" src="kulso.js" type="text/javascript"> </script> Célszerű a HTML megjegyzés elemeket használni (<!-- program //--> ) Több helyen is szerepelhet a <script> </script> elempár
Változók Típusok: Var valtozo = érték Típusa változhat Szám Szöveg Objektum Logikai Var valtozo = érték Típusa változhat Lehet lokális, globális
Operátorok
Feltételes utasítások
Függvények Definiálás: function fnév(argumentumok) { utasítások return visszatérési érték } Hívás: fnev(arguentumok);
Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Példa</title> </head> <body> <script language="JavaScript" type="text/javascript"> <!-- var i= "Globális; function kiir(a) { var s="Lokális"; for (j=0;j<3;j++) alert(j); } //--> </script> </body> </html>
Objektumok A JavaScript objektum <tulajdonság, érték> párok halmaza object.property hivatkozás function person (first, last, age) { this.first_name = first; this.last_name = last; this.age = age; } Dezso = new person("Dezsô", "Nagy", 23); Dezso.age = 24; Asszociatív tömbként működhet Dezso["age"] = 24;
Objektumok 2. Az egyes objektumokhoz függvényeket is rendelhetünk: function sayYourName () { document.write("<B>Szia, " + this.last_name + " " + this.first_name + " vagyok.</B><P>"); } function person (first, last, age) { this.first_name = first; this.last_name = last; this.age = age; this.introduce = sayYourName; Dezso = new person("Dezsô", "Nagy", 23); Dezso.introduce();
Objektumok 3. Egy objektum tulajdonságain a for in ciklussal tudunk végigmenni function dump_props(obj, obj_name) { var result = "" for (var i in obj) result += obj_name + "." + i + " = " + obj[i] + "<BR>" } result += "<HR>" return result
Beépített objektumok
Hivatkozások objektumnév1. objektumnév2.tulajdonság objektumnév1. objektumtípus[név].tulajdonság objektumnév1. objektumtípus[sorszám].tulajdonság
Eseménykezelés: onLoad betöltünk egy oldalt a böngészôbe onUnload kilépünk egy betöltött oldalról onFocusaz ûrlap valamelyik eleme a fókuszba kerül, azaz a billentyûzetrôl érkezô karaktereket fogadja onBlura fókusz elmozdul az ûrlap valamelyik elemérôl onSelect az ûrlap valamelyik bemeneti mezôjét kiválasztották onChange az ûrlap valamelyik elemének (szöveg, választás) értékét megváltoztatták onClickrákattintottak egy ûrlap elemre (pl. nyomógombra), vagy hivatkozásra onSubmitelküldenek egy ûrlapot a szerver felé (a submit gombra kattintottak) onMouseOver az egér egy hivatkozás, vagy dokumentum címke fölé kerül
String objektum Fontosabb tulajdonságai: Fontosabb metódusai: length indexOf() replace() toLowerCase() toUpperCase() concat()
Példa <html><head><title>Teszt</title></head> <body> <script language="JavaScript"> mondat = "Kerekecske gombocska, itt szalad a nyulacska"; kezd = mondat.indexOf("szalad”,0); alert("A szó kezdő poziciója : " + kezd); mondat = mondat.concat(" ezt is tegyük hozzá") ; kisbetus = mondat.toLowerCase(); csere = mondat.replace("itt","ott"); </script> </body></html>
Array objektum Fontosabb tulajdonsága: Fontosabb metódusai: length pop() - utolsó tömbelem törlése (csak Netscape) push() - új tömbelem hozzáfűzése (csak Netscape) sort() – az angol abc szerint rendez, összehasonlító függvény join() - tömbelemek összefűzése sztringgé
Példa1 <html><head><title>Teszt</title> </head><body> <script language="JavaScript"> Napok=new Array ("Vasárnap","Hétfő","Kedd","Szerda","Csütörtök","Péntek"); Napok = Napok.push(”Szombat”) ; document.write("<table border bgcolor=#CCFFFF><b>"); for (i=0; i < Napok.length; ++i) { document.write("<tr><td>"+ Napok[i]+"</td><tr>"); } document.write("</td></table>"); </script> </body></html>
Példa2 <html><head><title>Teszt</title> </head> <body> <script language="JavaScript"> lanyok = new Array("Ivett","Éva","Kati","Vera","Juli","Berta","Magdi"); document.write("Tánckar tagjai : " + lanyok.join(", ")+ "<br>"); lanyok.sort(); fellepnek = lanyok.join(", "); document.write("Fellépnek : " + fellepnek + "<br>"); function Rendez(a,b) { return a-b; } szamok = new Array(43,37,86,55,72); szamok.sort(Rendez); Lotto = szamok.join(","); document.write("A lottó nyertes számai a következők: " + Lotto); </script> </body></html>
Többdimeziós tömbök <html><head><title>Teszt</title> <script language="JavaScript"> a = new Array(3); for (i=0; i < a.length; ++i) { a[i] = new Array(5); for (j=0; j<a[i].length; ++j) { a[i][j]="Ez a " + i + ". tömb " + j + " . eleme"; } } { document.write( a[i][j] + "<br>"); } </script> </head><body> </body></html>
Date objektum Fontosabb metódusok: Ugyanezek léteznek setXXX-el is getTime() - 1970. január 1-től eltelt idő (numerikus érték) getYear() getMonth() – január 0. getDate() getDay() - vasárnap 0. getHours() getMinutes() getSeconds() Ugyanezek léteznek setXXX-el is
Példa <head><title>Teszt</title> <script language="JavaScript"> function Ev2003() { most = new Date(); var x = most.getTime() / 1000; k = new Date(2000,0,1,0,0,0); k.setYear(2003) ; var y = k.getTime() / 1000; var z = Math.floor(y - x); alert("Még " + z + " másodperc a 2003. év beköszöntéig"); } </script> </head><body> <form> <input type=button value="Nyomd meg" onClick="Ev2003()"> </form> </body></html>
Math objektum Fontosabb Tulajdonságok: Fontosabb Metódusok: E - Euler konstans PI - PI Fontosabb Metódusok: floor() - Legközelebbi egész szám (lefele kerekít) random() - Véletlenszám generálás abs() - Abszolut érték round() - Kerekítés (kereskedelmi)
Példa <html><head><title>P</title> </head><body> <form name=”b”> <input type=button value="Button" onClick="alert(Math.random())"> <input name="be"> <input name="ki"> <input type=button value="=” onClick=”b.ki.value=Math.abs(b.be.value)"> </form> </body></html>
Window Objektum Fontosabb metódusok: alert() - Az üzenőablakban megjelenít egy szöveget promt() - Adatbevitel számára megnyit egy üzenőablakot confirm() - Megjelenít egy megerősítést kérő üzenőablakot Igen / Nem választási lehetőséggel. close() – Bezárja az ablakot open(url,név,opciók) – Megnyit egy ablakot setInterval() - Egy bizonyos JavaScript tevékenység ciklikus végrehajtása, pl.: függvényhívás focus() - Az ablakot aktívvá teszi blur() - Az ablakot inaktívvá teszi
Új ablak <html><head><title>Teszt</title> <script language="JavaScript"> function Hivlak() { Ujablak = window.open("fájl2.htm","masik","width=300,height=200,scrollbars"); this.blur(); Ujablak.focus(); } </script> </head><body> <a href="javascript:Hivlak()">Új ablak</a> </body></html>
Időzítés Példa <html><head><title>Teszt</title> </head><body> <script language="JavaScript"> aktiv = window.setInterval("ido()",100); function ido() { t = new Date(); h = t.getHours(); m = t.getMinutes(); s = t.getSeconds(); a.ido.value=h+":"+m+":"+s; } </script> <form name="a"> <input type="text" name="ido" size="8"> </form> </body></html>
Document objektum Fontosabb tulajdonságok: Fontosabb metódusok: charset - A böngésző által alkalmazott karakterkészlet megadása lastModified - Az utolsó módosítás dátuma, ideje URL - A betöltött dokumentum teljes URL címét adja vissza Fontosabb metódusok: close() - Lezárja a szöveg értelmezését, a bufferban lévő adatokat kiírja és minden grafikát kirajzol write(sztring,[sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba writeln()(sztring,[sztring]) - Kiír egy vagy több HTML kifejezést a dokumentumba, melyeket soremelés követ
Példa <html> <head> <title>Teszt</title> <body> <script language="JavaScript"> document.open(); document.write(document.URL); document.write(document.lastModified); document.close(); </script> </body> </html>
Frame Objektum A frame objektum segítségével elérhetjük az ablakokat parent vagy top névvel. A frame objektum a window objektum leszármazottja A framek alárendelt objektumjai is ugyanúgy viselkednek, mint a window objektumnál. Ezért, ha egy űrlap egyik mezejének tartalmára így hivatkoztunk : window.document.forms[0].elements[0].value = "János Vitéz" akkor, ha ugyanez az űrlap egy frame-ben kerül megjelenítésre, így hivatkozhatunk rá : parent.frames[1].document.forms[0].elements[0].value = "János Vitéz"
Form Objektum Fontosabb metódusok: Fontosabb tulajdonságok: submit() - Űrlap adatok elküldése reset() - Űrlap adatok törlése Fontosabb tulajdonságok: name – a neve target – a feldolgozó címe
Példa <html><head><title>Teszt</title><script language="JavaScript"> function ellenor() { if (Math.abs(a.szam.value) < 10) alert(A számnak 10-nél kisebbnek kell lennie!); a.reset(); return false; } else return true; </script> </head><body> <form name="a" target="javascript-3.html" onSubmit="return ellenor();"> <input type="text" name="szam" size="3"> <input type="submit" value="Elküld"> </form></body></html>
History objektum Fontosabb metódusok: back() - Visszaugrik az előző oldalra forward() - Előreugrik a következő oldalra go() - Egy bizonyos oldalra ugrik
Példa history.back(); window.history.go(-3); masikablak.history.forward(); parent.frames[2].history.back();
Trükkök Magyarázó szöveg <html><head><title>Teszt</title> </head><body> <A HREF="URL" onMouseOver="window.status = 'magyarázó szöveg'; return true">kapcsolat</A> </body></html>
VBScript A Visual Basic család tagja Sokoldalú (Exchange, Outlook, Word, Access , Excel, …) Biztonságos(elvileg) Nem tudunk a fájlrendszerhez hozzáférni Nem tudunk közvetlenül hozzáférni a DLL-ekhez ActiveX komponenseket tudunk használni Szükség esetén letöltődik az ActiveX komponens amit akár digitálisan is alá tudunk írni Csak IE környezetben fut Ott ajánlott ahol főleg Microsoft alkalmazásokat használnak és integrálni szeretnék őket
Adattípusok skalárok tömbök egy adatípus – Variant statikus Dim láthatósága: public private élettartama: static tömbök statikus Dim dinamikus ReDim
Példa <script language="VBScript"> Dim strNev ="Bilicki Vilmos" Dim intEletkor=27 Dim nevekTomb(20) ReDim VnevekTomb(20) ReDim VnevekTomb(25) </script>
Operátorok
Feltételes utasítások
Függvények Sub – visszatérési érték nélküli Function - visszatérési értékkel Hívás: kiir(”valami”) Call kiir ”valami” Call kiir (”valami”)
Beépített függvények Egyéb függvények: Inputbox() – felhasználói bevitel MsgBox() - kommunikáció VarType() – lekérdezhetjük a változó típusát c=InputBox("Írd be a neved") MsgBox("Biztos törölni szeretnéd ?",1) tipus=VarType(változó)
Karakterlánc függvények Trim() - A karaterlánc elejéről és végéről törli a szóközöket InStr() - Szövegkereső függvény mely egy karaterláncot keres egy másik karakterláncban. Left(),Mid(),Right() - A szöveg megfelelő részét adják vissza. UCase(), LCase() - A karakterléncot kicsi vagy nagy betűssé alakítják. a=Trim(str) pozició=Instr(0,"Ezt","Itt szerpel az Ezt szó",1) bal3=Left("123eddig tart",3) kicsi=LCase("NaGY")
Konvertáló függvények CByte(kif), CInt(kif), CDbl(), CLng(kif), CStr(kif) - A megfelelő altípussá alakítják az adatot. szam=CInt("12,3")
Idő, Dátum függvények Date - A rendszer időt adja vissza. DateValue - A bementeként kapott karaterláncot próbálja értelmezni mint dátumot. Day, Hour, Year, WeekDay, Minute, Month, Hour, Second - A dátum adott részét adják vissza. (Vasárnap=1) Time - A rendszeridőt adja vissza TimeValue - karakterlánc a bemenete melyet megpróbál időpontlént értelmezni datum=Date() datum=DateValue("2002. január 1") datum=DateValue("2002/január/1") nap = WeekDay(datum) ido=Time() ido=TimeValue("17:01:10") ora = Hour(ido)
Objektumok használni tudja a JavaScript-ben megismert objektumok többségét window.frames(0).document.bgcolor = "#ff00ff„ Az eseménykezelésre a VBScript belső eseménykezelőjét is használhatjuk. A függvény nevében szerepelnie kell az esemény nevének és a hozzá tartozó objektum nevének. Sub gomb1_OnClick msgbox "Az egyes gomb lett lenyomva" End Sub
ActiveX A dll utódja előre elkészített elemek egyedi azonosító CLSID használat előtt regisztrálni kell
Beillesztés <OBJECT ID="Label1" WIDTH=104 HEIGHT=27 CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"> <PARAM NAME="_ExtentX" VALUE="2752"> <PARAM NAME="_ExtentY" VALUE="714"> <PARAM NAME="Caption" VALUE="Label Control"> </OBJECT>
Hivatkozás Sub Label1_Click() Dim a a = Label1.Caption If a = "Start" Then a = "Stop" Else a = "Start" End If Label1.Caption = a End Sub
A mai előadás tartalma: Perl Python
Szerver oldali Programozás Adatbázisok integrálása (JTS, JDBC, ODBC, EJavaBeans) Transaction Processing monitor Háttérrendszerek integrálása (LDAP, NDS, …) Elosztott, hibatűrő rendszerek (RMI, JMS, Servlet) Skálázhatóság (Többszálú, komponensekből áll, RMI, JMS,) A munkafolyamatok leképezése (EJavaBeans) Csoportmunka támogatás (struktúrálatlan adat, hosszú folyamatok, szabályok, utak, feladatok) Adatbányászat
Szerver oldali Programozás I Szkript nyelvek: Python Perl Web orientált szkript nyelvek: PHP ASP XSP JSP
Szerver oldali Programozás II. Előre fordított nyelvek: C C++ Java VisualBasic
SSI (Server Side Includes) A webszerver értelmezi a HTML fájlt .shtml kiterjesztés Egyszerű megvalósítani Erőforrásigényes Biztonsági problémákat vet fel
SSI példa <HTML> <HEAD> <TITLE>Hali!</TITLE> <BODY> <H1>A szerver neve: <!--#echo var="SERVER_NAME"-->...</H1> <HR> A te géped címe <!--#echo var="REMOTE_HOST"-->, A dátum:<!--#echo var="DATE_LOCAL"--> </BODY></HTML>
SSI parancsok sizefmt echo var config include errmsg File virtual fsize file flastmod exec cmd Cgi config errmsg sizefmt timefmt
CGI (Common Gateway Interface) HTTP (GET/POST) 1 HTTP (GET/POST) Új process 2 Új process CGI 1 CGI 1 Szabványos bemenet Szabványos bemenet Feldolgozás Feldolgozás Szabványos kimenet Szabványos kimenet
CGI Szabványos felület Gyakorlatilag bármely programozási nyelvet használhatjuk Minden szkript saját környezeti változókkal rendelkezik A környezeti változókon keresztül történik a kommunikáció Érdemes a webszerverek nyújtotta lehetőségeket kihasználni : mod_perl
Szerver specifikus változók GATEWAY_INTERFACE - a CGI verziója SERVER_NAME - a szerver IP címe vagy neve SERVER_PORT - az a port amelyen a szerver a HTTP kérést kapta. (álatlában 80-as) SERVER_PROTOCOL - a kérés kezelő protokoll neve és verziója (pl.: HTTP 1.1) SERVER_SOFTWARE - A szerver szoftver neve és verziója
Kérés specifikus környezeti változók AUTH_TYPE - az azonosítás típus ha nincs azonosítás akkor a NULL értéket veszi fel. CONTENT_FILE - az adatkat tároló fájl neve, elérési útvonala CONTENT_LENGTH - az STDIN bemenetre érkező adat hossza CONTENT_TYPE - az adat típusa OUTPUT_FILE - a kimenetet fogadó fájl (csak windows estében) PATH_INFO - relatív útvonal melyet a kérés karakterlánc elé kell illeszteni PATH_TRANSLATED - ugyanaz mint az előző csak a relatív útvonal helyett itt abszolút útvonalat használunk. QUERY_STRING - az adat mely az URL-ben a '?' karakter után következett REMOTE_ADDR - a felhasználó IP címe REMOTE_USER - a felhasználó neve ha volt azonosítás REQUEST_LINE} - a teljes HTTP kérés REQUEST_METHOD - a HTTP kérés típusa SCRIPT_NAME - a CGI neve
CGI előnyei/hátrányai egyszerű nyelv független a process-ek izolálva vannak nyitott szabvány architektúra független Hátrányai: erőforrás igény nagy állapotmentes
ISAPI/NSAPI Microsoft/Netscape dll új szálakat indít a web szerver process-en belül ISAPI szűrők alkalmazása globális változókat kerülni kell ha egy szál behal az egész web szervert újra kell indítani
Internet Information Server Az ISAPI felépítése Internet database connector perl.dll ActiveX Server applications Application APIs Perl scripts Internet Information Server CGI Simple applications Filter APIs ActiveX Server filters Web browser
ISAPI hátrányai komplex nyelvfüggő nincs process elkülönítés hozzá van kötve a web szerverhez (többszálú vagy sem)
FastCGI a process-ek állandóak egy vagy több process, több szál socket-en keresztül kommunikál a web szerverrel egyedi azonosítók az egyes kéréseknek
Fast CGI csomagok FCGI_PARAMS A név/érték párok elküldésére használják (CGI állapot változók) a web szervertől az alkalmazás felé. FCGI_STDIN A szabványos bementet küldi el a web szerver. FCGI_DATA A szűrő adatokat küldi el. FCGI_STDOUT Szabványos kimenet a webszerverhez. FCGI_STDERR Hibajelentés. FCGI_END_REQUEST Befejzés.