Web Development

Chapitre 1 : Introduction au développement web

 Qu’est-ce que le Web ?

 Différence Web / Internet
 Modèle Client / Serveur
 URL, HTTP (requêtes, réponses, codes)
 Technologies côté client vs côté serveur
 Frameworks (définition, exemples)

Chapitre 2 : Programmation Front-end

 HTML : balises, structure, formulaires, liens, images, tableaux

 HTML5 : nouvelles balises sémantiques (header, nav, section, article…), audio, vidéo, canvas
 CSS : sélecteurs, classes, ID, styles, positionnement, float, flex (implicite)
 JavaScript : syntaxe, variables, fonctions, événements, manipulation du DOM
 jQuery : sélecteurs, événements, AJAX, manipulation HTML/CSS

Chapitre 3 : Programmation Back-end

 PHP : variables, formulaires ($_GET, $_POST), sessions, cookies

 Accès aux bases de données (MySQL, mysqli)
 Notions objet en PHP

Chapitre 4 : Frameworks du Web

 Côté client : Angular, React, [Link]

 Côté serveur : Laravel (PHP), Django (Python), Ruby on Rails
 Focus sur Laravel : MVC, migrations, Eloquent, contrôleurs, routes, Blade
 Le développement web, c’est l’art de créer des sites et des applications accessibles via un navigateur.
le web est partout : sites e-commerce, réseaux sociaux, dashboards, espaces clients, applications métier… Derrière
chaque clic, il y a du code qui s’exécute soit chez l’utilisateur (front-end), soit sur un serveur (back-end).

.
Dictionnaire technique du développement web

1. Généralités sur le Web

Terme Définition simple

Web Système d’information basé sur des documents hypertextes consultables via un navigateur

Réseau physique qui connecte des ordinateurs dans le monde entier. Le Web est un service
Internet
d’Internet

Site web Ensemble de pages web reliées entre elles

Page web Document unique codé en HTML, consultable avec un navigateur

Application
Logiciel complet (interaction, traitement, base de données) accessible via un navigateur
web

Ressource web Tout contenu identifiable sur le web : HTML, image, vidéo, script, CSS, etc.

URI Uniform Resource Identifier : identifiant unique d’une ressource sur le web

URL Uniform Resource Locator : adresse précise d’une ressource (ex: [Link] )

Hypertexte Document contenant des liens qui permettent de naviguer vers d’autres documents
2. Architecture Client / Serveur

Terme Définition simple

Client Programme qui envoie des requêtes (ex: navigateur web chrome)

Serveur Programme qui écoute et répond aux requêtes (ex: Apache, Nginx)

Requête Message envoyé par le client au serveur

Réponse Message renvoyé par le serveur au client

Protocole Ensemble de règles qui régissent la communication entre client et serveur

TCP/IP Protocole de base d’Internet qui assure la transmission fiable des données

3. Protocole HTTP

Terme Définition simple

HTTP HyperText Transfer Protocol : protocole de communication entre navigateur et serveur web

HTTPS Version sécurisée de HTTP (chiffrement SSL/TLS)

GET Méthode HTTP pour demander une ressource (paramètres visibles dans l’URL)

POST Méthode HTTP pour envoyer des données (paramètres cachés dans le corps)

PUT Méthode HTTP pour envoyer ou remplacer une ressource

DELETE Méthode HTTP pour supprimer une ressource

HEAD Méthode HTTP pour demander uniquement les en-têtes d’une ressource
Terme Définition simple

OPTIONS Méthode HTTP pour connaître les méthodes supportées par le serveur

TRACE Méthode HTTP pour voir le chemin d’une requête (débogage)

CONNECT Méthode HTTP pour créer un tunnel TCP/IP (utilisé pour HTTPS)

En-tête (header) Métadonnées d’une requête ou réponse (type de contenu, date, navigateur, etc.)

Corps (body) Données principales de la requête ou réponse (ex: HTML, paramètres POST)

Code HTTP Nombre à 3 chiffres indiquant le résultat d’une requête (200: OK, 404: non trouvé, 500: erreur serveur)

Statut 1xx Information (ex: 100 Continue)

Statut 2xx Succès (ex: 200 OK)

Statut 3xx Redirection (ex: 301 déplacé)

Statut 4xx Erreur client (ex: 404 page introuvable)

Statut 5xx Erreur serveur (ex: 500 erreur interne)

4. Technologies Front-end (côté client)

Terme Définition simple

Partie d’une application web qui s’exécute dans le navigateur (ce que l’utilisateur
Front-end
voit)

HTML HyperText Markup Language : langage de balisage pour structurer une page web

CSS Cascading Style Sheets : langage pour mettre en forme (styler) une page web

JavaScript Langage de programmation qui rend les pages web interactives

Balise Élément HTML délimité par < > (ex: <p>, <div>, <h1>)

Attribut Information complémentaire dans une balise (ex: class="nom", id="titre")

Classe (CSS) Sélecteur .maClasse pour appliquer un style à plusieurs éléments

ID (CSS) Sélecteur #monId pour identifier un élément unique

Sélecteur Expression CSS qui cible des éléments à styler

Modèle objet du
Représentation arborescente d’une page HTML manipulable en JavaScript
document (DOM)

Événement Action utilisateur (clic, survol, saisie…) déclenchant une fonction JavaScript

Bibliothèque JavaScript simplifiant la manipulation du DOM, les événements et

jQuery
AJAX
Terme Définition simple

Asynchronous JavaScript and XML : technique pour charger des données sans
AJAX
recharger la page

Single Page Application : application web qui charge une seule page HTML et
SPA
met à jour dynamiquement le contenu

5. Technologies Back-end (côté serveur)

Terme Définition simple

Partie d’une application web qui s’exécute sur le serveur (traitements, base de
Back-end
données)

Common Gateway Interface : ancienne interface pour exécuter des programmes sur le
CGI
serveur

PHP PHP: Hypertext Preprocessor : langage de script côté serveur intégré dans le HTML

Servlet Programme Java qui s’exécute sur un serveur pour générer des pages dynamiques

Session Mécanisme pour conserver des données utilisateur entre plusieurs requêtes

Cookie Petit fichier stocké sur le navigateur pour mémoriser des informations

Variable
Variable PHP accessible partout (ex: $_GET, $_POST, $_SESSION)
superglobale

$_GET Tableau PHP contenant les paramètres d’une requête GET

$_POST Tableau PHP contenant les paramètres d’une requête POST

Terme Définition simple

$_SESSION Tableau PHP contenant les variables de session

include / require Instructions PHP pour insérer un fichier dans un autre

SQL Structured Query Language : langage pour interagir avec une base de données

MySQL Système de gestion de base de données relationnelle (SGBDR)

mysqli Extension PHP pour se connecter à MySQL

Migration Fichier décrivant les modifications de la structure d’une base de données

6. Frameworks

Terme Définition simple

Framework Ensemble d’outils et de règles pour développer plus rapidement et proprement

Modèle-Vue-Contrôleur : architecture logicielle séparant données (Modèle), interface (Vue)

MVC
et logique (Contrôleur)

Modèle Gère les données et les accès à la base de données

Vue Gère l’affichage (HTML, CSS)

Contrôleur Gère les requêtes utilisateur et coordonne Modèle/Vue

Object Relational Mapping : technique qui relie les objets du code aux tables de la base de
ORM
données
Terme Définition simple

Eloquent ORM de Laravel (implémente le pattern Active Record)

Blade Moteur de template de Laravel pour écrire du PHP dans les vues

Route Correspondance entre une URL et une fonction du contrôleur

Migration
Fichier PHP qui crée/modifie des tables dans la base de données
Laravel

Composer Gestionnaire de dépendances PHP (installe des bibliothèques)

Artisan Interface en ligne de commande de Laravel

7. HTML spécifique

Terme Définition simple

Balise sémantique Balise qui donne du sens au contenu (header, nav, section, article, footer, aside)

<header> En-tête d’une page ou d’une section

<nav> Zone de navigation (menu)

<section> Section thématique d’une page

<article> Contenu indépendant (article de blog, actualité)

<aside> Contenu annexe (sidebar, encart)

Terme Définition simple

<footer> Pied de page

<canvas> Zone de dessin manipulable en JavaScript

<audio> / <video> Balises pour intégrer du son et de la vidéo sans plugin

8. CSS spécifique

Terme Définition simple

Feuille de styles Fichier .css contenant des règles de mise en forme

Cascade Principe CSS où le dernier style défini l’emporte

Float Propriété CSS pour faire flotter un élément (gauche/droite)

Position absolute Positionnement par rapport au coin supérieur gauche du conteneur

Position relative Positionnement par rapport à la position normale de l’élément

Position fixed Positionnement fixe dans la fenêtre (reste visible en défilant)

z-index Ordre de superposition des éléments (plus grand = au-dessus)

Box model Modèle CSS : contenu + padding + bordure + marge

Responsive Adaptation automatique d’une page à la taille de l’écran

9. JavaScript / jQuery spécifique

Terme Définition simple

Fonction Bloc de code réutilisable (ex: function maFonction() { ... })

Événement JS click, mouseover, blur, focus, submit, load…

addEventListener Méthode JS pour attacher un événement à un élément

$(document).ready() Fonction jQuery qui s’exécute quand la page est chargée

Sélecteur jQuery $("#id"), $(".classe"), $("p")

Méthode attr() jQuery : lire/modifier un attribut HTML

Méthode css() jQuery : lire/modifier un style CSS

Méthode load() jQuery : charger des données du serveur sans recharger la page

10. PHP spécifique

Terme Définition simple

Variable PHP Commence par $ (ex: $nom = "Ahmed";)

echo Affiche du texte ou des variables en PHP

Condition if/else Structure de contrôle (si… sinon)

Boucle for/while Répète un bloc plusieurs fois

Terme Définition simple

Fonction PHP function nomFonction($param) { ... }

Tableau PHP $tab = array("valeur1", "valeur2"); ou $tab = ["valeur1", "valeur2"];

include_once Inclut un fichier une seule fois

json_encode Convertit un tableau PHP en chaîne JSON

json_decode Convertit une chaîne JSON en tableau PHP

setcookie Fonction PHP pour créer un cookie

session_start Fonction PHP pour démarrer une session

11. Laravel spécifique

Terme Définition simple

Laravel Framework PHP populaire suivant l’architecture MVC

php artisan serve Commande Laravel pour lancer un serveur de développement

php artisan make:model Crée un modèle (classe liée à une table)

php artisan make:controller Crée un contrôleur

php artisan migrate Exécute les migrations (crée les tables)

Route::get() Définit une route qui répond aux requêtes GET

Terme Définition simple

view() Fonction Laravel qui retourne une vue

return view('nom', ['var' => $valeur]) Retourne une vue en lui passant des variables

.env Fichier de configuration (base de données, clés, etc.)

Blade {{ $variable }} Syntaxe Laravel pour afficher une variable dans une vue

12. Outils et environnements

Terme Définition simple

Navigateur Logiciel client pour consulter le web (Chrome, Firefox, Edge)

Serveur web Logiciel serveur (Apache, Nginx)

Laragon / XAMPP / WAMP Environnement local pour développer en PHP/MySQL

phpMyAdmin Interface web pour administrer MySQL

Postman Outil pour tester des requêtes HTTP

Visual Studio Code Éditeur de code (très utilisé pour le web)

Git Logiciel de gestion de versions

Composer Gestionnaire de dépendances PHP

Validateur HTML W3C Outil en ligne pour vérifier la conformité du HTML

Chapitre 1 : Introduction au développement web

1. Qu’est-ce que le Web ?

Le Web, ou World Wide Web, est un immense système d’information composé de
sites reliés entre eux via Internet. Chaque site contient des documents hypertextes,
c’est-à-dire des textes, images, vidéos ou sons, reliés par des liens. Ces documents
sont stockés sur un ordinateur appelé serveur, qui les transmet à un autre
programme appelé client, généralement un navigateur comme Chrome ou Firefox.

Il ne faut pas confondre le Web avec Internet. Internet est le réseau physique qui
connecte les ordinateurs du monde entier. Le Web n’est qu’un service parmi d’autres
sur Internet, au même titre que le courrier électronique (Email), le transfert de fichiers
(FTP) ou les groupes de discussion (News). Aujourd’hui, on accède très souvent à ces
services via une interface web, ce qu’on appelle le cloud.

Historiquement, Internet est né en 1969 avec ARPAnet, un réseau militaire

décentralisé. En 1972 apparaît l’Email, et en 1974 le réseau s’étend au monde
universitaire et militaire. C’est en 1991 que le Web est inventé par Tim Berners-Lee,
qui crée la première version du HTML et fonde le W3C (World Wide Web Consortium)
pour garantir la normalisation et l’interopérabilité du web.

2. Organisation du Web : l’architecture Client / Serveur

Un site web repose matériellement sur un ordinateur connecté en permanence à
Internet, sur lequel tourne un logiciel appelé serveur web (les plus connus sont
Apache et nginx). Ce serveur web reste constamment à l’écoute, attendant qu’un
programme client (le navigateur) lui envoie une requête.

Quand le serveur reçoit une requête, il l’analyse pour comprendre quel document est
demandé, il le recherche sur sa machine, puis il le renvoie au client. Ce modèle
s’appelle l’architecture client/serveur.
 3. Ressource web, page web et site web
Une ressource web est toute information identifiable sur le web grâce à un URI
(Uniform Resource Identifier). Il peut s’agir d’un document HTML, d’une image, d’un
script, d’une feuille de style CSS, d’un son, d’une animation, ou même d’un résultat
généré dynamiquement par un programme.

Une page web est un document généralement écrit en HTML que l’on peut consulter
avec un navigateur

4. Application web
Une application web est un logiciel complet — avec interactions, traitements, base de
données — hébergé sur un serveur web et utilisant des pages web comme interface.
On y accède via un navigateur. Une application web peut être statique (le contenu ne
change pas sauf modification manuelle) ou dynamique (le contenu est généré à la
volée en fonction des actions de l’utilisateur ou des données).

