Login con Ajax

[stefano86]

Ciao a tutti, attualmente ho una pagina .php (la View) (che contiene principalmente codice html) che contiene un form per il login e un form per la registrazione.
Nell'action del form richiamo un file .php (il file pubblico) che crea una istanza di un controller specifico per gestire gli input dei due form.
Questo controller prende i dati inseriti dall'utente, li elabora, controlla che i dati siano corretti ed esegue una insert (caso registrazione) o una select (caso login). Se ci sono errori passa tali stringhe di errori alla vista che li stamperà a video.
Quello che vorrei fare ora è usare Ajax (mai usato prima, e per ora, leggendo un pò su Internet, non c'ho capito quasi nulla) per rendere questi form migliori, cioè vorrei che il controllo dei dati e il loro risultato (dati corretti o meno) fosse fatto da Ajax, in modo asincrono.
Non so come iniziare.. Mi aiutate?


Quello che ho ora è:


View/LoginRegistrazione.php

<form action="../public/index.php" method="post" id="modLogin_form" onSubmit="checkLogin()">
    Username:
    <input type="text" name="login_username" id="lu"/>


    Password:
    <input type="password" name="login_password" id="lp"/>


    <input type="submit" value="Login" name="login-submit" onClick="checkLogin()"/>
</form>


<form action="../public/indexSignup.php" id="modSignup_form" method="post" onSubmit="checkSignup()">
    Username:
    <input type="text" name="reg_username" id="ru"/>
    
    Password:
    <input type="password" name="reg_password" id="rp" />
    
    E-mail:
    <input type="text" name="reg_email" id="re" />
    
    <input type="submit" value="Sign up" name="reg-submit" onClick="checkSignup()"/>
</form>

public/index.php

<?php 
include_once '../Controller/LoginController.php';


$controller = new LoginController();
$view = $controller->invoke();
$view->render();

public/indexSignup.php

<?php 
include_once '../Controller/SignupController.php';


$controller = new SignupController();
$view = $controller->invoke();
$view->render();

Controller/LoginController.php

class LoginController {
   public $user;
   public $userRepository;
   public $view;   
   //Crea un array per gli errori
   public $errorsL;
   
   public function __construct() {  
      $this->userRepository = new UserRepository();
      $this->errorsL = array();
      $this->view = new View('LoginSignup');
      $db = Database::getInstance(); 
   } 
   
   public function checkData($username, $password) {
      preg_match("/[\|\(\)<>%\*+={}@#']|(=)+(!)|[-]{2}/", $username, $arrayU);
      preg_match("/[\|\(\)<>%\*+={}@#']|(=)+(!)|[-]{2}/", $password, $arrayP);
      if($arrayU) {
         $this->errorsL['login-incorrectUsername'] = "Incorrect username.";
         $this->view->setData('errorsL', $this->errorsL);
         return false;
      }
      else if($arrayP) {
         $this->errorsL['login-incorrectPassword'] = "Incorrect password.";
         $this->view->setData('errorsL', $this->errorsL);
         return false;
      }
      else if($username === "" || $password === "") {
         $this->errorsL['login-empty'] = "Some field are empty, please try again.";
         $this->view->setData('errorsL', $this->errorsL);
         return false;
      }
      else {
         $this->user = $this->userRepository->findByUsername($username);
         if($this->user != NULL) {
            if($this->user->getPassword() === $password) {
               return true;
            }
            else {
               $this->errorsL['login-incorrectPassword'] = "Incorrect password.";
               $this->view->setData('errorsL', $this->errorsL);
               return false;
            }
         }
         else { 
            $this->errorsL['login-unregisteredUser'] = "There is no user with this username.";
            $this->view->setData('errorsL', $this->errorsL);
            return false;
         }
      }
   }


   public function checkLogin() {
      if(isset($_POST['login-submit'])) {
         if(isset($_POST['login_username']) && isset($_POST['login_password'])) {
            $username = $_POST['login_username'];
            $password1 = $_POST['login_password'];
            $password = addslashes($password1);
            if($this->checkData($username, $password)) {
               $_SESSION['logged_in'] = 1;
               $_SESSION['username'] = $username;
               header("Location: ../public/home.php", true, 302);             
            }
         }
         else { 
            $this->errorsL['login-empty'] = "Some fields are empty.";
            $this->view->setData('errorsL', $this->errorsL); 
         }
      }
      else { 
         return;
      }
   } 
   
   public function invoke() {
      $this->checkLogin(); 
      return $this->view;
   }
   
}

Controller/SignupController.php

class SignupController {
   
   public $user;
   public $userRepository;
   //Crea un array per gli errori e uno per i successi
   public $errorsR;
   public $successesR;
   public $view;   
   
   public function __construct() {  
      $this->userRepository = new UserRepository();
      $this->errorsR = array();
      $this->successesR = array();
      $this->view = new View('LoginSignup');
      $db = Database::getInstance();
   } 
   
   public function checkData($username, $password, $email) {
           //code..
   }


   public function checkUsername($username) {
           //code..
   }   
   
   public function checkPassword($password) {
           //code.. 
   }


   public function checkEmail($email) {
           //code..
   }   
   
   public function checkSignup() {
      
      if(isset($_POST['reg-submit'])) {
         
         if(isset($_POST['reg_username']) && isset($_POST['reg_password']) && isset($_POST['reg_email'])) {
            $username = $_POST['reg_username'];
            $password1 = $_POST['reg_password'];
            $email = $_POST['reg_email'];
            $password = addslashes($password1);
            
            if($this->checkData($username, $password, $email)) {
               $db = Database::getInstance();               
               
               $this->user = new User();
               $this->user->setUsername($username);
               $this->user->setEmail($email);
               $this->user->setPassword($password);
               $this->user->save();
               
               $this->successesR['reg-completed'] = "Registration completed successfully.";
               $this->view->setData('successesR', $this->successesR);
            }
         }
         else { 
            $this->errorsR['empty-field'] = "Some fields are incorrect.";
            $this->view->setData('errorsR', $this->errorsR); 
         }
      }
      else { 
         return;
      }      
   } 
   
   public function invoke() {
      $this->checkSignup();
      return $this->view; 
   }
}

Poi nel file .js ho sempre i vari controlli. Quindi controllo sia lato server che lato client.


Come aggiungo il codice per Ajax, non ho capito...

[cavicchiandrea]

http://www.html.it/guide/guida-ajax/ (ajax js) http://www.html.it/pag/18403/jquery-ajax/ (jquery ajax) se non conosci jquery http://www.html.it/guide/guida-jquery/

[stefano86]

Anzi, forse è meglio la registrazione.
Ho provato a fare così ma non fa nulla.


Nel file .js:

function setXMLHttpRequest() {
   var xhr = null;
   if(window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();
   }
   else if(window.ActiveXObject) {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
}


var xhrObj = setXMLHttpRequest();


function checkUsr(usr) {
   var url = "../indexSignup.php?checkusr=" + usr;
   xhrObj.open("GET", url, true);
   xhrObj.onreadystatechange = updateUsr;
   xhrObj.send(null);
}


function updateUsr() {
   if(xhrObj.readyState === 4) {
      var risp = xhrObj.responseText;
      document.getElementById("reg_username").innerHTML = risp;
   }
}

View/LoginSignup.php

<form action="../public/index.php" method="post" id="modLogin_form" onSubmit="checkLogin()">
	Username:
	<input type="text" name="login_username" id="lu"/>


	Password:
	<input type="password" name="login_password" id="lp"/>


	<input type="submit" value="Login" name="login-submit" onClick="checkLogin()"/>
</form>


<?php
  if(isset($ajax)) {
    if(count($ajax) > 0) {
       print_r($ajax);
    }
  } 
?> 
<form action="../public/indexSignup.php" id="modSignup_form" method="post" onSubmit="checkSignup()">
	Username:
	<input type="text" name="reg_username" id="ru" onChange="checkUsr(this.value);"/>
	
	Password:
	<input type="password" name="reg_password" id="rp" />
	
	E-mail:
	<input type="text" name="reg_email" id="re" />
	
	<input type="submit" value="Sign up" name="reg-submit" onClick="checkSignup()"/>
</form>

Controller/SignupController.php

class SignupController {
   
   public $user;
   public $userRepository;
   //Crea un array per gli errori e uno per i successi
   public $errorsR;
   public $successesR;
   public $view; 
   public $ajax;
   
   public function __construct() {  
      $this->userRepository = new UserRepository();
      $this->errorsR = array();
      $this->successesR = array();
      $this->ajax = array();  
      $this->view = new View('LoginSignup');
      $db = Database::getInstance();
   } 
   
   public function checkData($username, $password, $email) {
   		//code..
   }


   public function checkUsername($username) {
   		//code..
   }   
   
   public function checkPassword($password) {
   		//code.. 
   }


   public function checkEmail($email) {
   		//code..
   }   
   
   public function checkSignup() {
      
      if(isset($_POST['reg-submit'])) {
         
         if(isset($_POST['reg_username']) && isset($_POST['reg_password']) && isset($_POST['reg_email'])) {
            $username = $_POST['reg_username'];
            $password1 = $_POST['reg_password'];
            $email = $_POST['reg_email'];
            $password = addslashes($password1);
            
            if($this->checkData($username, $password, $email)) {
               $db = Database::getInstance();               
               
               $this->user = new User();
               $this->user->setUsername($username);
               $this->user->setEmail($email);
               $this->user->setPassword($password);
               $this->user->save();
               
               $this->successesR['reg-completed'] = "Registration completed successfully.";
               $this->view->setData('successesR', $this->successesR);
            }
         }
         else { 
            $this->errorsR['empty-field'] = "Some fields are incorrect.";
            $this->view->setData('errorsR', $this->errorsR); 
         }
      }
      else { 
         return;
      }      
   } 
   
   public function checkAjax() {
      if(isset($_GET['checkusr'])){
          $usr = $_GET['checkusr'];
          $risp = $this->model->compareUsr($usr);
          $this->user = $this->userRepository->findByUsername($usr);
          if($this->user === NULL) {
            $this->ajax['err'] = "Username disponibile.";
            $this->view->setData('ajax', $this->ajax);              
          }
          else if($risp  > 0) {
            $this->ajax['succ'] = "Username non disponibile.";
            $this->view->setData('ajax', $this->ajax); 
          }
      }
   }


   public function invoke() {
      if(isset($_GET['checkusr'])) {
         $this->checkAjax();
      } 
      $this->checkSignup();
      return $this->view; 
   }
}

[cavicchiandrea]

reg_username è un input pertanto devi mettere .value document.getElementById("reg_username").value=risp; e resta sottinteso che la pagina indexSignup.php deve stampare qualcosa a video (con echo) errori o conferme

[stefano86]

reg_username è un input pertanto devi mettere .value document.getElementById("reg_username").value=risp; e resta sottinteso che la pagina indexSignup.php deve stampare qualcosa a video (con echo) errori o conferme

Grazie per l'aiuto, ho modificato il .value. Ma la mia pagina indexSignup.php non stampa nulla, quella che si occupa di stampare è la vista LoginSignup.php...

[cavicchiandrea]

Allora usa LoginSignup.php

[stefano86]

E infatti l'ho fatto ma niente.. in realtà penso che il problema sia a monte. Guardando la barra degli indirizzi, mi trovo sempre in indexSignup.php, non sono mai in indexSignup.php?checkusr=... quindi non entra proprio nell'if..

[cavicchiandrea]

Non so che dirti non conoscendo le classi php non conosco pregi difetti e/o caratteristiche, ajax elimina il ricarico della pagina pagina1.php invia dati a pagina2.php che mostrata a video un risultato, con ajax la chiamata avviene in background ma il processo è identico.
Se le tue pagine con le classi php fanno uguale ajax può essere utilizzato e funziona, altrimenti non lo puoi usare

[stefano86]

Ho modificato queste due parti di codice. Ora la console di Chrome mi da questo errore:
GET http://localhost/.. ./index.php?checkusr=john 404 (Not Found) javascript.js:477
checkUsr javascript.js:477
onchange index.php:82


XHR finished loading: "http://localhost/.. ./index.php?checkusr=john". javascript.js:477
checkUsrjavascript.js:477
onchange




JAVASCRIPT

function setXMLHttpRequest() {
   var xhr = null;
   //Browser standard con supporto nativo (per tutti i browser tranne Explorer)
   if(window.XMLHttpRequest) {
     xhr = new XMLHttpRequest();
   }
   //MSIE 6 con ActiveX (per Explorer)
   else if(window.ActiveXObject) {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
}




var xhrObj = setXMLHttpRequest();




function checkUsr(usr) {
   var url = "public/index.php?checkusr=" + usr;
   //var url = "../indexSignup.php?checkusr=" + usr;
   xhrObj.open("GET", url, true);
   xhrObj.onreadystatechange = updateUsr;
   xhrObj.send(null); RIGA 477
}




function updateUsr() {
   if(xhrObj.readyState === 4) {
      var risp = xhrObj.responseText;
      document.getElementById("reg_username").innerHTML = risp;
   }
}

PHP

   public function checkAjax() {
      if(isset($_GET['checkusr'])){
          $usr = $_GET['checkusr'];
          //$risp = $this->model->compareUsr($usr);
          $this->user = $this->userRepository->findByUsername($usr);
          if($this->user === NULL) {
            $this->ajax['succ'] = "Username disponibile.";
            $this->view->setData('ajax', $this->ajax);              
          }
          else if($risp  > 0) {
            $this->ajax['err'] = "Username non disponibile.";
            $this->view->setData('ajax', $this->ajax); 
          }
      }
   }   
   
   public function invoke() {
      if(isset($_GET['checkusr'])) {
         $this->checkAjax();
         //session_destroy();
      }       
      $this->checkLogin(); //Esegue i controlli sui dati del form di login
      $this->checkSignup();
      return $this->view;
   }

[cavicchiandrea]

Non so se il problema è questo ma ricordati che con Ajax non puoi caricare la stessa pagina, e comunque non andare per tentativi perdi solo tempo ristudiati il funzionamento/logica di Ajax nei link che t'ho segnalato