★ ★ ★

Analyse de production

SAE203 — HollywoodStars

Étudiant : Jovany Bailleul
Groupe de TD : AB
Enseignant : Mr Libbrecht
Formation : BUT MMI — Semestre 2 — 2025/2026
Date de rendu : Semaine 1

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
#660B05
--color-dark
Fond sections
#8C1007
--color-mid
Accent / décoratif
#E05030
--color-mid-light
Texte accent
#FFF0C4
--color-cream
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

PoliceUsageJustification
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, navigationExcellente 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

AttributTypeContrainteDescription
acteur_idTINYINT(4)PK, AUTO_INCREMENTIdentifiant unique de l'acteur
acteur_nomVARCHAR(50)NOT NULLNom de famille
acteur_prenomVARCHAR(50)NOT NULLPrénom
acteur_date_naissanceDATEDEFAULT NULLDate de naissance
acteur_nationaliteVARCHAR(50)DEFAULT NULLNationalité
acteur_biographieTEXTDEFAULT NULLBiographie courte
acteur_palmaresTEXTDEFAULT NULLRécompenses (Oscars, Golden Globes…)
acteur_photoVARCHAR(255)DEFAULT NULLChemin vers la photo
acteur_film_importantVARCHAR(100)DEFAULT NULLTitre du film phare
film_idTINYINT(4)PK, AUTO_INCREMENTIdentifiant unique du film
film_titreVARCHAR(100)NOT NULLTitre du film
film_anneeYEAR(4)DEFAULT NULLAnnée de sortie
film_genreVARCHAR(50)DEFAULT NULLGenre cinématographique
film_resumeTEXTDEFAULT NULLRésumé du film
film_realisateurVARCHAR(50)DEFAULT NULLNom du réalisateur
film_studioVARCHAR(50)DEFAULT NULLStudio de production
acteur_id (FK)TINYINT(4)FK → acteurs.acteur_idLien 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
——
(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

MCD réalisé sur Analyse SI
MCD — Analyse SI
Dictionnaire de données réalisé sur Analyse SI
Dictionnaire — Analyse SI

04 — Analyse du codage — W3C et librairies

Structure des fichiers

FichierRôle
index.phpPage d'accueil : hero, statistiques, grille de films vidéo, features
listing.phpCatalogue des 50 acteurs avec affichage progressif (8 visibles + bouton)
form_recherche.phpFormulaire de recherche sécurisé avec messages d'erreur contextuels
reponse_recherche.phpRésultats : tableau + cartes détail avec panneau film collapse Bootstrap
header.phpNavigation responsive (include partout) + loader de page animé
footer.phpPied de page 3 colonnes (include partout)
style.cssFeuille de style unique — variables CSS, tous les composants, responsive
alert.jsAlerte anti-injection XSS externalisée (évite le DOM XSS inline)
loader.jsRéaffichage de l'animation de chargement lors des navigations internes

Librairies utilisées et justifications

LibrairieVersionJustification
Bootstrap5.3.2 (CDN)Grille responsive col-sm-*, composants navbar et collapse. Contraint par le TP à un seul breakpoint 576px.
Google FontsPlayfair Display + Lato, chargées avec font-display=optional pour éviter le FOIT et ne pas bloquer le rendu.

Conformité W3C

index.php

W3C validation index.php

listing.php

W3C validation listing.php

form_recherche.php / reponse_recherche.php

W3C validation form et reponse

reponse_recherche.php (détail)

W3C validation reponse_recherche.php

05 — Analyse de performance Lighthouse

index.php — Page d'accueil
Lighthouse index.php desktop
Desktop
Lighthouse index.php mobile
Mobile
listing.php — Catalogue des acteurs
Lighthouse listing.php desktop
Desktop
Lighthouse listing.php mobile
Mobile
form_recherche.php — Formulaire de recherche
Lighthouse form_recherche.php desktop
Desktop
Lighthouse form_recherche.php mobile
Mobile
reponse_recherche.php — Page de résultats
Lighthouse reponse_recherche.php desktop
Desktop
Lighthouse reponse_recherche.php mobile
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 fichierTypeDimensions (L × H)Poids
avatar.webmWebM (vidéo)480 × 274 px994 Ko
infinity-war.webmWebM (vidéo)400 × 400 px814 Ko
titanic.webmWebM (vidéo)480 × 200 px68,2 Ko
inception.webmWebM (vidéo)360 × 158 px108 Ko
Al Pacino.webpWebP (image)349 × 500 px8,7 Ko
Angelina Jolie.webpWebP (image)600 × 800 px16,1 Ko
Audrey Hepburn.webpWebP (image)330 × 456 px13,1 Ko
Bette Davis.webpWebP (image)435 × 521 px6,6 Ko
Brad Pitt.webpWebP (image)194 × 259 px2,9 Ko
Cary Grant.webpWebP (image)1280 × 1600 px42,9 Ko
Cate Blanchett.webpWebP (image)960 × 1219 px41,3 Ko
Charlie Chaplin.webpWebP (image)805 × 1148 px19 Ko
Charlize Theron.webpWebP (image)400 × 600 px36,8 Ko
Denzel Washington.webpWebP (image)1234 × 1728 px28,8 Ko
Dustin Hoffman.webpWebP (image)310 × 420 px7,8 Ko
Emma Stone.webpWebP (image)600 × 800 px29,4 Ko
George Clooney.webpWebP (image)194 × 259 px3,6 Ko
Grace Kelly.webpWebP (image)250 × 314 px6,1 Ko
Halle Berry.webpWebP (image)250 × 322 px7,8 Ko
Harrison Ford.webpWebP (image)1000 × 1487 px26,6 Ko
Helen Mirren.webpWebP (image)1000 × 1267 px26 Ko
Humphrey Bogart.webpWebP (image)330 × 467 px10,1 Ko
Ingrid Bergman.webpWebP (image)330 × 410 px12 Ko
Jack Nicholson.webpWebP (image)1024 × 768 px21,1 Ko
James Stewart.webpWebP (image)200 × 252 px4,3 Ko
Jennifer Lawrence.webpWebP (image)600 × 800 px12 Ko
John Wayne.webpWebP (image)700 × 970 px26,9 Ko
Johnny Depp.webpWebP (image)400 × 550 px20 Ko
Judin Dench.webpWebP (image)439 × 500 px13 Ko
Judy Garland.webpWebP (image)640 × 800 px22 Ko
Julia Roberts.webpWebP (image)1098 × 768 px33,3 Ko
Katharine hepburn.webpWebP (image)250 × 360 px16,4 Ko
Leonardo DiCaprio.webpWebP (image)250 × 347 px8,9 Ko
Marilyn Monroe.webpWebP (image)729 × 900 px25,6 Ko
Marlon Brando.webpWebP (image)708 × 985 px14,2 Ko
Meryl Streep.webpWebP (image)600 × 800 px16 Ko
Michael Douglas.webpWebP (image)330 × 471 px10 Ko
Morgan Freeman.webpWebP (image)679 × 960 px35,3 Ko
Natalie Portman.webpWebP (image)796 × 1024 px19,9 Ko
Nicole Kidman.webpWebP (image)648 × 832 px17 Ko
Paul Newman.webpWebP (image)980 × 1226 px32,8 Ko
Rita Hayworth.webpWebP (image)682 × 852 px31,3 Ko
Robert De Niro.webpWebP (image)904 × 1196 px22,1 Ko
Sandra Bullock.webpWebP (image)600 × 800 px35,9 Ko
Sean Connery.webpWebP (image)625 × 804 px20,7 Ko
Sidney Poitier.webpWebP (image)819 × 999 px22,3 Ko
Sigourney Weaver.webpWebP (image)960 × 1280 px92 Ko
Sophia Loren.webpWebP (image)798 × 1000 px16,1 Ko
Sylvester Stallone.webpWebP (image)484 × 720 px16,3 Ko
Viola Davis.webpWebP (image)250 × 377 px7,6 Ko
Will Smith.webpWebP (image)485 × 600 px8 Ko
Clint Eastwood.webpWebP (image)781 × 1000 px41,6 Ko
Elizabeth Taylor.webpWebP (image)800 × 1000 px34,2 Ko
Gregory Peck.webpWebP (image)800 × 1051 px74,3 Ko

Affiches des films — imagesfilms/

Nom du fichierTypeDimensions (L × H)Poids
Alien.webpWebP (image)400 × 600 px11,4 Ko
All About Eve.webpWebP (image)712 × 1000 px33 Ko
Black Swan.webpWebP (image)600 × 800 px20,4 Ko
Breakfast at Tiffany's.webpWebP (image)1813 × 2560 px91,3 Ko
Casablanca.webpWebP (image)1000 × 1500 px40,9 Ko
Cleopatra.webpWebP (image)701 × 1000 px73,9 Ko
Fight Club.webpWebP (image)697 × 1000 px38,2 Ko
Gilda.webpWebP (image)1478 × 2231 px72,9 Ko
Goldfinger.webpWebP (image)706 × 1000 px34,2 Ko
Gravity.webpWebP (image)685 × 1000 px19,1 Ko
It's a Wonderful Life.webpWebP (image)675 × 1000 px59,4 Ko
Lara Croft Tomb Raider.webpWebP (image)709 × 1000 px35,6 Ko
Lilies of the Field.webpWebP (image)555 × 1000 px28,6 Ko
Mad Max Fury Road.webpWebP (image)310 × 420 px22,8 Ko
Monster's Ball.webpWebP (image)672 × 1000 px44,5 Ko
Moulin Rouge.webpWebP (image)772 × 1000 px67,8 Ko
North by Northwest.webpWebP (image)790 × 1000 px37,9 Ko
Ocean's Eleven.webpWebP (image)702 × 1000 px72,5 Ko
One Flew Over The Cuckoo's Nest.webpWebP (image)433 × 613 px34,6 Ko
Pirates of the Caribbean.webpWebP (image)721 × 1000 px125,5 Ko
Pretty Woman.webpWebP (image)567 × 800 px20,9 Ko
Rear Window.webpWebP (image)690 × 1032 px41,7 Ko
Rocky.webpWebP (image)719 × 1000 px40,3 Ko
Scarface.webpWebP (image)310 × 420 px12,9 Ko
Skyfall.webpWebP (image)600 × 800 px25,6 Ko
Some Like It Hot.webpWebP (image)706 × 1000 px68,1 Ko
Sophie's Choice.webpWebP (image)1850 × 2560 px63,3 Ko
Star Wars episode 4.webpWebP (image)748 × 1075 px39,2 Ko
The Color of Money.webpWebP (image)960 × 1440 px40,5 Ko
The Godfather Part 2.webpWebP (image)1000 × 1501 px27,9 Ko
The Godfather.webpWebP (image)810 × 1216 px37,2 Ko
The Good, The Bad and the Ugly.webpWebP (image)665 × 1000 px33,2 Ko
The Graduate.webpWebP (image)805 × 1000 px56,7 Ko
The Help.webpWebP (image)900 × 1286 px51,3 Ko
The Hunger Games.webpWebP (image)600 × 800 px36,2 Ko
The Lord of the Rings.webpWebP (image)870 × 1291 px82,3 Ko
The Philadelphia Story.webpWebP (image)697 × 1000 px37,1 Ko
The Queen.webpWebP (image)600 × 800 px24,9 Ko
The Shawshank Redemption.webpWebP (image)675 × 1000 px47,6 Ko
The Wizard of Oz.webpWebP (image)727 × 1024 px83,4 Ko
Titanic.webpWebP (image)1050 × 1500 px77,4 Ko
To Kill A Mockingbird.webpWebP (image)862 × 1000 px75,1 Ko
Training Days.webpWebP (image)300 × 400 px14,5 Ko
True Grit.webpWebP (image)706 × 1000 px69,9 Ko
Two Women.webpWebP (image)703 × 1000 px39,3 Ko
La La Land.webpWebP (image)194 × 259 px6,3 Ko
Wall Street.webpWebP (image)701 × 1000 px50,3 Ko
Men in Black.webpWebP (image)300 × 385 px10,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

TestEntrée testéeRésultat
XSS dans l'URLindex.php?test=<script>alert()</script>✅ Redirection + alerte JS
XSS dans le formulairetexte=<script>alert()</script>✅ Redirection formulaire
Dépassement longueurtexte=aaa...aaa (51 caractères)✅ Message "dépasse 50 caractères"
Caractères interditstexte=DiCaprio@#<>{}✅ Message "caractères non autorisés"
Champ videtexte=✅ Redirection formulaire
Espaces seulstexte=    ✅ Bloqué par trim() + empty()
Injection SQLtexte='; DROP TABLE acteurs; --✅ Bloqué par le regex
Recherche sans résultattexte=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