Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di...

15
EL3-4_5ST MESSAGE BOARD Autore: __________________________________________ Data: _________Classe: ____ ATTENZIONE Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi). Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu. Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu. Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome) Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla - significa solo che non devi scrivere niente!). Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/ )e da salvare in formato gif nella cartella dell'esercitazione. recupero. Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube A) OPERAZIONI PRELIMINARI

Transcript of Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di...

Page 1: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

EL3-4_5ST MESSAGE BOARDAutore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla - significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Crea una sottocartella di ES3 con nome uguale a quello di questa esercitazione (EL3-4_5AST Message Board)

A2) All'interno della sottocartella EL3-4_5AST Message Board salva questo file Word

Page 2: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

B) UNA MESSAGE BOARD IN PHP

Una message board (lavagna dei messaggi) o guest book (o libro degli ospiti) è una pagina in un sito dove i visitatori possono lasciare i propri commenti.

https://youtu.be/jOupTLOo0Wk

Nella parte superiore della pagina sono visualizzati tutti i commenti lasciati dai visitatori precedenti.

Nella parte inferiore invece si trova un form, mediante il quale il nuovo visitatore può scrivere ilproprio commento e aggiungerlo a quelli già esistenti.

La message board è realizzata per mezzo di una pagina php. I commenti dei visitatori sono memorizzati in un file sul server.

B1) Perché occorre un file sul server? Sarebbe possibile realizzare una Message Board in JS? Spiegami:

B2) → File1.php in root che visualizza un form come mostrato nel video (usa una text area per il messaggio)

Quando un nuovo visitatore scrive il proprio commento nel form sottostante e preme Invia, il commento viene inviato alla pagina stessa che provvede ad aggiungerlo in fondo al file dei commenti.

B3) Cosa bisogna scrivere nel campo action del form affinché il form invii i dati alla pagina stessa? Ci sono due possibilità diverse (scrivile entrambe) ...

B4) Il form contiene un campo per il Nome, uno per la Mail e una text area per il Commento. Quale attributo bisogna usare per ciascuno di questi campi affinché il PHP possa riceverne e leggerne il contenuto?

B5) In testa alla pagina PHP dobbiamo per prima cosa fare questo controllo:<?php

if (isset($_REQUEST['messaggio'])){$nome = $_REQUEST['nome'];$mail = $_REQUEST['mail'];$messaggio = $_REQUEST['messaggio'];...}

?>

Page 3: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

B6) A cosa serve l'istruzione precedente e cosa succederebbe se non controllassimo l'esistenza della variabile?

CONTROLLARE I CAMPI DEL FORM

In realtà nel form sono presenti tre campi (Nome, Mail e Messaggio) e l'istruzione precedente controlla solo che esista un Messaggio. Questo significa che verranno memorizzati anche eventuali messaggi anonimi oppure senza l'indicazione di un indirizzo mail.

Volendo invece essere più rigorosi e controllare che tutti i campi abbiano un valore non nullo, bisognerebbe usare l'operatore && (and logico) per concatenare fra loro tre condizioni nell'istruzione if. Per esempio:

if (isset($_REQUEST['messaggio']) && isset($_REQUEST['nome'])&& isset($_REQUEST['mail']))

{

}

Dopo aver importato il Nome, la Mail e il Messaggio in tre variabili ($nome, $mail, $messaggio), dobbiamo scrivere questi valori in fondo al file, in modo da poterli poi rileggere

LE FUNZIONI F

Per andare ad aggiungere un contenuto ad un file, usiamo un tipo di istruzioni di scrittura più evolute della semplice file_put_contents che abbiamo visto nella scorsa esercitazione.

Si tratta di quattro funzioni che hanno tutte il nome che inizia con F (per file):

1) fopen: serve per aprire un file (leggi il seguito)2) fwrite: serve per scrivere su un file3) fread: serve per leggere su un file4) fclose: serve per chiudere un file

Per scrivere aggiungendo qualcosa in un file bisogna aprire il file in modalità append ("a"):

$punt = fopen("file.txt","a"); //apre il file in modo appendfwrite($punt,$testo); // aggiunge al file $testo

La lettera "a" indica che il file è stato aperto in modalità append. In questo modo il nuovo contenuto verrà "appeso", cioè aggiunto al fondo del file senza cancellare l'eventuale contenuto preesistente.

