Guida su Ajax . Lezione 3 Creare una Shoutbox

Adesso che cominciamo ad essere veramente degli espertidella tecnologia Ajax vediamo un esempio veramente concreto. Ossia come si realizza una shoutbox, ossia un luogo dove sia possibile rilasciare dei commenti da parte delle utenze nel vostro sito. Alla fine di questa guida avremmo costruito 5 file che saranno la conclusione del nostro lavoro

Creare una ShoutBox in linguaggio Ajax

• ajax.js: conterrà le funzioni JavaScript;
• index.php: conterrà il form per l’insermento dei posts degli utenti e permettera la loro visualizzazione;
• invia.php: consentirà di popolare la tabella con i dati ricevuti tramite il form;
• mostra.php: file per l’estrazione dei records dalla tabella.

Con qualche giorno di lavoro e un minimo di conoscenza di php da dove vi lasceremo sarà possibile creare una vera e propria chat. Quello che vi occorerrà sarà un database mysql lato server , un server e un po’ di attenzione, se non l’avete lato server createvene uno in qualche hosting gratuito che tanto se ne trovano in giro, oppure scaricatevi EasyPhp e fate diventare il vostro pc un server php con mysql, a voi la scelta. Appena adempiuto a questo passo create quindi le tabelle mysql

CREATE TABLE `shoutbox` (<br /><br /><br /><br /><br /><br /> `id` int(11) NOT NULL auto_increment,<br /><br /><br /><br /><br /><br /> `nick` varchar(50) NOT NULL default ”,<br /><br /><br /><br /><br /><br /> `testo` varchar(255) NOT NULL default ”,<br /><br /><br /><br /><br /><br /> `sito_web` varchar(255) NOT NULL default ”,<br /><br /><br /><br /><br /><br /> `data` date NOT NULL default ‘0000-00-00’,<br /><br /><br /><br /><br /><br /> PRIMARY KEY (`id`)<br /><br /><br /><br /><br /><br /> );

A questo punto scriviamo il file di localizzazione in php necessario per connettersi con il database che è

</p><br /><br /><br /><br /><br /> <p> <?php $host = “localhost”; $user = “username”; $password = “password”; $db = “shoutbox”; $connessione = @mysql_connect($host, $user, $password) or die (mysql_error()); @mysql_select_db($db) or die (mysql_error()); ?></p><br /><br /><br /><br /><br /> <p>

Ovviamente con gli opportuni cambiamenti, ossia con i vostri personali dati di connessione.Andiamo al passo 2.

Questo è il codice della funzione che chiama XMLHTTP; per il controlloo dei dati al Server e la sua eventuale risposta.

// funzione per la chiamata dell’oggetto XMLHttpRequest<br /><br /><br /><br /><br /><br /> function ajax(){<br /><br /><br /><br /><br /><br /> var ajaxRequest;<br /><br /><br /><br /><br /><br /> try{<br /><br /><br /><br /><br /><br /> // controllo per i browser diversi da IE<br /><br /><br /><br /><br /><br /> ajaxRequest = new XMLHttpRequest();<br /><br /><br /><br /><br /><br /> }catch (e){<br /><br /><br /><br /><br /><br /> // contorollo per IE<br /><br /><br /><br /><br /><br /> try{<br /><br /><br /><br /><br /><br /> ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);<br /><br /><br /><br /><br /><br /> }catch (e){<br /><br /><br /><br /><br /><br /> try{<br /><br /><br /><br /><br /><br /> ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);<br /><br /><br /><br /><br /><br /> }catch (e){<br /><br /><br /><br /><br /><br /> // controllo per i browser che non supportano l’XMLHttpRequest<br /><br /><br /><br /><br /><br /> alert(“Il browser non supporta questo ShoutBox”);<br /><br /><br /><br /><br /><br /> return false;<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> return ajaxRequest;<br /><br /><br /><br /><br /><br /> }

:

Come potete vedere questa parte è sempre abbastanza standard , si cambiano dei nomi, ma fondamentalmente il significato è sempre lo stesso, ossia si inizializza una variabile HttpXmlRequest per il passaggio e controllo dei dati con il server e si verifica la compatibilità dei browser che stiamo utilizzando, volendo questo script si potrebbe ricopiare cosi’ com’e’ ogni qual volta che vogliamo fare un’applicazione in cui sia coinvolta la tecnologia Ajax.

Salviamo questo file in un file ajax.js, ossia è volgarmente un javascript, i cui oggetti sono il vero cuore del passaggio dei dati , ossia di Ajax.

Vediamo adesso come costruire la pagina index.php

Passiamo ora al codice della pagina “index.php”, all’interno di essa troveremo innanzitutto l’inclusione del file per la visualizzazione dei records (“mostra.php”) che contiene anche i tags HTML iniziali della pagina; in secondo luogo inseriremo il form per il post dei commenti:

<?php @include 'mostra.php'; ?> 
 <div id="modulo">  
</div>  
<form name="form_invio" method="POST" onsubmit="salva(); return false;">  
Nick: <br><input name="nick" type="text">
<br>  Sito Web:
 <br><input name="sito_web" type="text"><br> 
 Commento <br><input name="testo" type="text"><br> 
 <input type="submit" name="submit" value="Invia"><br>  </form>
  </body>  </html>

