jQuery: Come creare delle finestre di dialogo personalizzate? (2/2)
Come promesso, eccoci a ritornare sul tema delle finestre di dialogo sviluppate in jQuery. In questo articolo vedremo come realizzare un sistema di login basato su questo tipo di interfaccia; per ingolosirti ti mostro subito il risultato finale.
Il funzionamento, come puoi vedere, prevede che alla pressione del pulsante “login”, abbia luogo una chiamata asincrona che si occuperà di verificare i dati di autenticazione. Se questi non risultassero corretti, verrà mostrato un messaggio di errore.
Mi permetto di dare per scontato che tu abbia letto il precedente articolo che fornisce le basi per quello che andremo a vedere ora. Sei pronto?
Prepariamo la pagina
Creiamo la pagina login.php in questo modo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<script src="jquery.custom.min.js"></script>
<link href="css/jquery.custom.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<title>jQuery dialog - login form | Your Inspiration Web</title>
<script type="text/javascript">
$(document).ready(function(){
// qui inseriremo il codice jQuery
});
</script>
</head>
<body>
</body>
</html>
Come vedi abbiamo incluso nell’header i file necessari: jQuery, il file custom contenente il plugin e le dipendenze, il foglio di stile di jQuery e style.css che invece é il nostro foglio di stile nel quale definiremo le proprietà css del modulo di login.
Il file di supporto per l’autenticazione
La verifica dei dati di autenticazione avverrà tramite una chiamata ajax. Sarà dunque necessario avere un file di supporto che verifichi tali dati e fornisca una risposta.
Nella pratica la procedura sarà certamente più complessa. Noi ci limiteremo a verificare che password contenga “1234” ed username contenga “admin”, nel qual caso valorizzeremo la variabile di sessione auth con 1. Ogni volta che vorremo stabilire se l’utente é autenticato, verificheremo che la variabile auth sia settata con valore 1.
Scriviamo dunque il file verify_login.php in questo modo:
session_start();
if(isset($_POST['username']) AND isset($_POST['password']))
{
if($_POST['password'] == "1234" AND $_POST['username'] == "admin")
{
$_SESSION['auth'] = 1;
echo "1";
}
else
{
echo "0";
}
}
Nota che stampiamo a video 1 in caso di procedura andata a buon fine o 0 in caso di verifica mancata. Questi valori verranno intercettati dalla chiamata ajax in modo da poter visualizzare il messaggio di errore se dovesse essere il caso.
Riscontro dell’autenticazione
Come puoi vedere nella pagina di esempio, nel caso in cui l’utente non é autenticato, viene mostrata la scritta “utente sconosciuto” ed il link “login”. Dopo l’autenticazione viene invece mostrata la scritta “utente autenticato” ed il link “logout”.
Per poter fare questo (in modo da avere un effettivo riscontro dell’avvenuta autenticazione), aggiungiamo questo codice nel body di login.php:
<?php
if(isset($_SESSION['auth']) AND $_SESSION['auth'] == 1)
{
?>
<h3>Utente autenticato</h3>
<p><a href="logout.php">Logout</a></p>
<?php
}
else
{
?>
<h3>Utente sconosciuto</h3>
<p><a href="#" id="login">Login</a></p>
<?php
}
?>
Naturalmente dovremo anche inserire, nella prima riga di login.php, l’avvio delle sessione
<?php session_start(); ?>
Ora abbiamo inserito i due link. Quello per il login non punta a nessuna pagina in quanto andrà ad attivare la finestra di login. Il link per il logout punta invece alla pagina logout.php
Implementare il logout
La pagina logout.php si occuperà semplicemente di “cancellare” la variabile di sessione auth. In questo modo
session_start();
unset($_SESSION['auth']);
header("Location: login.php");
Preparare la finestra di dialogo del login
Aggiungiamo ora nel body di login.php la parte di codice che diventerà poi la finestra di dialogo contenente il modulo di login e che, come vedremo, presenta diverse curiosità.
<div title="Autenticazione utente">
<p class="error">Username o password errati! Riprova</p>
<form action="?" method="post">
<fieldset>
<p>
<label for="username">username:</label>
<input name="username" class="ui-corner-all" />
</p>
<p>
<label for="password">password:</label>
<input name="password" class="ui-corner-all" />
</p>
</fieldset>
<p class="links"><a href="#" class="register">Password dimenticata</a> - <a href="#">Registrati</a></p>
</form>
</div>
Nella seconda riga, inseriamo un paragrafo (classe error) che contiene il messaggio di errore da mostrare in caso di mancata autenticazione. Successivamente, nel foglio di stile, mediante un’apposita regola, renderemo non visibile il messaggio di errore e faremo in modo che questo venga mostrato all’occorrenza mediante jQuery.
Ai campi username e password assegniamo la classe ui-corner-all. Questa classe fa parte del foglio di stile di jQuery ed arrotonda i quattro angoli di un elemento.
Nota che jQuery ha già aggiornato questa classe con le nuove proprietà di IE9 che, dopo un’attesa di 8.000 anni, fornisce finalmente il supporto per l’arrotondamento degli angoli mediante css (!).
Il foglio di stile
Creiamo ora il file style.css ed iniziamo a definire lo stile della finestra di dialogo:
body{
font-size: 12px;
font-family: Verdana;
}
fieldset{
border: none;
}
input{
width: 290px;
height: 25px;
border: 1px solid gray;
padding-left: 30px;
}
Nulla di particolare fino ad ora: abbiamo definito il font, eliminato il bordo del fieldset e definito i campi di input.
Ora andiamo ad inserire le icone nei campi password e username:
input#password{
background: #ffffff url('css/images/lock.png') no-repeat 0 3px;
}
input#username{
background: url('css/images/user1.png') no-repeat 0 3px;
}
Definiamo in seguito il paragrafo contenente il messaggio di errore come non visibile ed attribuiamogli un colore rosso ed un font grassetto:
.error{
display: none;
color: red;
font-weight: bold;
}
Ed infine definiamo i link per la registrazione ed il recupero della password:
a.register{
font-size: 11px;
color: #55AAFF;
}
.links{
padding-left: 80px;
}
Jquery e finestre di dialogo: dare vita alla finestra
Iniziamo finalmente a lavorare sul codice jQuery. La prima cosa che dovremo fare é sviluppare la funzione che apre la finestra di dialogo quando si clicca sul link login.
$("a#login").click(function(){
$('#login_box').dialog("open");
return false;
});
Ed ora iniziamo a definire la finestra di dialogo:
$('#login_box').dialog({
modal: true,
autoOpen: false,
width: 450,
buttons: {
Fino a qui niente di nuovo, abbiamo definito la larghezza della finestra tramite parametro. Ora vediamo i bottoni. Su annulla c’é poco da dire, lo abbiamo già visto nell’articolo precedente.
"Annulla": function() {
$( this ).dialog( "close" );
}
Il pulsante “login” invece é un po’ più complesso. Quando viene premuto bisognerà innanzitutto leggere il contenuto dei campi. Lo faremo con il metodo serialize sul quale ho scritto già un articolo.
var querystring = $('#login_form').serialize();
Ora la variabile querystring dovrà essere inviata al file verify_login.php tramite una chiamata ajax.
$.post('verify_login.php',querystring,function(data){
La funzione di callback di questa chiamata, dovrà verificare la risposta. Se la risposta é 0, significa che i dati non erano corretti, dunque mostreremo il paragrafo di errore (magari tramite un’animazione).
Se la risposta é 1, il login é andato a buon fine e la variabile di sessione auth sarà valorizzata. Ma per vederlo dovremo ricaricare la pagina.
if(data==0)
{
$('.error').slideDown();
}
else
{
window.location = "login.php";
}
A questo punto manca solo un piccolo particolare. Vai nella pagina di esempio ed inserisci dei dati sbagliati. Premendo su “login” verrà correttamente mostrato il messaggio di errore.
Ora, se provi a correggere i dati, il messaggio di errore sparisce.
Questa funzionalità trova ragione in una migliore usabilità. Infatti, se non dovessimo eliminare il messaggio di errore e l’utente sbagliasse una seconda volta i dati, si potrebbe avere l’impressione che non sia successo nulla.
Dunque quello che dovremo fare é intercettare l’ingresso del cursore nel campo (evento focus) e verificare se il messaggio di errore é visibile. Se lo é, lo nasconderemo utilizzando l’animazione opposta (slideUp) a quella che abbiamo utilizzato per mostrarlo.
$('#username,#password').focus(function(){
if($('.error').is(':visible'))
{
$('.error').slideUp();
}
});
E finlmente ecco la pagina login.php finita
<?php session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<script src="jquery.custom.min.js"></script>
<link href="css/jquery.custom.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<title>jQuery dialog - login form | Your Inspiration Web</title>
<script type="text/javascript">
$(document).ready(function(){
$("a#login").click(function(){
$('#login_box').dialog("open");
return false;
});
$('#login_box').dialog({
modal: true,
autoOpen: false,
width: 450,
buttons: {
"Login" : function(){
var querystring = $('#login_form').serialize();
$.post('verify_login.php',querystring,function(data){
if(data==0)
{
$('.error').slideDown();
}
else
{
window.location = "login.php";
}
});
},
"Annulla": function() {
$( this ).dialog( "close" );
}
}
});
$('#username,#password').focus(function(){
if($('.error').is(':visible'))
{
$('.error').slideUp();
}
});
});
</script>
</head>
<body>
<div title="Autenticazione utente">
<p class="error">Username o password errati! Riprova</p>
<form action="?" method="post">
<fieldset>
<p>
<label for="username">username:</label>
<input name="username" class="ui-corner-all" />
</p>
<p>
<label for="password">password:</label>
<input name="password" class="ui-corner-all" />
</p>
</fieldset>
<p><a href="#">Password dimenticata</a> - <a href="#" class="register">Registrati</a></p>
</form>
</div>
<?php
if(isset($_SESSION['auth']) AND $_SESSION['auth'] == 1)
{
?>
<h3>Utente autenticato</h3>
<p><a href="logout.php">Logout</a></p>
<?php
}
else
{
?>
<h3>Utente sconosciuto</h3>
<p><a href="#" id="login">Login</a></p>
<?php
}
?>
</body>
</html>
Download
Se lo desideri puoi scaricare tutti i file utilizzati per realizzare l’esempio descritto in questo tutorial.
DownloadConclusione
Come hai potuto vedere, dopo il primo articolo nel quale abbiamo trattato il tema delle finestre di dialogo in maniera introduttiva, siamo arrivati ora ad un’applicazione pratica piuttosto avanzata in grado di dare uno stile di sicuro effetto alla procedura di login.
E’ ovviamente possibile lavorare sul foglio di stile in modo da modellare la finestra e ottenere qualsiasi risultato desiderato.
E tu, dopo questi due articoli, introdurrai le finestre di dialogo personalizzate nei tuoi siti?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
17 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ottimi articoli come sempre, grazie mille..!!
Grazie a te!
beh che dire, ottimo davvero :)
Che dire, grazie Ciro
bello questo tutorial… solo una domanda:
poniamo di avere una tabella MySql utenti e di mettere in sessione l’id e l’username dell’utente loggato (un login “classico” diciamo…).
Invece di window.location (che esegue uno “sgradevole” aggiornamento della pagina) io avrei pensato (ed è qui che vorrei il tuo parere) di sfruttare la chiamata ajax in diverso modo rispetto a come descritto nell’articolo: restituire 0 per login errato mentre in caso di login corretto restituire l’username loggato così da modificare con il metodo html() di jquery (quindi senza aggiornamento) un div con id=”login_utente” che di default contiene il link che apre il dialog per il login.
Che ne pensi?
… se funziona vien fuori proprio un caso caruccia… ;)
… ci provo!!
E’ fattibile ma considera due cose:
1. Ti da fastidio in quanto carica la stessa pagina. Se venissi reindirizzato ad esempio alla pagina del profilo utente già sarebbe diverso.
2. Personalmente preferisco ricaricare la pagina o meglio inviare ad una nuova pagina ed avere testimonianza della presenza effettiva del paramentro di sessione.
Infine non vedo una grande utilità a procedere in quel modo. Ma comunque non é sbagliato e si può fare, anche in modo molto semplice.
Ciao Maurizio.
Ho scaricato l’intero pacchetto e l’ho copiato nella cartella del mio server web in locale.
Avvio la pagina di login.php ma, a differenza della pagina di esempio, vedo subito i campi di input dei dati e il link “login” non apre nessuna finestra.
C’è qualcosa che non va.
Grazie
ciao luke,
In effetti ho fatto un casino mettendo in download una versione metà di sviluppo e metà di produzione.
Ora ho sostituito con il pacchetto giusto.
Scusa per l’inconveniente :-)
Niente. Figurati.
Avevo quasi intenzione di cimentarmi nella soluzione del problema, ma prima bisogna capire qual’è il problema per risolverlo :-)
Grazie ancora di condividere con noi le tue conoscenze e la tua esperienza.
Trovo molto preziosi e utili questi articoli.
Ciao
Ciao e grazie per il tutorial, mi viene il dubbio …ma anche questo form va protetto da forzature tipo code injection?
Grazie ancora.
Quello che ho mostrato, per ragioni di semplicità, non é un vero sistema di login (in particolare la parte lato server).
Così com’é comunque non pone problemi di code injection.
Ovviamente, nel caso reale, dove probabilmente i dati vengono presi nel database, allora certamente andranno filtrati e resi sicuri.
Ciao
Ho provato ad inserirlo nella home del mio sito, lo sto ristrutturando, ma mi da lo stesso problema di luke ,ho aperto anche un topic sul forum ma nessuno mi da retta
Ciao, riesci ad essere sempre molto chiaro nelle tue guide, volevo però farti una domanda se io ho una lista di utenti con il loro id, se volessi fare in modoche una volta che venga selezionato l’utente nella finestra compaia , l’id dell’utente selezionato, in che modo posso passargli questo valore alla finestra.
Spero di essere stato chiaro
Ti ringrazio per una tua eventuale risposta
Molto interessante questo tutorial.
Ti ringrazio per l’aiuto.
Ciao, scusa il disturbo,
io sto provando ad usare questo strumento dopo aver letto la tua guida e funziona da dio, tranne che per un piccolo dettaglio:
se apro la finestra e poi la richiudo, quando la apro una seconda volta non mi legge più gli “id” dei div in modo corretto.
Inoltre non mi riconosce il metodo “open” per la finestra di dialog.
Premetto che io lo sto utilizzando in un’applicazione che contiene molte librerie jquery alcune che probabilmente contengono le stesse funzioni, di conseguenza è anche probabile che il problema sia lì.
La sola differenza che credo ci sia tra la mia applicazione e la tua (oltre naturalmente al fatto che i pulsanti fanno cose completamente diverse) sta nel fatto che la finestra di dialogo a me si apre non in seguito al click su un bottone ma in seguito all’apertura di una funzione associata ad un pulsante presente sulla griglia flexigrid che come di sicuro saprai è un’altro strumento di jquery.
Non so se sono riuscito a spiegarmi correttamente.
Per tentare di essere più chiaro ti scrivo un esempio:
var querystring = $(‘#campiR’).serialize();
L’assegnazione di questa variabile viene fatta in base alla selezione dei campi in una checkbox di input dall’utente. Quando lancio la finestra la prima volta e seleziono i campi, la variabile mi restituisce i campi selezionati. Se invece premo “annulla” (pulsante identico a quello del tuo esempio) e riapro la finestra e faccio le stesse operazioni, la variabile mi appare vuota.
Se puoi darmi una mano, ti ringrazio.
Se hai bisogno di altri dettagli sul problema scrivimi pure o qui oppure via e-mail.
Ti ringrazio in anticipo.
Buona giornata!
Salve, intanto grazie per questo prezioso Tutorial .
Ma se volessi interfacciarlo con un database My SQL che strada dovrei percorrere .
Grazie. :)
Non so se questa pagina è ancora curata. Spero di ricevere un aiuto.
Nell’esempio tu carichi una dialog con la chiamata all’interno della pagina.
Io ho necessità di aprire una dialog puntando ad una url diversa (un’altra mia pagina php)
E ci riesco
Nella nuova pagina dialog, ho due tasti SI e NO
Non riesco a far capire alla pagina chiamante quale risposta viene cliccata sul dialog; e poi come faccio a chiudere la dialog una volta cliccato SI o NO?
Sul click della pagina chiamante io metto questa funzione JS:
function CambioPercentuale ()
{
$.dialog(
“finestra.tecno.php”,
function (esito) {
alert (esito);
}
);
return false;
}
La finestra mi si apre con la pagina che voglio.
Ho i 2 tasti SI e NO, e mi aspetterei di ricevere in ESITO ciò che ho cliccato.
Così non avviene
Spete aiutarmi? Grazie Marco