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.

Download

Conclusione

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?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

15 commenti

  1. luke
  2. luke
  3. Micheke
  4. Michele
  5. mitiko
  6. Andrea
  7. Andrea

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *