Laboratorio di Basi di Dati

Introduzione

Parte di questi lucidi è tratta da una versione precedente di Marco Mesiti, Stefano Valtolina, Daniele Riboni e Sergio Mascetti

Anno accademico 2017-2018

Paolo Perlasca

2

Prima parte: Introduzione

3

Informazioni sul corso di laboratorio

n  Un solo turno

n  Orari (esatti, da rispettare)

n  Martedì 10:30 – 13:00

n  Mercoledì 10:30 – 13:00

n  Frequenza non obbligatoria

4

Sito del corso

n  Sito del corso n  https://homes.di.unimi.it/dbandsec/LAB/1718/

n  Per scaricare il materiale usare le stesse credenziali del corso di teoria

n  http://everywarelab.di.unimi.it/db

n  Trovate: n  Tutte le regole del corso (comprese quelle d’esame) n  Il calendario delle lezioni e il materiale didattico

n  UID e PWD: le stesse che usate per le slide di teoria n  Ultime notizie

n  Controllate le ultime notizie la sera prima di una lezione.

5

Contatti con il docente

n  Ricevimento studenti su appuntamento via mail – paolo.perlasca@unimi.it

n  Prima di scrivere una mail, controllate che quello che state per chiedere non sia sul sito

6

Argomenti del corso di laboratorio

n  Mettete in pratica quanto imparate durante le lezioni di teoria

n  Progettazione, creazione e interrogazione di una base di dati

n  Imparate a programmare per il Web cioè a scrivere dei programmi che

n  interagiscono con una base di dati e

n  generano dinamicamente delle pagine Web

7

Come si supera l’esame di DB

n  Prima dovete superare la prova di teoria

n  Poi potete partecipare alle prove di laboratorio

n  svolgerete a casa un progetto

n  che sarà assegnato a breve.

n  in aula informatizzata vi verrà chiesto di modificare il progetto

n  Avrete 3 ore di tempo.

8

Come si supera l’esame di DB

n  Nelle lezioni di laboratorio sarete stimolati a risolvere in modo indipendente i problemi

n  Usando libri di testo e il Web

n  Potrete usarli anche all’esame di lab!

n  Sarete guidati passo passo allo sviluppo del progetto

n  L’esame che farete in aula all’esame è fondamentale

n  Non basta aver fatto bene il progetto: dovete mostrare di saperlo sviluppare e modificare da soli

9

FAQ

n  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

10

FAQ

n  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.

11

Quali tecnologie utilizzeremo durante questo corso?

n  Sul client:

n  HTML come linguaggio di marcatura

n  CSS per definire i fogli di stile

n  JavaScript per scripting lato client

n  Sul server:

n  Apache httpd come web server

n  PHP per scripting lato server

n  PostgreSQL come DBMS

12

Installazione software

n  Trovate le slide con le istruzioni sul sito del corso

n  Provate ad installarlo da soli sul vostro PC/laptop per la prossima lezione

n  Ci sarà un tutorial facoltativo la settimana prossima alla fine di una delle lezione

n  per chi non dovesse essere riuscito ad installare il software

13

Seconda parte: programmare per il web

14

Pagine web statiche: l’idea

n  Pagine che mostrano sempre le stesse informazioni

n  Esempio: pagina in cui vengono utilizzati i tag fondamentali di HTML

n  Per modificare il contenuto della pagina è necessario modificarla “a mano”

15

Pagine web statiche

1:request

2:response web client

web server

n  Per ogni pagina, il web server memorizza un file (es: HTML)

n  Quando richiesto, il server invia il file al client

n  Il browser visualizza la pagina web

prova.html

16

Caricamento di una pagina Statica

Richiesta della Pagina

Computer del Visitatore

(Internet Browser)

Web Server

Carica pagina

Ritorna HTML

Invio Pagina

HTTP

File System /.../prova.html

17

Programmare per il web

n  La quasi totalità dei siti ha comportamenti molto più complessi rispetto alle pagine in HTML semplice

n  es: gmail, google, facebook, siti di news…

n  Differenza tecnica principale:

n  Oltre al semplice trasferimento di informazioni, viene eseguito del codice

n  Sul server e/o sul client

n  Questo codice viene detto “script”

18

Script lato client

n  Alcune pagine possono contenere del codice che viene eseguito sul client

n  Quando il browser riceve la pagina

n  esegue il codice (mediante lo “script engine”)

n  visualizza la pagina

n  Esempio di linguaggio di script lato client:

n  Javascript

19

JavaScript

browser

interprete JavaScript

(script engine)

web server

file HTML +codice

JavaScript

HTTP Request

HTTP Response

20

