Web Server; FORM; e prima Programmazione

Transcript

1 Web Server; FORM; e prima Programmazione Web Client Dati ulteriori per la richiesta richiesta F O R M risposta Web Server Dati ulteriori (impliciti/indiretti) Programming CGI programming la richiesta e la risposta possono essere prodotti del calcolo eseguito da opportuni programmi; il client deve poter aggiungere dei dati alla sua richiesta, per permettere il calcolo; i programmi possono essere in funzione sia sul server (server side) che sul client (client side) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 1/22

2 Common Gateway Interface Meccanismo per la gestione, da parte del web server, di programmi/script eseguiti su server. Dopo la richiesta da parte del browser, la risposta potrebbe essere una risorsa prodotta da un programma (risorsa dinamica) invece che una risorsa statica. Perche? tecnologia stabile e essenzialmente browser independent; molti linguaggi tradizionali: shell-unix, batch-dos, Perl, Tcl, C,C++, Il programma cgi gestisce informazioni quali Visual Basic - get/post data - cookies Scopi? searching, db access, form handling - var ambiente client - var ambiente server Alternative? ASP.NET, PHP e ha accesso alle risorse del server (file system, db) client server Web server C G I Linguaggi per il Web, M.Temperini, web server, (cgi) form - 2/22

3 Configurazione server web (apache) ServerRoot "C:/Apache" Port 80 ServerAdmin ServerName localhost DocumentRoot "C:/Apache/htdocs" Dove sono i file del server; quale porta e tenuta in osservazione per ricevere richieste; indirizzo web master sara l indirizzo (solo per usi locali); = accesso con ip (sempre usi locali) con questi accessi, la directory di default in cui cercare i documenti e la DocumentRoot UserDir "\un\certo\path\documentdir" DirectoryIndex index.html index.php default.php accesso nella C:\...\Documents\marte\ AccessFileName.htaccess Alias /icons/ " / /icons/" File che, se e in una dir, ne governa i diritti di accesso; e un alias per la dir C: /icons/ ScriptAlias /cgi-local-bin/ " /Documents/localhtdocs/LOCALCGI/" ScriptAlias /cgi-bin/ "C:/apache/cgi-bin/" IndexOptions FancyIndexing AddIconByType (TXT,/icons/text.gif) text/* DefaultIcon /icons/unknown.gif Dove sono gli script che potranno essere eseguiti (che devono essere localizzati in precise dir. per questioni di sicurezza ) cgi-local-bin (dir aggiuntiva) cgi-bin default uno script si attivera alla richiesta httpd.conf (e sue scomposizioni) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 3/22

4 Configurazione server web (esperienze sparse) Inserire I propri esercizi XHTML-CSS nella dir. Public_html nel proprio account su lweb ed accedervi via web con Invece, con la propria istallazione del web server, e seguendo la traccia data dal file config.apache.pillole.txt, fare un po' di esperienze con la configurazione del web server Dopo aver istallato il webserver, accedere alla document root (via web), o con il nome simbolico o con il numero ip predefinito per gli usi locali Creare una propria directory localhtdocs, alternativa a quella default (definita in partenza come htdocs, o www ) e raggiungerla con il browser (il web server deve essere attivo ) Sperimentare l'uso della protezione basata su.htaccess Idem per.htpasswd (directory privato) Definire una directory cgi-local-bin, in cui sia possibile mettere script cgi e farli funzionare, in alternativa alla directory standard cgi-bin (in effetti la nuova definizione si aggiunge esattamente li' dove quella standard e' gia' presente... ) config.apache.pillole.txt Linguaggi per il Web, M.Temperini, web server, (cgi) form - 4/22

5 FORM Se si vuole una risorsa statica, basta indirizzare una richiesta al server specificando la uri della risorsa (una pagina statica, una figura, un suono). Se quel che si vuole e invece qualcosa di piu personalizzato (ad es. una pagina con informazioni diverse a seconda di chi e come le richiede) allora la richiesta deve essere corredata da informazioni che permettano al server di rispondere secondo le attese. Ogni interazione http (richiesta-risposta) puo coinvolgere informazioni di due tipi - informazioni implicite (dati di ambiente) ad es. REQUEST_URI = /cgi-local-bin/bat/provabat2.bat REMOTE_ADDR = REQUEST_METHOD = GET CONTENT_TYPE = CONTENT_LENGTH = HTTP_HOST = localhost HTTP_USER_AGENT = Mozilla/ Gecko/ Netscape/7.02 HTTP_ACCEPT =text/xml,...,text/html; image/png,image/jpeg, HTTP_ACCEPT_CHARSET = ISO , utf-8;q=0.66, *;q= informazioni esplicite (dati tout court) QUERY_STRING stdin In caso di richiesta POST, il programma che gira sul server avra i medesimi dati url-encoded leggendoli dallo stream di input standard. Sono lo strumento per fornire informazioni esplicite al server (inserite dall utente per personalizzare la richiesta) In caso di richiesta GET, la var. d ambiente QUERY_ STRING contiene i dati trasmessi dal client in formato url-encoded nome=valore&nome=valore&nome=valore es. primonome=marco&cognome=temperini&s1=in via+nome+e+cognome+%28e+riottienili%29 ( space ) = + / %28 + %29 %3D %2B %2F Linguaggi per il Web, M.Temperini, web server, (cgi) form - 5/22

6 FORM - <form> L elemento form contiene elementi per esprimere coppie NOME_DEL_DATO - DATO in modo che sia possible -al browser visualizzare l'elenco di campi da "riempire" (ognuno associato ad un nome) -all'utente inserire il dato in corrispondenza del campo (e cosi' il dato e' associato al nome) -al browser inviare il pacchetto di dati (con I nomi associati) al server, in una richiesta creata dal submit (Invio) La richiesta in pratica chiede l'esecuzione di un programma (es. cgi) sui dati inviati <form...> elementi della form </form> action la URI del programma cgi che processera i dati sul server method specifica come i dati verranno trasmessi get: dati appesi alla URI dell action, dopo un? post: dati inviati allo stdin del server enctype (application/x-www-form-urlencoded), accept-charset... GET Alla pressione di Invio1, viene attivata la richiesta con URI oma&lettere=fantascienza&lettere=horror&fiore=viola&fiore=astrusio&invio=invio1 POST Alla pressione di Invio1, viene attivata la richiesta con URI Linguaggi per il Web, M.Temperini, web server, (cgi) form - 6/22

7 FORM - <form> L elemento form contiene elementi per esprimere coppie NOME_DEL_DATO - DATO in modo che sia possible -al browser visualizzare l'elenco di campi da "riempire" (ognuno associato ad un nome) -all'utente inserire il dato in corrispondenza del campo (e cosi' il dato e' associato al nome) <form action=" associati) method="get"> -al browser inviare il pacchetto di dati (con I nomi al server, in una richiesta creata dal submit (Invio) <p>nome: La richiesta in pratica chiede l'esecuzione di un programma (es. cgi) sui dati inviati <input type="text" name="nome" value="susanna <form...> elementi della form </form> size="30"> action la URI del programma cgi che processera i dati sul server method specifica come i dati verranno trasmessi get: dati appesi alla URI dell action, dopo un? post: dati inviati allo stdin del server enctype (application/x-www-form-urlencoded), accept-charset... </p> <p>cognome: <input type="password" name="cognome" size="30"></p>... <p> <input type="submit" name="invio" value="invio1"> <input type="reset" value="annulla le scelte"> </p> </form> GET Alla pressione di Invio1, viene attivata la richiesta con URI oma&lettere=fantascienza&lettere=horror&fiore=viola&fiore=astrusio&invio=invio1 POST Alla pressione di Invio1, viene attivata la richiesta con URI Linguaggi per il Web, M.Temperini, web server, (cgi) form - 7/22

8 FORM - <form> L elemento form contiene elementi per esprimere coppie NOME_DEL_DATO - DATO in modo che sia possible <form action=" method="get"> -al browser visualizzare l'elenco di campi da "riempire" (ognuno associato ad un nome) <p>nome: -all'utente inserire il dato in corrispondenza del <input campo (e type="text" name="nome" value="susanna cosi' il dato e' associato al nome) -al browser inviare il pacchetto di dati (con I nomi size="30"> associati) al server, in una richiesta creata dal submit (Invio) </p> La richiesta in pratica chiede l'esecuzione <p>cognome: di un programma (es. cgi) sui dati inviati <input type="password" name="cognome" <form...> elementi della form </form> size="30"></p> action la URI del programma cgi che... <p> processera i dati sul server <input type="submit" name="invio" method specifica come i dati verranno value="invio1"> <input type="reset" value="annulla le scelte"> trasmessi </p> get: dati appesi alla URI dell action, dopo un? </form> post: dati inviati allo stdin del server enctype (application/x-www-form-urlencoded), accept-charset... GET Alla pressione di Invio1, viene attivata la richiesta con URI oma&lettere=fantascienza&lettere=horror&fiore=viola&fiore=astrusio&invio=invio1 POST Alla pressione di Invio1, viene attivata la richiesta con URI Linguaggi per il Web, M.Temperini, web server, (cgi) form - 8/22

9 FORM - <input> Un elemento <input> permette di specificare diversi tipi di dati: - text casella di testo - radio gruppo di opzioni (a scelta singola) - checkbox opzioni a scelta anche multipla - submit e il bottone di azione - reset un bottone per azzerare i campi - password casella testo, caratt. mascherati - hidden non visualizzato dal browser: nasconde dati che arriveranno al server <form action=" method="get"> <p>nome: <input type="text" name="nome" value="susanna size="30"> </p> <p>cognome: <input type="password" name="cognome" size="30"></p>... <p> <input type="submit" name="invio" value="invio1"> <input type="reset" value="annulla le scelte"> </p> </form> Pre assegnata ma modificabile QUERY_STRING nome=susanna&cognome= Abbacchi&...&invio=Invio1 Linguaggi per il Web, M.Temperini, web server, (cgi) form - 9/22

10 Cosa vediamo - un po' di introduzione sulle FORM - Alcuni esempi pratici di pagine web che fanno uso di script (o programmi) cgi (sta tutto nella directory ESPERIENZE-CGI) - SuBatch.html - SuC.html - minisito indovinelli Linguaggi per il Web, M.Temperini, web server, (cgi) form - 10/22

11 FORM - <input> <p>Preferenze calcistiche:<br /> <input type="radio" name="calc" value="roma"> Roma<br /> <input type="radio" name="calc" value="inter"> Inter<br />...</p> <p>preferenze letterarie: <br /> <input type="checkbox" name="lettere" radio button value="gialli"> Gialli <br /> Dati al server: uno solo <input type="checkbox" name="lettere" calc=roma value="fantascienza"> Fantascienza<br /> <input type="checkbox" name="lettere" value="horror"> Horror <br /> </p> <p> Scegliere tra i seguenti fiori (anche più di uno): <select name="fiore" size="5" multiple= multiple > <option value="rosa">rosa</option>... 6 altre... <option value="lilium">lilium</option> <option value="nasturzio">nasturzio</option> QUERY_STRING <option value="papavero">papavero</option> </select>...&calc=roma&lettere=fantascienza </p>... &lettere=horror&fiore=anemone&fior e=azalea&invio=invio1 Linguaggi per il Web, M.Temperini, web server, (cgi) form - 11/22

12 FORM - <input> <p>Preferenze calcistiche:<br /> <input type="radio" name="calc" value="roma"> Roma<br /> <input type="radio" name="calc" value="inter"> Inter<br />...</p> checkbox <p>preferenze letterarie: <br /> <input type="checkbox" name="lettere" Dati al server: tutti value="gialli"> Gialli <br /> quelli selezionati: <input type="checkbox" name="lettere" lettere=fantascienza value="fantascienza"> Fantascienza<br /> lettere=horror <input type="checkbox" name="lettere" value="horror"> Horror <br /> </p> <p> Scegliere tra i seguenti fiori (anche più di uno): <select name="fiore" size="5" multiple= multiple > <option value="rosa">rosa</option>... 6 altre... <option value="lilium">lilium</option> <option value="nasturzio">nasturzio</option> QUERY_STRING <option value="papavero">papavero</option> </select>...&calc=roma&lettere=fantascienza </p>... &lettere=horror&fiore=anemone&fior e=azalea&invio=invio1 Linguaggi per il Web, M.Temperini, web server, (cgi) form - 12/22

13 FORM - <input> - 4 Un immagine come submit button <p> <input type="image" src= img/ruote.dentate.gif" name= elaborazione"> </p> image oltre all attivazione della action:al server le coordinate del click bottone generico <p> <input type="button" value= spingiqui" onclick=... > </p> button non attiva action (e allora, evento onclick + javascript) <input type="hidden" name= titolocorso value= Fond.Inf.II"> Campo hidden serve a far arrivare al server informazioni incluse nel documento form ma non visualizzate sul browser ( dati sulla form ). Chi ha incluso queste informazioni? Magari il server stesso, quando ha fornito al browser il documento form, inserendoci dentro alcune informazioni di contesto da consultare quando la form verra attivata (ad es. perche l interazione tra client e server avviene con lo scambio di diverse form e bisogna mantenere delle informazioni di stato tra l una e l altra) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 13/22

14 FORM - <select> Un elemento <select> contiene una sequenza di opzioni, rese come un menu (scrollabile o a tendina). L attributo nome fornisce il nome per i dati prodotti. Con multiple= multiple, si possono selezionare piu valori del menu. Una opzione e un elemento <option>, il cui attributo value specifica il valore da dare a nome se quella opzione e selezionata. Per <option>, selected= selected rende selezionata per default l opzione (similmente a checked= checked delle checkbox o radio button); disabled= disabled disabilita l opzione (come per gli elementi <input>). <p> Scegliere tra i seguenti fiori (anche più di uno): <select name="fiore" size="5" multiple= multiple > <option value="rosa">rosa</option>... 6 altre... <option value="lilium">lilium</option> <option value="nasturzio">nasturzio</option> <option value="papavero">papavero</option> </select> </p> QUERY_STRING...&calc=Roma&lettere=Fantascienza &lettere=horror&fiore=anemone&fior e=azalea&invio=invio1 Dati al server: tutti quelli selezionati: fiore=anemone fiore=azalea Linguaggi per il Web, M.Temperini, web server, (cgi) form - 14/22

15 FORM - <select> + <textarea> <textarea rows="7" cols="40" name="pensieri"> scrivete qui i vostri pensieri </textarea> <p> fiore preferito: <select name="fiore > <option value= snarl">nessuno</option> <option value="rosa">rosa</option>... 6 altre... <option value="lilium">lilium</option> <option value="nasturzio">nasturzio</option> <option value="papavero">papavero</option> </select> </p> QUERY_STRING ri &fiore=snarl&invio=invio1 Linguaggi per il Web, M.Temperini, web server, (cgi) form - 15/22

16 Risorse (1/2) web server (apache core features, per il significato di ciascuna parola che appare nell httpd.conf ) - help installing - APPUNTILINUX - easyphp; xampp; wamp; mamp (applicazioni che permettono di istallare e gestire in un colpo solo apache, php con mysql e magari un smtp o ftp server verificare le configurazioni di default) CGI Directory pubblica -ESPERIENZE-CGI/config.apache.pillole.txt - esperimenti in /ESPERIENZE-CGI/bat/SuBatch.html - esperimenti in /ESPERIENZE-CGI/c/SuC.html - esperimenti in /ESPERIENZE-CGI/lx/SuLx.html (per i sistemi linux) - altro vedi ESPERIENZE-CGI/README.txt (tornando indietro per un momento a proposito di XHTML e del suo reale uso ) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 16/22

17 Risorse (2/2) WINSCP per trasferire da una macchina (laboratorio o casa) sul proprio account nel server del laboratorio (vedi slide prima lezione) account - per esercizi in laboratorio, - per verificare su un altra macchina quello che funzionerebbe sulla propria - per istallazione tesine viene assegnato ad personam appena loggati, cambiare la password (usando putty (vedi terza slide successiva)tramite WINSCP - Nella dir public_html di questo account vengono messe le risorse da gestire tramite web server (XHTML, PHP, XML): raggiungibile mediante Linguaggi per il Web, M.Temperini, web server, (cgi) form - 17/22

18 Pratica (1/3) Pratica cgi Eseguito il collegamento si possono -Prendere I file visti a lezione dalla dir pubblica (dir CGI) - (modificarli e) trasferirli nella directory /cgi-bin del proprio computer - e vedere se funzionano (ATTENZIONE ai path delle chiamate di programma: ovviamente quelli presenti nelle cose prese dalla dir. pubblica sono buoni per la configurazione della macchina usata a lezione sulla propria macchina potrebbe esserci una situazione di directory diversa e di cio' bisogna tener conto. ATTENZIONE ( = accesso alle risorse da servire via web) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 18/22

19 Pratica (2/3) Compilazione di un programma c sotto linux cc prova1c.c o prova1c compila il file prova1c.c e produce il file eseguibile prova1c Script unix - Iniziano con #!/bin/sh - il type degli script dos corrisponde a cat in unix - si possono chiamare nome.cgi (o anche nome.sh. Magari evitiamo di chiamarli.bat, ok?) Uso dei file di esempio visti a lezione (repetita juvant) - sono disponibili in ESPERIENZE-CGI.zip - se usati sulla propria macchina, I programmi possono ancora essere messi nella dir cgi-bin - se usati sul server lweb, vanno messi in una directory CGI definita in /public_html. Il server e' configurato per permetterlo. Se la directory non e' gia' presente in public_html, basta aggiungerla. In tutti I casi, gli esempi contenuti in SuC.html, SuBatch.html, indovinelli, vanno probabilmente modificati, in modo che si faccia riferimento ai programmi usando i path giusti nella situazione in corso (che possono essere da "un pochino" a "totalmente" diversi da quelli originalmente usati durante la lezione). Riguardo agli script "bat", questi evidentemente fuunzionano solo nei sistemi basati su windows (ad esempio non su lweb). Ma si possono sempre modificare, scrivendoli nel linguaggio di scripting del sistema linux (per noi su lweb, bash): ottimo esercizio Privilegi di esecuzione Puo essere che file eseguibili e script non possano essere eseguiti per carenza di permesso. chmod o+x nomefile.ext e la soluzione; eseguito da console linux che si puo aprire in winscp (vedi figura successiva) NB I permessi su un file possono essere gestiti anche attraverso winscp, cliccando sul file con il pulsante destro del mouse e scegliendo proprieta dal menu contestuale Linguaggi per il Web, M.Temperini, web server, (cgi) form - 19/22

20 Pratica (3/3) Interfaccia putty Interfaccia per 1 comando per volta Linguaggi per il Web, M.Temperini, web server, (cgi) form - 20/22

21 Attivita pratica CGI-0 sperimentare con istallazione casalinga di apache: eseguire la definizione delle directory locali viste a lezione (terza slide) e sperimentarne l uso; aggiungere in httpd.conf le definizioni necessarie a far apparire un index di una delle directory definite similmente all esempio in figura: aggiungere tipi di file non considerati nella configurazione di default; aggiungere o riusare icone corrispondentemente a tipi di file aggiuntivi; aggiungere o modificare la descrizione testuale corrispondente a certi tipi di file. Descrivere in una pagina web contenuta nella directory le direttive ed opzioni usate nella definizione delle directory CGI-0bis Proteggere una directory (definita come un alias in httpd.conf) mediante un file.htaccess; provvedere a che solo tre utenti di propria scelta, autentcati da password, possano accedere al listing della dir e ai suoi file. Descrivere in una pagina web contenuta nella directory le direttive ed opzioni usate nella definizione della directory ed in quella del file di controllo accesso. Provare a rendere impossibile l accesso al listing della directory, lasciando pero possibile l accesso alla pagina web descrittiva di cui sopra Linguaggi per il Web, M.Temperini, web server, (cgi) form - 21/22

22 Attivita pratica CGI-1 sperimentare e modificare gli esercizi visti a lezione (corrispondenti a SuBatch.html, SuC.html,e SuJava.html). Produrre almeno un nuovo file eser.cgi.1.html con un uso personale della cgi batch (o shell per unix) (Modificare solo copie dei file di partenza ) CGI-2 Scrivere un documento xhtml eser.cgi.2.html in cui sia replicata la struttura della form in figura; il campo cognome e di tipo password; azalea e anemone sono selezionati per default; sono possibili multiple selezioni per i fiori. Sperimentare l invio con metodo post e get con un programma cgi in c scritto appositamente (o provac2.exe). CGI-3 ripetere il precedente ma producendo eser.cgi.3, usando cgi java (discutibile come scelta, non da approfondire, ma utile come esercizio) CGI-4 visitare il sito e provare a installare e far funzionare i programmi cgi in c (quelli introduttivi - cgi-test) Linguaggi per il Web, M.Temperini, web server, (cgi) form - 22/22