5. L’URL : l’adresse d’une ressource

Pour trouver une ressource sur le web, on utilise une URL (Uniform Resource Locator),
qui est une sorte d’adresse précise. Une URL se décompose ainsi :

 Le protocole (http ou https)

 Éventuellement un identifiant et un mot de passe
 Le nom du serveur (ex: [Link] )
 Le port (80 pour HTTP, 443 pour HTTPS)
 Le chemin de la ressource (ex: news/conferences)

Exemple :
[Link]
6. Le protocole HTTP
HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur le web depuis
1990. Il permet à un client et un serveur de communiquer pour échanger des
ressources identifiées par des URLs. HTTP repose sur TCP/IP, le protocole de base
d’Internet qui garantit une transmission fiable des données.
 Évolution du protocole HTTP

 HTTP 0.9 : très simple, ne permettait que la méthode GET pour récupérer une
ressource.
 HTTP 1.0 : ajout des méthodes POST et HEAD.
 HTTP 1.1 : permet d’envoyer plusieurs requêtes sur une seule connexion TCP, et
ajoute PUT, DELETE, TRACE, OPTIONS.
 HTTP 2.0 : améliore la vitesse de chargement des pages.
 HTTP 3.0 : remplace TCP par un nouveau protocole appelé QUIC, encore plus rapide.

7. Les méthodes HTTP

Une méthode HTTP indique au serveur ce que le client souhaite faire. Voici les
principales :

 GET : demander une ressource (page, image, etc.). Les paramètres éventuels sont
visibles dans l’URL.
 POST : envoyer des données au serveur (exemple : un formulaire). Les paramètres
sont cachés dans le corps de la requête.
 PUT : envoyer ou remplacer complètement une ressource.
 DELETE : supprimer une ressource.
 HEAD : comme GET, mais sans le corps : on reçoit uniquement les en-têtes
(informations sur la ressource).
 OPTIONS : demander au serveur quelles méthodes HTTP il supporte.
 TRACE : permet de voir le chemin exact suivi par la requête à travers les proxies.
 CONNECT : transforme la connexion en tunnel TCP/IP transparent (utilisé pour
HTTPS). "S'il te plaît, crée un tunnel entre moi et un autre serveur, pour qu'on puisse
échanger des données en toute sécurité sans que tu regardes ce qu'on dit."
 8. La requête HTTP
Une requête HTTP est le message envoyé par le client au serveur. Elle contient
plusieurs parties :

 La ligne de requête : méthode + chemin de la ressource +[pour get param server]+

version HTTP.
 Les en-têtes (headers) : des métadonnées comme :
le nom du serveur (Host),
le type de navigateur (User-Agent),
les formats acceptés (Accept),
la langue (Accept-Language), etc.

 Le corps (body) : optionnel, utilisé surtout avec POST pour envoyer les données du
formulaire.

Exemple de requête GET

Dans une requête GET, les paramètres sont collés à l’URL après un point
d’interrogation. Par exemple :
GET /[Link]?user=jhon&pass=java HTTP/1.1
On voit ici que le mot de passe est visible dans l’URL, ce qui n’est pas sécurisé.

Exemple de requête POST

Dans une requête POST, les paramètres sont placés dans le corps de la requête, donc
invisibles dans l’URL.
POST /[Link] HTTP/1.1 avec un corps contenant user=jhon&pass=java.
 9. La réponse HTTP
Quand le serveur répond, il envoie une réponse HTTP contenant :

 Une ligne de statut : la version HTTP, un code numérique et un message.

 Des en-têtes : date, type de contenu (Content-Type), taille, etc.
 Un corps : le contenu demandé (par exemple le code HTML d’une page).

Les codes de statut (familles)

 1xx : information (ex: 100 Continue)

 2xx : succès (ex: 200 OK pour une requête GET réussie)
 3xx : redirection (la ressource a changé d’adresse)
 4xx : erreur côté client (ex: 404 Page non trouvée)
 5xx : erreur côté serveur (ex: 500 Erreur interne)

Exemple de réponse
Request URL: [Link]
Request Method: GET
Status Code: 200 OK
Remote Address: [Link]
<!DOCTYPE html><html>... (contenu de la page)
 10. Langages du web – côté client (Front-end)
Le développement côté client (front-end) consiste à produire du code qui sera
exécuté directement par le navigateur de l’utilisateur. On distingue trois familles de
langages :

 Les langages de balisage : HTML et XML, qui structurent le contenu.

 Les langages de mise en forme : CSS, qui définissent l’apparence (couleurs, polices,
positionnement).
 Les langages de script : JavaScript (et autrefois VBScript), qui rendent la page
interactive.

Le problème de base
Quand on ouvre une page web, le navigateur reçoit du code (HTML, CSS, JavaScript).
Mais tout ce code ne s'exécute pas de la même façon.

 HTML : le navigateur l'affiche (structure)

 CSS : le navigateur l'applique (style)
 JavaScript : le navigateur l'exécute (interaction)

Mais il existe d'autres façons de faire exécuter du code dans le navigateur.

Ces exécutions ont lieu sur le poste client, donc le navigateur doit être capable de les
interpréter. Il existe plusieurs façons d’exécuter du code côté client :

 Scripts embarqués : du code JavaScript directement intégré dans la page HTML.

Le navigateur lit la page, tombe sur ce script, et l'exécute immédiatement.

 Applets Java : petits programmes Java envoyés au client et exécutés dans une
machine virtuelle (aujourd’hui obsolète).

Un petit programme écrit en Java (un autre langage) qui est envoyé depuis le serveur
vers le navigateur. Le navigateur doit avoir une machine virtuelle Java (JVM) pour
l'exécuter.

 Plugins propriétaires : comme Flash (disparu).

Un petit logiciel supplémentaire qu'il faut installer dans le navigateur pour qu'il
puisse exécuter certains types de contenus (animations, vidéos, jeux).
11. Langages du web – côté serveur (Back-end)
Le développement côté serveur (back-end) s’exécute sur le serveur, et le résultat est
une page HTML pure qui est renvoyée au navigateur. L’utilisateur ne voit jamais le
code serveur.

CGI (Common Gateway Interface)

CGI est une ancienne interface qui permet au serveur web de lancer un programme
externe (écrit en Perl, C, Shell, etc.) pour traiter une requête. Les paramètres de
l’utilisateur (souvent issus d’un formulaire) sont transmis à ce programme, qui génère
une page HTML dynamique.

Interpréteurs intégrés (PHP, ASP)

Avec cette approche, on écrit directement des scripts à l’intérieur même du code
HTML. Le serveur web, qui possède un interpréteur intégré (par exemple pour PHP),
repère les blocs de script, les exécute, et remplace le code serveur par le résultat
(généralement du HTML). Le navigateur ne reçoit que du HTML pur, sans aucune
trace du script. Par exemple :

php

<html><body><?php echo "Bonjour"; ?></body></html>

Le serveur exécute <?php echo "Bonjour"; ?>, génère Bonjour, et envoie au client :

html

<html><body>Bonjour</body></html>

Les Servlets
Les servlets sont des programmes écrits en Java qui tournent sur le serveur web et
génèrent dynamiquement des pages HTML.
 12. Synthèse des langages web
On peut résumer l’ensemble des technologies web en deux grandes familles :

 Côté serveur : CGI (Perl, C, Shell), modules HTTPD, scripts intégrés (PHP, ASP),
servlets (Java), scripts CGI-like (mod_perl/Apache).
 Côté client : applets (Java, ActiveX), scripts intégrés à la page HTML (JavaScript,
VBScript).

Le web interactif combine ces deux approches.

13. Frameworks web

Un framework logiciel est une base de travail qui permet aux développeurs de créer
des applications plus rapidement et de manière plus normalisée. Il fournit des briques
logicielles prêtes à l’emploi et impose une certaine organisation du code.

Laravel (framework PHP)

1. Tu ne commences pas de zéro : Tu tapes une commande et Laravel crée tout un

dossier structuré pour toi.
2. Tu respectes l'architecture : Les fichiers vont à des endroits précis (les modèles ici,
les vues là, les contrôleurs ailleurs).
3. Tu utilises les commandes du framework : php artisan make:controller crée un
contrôleur automatiquement.
4. Tu hérites des classes du framework : Ton contrôleur hérite de Controller (une
classe déjà écrite par Laravel).

Tu n'as pas à réinventer la roue. Laravel a déjà résolu pour toi : les routes, la sécurité,
l'accès à la base de données, les sessions, etc.

Frameworks côté client (Front-end)

 CSS : Bootstrap
 JavaScript : AngularJS, ReactJS, [Link]

Frameworks côté serveur (Back-end)

 PHP : Laravel, Symfony, Zend
 Python : Django
 Java : J2E (Jakarta EE)
 C# : [Link]
 Ruby : Ruby on Rails
Architecture full-stack
Un développeur full-stack maîtrise à la fois le front-end (HTML, CSS, JavaScript,
frameworks) et le back-end (PHP, Python, bases de données, serveurs). Il peut ainsi
construire une application web complète, de l’interface utilisateur jusqu’au traitement
des données et au stockage.
Applet (côté client - obsolète)
[Page HTML]
|
|--> contient une balise <applet>
|
v
[Fichier Java compilé] ---> s'exécute dans le navigateur
|
v
(animation, interaction)

Servlet (côté serveur - toujours utilisé)

[Client] --- requête ---> [Serveur]
|
v
[Servlet Java]
|
|-- génère du HTML
v
[Client] <--- page HTML --- [Serveur]

Pour les fichiers :

Ce qui compte, c'est le contenu et ce qui est exécuté, pas l'extension du fichier.

Exemple :

php

<!-- [Link] -->

<html>

<body>

<?php echo "Bonjour"; ?>

</body>

</html>

Même si le fichier s'appelle .html, il contient du code PHP. Pour que le serveur exécute ce code, il faut
le configurer pour qu'il reconnaisse les fichiers .html comme pouvant contenir du PHP. Mais
techniquement, c'est bien du PHP.

Donc on dit : "Cette page est une page PHP" parce qu'elle contient du code PHP, même si son
extension est .html.
 Ce qu'il faut retenir pour l’examen
Le langage d'une page est défini par le code qu'elle contient et par ce que le
serveur exécute, pas par l'extension du fichier.

Si un fichier .html contient <?php ... ?> et que le serveur interprète ce code,
alors cette page est une page PHP.

Dans schéma "Langages du Web – synthèse" :

 Scripts intégrés à la page HTML (PHP, ASP...) : c'est exactement ça. Le code PHP
est intégré (mélangé) à l'intérieur du HTML.
 Ce n'est pas un fichier séparé. C'est du code serveur à l'intérieur d'une page qui
ressemble à du HTML.

l'extension n'est qu'une convention, ce qui compte c'est la présence du code

serveur.
HTML - Toutes les balises et leurs attributs

1. Structure de base du document

<html>

Attribut Valeur Description

lang fr, en, ar... Définit la langue du document

Rôle : Balise racine qui contient toute la page.

html

<html lang="fr">… …</html>

<head>

Rôle : Contient les métadonnées (informations sur la page, non affichées).

html

<head>
<title>Ma page</title>
</head>

<title>

Rôle : Définit le titre affiché dans l'onglet du navigateur.

html

<title>Accueil - Mon Site</title>

<body> < ! - - apres head - - >

Attribut Description

bgcolor Couleur de fond (ex: "#FFFFFF")

text Couleur du texte

link Couleur des liens non visités

vlink Couleur des liens visités

alink Couleur des liens au moment du clic

background Image de fond

Rôle : Contient tout le contenu visible de la page.

html

<body bgcolor="#f0f0f0" text="#000000" link="#0000FF">

<!-- contenu -->
</body>

<!-- --> (commentaire)

Rôle : Ajouter des notes dans le code (non affichées).

html

<!-- Ceci est un commentaire -->

2. Les paragraphes et titres

<p>

Attribut Description

align center, left, right, justify (alignement du texte)

Rôle : Définit un paragraphe.

html

<p align="center">Ceci est un paragraphe centré.</p>

<h1> à <h6>

Attribut Description

align center, left, right (alignement)

Rôle : Titres (h1 = plus grand, h6 = plus petit).

html

<h1 align="center">Titre principal</h1>

<h2>Sous-titre</h2>

<br>

Rôle : Saut de ligne (retour à la ligne).

html

Première ligne<br>Deuxième ligne

3. Formatage du texte

<b>

Rôle : Texte en gras.

html

<b>Texte gras</b>

<i>

Rôle : Texte en italique.

html

<i>Texte italique</i>

<u>

Rôle : Texte <u>souligné</u>.

html

<u>Texte souligné</u>

<strong>

Rôle : Texte important (gras, mais avec valeur sémantique).

html

<strong>Important</strong>

<em>

Rôle : Texte mis en valeur (italique, valeur sémantique).

html

<em>À souligner</em>
<sup>

Rôle : Exposant (au-dessus de la ligne).

html

E=mc² <!-- donne E=mc² -->

<sub>

Rôle : Indice (en dessous de la ligne).

html

H₂O <!-- donne H₂O -->

<pre>

Rôle : Texte pré-formaté (conserve les espaces et sauts de ligne).

html

<pre>
Ligne avec espaces
et sauts de ligne
</pre>

<blockquote>

Rôle : Citation longue (avec retrait). <blockquote> ajoute simplement un espace

(marge) au début pour indiquer visuellement que "ceci est un texte spécial différent
du reste".

html

<blockquote>
Ceci est une longue citation.
</blockquote>

<q> sert à faire une citation courte à l'intérieur d'une phrase.

Le navigateur ajoute automatiquement des guillemets autour du texte cité.
4. Les listes

<ul> (Unordered List - liste non numérotée)

Attribut Description

type disc, circle, square (type de puce)

html

<ul type="square">
<li>Élément 1</li>
<li>Élément 2</li>
</ul>

<ol> (Ordered List - liste numérotée)

Attribut Description

type 1, A, a, I, i (numérotation)

start Valeur de départ

html

<ol type="A" start="3">

