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

/assets
    bootstrap.css
    bootstrap.js
    style1.css
    images/joyboy1.jpeg
    joyBoy_video.mp4
/includes
    config.php
/pages
    login.php
    signUp.php
    profile.php

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 🚀.
Si tu veux voir plus de contenus comme ça, n'hésite pas à ❤️ et commenter !

Tags
#php #mysql #webdev #bootstrap #programming