Finder 00 - M Frébourg

Formulaire d’authentification

Intro

Livrable gitlab : finder/mission00/…

réaliser un diagramme d’activité client serveur des parties 1,2 et 3. On pourra utiliser https://app.diagrams.net/

partie 1 – HTML form

Livrable gitlab : finder/mission00/…

réaliser une base de données finder avec une table user, colonnes email, mot de passe
insérer quelques utilisateurs
réaliser un formulaire email/mdp sur connexion.html
vérifier le couple email/mdp sur une page verification.php
rediriger l’utilisateur sur le formulaire en cas d’échec avec un message lui indiquant que son login ou son mot de passe ne sont pas bon.

Exemple de code

<?php session_start();?>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<?php

if(isset($_SESSION['erreur']) && $_SESSION['erreur'] ){
  //echo "erreur";
  echo '<script>
    $( document ).ready(function() {
    $(".form-control").addClass("is-invalid");
    });
    </script>';
}
$_SESSION['erreur']=false;
?>

<div class="container">
<form method="get" action="verification.php">
    <div class="form-group">
      <label for="exampleInputEmail1">nom</label>
      <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
       <div class="invalid-feedback">
          utilisateur et/ou mot de passe invalide
        </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">mdp</label>
      <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>





</html>

<?php session_start();

if(
   isset($_GET['email']) 
&& isset($_GET['password'])
){
   //echo "ok";
   $dsn='mysql:dbname=zaza;host=127.0.0.1';
$user='root';
$password='';
try{
    $dbh=new PDO($dsn,$user,$password); 
}catch(PDOException $e){
    echo'Connexion échouée:'.$e->getMessage(); 
}
   $sql = "SELECT count(*) FROM user WHERE email=:email 
   AND password=PASSWORD(:password)";
   //echo $sql;
   $resultats = $dbh->prepare($sql);
   $email = $_GET['email'];
   $password = $_GET['password'];
   $resultats->bindParam(":email", $email);
   $resultats->bindParam(":password", $password);
   $resultats->execute();  
   $number_of_rows = $resultats->fetchColumn(); 
   //echo $number_of_rows;

   if($number_of_rows == 1){
      echo "ok";
   }
   else{
    $_SESSION['erreur']=true;
    header('Location: http://localhost/finder1/connexion.php');
   }
}else{
        $_SESSION['erreur']=true;
        header('Location: http://localhost/finder1/connexion.php');
}

partie 2 – JQuery et Ajax

Livrable gitlab : finder/mission00/…

modifier le formulaire pour faire un appel ajax avec JQ de votre page PHP.
la page PHP renverra un code HTTP 200 en cas de succès ou 403 en cas d’erreur sans aucun autre message. https://www.php.net/manual/fr/function.http-response-code.php
En cas d’erreur, on indiquera à l’utilisateur que son login ou mot de passe ne sont pas bon grâce à JQ.

Exemple de code

<?php session_start();?>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<?php
/*
if(isset($_SESSION['erreur']) && $_SESSION['erreur'] ){
  //echo "erreur";
  echo '<script>
    $( document ).ready(function() {
    $(".form-control").addClass("is-invalid");
    });
    </script>';
}
$_SESSION['erreur']=false;
*/
?>

<div class="container">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
       <div class="invalid-feedback">
          utilisateur et/ou mot de passe invalide
        </div>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    
    <button  class="btn btn-primary">Submit</button>
  
</div>
<div id="result"></div>

<script>
$(document).ready(function () {

    $('.btn').click(function () {
        $("#result").html("");
        let email=$( "#exampleInputEmail1" ).val();
        let password=$( "#exampleInputPassword1" ).val();
        $.ajax("http://localhost/finder1/verification2.php",
            {
                type: "GET",
                data: 'email=' + email + '&password=' + password,
                success: function (data, textStatus, jqXHR) {
                    console.log(jqXHR.status);
                    $("#result").html(data);
                },
                error: function (xhr,status,error) {
                    console.log(xhr.status);
                }
                
            });
    });
});
</script>

</html>

<?php session_start();

if(
   isset($_GET['email']) 
&& isset($_GET['password'])
){
   //echo "ok";
   $dsn='mysql:dbname=zaza;host=127.0.0.1';
$user='root';
$password='';
try{
    $dbh=new PDO($dsn,$user,$password); 
}catch(PDOException $e){
    echo'Connexion échouée:'.$e->getMessage(); 
}
   $sql = "SELECT count(*) FROM user WHERE email=:email 
   AND password=PASSWORD(:password)";
   //echo $sql;
   $resultats = $dbh->prepare($sql);
   $email = $_GET['email'];
   $password = $_GET['password'];
   $resultats->bindParam(":email", $email);
   $resultats->bindParam(":password", $password);
   $resultats->execute();  
   $number_of_rows = $resultats->fetchColumn(); 
   //echo $number_of_rows;

   if($number_of_rows == 1){
      http_response_code(200);
   }
   else{
      http_response_code(403);
    //$_SESSION['erreur']=true;
    //header('Location: http://localhost/finder1/connexion.php');
   }
}else{
   http_response_code(403);
        //$_SESSION['erreur']=true;
        //header('Location: http://localhost/finder1/connexion.php');
}

partie 3 – VueJS et Ajax

Livrable gitlab : finder/mission00/…

modifier le formulaire pour faire un appel ajax avec VueJS de votre page PHP.
en cas d’erreur, on indiquera à l’utilisateur que son email ou mot de passe ne sont pas bon grâce à VueJS.

Exemple de code

<!doctype html>
<html lang="fr">

<head>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<div id="app">
<b-container>
<input v-model="idc" placeholder="numéro de chambre"/>

<div class="container"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <div class="invalid-feedback"> utilisateur et/ou mot de passe invalide </div> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> 
<b-btn variant="primary" v-on:click="ajax(idc)">valider</b-btn>

 </div>
<p>Le message est : {{ info }}</p>
</b-container>
</div>

<script>
var app = new Vue({
el: '#app',
data() {
return {
idc: 0, 
info: null,
message: ''
}
},
methods: {
ajax: function (idc, event) {
axios({
method: 'get',
url: 'http://localhost/finder1/verification2.php/chambre?idc='+idc,
responseType: 'json',
})
.then(user => {
            console.log('ok');
      })
.catch(function (error) {
            console.log('error: ', error);           
     })

}
}
})</script>