Il s’agit d’un tutoriel pour créer un système de connexion à l’aide de PHP, MySQL et HTML. Votre site Web doit être dynamique et vos visiteurs doivent y avoir un accès instantané. Par conséquent, ils veulent se connecter autant de fois que possible. Le système d’authentification de connexion est très courant pour toute application Web. Il permet aux utilisateurs enregistrés d’accéder au site Web et aux fonctionnalités réservées aux membres. Il est également utile lorsque nous voulons stocker des informations pour les utilisateurs. Cela couvre tout, des sites de vente en ligne, aux sites éducatifs et aux sites d’adhésion, etc.
Gestion et sécurité des systèmes d’entreprise | Inscrivez-vous à un cours gratuit*
*Lien d’affiliation. Voir Conditions d’utilisation.
Ce tutoriel est divisé en 5 parties.
Table des matières
- Exigences
- Système d’inscription
- Système de connexion
- Page de bienvenue
- Script de déconnexion
1) Exigences pour construire un système de connexion PHP
Pour suivre avec succès ce tutoriel et construire un système de connexion PHP, vous devez posséder et être compétent dans les éléments suivants :
- Un serveur qui prend en charge PHP pour exécuter votre code
- Une connaissance et une familiarité avec HTML et CSS
- Une base de données MySQL installée sur votre appareil, et la connaissance de son utilisation
- Capacité à ajouter toutes les mesures de sécurité correctes à votre système de connexion
Si vous avez toutes ces exigences de base et ces ensembles de connaissances, alors vous êtes prêt à passer aux étapes suivantes pour apprendre comment construire votre système de connexion PHP.
2) Mise en place d’un système d’inscription
Dans cette partie, nous allons créer un système d’inscription qui permet aux utilisateurs de créer un nouveau compte. Notre première étape est de créer un formulaire d’inscription en HTML. Le formulaire est assez simple à créer. Il demande uniquement un nom, une adresse e-mail, un mot de passe et une confirmation de mot de passe. Les adresses e-mail seront uniques pour chaque utilisateur. Il n’est pas permis d’avoir plusieurs comptes pour la même adresse e-mail. Un message d’erreur s’affichera pour les utilisateurs qui tentent de créer plusieurs comptes avec la même adresse e-mail.
Étape 1 : Création du formulaire d’inscription en HTML
Nous allons créer un fichier PHP nommé register.php contenant le code suivant. Il s’agit d’un formulaire HTML simple avec une validation de base. Si vous n’êtes pas familier avec HTML, vous pouvez le trouver sur de nombreux sites en ligne qui proposent des modèles de formulaires de connexion html5 prêts à l’emploi.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Register</h2>
<p>Please fill this form to create an account.</p>
<form action="" method="post">
<div class="form-group">
<label>Full Name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" class="form-control" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary" value="Submit">
</div>
<p>Already have an account? <a href="login.php">Login here</a>.</p>
</form>
</div>
</div>
</div>
</body>
</html>La sortie du formulaire HTML ci-dessus ressemblera à ceci.
Tous les champs de saisie sont requis en ajoutant l’attribut "required" qui est l’attribut HTML par défaut. L’utilisation de type="email" validera l’adresse e-mail fournie par les utilisateurs et affichera une erreur si l’adresse e-mail n’est pas valide. Pour le formulaire d’inscription, nous avons utilisé bootstrap pour un développement rapide. Si vous souhaitez gagner du temps sur le code HTML, vous pouvez toujours utiliser certains modèles html5 gratuits pour votre projet.
Étape 2 : Création de la table de base de données MySQL
Vous devrez créer une nouvelle base de données avec le nom qui vous convient. Ensuite, veuillez exécuter la requête SQL ci-dessous pour créer la table des utilisateurs dans votre base de données MySQL nouvellement créée.
CREATE TABLE `users` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(75) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;Étape 3 : Création du fichier de configuration de la base de données
Maintenant, nous avons créé la table des utilisateurs. Créons un nouveau fichier PHP nommé config.php pour se connecter à la base de données MySQL. Collez le code suivant dans le fichier config.php et changez le nom de la base de données selon votre choix lors de la création de la base de données.
Étape 4 : Création d’un fichier de session
Créons un fichier nommé session.php. Dans ce fichier, nous démarrerons la session et vérifierons si un utilisateur est déjà connecté ; si c’est le cas, nous redirigerons l’utilisateur vers le fichier welcome.php.
Étape 5 : Créer un formulaire d’inscription en PHP
Enfin, il est temps de créer un code PHP qui permet aux utilisateurs d’inscrire leurs comptes dans le système. Ce code PHP alertera les utilisateurs en cas d’erreur si un utilisateur est déjà enregistré avec la même adresse e-mail.
Remplacez le code suivant dans le fichier register.php.
prepare("SELECT * FROM users WHERE email = ?")) {
$error = '';
// Liage des paramètres (s = chaîne, i = entier, b = blob, etc), dans notre cas le nom d'utilisateur est une chaîne donc nous utilisons "s"
$query->bind_param('s', $email);
$query->execute();
// Stocker le résultat pour vérifier si le compte existe dans la base de données.
$query->store_result();
if ($query->num_rows > 0) {
$error .= 'The email address is already registered!
';
} else {
// Valider le mot de passe
if (strlen($password ) < 6) {
$error .= 'Password must have atleast 6 characters.
';
}
// Valider le mot de passe de confirmation
if (empty($confirm_password)) {
$error .= 'Please enter confirm password.
';
} else {
if (empty($error) && ($password != $confirm_password)) {
$error .= 'Password did not match.
';
}
}
if (empty($error) ) {
$insertQuery = $db->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?);");
$insertQuery->bind_param("sss", $fullname, $email, $password_hash);
$result = $insertQuery->execute();
if ($result) {
$error .= 'Your registration was successful!
';
} else {
$error .= 'Something went wrong!
';
}
}
}
}
$query->close();
$insertQuery->close();
// Fermer la connexion à la base de données
mysqli_close($db);
}
?>
Sign Up
Register
Please fill this form to create an account.
Une fois que l’utilisateur clique sur le bouton de soumission, il vérifiera si $_SERVER["REQUEST_METHOD"] == "POST" et si la variable $_POST['submit'] a été définie. Pour des raisons de sécurité, nous suggérons toujours de ne pas stocker le mot de passe en texte clair dans la base de données. Nous avons utilisé la fonction password_hash() qui crée un nouveau hachage de mot de passe en utilisant un algorithme de hachage unidirectionnel fort.
Le script PHP ci-dessus validera qu’aucun utilisateur n’est enregistré avec la même adresse e-mail et validera également le mot de passe. Après confirmation de la validation, nous stockons les informations fournies par l’utilisateur dans la table des utilisateurs et avertissons l’utilisateur que l’inscription a été réussie.
3) Construction d’un système de connexion
Dans cette partie, nous allons créer un formulaire de connexion permettant aux utilisateurs d’accéder à la zone restreinte du système. Dans notre cas, la zone restreinte est une page de bienvenue que nous aborderons dans la prochaine partie.
Étape 1 : Création d’un formulaire de connexion en HTML
Voici le formulaire de connexion en HTML. Collez-le dans un fichier nommé login.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Login</h2>
<p>Please fill in your email and password.</p>
<form action="" method="post">
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" class="form-control" required />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary" value="Submit">
</div>
<p>Don't have an account? <a href="register.php">Register here</a>.</p>
</form>
</div>
</div>
</div>
</body>
</html>La sortie du code ci-dessus ressemblera à ceci
Étape 2 : Création d’un système de connexion en PHP
Après avoir créé le formulaire de connexion en HTML, nous écrirons un code pour valider les informations d’identification. Lors de la soumission du formulaire, nous vérifierons que l’e-mail et le mot de passe sont renseignés. S’ils le sont, nous exécuterons une requête SELECT pour trouver l’enregistrement dans une base de données en fonction de l’e-mail et du mot de passe. Si un enregistrement est trouvé, nous stockerons l’"identifiant d'utilisateur" en session et l’utilisateur sera redirigé vers le fichier welcome.php, sinon, l’utilisateur recevra un message d’erreur.
Remplaçons le code suivant dans le fichier login.php.
Please enter email.';
}
// valider si le mot de passe est vide
if (empty($password)) {
$error .= 'Please enter your password.
';
}
if (empty($error)) {
if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) {
$query->bind_param('s', $email);
$query->execute();
$row = $query->fetch();
if ($row) {
if (password_verify($password, $row['password'])) {
$_SESSION["userid"] = $row['id'];
$_SESSION["user"] = $row;
// Rediriger l'utilisateur vers la page de bienvenue
header("location: welcome.php");
exit;
} else {
$error .= 'The password is not valid.
';
}
} else {
$error .= 'No User exist with that email address.
';
}
}
$query->close();
}
// Fermer la connexion
mysqli_close($db);
}
?>
Login
Login
Please fill in your email and password.
4) Création d’une page de bienvenue
Voici le code pour le fichier welcome.php. Les utilisateurs seront redirigés vers cette page après un processus de connexion réussi. Nous avons ajouté du code en haut de la page pour vérifier si l’utilisateur n’est pas connecté, puis le rediriger vers la page de connexion.
Créons un fichier welcome.php et collons-y le code suivant.
Welcome <?php echo $_SESSION["name"]; ?>
Hello, . Welcome to demo site.
5) Le script de déconnexion
Enfin, créons un fichier logout.php avec le code suivant.
Une fois que l’utilisateur clique sur le lien Déconnexion, le script ci-dessus sera appelé pour détruire la session et rediriger l’utilisateur vers le fichier login.php.
Conclusion
Dans ce tutoriel, j’ai expliqué comment vous pouvez créer un système de connexion en utilisant HTML, PHP et MySQL. Une fois que vous comprenez à quel point il est simple de créer un système de connexion, vous pouvez ajouter d’autres fonctionnalités comme la réinitialisation du mot de passe, le mot de passe oublié, la vérification de l’adresse e-mail, la modification du profil de l’utilisateur, etc.
Source:
https://dzone.com/articles/create-a-login-system-using-php