Script lato server e pagine web dinamiche

n  Per ogni pagina, il web server memorizza un file che contiene:

n  Marcatura (markup) HTML (è lo «scheletro» della pagina)

n  del codice di script

n  Quando la pagina viene richiesta il server: n  esegue il codice di script, che genera altre

informazioni di marcatura («riempie lo scheletro»)

n  invia il risultato al client

n  Il browser mostra la pagina

21

Script lato server e pagine web dinamiche

Esempio:

n  Server Client file «prova.php» su filesystem pagina Web «http://xyz.com/prova.php»

22

Architettura “3–tier”

n  Uno script lato server può interagire con una base di dati per leggere e/o scrivere dati

1:request

4:response

web server

web client DB

2:request

3:response SC

RIP

T EX

ECU

TIO

N

23

Caricamento di una pagina dinamica

Richiesta della Pagina + eventuali parametri

Computer del Visitatore

(Internet Browser)

Web Server

Carica pagina

Esegue script

Ritorna HTML

DataBase

Invio Pagina

HTTP

ODBC

File System HTTP: HyperText Transfer Protocol ODBC: Open DataBase Connectivity

24

Riassumiamo: Input e Output del web server

Scripting lato client NO SI’

Scr

iptin

g la

to s

erve

r

NO

Input: indirizzo pagina Output: HTML

Input: indirizzo pagina Output: HTML + codice di

scripting (eseguito dal client)

SI’

Input: indirizzo pagina (+ eventuali parametri)

Output: HTML

Input: indirizzo pagina (+ eventuali parametri)

Output: HTML + codice di scripting (eseguito dal

client)

25

Quali tecnologie utilizzeremo durante questo corso?

n  Sul client:

n  HTML come linguaggio di marcatura

n  CSS per definire i fogli di stile

n  JavaScript per scripting lato client

n  Sul server:

n  Apache httpd come web server

n  PHP per scripting lato server

n  PostgreSQL come DBMS

26

Terza parte: HTML, CSS e primi passi con PHP

27

HTML: un rapido ripasso

n  Definito (insieme ad HTTP) da Tim Berners-Lee al CERN nei primi anni ‘90

n  Linguaggio di marcatura

n  NON di programmazione!

n  Serve per definire un ipertesto

n  I TAG servono per marcare il testo

n  HTML: <b>ciao</b>

n  Risultato: ciao

28

nodi (pagine) link

anchor

lettura secondo legami associativi

Organizzazione di un ipertesto

29

HTML: struttura di una pagina

<html>

<head>

caratteristiche del documento

</head>

<body>

documento

</body>

</html>

Parte opzionale

30

HTML: prova tu!

n  Crea un file (sul desktop) con estensione .html

n  Apri il file con blocco note

n  Inserisci all’interno del file:

n  <html><body> ciao <b>come</b> stai? <a href=“prova.html“>go!</a> </body></

html>

n  Apri il file con il browser

n  Hai capito cosa vuol dire <b>? E </b>?

n  A cosa serve <a>?

n  Cos’è quell’href?

31

HTML: gli attributi

n  In alcuni casi un TAG ha bisogno di informazioni aggiuntive

n  Esempio: se vogliamo creare un link, bisogna indicare a quale pagina punta il link

n  La sintassi per gli attributi è molto semplice

n  Esempio: <A HREF=“http://www.google.com”>ciao</A>

n  HREF è il nome dell’attributo

n  “www.google.com” è il valore impostato per l’attributo

32

HTML: quali tag posso usare?

n  Esiste un insieme di tag che si possono usare

n  Insieme relativamente piccolo, sono qualche decina

n  Quindi li potete guardare tutti in poco tempo!

n  Alcune risorse (ce ne sono tantissime)

n  http://www.w3schools.com/

33

Esercizio

n  Modifica la pagina che hai creato prima e riproduci la pagina qui a fianco - usa questi tag:

n  <A>, <P>, <B>, <BR/>

n  <H1>, <H3>, <H6>

n  <UL>, <LI>

n  <table>, <th>, <tr>, <td>

n  “Come si usano?”

n  Cerca sul web

34

Un errore comune in HTML

n  Usare il tag <FONT> per formattare del testo. Problemi:

n  necessario usare il tag <FONT> tante volte (con parametri diversi)

n  per cambiare la formattazione è necessario modificare il tag <FONT> che si ripete

n  nella stessa pagina ma anche in pagine diverse

n  Il tag FONT è stato deprecato

n  “E allora come si fa?” à fogli di stile

35

I fogli di stile (o CSS): l’idea

n  Separare il contenuto di un documento da aspetti legati alla sua presentazione