Osserva la variabile $punt che viene detta "puntatore al file". In pratica l'istruzione fopen associa al nome del file un puntatore (che noi abbiamo chiamato $punt, ma che tu puoi chiamare come preferisci). Da quel momento in poi, tutte le funzioni F che accedono al file (per leggerlo o per scriverlo), useranno il puntatore e NON il nome del file.

Page 4: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

PUNTATORI AI FILE

I puntatori in informatica sono uno degli argomenti più difficili e complessi. Tuttavia possiamo capire in modo semplice cosa è un puntatore facendo una analogia.

Hai presente il Deposito Bagagli che c'è in tutte le grandi stazioni ferroviarie, aeroporti etc?

Bene, al Deposito Bagagli il viaggiatore lascia la propria valigia e riceve in cambio un tagliandino (ticket) mediante il quale potrà in seguito ritirare il bagaglio consegnato.

Un puntatore è simile al ticket rilasciato dal Deposito Bagagli: è una variabile attraverso la quale si possono fare operazioni su un file.

Il tipo di operazioni che si vuole fare sul file, deve essere scelto al momento di aprirlo:

1) fopen("file.txt","a")// il file viene aperto in modo append2)fopen("file.txt","w")// il file viene aperto in modo write3) fopen("file.txt","r")// il file viene aperto in modo read

La differenza fra "a" (append) e "w" (write) è che la prima scrive aggiungendo il contenuto alla fine del file (senza sovrascriverlo, se già esiste); la seconda invece cancella l'eventuale contenuto già presente e lo sovrascrive (un po' come faceva la file_put_contents).

In pratica possiamo scrivere $nome, $mail e $messaggio aggiungendole in coda al file con:

$punt = fopen("file.txt","a"); // il file può chiamarsi come vuoifwrite($punt,$nome); fwrite($punt,$mail); fwrite($punt,$messaggio); fclose($punt);

La struttura base del programma è mostrata in figura:

Page 5: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

Il secondo if serve per controllare se c'è un file (cioè se ci sono messaggi memorizzati). In questo caso bisogna leggere il file e visualizzarlo (il modo più semplice per farlo è usare include o require).

B7) → File1.php (codice dopo l'inserimento delle istruzioni php spiegate prima)

B8) → File1gif, test di funzionamento del programma (ti avviso che la visualizzazione sarà davvero orribile!).

C) FORMATTARE IL TESTO CONTENUTO NEL FILE

Se hai seguito le mie istruzioni è probabile che il contenuto della tua Message Board sia visualizzato in questo modo:

Perché succede questo? Perché abbiamo brutalmente scritto le variabili $nome, $mail e $commento dentro al file, senza nessuna formattazione e senza neppure separare in qualche modo i valori l'uno dall'altro.

C1) Puoi facilmente vedere tutto questo aprendo il file di testo con Blocco Note o

Page 6: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

Notepad++ e visualizzandone il contenuto. Incolla una schermata:

FORMATTARE IL TESTO

Per risolvere il problema, possiamo introdurre qualche formattazione HTML quando scriviamo dentro il file. Per esempio, invece di scrivere semplicemente:

fwrite($punt,$nome);potremmo scrivere:

fwrite($punt,"<p><strong>Nome: </strong>$nome</p>");

C2) Copia File1.php in File2.php e aggiungi a piacere la formattazione al testo che scrivi nel file (come per esempio ho fatto qui sopra). Cancella il file di testo precedente.

C3) Schermata della pagina in cui si veda la nuova formattazione:

C4) → File2.gif, test completo di funzionamento del programma, provando ad aggiungere un messaggio "normale" e poi quest'altro messaggio:<font size=7 color=red>ciao</font>

C5) Cosa è successo? Come te lo spieghi?

D) UN PROBLEMA CHE ABBIAMO GIA' INCONTRATO

CROSS-SITE SCRIPTING (XSS)

Abbiamo già affrontato più volte il problema dei pericoli che si corrono usando file ospitati sul server: se il file contiene codice eseguibile o codice html, questo viene interpretato dal browser e può essere sfruttato da malintenzionati per attaccare o comunque danneggiare la nostra pagina.

Questo tipo di attacchi informatici prende il nome di Cross-site Scripting (spesso indicato con la sigla XSS) e si verifica quando codice malevolo viene inserito (injected) all'interno di siti fidati.

Questo rischio è particolarmente elevato in una Message Board dove chiunque può scrivere e postare i suoi messaggi.

In passato abbiamo risolto questo problema "disinfettando" il codice con:

show_sourceSimile a include e require, ma non esegue il codice

