Modifica in linea con HTML5, jQuery Ajax, PHP e MySQL

Sempre più, oggi giorno, si cercano nuovi modi per far interagire le persone al meglio con le nostre Web Applications. Un tipo d’interazione che sta prendendo molto piede, è quella della modifica in linea. I siti web più popolari (facebook, google+ etc.) vogliono che i profili dei propri utenti possano essere modificati senza dover essere rimandati ad un form differente da quello che attualmente stan guardando.

Con l’avvento di HTML5 son state introdotte molteplici funzionalità agli standard del web. In particolare un attributo fa al caso nostro.
Il suo nome è “contenteditable“, e si prende cura in automatico della modifica in linea di elementi con contenuti testuali. Aggiungendo questo attributo ad un elemento, si permette all’utente di cliccarvi sopra e modificarne il valore. Nota bene, alcune versioni di internet explorer non supportano questa caratteristica.

Guardiamo ora come realizzare un contenuto interattivo che offre la possibilità di effettuare modifiche in linea. Utile se si vuole ad esempio proiettare una tabella di un database su una pagina web, e in tempo reale permetterne la modifica diretta e persistente.
(Per questo esempio si è preso spunto da w3lessons.info)

Iniziamo dunque, creando per questo scopo, una tabella, in cui applichiamo alle celle

<table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td>1</td>
        <td id="first_name:1" contenteditable="true">Karthikeyan</td>
        <td id="last_name:1" contenteditable="true">K</td>
        <td id="city:1" contenteditable="true">Chennai</td>
      </tr>
      <tr>
        <td>2</td>
        <td id="first_name:2" contenteditable="true">Facebook</td>
        <td id="last_name:2" contenteditable="true">Inc</td>
        <td id="city:2" contenteditable="true">California</td>
      </tr>
      <tr class="odd">
        <td>3</td>
        <td id="first_name:3" contenteditable="true">W3lessons</td>
        <td id="last_name:3" contenteditable="true">Blog</td>
        <td id="city:3" contenteditable="true">Chennai, India</td>
      </tr>
    </tbody>
 </table>

Non ci resta che implementare l’interazione con il database. Attraverso tecnologia Ajax, appoggiandoci ad uno script php.
Notare che l’id di una cella si identifica il nome dell’attributo (prima dei 🙂 e subito dopo il delimitatore “:” l’id, la chiave della tupla presente nel DB.

Persistenza dei dati

Ecco il codice jQuery/Javascript asincrono per comunicare con lo script PHP:

    $("td[contenteditable=true]").blur(function(){
        var field_userid = $(this).attr("id") ;
        var testo = $(this).text() ;
		$.ajax({
			type:"POST",
			url: 'script.php',
			data: field_userid+"="+encodeURIComponent(testo),
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
		}).done(function( data ) {
				if(data != ''){
					message_status.fadeIn('slow');
					message_status.html(data);
					//hide the message
					setTimeout(function(){message_status.fadeOut()},3500);
				}
			});
});

Con questo codice si imposta un listener sull’evento di blur, cioè quando l’utente perde il focus dalla casella su cui ha cliccato, automaticamente si esegue la funzione Ajax.
Questo passa la palla allo script lato server che si occupa di attualizzare i dati su DB, e rendere la modifica persistente.

Lo script PHP si presenta in questo modo, script.php:

if (!empty($_POST)){
 
$id_corso = strip_tags(trim(mysql_real_escape_string($_GET['id_corso'])));;
 
foreach($_POST as $field_name => $val){
		//clean post values
		$field_userid = strip_tags(trim($field_name));
		$val = strip_tags(trim(mysql_real_escape_string($val)));
 
		//from the fieldname:user_id we need to get user_id
		$split_data = explode(':', $field_userid);
		$user_id = $split_data[1];
		$field_name = $split_data[0];
		if(!empty($user_id) && !empty($field_name) && !empty($val)){
			//update the values
			$val = mb_convert_encoding($val, 'ISO-8859-1','utf-8'); // importante per codificare la nuova stringa in ISO-8859-1
			mysql_query("UPDATE users SET $field_name = '$val' WHERE user_id = $user_id") or mysql_error();
			echo "<b><font color='green'>Aggiornamento avvenuto con successo!</font></b><br/><br/>";
		} else {
			echo "<b><font color='red'>Richiesta non Valida!</font></b><br/><br/>";
		}
	}
 
}

L’istruzione di codifica nel codice sopra è molto importante, sopratutto se prevediamo l’uso di caratteri accentati, che necessitano di una codifica apposita per essere memorizzati sul database ed essere visualizzati correttamente in seguito.

Tutto questo ricordiamo, è possibile grazie all’attributo contenteditable di HTML 5. Gli scenari d’utilizzo sono veramente illimitati.

Per qualsiasi dubbio o informazione, commentate!