n  Quando si scrive il contenuto di una o più pagine web

n  non si specifica la presentazione ma

n  si associa una classe ad ogni parte di testo

n  Esempio: <P CLASS=“inEvidenza”>ciao</P>

n  Dopo, per ogni parte di testo, si specifica una regola su come deve essere formattata

n  Esempio: P.inEvidenza {color : red;}

36

Dove si definisce lo stile

n  Lo stile da usare in una pagina si può definire

n  All’interno del tag <HEAD>

n  usando il tag <STYLE>

n  In un file esterno, a cui si fa riferimento all’interno del tag <HEAD> usando il tag <LINK>

n  Quale delle due tecniche è più comoda secondo te?

37

Esercizio

n  Prendi il file

n  https://homes.di.unimi.it/dbandsec/LAB/1718/codice/es1s37.html sul sito del corso

n  Il file contiene un’intervista. Usando i fogli di stile, fai in modo che le domande siano in rosso e le risposte in verde.

n  “Ehi, ma non mi hai spiegato come si fa, non so cosa devo fare.”

n  Hai capito l’idea? Bene, cerca sul web un esempio e adattalo al tuo problema

38

Breve introduzione a JavaScript

n  Il browser visualizza il documento HTML e interpreta (esegue) le istruzioni scritte in JavaScript

<script language="JavaScript">

<!--

codice JavaScript

//-->

</script>

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>

40

Gli eventi in JavaScript

n  L’interazione con l’utente è guidata dagli eventi

n  L’utente genera un evento

n  Se nel file HTML esiste del codice JavaScript associato a quell’evento (event handler), questo viene eseguito

41

n  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="https://www.google.com" 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

JavaScript

42

HTML cosa ci interessa in particolare

n  Nella gestione di pagine web dinamiche serve creare diversi strumenti di interfaccia che permettono l’interazione con l’utente:

n  Pulsanti, caselle di testo, caselle di scelta, etc…

n  Vediamo come si possono inserire in una pagina HTML

43

Le form

n  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

n  Si deve usare il comando <form> descrizione </form>

44

I pulsanti

n  E’ possibile inserire un pulsante

n  Cosa succede quando viene premuto un pulsante?

n  Viene eseguito del codice lato client (con uno script) e/o

n  I dati della form vengono inviati al server

n  Esempio: <input type="submit" value="Invia">

45

Altri elementi di interfaccia

n  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="file"

type="submit" type="reset"

n  NB: ogni elemento di un modulo deve avere un nome (name="....") che viene usato al momento dell’invio dei dati

n  Esempio: <input type="password" name="pwd">

46

Crea la pagina HTML per ottenere il seguente risultato

Questa è una tabella che si utilizza per allineare i campi

TAG <INPUT> di tipo submit TAG <INPUT> di

tipo reset

TAG <INPUT> di tipo text

TAG <INPUT> di tipo password

n  Per ora NON devi definire il comportamento (cioè non deve succedere nulla quando si preme “OK”) ma devi solo visualizzare questa form

47

Definiamo la “action”

n  Vogliamo inviare i dati inseriti dall’utente ad un’altra pagina

n  Definiamo, all’interno del tag FORM:

METHOD=“get”    ACTION=“scrivinome.php”  

n  crea una pagina scrivinome.php con

<HTML><BODY>  <?php    $name  =  $_GET[‘tuonome’];  echo  "<b>Bravo  ".$name."!</b>";  ?>  </BODY></HTML>  

48

Definiamo la “action” (cont)

n  Funziona? Dove sta il problema?

n  Prova ad indirizzare la richiesta verso la pagina che sta a questo indirizzo: (cosa devi modificare?)

n  https://homes.di.unimi.it/dbandsec/LAB/1718/codice/scrivinome.php

n  Cosa conterrà il sorgente di quella pagina?

49

Esercizio per domani

n  Installate il software Apache httpd, PHP e PostgreSQL su una vostra macchina

n  E verificare che funzioni

n  Trovate le istruzioni sulle slide nel sito (già pubblicate)

50

Esercizio per martedì prossimo n  A partire dal form appena sviluppato,

costruisci un altro form che permetta la registrazione ad un servizio.

n  L’utente deve:

n  Inserire nome e cognome

n  Specificare se è maschio o femmina

n  Scegliere (anche più di una) delle attività che gli piacciano in una lista formata da sci, tennis, golf, canoa, altro

n  Confermare la lettura delle condizioni di utilizzo

n  Questi dati devono essere inviati ad una pagina PHP che li deve stampare tutti

n  Crea un foglio CSS per entrambe le pagine, installa tutto sul tuo PC e verifica che funzioni!