file_get_contents e htmlspecialcharsIn questo caso bisogna prima leggere il file in una variabile e poi ripulire la variabile

Sfortunatamente nessuna di queste due soluzioni è facilmente applicabile nel nostro caso, a meno di non voler rinunciare alla formattazione del contenuto.

Page 7: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

D1) Spiegami bene perché nel nostro caso non posso disinfettare il file:

Se vogliamo poter formattare il testo ed evitare i rischi connessi con l'uso di codice html dentro al file dobbiamo usare una soluzione completamente diversa.

In breve l'idea è la seguente:

1. scrivo i dati dentro il file senza nessuna formattazione ma separandoli semplicemente con un'andata a capo fra uno e l'altro. Per esempio:

Giulio [email protected] dado è tratto

2. leggo i dati dal file una linea alla volta e aggiungo la formattazione prima di visualizzare ogni riga

ANDARE A CAPO SCRIVENDO SU UN FILE DI TESTO

Per andare a capo e passare alla linea successiva quando si scrive su un file di testo bisogna usare il carattere '\n' (backslash enne).

In pratica posso per esempio scrivere:

fwrite($punt,$mail."\n");

In questo modo verrà aggiunta un'andata a capo dopo la scrittura sul file di $mail (il punto serve per concatenare).

In modo simile devi aggiungere un \n di separazione dopo aver scritto ogni variabile.

ATTENZIONE: le andate a capo vengono visualizzate correttamente in Notepad++ ma non nel Blocco Note di Windows

Le andate a capo sono necessarie per poter separare i dati l'uno dall'altro (altrimenti come farebbe il programma a capire dove finisce il Nome e dove comincia la Mail scritta sul file?).

Per leggere i dati riga per riga dobbiamo usare un ciclo e un paio di nuove istruzioni.

LEGGERE I DATI UNA RIGA ALLA VOLTA

Ecco come si può leggere i dati una riga alla volta da un file:

$file = fopen("testo.txt","r");

while(!feof($file)){$nome = fgets($file);$mail = fgets($file);$messaggio =fgets($file);

....}

Page 8: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

Osserva che:

1. il file viene aperto in modalità lettura con "r" (read)2. il file viene letto con un ciclo while3. l'istruzione feof (Fine End Of File) termina il ciclo quando viene raggiunta la fine del file4. l'istruzione fgets legge una riga del file alla volta e salva il valore letto in una variabile5. i puntini di sospensione indicano le istruzioni per elaborare e visualizzare le stringhe lette dal

file

Osserva anche come tutte le istruzioni che manipolano il file usano il suo puntatore (che in questo esempio si chiama $file).

Ricordati di controllare l'esistenza del file prima di provare ad aprirlo (altrimenti, se non esiste, vengono lette righe vuote!).

D2) Copia File2.php in File3.php e modifica la scrittura e la lettura sul file come mostrato negli esempi precedenti. Aggiungi inoltre (dentro il ciclo while) le seguenti cose:

1. disinfetta ogni variabile letta con htmlspecialchars2. aggiungi la formattazione html3. visualizza il testo formattato (riga per riga con la echo)

D3) → File3.php

D4) → File3.gif, test completo di funzionamento del programma

SE VENGONO VISUALIZZATE RIGHE VUOTE

È possibile che il tuo ciclo visualizzi anche dei campi vuoti (un Nome, una Mail e un Messaggio senza valori).

Puoi comunque risolvere il problema precedente con un semplice IF, che impedisce la visualizzazione di eventuali campi vuoti.

E) IL PROBLEMA DELLA CONDIVISIONE DEI FILE IN INTERNET

In PHP bisogna tener presente il fatto che il file presente sul server è condiviso fra tutti i visitatori del sito. Questa situazione in informatica viene detta concorrenza e si verifica ogni qual volta si hanno più processi che concorrono per l'utilizzo della stessa risorsa. Un esempio di concorrenza (non associata ai file) si verifica quando una stessa stampante è condivisa da più computer e ci sono più processi di stampa avviati contemporaneamente.

Nel caso dei file in PHP la concorrenza è particolarmente pericolosa in fase di scrittura su file. Cosa accade infatti se più processi provano a scrivere lo stesso file contemporaneamente? Quale copia del file viene salvata alla fine?

Page 9: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

E1) Supponi per esempio che la tua pagina (caricata in Internet, non su un server locale) venga visitata contemporaneamente da due visitatori diversi. Cosa potrebbe succedere? Spiegami perché il conteggio del numero di visitatori potrebbe risultare sbagliato:

