Guide Complet
JavaScript · HTML · PHP
Développement Web & Applications Web Modernes
HTML5 JavaScript PHP
Exemples réels et concrets · 2025
Guide Complet · JavaScript · HTML · PHP Page 1
Table des Matieres
1. Les Fondations HTML5
2. CSS et Mise en Page (Flexbox / Grid)
3. JavaScript Essentiel
4. DOM et Evenements
5. Fetch API et AJAX
6. PHP : Serveur et Backend
7. PHP et MySQL : Base de donnees
8. Formulaires HTML + PHP
9. Sessions, Cookies et Authentification
10. Application Web Complete : Exemple Reel
11. Securite Web (XSS, SQL Injection...)
12. Bonnes Pratiques et Outils
Guide Complet · JavaScript · HTML · PHP Page 2
1 · Les Fondations HTML5
HTML5 est le squelette de toute page web. Il definit la structure et le sens du contenu. Voici la structure minimale
d'une page professionnelle :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ma super application web">
<title>Mon Application</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<nav>
<a href="/">Accueil</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<section id="hero">
<h1>Bienvenue sur mon site</h1>
<p>Une application web moderne et responsive</p>
<a href="#decouvrir" class="btn-primary">Decouvrir</a>
</section>
<section id="services">
<article class="card">...</article>
</section>
</main>
<footer>
<p>© 2025 Mon Entreprise</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
Balises semantiques HTML5 essentielles
Balise Role Exemple
<header> En-tete de page Logo, navigation
<nav> Zone de navigation Menu, liens
<main> Contenu principal Corps unique de la page
<section> Section thematique Hero, Services, A propos
<article> Contenu autonome Article blog, carte produit
<aside> Contenu secondaire Sidebar, widget
<footer> Pied de page Mentions legales, liens
Guide Complet · JavaScript · HTML · PHP Page 3
<figure> Media avec legende Image + figcaption
Formulaire HTML5 complet - Exemple : Inscription
<form action="[Link]" method="POST">
<label for="nom">Nom complet *</label>
<input type="text" id="nom" name="nom"
required minlength="2" maxlength="50"
placeholder="Jean Dupont">
<label for="email">Email *</label>
<input type="email" id="email" name="email"
required placeholder="jean@[Link]">
<label for="password">Mot de passe *</label>
<input type="password" id="password" name="password"
required minlength="8">
<small>8 caracteres minimum, 1 majuscule, 1 chiffre</small>
<label for="role">Role</label>
<select id="role" name="role">
<option value="user">Utilisateur</option>
<option value="admin">Administrateur</option>
</select>
<label>
<input type="checkbox" name="cgv" required>
J'accepte les CGV
</label>
<button type="submit">Creer mon compte</button>
</form>
Securite
Toujours valider les donnees cote serveur (PHP) meme si HTML5 valide cote client.
Un utilisateur peut desactiver la validation navigateur.
Guide Complet · JavaScript · HTML · PHP Page 4
2 · CSS et Mise en Page (Flexbox / Grid)
Le CSS donne vie a votre HTML. Flexbox et Grid sont les deux systemes modernes de mise en page utilises par tous
les grands sites web.
Flexbox - Barre de navigation responsive
/* Navigation responsive avec Flexbox */
.navbar {
display: flex;
justify-content: space-between; /* logo gauche, liens droite */
align-items: center; /* centrage vertical */
padding: 1rem 2rem;
background: #0f172a;
position: sticky;
top: 0;
z-index: 100;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
/* Mobile : menu hamburger */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #1e293b;
padding: 1rem;
}
.[Link] { display: flex; }
}
CSS Grid - Layout de Dashboard
/* Dashboard 3 colonnes avec Grid */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; background: #1e293b; }
main { grid-area: main; padding: 2rem; }
aside { grid-area: aside; }
footer { grid-area: footer; }
Guide Complet · JavaScript · HTML · PHP Page 5
/* Cards responsives SANS media queries */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
Conseil
auto-fit + minmax() est la technique la plus puissante pour creer des grilles
responsives sans media queries.
Guide Complet · JavaScript · HTML · PHP Page 6
3 · JavaScript Essentiel
JavaScript est le langage de programmation du web. Il rend les pages interactives et permet de creer des applications
web completes.
Variables, Types et Fonctions Modernes (ES6+)
// Variables (ES6+)
const API_URL = "[Link] // constante
let compteur = 0; // variable modifiable
// Objet (tableau associatif)
const utilisateur = {
nom: "Alice Martin",
age: 28,
actif: true,
scores: [95, 87, 92],
};
// Destructuration
const { nom, age } = utilisateur;
const [premier, ...reste] = [Link];
// Fonctions fleches
const saluer = (prenom) => `Bonjour, ${prenom} !`;
// Parametre par defaut
const creerProfil = (nom, role = "user") => ({
nom, role, createdAt: new Date().toISOString()
});
// Spread operator
const profilComplet = {
...creerProfil("Bob"),
email: "bob@[Link]",
};
[Link](saluer(nom)); // "Bonjour, Alice Martin !"
[Link](profilComplet);
Tableaux : map, filter, reduce - Exemple E-commerce
const produits = [
{ id: 1, nom: "Laptop", prix: 899, categorie: "tech", stock: 5 },
{ id: 2, nom: "T-shirt", prix: 29, categorie: "mode", stock: 0 },
{ id: 3, nom: "Casque", prix: 149, categorie: "tech", stock: 12 },
];
// filter : produits tech en stock
const techEnStock = produits
.filter(p => [Link] === "tech" && [Link] > 0);
// → [Laptop, Casque]
// map : ajouter TVA et badge
const avecTVA = [Link](p => ({
...p,
Guide Complet · JavaScript · HTML · PHP Page 7
prixTTC: ([Link] * 1.2).toFixed(2),
badge: [Link] === 0 ? "Rupture"
: [Link] < 5 ? "Stock limite"
: "Disponible"
}));
// reduce : total du panier
const panier = [{ produitId: 1, qte: 2 }, { produitId: 3, qte: 1 }];
const total = [Link]((acc, item) => {
const p = [Link](p => [Link] === [Link]);
return acc + [Link] * [Link];
}, 0);
[Link](`Total : ${total} EUR`); // 2047
// sort : par prix decroissant (copie avec spread)
const tries = [...produits].sort((a, b) => [Link] - [Link]);
Guide Complet · JavaScript · HTML · PHP Page 8
4 · DOM et Evenements
Le DOM (Document Object Model) permet a JavaScript de lire et modifier le contenu HTML en temps reel.
Manipulation du DOM - Exemple : Todo List
// Selectionner les elements
const input = [Link]("#todo-input");
const btnAjout = [Link]("btn-ajouter");
const liste = [Link](".todo-list");
// Etat de l'application
let todos = [Link]([Link]("todos")) || [];
let idCounter = [Link];
function sauvegarder() {
[Link]("todos", [Link](todos));
}
function afficherTodos() {
[Link] = "";
[Link](t => ![Link]).forEach(todo => {
const li = [Link]("li");
[Link] = `todo-item ${[Link] ? "fait" : ""}`;
[Link] = [Link];
[Link] = `
<input type="checkbox" ${[Link] ? "checked" : ""}>
<span>${escapeHTML([Link])}</span>
<button class="btn-suppr">Supprimer</button>
`;
[Link](li);
});
}
function ajouterTodo() {
const texte = [Link]();
if (!texte) return;
[Link]({ id: ++idCounter, texte, fait: false, supprime: false });
sauvegarder();
afficherTodos();
[Link] = "";
}
// Delegation d'evenements (meilleure pratique)
[Link]("click", (e) => {
const li = [Link](".todo-item");
if (!li) return;
const id = parseInt([Link]);
const todo = [Link](t => [Link] === id);
if ([Link] === "checkbox") {
[Link] = [Link];
} else if ([Link]("btn-suppr")) {
[Link] = true;
}
sauvegarder();
afficherTodos();
Guide Complet · JavaScript · HTML · PHP Page 9
});
[Link]("click", ajouterTodo);
[Link]("keydown", e => [Link] === "Enter" && ajouterTodo());
function escapeHTML(str) {
return [Link](/[&<>"']/g, m =>
({"&":"&","<":"<",">":">",'"':""","'":"'"}[m]));
}
afficherTodos();
Performance
La delegation d'evenements (ecouter sur le parent) est plus performante et
fonctionne avec les elements ajoutes dynamiquement.
Guide Complet · JavaScript · HTML · PHP Page 10
5 · Fetch API et AJAX
Fetch API permet d'effectuer des requetes HTTP asynchrones. C'est la base de toute communication entre votre
frontend et votre backend.
GET - Charger des articles depuis une API
async function chargerArticles(page = 1) {
const loader = [Link](".loader");
const container = [Link]("#articles");
[Link] = "block";
try {
const params = new URLSearchParams({ page, limit: 10 });
const reponse = await fetch(`/api/articles?${params}`, {
headers: { "Accept": "application/json" }
});
if (![Link]) {
throw new Error(`Erreur ${[Link]}`);
}
const { articles, total, pages } = await [Link]();
[Link] = [Link](a => `
<article class="card">
<img src="${[Link]}" alt="${[Link]}" loading="lazy">
<h2><a href="/article/${[Link]}">${[Link]}</a></h2>
<p>${[Link]}</p>
<time>${new Date([Link]).toLocaleDateString("fr-FR")}</time>
</article>
`).join("");
} catch (erreur) {
[Link] = `<div class="erreur">${[Link]}</div>`;
} finally {
[Link] = "none";
}
}
chargerArticles(); // Appel initial
POST - Envoyer un formulaire de contact
async function envoyerContact(event) {
[Link](); // Bloquer la soumission HTML
const form = [Link];
const btn = [Link]('[type="submit"]');
[Link] = true;
[Link] = "Envoi en cours...";
const donnees = {
nom: [Link](),
email: [Link](),
message: [Link](),
Guide Complet · JavaScript · HTML · PHP Page 11
};
try {
const rep = await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link](donnees)
});
const res = await [Link]();
if (![Link]) throw new Error([Link] || "Erreur envoi");
[Link]("#alert").textContent =
"Message envoye ! Reponse sous 24h.";
[Link]();
} catch (err) {
[Link]("#alert").textContent = [Link];
} finally {
[Link] = false;
[Link] = "Envoyer";
}
}
[Link]("#form-contact")
?.addEventListener("submit", envoyerContact);
Guide Complet · JavaScript · HTML · PHP Page 12
6 · PHP : Serveur et Backend
PHP s'execute cote serveur et genere du HTML dynamique ou repond a des requetes API. Plus de 75% des sites web
utilisent PHP (WordPress, Wikipedia...).
Syntaxe PHP Essentielle
<?php
// Variables et types
$nom = "Alice";
$age = 28;
$prix = 19.99;
$actif = true;
$notes = [18, 15, 17, 20];
$user = ["email" => "alice@[Link]", "role" => "admin"];
// Chaines de caracteres
$message = "Bonjour, $nom !";
$html = "<h1>Bienvenue, {$nom}</h1>";
// Null coalescing (eviter les erreurs sur parametres absents)
$pseudo = $_GET["pseudo"] ?? "Visiteur";
// Conditions
if ($age >= 18) {
echo "Acces autorise";
} else {
echo "Acces refuse";
}
// Boucle foreach
foreach ($notes as $index => $note) {
echo "Note {$index}: {$note}/20
";
}
$moyenne = array_sum($notes) / count($notes);
echo "Moyenne : " . round($moyenne, 1); // 17.5
// Fonction avec typage
function genererSlug(string $titre): string {
$slug = strtolower($titre);
$slug = iconv("UTF-8", "ASCII//TRANSLIT", $slug);
$slug = preg_replace("/[^a-z0-9]+/", "-", $slug);
return trim($slug, "-");
}
echo genererSlug("Developpement Web"); // "developpement-web"
?>
API REST en PHP - Repondre en JSON
<?php
// api/[Link]
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Origin: [Link]
Guide Complet · JavaScript · HTML · PHP Page 13
$methode = $_SERVER["REQUEST_METHOD"];
try {
switch ($methode) {
case "GET":
$page = max(1, (int)($_GET["page"] ?? 1));
$limit = min(50, (int)($_GET["limit"] ?? 10));
$offset = ($page - 1) * $limit;
$stmt = $pdo->prepare(
"SELECT id, titre, slug, extrait, date_publication
FROM articles WHERE publie = 1
ORDER BY date_publication DESC
LIMIT :limit OFFSET :offset"
);
$stmt->execute([":limit" => $limit, ":offset" => $offset]);
$total = $pdo->query(
"SELECT COUNT(*) FROM articles WHERE publie=1"
)->fetchColumn();
echo json_encode([
"succes" => true,
"articles" => $stmt->fetchAll(PDO::FETCH_ASSOC),
"total" => (int)$total,
"pages" => ceil($total / $limit),
]);
break;
case "POST":
$data = json_decode(file_get_contents("php://input"), true);
// Validation et insertion...
echo json_encode(["succes" => true, "id" => $nouvelId]);
break;
default:
http_response_code(405);
echo json_encode(["erreur" => "Methode non autorisee"]);
}
} catch (Exception $e) {
http_response_code(500);
echo json_encode(["erreur" => $e->getMessage()]);
}
Guide Complet · JavaScript · HTML · PHP Page 14
7 · PHP et MySQL : Base de Donnees
PDO est l'extension recommandee pour interagir avec MySQL. Elle supporte les requetes preparees qui protegent
contre les injections SQL.
Connexion PDO securisee
<?php
// config/[Link]
class Database {
private static ?PDO $instance = null;
public static function getConnection(): PDO {
if (self::$instance === null) {
$dsn = sprintf(
"mysql:host=%s;dbname=%s;charset=utf8mb4",
$_ENV["DB_HOST"], // "localhost"
$_ENV["DB_NAME"] // "ma_boutique"
);
self::$instance = new PDO(
$dsn,
$_ENV["DB_USER"],
$_ENV["DB_PASS"],
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
]
);
}
return self::$instance;
}
}
$pdo = Database::getConnection();
CRUD complet - Gestion de produits
<?php
class ProduitRepository {
public function __construct(private PDO $pdo) {}
// CREATE
public function creer(array $d): int {
$stmt = $this->pdo->prepare("
INSERT INTO produits (nom, prix, stock, categorie_id)
VALUES (:nom, :prix, :stock, :categorie_id)
");
$stmt->execute([
":nom" => htmlspecialchars($d["nom"]),
":prix" => filter_var($d["prix"], FILTER_VALIDATE_FLOAT),
":stock" => (int)$d["stock"],
":categorie_id"=> (int)$d["categorie_id"],
]);
return (int)$this->pdo->lastInsertId();
}
Guide Complet · JavaScript · HTML · PHP Page 15
// READ avec pagination
public function lister(int $page = 1, int $limit = 20): array {
$offset = ($page - 1) * $limit;
$stmt = $this->pdo->prepare("
SELECT p.*, [Link] AS categorie
FROM produits p
LEFT JOIN categories c ON p.categorie_id = [Link]
WHERE [Link] = 0
ORDER BY [Link] ASC
LIMIT :limit OFFSET :offset
");
$stmt->execute([":limit" => $limit, ":offset" => $offset]);
return $stmt->fetchAll();
}
// UPDATE
public function modifier(int $id, array $d): bool {
$stmt = $this->pdo->prepare("
UPDATE produits
SET nom=:nom, prix=:prix, stock=:stock, updated_at=NOW()
WHERE id=:id
");
return $stmt->execute([
":id" => $id, ":nom" => $d["nom"],
":prix" => $d["prix"], ":stock" => $d["stock"]
]);
}
// DELETE (soft delete - ne jamais supprimer physiquement)
public function supprimer(int $id): bool {
$stmt = $this->pdo->prepare(
"UPDATE produits SET supprime=1, supprime_le=NOW() WHERE id=:id"
);
return $stmt->execute([":id" => $id]);
}
}
Injection SQL - Regle d'Or
Utilisez TOUJOURS des requetes preparees avec des parametres (:nom) et ne JAMAIS
concatener des variables utilisateur dans vos requetes SQL.
Guide Complet · JavaScript · HTML · PHP Page 16
8 · Formulaires HTML + PHP
Le traitement de formulaires est une tache fondamentale. Voici le cycle complet : HTML → validation JS → PHP →
reponse.
Validation PHP robuste
<?php
function validerContact(array $data): array {
$erreurs = [];
$propre = [];
// Nom
$nom = trim(strip_tags($data["nom"] ?? ""));
if (empty($nom)) {
$erreurs["nom"] = "Le nom est obligatoire.";
} elseif (mb_strlen($nom) < 2 || mb_strlen($nom) > 100) {
$erreurs["nom"] = "2 a 100 caracteres requis.";
} else {
$propre["nom"] = $nom;
}
// Email
$email = filter_var(trim($data["email"] ?? ""), FILTER_VALIDATE_EMAIL);
if (!$email) {
$erreurs["email"] = "Email invalide.";
} else {
$propre["email"] = $email;
}
// Message
$msg = trim($data["message"] ?? "");
if (mb_strlen($msg) < 10) {
$erreurs["message"] = "Minimum 10 caracteres.";
} elseif (mb_strlen($msg) > 5000) {
$erreurs["message"] = "Maximum 5000 caracteres.";
} else {
$propre["message"] = htmlspecialchars($msg, ENT_QUOTES, "UTF-8");
}
return ["erreurs" => $erreurs, "donnees" => $propre];
}
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$resultat = validerContact($_POST);
if (empty($resultat["erreurs"])) {
// Envoyer l'email et rediriger
$corps = "Nom: {$resultat['donnees']['nom']}
"
. "Message: {$resultat['donnees']['message']}";
mail("contact@[Link]", "Nouveau message", $corps,
"From: noreply@[Link]■
Reply-To: "
. $resultat["donnees"]["email"]);
header("Location: [Link]?success=1");
Guide Complet · JavaScript · HTML · PHP Page 17
exit;
}
// Re-afficher le formulaire avec erreurs
}
Guide Complet · JavaScript · HTML · PHP Page 18
9 · Sessions et Authentification
Les sessions PHP permettent de maintenir l'etat entre les requetes HTTP. C'est la base de tout systeme de
connexion.
Systeme de connexion complet
<?php
// auth/[Link]
session_start();
ini_set("session.cookie_httponly", 1); // Inaccessible en JS
ini_set("session.cookie_secure", 1); // HTTPS uniquement
ini_set("session.cookie_samesite", "Strict");
ini_set("session.gc_maxlifetime", 1800); // 30 minutes
function connecter(string $email, string $motDePasse): array {
$pdo = Database::getConnection();
$stmt = $pdo->prepare(
"SELECT id, nom, email, mot_de_passe_hash, role, actif
FROM utilisateurs WHERE email = :email LIMIT 1"
);
$stmt->execute([":email" => $email]);
$user = $stmt->fetch();
// Verifier existence + mot de passe
if (!$user || !password_verify($motDePasse, $user["mot_de_passe_hash"])) {
return ["succes" => false, "message" => "Identifiants incorrects."];
}
if (!$user["actif"]) {
return ["succes" => false, "message" => "Compte desactive."];
}
// Regenerer l'ID de session (protection fixation de session)
session_regenerate_id(true);
$_SESSION["user"] = [
"id" => $user["id"],
"nom" => $user["nom"],
"email" => $user["email"],
"role" => $user["role"],
];
$_SESSION["connecte_le"] = time();
$pdo->prepare("UPDATE utilisateurs SET derniere_connexion=NOW() WHERE id=:id")
->execute([":id" => $user["id"]]);
return ["succes" => true];
}
function creerCompte(string $nom, string $email, string $mdp): int {
// BCRYPT avec cout 12 (recommande 2025)
$hash = password_hash($mdp, PASSWORD_BCRYPT, ["cost" => 12]);
$pdo = Database::getConnection();
$stmt = $pdo->prepare(
"INSERT INTO utilisateurs (nom, email, mot_de_passe_hash)
VALUES (:nom, :email, :hash)"
Guide Complet · JavaScript · HTML · PHP Page 19
);
$stmt->execute([":nom" => $nom, ":email" => $email, ":hash" => $hash]);
return (int)$pdo->lastInsertId();
}
// Middleware : proteger une page
function exigerConnexion(string $roleMin = "user"): void {
if (empty($_SESSION["user"])) {
header("Location: /login?redirect=" . urlencode($_SERVER["REQUEST_URI"]));
exit;
}
if ($roleMin === "admin" && $_SESSION["user"]["role"] !== "admin") {
http_response_code(403);
die("Acces refuse.");
}
}
Securite Critique
Ne jamais stocker le mot de passe en clair. Utilisez password_hash() avec
PASSWORD_BCRYPT. Ne JAMAIS utiliser MD5 ou SHA1 pour les mots de passe.
Guide Complet · JavaScript · HTML · PHP Page 20
10 · Application Complete : Blog avec Commentaires
Architecture MVC simplifiee pour un blog avec commentaires — le type de projet que vous trouverez en entreprise.
Structure des fichiers du projet
mon-blog/
■■■ [Link] # Point d'entree, routing
■■■ config/
■ ■■■ [Link] # Connexion PDO
■ ■■■ .env # Secrets (JAMAIS dans Git !)
■■■ controllers/
■ ■■■ [Link]
■ ■■■ [Link]
■■■ models/
■ ■■■ [Link]
■ ■■■ [Link]
■■■ views/
■ ■■■ [Link] # Template principal
■ ■■■ articles/
■ ■ ■■■ [Link]
■ ■ ■■■ [Link]
■ ■■■ partials/
■ ■■■ [Link]
■■■ public/
■ ■■■ css/[Link]
■ ■■■ js/[Link] # Toutes les interactions JS
■ ■■■ uploads/ # Images uploadees
■■■ api/
■■■ [Link] # Endpoint REST
Frontend JS - Commentaires dynamiques
// public/js/[Link]
async function chargerCommentaires(articleId) {
const zone = [Link]("#commentaires");
[Link] = '<p>Chargement...</p>';
const rep = await fetch(`/api/commentaires?article=${articleId}`);
const { commentaires } = await [Link]();
[Link] = [Link] === 0
? "<p>Soyez le premier a commenter !</p>"
: [Link](c => `
<div class="commentaire" id="c-${[Link]}">
<div class="avatar">${[Link][0].toUpperCase()}</div>
<div class="corps">
<strong>${escapeHTML([Link])}</strong>
<time>${new Date([Link]).toLocaleDateString("fr-FR")}</time>
<p>${escapeHTML([Link])}</p>
</div>
</div>`
).join("");
}
Guide Complet · JavaScript · HTML · PHP Page 21
async function ajouterCommentaire(event) {
[Link]();
const form = [Link];
const articleId = [Link];
const contenu = [Link]("textarea").[Link]();
if (!contenu || [Link] < 5) return;
await fetch("/api/commentaires", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ articleId, contenu })
});
[Link]();
await chargerCommentaires(articleId); // Recharger
}
const articleId = [Link]("[data-article-id]")?.[Link];
if (articleId) {
chargerCommentaires(articleId);
[Link]("#form-commentaire")
?.addEventListener("submit", ajouterCommentaire);
}
Guide Complet · JavaScript · HTML · PHP Page 22
11 · Securite Web
Attaque Description Protection
SQL Injection Injection SQL dans les requetes Requetes preparees PDO
XSS Injection de JS dans les pages htmlspecialchars() / escapeHTML()
CSRF Requete forgee depuis un autre site Token CSRF, SameSite cookies
Upload malveillant Upload de fichiers PHP executables Verifier MIME, stocker hors webroot
Brute Force Tentatives massives de connexion Rate limiting, CAPTCHA, lockout
Session Hijacking Vol du cookie de session HTTPS, httpOnly, regenerate_id()
Clickjacking iframe invisible sur votre site X-Frame-Options: DENY
En-tetes de securite HTTP - .htaccess
# .htaccess - En-tetes de securite essentiels
<IfModule mod_headers.c>
Header set X-XSS-Protection "1; mode=block"
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"
Header set Strict-Transport-Security "max-age=31536000"
Header set Content-Security-Policy "
default-src 'self';
script-src 'self' [Link]
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
"
Header unset X-Powered-By
</IfModule>
Guide Complet · JavaScript · HTML · PHP Page 23
12 · Bonnes Pratiques et Outils
Checklist de deploiement
■ Toujours utiliser HTTPS (certificat SSL gratuit via Let's Encrypt)
■ Stocker les secrets dans .env, jamais dans le code source
■ Desactiver l'affichage des erreurs en production
■ Minifier et compresser les assets JS/CSS (Vite, esbuild)
■ Utiliser un CDN pour les fichiers statiques (images, CSS, JS)
■ Mettre en cache les requetes frequentes (Redis, APCu)
■ Tester les performances avec Google Lighthouse
■ Sauvegardes automatiques de la base de donnees
■ Utiliser Git + branches + pull requests pour chaque changement
■ Logger les erreurs serveur (Monolog en PHP, Sentry pour JS)
Outils incontournables en 2025
Categorie Outil Usage
Editeur VS Code IDE gratuit, extensions PHP/JS
Versioning Git + GitHub Gestion du code source
Local Laragon / XAMPP Serveur Apache+PHP+MySQL local
CSS Tailwind CSS Framework utilitaire moderne
JS Build Vite Bundler rapide avec HMR
PHP Composer Gestionnaire de paquets PHP
API test Thunder Client Tester vos endpoints REST
DB GUI TablePlus Interface graphique MySQL
Perf. Lighthouse Audit performance / accessibilite
Guide Developpement Web · JavaScript · HTML · PHP · 2025
Guide Complet · JavaScript · HTML · PHP Page 24