1 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...
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
Általános információ
Általános információ Tananyag Dokumentációs nyelvek
Előadás módja Elméleti anyag kivetítése Alátámasztás példákkal 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
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
A WEB programozása - Bevezetés dr. Gál Tibor BEVEZETÉS Mi a WEB ? Kialakulása A WEB-dokumentumok fajtái
2010. őszi félév
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.
Ü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
A WEB programozása - Bevezetés dr. Gál Tibor Statikus dokumentum 2
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)
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.)
2010. őszi félév
Statikus dokumentum 3
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
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
A WEB programozása - Bevezetés dr. Gál Tibor
2010. őszi félév
WEBprogramozási technológiák
A fejlődés trendje Amit csak lehet, a tipikus feladatokat a kiszolgáló végezze el a kiszolgáló oldali program helyett !
Ü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, …
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 <TITLE>Elso urlap
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(""); stdout.Write("
Ü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("
")
4
A WEB programozása - Bevezetés dr. Gál Tibor
2010. őszi félév
2. megoldás (JSP)
A választ generáló JSP program
Az ügyfél nevét bekérő HTML oldal
Üdvözlöm ${param.vezeteknev} ${param.keresztnev}
<TITLE>Elso urlap
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 ...
Párizsi Gyulai Debreceni
...
5
A WEB programozása - Bevezetés dr. Gál Tibor JSF megoldás ...
...
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)
2010. őszi félév
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.) 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
A WEB programozása - Bevezetés dr. Gál Tibor
2010. őszi félév
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/