<li>Troisième</li>
<li>Quatrième</li>
</ol>
<li>

Attribut Description

value Réinitialise la valeur du compteur (pour <ol>)

type Change le type pour cet élément

Rôle : Élément d'une liste.

html

<ol>
<li value="5">Commence à 5</li>
<li>Continue à 6</li>
</ol>

Règle à retenir absolument

value sur un <li> a priorité sur start de <ol>.
Une fois qu'on a utilisé value, le compteur continue normalement à partir de cette
valeur +1 pour l'élément suivant.
5. Les liens hypertextes

<a> (ancre / lien)

Attribut Description

href URL de destination

_blank (nouvel onglet), _self (même onglet), _parent le parent (si on est dans une
frame imbriquée), _top Ouvre le lien dans toute la fenêtre (sort des frames)
target
target dit au navigateur : "Où dois-je ouvrir le lien ?"
Dans le même onglet ? Un nouvel onglet ? Une autre fenêtre ?

id Définit une ancre (point de destination)

title Info-bulle au survol

Rôle : Créer un lien ou une ancre.

html

<!-- Lien vers une autre page -->

<a href="[Link] target="_blank">Google</a>

<!-- Lien vers une ancre dans la même page -->

<a href="#section1">Aller à la section 1</a>

<!-- Définir une ancre -->

<h2 id="section1">Section 1</h2>

<!-- Lien email -->

<a href="[Link] un mail</a>
6. Les images

<img>

Attribut Description

src Chemin de l'image (obligatoire)

alt Texte alternatif (si image non chargée)

width Largeur en pixels ou %

height Hauteur en pixels ou %

vspace Marge verticale (espace au-dessus/en dessous)

hspace Marge horizontale (espace à gauche/droite)

Rôle : Insérer une image.

html

<img src="[Link]" alt="Description de l'image" width="300" height="200" vspace=

"10" hspace="5">
7. Les tableaux

<table>

Attribut Description

border Épaisseur de la bordure

width Largeur

height Hauteur

bgcolor Couleur de fond

cellpadding Espacement interne des cellules

cellspacing Espacement entre cellules

Rôle : Créer un tableau.

html

<table border="1" width="500">

<!-- lignes et cellules -->
</table>
<tr> (table row)
Rôle : Définit une ligne.

Attribut Description

align left, center, right (alignement horizontal)

valign top, middle, bottom (alignement vertical)

bgcolor Couleur de fond

html

<tr align="center" valign="middle">

<TD VALIGN = Top Align = Left>

<TD VALIGN = Top Align = Center>

<TD VALIGN = Top Align = Right>

<TD VALIGN = Middle Align = Left>

<TD VALIGN = Middle Align = Center>

<TD VALIGN = Middle Align = Right>

<TD VALIGN = Bottom Align = Left>

<TD VALIGN = Bottom Align = Center>

<TD VALIGN = Bottom Align = Right>

<th> (table header)
Rôle : Cellule d'en-tête (gras et centré par défaut).

Attribut Description

colspan Fusionne plusieurs colonnes

rowspan Fusionne plusieurs lignes

width Largeur

height Hauteur

html

<th colspan="2">Titre sur 2 colonnes</th>

<td> (table data)
Rôle : Cellule de données.

Attribut Description

colspan Fusionne plusieurs colonnes

rowspan Fusionne plusieurs lignes

align Alignement horizontal

valign Alignement vertical

html

<td rowspan="2">Cette cellule prend 2 lignes</td>

<caption>

Attribut Description

align left, center, right

Rôle : Titre du tableau.

html

<caption align="center">Tableau des étudiants</caption>

8. Les formulaires

<form>

Attribut Description

name Nom du formulaire

method GET ou POST

action URL du script qui traite les données

Rôle : Conteneur des champs de formulaire.

html

<form name="inscription" method="POST" action="[Link]">

<input>

Attribut Description

type text, password, checkbox, radio, submit, reset, hidden, etc.

C'est le nom du champ (comme une étiquette pour le serveur) Seul le

name
développeur et le serveur le voient

Valeur du champ Ce qui se passe si l'utilisateur ne tape rien La valeur est envoyée au serveur comme si
value
l'utilisateur l'avait écrite

checked Pour checkbox/radio (coché par défaut)

Texte indicatif (HTML5) Un texte grisé à l'intérieur de la case qui donne un

placeholder
exemple : "ex: Dupont"

Rôle : Champ de saisie.

Souvent utilise avec label <label> est un texte affiché à côté du champ pour dire à l'utilisateur ce qu'il
doit saisir.
C'est l'étiquette visible du [Link] à name (caché, pour le serveur), label est visible par
l'utilisateur.
html

<!-- Champ texte -->

<input type="text" name="nom" value="Dupont">
<!-- Mot de passe -->
<input type="password" name="mdp">
<!-- Case à cocher -->
<input type="checkbox" name="newsletter" value="oui" checked>
<!-- Bouton radio -->
<input type="radio" name="sexe" value="homme"> Homme
<input type="radio" name="sexe" value="femme"> Femme
<!-- Bouton d'envoi -->
<input type="submit" value="Envoyer">
<!-- Bouton d'effacement -->
<input type="reset" value="Effacer">
<!-- Champ caché -->
<input type="hidden" name="id" value="123">
<select>

Attribut Description

name Nom du champ

multiple Permet de sélectionner plusieurs options (ecrit comme elle est pas de = ‘’… ‘’)

Rôle : Liste déroulante.

html

<select name="ville">
<option value="rabat">Rabat</option>
<option value="casablanca" selected>Casablanca</option>
<option value="fes">Fès</option>
</select>

<option>

Attribut Description

value Valeur envoyée au serveur

selected Option sélectionnée par défaut (=’’selected’’)

Rôle : Élément d'une liste déroulante.

html

<option value="paris" selected>Paris</option>

<textarea>

Attribut Description

name Nom du champ

cols Nombre de colonnes (largeur)

rows Nombre de lignes (hauteur)

Rôle : Zone de texte multi-lignes.

html

<textarea name="commentaire" cols="50" rows="10">

Texte initial
</textarea>
9. HTML5 - Nouvelles balises sémantiques

<header>

Rôle : En-tête de la page ou d'une section.

html

<header>
<h1>Mon Site</h1>
</header>
<nav>

Rôle : Zone de navigation (menus).

html

<nav>
<a href="[Link]">Accueil</a>
<a href="[Link]">Contact</a>
</nav>

<section>

Rôle : Section thématique d'une page.

html

<section>
<h2>Nos services</h2>
<p>Description des services...</p>
</section>
<article>

Rôle : Contenu indépendant (article de blog, actualité).

html

<article>
<h3>Titre de l'article</h3>
<p>Contenu de l'article...</p>
</article>

<aside>

Rôle : Contenu annexe (sidebar, encart publicitaire).

html

<aside>
<p>Publicité ou information complémentaire</p>
</aside>
<footer>

Rôle : Pied de page.

html

<footer>
<p>© 2024 Mon Site - Tous droits réservés</p>
</footer>

<mark>

Rôle : Surligner du texte.

html

<p>Le mot <mark>important</mark> est surligné.</p>

<time>

Rôle : Indiquer une date/heure.

html

<time datetime="2024-01-15">15 janvier 2024</time>

<progress>

Rôle : Barre de progression.

html

<progress value="70" max="100">70%</progress>

<meter>

Rôle : Indicateur de mesure (note, niveau, etc.).

html

<meter value="0.8">80%</meter>

<video>

Attribut Description

src Chemin de la vidéo

controls Affiche les contrôles (play, pause)

width Largeur

height Hauteur

autoplay Lecture automatique

Rôle : Intégrer une vidéo.

html

<video src="video.mp4" controls width="640" height="360"></video>

<audio>

Attribut Description

src Chemin du fichier audio

controls Affiche les contrôles

Rôle : Intégrer un fichier audio.

html

<audio src="musique.mp3" controls></audio>

<canvas>

Rôle : Zone de dessin (manipulée avec JavaScript).

html

<canvas id="monCanvas" width="200" height="100"></canvas>

10. Balises génériques (avec CSS)

<div>

Rôle : Conteneur générique de type bloc (saut de ligne avant/après).

html

<div class="conteneur">
<!-- éléments -->
</div>

<span>

Rôle : Conteneur générique de type inline (ne coupe pas la ligne).

html

<p>Texte avec un <span class="surligne">mot surligné</span>.</p>

Les abréviations : balise <abbr>
Rôle
La balise <abbr> sert à définir une abréviation ou un acronyme. Quand l'utilisateur
passe la souris dessus, la signification complète s'affiche.
Exemple
html
<p>Je travaille avec <abbr title="HyperText Markup Language">HTML</abbr> et <abbr
title="Cascading Style Sheets">CSS</abbr>.</p>

Les caractères réservés (entités HTML)

Pourquoi on en a besoin ?
En HTML, certains caractères sont réservés pour le code. Si tu veux les afficher à
l'écran, il faut utiliser des entités HTML.

Caractère Entité HTML Pourquoi réservé ?

< &lt; Démarre une balise

> &gt; Termine une balise

& &amp; Démarre une entité

" &quot; Délimite un attribut

' &apos; Délimite un attribut

© &copy; Symbole copyright (pas réservé mais pratique)

(espace) &nbsp; Espace insécable

Exemple
html
<!-- Ceci est interprété comme une balise -->
<p>Pour écrire <, il faut utiliser &lt;</p>
Résultat : Pour écrire <, il faut utiliser <
html
<!-- Afficher du code HTML dans une page -->
<p>La balise &lt;p&gt; sert à faire un paragraphe.</p>
Résultat : La balise <p> sert à faire un paragraphe.
 CSS (Cascading Style Sheets) - Les feuilles de styles

Le CSS permet de séparer le contenu (HTML) de sa présentation (couleurs,

polices, positionnement).

Avantages :

 Tu changes la couleur de tous les titres d'un seul coup

 Tu peux appliquer le même style à plusieurs pages
 Ton code HTML est plus propre et plus lisible

2. Les 3 façons d'appliquer du CSS

Méthode 1 : Dans un fichier séparé (la meilleure)

Fichier [Link] :

css

p {
color: blue;
font-size: 14pt;
}

Fichier [Link] :

html

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Avantage : Un seul fichier CSS pour tout le site

Méthode 2 : Dans la page (dans <style>)
html

<head>
<style type="text/css">
p {
color: blue;
font-size: 14pt;
}
</style>
</head>

Utile pour des styles propres à une seule page

Méthode 3 : Directement dans la balise (style inline)

html

<p style="color: blue; font-size: 14pt;">Texte</p>

À éviter sauf cas exceptionnel (mélange contenu/présentation)

3. La cascade (Cascading) - Quelle règle gagne ?
Principe : Plus le style est "proche" de l'élément, plus il est prioritaire.

Ordre de priorité (de la plus forte à la plus faible) :

Priorité Type

1 (max) Style inline (style="...")

2 Style dans <style>

3 Style dans fichier externe (.css)

4 (min) Style par défaut du navigateur

Règle supplémentaire : À priorité égale, la dernière règle écrite l'emporte.

4. Les sélecteurs (comment cibler les éléments)

Sélecteur Syntaxe Exemple Cible

Balise nom_balise p { color: red; } Tous les paragraphes

.important { Tous les éléments

Classe .nom_classe
color: red; } avec class="important"

#menu {
ID #nom_id background: black; L'élément avec id="menu"
}

élément1, h1, h2, h3 {

Groupe Tous les titres
élément2 color: red; }
5. Différence entre classe (.maClasse) et ID (#monId)

Classe (.) ID (#)

Peut être répété ? Oui (plusieurs éléments) Non (un seul par page)

Syntaxe CSS .maClasse { } #monId { }

Syntaxe HTML class="maClasse" id="monId"

Priorité Normale Plus forte que classe

Utilisation typique Style réutilisable Élément unique (ex: menu principal)

Exemple :

html

<style>
.rouge { color: red; } /* classe : réutilisable */
#en-tete { background: blue; } /* ID : unique */
</style>

<p class="rouge">Texte rouge</p>

<p class="rouge">Autre texte rouge aussi</p> <!-- OK : même classe -->
<div id="en-tete">En-tête</div>
6. Les sous-classes : combiner classe et ID
Tu peux combiner classe et ID sur le même élément :

html

<style>
.standard { color: green; font-size: 10pt; }
#cyan { color: cyan; }
</style>

<p class="standard" id="cyan">Texte vert et cyan ?</p>

Règle : L'ID a priorité sur la classe. Donc ce paragraphe sera cyan (pas vert).

7. Sélecteurs contextuels (plus précis)

Tu peux cibler des éléments à l'intérieur d'autres éléments :

css

/* Tous les liens à l'intérieur d'un H3 */

H3 a { color: black; }

/* Tous les paragraphes à l'intérieur d'une section */

section p { margin-left: 20px; }
8. Les pseudo-classes (pour les états spéciaux)

Pseudo-classe S'applique

a:link Lien non visité

a:visited Lien déjà visité

a:hover Souris au-dessus du lien

a:active Au moment du clic

p:first-line Première ligne d'un paragraphe

p:first-letter Première lettre d'un paragraphe

input:focus Champ de formulaire sélectionné

Exemple :

css

a:hover { color: red; } /* Le lien devient rouge au survol */

Les sélecteurs de frères en CSS

Il existe deux sélecteurs pour cibler les éléments qui sont au même niveau (frères).

Sélecteur Signification Exemple

+ (adjacent) Le premier frère qui suit h1 + p = le p juste après un h1

~ (général) Tous les frères qui suivent h1 ~ p = tous les p après un h1

9. Les balises <div> et <span>

<div> <span>

Type Bloc Inline

Comportement Se place en dessous des autres Se place à côté des autres

Dimension Occupe toute la largeur Prend seulement la taille de son contenu

Utilité Structurer de grandes zones Styler un mot ou une phrase

Exemple :

html

<div>Je suis un bloc, je prends toute la largeur</div>

<div>Moi aussi, je suis en dessous</div>

<span>Je suis inline</span>

<span>Je suis à côté</span>
10. Positionner des blocs en CSS

a) Avec les marges (margin)

css

div {
margin-left: 20px; /* Décalage depuis la gauche */
margin-top: 40px; /* Décalage depuis le haut */
}

b) Avec float (faire flotter)

