Formulaire de login avec HTML/CSS, PHP et MySQL

Dans ce tutoriel, nous vous montrons comment créer un formulaire de login en utilisant l'extension HTML, PHP et MySQL. Ce formulaire d'authentification est utilisé quand un utilisateur doit soumettre un formulaire pour l'autoriser à accéder à son compte par exemple.

Quatre étapes pour créer un formulaire de connexion :

1- Créer un fichier HTML contenant la structure du formulaire;
2- Créer un fichier CSS pour définir le style;
3- Créer un fichier de login PHP qui va vérifie les champs de formulaire si ils correspondent aux valeurs de la table dans la base de données;
4- Créer un fichier PHP de la page principale et de la déconnexion.

Etape 1:

Premièrement, on va créer une page HTML login.php.

login.php:

<html>
 <head>
 <meta charset="utf-8">
 <!-- importer le fichier de style -->
 <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
 </head>
 <body>
 <div id="container">
 <!-- zone de connexion -->
 
 <form action="verification.php" method="POST">
 <h1>Connexion</h1>
 
 <label><b>Nom d'utilisateur</b></label>
 <input type="text" placeholder="Entrer le nom d'utilisateur" name="username" required>

 <label><b>Mot de passe</b></label>
 <input type="password" placeholder="Entrer le mot de passe" name="password" required>

 <input type="submit" id='submit' value='LOGIN' >
 <?php
 if(isset($_GET['erreur'])){
 $err = $_GET['erreur'];
 if($err==1 || $err==2)
 echo "<p style='color:red'>Utilisateur ou mot de passe incorrect</p>";
 }
 ?>
 </form>
 </div>
 </body>
</html>

Etape 2:

Le style va ajouter la mise en forme à notre fenêtre de connexion.

style.css:

body{
 background: #67BE4B;
}
#container{
 width:400px;
 margin:0 auto;
 margin-top:10%;
}
/* Bordered form */
form {
 width:100%;
 padding: 30px;
 border: 1px solid #f1f1f1;
 background: #fff;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#container h1{
 width: 38%;
 margin: 0 auto;
 padding-bottom: 10px;
}

/* Full-width inputs */
input[type=text], input[type=password] {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 display: inline-block;
 border: 1px solid #ccc;
 box-sizing: border-box;
}

/* Set a style for all buttons */
input[type=submit] {
 background-color: #53af57;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 cursor: pointer;
 width: 100%;
}
input[type=submit]:hover {
 background-color: white;
 color: #53af57;
 border: 1px solid #53af57;
}

Aperçu:

Etape 3:

Ensuite pour valider le formulaire, il nous faut un fichier pour vérifier les champs de ce dernier, mais avant n'oubliez pas de créer la table 'utilisateur' dans la base de données :

verification.php:

<?php
session_start();
if(isset($_POST['username']) && isset($_POST['password']))
{
 // connexion à la base de données
 $db_username = 'root';
 $db_password = 'mot_de_passe_bdd';
 $db_name = 'nom_bdd';
 $db_host = 'localhost';
 $db = mysqli_connect($db_host, $db_username, $db_password,$db_name)
 or die('could not connect to database');
 
 // on applique les deux fonctions mysqli_real_escape_string et htmlspecialchars
 // pour éliminer toute attaque de type injection SQL et XSS
 $username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username'])); 
 $password = mysqli_real_escape_string($db,htmlspecialchars($_POST['password']));
 
 if($username !== "" && $password !== "")
 {
 $requete = "SELECT count(*) FROM utilisateur where 
 nom_utilisateur = '".$username."' and mot_de_passe = '".$password."' ";
 $exec_requete = mysqli_query($db,$requete);
 $reponse = mysqli_fetch_array($exec_requete);
 $count = $reponse['count(*)'];
 if($count!=0) // nom d'utilisateur et mot de passe correctes
 {
 $_SESSION['username'] = $username;
 header('Location: principale.php');
 }
 else
 {
 header('Location: login.php?erreur=1'); // utilisateur ou mot de passe incorrect
 }
 }
 else
 {
 header('Location: login.php?erreur=2'); // utilisateur ou mot de passe vide
 }
}
else
{
 header('Location: login.php');
}
mysqli_close($db); // fermer la connexion
?>

Etape 4:

Dernière étape, le serveur vérifie si les informations fournies sont correctes, et si c'est le cas, il crée une session au nom d'utilisateur et se redirige vers la page principale.php.

principale.php:

<html>
 <head>
 <meta charset="utf-8">
 <!-- importer le fichier de style -->
 <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
 </head>
 <body style='background:#fff;'>
 <div id="content">
 <!-- tester si l'utilisateur est connecté -->
 <?php
 session_start();
 if($_SESSION['username'] !== ""){
 $user = $_SESSION['username'];
 // afficher un message
 echo "Bonjour $user, vous êtes connecté";
 }
 ?>
 
 </div>
 </body>
</html>

Bonus:

Vous allez poser la question: comment se déconnecter ? C'est facile, on rajoute un bouton pour se déconnecter ainsi qu'un petit morceau de code php qui détruit la session en cours.

 
<html>
 <head>
 <meta charset="utf-8">
 <!-- importer le fichier de style -->
 <link rel="stylesheet" href="style.css" media="screen" type="text/css" />
 </head>
 <body style='background:#fff;'>
 <div id="content">
 
 <a href='principale.php?deconnexion=true'><span>Déconnexion</span></a>
 
 <!-- tester si l'utilisateur est connecté -->
 <?php
 session_start();
 if(isset($_GET['deconnexion']))
 { 
 if($_GET['deconnexion']==true)
 { 
 session_unset();
 header("location:login.php");
 }
 }
 else if($_SESSION['username'] !== ""){
 $user = $_SESSION['username'];
 // afficher un message
 echo "<br>Bonjour $user, vous êtes connectés";
 }
 ?>
 
 </div>
 </body>
</html>

Un problème rencontré lors de la soumission d'un formulaire est qu'on peut avoir plusieurs clics et donc plusieurs exécutions de la même opération de vérification, redirection, etc. ça peut causer des anomalies et le serveur génère des erreurs et s’arrête.