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.
web25 QCM corrige
Le scan est une image OCRisee. J'ai reconstruit les questions lisibles et corrige les pieges selon les cours du workspace.
Corrige rapide Q1 - Q40
| Q | Reponse | Pourquoi, version tres simple |
|---|---|---|
| 1 | C | Email unique + flush transactionnel: si le deuxieme casse, tout est annule. |
| 2 | B | Dans Twig, le contenu parent s'affiche avec {{ parent() }}. |
| 3 | A: 1 | Le code incremente une copie locale mais ne refait pas set dans la session. |
| 4 | A | La session contient nomUser, donc on affiche le message. |
| 5 | B | JS cherche #paragraphe mais HTML a class="paragraphe"; rien ne change. |
| 6 | A | querySelector("p") prend le premier paragraphe, pas celui qui contient para3. |
| 7 | B | $this dans une methode static declenche une erreur. |
| 8 | D | La boucle affiche 2, 3, 4. Elle s'arrete avant 5. |
| 9 | A | Les operations de persistance Doctrine sont regroupees en transaction. |
| 10 | A | monObjet.p cherche une propriete appelee "p", donc undefined dans la boucle. |
| 11 | 23 puis -1 | + colle deux chaines, - convertit en nombres. |
| 12 | 8 puis undefined | g(2,4) affiche 8, puis console.log(g(...)) affiche le retour: undefined. |
| 13 | undefined puis 7 | var x local est hisse au debut de la fonction. |
| 14 | A, B, C | a[href*="insat"] prend tout href qui contient "insat". |
| 15 | D | sort() sans comparateur trie comme du texte. |
| 16 | D | Seul $prod est passe par reference, donc $s reste 0 et $p devient -6.8. |
| 17 | A, B, C, D, E | Le cours cite PHP, annotations, attributs, YAML et XML pour le routing. |
| 18 | A, B, C, D | Un ORM donne une couche objet, mappe les entites, abstrait la BD et fournit une API de travail. |
| 19 | A, B, D | Les migrations gerent l'evolution et permettent changer de version, pas faire du CRUD metier. |
| 20 | A, B | Les fixtures remplissent la BD avec donnees de test ou initiales. |
| 21 | B | Plusieurs select sont executes separement; la transaction concerne surtout le flush d'ecriture. |
| 22 | C, D | year doit avoir 2 chiffres; univ est optionnel. |
| 23 | A | ManyToMany cree une table de jointure. Pour ajouter des champs, il faut une entite relation. |
| 24 | A, B | Un trait centralise du code et peut contenir methodes/proprietes; ce n'est pas un type parent. |
| 25 | B | /profile/delete matche la regle admin avant la regle profile user. |
| 26 | D | ROLE_ADMIN herite des roles directs et indirects. |
| 27 | A, B, C | Ordre des blocs peu important; include possible; un enfant ecrit dans les blocs herites. |
| 28 | B | Un lien d'activation email doit etre absolu, sinon le mail ne sait pas quel domaine utiliser. |
| 29 | A | Les flash messages vivent en session pour une duree courte. |
| 30 | B | query_builder personnalise la requete qui alimente les choix. |
| 31 | B | mapped => false dit: ce champ n'a pas de propriete dans l'entite. |
| 32 | B, C | Contraintes possibles dans le form et dans l'entite; le controleur orchestre surtout. |
| 33 | B: Faux | Un form peut etre lie a un objet ou juste recuperer des donnees libres. |
| 34 | A | handleRequest prend les donnees de la requete et hydrate l'objet/form. |
| 35 | A, C | Injection SessionInterface ou via $request->getSession(). |
| 36 | C, D | En Symfony 6, injecte ManagerRegistry dans le constructeur ou l'action. |
| 37 | B | Une classe abstraite sert a imposer/partager une base, pas a etre instanciee directement. |
| 38 | false, false, true, true | == compare valeurs; === compare la meme instance. |
| 39 | A, B | Polymorphisme par heritage et interfaces. |
| 40 | B | Les requetes preparees protegent contre SQL Injection. |
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 web25.pdf.