-
BOH
.User deleted
L'obiettivo di questa guida è quello di dare uno scenario completo sul come realizzare un'applicazione web ben strutturata.
Quello che si potrà raggiungere con questa guida sarà la realizzazione di una semplice applicazione web, ma con l'esatta consapevolezza di come sia strutturata, cosa che vi permetterà di estenderla ad un'applcazione più complessa senza troppe difficoltà.
La guida verrà aggiornata per permettere agli utenti del forum che inizieranno a seguirla in tempo reale di stare al passo.
I requisiti per il completamento della guida sono:
- Un browser
- Un server con Php (possibilmente alla versione 5)
- Un database MySql
Tutti questi requisiti possono essere tranquillamente installati localmente. Se non sapete come fare potete crearvi un account su Altervista che vi permetterà di avere queste 3 cose gratuitamente.
Infine darò un minimo per scontato la conoscenza del linguaggio HTML, anche perchè l'idea di un'applicazione web è di risultare utile, non bella. Se però avete problemi, chiedete pure e vi sarà dato.
Per tutti i commenti a questa guida (comprese le domande e il post delle soluzioni ai quesiti), siete pregati di postare in questa discussione: https://pokemonflame.forumcommunity.net/?t=52774026
LEZIONE 1 - PANORAMICA DI UN'APPLICAZIONE WEB
Un'applicazione web è composta sostanzialmente da 3 componenti:
- Client
- Server
- Database
Il client è colui che visualizza i dati all'interno del vostro browser.
Il server è colui che recupera i dati dal database, li elabora secondo qualche logica, e infine li passa al client.
Il database è il componente che immagazzina i dati e fornisce affidabilità, persistenza e facili routine per l'accesso ai dati.
Il linguaggio di programmazione lato client più utilizzato (e che useremo in questa guida) è javascript+Html5.
I linguaggi di programmazione lato server più utilizzati sono Java e Php. Siccome trovare degli hosting gratuiti che offrano una Java Virtual Machine è molto complesso (direi impossibile), noi per questa guida utilizzeremo Php. Ricordate solo che Php è più semplice ma offre molto meno rispetto al Java.
Il linguaggio di programmazione per comunicare con un database è SQL. Esistono svariate tipologie di database, ciascuno dei quali parla un suo specifico dialetto Sql. Noi useremo in questa guida MySql, ma cercheremo di non uscire dalla sintassi Sql standard, che così dovrebbe funzionare con qualsiasi altro database.
Quando voi scrivete in php una pagina semplice come questa:HTML<?php
echo 'Hello World';
?>
nb. la funzione echo serve a stampare il contenuto.
Quello che succede è che state implementando in un colpo solo sia il lato client che il lato server. In particolare la vostra pagina server (che girerà sul server del sito, esempio altervista) elaborerà il codice e passerà al client il risultato, nel nostro caso una pagina bianca contenente solamente la scritta Hello World. Il client (che gira sul pc di colui che visualizza la pagina) analizzerà quello che il server gli ha passato, e in base al contentuo deciderà come visualizzarlo all'interno del browser.
Siccome siamo nel 2012, e le applicazioni diventano sempre più complesse e pesanti, una buona soluzione è quella di mantenere client e server su pagine (url) separate, e fare in modo che i dati che il server debba passare al client siano il minimo indispensabile.
Per fare questo però è necessario passare alla programmazione dinamica, e sfruttare al meglio le caratteristiche che Javascript ci mette a disposizione.
In particolare Javascript offre l'oggetto XMLHttpRequest, che permette di aprire una connessione con il server e di elaborare la risposta una volta arrivata.
Per creare un'istanza di tale oggetto, questo è il codice necessario:CODICEvar XMLHttp = false;
if (window.XMLHttpRequest){
XMLHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Questo codice potete copincollarlo sempre, l'else serve solamente per evitare che con Internet Explorer tutto si pianti come al solito. (ricordate che il 70% degli utenti usa Internet Explorer, quindi è fondamentale che ahimè la vostra applicazione funzioni anche per quel browser).
Grazie al codice sopra inserito, avremo un oggetto di nome XMLHttp (potete chiamarlo Pippo se preferite) che rappresenta l'istanza della classe XMLHttpRequest.
Il passaggio successivo è quello di inviare la richiesta al server:CODICEif (XMLHttp){
XMLHttp.open("POST", "hello.php");
XMLHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttp.send();
}
L'if all'inizio serve solo ad assicurarsi che l'oggetto sia stato creato con successo.
Il metodo open serve a dare le configurazioni di trasmissione. In particolare il primo parametro indica la modalità della richiesta ("POST" passa i parametri nel body del messaggio, "GET" nella url direttamente), mentre il secondo contiene l'url della pagina server alla quale mandare la richiesta.
Poi dobbiamo andare a settare l'intestazione della richiesta con il metodo setRequestHeader. La configurazione nell'esempio indica un campo dati formattato come per il trasferimento di informazioni da un form, e per ora ci va bene così.
Infine inviamo la richiesta al server.
Ora quello che ci interessa è come intercettare la risposta del server e come visualizzarla nella nostra pagina. Per fare questo ci avvaliamo del metodo onreadystatechange che verrà scatenato quando la risposta sarà arrivata. In particolare questo metodo occorre metterlo prima della chiamata al metodo send, in quanto dobbiamo essere sicuri che quando la risposta arrivi esso sia già istanziato.
Quando siamo all'interno di tale metodo, possiamo andare a controllare la proprietà readyState dell'oggetto XMLHttpRequest: se questa è uguale a 4, allora vuol dire che la risposta è arrivata senza alcun errore, e quindi possiamo fare quello che ci serve.CODICEif (XMLHttp){
XMLHttp.open("POST", "hello.php");
XMLHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttp.onreadystatechange = function() {
if (XMLHttp.readyState==4) {
//Fai quello che devi fare
}
}
XMLHttp.send();
}
Nel nostro caso il "Fai quello che devi fare" è prendere la stringa che ci ha mandato il server e visualizzarla nella pagina del browser. Di conseguenza dobbiamo capire come accedere al contenuto della risposta. Di nuovo, questa sarà contenuta nel solito oggetto XMLHttp, e in particolare nella sua proprietà responseText. Per visualizzarla nella pagina però, dobbiamo andare a modificare il contenuto della pagina che ormai è già visualizzata sul browser. Per fare questo ci avvaliamo del metodo innerHTML che ogni oggetto del DOM possiede.
Ecco come fare (la parte di codice che riporto ora va inserita al posto del commento //Fai quello che devi fare)CODICEvar stringa = XMLHttp.responseText;
document.body.innerHTML = stringa;
nb. il metodo innerHTML potrebbe non funzionare con alcune versioni di safari. Per risolvere questo problema si possono utilizzare le funzioni offerte dal framework jQuery, ma non è interesse di questa guida.
document.body prende il body della pagina, se voi voleste sostituire il contenuto ad un solo div potete usare document.getElementById ad esempio.
Se avete capito i passaggi fino a qua, vi sarete accorti di un problema: ma questo codice javascript che abbiamo scritto, quando viene chiamato all'interno dell'applicazione? la risposta ovviamente è mai. Per questo motivo dobbiamo inserire tutto questo codice all'interno di una funzione:CODICEfunction printHello(){
//Qua tutto il codice
}
e poi chiamare questa funzione, per esempio, al caricamento della paginaHTML<body onload="printHello()"></body>
Fatto questo la pagina client è completa. Ora passiamo a dare uno sguardo alla pagina server (che ricordo deve stare su un file separato, in particolare seguendo l'esempio deve stare nel file hello.php, mentre ad esempio quella client in index.html).
Quello che vogliamo tale pagina faccia sia semplicemente rispondere a tutte le richieste dei client inserendo nel corpo della risposta una stringa, che poi il client provvederà a stampare a schermo. Di conseguenza la pagina php è semplicissima:HTML<?php
echo 'Hello World';
?>
ESERCIZIO RIASSUNTIVO
Al termine di ogni lezione proporrò un piccolo test che chi vorrà potrà affrontare per vedere se ha capito la lezione. Se vorrete potrete postare il codice del test nel topic dei commenti (click) e io provvederò a controllarvelo e a darvi delle dritte.
Per questa prima lezione, visto che ho buttato li molti concetti, basterà capire se tutto quello che ho detto vi è chiaro. Di conseguenza quello che dovrete fare è realizzare un'applicazione che quando viene premuto un bottone, stampi i primi 3 caratteri di una stringa (più lunga) che il server gli manda.
ps. Se qualcuno di voi fosse interessato alla guida, ma si è un pò perso in questa prima lezione perchè ho dato un pò di cose per scontato, può chiedere tutto quello che vuole nel topic e io risponderò.
. -
BOH .
User deleted
LEZIONE 2 - PASSAGGIO DI PARAMETRI E JSON
Arrivati a questo punto siamo riusciti a far comunicare una pagina client in esecuzione sul pc dell'utente (index.html), con una pagina server in esecuzione sul nostro server web (hello.php), senza che l'utente si accorga di aver cambiato pagina.
La modalità usata fino ad ora è però molto cruda. Il client si limita semplicemente a dire al server "eseguiti", mentre il server manda al client tutto quello che c'è da stampare.
Questa situazione è obsoleta per vari motivi:
- il server il più delle volte deve eseguire cose differenti in base a ciò che l'utente ha fatto (ad esempio se l'utente seleziona il radiobox maschio, dovrà fare cose diverse rispetto a quando seleziona femmina).
- il client oggi ha una potenza di elaborazione molto elevata; sarebbe quindi meglio che il server si limitasse a prelevare ed eventualmente selezionare i dati, lasciando il grosso dell'elaborazione al client. Questo ci permetterebbe di avere un server meno sfruttato (considerando che deve servire molti utenti contemporaneamente) e una quantità di dati che viaggiano sulla rete (e che quindi il client deve scaricare) minore.
Per fare questo è necessario che client e server comunichino inviandosi dati (in ambo le direzioni), e lo facciano strutturando opportunamente la loro forma.
Partiamo dalla comunicazione client->server. In questo caso ciò che deve viaggiare sulla rete sono (tipicamente) una serie di dati inseriti dall'utente nella vista di partenza. Ad esempio un utente compila un form, tutto ciò che lui ha inserito in esso il client deve in qualche modo mandarlo al server.
Per fare questo è necessario appendere i dati alla richiesta XML descritta nella lezione precedente. Di seguito io illustrerò come fare questo utilizzando il metodo di invio dati POST, che permette di inviare senza problemi grandi quantità di dati in quanto essi finiscono nel body della richiesta.
L'aggiunta di parametri al body avviene inserendo una stringa opportunamente strutturata come parametro del metodo send(). Vediamo un esempio pratico che chiarirà sicuramente la situazione:CODICE<html>
<head>
<script type="text/javascript">
function submitForm(){
/*
inizializzazione XMLHTTP - vedi lezione 1
*/
if (XMLHttp){
XMLHttp.open("POST", "hello.php");
XMLHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttp.onreadystatechange = function() {
if (XMLHttp.readyState==4) {
//Fai quello che devi fare
}
}
// PARTE INTERESSANTE
//Recupero l'oggetto form
var myForm = document.getElementById("myForm");
//Preparo la stringa con i parametri
var stringa = "Testo1="+myFrom.elements["text1"].value+"&Testo2="+myFrom.elements["text2"].value;
XMLHttp.send(stringa);
// PARTE INTERESSANTE
}
}
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="text1" size="30" maxlength="50">
<input type="text" name="text2" size="30" maxlength="50">
<button onclick="submitForm()">Invia</button>
</form>
</body>
</html>
Quello che ci interessa sta all'interno dei 2 commenti //PARTE INTERESSANTE nella funzione javascript.
In particolare possiamo notare che la stringa va formattata nel seguente modo:
NomeDelParametro1=ValoreDelParametro1&NomeDelParametro2=ValoreDelParametro2
Una volta preparata la stringa la passiamo come parametro al metodo save e questa arriverà al server.
A questo punto il server dovrà riuscire a recuperare in modo semplice i parametri per poterli utilizzare. Niente paura, PHP ce li suddivide già automaticamente in variabili d'ambiente. Ecco come recuperare i parametri dell'esempio sopra:CODICE<?php
$par1 = $_REQUEST['Testo1'];
$par2 = $_REQUEST['Testo2'];
?>
Il vettore associativo $_REQUEST viene automaticamente riempito con i valori dei parametri derivanti sia dal POST che dal GET. In caso volessimo distinguere (ad esempio perchè se ci arriva il parametro Testo1 dal GET vogliamo fare cose diverse rispetto a quando ci arriva dal POST), possiamo usare i vettori associativi $_GET e $_POST esattamente nello stesso modo. In generale comunque è consigliato usare $_REQUEST.
A questo punto abbiamo capito come permettere al client di inviare parametri al server. Lo step successivo sarà quello di capire come il server può inviare dati al client in modo strutturato, sottoforma di parametri appunto.
Siccome il server risponde ad una richiesta (mentre il client faceva una richiesta nuova) e siccome il server spesso deve comunicare dati molto più complessi e nidificati rispetto a quanto non debba fare il client, per l'invio dei dati in questa direzione sono nati vari linguaggi appositi.
Un linguaggio molto semplice e facile da comprendere è il linguaggio JSON (che noi useremo in questa guida).
JSON permette di descrivere i parametri sottoforma di oggetti, che possono a loro volta contenere altri oggetti o elementi di tipi fondamentali (interi, stringhe, booleani). Per descrivere un oggetto bisogna utilizzare una coppia di parentesi graffe {}, per descrivere un vettore di oggetti invece una coppia di parentesi quadre [], e infine per descrivere una proprietà bisogna inserire il nome della proprietà seguito da : e poi dal suo valore.
Anche qui, passiamo ad un esempio che è molto più esplicativo. Supponiamo di voler rappresentare un libro, che dovrà avere un autore, un titolo e un codice numerico. Ciascun autore avrà poi un nome e un cognome.CODICE{
titolo: "Divina Commedia",
autore: {
nome: "Dante",
cognome: "Alighieri"
},
codice: 157
}
Se ora volessimo rappresentare più libri basterà creare un vettore di oggetti libro:CODICE[{
titolo: "Divina Commedia",
autore: {
nome: "Dante",
cognome: "Alighieri"
},
codice: 157
},{
titolo: "Promessi Sposi",
autore: {
nome: "Alessandro",
cognome: "Manzoni"
},
codice: 221
}]
Questo servirà averlo ben chiaro per capirci qualcosa quando si presenteranno dei problemi (perchè si presenteranno). In pratica però sia Javascript che PHP ci mettono a disposizione delle comode funzioni di codifica/decodifica in JSON che ci semplificheranno la vita.
Partiamo da PHP che nel nostro caso è colui che deve codificare i dati in JSON e inviarli poi al client. Per farlo non dobbiamo fare altro che creare un vettore che descrive i nostri oggetti e poi chiamare la funzione json_encode.
Ad esempio prepariamo dei dati in formato JSON per rappresentare il libro Divina Commedia (esempio 1 sopra).CODICE<?php
$libro['titolo'] = "Divina Commedia";
$libro['codice'] = 157;
$libro['autore'][] = array(
"nome" => "Dante",
"cognome" => "Alighieri"
);
echo json_encode($libro);
?>
Una volta fatto questo, siamo in grado di comunicare i dati che ci interessano al client in formato JSON. Ma come fa il client ad estrapolarli e usarli a dovere? Per questo ci viene incontro la funzione eval() di javascript. Ecco l'esempio:CODICEvar json = eval("(" + XMLHttp.responseText + ")");
NB. fare attenzione alle parentesi che "wrappano" il responseText!
A questo punto l'oggetto json conterrà la risposta del server in modo strutturato. Ecco un esempio di come distribuire in altre variabili il contenuto della risposta (questa cosa è solo a titolo di esempio, tipicamente poi si usa direttamente l'oggetto json, senza creare nuove variabili).CODICEvar titolo = json.titolo;
var codice = json.codice;
var autore = json.autore;
var nomeAutore = autore.nome;
var cognomeAutore = autore.cognome;
ESERCIZIO RIASSUNTIVO
Realizzare un'applicazione web che esegua i seguenti compiti:
- Presenti un form all'utente che gli permetta di scegliere una città e un costo massimo.
- Quando l'utente preme sul bottone "Ricerca" invii la richiesta al server che provvederà a far ritornare (ovviamente in formato json) l'elenco di appartamenti liberi in quella città il cui costo non superi la soglia specificata. Ciascun appartamento dovrà avere un nome, una città, un costo e un elenco di stanze. Ciascuna stanza dovrà avere un nome e un numero che ne indica i mq.
- Il client visualizza al posto del form l'elenco degli appartementi in modo carino (esempio il nome in grassetto, eccetera). Vicino a ciascun appartamento dovrà esserci un bottone "Compra"
- Quando l'utente cliccherà su compra il client invierà una richiesta al server. Il server dovrà controllare se l'appartamento è ancora disponibile e rispondere (in formato json) sia in caso positivo che negativo.
- Quando il client riceverà la risposta visualizzerà un'alert all'utente informandolo di quanto avvenuto.
NB. Per l'elenco degli appartamenti si crei un vettore di esempio che ne contenga 4 o 5 in 2 città diverse. Per la conferma si può supporre che sia sempre positiva..
Pokémon Flame [Soluzione e Download Pokemon: X,Y, Bianco 2,Nero 2, Bianco,Nero, CuoreOro,AnimaArgento, Platino,Diamante,Perla] 
Off Topic - How To
Guida completa alla creazione di un Applicazione WebJavascript, Json, Php e MySql |
