[23/01, 11:35] ChatGPT: Bien sûr, je vais te donner des exemples de code pour t’aider à
démarrer ton application de suivi des performances en musculation. Nous allons diviser cela
en plusieurs parties : Frontend (HTML, CSS, JS) et Backend (PHP avec une base de
données MySQL).
*1. Frontend - Page d'Accueil et Dashboard Utilisateur*
HTML pour la page d’accueil
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Performances Musculation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Suivi des Performances Musculation</h1>
<nav>
<a href="login.html">Connexion</a> |
<a href="signup.html">Inscription</a>
</nav>
</header>
<main>
<section class="intro">
<h2>Bienvenue sur l'application</h2>
<p>Suivez vos progrès en musculation, définissez vos objectifs et analysez vos
performances !</p>
</section>
<section class="dashboard">
<h3>Statistiques récentes</h3>
<div id="progression-chart"></div>
</section>
</main>
<footer>
<p>© 2025 Suivi Musculation</p>
</footer>
[23/01, 11:35] ChatGPT: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS pour la mise en forme (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
}
main {
padding: 20px;
}
h1, h2, h3 {
font-size: 2em;
color: #333;
}
.intro {
text-align: center;
margin: 20px 0;
}
.dashboard {
text-align: center;
margin: 20px 0;
}
footer {
text-align: center;
background-color: #333;
color: white;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
```
JavaScript pour afficher un graphique de progression (script.js)
```javascript
document.addEventListener('DOMContentLoaded', function() {
var ctx = document.getElementById('progression-chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4', 'Semaine 5'],
datasets: [{
label: 'Poids soulevé (kg)',
[23/01, 11:36] ChatGPT: data: [50, 55, 60, 65, 70],
borderColor: 'rgb(75, 192, 192)',
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
```
*2. Backend - PHP (Connexion et Gestion des Séances)*
Connexion à la base de données (db.php)
```php
<?php
host = 'localhost';dbname = 'musculation_db';
username = 'root';password = '';
// Connexion à MySQL avec PDO
try {
pdo = new PDO("mysql:host=host;dbname=dbname",username,
password);pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException e)
echo "Erreur de connexion : " .e->getMessage();
}
?>
```
Inscription de l’utilisateur (signup.php)
```php
<?php
include 'db.php';
if (_SERVER['REQUEST_METHOD'] == 'POST')
// Récupération des données du formulairenom = _POST['nom'];email =
_POST['email'];password = password_hash(_POST['password'], PASSWORD_DEFAULT); //
Sécurisation du mot de passe
// Insertion dans la base de donnéessql = "INSERT INTO utilisateurs (nom, email,
mot_de_passe) VALUES (:nom, :email, :mot_de_passe)";
[23/01, 11:36] ChatGPT: stmt =pdo->prepare(sql);stmt->bindParam(':nom',
nom);stmt->bindParam(':email', email);stmt->bindParam(':mot_de_passe', password);
if (stmt->execute()) {
echo "Inscription réussie !";
} else {
echo "Erreur lors de l'inscription.";
}
}
?>
<form method="POST" action="signup.php">
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" required>
<button type="submit">S'inscrire</button>
</form>
```
Ajout d’une séance d’entraînement (ajouter_seance.php)
```php
<?php
include 'db.php';
if (_SERVER['REQUEST_METHOD'] == 'POST')
// Récupération des données du formulaireid_utilisateur = _POST['id_utilisateur'];exercice
= _POST['exercice'];poids = _POST['poids'];repetitions = _POST['repetitions'];series =
_POST['series'];
// Insertion dans la base de donnéessql = "INSERT INTO seances (id_utilisateur, exercice,
poids, repetitions, series)
VALUES (:id_utilisateur, :exercice, :poids, :repetitions, :series)";
[23/01, 11:36] ChatGPT: stmt =pdo->prepare(sql);stmt->bindParam(':id_utilisateur',
id_utilisateur);stmt->bindParam(':exercice', exercice);stmt->bindParam(':poids',
poids);stmt->bindParam(':repetitions', repetitions);stmt->bindParam(':series', series);
if (stmt->execute()) {
echo "Séance ajoutée avec succès !";
} else {
echo "Erreur lors de l'ajout de la séance.";
}
}
?>
<form method="POST" action="ajouter_seance.php">
<label for="exercice">Exercice</label>
<input type="text" id="exercice" name="exercice" required>
<label for="poids">Poids (kg)</label>
<input type="number" id="poids" name="poids" required>
<label for="repetitions">Répétitions</label>
<input type="number" id="repetitions" name="repetitions" required>
<label for="series">Séries</label>
<input type="number" id="series" name="series" required>
<button type="submit">Ajouter la séance</button>
</form>
```
*3. Base de Données MySQL*
Voici les instructions pour créer la base de données et les tables.
```sql
CREATE DATABASE musculation_db;
USE musculation_db;
CREATE TABLE utilisateurs (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(100),
email VARCHAR(100) UNIQUE,
mot_de_passe VARCHAR(255),
[23/01, 11:36] ChatGPT: date_inscription TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE seances (
id INT AUTO_INCREMENT PRIMARY KEY,
id_utilisateur INT,
exercice VARCHAR(100),
poids INT,
repetitions INT,
series INT,
FOREIGN KEY (id_utilisateur) REFERENCES utilisateurs(id)
);
```
*Conclusion*
Avec ces exemples, tu as déjà une base solide pour ton application de suivi des
performances en musculation. Le frontend inclut une page d’accueil simple avec un
graphique de progression, et le backend permet de gérer les utilisateurs, les séances, et de
se connecter à la base de données.
Si tu as besoin d’autres précisions sur un aspect du projet, n’hésite pas à demander.