MUTUA ESCLUSIONE

La soluzione a questo problema si ottiene facendo in modo che il primo processo che cerca di accedere a un file lo blocchi per tutto il tempo necessario a svolgere le proprie operazioni. Alla fine delle operazioni il processo sbloccherà il file, rendendolo nuovamente accessibile agli altri. Nel frattempo, mentre un file è bloccato, tutti gli altri processi concorrenti verranno messi in uno stato di attesa (attendono che si liberi la risorsa bloccata).

Questo meccanismo in informatica è noto come mutua esclusione a semaforo, perché funziona analogamente a un semaforo che blocca l'accesso a un incrocio da parte di tutte le strade tranne una.

La sequenza di operazioni da fare è mostrata in questo esempio:

$punt = fopen (nomefile, "w"); // il file è aperto in scritturaflock($punt, LOCK_EX); // il file viene bloccato in modo esclusivo

fwrite($punt,$variabile); // scrivo sul file

flock($punt, LOCK_UN); // sblocco il filefclose($punt); // chiudo il puntatore al file

L'istruzione flock serve per bloccare un file in modo esclusivo (LOCK_EX, nessun altro utente potrà accedervi o modificarlo) e per sbloccare un file precedentemente bloccato (LOCK_UN).

In mezzo, fra le due istruzioni flock, c'è l'istruzione fwrite.

E2) Spiegami a cosa serve eseguire la fwrite in mezzo alle due flock:

E3) Avrai sicuramente notato che nel mio esempio precedente ho usato $punt invece che $pt come nome del puntatore al file. Che cosa cambia e perché?

E4) → Copia File3.php in File4.php e aggiungi le istruzioni flock necessarie per proteggere la scrittura sul file nei confronti di accessi contemporanei.

E5) → codice File4.php

E6) Copia tutti i file che hai creato da root alla cartella di questa esercitazione.

BONUS DOMANDA D'ESAME +1 PC – EL3-4_5ST - DOMANDA1

INCLUDEPICT Rispondere alla seguente domanda sul foglio a righe in 8-12 righe

Page 10: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

URE "http://www.fttr.it/wp-content/uploads/2017/01/question-mark.jpg" \* MERGEFORMATINET

(http://classiperlo.altervista.org/File%20comuni/Foglio%20righe.docx). Leggi prima le modalità di compilazione su (http://classiperlo.altervista.org/Materiale/Generale/Simboli.doc).

DOMANDA: Spiegami in cosa consiste il problema della condivisione di dati tramite file in rete e fammi un esempio in cui si potrebbe presentare un problema di condivisione.

Invia il bonus separatamente su Classiperlo in un file Word di nome EL3-4_5ST - DOMANDA1.

Salva tutte le risposte alle domande in una cartella a parte, in modo da poterle facilmente ritrovare a fine anno (servono per la preparazione all'esame orale di maturità).

BONUS DOMANDA D'ESAME +1 PC – EL3-4_5ST – DOMANDA2

INCLUDEPICTURE "http://www.fttr.it/wp-content/uploads/2017/01/question-mark.jpg" \* MERGEFORMATINET

Rispondere alla seguente domanda sul foglio a righe in 8-12 righe (http://classiperlo.altervista.org/File%20comuni/Foglio%20righe.docx). Leggi prima le modalità di compilazione su (http://classiperlo.altervista.org/Materiale/Generale/Simboli.doc).

DOMANDA: L'inserimento di informazioni da parte di un utente in rete comporta il rischio di introdurre nel sistema codice malevolo. Spiegami in cosa consiste il pericolo e come si può evitare.

Invia il bonus separatamente su Classiperlo in un file Word di nome EL3-4_5ST – DOMANDA2.

Salva tutte le risposte alle domande in una cartella a parte, in modo da poterle facilmente ritrovare a fine anno (servono per la preparazione all'esame orale di maturità).

F) OPERAZIONI FINALI

Page 11: Microsoft Word - CREAZIONE DI UN SEMPLICE GUEST.doc  · Web viewQuesto simbolo indica un video di esempio o di spiegazioni da guardare su YouTube. A) OPERAZIONI PRELIMINARI. A1)

F1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

F2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

F3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL3-4_5AST Message Board Word Il file di questa esercitazioneFile1.php PHPFile2.php PHPFile3.php PHPFile4.php PHPFile1.gif GIFFile2.gif GIFFile3.gif GIF

F4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.