Come potete vedere al momento dell’invio verrà attivata la funzione on submit che si occuperà di passare il comando della funziona al javascprit stesso , ma vediamo adesso come funziona nello specifico questa funzione salva

// funzione per il salvataggio dei dati
  function salva()
{    htmlRequest = ajax();    
if (htmlRequest==null){    
   alert ("Il browser non supporta richieste HTTP"); 
     return;  
  }     
// controlliamo i parametri obbligatori    
if(document.form_invio.nick.value == "" || 
document.form_invio.nick.value == "NULL" 
|| document.form_invio.testo.value == "" 
|| document.form_invio.testo.value == "NULL")   
 {      alert('Inserisci sia il Nick che il testo');      return;    }  
  // inviamo i parametri al file per l'INSERT 
   htmlRequest.open('POST', 'invia.php');   
 htmlRequest.setRequestHeader('Content-Type', 
'application/x-www-form-urlencoded');    
htmlRequest.send('nick='+document.form_invio.nick.
value+'&testo='+document.form_invio.
testo.value+sito_web='+document.form_invio.sito_web.value);   
    // svuotiamo il modulo per il messaggio    
document.form_invio.testo.value = '';   
 document.form_invio.testo.focus();  } 
 


in pratica prima si verifica la compatibilità eventuale del browser e dopo 

se il campo che gli si è passato non è vuto allora si procede all'invio

stesso dei valori , alla fine si effettuerà lo svuoameno di quei campi che hanno raccolto l’informazione da passare in modo tale da permettere di inserire dell’altra informazione

Come abbiamo visto la funzione salva passa i dati alla funzione invia che è un php cioe’ residente nel server e quindi avremo

<php @include ‘config.php’; if (isset($_POST[‘nick’]) && isset($_POST[‘testo’sito_web’])) { $nick=addslashes($_POST[‘nick’]); $testo=addslashes($_POST[‘testo’]); $sito_web=addslashes($_POST[‘sito_web’]); $query = “INSERT into shoutbox (nick, testo, sito_web, data) VALUES (‘$nick’, ‘$testo’, ‘$sito_web’, now())”; $result = @mysql_query($query) or die (mysql_error()); @mysql_close(); }></p><br /><br /><br /><br /><br /> <p>

questa funzione si occupera’ soltanto di leggere i valori e di inserirli nel database, nel caso abbia realmente ricevuto qualcosa.

Passiamo adesso a descrivere l’ultima funzione che salveremo all’interno del file ajax.js ossia mostra() a cui come dice il nome spetta il compito di visualizzare i file del db; si richiama dunque Xmlhttp segue alert che invierà un messaggio in caso di mancato supporto da parte del browser. Il metodo Open() si occupa di fatto di aprire la richiesta HTTP specificando il metodo da utilizzare (GET oppure il POST) e l’indirizzo del file remoto da richiamare.

// funzione per mostrare i dati
  function mostra() {  
  htmlRequest = ajax();    
// controllo nel caso in cui non possa richiamato l'oggetto Xmlhttp   
 if (htmlRequest==null){     
  alert ("Il browser non supporta richieste HTTP");      
return;    
}    
htmlRequest.onreadystatechange = function(){  
    // Restituisce lo stato della richiesta 
     if(htmlRequest.readyState == 4){   
     // Restituice il corpo della risposta come stringa       
 document.getElementById("modulo").innerHTML = htmlRequest.responseText;      
}    }   
 // chiamata della pagina PHP che estrae i records     
htmlRequest.open("GET", "mostra.php", true);    
htmlRequest.send(null);  }  
// chiamata alla funzione  mostra();  
// intevallo per l'aggiornamento della pagina  
setInterval("mostra()",1000);

il setinterval ovviamente sta a indicare un intervallo di tempo dove la funzione aspetta il conteggio fino a mille prima di ripartire.

mentre il codice della pagina mostra molto semplice ve lo lasciamo senza commento ed è:

<?php @header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

@header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");

@header("Cache-Control: no-store, no-cache, must-revalidate");

@header("Cache-Control: post-check=0, pre-check=0", false);

@header("Pragma: no-cache");

@include 'config.php'; ?>

<html> <head>

<title>Shoutbox</title>

<script language="JavaScript" type="text/javascript" src="ajax.js"> </script>

</head> <body>

<? $query = "SELECT * FROM shoutbox ORDER BY id DESC"; $result = @mysql_query($query) or die (mysql_error());

if (mysql_num_rows($result) > 0)

{ while($row = mysql_fetch_array($result))

{ $nick = stripslashes($row['nick']);

$testo = stripslashes($row['testo']);

$data = $row['data']; // formattiamo la data in "gg-mm-aaaa"

$data = preg_replace('/^(.{4})-(.{2})-(.{2})$/','$3-$2-$1', $data);

$sito_web = $row['sito_web'];

echo "$nick - $testo - $data <br>\r";

} }

@mysql_close(); ?>

da notare come sono definiti gli headers , Questo accorgimento ci permetterà di svuotare la cache del browser ad ogni affiornamento della ShoutBox.

Beh con questo concludiamo la lezione non vi rimane che provare il tutto per vedere se effettivamente funziona, noi in ogni caso per consigli o suggerimenti vostri o nostri vi aspettiamo nel forum. Arriverdi a presto.