mmm se posso suggerire l'utilizzo di una libreria come MooTools, io, lo farei così:
Codice PHP:
<html>
<head>
<script type = "text/javascript" src = "js/mootools-1.2.4-core-nc.js"></script>
<script type = "text/javascript" src = "js/login.js"></script>
</head>
<body>
<!-- Pannello di Login, qui starà a te fare in modo che l'opacity sia impostato a 1 quando l'utente è
già loggato, al'apertura della pagina -->
<div id = "LoginPanel" style = "opacity: 1; filter: alpha(opacity=100); visibility: visible;">
<form id = "LoginForm" action = "scripts/login.php">
<label for="UsrName">
Nome Utente:
</label>
<input type = "text" id = "UsrName" name = "username" autocomplete = "off" />
</p>
<label for="Pwd">
Password:
</label>
<input type = "password" name = "password" autocomplete = "off" />
</p>
<input type = "submit" value = "Accedi" />
</p>
</form>
</div>
<!-- Pannello dell Utente autenticatosi, qui starà a te fare in modo che l'opacity sia impostato a 0 e
visibility a hidden quando l'utente è già loggato, al'apertura della pagina -->
<div id = "UserPanel" style = "opacity: 0; filter: alpha(opacity=0); visibility: hidden;">
<ul>
<h3>Menù utente</h3>
[*]
<a href = "scripts/logout.php" id = "LogoutLnk">Log Out</a>
[/list]
</div>
</body>
</html>
Ora se vuoi implementare MooTools è piuttosto semplice il da farsi:
Codice PHP:
var idLoginPanel = "LoginPanel",
idLoginForm = "LoginForm",
idUserPanel = "UserPanel",
idLogoutLnk = "LogoutLnk";
//Al caricamento del DOM esegue la funzione Init
window.addEvent("load" , Init);
function SubmitForForm(e){
if(e) e.preventDefault();
//Ottengo l'oggetto Request.JSON
var rqst = this.retrieve("json");
rqst.get({
"username" : this.getElement('input[name="username"]').get("value"),
"password" : this.getElement('input[name="password"]').get("value"),
"json" : true
});
}
function ClickForLnk(e){
if(e) e.preventDefault();
//Come sopra
var rqst = this.retrieve("json");
rqst.get({
'json' : true
});
}
function Init(e){
//Imposto gli eventi per la form e per il link
var theForm = $(idLoginForm);
theForm.addEvent("submit", SubmitForForm);
//Creo un oggetto Request.JSON per comunicare con AJAX col server e lo salvo direttemente nell'oggetto delle Element Form, in modo da ottenerlo durante il submit e riutilizzarlo
var rqst = new Request.JSON({
'url': theForm.get('action'), //Imposto come action della richiesta ajax l'action della form
'onSuccess': CallbackSubmit, //Vedi sotto
'onFailure': function(){ //Se si verifica un errore lo notifico
alert("Si e' verificato un errore");
throw "Non e' stato possibile comunicare con il server o ottenere il file richiesto";
}
});
theForm.store("json", rqst);
//Faccio lo stesso lavoro per il link di log out
var theLnk = $(idLogoutLnk);
theLnk.addEvent("click", ClickForLnk);
rqst = new Request.JSON({
'url': theLnk.get("href"),
'onSuccess': CallbackClick, //Vedi sotto
'onFailure': function(){ //Se si verifica un errore lo notifico
alert("Si e' verificato un errore");
throw "Non e' stato possibile comunicare con il server o ottenere il file richiesto";
}
});
theLnk.store("json", rqst);
}
//La funzione che viene chiamata alla conclusione della richiesta AJAX
var CallbackSubmit = function(obj){
if(!obj){
alert("Si e' verificato un errore");
throw "Comunicazione col server non riuscita: risposta dal server illeggibile";
}
if(obj.success)
SetUserPanel();
else
alert(obj.error);
}
//La funzione che viene chiamata alla conclusione della richiesta AJAX
var CallbackClick = function(obj){
if(!obj){
alert("Si è verificato un errore");
throw "Comunicazione col server non riuscita: risposta dal server illeggibile";
}
if(obj.success)
SetLoginPanel();
else
alert(obj.error);
}
//Effettuo l'effetto di fade out sul pannello di Login ed effettuo l'effetto di fade in sul pannello dell'utente
var SetUserPanel = function(){
$(idLoginPanel).get("tween").start("opacity", 0).chain(function(){
$(idUserPanel).tween('opacity', 1);
});
}
//e Vice versa
var SetLoginPanel = function(){
$(idUserPanel).get("tween").start("opacity", 0).chain(function(){
$(idLoginPanel).tween('opacity', 1);
});
}
I due file PHP sono dei normali file di controllo per il submit della form login.php e un file che cancella i dati dalla sezione, l'unica cosa ceh devi ricordarti è che se passano tra i parametri POST il primo e GET il secondo il valore json = true, allora non devi fare redirezione ma inviare un oggetto JSON.
Un esempio:
Codice PHP:
//Effettui i tuoi controlli sui dati passati e salvi in $success il valore boolean del risultato del login, mentre in $error l'errore se è accaduto, niente altrimenti
if(!empty($_REQUEST['json'])){
if($success)
echo '{"success" : true}';
else
echo '{"success" : false, "error" : "'.addcslashes($error, "\"").'"}';
exit(0);
}
header("Location: ../login.html");
Una cosa di questo tipo, spero di essere stato chiaro...
...
Rispondi quotando
