Abbiamo visto, nel precedente Step_2, come creare un modulo tale che alla compilazione lato client il server risponde inviando un immediato saluto, saluto che comprende dinamicamente i dati inseriti nel modulo dal visitatore stesso. So far so good!
Problema: il saluto è però del tutto effimero: quando il client chiude la pagina con il saluto, quei dati, con cui viene composto il saluto, spariscono. Questo peraltro è ovvio: non abbiamo provveduto in nessun modo a dire come e/o dove salvarli.
In questo Step, Step_3, invece vediamo, nella porzione inferiore della pagina, i messaggi inseriti da precedenti visitatori, meglio: da precedenti visite. In particolare, li vediamo anche a giorni di distanza!
Come è possibile? Ovvero, come fare se vogliamo creare una web app che salvi -lato server- i dati inseriti -lato client- in un modulo, in modo che siano disponibili anche successivamente, per future visite, e anche su richiesta di altri visitatori del nostro sito? Il primo elemento di una risposta è che dobbiamo riuscire a salvarli -diremo anche memorizarli, archiviarli>- da qualche parte. Ma dove? E come?
Iniziamo dal Come? e consideriamo meglio il nostro semplice esempio di baby web app: essa permette a ciascun visitatore (/visita) di scrivere (= inviare al server) tre dati (= tre stringhe di caratteri). Una considerazione importante: a meno di creare grande confusione, dobbiamo preoccuparci di memorizzare i dati in modo tale che sia recuperabile sia l'informazione che i dati sono stati inseriti insieme sia, per ciascuno, da quale campo di inserimento proviene.
Ripetiamo: dobbiamo fare in modo che i dati siano memorizzati sia separatamente: dobbiamo in qualche modo memorizzare che una stringa viene dal un campo di inserimento, l'altra da un altro campo di inserimento, ecc.; sia unitariamente: le tre stringhe inserite in una stessa compilazione del modulo devono essere in qualche modo memorizzate insieme.
Con carta e penna come faremo a annotarci e memorizzare i messaggi scritti nel modulo? Probabilmente disegnando una tabella, con tre colonne, intestate per es. stato, testo e rispettivamente firma, in modo che quando qualcuno compila il modulo inserendo le due risposte e la firma possiamo aggiungere una riga di celle, una per ogni colonna, e copiarvi queste tre dati rispettivamente nella cella della colonna con la corrispondente intestazione. Nota: le esigenze sopra indicate di memorizzazione separata ma unitaria sono quindi facilmente realizzate: separatamente, stringhe da campi di inserimento diversi sono copiate in celle di colonne diverse; unitariamente, le stringhe inserite in una stessa compilazione si ritrovano in una stessa riga della tabella!
Cosa dunque deve essere una tabella? Per i nostri scopi, può essere sufficiente dire che una tabella deve essere composta da celle organizzate in colonne, ove ciascuna colonna è individuata (intestata) da un campo. Un insieme di celle, una e soltanto una per ogni colonna, è una riga, o più semplicemente una riga è una riga della tabella!
uff uff più difficile scriverlo che capirlo; una immagine dovrebbe rendere chiaro di cosa stiamo parlando:
La versione computazionale di questo definire tabelle è svolta da una tipologia di prodotti nota con l'acronimo inglese DBMS database-management system, sistema di gestione dei database.
Tra i tanti DBMS in uso, nel mondo web è popolare mySQL, la M delle suite AMP. Discuteremo successivamente come operare con mySQL direttamente (al terminale), inizialmente utilizziamo un interfaccia grafico (e via web) phpmyadmin, compreso in tutte le suite AMP di maggior uso come un ulteriore gadget. Fate pratica con phpmyadmin.
Torniamo al nostro esempio. Imitando (e capendo!) le due immagini di seguito, definite sul vostro mySQL una tabella guestbook adatta ad archiviare i dati provenienti dal modulo. Spero che le seguenti due immagini chiariscano come fare:
Commento. In generale, per strutturare una tabella in modo opportuno, bisogna quindi prevedere quali e quanti siano i campi (fields, colonne) che la compongono, in modo che se l'informazione che deve essere archiviata è composta da più componenti, o dati, i campi previsti siano almeno tanti quanti quelle componenti. Nel nostro esempio i dati sono ciascuna stringa che un visitatore può inserire nel modulo, e quindi dobbiamo prevedere (almeno) tanti campi nella tabella del db quanti i campi di inserimento del modulo.
In effetti possiamo avere bisogno di qualche campo in più, nel nostro semplice esempio abbiamo definito anche un campo id (capiremo poi il perché di questo campo e perché spuntiamo AI (=autoincrement)).
Nota: non è necessario che i nomi dei campi di inserimento del modulo html siano esattamente gli stessi delle intestazioni dei campi della tabella mySQL: qui al campo bodytext corrisponde la colonna testo! Importante è nella query di inserimento il valore $_POST['bodytext'] sia inserito nella colonna che si vuole sia quella corrispondente, nell'esempio la colonna testo.
-
Cosa deve fare la nostra web app? deve permettere due operazioni:
Come realizzare tutto ciò? Scrivendo uno script PHP, ovvero opportune istruzioni per il web server nel linguaggio di programmazione PHP, la P delle suite AMP. PHP è un linguaggio di programmazione orientato al web, cioè progettato appunto per fornire i costrutti principali per eseguire le funzionalità che si ritrovano in ogni web app. Il nostro compito è quello di combinare opportunatamente tale funzionalità in uno script per realizzare quelle specifiche della nostra specifica web app. Il seguente script -che potete cut&paste, ovvero installare nel vostro localhost- fa esattamente questo. Vedremo poi come leggere e scrivere script PHP, qui per ora cercate di capire i commenti inseriti nel codice:
- ESERCIZIO
Ricreate nel vostro web server (localhost) la web app discussa in questo Step_3. In particolare:
Buon lavoro!
Accademia Albertina Torino, Scuola NTA, a.a. 2024-2025
Insegnamenti ABTEC40
a cura di mario chiari
Problema: il saluto è però del tutto effimero: quando il client chiude la pagina con il saluto, quei dati, con cui viene composto il saluto, spariscono. Questo peraltro è ovvio: non abbiamo provveduto in nessun modo a dire come e/o dove salvarli.
In questo Step, Step_3, invece vediamo, nella porzione inferiore della pagina, i messaggi inseriti da precedenti visitatori, meglio: da precedenti visite. In particolare, li vediamo anche a giorni di distanza!
Come è possibile? Ovvero, come fare se vogliamo creare una web app che salvi -lato server- i dati inseriti -lato client- in un modulo, in modo che siano disponibili anche successivamente, per future visite, e anche su richiesta di altri visitatori del nostro sito? Il primo elemento di una risposta è che dobbiamo riuscire a salvarli -diremo anche memorizarli, archiviarli>- da qualche parte. Ma dove? E come?
Iniziamo dal Come? e consideriamo meglio il nostro semplice esempio di baby web app: essa permette a ciascun visitatore (/visita) di scrivere (= inviare al server) tre dati (= tre stringhe di caratteri). Una considerazione importante: a meno di creare grande confusione, dobbiamo preoccuparci di memorizzare i dati in modo tale che sia recuperabile sia l'informazione che i dati sono stati inseriti insieme sia, per ciascuno, da quale campo di inserimento proviene.
Ripetiamo: dobbiamo fare in modo che i dati siano memorizzati sia separatamente: dobbiamo in qualche modo memorizzare che una stringa viene dal un campo di inserimento, l'altra da un altro campo di inserimento, ecc.; sia unitariamente: le tre stringhe inserite in una stessa compilazione del modulo devono essere in qualche modo memorizzate insieme.
Con carta e penna come faremo a annotarci e memorizzare i messaggi scritti nel modulo? Probabilmente disegnando una tabella, con tre colonne, intestate per es. stato, testo e rispettivamente firma, in modo che quando qualcuno compila il modulo inserendo le due risposte e la firma possiamo aggiungere una riga di celle, una per ogni colonna, e copiarvi queste tre dati rispettivamente nella cella della colonna con la corrispondente intestazione. Nota: le esigenze sopra indicate di memorizzazione separata ma unitaria sono quindi facilmente realizzate: separatamente, stringhe da campi di inserimento diversi sono copiate in celle di colonne diverse; unitariamente, le stringhe inserite in una stessa compilazione si ritrovano in una stessa riga della tabella!
Cosa dunque deve essere una tabella? Per i nostri scopi, può essere sufficiente dire che una tabella deve essere composta da celle organizzate in colonne, ove ciascuna colonna è individuata (intestata) da un campo. Un insieme di celle, una e soltanto una per ogni colonna, è una riga, o più semplicemente una riga è una riga della tabella!
uff uff più difficile scriverlo che capirlo; una immagine dovrebbe rendere chiaro di cosa stiamo parlando:
La versione computazionale di questo definire tabelle è svolta da una tipologia di prodotti nota con l'acronimo inglese DBMS database-management system, sistema di gestione dei database.
Tra i tanti DBMS in uso, nel mondo web è popolare mySQL, la M delle suite AMP. Discuteremo successivamente come operare con mySQL direttamente (al terminale), inizialmente utilizziamo un interfaccia grafico (e via web) phpmyadmin, compreso in tutte le suite AMP di maggior uso come un ulteriore gadget. Fate pratica con phpmyadmin.
Torniamo al nostro esempio. Imitando (e capendo!) le due immagini di seguito, definite sul vostro mySQL una tabella guestbook adatta ad archiviare i dati provenienti dal modulo. Spero che le seguenti due immagini chiariscano come fare:
Commento. In generale, per strutturare una tabella in modo opportuno, bisogna quindi prevedere quali e quanti siano i campi (fields, colonne) che la compongono, in modo che se l'informazione che deve essere archiviata è composta da più componenti, o dati, i campi previsti siano almeno tanti quanti quelle componenti. Nel nostro esempio i dati sono ciascuna stringa che un visitatore può inserire nel modulo, e quindi dobbiamo prevedere (almeno) tanti campi nella tabella del db quanti i campi di inserimento del modulo.
In effetti possiamo avere bisogno di qualche campo in più, nel nostro semplice esempio abbiamo definito anche un campo id (capiremo poi il perché di questo campo e perché spuntiamo AI (=autoincrement)).
Nota: non è necessario che i nomi dei campi di inserimento del modulo html siano esattamente gli stessi delle intestazioni dei campi della tabella mySQL: qui al campo bodytext corrisponde la colonna testo! Importante è nella query di inserimento il valore $_POST['bodytext'] sia inserito nella colonna che si vuole sia quella corrispondente, nell'esempio la colonna testo.
- acquisire i dati inseriti nel modulo e salvarli nella tabella guestbook
- prelevare tutti i record salvati in guestbook e inserirli in una pagina html da inviare al client
Come realizzare tutto ciò? Scrivendo uno script PHP, ovvero opportune istruzioni per il web server nel linguaggio di programmazione PHP, la P delle suite AMP. PHP è un linguaggio di programmazione orientato al web, cioè progettato appunto per fornire i costrutti principali per eseguire le funzionalità che si ritrovano in ogni web app. Il nostro compito è quello di combinare opportunatamente tale funzionalità in uno script per realizzare quelle specifiche della nostra specifica web app. Il seguente script -che potete cut&paste, ovvero installare nel vostro localhost- fa esattamente questo. Vedremo poi come leggere e scrivere script PHP, qui per ora cercate di capire i commenti inseriti nel codice:
<?php
//// stampo l'intestazione del codice HTML
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
echo ' <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>baby web app, Step 2</title>
</head> ';
//// inizio la porzione body del codice HTML
echo '<body>';
//// la risposta immediata vista sopra
//// se hai modificato il modulo, devi probabilmente adattare questa riga dello script
echo 'Ciao '.$_POST['firma'].'. </br> Capisco che stai '.$_POST['stato'].' e ti ringrazio di quel che mi scrivi: </br> </br>
<blockquote> '.$_POST['bodytext'].' </blockquote>'. '</br> <b> Grazie! </b>';
/* Apriamo connessione con mySQL
qui devi indicare i parametri di connessione a mySQL:
IP o dominio macchina dove è installato mySQL, utente mySQL in uso, pw di tale utente.
Se lavori -come suggerito- con l'installazione di default
dovrebbero andare bene i parametri qui già inseriti
*/
$link = mysqli_connect('localhost','root','root') or die("
Non riesco a connetermi. " . mysqli_error());
//// Selezioniamo il DB su cui operare
//// sostituisce microBlog con il nome del db che hai definito per questi esercizi
mysqli_select_db($link, 'microBlog') or die("non riesco a selezionare il db microBlog. " . mysqli_error());
//// Formuliamo la query di INSERT dei valori provenienti dal modulo e salviamola in una variabile
//// se hai modificato il modulo, devi probabilmente adattare questa query
$q = "INSERT INTO `Guestbook` (`id`, `stato`, `testo`, `firma`) VALUES (NULL, '".$_POST['stato']."', '".$_POST['bodytext']."', '".$_POST['firma']."');";
//// Chiediamo di eseguire la query e salviamo la risposta in una variabile
$r = mysqli_query($link, $q);
//// Formuliamo la query di SELECT e salviamola in una variabile
//// se hai chiamato la tua tabella con altro nome, qui cambia il nome
$qq = "SELECT * FROM `Guestbook` ORDER BY id ASC";
//// Chiediamo di eseguire la query e salviamo la risposta in una variabile
$r = mysqli_query($link, $qq);
/// Iniziamo a creare la pagina con il guestbook
echo '<hr><hr><h1>I vostri msg. Il mio Guestbook </h1><br><hr>';
/// Rendiamo la risposta disponibile in un array, record per record
/// e stampiamo l'html per pubblicare la serie di msg
/// while -> finchè ci sono record
while ( $a = mysqli_fetch_assoc($r) ) {
//// se hai modificato il modulo, devi probabilmente adattare questa riga dello script
echo 'Ciao '.$a['firma'].'. </br> Capisco che stai '.$a['stato'].' e ti ringrazio di quel che mi scrivi:
<blockquote> '.$a['testo'].' </blockquote> <br> <b> Grazie! </b> <hr>';
} // chiudo while
echo '
</body>
</html>';
?>Ricreate nel vostro web server (localhost) la web app discussa in questo Step_3. In particolare:
- scrivete un vostro modulo html, copiando e se volete modificando un poco il modulo mostrato Step_3 (ruba i codici dal sorgente e se vuoi modificali);
- crea nel tuo database per questo corso, una tabella guestbook (o chiamala come preferisci) che sia corrispondente, come spiegato sopra, al modulo;
- adatta lo script di cui sopra alla tua situazione, leggendo con attenzione i commenti per capire come e dove devi adattarlo.
Accademia Albertina Torino, Scuola NTA, a.a. 2024-2025
Insegnamenti ABTEC40
a cura di mario chiari