Règle Explication

Comportement L'élément devient comme "inline" (ne prend plus toute la largeur)

Largeur Soit tu la donnes (width), soit elle dépend du contenu

Position Se colle à gauche (left) ou à droite (right)

Les autres Le texte (et certains éléments) l'entoure

css

img {
float: left; /* L'image flotte à gauche, le texte l'entoure */
}
c) Avec position (positionnement absolu/relatif)

Valeur Comportement

relative Positionné par rapport à sa position normale

absolute Positionné par rapport au coin du conteneur

fixed Fixe dans la fenêtre (reste visible en défilant)

elements are positioned static by default and the element is positioned according to
Static
the normal flow of the document

position ne transforme PAS l'élément en inline.

L'élément reste bloc (ou inline selon son type d'origine), mais on peut
le déplacer par rapport à un point de référence.

le point de référence par défaut : c'est le coin en haut à gauche de la page (ou du
conteneur).
Exemple :

css

div {
position: absolute;
top: 50px; /* À 50px du haut du conteneur */
left: 30px; /* À 30px de la gauche */
}
d) Superposer des blocs avec z-index
css

.bloc1 {
position: absolute;
z-index: 2; /* Au-dessus */
}
.bloc2 {
position: absolute;
z-index: 1; /* En dessous */
}

Plus le z-index est grand, plus l'élément est au-dessus.

11. Les propriétés CSS principales (résumé)

Texte et police

Propriété Utilité

font-size Taille de la police

font-family Type de police (Arial, Times...)

font-weight: bold Gras

font-style: italic Italique

color Couleur du texte

text-align Alignement (left, center, right, justify)

Arrière-plan

Propriété Utilité

background-color Couleur de fond

background-image Image de fond

css
div {
background-image: url("[Link]");
}

Boîte (box model)

Propriété Utilité

margin Marge extérieure (hors de la bordure)

padding Marge intérieure (entre bordure et contenu)

border Bordure

width Largeur

height Hauteur
La syntaxe raccourcie (la plus utilisée)
css

border: [épaisseur] [style] [couleur];

Épaisseur (3 types)
Valeur Exemple

En pixels 2px, 5px, 10px

Mots-clés thin (fin), medium (moyen), thick (épais)

Autres unités 0.1em, 1rem

Style (obligatoire !)

Valeur Rendu

solid Trait continu _____

dotted Pointillés .......

dashed Tirets - - - -

double Double trait ======

groove Effet creux (3D)

ridge Effet relief (3D)

inset Effet encastré (3D)

outset Effet saillant (3D)

none Pas de bordure

hidden Caché (comme none)

12. Héritage des styles
Les éléments à l'intérieur d'un élément héritent de ses styles.

html

<style>
div { color: red; }
</style>

<div>
<p>Ce paragraphe sera aussi rouge (héritage)</p>
</div>

Compléments sur les styles

font-size: 14pt|+1pt Taille de la police

font-family: Arial|Times|… Type de police

font-weight: normal|bold|100…900 Poids de la police

font-style: normal|italic|oblique Style de la police

font-variant: normal|small-caps Petites majuscules

text-transform: none|uppercase|lowercase Maj., Min.

text-decoration: none|underline|overline|blink|line-through

text-align: left|center|right|justify Alignement du texte

text-indent: 1pt Retrait de la première ligne

vertical-align: top|middle|bottom|... Alignement vertical

letter-spacing: 1pt Espacement des lettres

word-spacing: 3pt Espacement des mots

line-height: 1pt Hauteur de la ligne

color: rgb(0, 255, 0) Couleur de la police

background-image: url Image d'arrière-plan

background-color: transparent|rgb(0,255,0) Couleur d'arrière-plan

background-position: Position de l'arrière-plan

margin (ou -left, -right, -top, -bottom): 3px Marges

border: 1px Epaisseur de la bordure

border-style: solid|double|groove|ridge|dotted|dashed|…

border-style-left (-top|-right|-left|bottom): solid|...

border-color: blue Couleur de la bordure

padding (-top|-right|-left|bottom): 1px Remplissage interne

display: block|inline|none à la ligne suivante|à la suite|caché

Les propriétés CSS pour les listes

1. list-style-type : changer le style des puces ou numéros

Pour les listes NON numérotées (<ul>)

Valeur Rendu

disc ● (disque plein) - valeur par défaut

circle ○ (cercle vide)

square ■ (carré plein)

none Pas de puce

Exemple :

css

ul {
list-style-type: square;
}
html

<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>

Résultat :

text

■ Élément 1
■ Élément 2

Pour les listes numérotées (<ol>)

Valeur Rendu Exemple

decimal Chiffres 1, 2, 3...

decimal-leading-zero Chiffres avec zéro 01, 02, 03...

lower-roman Chiffres romains minuscules i, ii, iii...

upper-roman Chiffres romains majuscules I, II, III...

lower-alpha Lettres minuscules a, b, c...

upper-alpha Lettres majuscules A, B, C...

lower-greek Lettres grecques α, β, γ...

none Pas de numéro -

Exemple :

css

ol {
list-style-type: upper-roman;
}
html

<ol>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
</ol>

Résultat :

text

I. Premier
II. Deuxième
III. Troisième

2. list-style-image : utiliser une image comme puce

Rôle : Remplace la puce classique par une image personnalisée.

css

ul {
list-style-image: url("[Link]");
}
html

<ul>
<li>Élément avec une image comme puce</li>
<li>Autre élément</li>
</ul>

Résultat :

text

[🖼️] Élément avec une image comme puce

[🖼️] Autre élément
Attention : Si l'image ne charge pas, rien ne s'affiche (pas de puce de secours).
Pour éviter ça, on utilise souvent list-style-type en secours :

css

ul {
list-style-image: url("[Link]");
list-style-type: disc; /* Si l'image ne charge pas */
}

3. list-style-position : position de la puce

Valeur Rendu

outside La puce est en dehors du bloc de texte (par défaut)

inside La puce est à l'intérieur du bloc de texte

Exemple pour comprendre la différence

css

[Link] {
list-style-position: outside;
}
[Link] {
list-style-position: inside;
}
li {
border: 1px solid black;
}
html

<ul class="outside">
<li>Texte long qui va peut-être aller à la ligne pour bien voir la différence<
/li>
</ul>

<ul class="inside">
<li>Texte long qui va peut-être aller à la ligne pour bien voir la différence<
/li>
</ul>

Résultat visuel :

outside (par défaut) :

text

• Texte long qui va peut-être

aller à la ligne

inside :

text

• Texte long qui va peut-être

aller à la ligne

→ La différence est visible sur les textes longs : avec inside, la deuxième ligne
est alignée sous la puce (pas sous le texte).

4. La syntaxe raccourcie : list-style

On peut tout écrire en une ligne :

css

/* Ordre : [type] [position] [image] */

ul {
list-style: square inside url("[Link]");
}
 JavaScript - Le langage de programmation du web

1. Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation qui rend les pages web interactives.
Sans JavaScript, une page web est statique (elle ne bouge pas). Avec JavaScript, tu
peux :

 Réagir aux clics de l'utilisateur

 Modifier le contenu d'une page sans la recharger
 Valider des formulaires
 Faire des animations
 etc.

JavaScript s'exécute dans le navigateur (côté client), pas sur le serveur.

2. Comment insérer du JavaScript dans une page HTML ?

Méthode 1 : Dans un fichier externe (recommandé)

html

<script src="[Link]"></script> dans la balise body

Méthode 2 : Directement dans la page (inline)

html

<script>
alert("Bonjour !");
</script>

Méthode 3 : Dans une balise HTML (événement)

html

<button onclick="alert('Cliqué !')">Cliquez</button>

3. Syntaxe de base

Commentaires
javascript

// Ceci est un commentaire sur une ligne

/*
Ceci est un commentaire
sur plusieurs lignes
*/

Fin d'instruction
Chaque instruction se termine par un point-virgule ;

javascript

var x = 5;
alert("Hello");

4. Les variables

Déclaration avec var, let, ou const

javascript

var nom = "Ahmed"; // variable classique

let age = 25; // variable modifiable (moderne)
const PI = 3.14; // constante (ne peut pas changer)

Types de données
javascript

var texte = "Bonjour"; // Chaîne de caractères (string)

var nombre = 42; // Nombre (number)
var vrai = true; // Booléen (boolean)
var tableau = ["Lundi", "Mardi", "Mercredi"]; // Tableau (array)
var objet = {prenom: "Ali", age: 30}; // Objet
Déclaration implicite (à éviter)
javascript

message = "coucou"; // fonctionne mais mauvaise pratique

5. Les fonctions

Définition d'une fonction

javascript

function afficher(message) {
[Link](message);
alert(message);
}

Fonction Où le message s'affiche ? Qui le voit ?

L'utilisateur (tout le
alert() Dans une fenêtre pop-up qui apparaît à l'écran
monde)

Dans la console du navigateur (outil

[Link]() Seulement le développeur
développeur)

Appel d'une fonction

javascript

afficher("Bonjour tout le monde !");

Fonction avec paramètres et retour

javascript

function addition(a, b) {
return a + b;
}

var resultat = addition(5, 3); // resultat = 8

Exemple du cours
javascript

function afficher(id, message) {

[Link]("Message: " + message);
[Link](id).innerHTML = message;
}

// Appels
afficher("id1", "<p>Du contenu bien frais !</p>");
afficher("id2", "Un autre contenu.");

6. Les conditions

if / else
javascript

var age = 18;

if (age >= 18) {

alert("Vous êtes majeur");
} else {
alert("Vous êtes mineur");
}

else if
javascript

var note = 15;

if (note >= 10) {

alert("Validé");
} else if (note >= 8) {
alert("Rattrapage");
} else {
alert("Non validé");
}
7. Les boucles

Boucle for
javascript

for (var i = 0; i < 5; i++) {

[Link]("Nombre : " + i);
}
// Affiche : Nombre : 0, 1, 2, 3, 4

Boucle while
javascript

var i = 0;
while (i < 5) {
[Link]("Compteur : " + i);
i++;
}

Boucle do...while (exécute au moins une fois)

javascript

var i = 0;
do {
[Link]("Valeur : " + i);
i++;
} while (i < 3);

Boucle for...in (pour les objets)

javascript

var personne = {prenom: "Ali", age: 30};

for (var cle in personne) {
[Link](cle + " : " + personne[cle]);
}
// Affiche : prenom : Ali, age : 30
8. La sélection (switch)
javascript

var jour = "lundi";

switch(jour) {
case "lundi":
[Link]("Début de semaine");
break;
case "vendredi":
[Link]("Fin de semaine");
break;
default:
[Link]("Milieu de semaine");
}

9. Les événements (events)

Les événements permettent de réagir aux actions de l'utilisateur.

Méthode 1 : Dans le HTML (attribut)

html

<button onclick="alert('Cliqué !')">Cliquez</button>

<input type="text" onfocus="alert('Champ sélectionné')" onblur="alert('Champ quitt
é')">

Méthode 2 : Avec addEventListener (recommandé)

javascript

var bouton = [Link]("monBouton");

→ Je récupère le bouton qui a l'id "monBouton"

[Link]("click", function() {
alert("Bouton cliqué !");
});
Tableau des événements principaux

Événement Déclenché quand...

onclick L'utilisateur clique sur l'élément

onmouseover La souris passe sur l'élément

onfocus Un champ de formulaire est sélectionné

onblur Un champ de formulaire est quitté

onchange La valeur d'un champ change

onload La page est complètement chargée

onsubmit Un formulaire est envoyé

 10. Manipuler le DOM (Document Object Model)
DOM = Document Object Model (Modèle Objet du Document)

C'est une représentation en arbre de ta page HTML que le navigateur construit

automatiquement.

Quand le navigateur charge une page HTML, il ne se contente pas d'afficher le texte.
Il construit un modèle organisé de la page dans sa mémoire.

Ce modèle permet à JavaScript de :

 Trouver n'importe quel élément de la page

 Lire son contenu
 Modifier son contenu
 Modifier son style (couleur, taille, etc.)
 Ajouter ou supprimer des éléments
 Réagir aux clics, survols, etc.

Sans le DOM, JavaScript ne pourrait rien faire sur la page.

Chaque élément est un objet JavaScript

Dans le DOM, chaque élément HTML devient un objet JavaScript avec :

 Des propriétés (son contenu, ses attributs, son style...)

 Des méthodes (pour agir sur lui)
Le code HTML correspondant
html

<!DOCTYPE html>
<html>
<head>
<title>My title</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<img src="[Link]" alt="Description">
<p>My paragraph</p>
</body>
</html>

Accéder à un élément
javascript

// Par ID
var element = [Link]("monId");

// Par classe (retourne un tableau)

var elements = [Link]("maClasse");

// Par balise (retourne un tableau)

var paragraphes = [Link]("p");

// Avec querySelector (CSS)

var premierParagraphe = [Link]("p");
Avec querySelectorAll
javascript
var tousLesP = [Link]("p");
[Link]([Link]); // Affiche : le nombre des p balises

// Pour accéder au premier

[Link](tousLesP[0].textContent); // "Premier paragraphe"

// Pour accéder au deuxième

[Link](tousLesP[1].textContent); // "Deuxième paragraphe"

// Pour parcourir tous

for (var i = 0; i < [Link]; i++) {
[Link](tousLesP[i].textContent);
}

Modifier le contenu
javascript

// Modifier le texte
[Link]("monId").textContent = "Nouveau texte";
textContent remplace tout le contenu (y compris les balises imbriquées) par du texte brut. Les balis
es à l'intérieur sont supprimées.
Non. Si tu mets des balises dans textContent, elles ne sont pas interprétées comme des balises HT
ML. Elles deviennent du texte brut que l'utilisateur voit à l'écran.
Avec textContent
javascript
[Link]("monId").textContent = "<strong>Bonjour</strong>";

