Laboratorio di Basi di Dati

Transcript

1 Laboratorio di Basi di Dati Introduzione Anno accademico Paolo Perlasca Parte di questi lucidi è tratta da una versione precedente di Marco Mesiti, Stefano Valtolina, Daniele Riboni e Sergio Mascetti

2 Prima parte: Introduzione 2

3 Informazioni sul corso di laboratorio Un solo turno Orari (esatti, da rispettare) Martedì 10:30 13:00 Mercoledì 10:30 13:00 Frequenza non obbligatoria 3

4 Sito del corso Sito del corso Per scaricare il materiale usare le stesse credenziali del corso di teoria Trovate: Tutte le regole del corso (comprese quelle d esame) Il calendario delle lezioni e il materiale didattico UID e PWD: le stesse che usate per le slide di teoria Ultime notizie Controllate le ultime notizie la sera prima di una lezione. 4

5 Contatti con il docente Ricevimento studenti su appuntamento via mail Prima di scrivere una mail, controllate che quello che state per chiedere non sia sul sito 5

6 Argomenti del corso di laboratorio Mettete in pratica quanto imparate durante le lezioni di teoria Progettazione, creazione e interrogazione di una base di dati Imparate a programmare per il Web cioè a scrivere dei programmi che interagiscono con una base di dati e generano dinamicamente delle pagine Web 6

7 Come si supera l esame di DB Prima dovete superare la prova di teoria Poi potete partecipare alle prove di laboratorio svolgerete a casa un progetto che sarà assegnato a breve. in aula informatizzata vi verrà chiesto di modificare il progetto Avrete 3 ore di tempo. 7

8 Come si supera l esame di DB Nelle lezioni di laboratorio sarete stimolati a risolvere in modo indipendente i problemi Usando libri di testo e il Web Potrete usarli anche all esame di lab! Sarete guidati passo passo allo sviluppo del progetto L esame che farete in aula all esame è fondamentale Non basta aver fatto bene il progetto: dovete mostrare di saperlo sviluppare e modificare da soli 8

9 FAQ Per la realizzazione del progetto possiamo rivolgerci al docente? Assolutamente SI. Alcune delle lezioni del laboratorio saranno dedicate a discutere i vostri progressi nello svolgimento del progetto 9

10 FAQ Quant è importante la parte di progettazione rispetto all implementazione? Fondamentale. Un qualunque applicativo deve fondarsi su una buona progettazione rigorosa e metodologica. Una qualunque casa costruita su buone fondamenta cresce bene. Se si sbagliano le fondamenta, la casa crolla. 10

11 Quali tecnologie utilizzeremo durante questo corso? Sul client: HTML come linguaggio di marcatura CSS per definire i fogli di stile JavaScript per scripting lato client Sul server: Apache httpd come web server PHP per scripting lato server PostgreSQL come DBMS 11

12 Installazione software Trovate le slide con le istruzioni sul sito del corso Provate ad installarlo da soli sul vostro PC/ laptop per la prossima lezione Ci sarà un tutorial facoltativo la settimana prossima alla fine di una delle lezione per chi non dovesse essere riuscito ad installare il software 12

13 Seconda parte: programmare per il web 13

14 Pagine web statiche: l idea Pagine che mostrano sempre le stesse informazioni Esempio: pagina in cui vengono utilizzati i tag fondamentali di HTML Per modificare il contenuto della pagina è necessario modificarla a mano 14

15 Pagine web statiche 1:request prova.html web client 2:response web server Per ogni pagina, il web server memorizza un file (es: HTML) Quando richiesto, il server invia il file al client Il browser visualizza la pagina web 15

16 Caricamento di una pagina Statica Computer del Visitatore (Internet Browser) Richiesta della Pagina HTTP Invio Pagina Web Server Ritorna HTML Carica pagina /.../prova.html File System 16

17 Programmare per il web La quasi totalità dei siti ha comportamenti molto più complessi rispetto alle pagine in HTML semplice es: gmail, google, facebook, siti di news Differenza tecnica principale: Oltre al semplice trasferimento di informazioni, viene eseguito del codice Sul server e/o sul client Questo codice viene detto script 17

18 Script lato client Alcune pagine possono contenere del codice che viene eseguito sul client Quando il browser riceve la pagina esegue il codice (mediante lo script engine ) visualizza la pagina Esempio di linguaggio di script lato client: Javascript 18

19 JavaScript HTTP Request browser web server interprete JavaScript (script engine) file HTML +codice JavaScript HTTP Response 19

