In questo articolo vedremo, tramite l'ausilio di intriganti effetti speciali resi disponibili dalla libreria Javascript Script.aculo.us, come sia possibile implementare un campo di login che vibra nel caso in cui l'utente inserisca un valore errato. Se vi fosse mai capitato di effettuare un login su un sistema Mac OS X inserendo dei dati errati,riconoscerete immediatamente questo effetto. Ecco l'esempio.
L'esempio in questione è una sempice login box composta dai soliti campi “Username” e “Password”. Questi saranno composti inizialmente con i valori corretti “html” e “html”, ma se modificherete uno dei dei campi con valori errati, vi sembrerà per un istante di vedere doppio ;).
Analizziamo ora insieme il codice HTML dell'esempio in questione:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Login shaker - Script.aculo.us</title> <script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="http://anystrike.altervista.org/scriptaculous-js-1.8.2/src/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="javascript/script.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/stile.css" media='screen' /> </head> <body> <form method="post" action="javascript:void(0);" onsubmit="formSubmit(); return false;" id='shakeForm'> <div id='shakeBox'> <fieldset> <legend>Login Box:</legend> <div id='msgBox' style="display:none;"></div> <label>Username: <input type="text" value="html" name="username" maxlength="30" /> <input type="submit" value="login" name="loginSubmit" /></label><br /> <label>Password: <input type="password" value="html" name="pw" maxlength="20" /></label> </fieldset> </div> </form> </body> </html>
Nella sezione head, vengono implementati i vari script necessari al funzionamento dell'applicazione: le librerie Prototype,Script.aculo.us e il file script.js che analizzeremo in seguito.
Dopodiché possiamo notare due zone delimitate da due tag div: shakeBox comprenderà tutti gli elementi che in caso di errore dovranno vibrare; msgBox per eventuali messaggi d'errore inviati lato server.
Una volta inseriti i dati, questi verranno elaborati lato server e se il nome utente o la password non saranno conformi alle regole imposte, il box contenente il form “vibrerà”, come succede di default su un sistema Mac. Nel caso i dati siano invece corretti, l'applicazione segnalerà visivamente con un messaggio, il buon esito dell'operazione.
Ma come succede tutto questo? Analizziamo ora insieme cosa accade ai nostri dati una volta premuto il pulsante "Login".
Ecco il codice del file script.js:
function formSubmit()
{
new Ajax.Request(
"php/check.php",
{ parameters: $('shakeForm').serialize(true),
onComplete:function(transport)
{
var json=transport.responseText.evalJSON(true);
if(!json.stato)
{
$('msgBox').addClassName('ko');
Effect.Shake('shakeBox');
}
else
{
if($('msgBox').hasClassName('ko'))
$('msgBox').removeClassName('ko');
}
$('msgBox').innerHTML=json.msg;
Effect.Appear('msgBox');
}
});
}
Per completare la nostra semplice applicazione non ci rimane che analizzare il file check.php:
<?php
/**
* Controllo i dati che mi arrivano dalla form
* il controllo non avverrà tramite DB
*/
if($_POST['pw']=='html' && $_POST['username']=='html')
{
echo json_encode(array("msg"=> "Login effettuato correttamente!", "stato" => true));
}
else
{
echo json_encode(array("msg"=> "Login errato!", "stato" => false));
}
La funzione formSubmit() contenuta nel file script.js, verrà richiamata in automatico tramite l'evento onSubmit all'invio del form.
Al suo interno il costrutto reso disponibile da Prototype, Ajax.Request, ci permetterà di eseguire una chiamata asincrona lato server, passando i dati provenienti dal nostra form.
$('shakeForm').serialize(true) non farà altro che inviare i dati del form che ha per id 'shakeForm' nel seguente modo check.php?username=html&pw=html.
L'elaborazione lato server contenuta nel file check.php restituirà al client un Array in formato JSON contenente il messaggio positivo/negativo e lo stato.
Tramite l'utilizzo degli eventi legati all'oggetto Ajax.Request verrà analizzato, una volta terminata l'elaborazione lato server, il valore restituito.
Se lo stato restituito dal server non sarà positivo verrà aggiunta la classe "ko" all'elemento div abilitato alla visualizzazione del messaggio. Questo sarà utile per una formattazione appropriata del testo tramite l'ausilio dei CSS; dopodiché verrà implementato il seguente effetto di vibrazione: Effect.Shake('shakeBox');. Il parametro passato al metodo Shake sarà l'id dell'elemento div contenente il nostra form a cui applicare l'effetto.
Il codice degli esempi è disponibile per il download.
