01 — Analyse du besoin client
Le projet consiste à concevoir et développer un site web encyclopédique dédié aux 50 plus grandes stars hollywoodiennes. Le site doit permettre à un utilisateur de consulter les biographies, filmographies et palmarès des acteurs, de rechercher un acteur par son nom, et de naviguer dans un catalogue complet.
Fonctionnalités attendues
- Page d'accueil avec hero, stats et grille de films
- Catalogue des 50 acteurs avec leurs infos
- Formulaire de recherche sécurisé
- Affichage des résultats avec cartes détail
- Navigation responsive sur tous les appareils
Contraintes techniques
- PHP procédural avec includes
- Bootstrap 5.3.2, un seul breakpoint 576px
- Palette limitée aux variables CSS du :root
- Base de données MariaDB (InnoDB, utf8mb4)
- Déploiement sur VPS en HTTPS
02 — Direction artistique et choix graphiques
Concept et inspiration
Le parti pris graphique est un thème sombre cinématographique, directement inspiré de l'univers des tapis rouges hollywoodiens. Le choix du rouge bordeaux profond comme couleur dominante n'est pas anodin : il évoque les velours des salles de cinéma, les rideaux de scène et l'élégance du tapis rouge des cérémonies de remise de prix comme les Oscars ou les Golden Globes. Ce thème renforce le caractère encyclopédique et immersif du site tout en donnant une identité visuelle forte et cohérente.
Palette de couleurs — ColorHunt
La palette a été sélectionnée sur colorhunt.co et déclinée en 5 variables CSS utilisées sur l'ensemble du site :
#2C0401
--color-deep
Fond principal
Fond principal
#660B05
--color-dark
Fond sections
Fond sections
#8C1007
--color-mid
Accent / décoratif
Accent / décoratif
#E05030
--color-mid-light
Texte accent
Texte accent
#FFF0C4
--color-cream
Texte principal
Texte principal
Note : --color-mid (#8C1007) n'est jamais utilisé en texte (ratio WCAG ~2.1:1 insuffisant). La variable --color-mid-light (#E05030) a été ajoutée pour les textes d'accent avec un ratio de ~4.7:1.
Typographie
| Police | Usage | Justification |
|---|---|---|
| Playfair Display (serif) | Titres, logos, grands affichages | Élégance classique du cinéma hollywoodien, serif avec contrastes de pleins et déliés |
| Lato (sans-serif) | Corps de texte, labels, navigation | Excellente lisibilité à petite taille, neutre et moderne, contraste avec Playfair |
Éléments graphiques clés
Motif étoile / anneaux
L'étoile ★ et les 3 anneaux concentriques sont le motif central du site. Présent dans le hero de l'accueil et repris dans l'animation de chargement de page, il évoque les étoiles gravées sur le Walk of Fame d'Hollywood.
Vidéos .webm en boucle
La section films de l'accueil utilise des extraits vidéo en autoplay/muted/loop au format WebM (compression optimale). Cet effet de mosaïque cinématographique est directement inspiré des annonces de plateformes comme Netflix.
03 — Analyse des données — Dictionnaire, MCD et MLD
Dictionnaire de données
| Attribut | Type | Contrainte | Description |
|---|---|---|---|
| acteur_id | TINYINT(4) | PK, AUTO_INCREMENT | Identifiant unique de l'acteur |
| acteur_nom | VARCHAR(50) | NOT NULL | Nom de famille |
| acteur_prenom | VARCHAR(50) | NOT NULL | Prénom |
| acteur_date_naissance | DATE | DEFAULT NULL | Date de naissance |
| acteur_nationalite | VARCHAR(50) | DEFAULT NULL | Nationalité |
| acteur_biographie | TEXT | DEFAULT NULL | Biographie courte |
| acteur_palmares | TEXT | DEFAULT NULL | Récompenses (Oscars, Golden Globes…) |
| acteur_photo | VARCHAR(255) | DEFAULT NULL | Chemin vers la photo |
| acteur_film_important | VARCHAR(100) | DEFAULT NULL | Titre du film phare |
| film_id | TINYINT(4) | PK, AUTO_INCREMENT | Identifiant unique du film |
| film_titre | VARCHAR(100) | NOT NULL | Titre du film |
| film_annee | YEAR(4) | DEFAULT NULL | Année de sortie |
| film_genre | VARCHAR(50) | DEFAULT NULL | Genre cinématographique |
| film_resume | TEXT | DEFAULT NULL | Résumé du film |
| film_realisateur | VARCHAR(50) | DEFAULT NULL | Nom du réalisateur |
| film_studio | VARCHAR(50) | DEFAULT NULL | Studio de production |
| acteur_id (FK) | TINYINT(4) | FK → acteurs.acteur_id | Lien entre film et acteur |
MCD — Modèle Conceptuel de Données
ACTEUR
- acteur_id
- acteur_nom
- acteur_prenom
- acteur_date_naissance
- acteur_nationalite
- acteur_biographie
- acteur_palmares
- acteur_photo
- acteur_film_important
(1,1)
——
a pour
film phare
film phare
——
(0,N)
FILM
- film_id
- film_titre
- film_annee
- film_genre
- film_resume
- film_realisateur
- film_studio
- #acteur_id
MLD — Modèle Logique de Données
acteurs (acteur_id, acteur_nom, acteur_prenom, acteur_date_naissance, acteur_nationalite, acteur_biographie, acteur_palmares, acteur_photo, acteur_film_important)
film (film_id, film_titre, film_annee, film_genre, film_resume, film_realisateur, film_studio, #acteur_id)
Contrainte FK : film.acteur_id → acteurs.acteur_id — ON DELETE RESTRICT, ON UPDATE RESTRICT
Schémas réalisés sur Analyse SI
04 — Analyse du codage — W3C et librairies
Structure des fichiers
| Fichier | Rôle |
|---|---|
| index.php | Page d'accueil : hero, statistiques, grille de films vidéo, features |
| listing.php | Catalogue des 50 acteurs avec affichage progressif (8 visibles + bouton) |
| form_recherche.php | Formulaire de recherche sécurisé avec messages d'erreur contextuels |
| reponse_recherche.php | Résultats : tableau + cartes détail avec panneau film collapse Bootstrap |
| header.php | Navigation responsive (include partout) + loader de page animé |
| footer.php | Pied de page 3 colonnes (include partout) |
| style.css | Feuille de style unique — variables CSS, tous les composants, responsive |
| alert.js | Alerte anti-injection XSS externalisée (évite le DOM XSS inline) |
| loader.js | Réaffichage de l'animation de chargement lors des navigations internes |
Librairies utilisées et justifications
| Librairie | Version | Justification |
|---|---|---|
| Bootstrap | 5.3.2 (CDN) | Grille responsive col-sm-*, composants navbar et collapse. Contraint par le TP à un seul breakpoint 576px. |
| Google Fonts | — | Playfair Display + Lato, chargées avec font-display=optional pour éviter le FOIT et ne pas bloquer le rendu. |
Conformité W3C
- Attribut lang="fr" sur toutes les pages
- Balises <track kind="captions"> sur les 4 éléments <video>
- Hiérarchie des titres respectée (h1 → h2 → h3, aucun saut)
- Balises sémantiques : <main>, <header>, <footer>, <nav>, <section>
- Meta description sur chaque page
- Attributs alt sur toutes les images
index.php
listing.php
form_recherche.php / reponse_recherche.php
reponse_recherche.php (détail)
05 — Analyse de performance Lighthouse
index.php — Page d'accueil
Desktop
Mobile
listing.php — Catalogue des acteurs
Desktop
Mobile
form_recherche.php — Formulaire de recherche
Desktop
Mobile
reponse_recherche.php — Page de résultats
Desktop
Mobile
Points clés ayant permis ces scores
Performance
- Vidéos au format .webm (compression optimale)
- Images avec loading="lazy"
- Polices avec font-display=optional
- Aucun JS bloquant au chargement
Accessibilité
- Toutes couleurs corrigées WCAG AA (≥4.5:1)
- Hiérarchie des titres respectée
- Balises sémantiques et attributs aria
- <track> sur les vidéos
Bonnes pratiques
- Script XSS externalisé (plus de DOM XSS inline)
- HTTPS sur le VPS
- Pas de librairies obsolètes
SEO
- Meta description sur chaque page
- Titres de page descriptifs
- Structure sémantique correcte
- Attributs alt complets
06 — Bilan des fichiers images et vidéos
| Nom du fichier | Type | Dimensions (L × H) | Poids |
|---|---|---|---|
| avatar.webm | WebM (vidéo) | 480 × 274 px | 994 Ko |
| infinity-war.webm | WebM (vidéo) | 400 × 400 px | 814 Ko |
| titanic.webm | WebM (vidéo) | 480 × 200 px | 68,2 Ko |
| inception.webm | WebM (vidéo) | 360 × 158 px | 108 Ko |
| Al Pacino.webp | WebP (image) | 349 × 500 px | 8,7 Ko |
| Angelina Jolie.webp | WebP (image) | 600 × 800 px | 16,1 Ko |
| Audrey Hepburn.webp | WebP (image) | 330 × 456 px | 13,1 Ko |
| Bette Davis.webp | WebP (image) | 435 × 521 px | 6,6 Ko |
| Brad Pitt.webp | WebP (image) | 194 × 259 px | 2,9 Ko |
| Cary Grant.webp | WebP (image) | 1280 × 1600 px | 42,9 Ko |
| Cate Blanchett.webp | WebP (image) | 960 × 1219 px | 41,3 Ko |
| Charlie Chaplin.webp | WebP (image) | 805 × 1148 px | 19 Ko |
| Charlize Theron.webp | WebP (image) | 400 × 600 px | 36,8 Ko |
| Denzel Washington.webp | WebP (image) | 1234 × 1728 px | 28,8 Ko |
| Dustin Hoffman.webp | WebP (image) | 310 × 420 px | 7,8 Ko |
| Emma Stone.webp | WebP (image) | 600 × 800 px | 29,4 Ko |
| George Clooney.webp | WebP (image) | 194 × 259 px | 3,6 Ko |
| Grace Kelly.webp | WebP (image) | 250 × 314 px | 6,1 Ko |
| Halle Berry.webp | WebP (image) | 250 × 322 px | 7,8 Ko |
| Harrison Ford.webp | WebP (image) | 1000 × 1487 px | 26,6 Ko |
| Helen Mirren.webp | WebP (image) | 1000 × 1267 px | 26 Ko |
| Humphrey Bogart.webp | WebP (image) | 330 × 467 px | 10,1 Ko |
| Ingrid Bergman.webp | WebP (image) | 330 × 410 px | 12 Ko |
| Jack Nicholson.webp | WebP (image) | 1024 × 768 px | 21,1 Ko |
| James Stewart.webp | WebP (image) | 200 × 252 px | 4,3 Ko |
| Jennifer Lawrence.webp | WebP (image) | 600 × 800 px | 12 Ko |
| John Wayne.webp | WebP (image) | 700 × 970 px | 26,9 Ko |
| Johnny Depp.webp | WebP (image) | 400 × 550 px | 20 Ko |
| Judin Dench.webp | WebP (image) | 439 × 500 px | 13 Ko |
| Judy Garland.webp | WebP (image) | 640 × 800 px | 22 Ko |
| Julia Roberts.webp | WebP (image) | 1098 × 768 px | 33,3 Ko |
| Katharine hepburn.webp | WebP (image) | 250 × 360 px | 16,4 Ko |
| Leonardo DiCaprio.webp | WebP (image) | 250 × 347 px | 8,9 Ko |
| Marilyn Monroe.webp | WebP (image) | 729 × 900 px | 25,6 Ko |
| Marlon Brando.webp | WebP (image) | 708 × 985 px | 14,2 Ko |
| Meryl Streep.webp | WebP (image) | 600 × 800 px | 16 Ko |
| Michael Douglas.webp | WebP (image) | 330 × 471 px | 10 Ko |
| Morgan Freeman.webp | WebP (image) | 679 × 960 px | 35,3 Ko |
| Natalie Portman.webp | WebP (image) | 796 × 1024 px | 19,9 Ko |
| Nicole Kidman.webp | WebP (image) | 648 × 832 px | 17 Ko |
| Paul Newman.webp | WebP (image) | 980 × 1226 px | 32,8 Ko |
| Rita Hayworth.webp | WebP (image) | 682 × 852 px | 31,3 Ko |
| Robert De Niro.webp | WebP (image) | 904 × 1196 px | 22,1 Ko |
| Sandra Bullock.webp | WebP (image) | 600 × 800 px | 35,9 Ko |
| Sean Connery.webp | WebP (image) | 625 × 804 px | 20,7 Ko |
| Sidney Poitier.webp | WebP (image) | 819 × 999 px | 22,3 Ko |
| Sigourney Weaver.webp | WebP (image) | 960 × 1280 px | 92 Ko |
| Sophia Loren.webp | WebP (image) | 798 × 1000 px | 16,1 Ko |
| Sylvester Stallone.webp | WebP (image) | 484 × 720 px | 16,3 Ko |
| Viola Davis.webp | WebP (image) | 250 × 377 px | 7,6 Ko |
| Will Smith.webp | WebP (image) | 485 × 600 px | 8 Ko |
| Clint Eastwood.webp | WebP (image) | 781 × 1000 px | 41,6 Ko |
| Elizabeth Taylor.webp | WebP (image) | 800 × 1000 px | 34,2 Ko |
| Gregory Peck.webp | WebP (image) | 800 × 1051 px | 74,3 Ko |
Affiches des films — imagesfilms/
| Nom du fichier | Type | Dimensions (L × H) | Poids |
|---|---|---|---|
| Alien.webp | WebP (image) | 400 × 600 px | 11,4 Ko |
| All About Eve.webp | WebP (image) | 712 × 1000 px | 33 Ko |
| Black Swan.webp | WebP (image) | 600 × 800 px | 20,4 Ko |
| Breakfast at Tiffany's.webp | WebP (image) | 1813 × 2560 px | 91,3 Ko |
| Casablanca.webp | WebP (image) | 1000 × 1500 px | 40,9 Ko |
| Cleopatra.webp | WebP (image) | 701 × 1000 px | 73,9 Ko |
| Fight Club.webp | WebP (image) | 697 × 1000 px | 38,2 Ko |
| Gilda.webp | WebP (image) | 1478 × 2231 px | 72,9 Ko |
| Goldfinger.webp | WebP (image) | 706 × 1000 px | 34,2 Ko |
| Gravity.webp | WebP (image) | 685 × 1000 px | 19,1 Ko |
| It's a Wonderful Life.webp | WebP (image) | 675 × 1000 px | 59,4 Ko |
| Lara Croft Tomb Raider.webp | WebP (image) | 709 × 1000 px | 35,6 Ko |
| Lilies of the Field.webp | WebP (image) | 555 × 1000 px | 28,6 Ko |
| Mad Max Fury Road.webp | WebP (image) | 310 × 420 px | 22,8 Ko |
| Monster's Ball.webp | WebP (image) | 672 × 1000 px | 44,5 Ko |
| Moulin Rouge.webp | WebP (image) | 772 × 1000 px | 67,8 Ko |
| North by Northwest.webp | WebP (image) | 790 × 1000 px | 37,9 Ko |
| Ocean's Eleven.webp | WebP (image) | 702 × 1000 px | 72,5 Ko |
| One Flew Over The Cuckoo's Nest.webp | WebP (image) | 433 × 613 px | 34,6 Ko |
| Pirates of the Caribbean.webp | WebP (image) | 721 × 1000 px | 125,5 Ko |
| Pretty Woman.webp | WebP (image) | 567 × 800 px | 20,9 Ko |
| Rear Window.webp | WebP (image) | 690 × 1032 px | 41,7 Ko |
| Rocky.webp | WebP (image) | 719 × 1000 px | 40,3 Ko |
| Scarface.webp | WebP (image) | 310 × 420 px | 12,9 Ko |
| Skyfall.webp | WebP (image) | 600 × 800 px | 25,6 Ko |
| Some Like It Hot.webp | WebP (image) | 706 × 1000 px | 68,1 Ko |
| Sophie's Choice.webp | WebP (image) | 1850 × 2560 px | 63,3 Ko |
| Star Wars episode 4.webp | WebP (image) | 748 × 1075 px | 39,2 Ko |
| The Color of Money.webp | WebP (image) | 960 × 1440 px | 40,5 Ko |
| The Godfather Part 2.webp | WebP (image) | 1000 × 1501 px | 27,9 Ko |
| The Godfather.webp | WebP (image) | 810 × 1216 px | 37,2 Ko |
| The Good, The Bad and the Ugly.webp | WebP (image) | 665 × 1000 px | 33,2 Ko |
| The Graduate.webp | WebP (image) | 805 × 1000 px | 56,7 Ko |
| The Help.webp | WebP (image) | 900 × 1286 px | 51,3 Ko |
| The Hunger Games.webp | WebP (image) | 600 × 800 px | 36,2 Ko |
| The Lord of the Rings.webp | WebP (image) | 870 × 1291 px | 82,3 Ko |
| The Philadelphia Story.webp | WebP (image) | 697 × 1000 px | 37,1 Ko |
| The Queen.webp | WebP (image) | 600 × 800 px | 24,9 Ko |
| The Shawshank Redemption.webp | WebP (image) | 675 × 1000 px | 47,6 Ko |
| The Wizard of Oz.webp | WebP (image) | 727 × 1024 px | 83,4 Ko |
| Titanic.webp | WebP (image) | 1050 × 1500 px | 77,4 Ko |
| To Kill A Mockingbird.webp | WebP (image) | 862 × 1000 px | 75,1 Ko |
| Training Days.webp | WebP (image) | 300 × 400 px | 14,5 Ko |
| True Grit.webp | WebP (image) | 706 × 1000 px | 69,9 Ko |
| Two Women.webp | WebP (image) | 703 × 1000 px | 39,3 Ko |
| La La Land.webp | WebP (image) | 194 × 259 px | 6,3 Ko |
| Wall Street.webp | WebP (image) | 701 × 1000 px | 50,3 Ko |
| Men in Black.webp | WebP (image) | 300 × 385 px | 10,6 Ko |
Total 49 affiches : 2 213 Ko (2,16 Mo) — Moyenne : 45,2 Ko/affiche. Toutes les images sont au format WebP.
07 — Test et bilan de la sécurisation
Mesures implémentées
Côté HTML
- Attribut pattern sur l'input (filtre navigateur)
- Pas d'attribut autocomplete sur les champs sensibles
Côté PHP
- trim() — suppression espaces en trop
- strlen() > 50 — limite de caractères
- preg_match()/u — regex Unicode strict
- strip_tags() + htmlspecialchars()
- Anti-XSS URL sur tous les $_GET
Tableau des tests
| Test | Entrée testée | Résultat |
|---|---|---|
| XSS dans l'URL | index.php?test=<script>alert()</script> | ✅ Redirection + alerte JS |
| XSS dans le formulaire | texte=<script>alert()</script> | ✅ Redirection formulaire |
| Dépassement longueur | texte=aaa...aaa (51 caractères) | ✅ Message "dépasse 50 caractères" |
| Caractères interdits | texte=DiCaprio@#<>{} | ✅ Message "caractères non autorisés" |
| Champ vide | texte= | ✅ Redirection formulaire |
| Espaces seuls | texte= | ✅ Bloqué par trim() + empty() |
| Injection SQL | texte='; DROP TABLE acteurs; -- | ✅ Bloqué par le regex |
| Recherche sans résultat | texte=Zzzzzzz | ✅ Affiche 0 résultat, pas d'erreur PHP |
Vidéo de démonstration
Lien direct : https://youtu.be/o6GnS3tN4N0 · Fichier local : securite-demo.mp4
08 — Conclusion et expertise
Bilan technique
Le site HollywoodStars a été développé en respectant l'ensemble des contraintes du TP : PHP procédural avec includes, Bootstrap 5.3.2 avec un seul breakpoint à 576px, palette de couleurs limitée aux variables CSS du :root, et données en tableau PHP statique en attendant la connexion PDO à la base de données MariaDB. Les 50 photos d'acteurs (WebP compressées, 22 Ko en moyenne) et les 49 affiches de films sont intégrées. Les scores Lighthouse obtenus sur desktop et mobile valident la qualité technique de la production.
Justifications des choix
- Thème sombre rouge : choix délibéré pour évoquer le tapis rouge et l'univers du cinéma hollywoodien. Le rouge bordeaux (#2c0401) crée une atmosphère immersive et différenciante par rapport aux sites encyclopédiques classiques.
- Format WebP pour les images : compression supérieure au JPEG/PNG à qualité équivalente. 50 photos d'acteurs pour seulement 1,09 Mo au total, soit 22 Ko en moyenne par image.
- Bootstrap via CDN : déploiement simplifié, mise en cache navigateur entre pages, pas de build tool nécessaire pour ce périmètre projet.
- Données statiques PHP : la structure du tableau $acteurs est identique à ce que retournerait un SELECT SQL avec JOIN, ce qui facilitera la migration vers PDO.
- Loader inline dans header.php : contournement d'un problème VPS où window.load ne se déclenchait pas (ressources CDN lentes). La logique inline ne dépend d'aucun fichier externe.
- --color-mid-light (#E05030) : variable ajoutée après analyse Lighthouse car #8C1007 ne passe pas WCAG AA en texte (ratio ~2.1:1). La nouvelle variable atteint ~4.7:1.