20 Script lato server e pagine web dinamiche Per ogni pagina, il web server memorizza un file che contiene: Marcatura (markup) HTML (è lo «scheletro» della pagina) del codice di script Quando la pagina viene richiesta il server: esegue il codice di script, che genera altre informazioni di marcatura («riempie lo scheletro») invia il risultato al client Il browser mostra la pagina 20

21 Script lato server e pagine web dinamiche Esempio: Server Client file «prova.php» su filesystem pagina Web « 21

22 Architettura 3 tier Uno script lato server può interagire con una base di dati per leggere e/o scrivere dati 1:request web server SCRIPT EXECUTION 2:request 4:response 3:response web client DB 22

23 Caricamento di una pagina dinamica Richiesta della Pagina + eventuali parametri Web Server Computer del Visitatore (Internet Browser) HTTP Invio Pagina Ritorna HTML Esegue script Carica pagina ODBC HTTP: ODBC: HyperText Transfer Protocol Open DataBase Connectivity File System DataBase 23

24 Riassumiamo: Input e Output del web server Scripting lato server NO SI NO Input: indirizzo pagina Output: HTML Input: indirizzo pagina (+ eventuali parametri) Output: HTML Scripting lato client SI Input: indirizzo pagina Output: HTML + codice di scripting (eseguito dal client) Input: indirizzo pagina (+ eventuali parametri) Output: HTML + codice di scripting (eseguito dal client) 24

25 Quali tecnologie utilizzeremo durante questo corso? Sul client: HTML come linguaggio di marcatura CSS per definire i fogli di stile JavaScript per scripting lato client Sul server: Apache httpd come web server PHP per scripting lato server PostgreSQL come DBMS 25

26 Terza parte: HTML, CSS e primi passi con PHP 26

27 HTML: un rapido ripasso Definito (insieme ad HTTP) da Tim Berners-Lee al CERN nei primi anni 90 Linguaggio di marcatura NON di programmazione! Serve per definire un ipertesto I TAG servono per marcare il testo HTML: <b>ciao</b> Risultato: ciao 27

28 Organizzazione di un ipertesto lettura secondo legami associativi nodi (pagine) link anchor 28

29 HTML: struttura di una pagina <html> <head> caratteristiche del documento Parte opzionale </head> <body> documento </body> </html> 29

30 HTML: prova tu! Crea un file (sul desktop) con estensione.html Apri il file con blocco note Inserisci all interno del file: <html><body> ciao <b>come</b> stai? <a href= prova.html >go!</a> </body></ html> Apri il file con il browser Hai capito cosa vuol dire <b>? E </b>? A cosa serve <a>? Cos è quell href? 30

31 HTML: gli attributi In alcuni casi un TAG ha bisogno di informazioni aggiuntive Esempio: se vogliamo creare un link, bisogna indicare a quale pagina punta il link La sintassi per gli attributi è molto semplice Esempio: <A HREF= >ciao</a> HREF è il nome dell attributo è il valore impostato per l attributo 31

32 HTML: quali tag posso usare? Esiste un insieme di tag che si possono usare Insieme relativamente piccolo, sono qualche decina Quindi li potete guardare tutti in poco tempo! Alcune risorse (ce ne sono tantissime) 32

33 Esercizio Modifica la pagina che hai creato prima e riproduci la pagina qui a fianco - usa questi tag: <A>, <P>, <B>, <BR/> <H1>, <H3>, <H6> <UL>, <LI> <table>, <th>, <tr>, <td> Come si usano? Cerca sul web 33

34 Un errore comune in HTML Usare il tag <FONT> per formattare del testo. Problemi: necessario usare il tag <FONT> tante volte (con parametri diversi) per cambiare la formattazione è necessario modificare il tag <FONT> che si ripete nella stessa pagina ma anche in pagine diverse Il tag FONT è stato deprecato E allora come si fa? à fogli di stile 34

35 I fogli di stile (o CSS): l idea Separare il contenuto di un documento da aspetti legati alla sua presentazione Quando si scrive il contenuto di una o più pagine web non si specifica la presentazione ma si associa una classe ad ogni parte di testo Esempio: <P CLASS= inevidenza >ciao</p> Dopo, per ogni parte di testo, si specifica una regola su come deve essere formattata Esempio: P.inEvidenza {color : red;} 35

36 Dove si definisce lo stile Lo stile da usare in una pagina si può definire All interno del tag <HEAD> usando il tag <STYLE> In un file esterno, a cui si fa riferimento all interno del tag <HEAD> usando il tag <LINK> Quale delle due tecniche è più comoda secondo te? 36

