Un sistema di login Ajax con jQuery e PHP
Pagina 1 di 2
In questo articollo vedremo come creare un completo sistema di autenticazione degli utenti basato su Ajax.
Per raggiungere il nostro scopo utilizzeremo la libreria jQuery (che ci semplifica la vita nello sviluppo lato client), PHP quale linguaggio per le operazioni server side e MySQL per lo stirage dei dati di accesso degli utenti.
Il database
Come detto utilizzeremo MySQL per memorizzare le credenziali di accesso degli utenti. A tal fine, pertanto, avremo bisogno di una tabella "utenti" così strutturata:- id - int(20), primary key, auto increment
- username - varchar(100)
- password - varchar(100)
Lo scopo dei campi credo sia assolutamente evidente: "id" è l'identificativo univoco; nel campo "username" andremo a registrare il nome dell'utente e, per finire, nel campo "password" andremo a salvare le password dopoaverle passate attraverso la funzione md5().
Ai fini di questo articolo non è rilevante creare la pagina di iscrizione degli utenti. Lasciamo avoi il comito, quindi, di popolare il database con qualche dato di test.
Il modulo HTML
Per creare un modulo di login abbiamo bisogno, ovviamente, di un form HTML. Vediamo di seguito il codice del nostro modulo:
<form method="post" id="modulo_login" /> <table border="0"> <tr><td>Username:</td><td><input name="username" type="text" id="username" maxlength="10" style="width: 250px"/></td></tr> <tr><td>Password:</td><td><input name="password" type="password" id="password" maxlength="10" style="width: 250px"/></td></tr> <tr><td><input type="submit" id="submit" value="Entra" /></td><td><div id="messaggio"></div></td></tr> </table> </form>
Un pizzico di CSS
Al fine di dare un aspetto gradevole al nostro lavoro abbiamo bisogno di qualche riga di CSS.
Ovviamente tutti gli aspetti legati al foglio di stile possono essere adattati a vostro piacimento:
div,
input {
font-family: arial, verdana;
font-size: 12px;
}
.corretto,
.errore {
padding: 3px;
text-align: center;
}
.corretto,
.errore {
width: auto;
font-weight: bold;
border: 1px solid #349534;
background: #C9FFCA;
color: #008000;
}
.errore {
border: 1px solid #CC0000;
background: #F7CBCA;
color: #CC0000;
}
