Diapositiva 1 - Dipartimento di Scienze Ambientali, Informatica e

Laboratorio Basi di Dati
Esercitazione
[email protected]
Luca Cosmo
Dipartimento di Scienze Ambientali, Informatica e Statistica
Università Ca’ Foscari di Venezia, Italia
Esercizio:
Sviluppare un sito web che permetta agli utenti registrati di inserire le proprie foto.
Alle foto inserite è possibile associare un titolo e dei tag. Inoltre le foto possono
essere inserite come pubbliche, per cui visibile da tutti (anche gli utenti non registrati),
oppure come private. In quest’ultimo caso esse sono visibili sono all’utente che le ha
inserite.
Requisiti addizionali:
•
Per motivi di sicurezza nel database deve essere salvato solo il digest md5 della
password.
•
Il visulalizzatore delle foto dovrà permettere di scorrere le foto senza ricaricare la
pagina (AJAX).
Database:
Schema Relazionale:
FOTO
UTENTI
PK
id_utente
username
password
email
PK
FILE
id_foto
PK
FK2
FK1
titolo
tags
id_file
id_utente
id_file
type
data
INTERFACCE
Username
Album
Password
Cerca
INTERFACCE
Ciao User
Logout
Album
Tutte
Private
Nuova
Cerca
INTERFACCE
Username
Album
Password
Cerca
INTERFACCE
Ciao User
Logout
Album
Tutte
Private
Nuova
Cerca
Titolo
Tags
Privata
C:\\imma…
AGGIUNGI
Upload di immagini
LATO HTML:
•
Per inviare un file possiamo usare il tag input con tipo file.
•
Il corrispondente form deve avere coma action POST ed è necessario
impostare l’attributo enctype="multipart/form-data"
<form id="image_form"
action="insert.php" method="post"
enctype="multipart/form-data">
<input type="file" name="file" id="file“ onchange="readURL(this);">
<br>
Title: <input type="text" name="title" ><br>
<input type="submit" name="submit" value="Submit">
</form>
Upload di immagini
LATO PHP:
•
PHP salva tutti i file ricevuti in una cartella temporanea.
•
La variabile gloabale $_FILES è un array che contiene tutte le
informazioni dei file ricevuti mediante una form.
•
$_FILES[’name’][‘tmp_name’] per esempio è il path che punta al file
temporaneo.
Salvare il file:
Sono possibili due strategia:
1. Copiare il file temporaneo in una cartella del filesystem e
salvare il relativo url nel DB.
2. Salvare l’intero file in una tabella del database (attributi di tipo
bytea)
Upload di immagini
Creare la tabella nel database:
CREATE TABLE file (
id_file integer NOT NULL,
type character varying(100) NOT NULL,
data bytea NOT NULL,
valid boolean );
Inserire il file nel database:
•
fopen ci restituisce lo strem del file indicizzato dal path passato.
•
Per inserire un file binario dobbiamo eseguire un preparedStatement in
cui abbiamo associato al parametro relativo all’attributo di tipo bytea lo
stream del file (specificandone come tipo: PDO::PARAM_LOB)
•
RETURNING id_file fa si che la query restituisca l’ide dell’elemento
appena inserrito.
$data = fopen($_FILES["file"]["tmp_name"],'r');
$q ='insert into file(type,data) values (?,?) RETURNING id_file';
$result = $connection->prepare($q);
$result->bindParam(1,$_FILES["file"]["type"]);
$result->bindParam(2,$data, PDO::PARAM_LOB);
$result->execute();
$row = $result->fetch();
$justinsertedid = $row['id_file'];
Upload di immagini
Recuperare e visualizzare un immagine:
Se avevamo salvato un immagine nel DB , per visualizzarla dobbiamo:
•
Impostare come URL una pagina PHPche si occupera di recuperare
l’immagine nel DB e restituirla.
<img src='getimage.php?id=1'>
•
Nella pagina PHP recuperare l’immagine dal DB, impostare gli header di
risposta e copiare l’immagine nell’output stream della pagina.
$result = $connection->query(
"SELECT * from file where id_file=".$_GET['id']);
//Associamo alla varibile $file il file recuperato dal db
$result->bindColumn('data', $file, PDO::PARAM_LOB);
$row = $result->fetch(PDO::FETCH_BOUND);
// Impostiamo nell'header il tipo del contenuto dell'url, per
esmpio image/jpeg
header('Content-Type: '.$row['type']);
// Passiamo come contenuto della pagina il file recuperato
fpassthru($file);
Libreria jQuery
$(arg) è una funzione che restituisce un oggetto rappresentante un
elemento del DOM + alcuni metodi molto utili!
$(‘selettore’) restituisci il metodo rappresentante i/il nodi/o del DOM
identificato da selettore (sintassi CSS).
•
e.g. $(‘#logo’) seleziona l’elemento con id logo
Alcune funzioni:
$(‘selettore’).html(‘html code’) inserisce il codice html passato all’interno
dell’elemento (come innerHTML(‘…’)).
$(‘selettore’).click(function(){ … }) chiama la funzione passata
all’evento onClick.
$(document).ready(funzione) viene chiamato al caricamento del documento
(simile a onLoad del body).
$(‘sel’).attr(‘attrname’) restituisce il valore dell’attributo
$(‘sel’).attr(‘attrname’,’value’) impostil valore dell’attributo.
$.post(‘url’,sent_data,function(received_data){…}) permette di
fare una richiesta AJAX al server. Al completamento della richiesta viene
eseguita la funzione passata dove received_data è la pagina mandata dal
server.