``
Salut à tous !
Aujourd'hui, je vous montre comment j'ai développé un système de connexion/inscription sécurisé en PHP avec Bootstrap pour le design, et MySQL pour la base de données.
Le projet utilise aussi quelques animations pour rendre l'expérience plus fluide ✨.
Technologies utilisées
- PHP (backend)
- MySQL (base de données)
- Bootstrap 5 (frontend)
- HTML5 & CSS3
- Un peu de JavaScript pour améliorer l'UX
Arborescence du projet
`
/assets
bootstrap.css
bootstrap.js
style1.css
images/joyboy1.jpeg
joyBoy_video.mp4
/includes
config.php
/pages
login.php
signUp.php
profile.php
README.md
`
1. Inscription (signUp.php)
Lors de l'inscription :
- Validation du nom, email et mot de passe.
- Vérification de la force du mot de passe.
- Hashage du mot de passe avec
password_hash(). - Enregistrement dans la base de données si tout est valide.
Code pour l'inscription :
php
// Validation mot de passe :
function isValidPassword($password) {
return strlen($password) >= 8 &&
preg_match("/[A-Z]/", $password) &&
preg_match("/[a-z]/", $password) &&
preg_match("/[0-9]/", $password) &&
preg_match("/[\W]/", $password);
}
Inscription :
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Sanitize inputs
$fullName = htmlspecialchars(trim($_POST['fullname']));
$email = htmlspecialchars(trim($_POST['email']));
$password = htmlspecialchars(trim($_POST['password']));
$confirm_password = htmlspecialchars(trim($_POST["confirm_password"]));
Si tout est ok :
if ($password === $confirm_password) {
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
$stmt = $pdo->prepare("INSERT INTO users (fullName, email, password) VALUES (?, ?, ?)");
$stmt->execute([$fullName, $email, $hashedPassword]);
$_SESSION["signup"] = "Your account has been created successfully.";
header("Location: login.php");
exit();
}}
Vérification du domaine :
`$allowedDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com'];
$emailParts = explode('@', $email);
if (count($emailParts) !== 2 || !in_array(strtolower($emailParts[1]), $allowedDomains)) {
$errorEmail = '*Only known email domains are accepted';`
Aperçu de la page d'inscription
2. Connexion (login.php)
Lors de la connexion :
•Vérification de l'email et mot de passe.
•Si correct, stockage des informations de l'utilisateur en session.
•Redirection vers la page de profil.
Code pour la connexion :
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$email = htmlspecialchars(trim($_POST['email']));
$password = htmlspecialchars(trim($_POST['password']));
$stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
$stmt->execute([$email]);
$user = $stmt->fetch();
if ($user && password_verify($password, $user['password'])) {
session_regenerate_id(true);
$_SESSION['email'] = $user['email'];
$_SESSION['fullname'] = $user['fullName'];
header("Location: profile.php");
exit();
} else {
$error = "Incorrect email or password.";
}}
Aperçu de la page de connexion :
3. Profil utilisateur (profile.php) :
•Accessible uniquement si l'utilisateur est connecté (vérification session).
•Affiche le nom complet de l'utilisateur.
•Superbe design en mode dark avec animation de fond dégradé.
Code pour profil
if (!isset($_SESSION['email'])) {
$_SESSION['errorLog'] = "You must log in first.";
header("Location: login.php");
exit();
}
Aperçu de la page profil
Design visuel
•Thème couleurs : Rouge, Noir, Blanc.
•Bootstrap 5 + CSS custom pour les effets de survol et les transitions.
•Animations CSS : Slide in, Gradient moving background, Hover effects.
Exemple de code CSS
Résultat final
•Sécurisé (hash mot de passe + session sécurisée)
•Moderne (Bootstrap 5 et animations CSS)
•Fonctionnel (Inscription, Connexion, Profil, Déconnexion)
Le mot de la fin
Je suis très fier de ce projet, car il combine sécurité et design moderne !
N'hésitez pas à vous en inspirer pour vos propres projets web 🚀.
Si tu veux voir plus de contenus comme ça, n'hésite pas à ❤️ et commenter !
Tags