Ce que l'utilisateur voit à l'écran :

text
<strong>Bonjour</strong>

// Modifier le HTML
[Link]("monId").innerHTML = "<strong>Texte en gras</strong>";

Ce que l'utilisateur voit à l'écran :#

Texte en gras (en gras)
Créer et ajouter des éléments
javascript

// Créer un nouvel élément

var nouveauDiv = [Link]("div");

// Ajouter du contenu
[Link] = "<p>Je suis nouveau</p>";

// Ajouter à la page
[Link](nouveauDiv);

L'élément est ajouté À LA FIN du <body>, après tout le contenu existant.

Équivalent en HTML statique :

html
<body>
<!-- Tout le contenu original de la page -->

<!-- Le nouvel élément est ajouté ici, à la fin -->

<div>
<p>Je suis nouveau</p>
</div>
</body>

Modifier les attributs

javascript

// Définir un attribut
[Link]("monImage").setAttribute("src", "[Link]");
Si l'attribut n'existe pas, setAttribute() le CRÉE automatiquement.

// Récupérer un attribut
var src = [Link]("monImage").getAttribute("src");
getAttribute() retourne null si l'attribut n'existe pas.
Modifier le style
javascript

// Modifier le style inline

[Link]("monId").[Link] = "red";
[Link]("monId").[Link] = "black";

[Link]("monId") // 1. Je récupère l'élément

.style // 2. J'accède à son style
.color // 3. Je choisis la propriété CSS
= "red"; // 4. J'affecte la valeur

Les 3 règles d'or

Règle Explication

1. Priorité Le style modifié par JavaScript est un style inline style= ‘’…’’ → il écrase
maximale tous les autres styles (CSS externe, <style>)

2. Écrase ou
Si la propriété existe déjà en inline, elle est écrasée ; sinon, elle est ajoutée
ajoute

3. Lecture
[Link] ne lit que les styles inline (pas ceux du CSS)
limitée
11. Les objets BOM (Browser Object Model)

window (la fenêtre du navigateur)

javascript

[Link]("Message"); // Boîte d'alerte

[Link]("Confirmer ?"); // Boîte de confirmation
[Link]("Votre nom :"); // Boîte de saisie
location (l'URL)
javascript

[Link] = "[Link] // Rediriger vers Google

[Link](); // Recharger la page
Quand tu écris :
js // window est optionnel
[Link] = "[Link]

C'est comme si tu tapais [Link] dans la barre d'adresse et tu appuies sur Entrée — la
page actuelle disparaît et Google se charge à la [Link] concret :
html
<button onclick="[Link] = '[Link]
Aller sur Google
</button>
L'utilisateur clique sur le bouton → il quitte ton site → Google s'ouvre.
Les 3 cas d'usage :

Code Ce qui se passe

[Link] =
"[Link] Tu quittes la page et tu vas sur Google
[Link] = "/contact" Tu vas sur une autre page de ton site
[Link]()
Tu recharges la page où tu es (comme
F5)

Paramètres d'URL ?id=5

Quand tu vois une URL comme [Link]/page?nom=Ali&age=20, les paramètres sont

nom et age.

js
// URL : [Link]/page?nom=Ali&age=20
const params = new URLSearchParams([Link]);

[Link]("nom"); // → "Ali"
[Link]("age"); // → "20"
Comparaison directe :

php
// PHP
$_GET["nom"] // → "Ali"
$_GET["age"] // → "20"
js
// JavaScript
[Link]("nom") // → "Ali"
[Link]("age") // → "20"

Les deux lisent les paramètres dans l'URL ?nom=Ali&age=20 — c'est exactement pareil,
juste la syntaxe change.

navigator (les infos du navigateur)

javascript

var navigateur = [Link];

C'est un objet qui te donne des informations sur le navigateur de l'utilisateur.

js
[Link]; // Nom et version du navigateur
[Link]; // Langue : "fr-FR", "en-US"...
[Link]; // true si connecté à internet
document (la page HTML)
javascript

[Link] = "Nouveau titre";

[Link]("Texte écrit dans la page");

Situation Comportement

Script normal dans la [Link]() ajoute le texte à l'endroit exact où se trouve la

page balise <script>

Lié à un événement Le navigateur ouvre une nouvelle page vierge et écrit uniquement
(bouton, etc.) le contenu de [Link]()

history (l'historique)
javascript

[Link](); // Revenir en arrière

[Link](); // Aller en avant

C'est comme les boutons ← Précédent et → Suivant du navigateur.

js
[Link](); // Revenir à la page précédente
[Link](); // Aller à la page suivante
[Link](-2); // Reculer de 2 pages
Les fonctions de manipulation des objets (DOM)
Voici les fonctions principales pour manipuler les objets dans le DOM, avec des
explications simples.

A) Accéder aux éléments

Fonction Exemple Ce qu'elle fait

Trouve un élément
getElementById() [Link]("monId")
par son id

Trouve tous les

getElementsByClassName() [Link]("maClasse") éléments avec
cette classe

Trouve tous les

getElementsByTagName() [Link]("p") éléments avec
cette balise

Trouve
querySelector() [Link]("p") le premier élément
qui correspond

Trouve tous les

querySelectorAll() [Link]("p") éléments qui
correspondent
B) Manipuler les attributs

Fonction Exemple Ce qu'elle fait

[Link]("src",
setAttribute() Crée ou modifie un attribut
"[Link]")

Lit la valeur d'un attribut

getAttribute() [Link]("src")
(retourne null si inexistant)

Supprime un attribut (pas

removeAttribute() [Link]("src")
d'erreur) si l'attribut n'existe pas.

Vérifie si un attribut existe

hasAttribute() [Link]("src")
(retourne true/false)

C) Manipuler le contenu

Fonction/Propriété Exemple Ce qu'elle fait

[Link] = "Nouveau Modifie le texte (les balises ne

textContent
texte" sont pas interprétées)

[Link] = Modifie le HTML (les balises sont

innerHTML
"<strong>Texte</strong>" interprétées)
D) Créer et ajouter des éléments

Ce qu'elle
Fonction Exemple
fait

Crée un
nouvel
élément
createElement() [Link]("div")
(mais pas
encore dans
la page)

[Link](nouveau)

parent n'est PAS un mot-clé

Ajoute
JavaScript. C'est parentNode (ou parentElement) la propriété l'élément à
appendChild()
qui existe vraiment. parentNode Le parent (n'importe quel type) la fin du

Élément ou texte ou commentaire ,parentElement Le parent (seulement si

parent

c'est un élément) Élément seulement

Supprime
remove() [Link]() l'élément de
la page
E) Manipuler les classes CSS

Propriété/Méthode Exemple Ce qu'elle fait

JavaScript
javascript
[Link] = "rouge grand";

Cela signifie : l'élément a DEUX

classes : rouge ET grand

HTML généré
html
<div class="rouge grand">Texte</div>
Remplace toutes les
className
classes
CSS correspondant
css
.rouge {
color: red;
}

.grand {
font-size: 30px;
}

→ Les deux classes s'appliquent.

[Link]() [Link]("rouge") Ajoute une classe

[Link]() [Link]("rouge") Enlève une classe

Ajoute si absente,
[Link]() [Link]("rouge")
enlève si présente

[Link]() [Link]("rouge") Vérifie si la classe existe

F) Manipuler le style8

Fonction/Propriété Exemple Ce qu'elle fait

[Link] [Link] = "red" Modifie le style inline

getComputedStyle(element).color
Lit le style final (inline
getComputedStyle() n'est PAS une méthode d'un élément. C'est une fonction
+ CSS)
globale (de l'objet window) qui prend un élément en paramètre.

Récupère la
width / height [Link] largeur/hauteur réelle
de l'élément

G) Parcourir l'arbre DOM

Propriété Exemple Ce qu'elle fait

parentNode [Link] Récupère l'élément parent

children [Link] Récupère les enfants (éléments seulement)

childNodes [Link] Récupère les enfants (éléments + texte)

firstChild [Link] Récupère le premier enfant

lastChild [Link] Récupère le dernier enfant

nextSibling [Link] Récupère l'élément suivant (même niveau)

previousSibling [Link] Récupère l'élément précédent (même niveau)

2. La balise <meta>

Qu'est-ce que c'est ?

La balise <meta> se place dans <head> et donne des informations sur la
page (métadonnées). Ces infos ne s'affichent pas à l'écran, mais sont utilisées par les
navigateurs, les moteurs de recherche, etc.

Exemples courants

Exemple Utilité

Définit l'encodage des caractères (pour

<meta charset="UTF-8">
afficher correctement les accents)

<meta name="description" content="Cours de

Description de la page (utilisée par Google)
HTML">

<meta name="keywords" content="HTML, CSS,

Mots-clés (moins utilisé aujourd'hui)
JavaScript">

<meta name="author" content="Widad Ettazi"> Nom de l'auteur

<meta name="viewport" content="width=device-

Adapte la page aux mobiles (responsive)
width, initial-scale=1">
 jQuery - La bibliothèque qui simplifie JavaScript

1. Qu'est-ce que jQuery ?

jQuery est une bibliothèque JavaScript créée en 2006. Elle simplifie :

 La manipulation du DOM
 La gestion des événements
 Les animations
 Les appels AJAX

Avantage : jQuery gère les différences entre navigateurs.

2. Comment utiliser jQuery ?

Inclure jQuery dans la page

html

<script src="[Link]
cript>

Attendre que la page soit chargée

javascript

$(document).ready(function() {
// Ton code jQuery ici
});

// Version raccourcie
$(function() {
// Ton code jQuery ici
});
Emplacement exact

Dans <head> (recommandé pour jQuery)

html

<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<!-- 1. D'abord inclure jQuery -->
<script src="[Link]
></script>

<!-- 2. Ensuite votre code jQuery -->

<script>
$(document).ready(function() {
alert("La page est chargée !");
});

// Version raccourcie
$(function() {
$("p").css("color", "red");
});
</script>
</head>
<body>
<p>Texte</p>
</body>
</html>
À la fin du <body> (aussi possible)
html

<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<script src="[Link]
></script>
</head>
<body>
<p>Texte</p>

<!-- Code jQuery juste avant la fin du body -->

<script>
$(function() {
$("p").css("color", "red");
});
</script>
</body>
</html>

Avec jQuery et $(document).ready(), il n'y a AUCUNE différence entre mettre le

script dans <head> ou dans <body>. Le code s'exécutera de la même façon (après le
chargement de la page).

Sans $(document).ready() (en JavaScript pur), il y a une grosse différence.

"Sans ready, on doit faire l'appel à la fin dans <body>, pas dans <head>."

✅ OUI

"Si on le met dans <head>, erreur car l'élément n'est pas encore créé."

✅ OUI

"Le script dans <head> s'exécute en premier."

✅ OUI
3. Les sélecteurs jQuery
Les sélecteurs

commencent par le signe dollar et les parenthèses − $()

La fonction factory $() est un synonyme de la fonction jQuery()

Permet d’accéder rapidement aux objets DOM HTML

Sélecteur jQuery Équivalent en JavaScript

$("#monId") [Link]("monId")

$(".maClasse") [Link]("maClasse")

$("p") [Link]("p")

$("[Link]") [Link]("[Link]")

4. Manipuler le contenu avec jQuery

javascript

// Lire le texte
var texte = $("#monId").text(); .text() lit uniquement le texte (sans les balises HTML)
// Modifier le texte
$("#monId").text("Nouveau texte");
// Lire le HTML
var html = $("#monId").html(); .html() lit le texte ET les balises HTML
// Modifier le HTML
$("#monId").html("<strong>Texte en gras</strong>");

jQuery JavaScript pur Rôle

.text() .textContent Lit/modifie le texte (les balises ne sont pas interprétées)

.html() .innerHTML Lit/modifie le HTML (les balises sont interprétées)

5. Manipuler les attributs avec jQuery
Utiliser la méthode attr(propriétés) pour obtenir la valeur d’un attribut.
Utiliser la méthode attr(nom, valeur) pour définir la valeur d’un attribut.

javascript

// Lire un attribut
var src = $("#monImage").attr("src");
// Modifier un attribut
$("#monImage").attr("src", "[Link]");

6. Manipuler les styles avec jQuery

Le style

La méthode css pour changer le style

[Link]( PropertyName, PropertyValue )

[Link]( {key1:val1, key2:val2....keyN:valN})

javascript

// Modifier une propriété CSS

$("#monId").css("color", "red");
// Modifier plusieurs propriétés
$("#monId").css({
"color": "red",
"background-color": "black"
});
Les méthodes width( val ) et height( val ) pour modifier la largeur et la
hauteur d’un élément
// Modifier la largeur
$("#monId").width(200);
$("#monId").height(100);
1. Supprimer un élément : .remove()
Rôle : Supprime complètement l'élément et tout son contenu.

Exemple
html

<div id="conteneur">
<p>Paragraphe 1</p>
<p class="a-supprimer">Paragraphe à supprimer</p>
<p>Paragraphe 3</p>
</div>
javascript

$("p.a-supprimer").remove();

Résultat HTML après :

html

<div id="conteneur">
<p>Paragraphe 1</p>
<p>Paragraphe 3</p>
</div>

→ Le paragraphe avec la classe a-supprimer a totalement disparu.

2. Remplacer un élément : .replaceWith()
Rôle : Remplace l'élément sélectionné par un nouveau contenu.

Exemple
html

<h1>Ancien titre</h1>
javascript

$("h1").replaceWith("<h2>Nouveau titre</h2>");

Résultat HTML après :

html

<h2>Nouveau titre</h2>

→ Le <h1> a été remplacé par <h2>.

3. Insérer un élément
jQuery a plusieurs méthodes pour insérer. Voici les principales :

