Le Resume Ultime
du WebDev
HTML, CSS, JavaScript, PHP, Git et Symfony expliques simplement: imagine que le Web est un restaurant. HTML construit les tables, CSS les decore, JS fait bouger les serveurs, PHP cuisine cote serveur, Git garde l'historique, Symfony organise toute la cuisine.
HTML5
Les briques: pages, liens, images, formulaires, balises semantiques.
CCSS3
La peinture: selecteurs, cascade, boites, couleurs, pseudo-classes.
JJavaScript
Le cerveau du navigateur: DOM, evenements, fonctions, tableaux.
SSymfony
Le chef de projet: routes, controleurs, Twig, Doctrine, forms, security.
La grande carte mentale
Ne memorise pas en vrac. Range chaque notion dans son etage, sinon ton cerveau fait un gros panier melange.
Le Web en une histoire tres simple
Front-end
C'est ce que l'utilisateur voit et touche: HTML, CSS, JS, formulaires, boutons, couleurs, evenements.
Navigateur DOM UIBack-end
C'est la cuisine cachee: PHP, controleurs, sessions, base de donnees, securite, reponses serveur.
PHP Symfony HTTPOutils
Git garde les versions. Composer installe les paquets. Doctrine parle a la base comme si c'etait des objets.
Git Composer ORMHTML5: les briques de la maison
HTML dit au navigateur: "ceci est un titre", "ceci est une image", "ceci est un formulaire". Il ne choisit pas la beaute, il choisit le sens.
Structure minimale
head, c'est l'etiquette sur la boite. Le body, c'est ce qu'il y a dans la boite.
Balises a connaitre
h1ah6: titres, du plus important au plus petit.p: paragraphe.a href: lien vers une autre page, un endroit de la meme page, ou une ressource.img src alt: image avec texte alternatif obligatoire pour l'accessibilite.ul,ol,li: listes.table,tr,th,td: tableau.
HTML5 semantique
Les balises semantiques donnent du sens, pas juste une forme.
| Balise | Image simple |
|---|---|
header | Le panneau d'entree. |
nav | La carte des chemins. |
main | Le contenu principal. |
section | Un chapitre. |
article | Un contenu autonome. |
footer | Le bas de page. |
Formulaires: la boite ou l'utilisateur met des infos
GET
Les donnees voyagent dans l'URL. Bien pour chercher ou filtrer.
POST
Les donnees voyagent dans le corps de la requete. Bien pour inscrire, modifier, envoyer un formulaire.
GET n'est pas "securise" juste parce que ca marche. Il affiche les donnees dans l'URL. Pour mot de passe ou inscription, pense POST.
CSS3: habiller la maison
CSS prend les briques HTML et decide leur apparence: taille, couleur, position, bordure, ombre, espace.
La cascade: qui gagne quand deux regles se battent ?
- Importance
Une regle!importantcrie tres fort, mais n'en abuse pas. - Specificite
#idgagne souvent contre.classe, qui gagne contre une balise simple. - Ordre
Si deux regles ont la meme force, la derniere ecrite gagne.
Selecteurs a maitriser
| Selecteur | Signification | Exemple enfant |
|---|---|---|
p | Tous les paragraphes | Tous les bonbons rouges. |
.note | Elements avec class note | Tous ceux qui portent un badge. |
#menu | Element avec id menu | Le seul enfant appele menu. |
a[href*="insat"] | Liens dont href contient insat | Tout lien avec ce mot dedans. |
p:hover | Quand la souris passe dessus | Le bouton change quand tu le touches. |
li:first-child | Premier enfant | Le premier dans la file. |
.paragraphe selectionne une classe. #paragraphe selectionne un id. Si le HTML a une classe et ton JS cherche un id, il ne trouve rien.
Box model
Avec box-sizing: border-box, la largeur inclut le padding et la bordure. C'est plus simple.
Couleurs, fonds, bordures
color: couleur du texte.background: fond.border-radius: coins arrondis.box-shadow: ombre.font-family: police, avec plusieurs choix de secours.
JavaScript: faire bouger la page
JavaScript parle au navigateur. Il peut lire la page, changer les styles, reagir au clic, calculer, afficher dans la console.
Variables: petites boites avec des noms
| Mot | Role | Piege |
|---|---|---|
let | Variable qui peut changer | Existe dans son bloc. |
const | Reference qui ne change pas | Un tableau const peut encore changer son contenu. |
var | Ancienne variable | Hoisting: elle monte en haut et vaut undefined au debut. |
Syntaxe JS de base: lire du code sans paniquer
Conversions automatiques
+ avec des textes colle. - force les nombres. C'est bizarre, mais l'examen adore ce piege.
Tableaux
Pour trier des nombres correctement: tab.sort((a, b) => a - b).
Fonctions: declaration, expression, flechee
console.log() affiche quelque chose, mais retourne undefined si elle n'a pas de return. C'est exactement le genre de detail qui casse les QCM.
Objets et classes en JS
this veut dire "l'objet actuel". Si tu perds this, c'est comme parler d'un enfant sans dire lequel.
DOM et evenements
querySelector("p") prend le premier. Pour tous, il faut querySelectorAll("p") puis une boucle.
PHP: la cuisine cote serveur
PHP s'execute sur le serveur. Le navigateur ne voit pas ton PHP, il recoit seulement le HTML que PHP fabrique.
Superglobales
$_GET: infos envoyees dans l'URL.$_POST: infos envoyees dans le corps de la requete.$_SESSION: infos gardeess pour un utilisateur connecte.$_COOKIE: petite info gardee chez le navigateur.$_FILES: fichiers envoyes par formulaire.
Sessions
Une session, c'est comme un bracelet d'entree: le serveur reconnait l'utilisateur d'une page a l'autre.
Comment une session PHP marche vraiment
Une session PHP garde des donnees sur le serveur. Le navigateur garde seulement un petit identifiant,
souvent dans un cookie appele PHPSESSID. Donc le navigateur dit "je suis le ticket 123", et le serveur retrouve
le bon petit tiroir de donnees.
- Demarrer
session_start()lit ou cree la session. Fais-le avant d'afficher du HTML. - Ecrire
$_SESSION["nom"] = "Aymen"met une valeur dans le tiroir de cet utilisateur. - Lire
isset($_SESSION["nom"])verifie si la valeur existe avant de l'utiliser. - Proteger
Si l'utilisateur n'est pas connecte, tu le rediriges verslogin.php. - Deconnecter
Tu vides$_SESSION, tu detruis la session, puis tu supprimes le cookie si besoin.
session_start(), $_SESSION ne travaille pas correctement. C'est comme chercher un cahier sans ouvrir le cartable.
Mini-systeme login avec session
1. Connexion
2. Page protegee
3. Deconnexion propre
Sessions: erreurs a ne pas faire
| Erreur | Pourquoi c'est faux | Correction |
|---|---|---|
Afficher du HTML avant session_start() |
PHP doit envoyer les headers/cookies avant le contenu. | Mettre session_start() tout en haut. |
Utiliser $_SESSION["x"] sans verifier |
Si la cle n'existe pas, tu risques warning ou logique fausse. | Utiliser isset($_SESSION["x"]). |
Faire header("Location: ...") sans exit |
Le script peut continuer apres la redirection. | Ajouter exit; juste apres. |
| Stocker le mot de passe en session | Inutile et dangereux. | Stocker id, email, role; jamais le mot de passe brut. |
Fonctions et references
&, tu donnes une photocopie. Avec &, tu donnes le vrai cahier, donc la fonction peut ecrire dedans.
PHP Objet
| Concept | Explication simple | Piege |
|---|---|---|
| Classe | Le moule a gateau. | Ce n'est pas encore un objet. |
| Objet | Le gateau cree avec le moule. | == compare les valeurs, === compare la meme instance. |
| Static | Appartient a la classe. | $this n'existe pas dans une methode static. |
| Abstract | Classe incomplete qui sert de base. | On ne l'instancie pas directement. |
| Interface | Contrat de methodes. | Elle impose ce qu'une classe doit fournir. |
| Trait | Morceau de code reutilisable. | Ce n'est pas une vraie relation d'heritage. |
Classe PHP complete: le moule, puis l'objet
class User est le moule. new User(...) fabrique un vrai objet. $this veut dire "cet objet-la, celui qu'on vient de fabriquer".
Visibilite: public, private, protected
| Mot | Qui peut toucher ? | Image simple |
|---|---|---|
public | Tout le monde. | Objet pose sur la table. |
private | Seulement la classe elle-meme. | Journal intime ferme. |
protected | La classe et ses enfants. | Cahier de famille. |
public parce que "c'est plus facile" est une mauvaise habitude. Tu casses l'encapsulation: n'importe quel code peut mettre l'objet dans un etat idiot.
Static: appartient a la classe, pas a l'objet
static, $this n'existe pas. Utilise self:: pour la classe actuelle ou static:: pour le late static binding.
Heritage et abstract
Une classe abstraite est un moule incomplet. Elle force les enfants a terminer certaines methodes.
Interface et trait
Une interface est un contrat. Un trait est un morceau de code colle dans une classe.
Git: la machine a remonter le temps
Git garde les versions de ton projet. Si tu casses quelque chose, tu peux comprendre quand, ou, et par qui.
Le cycle vital
Branches
Une branche, c'est une route parallele. Tu testes une idee sans casser la route principale.
Depot distant
Le remote, c'est le cartable partage sur internet, souvent GitHub.
Symfony: PHP bien range
Symfony evite le code spaghetti. Il range les routes, controleurs, templates, formulaires, base de donnees et securite.
Le voyage d'une requete
- L'utilisateur demande une URL
Exemple:/article/5. - Le routeur cherche la bonne route
Il lit les attributs, YAML, XML ou PHP. - Le controleur agit
Il recupere les donnees, appelle les services, prepare la reponse. - Twig affiche
Le template transforme les variables en HTML propre. - Doctrine parle a la BD si besoin
Repository pour lire, EntityManager pour ajouter/modifier/supprimer.
Routing
year<\\d{2}> veut exactement deux chiffres. Donc /Examen/24 marche, /Examen/2024 ne marche pas.
Controleur
Le controleur est le chef de table: il recoit la demande et choisit quoi renvoyer.
Twig
| Syntaxe | Role |
|---|---|
{{ variable }} | Afficher une variable. |
{% if condition %} | Executer une instruction. |
{% extends "base.html.twig" %} | Heriter d'un template parent. |
{% block body %} | Zone remplacable par l'enfant. |
{{ parent() }} | Recuperer le contenu du bloc parent. |
{{ path("route") }} | Generer une URL interne relative. |
{{ absolute_url(path("route")) }} | Generer un lien complet, utile pour email. |
parent() s'affiche avec {{ }}, pas avec {% %}, parce qu'il produit du contenu.
Doctrine: ORM + Unit of Work
Doctrine te laisse manipuler des objets PHP, puis il synchronise avec les tables SQL.
Repository
Lit la BD: find, findAll, findBy, requetes select.
EntityManager
Ecrit dans la BD: persist, remove, flush.
flush() sont regroupes. Si une operation echoue, tout est annule. C'est pour ca que deux emails uniques identiques donnent "aucun user ajoute".
Migrations et fixtures
- Migration: photo de l'evolution de la structure BD. Permet avancer ou revenir entre versions.
- Fixture: donnees de depart ou de test pour remplir la BD.
Relations Doctrine
ManyToManycree une table de jointure automatiquement.- Si la relation a ses propres champs, cree une entite intermediaire.
- Une relation n'est pas obligee d'etre bidirectionnelle.
Formulaires Symfony
| Element | Role |
|---|---|
createForm / createFormBuilder | Construire le formulaire. |
handleRequest($request) | Prendre les donnees de la requete et les mettre dans l'objet. |
isSubmitted() | Verifier si le formulaire a ete envoye. |
isValid() | Lancer/verifier la validation. |
mapped => false | Champ sans propriete correspondante dans l'entite. |
query_builder | Personnaliser la liste d'un champ lie a une entite. |
Securite Symfony
- User Provider: charge l'utilisateur.
- Authenticator: verifie l'identite.
- access_control: protege les routes par roles.
- role_hierarchy: un role peut heriter d'autres roles.
Symfony lit les controles d'acces de haut en bas et prend le premier qui correspond. Pour /profile/delete, c'est ROLE_ADMIN.
QCM corrige (AI)
Corrige base sur les trois photos fournies: Q1-Q9, Q10-Q23, puis Q24-Q40. L'ancien corrige du PDF a ete remplace.
Corrige rapide Q1 - Q40
| Q | Reponse | Pourquoi, version tres simple |
|---|---|---|
| 1 | C | Dans Twig, un template enfant qui herite ne peut pas ecrire du contenu hors des blocs: erreur. |
| 2 | A: 1 | La session est mise a 1 au premier appel; ensuite le code incremente une copie locale sans refaire set. |
| 3 | A | La session contient nomUser, donc le message de bienvenue est affiche. |
| 4 | A | Les trois p sont enfants directs de body, donc body > p applique le fond jaune aux trois. |
| 5 | E | Le selecteur JS ne cible pas la classe .paragraphe; les couleurs inline restent vert, bleu, vert. |
| 6 | A | querySelector("p") prend le premier paragraphe; le paragraphe para3 ne change pas. |
| 7 | A, B | Une Promise recoit resolve/reject; le succes se traite avec then. |
| 8 | B | La boucle affiche 2, 3, 4. Elle s'arrete avant 5. |
| 9 | C | "2" + "3" donne "23"; puis "23" - "2" donne 21. |
| 10 | B | Dans le setTimeout(function(){}), this n'est plus la voiture: on obtient 100 puis NaN. |
| 11 | A | La fonction flechee garde le this du constructeur: 100 puis 110. |
| 12 | C | var g est hisse mais vaut undefined au moment de l'appel: g is not a function. |
| 13 | A | var x local est hisse: premier affichage undefined, puis 7. |
| 14 | A, B, C | a[href*="insat"] prend tout lien dont le href contient "insat". |
| 15 | D | sort() sans comparateur trie comme du texte: 0, 1, 11, 13, 21, 3, 31, 4. |
| 16 | B | Aucun parametre n'est passe par reference; $s et $p restent a 0. |
| 17 | A, B | En JS, on accede a une propriete par user.name ou user["name"]. |
| 18 | A, B | session_start() peut initialiser une nouvelle session ou reprendre une session existante. |
| 19 | A, B | Les fixtures remplissent la BD avec des donnees de test ou des donnees initiales. |
| 20 | B | Plusieurs select Doctrine sont executes separement. |
| 21 | A | Les operations de persistance Doctrine dans un flush() sont regroupees en transaction. |
| 22 | A, D, E | year doit avoir 2 chiffres; section et univ ont des valeurs par defaut. |
| 23 | B | La table ManyToMany automatique n'est pas faite pour recevoir des attributs; il faut une entite intermediaire. |
| 24 | A, B | Un trait centralise du code et peut contenir methodes/proprietes; ce n'est pas un vrai type parent. |
| 25 | A, B | Le polymorphisme PHP passe par l'heritage et par les interfaces. |
| 26 | B, C | let a une portee de bloc; const doit etre initialise tout de suite, mais ne bloque pas les attributs d'un objet. |
| 27 | B | Les requetes preparees protegent contre SQL Injection, pas contre XSS ou DoS. |
| 28 | A, B | Les droits par role se declarent dans security.yaml ou se verifient dans le controleur. |
| 29 | D | La hierarchie est transitive: admin herite aussi de secretary, commercial et agent. |
| 30 | A, B, C | Ordre des blocs peu important; inclusion possible; un enfant ne remplit que les blocs herites. |
| 31 | B | Dans un email d'activation, il faut une URL absolue avec url(), pas seulement un chemin relatif. |
| 32 | A | Un flash message est une variable de session courte, lue une seule fois. |
| 33 | B | query_builder personnalise la requete qui alimente une liste de choix du formulaire. |
| 34 | A, B | mapped => false sert pour un champ sans propriete directe, comme upload ou mot de passe non stocke brut. |
| 35 | B, C | Les validateurs peuvent etre poses dans le form ou dans l'entite. |
| 36 | B: Faux | Un formulaire Symfony peut etre lie a une entite ou juste recuperer des donnees independantes. |
| 37 | A, B, C, D | Un controleur Symfony peut retourner HTML, JSON, image ou PDF via une Response. |
| 38 | A, B | Dans Twig, on peut acceder a la session via app ou passer la donnee depuis le controleur. |
| 39 | A: Vrai | Le champ name d'une route est optionnel. |
| 40 | C | Email unique + flush() transactionnel: si le deuxieme insert echoue, aucun user n'est ajoute. |
Les pieges les plus rentables a reviser
JS
querySelectorprend le premier,querySelectorAllprend une liste.#idn'est pas.class.varest hisse et peut donnerundefined.sort()trie en texte sans comparateur numerique.
Symfony / PHP
flush()Doctrine = transaction d'ecriture.handleRequestne remplace pasisValid.mapped => falsepour champ sans entite.$thisinterdit en contexte static.
Checklist avant l'examen
Si tu sais faire ces verifications, tu arretes de repondre au feeling. Le feeling est mauvais en QCM technique.
Quand tu lis du code
- Repere le langage
JS, PHP, Twig et YAML n'ont pas les memes regles. - Trace les variables
Demande: est-ce une copie, une reference, une session, une propriete static ? - Lis les selecteurs exactement
#x,.x,xne selectionnent pas la meme chose. - Regarde ce qui est vraiment appele
Un code defini mais jamais appele ne produit rien. - Verifie les effets caches
Transaction, hoisting, conversion automatique, ordre des access_control.
Questions flash
Difference entre HTML et CSS ?
Difference entre Repository et EntityManager ?
Pourquoi une migration n'est pas une fixture ?
Pourquoi l'email doit avoir un lien absolu ?
Pourquoi prepared statement ?
Sources utilisees dans ce workspace
Cours Web 1 HTML5, Cours Web 2 CSS3, Cours Web 3 JS, Cours Web 4 PHP, ateliers HTML/CSS/JS/PHP, Git.pdf, Symfony Cours 1 Introduction, Cours 2 Controleurs, Cours 3 Routing, Cours 4 Twig, Cours 5 Doctrine, Cours 6 Formulaires, Cours 7 Securite, et les trois photos QCM fournies.