Parfait.
Voici une solution simple, élégante et fonctionnelle pour gérer un profil
utilisateur avec une photo de profil, nom et e-mail. On va procéder en 4 étapes claires :
✅ 1. Structure de la base de données (table
utilisateurs)
Si tu as déjà une table utilisateurs, ajoute juste la colonne photo. Sinon, crée cette
table ainsi :
CREATE TABLE utilisateurs (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
mot_de_passe VARCHAR(255) NOT NULL,
photo VARCHAR(255)
);
✅ 2. Formulaire HTML d’ajout/modification de photo
(profil.php)
<?php
session_start();
$conn = new mysqli("localhost", "root", "", "ta_base_de_donnees");
// Remplace "ta_base_de_donnees" par le nom réel
$user_id = $_SESSION['user_id']; // assure-toi que la session est bien définie
// Récupérer les infos utilisateur
$stmt = $conn->prepare("SELECT nom, email, photo FROM utilisateurs WHERE id = ?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$stmt->bind_result($nom, $email, $photo);
$stmt->fetch();
$stmt->close();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Profil</title>
<style>
body {
font-family: sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.profile-container {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
text-align: center;
width: 350px;
}
.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #555;
margin-bottom: 15px;
}
.info {
font-size: 18px;
margin-bottom: 8px;
}
input[type="file"] {
margin-bottom: 10px;
}
button {
background-color: #333;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="profile-container">
<form action="upload_photo.php" method="post" enctype="multipart/form-data">
<img src="<?= $photo ? 'uploads/' . $photo : 'default.png' ?>" class="profile-pic"
alt="Photo de profil"><br>
<input type="file" name="photo" accept="image/*" required><br>
<button type="submit">Changer la photo</button>
</form>
<div class="info"><strong>Nom :</strong> <?= htmlspecialchars($nom) ?></div>
<div class="info"><strong>Email :</strong> <?= htmlspecialchars($email) ?></div>
</div>
</body>
</html>
✅ 3. Script PHP pour enregistrer la photo
(upload_photo.php)
<?php
session_start();
$conn = new mysqli("localhost", "root", "", "ta_base_de_donnees");
$user_id = $_SESSION['user_id'];
if (isset($_FILES['photo']) && $_FILES['photo']['error'] === 0) {
$photo = $_FILES['photo']['name'];
$tmp_name = $_FILES['photo']['tmp_name'];
$photo_path = 'uploads/' . basename($photo);
// Déplacer la photo
move_uploaded_file($tmp_name, $photo_path);
// Mettre à jour dans la base
$stmt = $conn->prepare("UPDATE utilisateurs SET photo = ? WHERE id = ?");
$stmt->bind_param("si", $photo, $user_id);
$stmt->execute();
}
header("Location: profil.php");
exit;
✅ 4. Créer un dossier uploads/
Dans le dossier bon/, crée un dossier nommé uploads/ :
● Clique droit > Nouveau dossier > nomme-le uploads
● Donne-lui les droits d’écriture (si demandé sur ton système)
✅ 5. Image par défaut
Dans ton dossier bon/, ajoute une image nommée default.png (elle sera utilisée quand
aucun utilisateur n’a encore mis de photo).
Souhaites-tu que :
● Je relie ça directement à ton système de connexion ?
● Je crée une version avec suppression ou mise à jour de la photo ?
● J'intègre un style harmonisé avec les pages dashboard et entrainements que je
t’ai faites ?
Dis-moi comment tu veux qu’on améliore encore 👌
Bien sûr ! Voici une version sobre, élégante et attrayante de ta page profil. Elle utilise du
CSS moderne avec une belle typographie, une mise en page centrée, une zone photo
stylisée, et un affichage propre du nom et de l’email.
🖼️ Résultat attendu :
Une page centrée, avec :
● Une belle photo de profil ronde
● Un affichage classe du nom et email
● Une palette de couleurs neutres et modernes
● Responsive (adaptée à mobile)
📁 Structure de fichiers :
/bon
│
├── profil.php
├── style.css
└── uploads/ (pour les photos)
📄 profil.php
<?php
session_start();
$nom = $_SESSION['nom'] ?? "Nom Inconnu";
$email = $_SESSION['email'] ?? "Email Inconnu";
$photo = $_SESSION['photo'] ?? "uploads/default.png"; // Chemin par défaut
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Profil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-container">
<div class="profile-card">
<div class="photo-container">
<img src="<?= htmlspecialchars($photo) ?>" alt="Photo de profil">
</div>
<h2><?= htmlspecialchars($nom) ?></h2>
<p><?= htmlspecialchars($email) ?></p>
</div>
</div>
</body>
</html>
🎨 style.css
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(145deg, #eaeaea, #ffffff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.profile-container {
text-align: center;
}
.profile-card {
background-color: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
max-width: 350px;
width: 100%;
margin: auto;
transition: transform 0.3s ease;
}
.profile-card:hover {
transform: translateY(-5px);
}
.photo-container img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #f1f1f1;
box-shadow: 0 0 15px rgba(0,0,0,0.15);
margin-bottom: 20px;
}
.profile-card h2 {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.profile-card p {
font-size: 16px;
color: #777;
}
📷 Ajouter une photo de profil
Quand l'utilisateur s’inscrit ou modifie son profil, enregistre sa photo dans /uploads/ et
stocke son chemin dans $_SESSION['photo'].
Exemple :
$_SESSION['photo'] = "uploads/marcel.jpg";
✅ Résultat :
Un design professionnel, sobre, moderne et attrayant, facile à lire, compatible mobile et
bureau.
Souhaites-tu que j’ajoute aussi un bouton "Changer la photo" ou une interface de
modification ?