a) .append() - Ajoute à la fin (à l'intérieur)

html

<div id="liste">
<p>Élément 1</p>
</div>
javascript

$("#liste").append("<p>Élément 2</p>");

Résultat :

html

<div id="liste">
<p>Élément 1</p>
<p>Élément 2</p> <!-- Ajouté à la fin -->
</div>

b) .prepend() - Ajoute au début (à l'intérieur)

html

<div id="liste">
<p>Élément 2</p>
</div>
javascript

$("#liste").prepend("<p>Élément 1</p>");

Résultat :

html

<div id="liste">
<p>Élément 1</p> <!-- Ajouté au début -->
<p>Élément 2</p>
</div>
c) .after() - Ajoute après (au même niveau)
html

<h1>Titre</h1>
<p>Paragraphe</p>
javascript

$("h1").after("<hr>");

Résultat :

html

<h1>Titre</h1>
<hr> <!-- Ajouté APRÈS h1 -->
<p>Paragraphe</p>

d) .before() - Ajoute avant (au même niveau)

html

<h1>Titre</h1>
<p>Paragraphe</p>
javascript

$("h1").before("<hr>");

Résultat :

html

<hr> <!-- Ajouté AVANT h1 -->

<h1>Titre</h1>
<p>Paragraphe</p>
7. Gérer les événements avec jQuery
Simplifie la gestion des événements sur les éléments DOM en utilisant la méthode bind ()

Syntaxe: [Link]( eventType[, eventData], handler)

javascript

// Méthode bind (ancienne)

$("div").bind("click", function() {
alert("Cliqué !");
});

// Méthode on (recommandée)
$("div").on("click", function() {
alert("Cliqué !");
});

// Méthode raccourcie
$("div").click(function() {
alert("Cliqué !");
});
8. AJAX avec jQuery : charger des données sans recharger la
page
AJAX : Asynchronous JavaScript and XML

Méthode load() pour charger les données:

Syntaxe: [selector].load( URL, [data], [callback] );
javascript
// Charger le contenu d'un fichier dans un élément
$("#stage").load("[Link]");

Exemple complet du cours

html

<html>
<head>
<title>The Query Example</title>
<script src="[Link]
></script>
</head>
<body>

<p>Click on the button to load /query/[Link] file</p>

<div id="stage" style="background-color:red;">

stage
</div>

<input type="button" id="driver" value="load data" />

<script>
$(document).ready(function() {
$("#driver").click(function() {
$("#stage").load("[Link]");
});
});
</script>

</body>
</html>
PHP - Programmation côté serveur

1. Qu'est-ce que PHP ?

PHP (PHP: Hypertext Preprocessor) est un langage de script qui s'exécute sur le
serveur, pas dans le navigateur.

Contrairement à JavaScript (côté client), PHP s'exécute avant que la page n'arrive
chez l'utilisateur.

Le principe
text

1. Le navigateur demande une page .php

2. Le serveur lit le fichier PHP
3. Le serveur exécute le code PHP
4. Le serveur envoie le résultat (du HTML pur) au navigateur
5. Le navigateur affiche la page (ne voit jamais le code PHP)

Caractéristiques

Caractéristique Explication

Côté serveur S'exécute sur le serveur, pas dans le navigateur

Faiblement typé Pas besoin de déclarer le type des variables

Open source Gratuit

Multi-plateforme Fonctionne sur Windows, Linux, Mac

Extension Fichiers .php ou .phtml

2. Premier script PHP

Comment écrire du PHP dans une page HTML ?

php

<!DOCTYPE html>
<html>
<head>
<title>Ma page PHP</title>
</head>
<body>
<h1>Page PHP</h1>

<?php
// Ceci est du code PHP
echo "Bonjour depuis le serveur !";
?>

<p>Fin de la page</p>
</body>
</html>

Résultat envoyé au navigateur :

html

<!DOCTYPE html>
<html>
<head>
<title>Ma page PHP</title>
</head>
<body>
<h1>Page PHP</h1>

Bonjour depuis le serveur !

<p>Fin de la page</p>
</body>
</html>
Les balises PHP

Syntaxe Exemple

<?php ... ?> <?php echo "Bonjour"; ?> (recommandée)

<? ... ?> <? echo "Bonjour"; ?> (ancienne, peut être désactivée)

<script language="php">...</script> Très ancienne

Instructions d'affichage
php

<?php
echo "Bonjour"; // Affiche du texte
print "Bonjour"; // Comme echo
printf("%s a %d ans", "Ahmed", 25); // Formaté
?>

Règle : Chaque instruction PHP se termine par un point-virgule ;.

3. Inclure des fichiers : include() et require()

Pourquoi ?
Pour réutiliser du code (en-tête, pied de page, fonctions) sans le réécrire partout.

Différence entre include() et require()

Les deux fonctions sont identiques sauf dans la gestion des erreurs:

Fonction Erreur Comportement

include() Avertissement Le script continue

require() Erreur fatale Le script s'arrête

Exemple
php

<?php
include("[Link]"); // Si fichier manquant → alerte, mais continue
require("[Link]"); // Si fichier manquant → erreur, script arrêté

// Avec _once : inclus une seule fois (évite les doublons)

include_once("[Link]");
require_once("[Link]");
?>
EXEMPLE :

Fichier [Link] :

php

<?php
include("[Link]"); // 1ère inclusion
include("[Link]"); // 2ème inclusion (par erreur)

direBonjour();
?>

Résultat (ERREUR) :

text

Définition des fonctions

Définition des fonctions
Fatal error: Cannot redeclare direBonjour() (previously declared in ...)

→ Pourquoi ? La fonction direBonjour() a été déclarée deux fois. PHP bloque.

La solution : include_once (une seule fois)

Fichier [Link] :

php

<?php
include_once("[Link]"); // ✅ Inclus la 1ère fois
include_once("[Link]"); // ✅ Ignoré (déjà inclus)

direBonjour(); // Fonctionne !
?>

Résultat :

text

Définition des fonctions

Bonjour !
4. Les variables en PHP

Règles de base

Règle Exemple

Commencent par $ $nom, $age

Pas de type à déclarer $x = 5; puis $x = "texte"; (faiblement typé)

Sensibles à la casse $Nom ≠ $nom

Déclaration et affectation
php

<?php
$prenom = "Ahmed"; // Chaîne de caractères
$age = 25; // Nombre
$prix = 19.99; // Décimal
$actif = true; // Booléen

// Affectation par valeur

$a = 10;
$b = $a; // $b = 10 (copie indépendante)

// Affectation par référence (&)

$c = &$a; // $c pointe vers $a
$a = 20; // $c devient aussi 20
?>
Portée des variables

Type Déclaration Portée

Locale $var = valeur; Seulement dans la fonction

Globale global $var; Accessible partout

php

<?php
$global = "Je suis globale";

function test() {
global $global; // Je peux utiliser la variable globale
echo $global;

$local = "Je suis locale"; // Seulement dans cette fonction

}

echo $local; // ❌ Erreur (hors de portée)

?>

Bibliothèque riche de fonctions sur les variables :

Doubleval(), empty(), gettype(), settype(), intval(), is_array(), is_bool(), is_double(),
is_float(), is_int(), is_integer, is_long(), is_object(), is_real(), is_numeric(), is_string(),
isset(), unset(), strval()
Fonctions utiles sur les variables

Fonction Rôle Exemple

isset($var) Vérifie si la variable existe if(isset($_POST['nom']))

empty($var) Vérifie si vide if(empty($nom))

unset($var) Supprime la variable unset($nom)

is_numeric($var) Est-ce un nombre ? if(is_numeric($age))

is_string($var) Est-ce une chaîne ? if(is_string($prenom))

gettype($var) Retourne le type $type = gettype($var);

5. Structures de contrôle (comme en C)

Conditions
php

<?php
// if / else
if ($age >= 18) {
echo "Majeur";
} else {
echo "Mineur";
}

// elseif
if ($note >= 10) {
echo "Validé";
} elseif ($note >= 8) {
echo "Rattrapage";
} else {
echo "Non validé";
}

// switch
switch ($jour) {
case "lundi":
echo "Début de semaine";
break;
case "vendredi":
echo "Fin de semaine";
break;
default:
echo "Milieu de semaine";
}
?>
Boucles
php

<?php
// for
for ($i = 0; $i < 10; $i++) {
echo "Nombre : $i <br>";
}

// while
$i = 0;
while ($i < 10) {
echo "Nombre : $i <br>";
$i++;
}

// foreach (pour les tableaux)

$couleurs = ["rouge", "bleu", "vert"];
foreach ($couleurs as $couleur) {
echo "Couleur : $couleur <br>";
}
?>
6. Les fonctions
php

<?php
// Déclaration d'une fonction
function direBonjour($nom) {
return "Bonjour " . $nom;
}

// Appel de la fonction
$message = direBonjour("Ahmed");
echo $message; // Affiche : "Bonjour Ahmed"

// Fonction sans retour

function afficherMessage($texte) {
echo "<p>$texte</p>";
}

afficherMessage("Ceci est un paragraphe");

?>

Concaténation (coller des chaînes)

En PHP, on utilise le point . pour coller des chaînes :

php

<?php
$prenom = "Ahmed";
$age = 25;

$phrase = "Bonjour " . $prenom . ", tu as " . $age . " ans";

echo $phrase; // "Bonjour Ahmed, tu as 25 ans"
?>
7. Les tableaux
php

<?php
// Tableau indexé (indices numériques)
$fruits = array("pomme", "banane", "orange");
// ou syntaxe courte
$fruits = ["pomme", "banane", "orange"];

echo $fruits[0]; // "pomme"

echo $fruits[1]; // "banane"

// Tableau associatif (clés nommées)

$personne = [
"nom" => "Dupont",
"prenom" => "Jean",
"age" => 30
];

echo $personne["nom"]; // "Dupont"

echo $personne["prenom"]; // "Jean"

// Parcourir un tableau
foreach ($fruits as $fruit) {
echo "Fruit : $fruit <br>";
}

