Sistemi e Reti 4 - Laboratorio

Introduzione alla programmazione lato server

Il php è un linguaggio di programmazione lato server che serve per generare pagine html (in realtà anche file di qualunque altro tipo) in modo che i contenuti di una pagina possano cambiare. Anche tramite javascript è possibile cambiare i contenuti delle pagine; la differenza è che con javascript è il browser a modificare i contenuti mentre se i contenuti sono generati lato server per il browser la pagina appare come una normale pagina html. Ovviamente si possono mescolare le cose con ajax per rendere il tutto più simpatico.

Per la documentazione php e ajax fare riferimento al tutorial su w3schools e alla relativa parte di reference.

1 - Scacchiera in PHP

Il php è un linguaggio simile come sintassi al C che permette di generare una pagina html. Su w3schools potete vedere le istruzioni principali:

• istruzione if

• cicli (for, while, ...)

• I principale comando per stampare: echo e print_r

• uso di variabili (che iniziano con il $)

• stringhe (funzioni, differenza tra ' e ", punto (.) per concatenare le stringhe, ...)

• ecc...

Esercizio:

• combinando for e echo realizza una pagina che genera una scacchiera in html

2 - Introduzione ai Form

Uno dei motivi principali per cui servono le pagine php (o l'elaborazione lato server in generale) è il recupero e l'utilizzo dei valori che un utente inserisce in un form html.

Un codice di esempio di un dato inviato in POST.
A sinistra il codice html e a destra il codice php per recuperare il valore. Altri esempi su w3schools.

L'istruzione isset() verifica se una variabile esiste.

3 - Stringhe e Array

Riferimenti: stringhe in php, funzioni per manipolare le stringhe, array in php, funzioni per manipolare gli array

...qui manca qualcosa... :)

6 - Sessioni in PHP

Quando vi loggate su un sito le informazioni del vostro login devono essere memorizzate da qualche parte in modo che quando cambiate pagina o se riaccedete alla stessa pagina dopo un po' il sito vi riconosca e non vi venga chiesto di continuo la vostra login e password.

Il meccanismo che utilizza il server per memorizzare i dati è il meccanismo delle sessioni che sono legate ai cookie.

Una variabile memorizzata in sessione può essere letta e modificata in ogni pagina del sito.

I passi fondamentali sono:

1. Uso di session_start() all'inizio della pagina php per abilitare la sessione (DEVE essere all'inizio della pagina perché invia i cookies che devono essere mandati nell'intestazione)

2. Registrazione e modifica di una variabile di sessione nell'array associativo $_SESSION. Es: $_SESSION['banana']=4;

3. Uso della variabile di sessione ovunque si voglia nel codice. Es: echo $_SESSION["banana"];

Riferimenti:

Sessioni su w3schools

Esercizio sulle sessioni

Svolgi i compiti descritti sotto dopo avere visto il video successivo. Viene spiegato come un array può essere salvato in una variabile di sessione e poi modificato da una pagina.

Compiti:

1. Ricrea la pagina del video

2. Aggiungi alla pagina un contatore (salvato in una nuova variabile di sessione) che conta e mostra quante volte si è entrati nella pagina

3. Aggiungi un link ad una seconda pagina dove mostrare, senza modificare, le variabili di sessione inserite nella pagina precedente

4. Aggiungi qualcosa a piacere sulle sessioni (cerca in internet qualcosa se non hai idea)

5. Abbellisci le due paginette

7 - Login in PHP

Il login in PHP è una delle classiche domande dell'esame di maturità.

Dai un occhio a questo esempio. Per loggarti inserisci login nella login e password nella password. Se noti non puoi andare nella seconda pagina http://fabioprof.altervista.org/area_riservata/segreti.php senza essere loggato perché ti fa tornare alla pagina di login, un po' come Facebook che se cerchi di entrare in una pagina personale di fa tornare alla schermata di login.

Video tutorial sul login in PHP

Ora provate a rifare sul vostro sito quest'area riservata e aggiungete nella seconda pagina:

• Dei link "segreti" a vostro piacimento,

• Un form che permette di inviare un'email.

• Per l'invio delle email, che funziona solo da altervista e non da xampp a meno che non configuriate il server di posta, potete seguire la guida di w3schools: va usato un solo comando!

• Attenzione a non spammare email a indirizzi a caso perché ogni email di altervista arriva con un link che permette di segnalare lo spam e poi rischiate che vi tolgano l'account.

Challenge (for the maximum score): Per rendere l'email un po' più interessante potete usare un editor migliore della textarea per il testo del messaggio, ad esempio ckeditor. Per l'installazione dovete scaricare lo zip (va bene il pacchetto standard, ma potete sperimentare) e scompattare tutto in una cartella, poi modificare qualche riga della pagina per aggiungere lo script e trasformare la textarea. Perché funzioni su altervista devono essere copiati sul server, meglio se in una cartella a parte, tutti i file dell zip ad eccezione della cartella samples. Poi attenzione agli header dell'email...

8 - Come salvare e ricaricare dei dati?

Una delle operazioni più importanti di un sito dinamico è quella di caricare dei dati da un archivio, salvarli, modificarli o cancellarli. Si dice CRUD (Create, read, update, delete). Si potrebbero fare diverse scelte per archiviare i dati e in in quinta vederete il database MySQL (o MariaDB). Per ora, invece che utilizzare un semplice file di testo utilizzeremo la libreria SleekDB che fornisce dei comandi molto semplici per manipolare i dati e sfrutta dei file json per l'archiviazione.

Video lezione su sleekdb.

Esercizio:

• • rifate nel vostro sito la pagina di salvataggio/caricamento seguendo il video

  • spostate anche voi la posta in un'altra pagina

  • provate ad aggiungere un terzo campo a vostro piacere

  • abbellite un po' la pagina inserendo i dati in una tabella o altro

  • ordinate i dati per uno dei campi a vostra scelta (se avete notato escono un po' casuali) (link a sx :))

Challenge:

• • Inserite una casella di ricerca e filtrate i dati di una colonna in base al suo contenuto

  • Salvate tutti i tentativi di login in una tabella con login, password e ora e elencateli in un'altra pagina interna

10 - Addio submit, si passa ad ajax!

Ajax sta per Asynchronous JavaScript And XML e indica una modalità che hanno le pagine web di comunicare con altre pagine web e poi mostrare il contenuto della comunicazione via javascript. Normalmente si dovrebbe usare l'oggetto XMLHTTPRequest che a mio parere è un po' complesso. E' molto più semplice fare le chiamate ajax via altre librerie come jQuery e passando i dati poi tramite json.

jQuery usa la direttiva $.ajax() per fare la richiesta.

Nel video seguente potete vedere come fare una mini calcolatrice tramite ajax. (Qui il video) (Qui un esempio funzionante)

Attività:

• • Rifai la calcolatrice seguendo il video e aggiungendo altre operazioni

  • Prova a navigare il sito di jQuery e in particolare di jQuery UI per vedere se qualche effetto ti piace e inseriscine un paio da qualche parte

Challenge:

• • Riusciresti a modificare la gestione utenti (🙌) o indovina numero (😊) o qualcos'altro (🤷‍♂️) che hai fatto in precedenza con l'invio dei dati per farla funzionare senza inviare dei form ma con ajax?

Nota: Una applicazione html+javascript+ajax può essere sostituita da una applicazione in java che fa le chiamate alle pagine php con l'oggetto HttpURLConnection. In questo caso il php fa da repository dati e il client è costruito in java (ma potrebbe essere in qualunque linguaggio di programmazione)