# Créer un Système de Connexion & Inscription Sécurisé avec PHP, MySQL et Bootstrap

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 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(); } } ### Aperçu de la page d'inscription ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vutmi0dkaclv84zr3qxz.png) ### 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 : ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j442h0hon7v40ltzqpvj.png) ### 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 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v7rr2iy8y75ayd520hl.png) 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

Apr 28, 2025 - 15:20

# Créer un Système de Connexion & Inscription Sécurisé avec PHP, MySQL et Bootstrap

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

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();
    }
}

### Aperçu de la page d'inscription


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vutmi0dkaclv84zr3qxz.png)



### 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 :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j442h0hon7v40ltzqpvj.png)

### 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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v7rr2iy8y75ayd520hl.png)




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


                                            
                            
                                Read More                                
                            
                        
                                        
                        Tags:
                        
                                                    
                    
                    
                        
                            
                                                                    
                                        
                                            
                                            Previous Article                                        
                                    
                                    
                                        The Code Behind the Perfect Chicken Burger: A Programmer’s Guide to Cooking and ...
                                    
                                                            
                            
                                                                    
                                        
                                            Next Article                                            
                                        
                                    
                                    
                                        Weather Monitoring System Using IoT
                                    
                                                            
                        
                    
                                        
                        
                            
                                
                                    
                                        Related Posts
                                    
                                
                                
                                    
                                                                                            
                                                        
                                                                                                                            
                                                                    
                                                                        
                                                                                                                                            
                                                                
                                                                                                                        The Truth About Vibe Coding: From Zero Swift to App Store
                                                                Apr 22, 2025
     0

                                                        
                                                    
                                                                                                    
                                                        
                                                                                                                            
                                                                    
                                                                        
                                                                                                                                            
                                                                
                                                                                                                        Context7 MCP Tutorial
                                                                Apr 25, 2025
     0

                                                        
                                                    
                                                                                                    
                                                        
                                                                                                                            
                                                                    
                                                                        
                                                                                                                                            
                                                                
                                                                                                                        Fundamentos iniciales
                                                                Apr 22, 2025
     0

                                                        
                                                    
                                                                                    
                                
                            
                        
                    
                                            
                            
                                
                                    
                                                                                    
                                                                            
                                    
                                                                                    
                                                    
        
        
        
            
                
                    Name
                    
                
                
                    Email
                    
                
            
        
        
            Comment