A WEB Programozása Dr. Gál Tibor Automatizálási és Alkalmazott Informatikai Tanszék Általános információ Kommunikáció az előadóval Iroda: V2. épület, IV. emelet 454. szoba Tel: 2835 email: gal@aut.bme.hu Honlap: http://avalon.aut.bme.hu/webprogramozas Webforum: http://avalon.aut.bme.hu/webprogramozas/webforum Jegyzet Gál Tibor: WEBPROGRAMOZÁS Műegyetemi Kiadó, 2004 (55062) Segédanyag a könyvhöz http://avalon.aut.bme.hu/~gal/awp/index.html Kivetített anyag Letölthető a tantárgy honlapjáról Név: A tárgyat felvett hallgató Neptun kódja Jelszó: A tárgyat felvett hallgató Neptun kódja Előadás módja Elméleti anyag kivetítése Alátámasztás példákkal Általános információ Kiemelt fontosságú részek esetén ÍRÁS A TÁBLÁRA Követelmények Félévközi: egy zárthelyi Félévvégi: vizsga 1 ügyfél és 1 kiszolgáló oldali program minden írott és nyomtatott anyag használható gépen lévő online dokumentáció Néhány vizsgapélda bemutatása Általános információ Tananyag Dokumentációs nyelvek A HTML dokumentációs nyelv Kaszkád stíluslapok (CSS) Az XML Egyéb XML technológiák Névterek XSLT DOM SVG Ügyfél oldali programozás A mag JavaScript JavaScript a böngészőben (Java appletek a böngészőben) Kiszolgáló oldali programozás A CGI programozás Szervletek JavaServer Pages (JSP) (ASP alapú programozás?) http://avalon.aut.bme.hu/webprogramozas 1
Mi a WEB? BEVEZETÉS Kialakulása A WEB-dokumentumok fajtái Mi a WEB? Az egész világra kiterjedő elosztott információs hálózat. Min alapszik? Az információforrások megkülönböztethetősége (URI) Az erőforrásokhoz való hozzáférést biztosító protokollok (HTTP, ) Hipertext kapcsolat az erőforrások közti könnyű navigáláshoz Lényegében azt teszi mint elterjedése kezdetén: INFORMÁCIÓÁTVITELT bonyolít le De ahogy ma teszi, abban LÉNYEGES KÜLÖNBSÉG S ennek eszköze a WEBprogramozásban van Info korszak megjegyzések Oxford English Dictionary (126 év nyomtatás, 2010-től kizárólag csak az Interneten lesz elérhető) Adóbevallás az Interneten, Neptun, stb. A dokumentumok fajtái Statikus dokumentum 1 Kiszolgáló szemszögéből statikus dokumentum/statikus tartalom dinamikus dokumentum/dinamikus tartalom Ügyfél szemszögéből végleges megjelenésű dokumentum/tartalom változó megjelenésű dokumentum/tartalom Dokumentum előre elkészítve és tárolva HTML formában. Készítés: manuálisan, dokumentum generátorral, konverterrel, stb Példa: vizsga (bev1/web_dokumentumok/html/vizsga.html) Figyelem: a lokális linkek ( ) a pdf fájlokban nem működnek!!! 2
Statikus dokumentum 2 Statikus dokumentum 3 Dokumentum előre elkészítve és tárolva HTML és CSS formában. Elkészítés: manuálisan, dokumentum generátorral, konverterrel, stb. Példa: index1.html (bev1/web_dokumentumok/html_css/css/01.html) Dokumentum előre elkészítve és tárolva XML, XSLT alakban. Elkészítés: manuálisan, dokumentum generátorral, konverterrel, stb. Példák: mechanika (bev1/web_dokumentumok/xml_xsl/mechanika.xml) mechanika3 (bev1/web_dokumentumok/xml_xsl/mechanika3.xml) 1 2 3 Dinamikus dokumentum A dokumentumot egy program állítja elő a legkülönbözőbb erőforrások aktuális (a kiszolgálóhoz fordulás időpontjában fennálló) tartalma alapján. Példák: fizetesek, értékelés. (Csak aktív Tomcat kiszolgáló esetén hajtódik végre.) Végleges/változó megjelenésű dokumentum A letöltött (akár statikus akár dinamikus) dokumentum formája nem változik az ügyfél böngészőjében A letöltött (akár statikus akár dinamikus) dokumentum formáját a dokumentumba beékelt program az idő és/vagy a felhasználói beavatkozás függvényében változtatja (élő/live dokumentum) Példák: tábla rendezés(bev1/web_dokumentumok/tablademo/tablarendezes.html) drag and drop (bev1/web_dokumentumok/drag_and_drop/index.html) József Attila (bev1/web_dokumentumok/jozsefattila/index.html) memória (bev1/web_dokumentumok/memoria/index.htm) sokféle webforum (http://localhost:8080/webprogramozas/webforum/index.jsp) svg bev1\web_dokumentumok\dinamikus\svg\1.bat 3
WEBprogramozási technológiák Ügyféloldali JavaScript, Applet, VBScript, Kiszolgálóoldali CGI, Java Servlet, JavaServer Pages, JavaServer Faces, ASP, PHP, De a dokumentációs nyelvek is szükségek! HTML, CSS, XHTML, XML, SXLT, DOM, SVG, XPath, A fejlődés trendje Amit csak lehet, a tipikus feladatokat a kiszolgáló végezze el a kiszolgáló oldali program helyett! 1. példa: Ügyfél nevének bekérése, majd válaszüdvözlet generálása (Hello World megfelelője) 1. megoldás az első rendelkezésre álló technológiával (CGI program) http://localhost:8080/udvozlet.html 2. megoldás a fejlett JSP technológiával http://localhost:8080/udvozleta.html (Csak aktív Tomcat kiszolgáló estén hajtódik végre.) 1. megoldás (CGI program) Az ügyfél nevét bekérő HTML oldal <HTML> <HEAD><TITLE>Elso urlap</title></head> <BODY BGCOLOR="#7F7F7F"> <CENTER> <FORM ACTION="/cgi/2.js" METHOD="GET"> Vezetéknév:<BR> <INPUT TYPE="text" NAME="vezeteknev" SIZE=20><P> Keresztnév:<BR> <INPUT TYPE="text" NAME="keresztnev" SIZE=20><P> <INPUT TYPE="submit" VALUE="Mehet"> <INPUT TYPE="reset" VALUE="Mégsem"> </FORM> </CENTER> </BODY> </HTML> A választ generáló CGI program var stdin = WScript.StdIn; var WshShell = WScript.CreateObject("WScript.Shell"); var WshProcEnv = WshShell.Environment("PROCESS"); var str = WshProcEnv("QUERY_STRING"); var re = /\+/g; var str1 = str.replace(re," "); var re1 = /%([0-9a-fA-F][0-9a-fA-F])/g; var str = str1.replace(re1, function ($0,$1) { return String.fromCharCode( parseint($1.charat(0),16)*16+ parseint($1.charat(1),16)); } ); var sarray = str.split("&"); var stdout = WScript.StdOut; stdout.write("<html>"); stdout.write("<center>üdvözölöm "); for(i=0; i<sarray.length; i++){ var name = sarray[i].split("=")[0]; var value = sarray[i].split("=")[1]; stdout.write(" " + value); } stdout.write("</center></html>") 4
2. megoldás (JSP) Az ügyfél nevét bekérő HTML oldal <HTML> <HEAD><TITLE>Elso urlap</title></head> <BODY BGCOLOR="#7F7F7F"> <CENTER> <FORM ACTION="/2a.jsp" METHOD="GET"> Vezetéknév:<BR> <INPUT TYPE="text" NAME="vezeteknev" SIZE=20><P> Keresztnév:<BR> <INPUT TYPE="text" NAME="keresztnev" SIZE=20><P> <INPUT TYPE="submit" VALUE="Mehet"> <INPUT TYPE="reset" VALUE="Mégsem"> </FORM> </CENTER> </BODY> </HTML> A választ generáló JSP program <html> <center> Üdvözlöm ${param.vezeteknev} ${param.keresztnev} </center> </html> 2. példa: Vásárlói preferenciák lekérése és tárolása a kiszolgálón CGI megoldás: túl bonyolult, ne is foglalkozzunk vele JSP (JavaServer Pages) megoldás JSF (JavaSever Faces )megoldás JSP megoldás <c:foreach items="${paramvalues.food}" var="current"> <c:choose> <c:when test="${current == 'p'}"> <c:set var="parizsiselected" value="true" /> </c:when> <c:when test="${current == 'g'}"> <c:set var="gyulaiselected" value="true" /> </c:when> <c:when test="${current == 'd'}"> <c:set var="debreceniselected" value="true" /> </c:when> </c:choose> </c:foreach> <tr> <td> <input type="checkbox" name="food" value="p" ${parizsiselected? 'checked':''}>párizsi<br> <input type="checkbox" name="food" value="g" ${gyulaiiselected? 'checked':''}>gyulai<br> <input type="checkbox" name="food" value="d" ${debreceniselected? 'checked':''}>debreceni </td> </tr> 5
JSF megoldás <tr> <td> <h:selectmanycheckbox value="#{cust.foodselection}"> <f:selectitem itemvalue="p" itemlabel="párizsi" /> <f:selectitem itemvalue="g" itemlabel="gyulai" /> <f:selectitem itemvalue="d" itemlabel="debreceni" /> </td> </tr> Inkompatibilitások Kezdetben nagyon, ma más kevésbé, de még mindig inkompatibilisek a különböző kiszolgáló és böngésző programok! 1. példa: Görgethető táblázat: IE és Mozilla eltérően viselkedik index (bev1/elteresek/table_demos/table.html) indexf (bev1/elteresek/table_demos/1.bat) index1 (bev1/elteresek/table_demos/table1.html) index2 (bev1/elteresek/table_demos/table1a.html) Inkompatibilitások (folyt.) 2. példa: Központosítás CSS2-vel: IE és Mozilla eltérően viselkedik index (bev1/elteresek/centering/index.html) indexf (bev1/elteresek/centering/1.bat) index1 (bev1/elteresek/centering/index1.html) index1f (bev1/elteresek/centering/2.bat) index2 (bev1/elteresek/centering/index2.html) Inkompatibilitások (folyt.) 3. példa: Document Object Model: Kötelező, de elhagyott elemekre IE és Mozilla eltérően viselkedik index (bev1/elteresek/dom/8.html) indexf (bev1/elteresek/dom/0.bat) index1 (bev1/elteresek/dom/8a.html) indexf1 bev1/elteresek/dom/1.bat) index2 (bev1/elteresek/dom/8b.html) indexf2 (bev1/elteresek/dom/2.bat) 6
Jótanácsok! Es ist nicht genug zu wissen, man muss auch anwenden! Es ist nicht genug zu wollen, man muss auch tun! /Goethe/ A tudás önmagában nem elegendő, azt alkalmaznunk is kell! Nem elegendő valamit akarnunk, azt meg is kell tennünk! A lángész: egy százalék ihlet, kilencvenkilenc százalék verejték /Edison/ Genie is vielleicht nur Fleiß! A zsenialitás talán csak szorgalom! /Goethe/ 7