foreach ($personne as $cle => $valeur) {

echo "$cle : $valeur <br>";
}
?>
8. JSON en PHP
JSON = JavaScript Object Notation (Notation d'objet JavaScript)

C'est un format de texte pour stocker et échanger des données entre un serveur et
un navigateur.

php

<?php
// Tableau PHP
$data = ["nom" => "Dupont", "age" => 30];

// Convertir en JSON
$json = json_encode($data);
echo $json; // {"nom":"Dupont","age":30}

// Convertir JSON en tableau PHP

$jsonString = '{"nom":"Martin","age":25}';
$tableau = json_decode($jsonString, true);
echo $tableau["nom"]; // "Martin"
?>
9. Formulaire et récupération des données

Le HTML du formulaire
html

<form action="[Link]" method="POST">

<p>Nom : <input type="text" name="nom"></p>
<p>Age : <input type="text" name="age"></p>
<input type="submit" value="Envoyer">
</form>

Le PHP qui reçoit ([Link])

php

<?php
// Récupérer les données du formulaire
// $_POST contient les données envoyées en méthode POST
// $_GET contient les données envoyées en méthode GET

$nom = $_POST['nom'];
$age = $_POST['age'];

// Sécurisation : htmlspecialchars() évite les injections de code

echo "Bonjour, " . htmlspecialchars($nom) . "<br>";

// (int) force le type entier (sécurisation)

echo "Tu as " . (int)$age . " ans.";
?>
Tableaux superglobaux (accessibles partout)

Superglobale Contient

$_GET Paramètres dans l'URL (ex: [Link]?nom=Dupont)

$_POST Données envoyées par formulaire (méthode POST)

$_SESSION Variables de session

$_COOKIE Cookies

$_SERVER Infos sur le serveur et la requête

10. Sessions et Cookies

HTTP est sans état (stateless) : chaque requête est indépendante. Le serveur ne se souvient
pas de toi d'une page à l'autre.

text
1. Tu te connectes sur un site (page [Link])
→ Serveur : "OK, tu es connecté"

2. Tu vas sur ta page profil ([Link])

→ Serveur : "Qui es-tu ? Je ne me souviens pas de toi !"
→ Tu es déconnecté !

Les sessions permettent au serveur de "se souvenir" de toi entre plusieurs pages.

Une session = un espace de stockage temporaire sur le serveur associé à un utilisateur

spécifique, qui dure le temps de sa navigation.
Comment ça fonctionne ?
text

┌─────────────┐ ┌─────────────┐
│ Navigateur │ │ Serveur │
│ (Client) │ │ (PHP) │
└──────┬──────┘ └──────┬──────┘
│ │
│ 1. Première visite │
│ (pas de session) │
│ ──────────────────────────────────────────→│
│ │
│ 2. Crée une session
│ (ID unique)
│ Stocke les données
│ │
│ 3. Envoie un cookie avec l'ID │
│ ←──────────────────────────────────────────│
│ (cookie: PHPSESSID=abc123) │
│ │
│ 4. Deuxième visite │
│ (envoie le cookie) │
│ ──────────────────────────────────────────→│
│ Cookie: PHPSESSID=abc123 │
│ │
│ 5. Reconnaît l'utilisateur
│ Récupère les données
│ │
│ 6. Réponse personnalisée │
│ ←──────────────────────────────────────────│
│ │
Sessions (stockage sur le serveur)
php

<?php
// Démarrer la session (doit être au début)
session_start();

// Stocker des données

$_SESSION['utilisateur'] = "Ahmed";
$_SESSION['id'] = 123;

// Lire des données

$user = $_SESSION['utilisateur'];

// Détruire une variable

unset($_SESSION['utilisateur']);

// Détruire toute la session

session_destroy();
?>

Cookies (stockage sur le navigateur)

php

<?php
// Créer un cookie (nom, valeur, expiration, chemin)
setcookie("utilisateur", "Ahmed", time() + 3600, "/"); // expire dans 1 heure

// Lire un cookie
if(isset($_COOKIE['utilisateur'])) {
echo $_COOKIE['utilisateur'];
}

// Supprimer un cookie (mettre expiration dans le passé)

setcookie("utilisateur", "", time() - 3600, "/");
?>
11. Programmation orientée objet (POO) en PHP
Définition d'une classe
php

<?php
class Fruit {
// Propriétés (attributs)
public $nom;
public $couleur;
// Constructeur (appelé automatiquement à la création)
function __construct($nom, $couleur) {
$this->nom = $nom;
$this->couleur = $couleur;
}
// Destructeur (appelé automatiquement à la suppression)
//$this->nom = j'utilise le nom de la propriété (qui est "nom")
//$this->$nom = j'utilise le contenu de la variable $nom comme nom de propriété
function __destruct() {
echo "L'objet {$this->nom} est détruit.";
}
// __toString() : convertit l'objet en chaîne de caractères
// Appelée automatiquement quand on utilise echo sur l'objet
function __toString() {
return "Fruit : " . $this->nom . " de couleur " . $this->couleur;
}
// Méthodes (fonctions)
function set_nom($nom) {
$this->nom = $nom;
}
function get_nom() {
return $this->nom;
}
}
// Créer un objet (instance) Les objets s’instancient avec le mot clef new
$pomme = new Fruit("Pomme", "Rouge");
// Utiliser une méthode
echo $pomme->get_nom(); // "Pomme"
// Modifier une propriété
$pomme->nom = "Pomme Verte";
// $this fait référence à l'objet lui-même
// Le destructeur est appelé AUTOMATIQUEMENT ici (fin du script)
?>
Modificateurs d'accès

Modificateur Accès

public Accessible partout (dans et hors la classe)

protected Accessible dans la classe et les classes héritées

private Accessible uniquement dans la classe

12. Connexion à une base de données MySQL

Se connecter

Tableau récapitulatif des syntaxes CORRECTES

SGBD Fonction Syntaxe correcte

mysqli_connect() se referme
automatiquement à la fin du
script.
mysqli_connect("serveur", "user",
MySQL persistantes mysqli_pconnect(),
"pass", "base")
ne se referme pas
Pour fermer la connexion :
mysqli_close($desc_Connexion)

new
MySQL
new PDO() PDO("mysql:host=serveur;dbname=base",
(PDO)
"user", "pass")

sqlsrv_connect("serveur",
SQL Server sqlsrv_connect()
array("UID"=>"user", "PWD"=>"pass"))

Oracle oci_connect() oci_connect("user", "pass", "base")

pg_connect("host=serveur dbname=base
PostgreSQL pg_connect()
user=user password=pass")

sybase_connect("serveur", "user",
Sybase sybase_connect()
"pass")
php

<?php
// Paramètres de connexion
$serveur = "localhost";
$utilisateur = "root";
$mot_de_passe = "123456";
$base = "ma_base";

// Établir la connexion
$connexion = mysqli_connect($serveur, $utilisateur, $mot_de_passe);

// Vérifier la connexion
if (!$connexion) {
die("Connexion impossible : " . mysqli_connect_error());
}

// Sélectionner la base de données

mysqli_select_db($connexion, $base);

// Fermer la connexion
mysqli_close($connexion);
?>
choix d’une BD MySQL

mysqli_select_db() : à quoi ça sert ?

Cette fonction permet de choisir quelle base de données utiliser après la connexion.

Méthode 1 : Directement dans mysqli_connect() (recommandé)

<?php
// ✅ Méthode moderne : on précise la base directement
$con = mysqli_connect("localhost", "root", "", "ma_base");

if (!$con) {
die("Erreur de connexion : " . mysqli_connect_error());
}

// La base "ma_base" est déjà sélectionnée, pas besoin de mysqli_select_db()

// On peut directement faire des requêtes

$resultat = mysqli_query($con, "SELECT * FROM utilisateurs");
?>
Méthode 2 : Avec mysqli_select_db() (ancienne méthode)
php

<?php
// Connexion sans spécifier la base
$con = mysqli_connect("localhost", "root", "");

if (!$con) {
die("Erreur de connexion : " . mysqli_connect_error());
}

// On sélectionne la base après

if (mysqli_select_db($con, "ma_base")) {
echo "Base sélectionnée avec succès";
} else {
echo "Erreur : base introuvable";
}

// Maintenant on peut faire des requêtes

$resultat = mysqli_query($con, "SELECT * FROM utilisateurs");
?>
Liste complète des fonctions MySQLi

1. Connexion et sélection de base

Ancienne fonction Fonction moderne (recommandée) Description

Établit la connexion (toujours

mysqli_connect() mysqli_connect()
valide)

Spécifier la base Sélectionne une base de

mysqli_select_db()
dans mysqli_connect() données

mysqli_close() mysqli_close() Ferme la connexion

Syntaxes correctes
php

// ✅ Connexion moderne (base directement)

$con = mysqli_connect("serveur", "utilisateur", "mot_de_passe", "base_de_donnees")
;

// ✅ Connexion ancienne (avec sélection séparée)

$con = mysqli_connect("serveur", "utilisateur", "mot_de_passe");
mysqli_select_db($con, "base_de_donnees");

// ✅ Fermeture
mysqli_close($con);
2. Gestion des bases de données (création, suppression, liste)
⚠️ Ces fonctions sont OBSOLÈTES ! Voici les alternatives.

Ancienne fonction Alternative moderne Description

mysqli_create_db() Requête SQL CREATE DATABASE Crée une base

mysqli_drop_db() Requête SQL DROP DATABASE Supprime une base

mysqli_list_dbs() Requête SQL SHOW DATABASES Liste les bases

✅ Syntaxes modernes
php

$con = mysqli_connect("localhost", "root", "");

// Créer une base

$sql = "CREATE DATABASE ma_nouvelle_base";
if (mysqli_query($con, $sql)) {
echo "Base créée avec succès";
}

// Supprimer une base

$sql = "DROP DATABASE ma_nouvelle_base";
if (mysqli_query($con, $sql)) {
echo "Base supprimée avec succès";
}

// Lister les bases

$resultat = mysqli_query($con, "SHOW DATABASES");
while ($ligne = mysqli_fetch_array($resultat)) {
echo $ligne[0] . "<br>";
}
3. Gestion des tables

Ancienne fonction Alternative moderne Description

mysqli_list_tables() SHOW TABLES Liste les tables d'une base

php

mysqli_select_db($con, "ma_base");
$resultat = mysqli_query($con, "SHOW TABLES");
while ($ligne = mysqli_fetch_array($resultat)) {
echo $ligne[0] . "<br>";
}

4. Informations sur les champs (métadonnées)

Ancienne fonction Alternative moderne Description

mysqli_field_name() mysqli_fetch_field()->name Nom du champ

mysqli_field_type() mysqli_fetch_field()->type Type du champ

mysqli_fetch_field()-
mysqli_field_len() Longueur du champ
>length

mysqli_fetch_field()- Détails du champ (NOT NULL,

mysqli_field_flags()
>flags PRIMARY KEY...)
✅ Syntaxe moderne
php

$resultat = mysqli_query($con, "SELECT * FROM personne");

// Récupérer les infos des champs

while ($champ = mysqli_fetch_field($resultat)) {
echo "Nom : " . $champ->name . "<br>";
echo "Type : " . $champ->type . "<br>";
echo "Longueur : " . $champ->length . "<br>";
echo "Flags : " . $champ->flags . "<br>";
echo "<br>";
}

5. Exécution de requêtes

Fonction Description

mysqli_query() Exécute une requête SQL (SELECT, INSERT, UPDATE, DELETE, CREATE, DROP...)

php

$resultat = mysqli_query($con, "SELECT * FROM personne");

// ou
$resultat = mysqli_query($con, "INSERT INTO personne (nom) VALUES ('Dupont')");
6. Récupération des résultats

Fonction Description

mysqli_fetch_array() Récupère une ligne (associatif + indexé)

mysqli_fetch_assoc() Récupère une ligne (associatif uniquement)

mysqli_fetch_row() Récupère une ligne (indexé uniquement)

mysqli_fetch_object() Récupère une ligne (objet)

mysqli_num_rows() Nombre de lignes retournées

php

$resultat = mysqli_query($con, "SELECT * FROM personne");

// Nombre de lignes
$nbLignes = mysqli_num_rows($resultat);

// Parcourir les résultats

while ($ligne = mysqli_fetch_assoc($resultat)) {
echo $ligne['nom'] . " " . $ligne['prenom'] . "<br>";
}
7. Gestion des erreurs

Fonction Description

mysqli_connect_error() Message d'erreur de connexion

mysqli_error() Message d'erreur de la dernière requête

php

$con = mysqli_connect("localhost", "root", "", "ma_base");

if (!$con) {
die("Erreur connexion : " . mysqli_connect_error());
}

$resultat = mysqli_query($con, "SELECT * FROM table_inexistante");

if (!$resultat) {
echo "Erreur requête : " . mysqli_error($con);
}

8. INSERT INTO (insérer des données)

php

// Syntaxe 1 : avec toutes les colonnes

$sql = "INSERT INTO personne (nom, prenom, age) VALUES ('Dupont', 'Jean', 25)";

// Syntaxe 2 : sans lister les colonnes (toutes)

$sql = "INSERT INTO personne VALUES (NULL, 'Dupont', 'Jean', 25)";

// Exécution
if (mysqli_query($con, $sql)) {
echo "Insertion réussie. ID = " . mysqli_insert_id($con);
} else {
echo "Erreur : " . mysqli_error($con);
}
9. Afficher les résultats en HTML (exemple complet)
php

<?php
// Connexion
$con = mysqli_connect("localhost", "root", "", "ma_base");

if (!$con) {
die("Connexion impossible: " . mysqli_connect_error());
}

// Requête
$requete = "SELECT nom, prenom, age FROM personne";
$resultat = mysqli_query($con, $requete);

if (!$resultat) {
die("Erreur requête: " . mysqli_error($con));
}

// Affichage en tableau HTML

echo "<table border='1' cellpadding='5'>";
echo "<tr style='background-color:#ccc;'>";
echo "<th>Nom</th>";
echo "<th>Prénom</th>";
echo "<th>Âge</th>";
echo "</tr>";

while ($ligne = mysqli_fetch_assoc($resultat)) {

echo "<tr>";
echo "<td>" . htmlspecialchars($ligne['nom']) . "</td>";
echo "<td>" . htmlspecialchars($ligne['prenom']) . "</td>";
echo "<td>" . (int)$ligne['age'] . "</td>";
echo "</tr>";
}

echo "</table>";

// Fermeture
mysqli_close($con);
?>
10. Bonne pratique : fonction de connexion générique
<?php
function connexion($sgbdr, $hote, $port, $utilisateur, $mot_passe, $base, $par
am_sup = "") {

switch ($sgbdr) {
case "mysql":
$con = mysqli_connect($hote, $utilisateur, $mot_passe, $base, $por
t);
break;

case "pgsql":
$con = pg_connect("host=$hote port=$port dbname=$base user=$utilis
ateur password=$mot_passe");
break;

case "oracle":
$con = oci_connect($utilisateur, $mot_passe, "$hote:$port/$base");
break;

case "sqlsrv":
$con = sqlsrv_connect($hote, array(
"UID" => $utilisateur,
"PWD" => $mot_passe,
"Database" => $base
));
break;

default:
die("SGBDR non supporté : " . $sgbdr);
}

if (!$con) {
die("Erreur de connexion");
}

return $con;
}
// Utilisation
$con = connexion("mysql", "localhost", 3306, "root", "", "ma_base");
?>
Tableau récapitulatif (ancien vs nouveau)

Ancien (obsolète) Nouveau (recommandé)

mysqli_create_db() mysqli_query("CREATE DATABASE ...")

mysqli_drop_db() mysqli_query("DROP DATABASE ...")

mysqli_list_dbs() mysqli_query("SHOW DATABASES")

mysqli_list_tables() mysqli_query("SHOW TABLES")

mysqli_field_name() mysqli_fetch_field()->name

mysqli_field_type() mysqli_fetch_field()->type

mysqli_field_len() mysqli_fetch_field()->length

mysqli_field_flags() mysqli_fetch_field()->flags
Exécuter une requête
php

<?php
// Connexion (voir ci-dessus)

// Requête SELECT
$sql = "SELECT * FROM personne";
$resultat = mysqli_query($connexion, $sql);

// Afficher les résultats dans un tableau HTML

echo "<table border='1'>";
echo "<tr><th>Nom</th><th>Prénom</th></tr>";
//mysqli_fetch_array() transforme une ligne (ligne de résultat SQL) en un ta
bleau PHP (tableau associatif, indexé, ou les deux).
while ($ligne = mysqli_fetch_array($resultat)) {
echo "<tr>";
echo "<td>" . $ligne['nom'] . "</td>";
echo "<td>" . $ligne['prenom'] . "</td>";
echo "</tr>";
}

echo "</table>";

// Requête INSERT
$sql = "INSERT INTO personne (nom, prenom) VALUES ('Dupont', 'Jean')";
mysqli_query($connexion, $sql);

mysqli_close($connexion);
?>
Fonctions MySQLi utiles

Fonction Rôle

mysqli_connect() Établit la connexion

mysqli_select_db() Sélectionne la base

mysqli_query() Exécute une requête

mysqli_fetch_array() Récupère une ligne de résultat

mysqli_fetch_assoc() Récupère une ligne (tableau associatif)

mysqli_num_rows() Nombre de lignes retournées

mysqli_close() Ferme la connexion

13. Exemple complet : Formulaire + Base de données

Formulaire HTML ([Link])

html

<form action="[Link]" method="POST">

<input type="text" name="nom" placeholder="Nom">
<input type="text" name="prenom" placeholder="Prénom">
<input type="submit" value="Ajouter">
</form>

Traitement PHP ([Link])

php

<?php
// Récupérer les données du formulaire
$nom = htmlspecialchars($_POST['nom']);
$prenom = htmlspecialchars($_POST['prenom']);

// Connexion à la base
$con = mysqli_connect("localhost", "root", "");
mysqli_select_db($con, "ma_base");

// Insertion
$sql = "INSERT INTO personne (nom, prenom) VALUES ('$nom', '$prenom')";
mysqli_query($con, $sql);

// Redirection
header("Location: [Link]");

mysqli_close($con);
?>
1. La gestion des exceptions (throw, try, catch)

Pourquoi les exceptions ?

Pour gérer les erreurs de manière élégante. Au lieu que le script plante, tu peux
"attraper" l'erreur et décider quoi faire.

Les mots-clés

Mot-clé Rôle

try Bloc où on essaie du code qui peut générer une erreur

throw Lance (déclenche) une exception

catch Bloc où on attrape et on gère l'exception

finally Bloc qui s'exécute toujours (même si erreur)

Exemple simple
php

<?php
function diviser($a, $b) {
if ($b == 0) {
throw new Exception("Division par zéro impossible !");
}
return $a / $b;
}

try {
echo diviser(10, 2); // Affiche : 5
echo diviser(10, 0); // Déclenche une exception
echo "Ce texte ne s'affichera pas";

} catch (Exception $e) {

echo "Erreur : " . $e->getMessage();

} finally {
echo "<br>Bloque finally : exécuté toujours";
}
?>

Résultat :

text

5
Erreur : Division par zéro impossible !
Bloque finally : exécuté toujours
Exemple avec formulaire
php

<?php
function calculerAge($anneeNaissance) {
if ($anneeNaissance > date("Y")) {
throw new Exception("Année de naissance invalide !");
}
return date("Y") - $anneeNaissance;
}

try {
$age = calculerAge(2050); // Année invalide
echo "Vous avez $age ans";

} catch (Exception $e) {

echo "Erreur : " . $e->getMessage();
}
?>

Résultat :

text

Erreur : Année de naissance invalide !

2. La gestion des fichiers

Ouvrir un fichier : fopen()

php

<?php
// fopen(chemin, mode)
// Modes : r (lire), w (écrire, crée/efface), a (ajouter), r+ (lire/écrire)

$fichier = fopen("[Link]", "r");

if ($fichier === false) {

echo "Impossible d'ouvrir le fichier";
} else {
echo "Fichier ouvert avec succès";
fclose($fichier); // Toujours fermer le fichier
}
?>

Lire un fichier : fread()

php

<?php
// Lire tout le fichier
$fichier = fopen("[Link]", "r");
$contenu = fread($fichier, filesize("[Link]"));
fclose($fichier);
echo $contenu;
?>
Lire ligne par ligne : fgets()
php

<?php
$fichier = fopen("[Link]", "r");

while (!feof($fichier)) { // feof = fin du fichier

$ligne = fgets($fichier);
echo $ligne . "<br>";
}

fclose($fichier);
?>

Écrire dans un fichier : fwrite()

php

<?php
// Mode 'w' : écrase le contenu existant
$fichier = fopen("[Link]", "w");
fwrite($fichier, "Nouveau contenu\n");
fwrite($fichier, "Deuxième ligne");
fclose($fichier);

// Mode 'a' : ajoute à la fin

$fichier = fopen("[Link]", "a");
fwrite($fichier, "\nLigne ajoutée à la fin");
fclose($fichier);
?>
Méthodes plus simples (sans fopen)
PHP propose des fonctions simplifiées :

php

<?php
// Lire tout le fichier en une ligne
$contenu = file_get_contents("[Link]");
echo $contenu;

// Écrire dans le fichier (écrase)

file_put_contents("[Link]", "Nouveau texte");

// Lire le fichier en tableau (une ligne par case)

$lignes = file("[Link]");
foreach ($lignes as $ligne) {
echo $ligne . "<br>";
}
?>
Tableau des fonctions de gestion de fichiers

Fonction Rôle Exemple

fopen() Ouvrir un fichier $f = fopen("[Link]", "r");

fclose() Fermer un fichier fclose($f);

fread() Lire un nombre d'octets fread($f, 100);

fgets() Lire une ligne fgets($f);

fwrite() Écrire dans le fichier fwrite($f, "texte");

feof() Vérifier la fin du fichier while(!feof($f))

filesize() Taille du fichier filesize("[Link]");

file_get_contents() Lire tout le fichier file_get_contents("[Link]");

file_put_contents("[Link]",
file_put_contents() Écrire dans le fichier
"texte");

Lire en tableau (1 ligne

file() file("[Link]");
par case)

file_exists() Vérifier si fichier existe if(file_exists("[Link]"))

Exemple complet : Journal d'erreurs (log)
php

<?php
function ecrireLog($message) {
$fichierLog = "[Link]";

// Ouvre en mode 'a' (ajouter à la fin)

$fichier = fopen($fichierLog, "a");

if ($fichier === false) {

throw new Exception("Impossible d'ouvrir le fichier log");
}

$ligne = date("Y-m-d H:i:s") . " - " . $message . "\n";

fwrite($fichier, $ligne);
fclose($fichier);
}

try {
// Simuler une erreur
$x = 10 / 0;

} catch (Exception $e) {

ecrireLog("Erreur : " . $e->getMessage());
echo "Une erreur a été enregistrée dans le log";
}

// Lire et afficher le log

if (file_exists("[Link]")) {
$contenu = file_get_contents("[Link]");
echo "<pre>$contenu</pre>";
}
?>
 Chapitre 4 : Frameworks Web

1. C'est quoi un Framework ?

Définition simple

Un framework est un ensemble d'outils et de règles qui t'aident à développer

des applications plus rapidement et de manière plus propre.

Analogie
Construire une application sans framework, c'est comme construire une maison sans
plan : tu peux le faire, mais tu risques de te perdre et de faire des erreurs.

Avec un framework, on te donne :

 Un plan (l'architecture)
 Des briques prêtes à l'emploi
 Des règles à suivre

Ce qu'un framework t'apporte

Bénéfice Explication

Automatisation Les tâches répétitives (routage, sécurité) sont déjà gérées

Structure propre Les fichiers sont organisés de façon logique

Composants testés Des fonctionnalités complexes déjà codées et éprouvées

Gain de temps Tu ne repars pas de zéro à chaque projet

2. Bibliothèques web

Bibliothèque vs Framework

Bibliothèque Framework

Contrôle C'est toi qui appelles la bibliothèque C'est le framework qui t'appelle

Liberté Tu fais ce que tu veux Tu dois suivre les règles

Taille Petite (une fonctionnalité) Grande (toute une architecture)

Exemple jQuery Laravel, Angular

Différents types de bibliothèques

Type Exemple Utilité

Charger des données sans recharger la

Requêtage AJAX jQuery, Axios
page

Composants
React, Vue Créer des éléments d'interface réutilisables
d'interface

DataTables,
Tri, organisation Manipuler des données dans le navigateur
SortableJS
 3. Frameworks web côté client (Front-end)

Caractéristiques

 S'exécutent dans le navigateur (JavaScript)

 Souvent utilisés pour les SPA (Single Page Application)
 Basés sur HTML, CSS, JavaScript

Fonctionnalités proposées

Fonctionnalité Rôle

Gestion des routes Naviguer entre les pages sans rechargement

MVC / MVVM Architecture organisée

Requêtage asynchrone Communiquer avec le serveur

Templating Générer du HTML dynamique

Frameworks client populaires

Framework Description

[Link] Facebook - Le plus populaire

[Link] Google - Complet

[Link] Léger et progressif

jQuery Bibliothèque (pas vraiment un framework)

[Link] Léger, structure MVC

4. Frameworks web côté serveur (Back-end)
Ce qu'ils apportent
Fonctionnalité Rôle

Routage Associer une URL à une fonction

MVC Architecture Modèle-Vue-Contrôleur

ORM Manipuler la base sans SQL

Templating Générer des vues (HTML)

Sécurité Authentification, protection

Sessions Gérer les utilisateurs

Frameworks serveur populaires

Langage Framework

PHP Laravel, Symfony, CakePHP

Python Django, Flask

Ruby Ruby on Rails

Java Spring

C# [Link]

Elixir Phoenix
5. Architecture MVC (Modèle-Vue-Contrôleur)

Le principe
text

┌─────────────┐ ┌─────────────┐ ┌─────────────┐

│ Client │ ──→ │ Contrôleur │ ──→ │ Modèle │
│ (Navigateur)│ ←── │ (Contrôle)│ ←── │ (Données) │
└─────────────┘ └─────────────┘ └─────────────┘
│
↓
┌─────────────┐
│ Vue │
│ (Affichage) │
└─────────────┘

Les 3 composants

Composant Rôle Exemple (Laravel)

Modèle Gère les données et la base app/Models/[Link]

Vue Gère l'affichage (HTML) resources/views/[Link]

Gère les requêtes, coordonne

Contrôleur app/Http/Controllers/[Link]
Modèle/Vue
6. Types de frameworks MVC

Push-based (la plupart des frameworks)

Principe : Le contrôleur calcule le contenu et le pousse vers la vue.

php

// Contrôleur pousse les données à la vue

public function index() {
$etudiants = Etudiant::all();
return view('etudiants', ['data' => $etudiants]);
}

Exemples : Spring (Java), Django (Python), Ruby on Rails, Symfony (PHP)

Pull-based (component-based)
Principe : La vue tire (récupère) le contenu de plusieurs contrôleurs.

Exemples : Struts2 (Java), Tapestry, DotNetNuke (.Net)

7. Focus sur Laravel (framework PHP)

Pourquoi Laravel ?

Raison Explication

Full stack Gère tout (front + back)

Prise en main rapide Documentation claire

Grande communauté Beaucoup de ressources

Gratuit Open source (licence MIT)

Populaire Le plus utilisé sur GitHub (depuis 2014)

Fonctionnalités principales de Laravel

Fonctionnalité Rôle

Routes RESTful Définir des URL et les associer à des actions

Eloquent ORM Manipuler la base de données sans SQL

Migrations Gérer l'évolution de la base (versionning)

Blade Moteur de templates (écrire du PHP dans l'HTML)

Authentification Gérer les utilisateurs (login, session)

Artisan Lignes de commande pour générer du code

Architecture Laravel
text

Projet Laravel
│
├── app/
│ ├── Http/
│ │ ├── Controllers/ ← Contrôleurs
│ │ └── Middleware/ ← Filtres
│ └── Models/ ← Modèles (Eloquent)
│
├── config/ ← Fichiers de configuration
├── database/
│ └── migrations/ ← Migrations (structure de la base)
│
├── resources/
│ └── views/ ← Vues (Blade)
│
├── routes/
│ └── [Link] ← Routes (URLs)
│
└── public/ ← Dossier public (CSS, JS, images)

8. Installation et premiers pas avec Laravel

Prérequis
Outil Rôle

Serveur HTTP Apache / Nginx (ou Laragon/XAMPP/WAMP)

PHP Version 7.4 ou 8

Composer Gestionnaire de dépendances PHP

SGBD MySQL / PostgreSQL / SQLite

Git (Optionnel) Versionning du code

Installation d'un nouveau projet
bash

# Créer un nouveau projet Laravel

composer create-project laravel/laravel nom_du_projet

# Se rendre dans le dossier

cd nom_du_projet

# Démarrer le serveur de développement

php artisan serve

Puis ouvrir : [Link]

Structure d'une route

php

// Fichier : routes/[Link]

// Route simple qui retourne du texte

Route::get('/bonjour', function () {
return 'Bonjour tout le monde !';
});

// Route qui retourne une vue

Route::get('/accueil', function () {
return view('accueil');
});

// Route qui appelle un contrôleur

Route::get('/etudiants', [EtudiantController::class, 'index']);
// ou ancienne syntaxe
Route::get('/etudiants', 'EtudiantController@index');
Créer un contrôleur
bash

php artisan make:controller EtudiantController

php

// app/Http/Controllers/[Link]
<?php

namespace App\Http\Controllers;

use App\Models\Etudiant;

class EtudiantController extends Controller

{
public function index()
{
$etudiants = Etudiant::all();
return view('etudiants', ['etudiants' => $etudiants]);
}

public function show($id)

{
$etudiant = Etudiant::find($id);
return view('etudiant', ['etudiant' => $etudiant]);
}
}
Créer une vue (Blade)
php

{{-- resources/views/[Link] --}}

<h1>Liste des étudiants</h1>

<table border="1">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
</tr>

@foreach ($etudiants as $etudiant)

<tr>
<td>{{ $etudiant->nom }}</td>
<td>{{ $etudiant->prenom }}</td>
<td>{{ $etudiant->email }}</td>
</tr>
@endforeach
</table>
Créer un modèle et une migration
bash

# Créer un modèle + migration (-m)

php artisan make:model Etudiant -m
php

// database/migrations/xxx_create_etudiants_table.php
public function up()
{
Schema::create('etudiants', function (Blueprint $table) {
$table->id();
$table->string('cne')->unique();
$table->string('nom');
$table->string('prenom');
$table->string('email')->unique();
$table->string('tel');
$table->string('ville');
$table->timestamps();
});
}
bash

# Exécuter les migrations

php artisan migrate
php

// app/Models/[Link]
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Etudiant extends Model

{
protected $fillable = ['cne', 'nom', 'prenom', 'email', 'tel', 'ville'];
}
Tableau récapitulatif des commandes Artisan

Commande Rôle

php artisan serve Lance le serveur de développement

php artisan make:controller NomController Crée un contrôleur

php artisan make:model Nom -m Crée un modèle + migration

php artisan make:middleware NomMiddleware Crée un middleware

php artisan migrate Exécute les migrations

php artisan migrate:rollback Annule la dernière migration

php artisan make:seeder NomSeeder Crée un seeder (données de test)

php artisan db:seed Exécute les seeders

php artisan route:list Liste toutes les routes

php artisan tinker Console interactive Laravel

Ce qu'il faut retenir absolument

Concept Règle

Framework Outil + règles pour développer plus vite

MVC Modèle (données) - Vue (affichage) - Contrôleur (logique)

Laravel Framework PHP le plus populaire

Artisan Lignes de commande Laravel

Eloquent ORM de Laravel (manipuler la base sans SQL)

Blade Moteur de templates (vues avec {{ }} et @)

Migrations Gérer l'évolution de la base de données

php artisan serve Démarrer le serveur

php artisan make:controller Créer un contrôleur

php artisan make:model -m Créer un modèle + migration