37 Esercizio Prendi il file sul sito del corso Il file contiene un intervista. Usando i fogli di stile, fai in modo che le domande siano in rosso e le risposte in verde. Ehi, ma non mi hai spiegato come si fa, non so cosa devo fare. Hai capito l idea? Bene, cerca sul web un esempio e adattalo al tuo problema 37

38 Breve introduzione a JavaScript Il browser visualizza il documento HTML e interpreta (esegue) le istruzioni scritte in JavaScript <script language="javascript"> <!-- codice JavaScript //--> </script> 38

39 Esempio di funzione JavaScript <script> //Scrivere una funzione per stabilire se un numero è primo function testprimo(n) { var bool = true; for (var i = 2; i < n; i++) { bool = bool && (n % i!= 0); } return bool; }; var num = prompt('inserire un numero', 1); if (testprimo(num)) { alert(num + ' è primo') } else { alert('riprova'); }; </script> 39

40 Gli eventi in JavaScript L interazione con l utente è guidata dagli eventi L utente genera un evento Se nel file HTML esiste del codice JavaScript associato a quell evento (event handler), questo viene eseguito 40

41 JavaScript Molto spesso il codice JavaScript è scritto all interno dei tag HTML come valore di nuovi attributi che sono stati introdotti per gestire gli eventi generati dall utente. Esempio: <a href=" onmouseover="alert('hai passato il mouse')">passa il mouse</a> Esercizio: inserisci il codice in una pagina HTML che hai creato in precedenza (slide 33) e verifica il risultato 41

42 HTML cosa ci interessa in particolare Nella gestione di pagine web dinamiche serve creare diversi strumenti di interfaccia che permettono l interazione con l utente: Pulsanti, caselle di testo, caselle di scelta, etc Vediamo come si possono inserire in una pagina HTML 42

43 Le form Le form sono dei moduli che possono essere compilati dai visitatori di un sito permettendo così la creazione di pagine HTML interattive e non solo di consultazione Si deve usare il comando <form> descrizione </form> 43

44 I pulsanti E possibile inserire un pulsante Cosa succede quando viene premuto un pulsante? Viene eseguito del codice lato client (con uno script) e/o I dati della form vengono inviati al server Esempio: <input type="submit" value="invia"> 44

45 Altri elementi di interfaccia Altri elementi possono essere creati con il tag <input> e valori diversi dell attributo type type="text" type="hidden" type="checkbox" type="password" type="radio" type="submit" type="file" type="reset" NB: ogni elemento di un modulo deve avere un nome (name="...") che viene usato al momento dell invio dei dati Esempio: <input type="password" name="pwd"> 45

46 Crea la pagina HTML per ottenere il seguente risultato Questa è una tabella che si utilizza per allineare i campi TAG <INPUT> di tipo text TAG <INPUT> di tipo password TAG <INPUT> di tipo submit TAG <INPUT> di tipo reset Per ora NON devi definire il comportamento (cioè non deve succedere nulla quando si preme OK ) ma devi solo visualizzare questa form 46

47 Definiamo la action Vogliamo inviare i dati inseriti dall utente ad un altra pagina Definiamo, all interno del tag FORM: METHOD= get ACTION= scrivinome.php crea una pagina scrivinome.php con <HTML><BODY> <?php $name = $_GET[ tuonome ]; echo "<b>bravo ".$name."!</b>";?> </BODY></HTML> 47

48 Definiamo la action (cont) Funziona? Dove sta il problema? Prova ad indirizzare la richiesta verso la pagina che sta a questo indirizzo: (cosa devi modificare?) scrivinome.php Cosa conterrà il sorgente di quella pagina? 48

49 Esercizio per domani Installate il software Apache httpd, PHP e PostgreSQL su una vostra macchina E verificare che funzioni Trovate le istruzioni sulle slide nel sito (già pubblicate) 49

50 Esercizio per martedì prossimo A partire dal form appena sviluppato, costruisci un altro form che permetta la registrazione ad un servizio. L utente deve: Inserire nome e cognome Specificare se è maschio o femmina Scegliere (anche più di una) delle attività che gli piacciano in una lista formata da sci, tennis, golf, canoa, altro Confermare la lettura delle condizioni di utilizzo Questi dati devono essere inviati ad una pagina PHP che li deve stampare tutti Crea un foglio CSS per entrambe le pagine, installa tutto sul tuo PC e verifica che funzioni! 50