Appunti dei corsi di PROF. G. BONGIOVANNI 3) LA PROGRAMMAZIONE NEL WEB...2 3. 1) Estensione per mezzo delle form... 2 3. 2) Common Gateway Interface... 6 3. 3) Linguaggio JavaScript (già LiveScript)... 11 3. 4) Linguaggio Java... 14 1
3) La programmazione nel Web! # $ % &'(!# # 3. 1) Estensione per mezzo delle form ) *+! &'(!,- *+!-. *+!! &'(! # 2
1) Dati della form 2) Dati della form Client Server Web Applicaz. esterna 4) Risultati 3) Risultati / $0 % # $&'(!% http://somewhere.com/search.html ( 3
1 &'(! # # 2# 0 3 &'(! <HTML> <HEAD><TITLE>... </TITLE></HEAD> </BODY> <CENTER> <H1>BIBLIOTECA DEI SOGNI</H1> <H3>Modulo ricerca dati</h3> <HR> <FORM ACTION=http://somewhere.com/scripts/biblio.cgi> Autore:<INPUT TYPE=text NAME=autore MAXLENGTH=64> <P> Titolo:<INPUT TYPE=text NAME=titolo MAXLENGTH=64> <P> <INPUT TYPE=submit><INPUT TYPE=reset> </FORM> <HR> </BODY> </HTML> <FORM... > ACTION $ % biblio.cgi$ 4 % <INPUT... > # 5 67 56 *+! NomeDelCampo1=ValoreDelCampo1&NomeDelCampo2=ValoreDelCampo2 NomeDelCampo NAME# 4
ValoreDelCampo # &! FORM ACTION=...METHOD=...- GET $ %# POST $ % / <FORM ACTION=...> <FORM ACTION=... METHOD=get> <FORM ACTION=... METHOD=post> 3 *+! 66 $ % GET /scripts/biblio.cgi?titolo=congo&autore=crichton&submit=submit HTTP/1.0 User-agent:... Accept:...... <----- riga vuota 3 POST POST /scripts/biblio.cgi HTTP/1.0 User-agent:... Accept:...... Content-type: application/x-www-form-urlencoded Content-length: 42 <----- riga vuota titolo=congo&autore=crichton&submit=submit <----- dati della form 4 5 # 3 $ % biblio.cgi # # 5
# &'(! # 1) Dati della form Client Server Web 6) Risultati (formato HTML) 5) Risultati (formato HTML) 2) Dati della form 3) Query al DBMS biblio.cgi DBMS 4) Risultati della query / $/8( 7% 3. 2) Common Gateway Interface biblio.cgi /- $% 9 *,:- $*3;%#.',!# 6
,.) <# 7 $( =7% 7 *3;., : 9.,: #,:$ POST % (,:#! campo=valore$ GET%!# *+! $ $%&$% # * POST ( ( 1 $ >2?999??%# #! * POST,: 0!,:,:,,: &'(! # $'%!,:. &'(! 7
! $ % () '>7 ( ( 1 ' ) *+! ) *+) =@1 1 println(string s),: &'(! println(status: 200 OK); println(content-type: text/html); println(); //linea vuota che delimita la fine delle metainformazioni println(<html>); println(<head>);... println(</head>); println(<body>);... println(</body>); println(</html>); A,: *+! println(status: 200 OK); println(location: /docs/index.html); println(); //linea vuota che delimita la fine delle metainformazioni. 9 # ( =7 $,:% /,:# # #,: # 8
,: #,: - /8( 7$ % # # /8( 7$%,:#,: &'(! # *,: #! 6 6 &'(! 7 $ %&'(! # $ %#,:$ % # #,:# :, 7 BCC2BCC2# rect /paginaa.html 5,5,95,45 rect /paginab.html 5,55,95,95 ' $% 9
0, 0 image.gif 5, 5 Un click in questa area porta alla pagina paginaa.html 95, 45 Un click in questa area porta alla pagina paginab.html! 3 <A HREF=image.cgi$image.map><IMG SRC=image.gif ISMAP></A> 5 DCEC $ % GET image.cgi$image.map?50,20 HTTP/1.0 image.cgi $ *+! % + 4 &'(! 10
&'(! <IMG SRC=image.gif USEMAP=#localmap> <MAP NAME=localmap> <AREA COORDS=5,5,95,45 HREF=paginaA.html> <AREA COORDS=5,55,95,95 HREF=paginaB.html> </MAP> ) 8. 0 USEMAP <A HREF=image.cgi$image.map><IMG SRC=image.gif ISMAP USEMAP=#localmap></A> <MAP NAME=localmap> <AREA COORDS=5,5,95,45 HREF=paginaA.html> <AREA COORDS=5,55,95,95 HREF=paginaB.html> </MAP> 1 F &' $ ''!1&1/%, # &+'' # ' 0 3. 3) Linguaggio JavaScript (già LiveScript) 1 3, < &'(!' 9 -<7 3 6 6 <7 7 11
<HTML> <HEAD> <SCRIPT LANGUAGE=LiveScript> function checkform (form){ if (form.cognome.value == ) { alert(errore: il campo \Cognome\ non puo\' essere vuoto); form.cognome.focus(); form.cognome.select(); } else { form.submit(); } } </SCRIPT> </HEAD> <BODY> <CENTER> <FORM> Cognome:<INPUT NAME=cognome VALUE=> <P> <INPUT TYPE=button VALUE=Submit > onclick=checkform (this.form); <INPUT TYPE=reset> </FORM> </CENTER> </BODY> </HTML> 12
! http://somwhere.com/checkform.html #( <7 7 7 8 13
# $ %#, # )8#,# # < : / ) 8, 2 + 7 '2! = ) 3. 4) Linguaggio Java,:-?! 7 < 14
= $ GC% =@ 9 $ % 1 # 7 <! $ % < $# $&'% # 6 6&'(! $9 % # - 9 $ (.1:? ECCC% 7 H,*$ $-*$.,-.% 1.class # 7.class < 3 $ % 3 *$ &>7 15
/ A < # <A( $ ( 7 12-<A( %# 7=$!2 9( =7% 3 <A( < ' $ % $ %% H H I! BaseAppE8_applet I $ H I% 7! BaseAppE8_applet Applet, Panel Container - H Applet init() H main() 16
//Applet multithreaded per l'apertura di una connessione di rete import java.applet.*; import java.awt.*; public class BaseAppE8_applet extends Applet { Label label1, label2, label3, label4; TextField textfield1, textfield2; TextArea textarea1, textarea2; Button button1, button2, button3, button4, button5, button6; BaseTConn basetconn; } //-------------------------------------------------- public BaseAppE8_applet() { } this.setlayout(null); //aggiunta elementi interfaccia utente resize(600, 460); show(); //-------------------------------------------------- public void init() { } new BaseAppE8_applet(); //-------------------------------------------------- public boolean handleevent(event event) { } // gestione eventi, come in Esempio 8 //-------------------------------------------------- } void button1_clicked(event event) { } //come in esempio 8, vale anche per tutti i successivi metodi 17
& &'(! H <applet code=baseappe8_applet.class width=600 height=460></applet> 5 JCC2KJC2# :1'BaseAppE8_applet.class# <A( $ % $ %# =@ # $JCC2KJC2 % # $<A(%.class 1 <APPLET CODE=game.class WITDH=200 HEIGHT=200> <PARAM NAME=level VALUE=5> <PARAM NAME=weapons VALUE=none> </APPLET> public String getparameter(string paramname) Applet paramname ' HLA 18