Page 1 : 01_creation.
sql (La Structure)
Avant de stocker des données, il faut créer un "contenant" : la base de données et
ses tables.
SQL
-- 1. Créer la base de données
CREATE DATABASE cours_db;
USE cours_db;
-- 2. Créer une table "utilisateurs"
CREATE TABLE utilisateurs (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(50) NOT NULL,
email VARCHAR(100) UNIQUE,
date_inscription DATE
);
Page 2 : 02_insertion.sql (Ajouter des données)
Une table vide n'est pas très utile. Utilisons INSERT pour la remplir.
SQL
-- Ajouter un seul utilisateur
INSERT INTO utilisateurs (nom, email, date_inscription)
VALUES ('Alice', 'alice@[Link]', '2024-03-01');
-- Ajouter plusieurs utilisateurs d'un coup
INSERT INTO utilisateurs (nom, email, date_inscription)
VALUES
('Bob', 'bob@[Link]', '2024-03-02'),
('Charlie', 'charlie@[Link]', '2024-03-05');
Page 3 : 03_lecture.sql (La Sélection)
C'est la commande la plus utilisée : SELECT. Elle permet de récupérer des
informations précises.
SQL
-- Tout récupérer
SELECT * FROM utilisateurs;
-- Récupérer seulement les noms et filtrer (WHERE)
SELECT nom FROM utilisateurs
WHERE date_inscription > '2024-03-01';
-- Trier par nom (Ordre alphabétique)
SELECT * FROM utilisateurs
ORDER BY nom ASC;
Page 4 : 04_modification.sql (Mise à jour et Suppression)
Pour modifier (UPDATE) ou supprimer (DELETE) des données. Attention : Ne jamais
oublier la clause WHERE, sinon vous modifiez toute la table !
SQL
-- Modifier l'email d'Alice
UPDATE utilisateurs
SET email = 'alice_new@[Link]'
WHERE id = 1;
-- Supprimer Bob de la base
DELETE FROM utilisateurs
WHERE nom = 'Bob';
Page 5 : 05_jointures.sql (Relier les tables)
Le vrai pouvoir du SQL réside dans les relations. Imaginons une table commandes liée
aux utilisateurs.
SQL
-- Création d'une table liée par une "Clé Étrangère" (Foreign Key)
CREATE TABLE commandes (
id_commande INT AUTO_INCREMENT PRIMARY KEY,
produit VARCHAR(100),
id_client INT,
FOREIGN KEY (id_client) REFERENCES utilisateurs(id)
);
-- Faire une jointure pour voir quel client a acheté quoi
SELECT [Link], [Link]
FROM utilisateurs
INNER JOIN commandes ON [Link] = commandes.id_client;
Résumé des 4 opérations clés (CRUD)
Action Commande SQL
Create (Créer) INSERT
Read (Lire) SELECT
Update (Modifier) UPDATE
Delete (Supprimer) DELETE
C'est un défi passionnant ! Pour compléter ton arsenal de développeur "Full Stack", nous
allons explorer des concepts plus avancés : la sécurité, la gestion des sessions, les API, le
JSON et la mise en ligne.
Voici les 6 pages supplémentaires pour finaliser ton cursus :
Page 6 : [Link] (Protéger ses données)
Le premier réflexe d'un développeur est de ne jamais faire confiance aux données saisies par
l'utilisateur.
PHP
<?php
// Simulation d'une saisie utilisateur dangereuse
$saisie_sale = "<script>alert('Hacked!');</script> Jean";
// 1. Protection contre les failles XSS (Affichage)
$saisie_propre = htmlspecialchars($saisie_sale);
// 2. Hachage de mot de passe (ne JAMAIS stocker en clair)
$password = "mon_code_secret123";
$hash = password_hash($password, PASSWORD_DEFAULT);
?>
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Sécurité PHP</title></head>
<body>
<h1>Sécurité de base</h1>
<p>Affichage sécurisé : <?php echo $saisie_propre; ?></p>
<p>Mot de passe haché : <?php echo $hash; ?></p>
</body>
</html>
Page 7 : [Link] (Connexion Utilisateur)
Les sessions permettent de "se souvenir" d'un utilisateur d'une page à l'autre (ex: un panier
d'achat ou un compte client).
PHP
<?php
session_start(); // Toujours au tout début du fichier
// Stocker une information
$_SESSION['pseudo'] = "DevMaster";
$_SESSION['role'] = "Admin";
?>
<!DOCTYPE html>
<html>
<body>
<h1>Session activée</h1>
<p>Bienvenue, <?php echo $_SESSION['pseudo']; ?>.</p>
<a href="page_suivante.php">Aller sur une autre page</a>
</body>
</html>
Page 8 : [Link] (Le format d'échange)
Le JSON est le langage universel pour échanger des données entre le PHP (serveur) et le
JavaScript (client).
JSON
{
"cours": "Développement Web",
"niveau": "Intermédiaire",
"modules": [
{"id": 1, "nom": "HTML/CSS"},
{"id": 2, "nom": "PHP/SQL"},
{"id": 3, "nom": "JavaScript API"}
],
"actif": true
}
Page 9 : ajax_fetch.html (Interactivité sans recharger)
Utiliser JavaScript pour demander des informations au serveur en arrière-plan (très utilisé
pour les notifications ou les flux de réseaux sociaux).
HTML
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>AJAX & JSON</title></head>
<body>
<h1>Charger des données dynamiquement</h1>
<button id="loadBtn">Obtenir les modules</button>
<ul id="resultats"></ul>
<script>
[Link]('loadBtn').addEventListener('click', () =>
{
// On imagine que [Link] est sur votre serveur
fetch('[Link]')
.then(response => [Link]())
.then(data => {
const liste = [Link]('resultats');
[Link] = ""; // Vide la liste
[Link](m => {
let li = [Link]('li');
[Link] = [Link];
[Link](li);
});
});
});
</script>
</body>
</html>
Page 10 : [Link] (Design Mobile)
Un site moderne doit s'adapter aux smartphones. On utilise les Media Queries.
CSS
/* Style par défaut (Ordinateur) */
body {
font-family: Arial;
display: flex;
background-color: white;
}
/* Style pour Mobile (Écrans de moins de 600px) */
@media screen and (max-width: 600px) {
body {
flex-direction: column;
background-color: #f0f0f0;
}
h1 {
font-size: 1.5rem;
text-align: center;
}
}
Page 11 : [Link] (Mise en ligne)
Une fois le code fini, il faut le rendre public. Voici les étapes clés :
1. Acheter un nom de domaine (ex: [Link]).
2. Choisir un hébergeur (ex: OVH, Hostinger, ou Heroku pour les apps).
3. Transférer les fichiers : Utiliser un client FTP (comme FileZilla) pour envoyer tes
fichiers du PC vers le serveur.
4. Exporter la base de données : Faire un "Dump" SQL de ton PHPMyAdmin local et
l'importer sur celui de ton hébergeur.