Story 1.1: initialisation projet

2026-02-04 02:14:17 +01:00
parent c9f95d39a0
commit e3f062249b
38 changed files with 10300 additions and 0 deletions
--- a/docs/stories/1.3.templates-php-base.md
+++ b/docs/stories/1.3.templates-php-base.md
@@ -0,0 +1,272 @@
+# Story 1.3: Templates PHP de Base (Header/Footer)
+
+## Status
+
+Ready for Dev
+
+## Story
+
+**As a** développeur,
+**I want** créer les templates PHP réutilisables pour le header et le footer,
+**so that** je ne duplique pas le code HTML commun sur chaque page.
+
+## Acceptance Criteria
+
+1. `templates/header.php` contient le doctype, head, meta tags SEO de base, et lien vers le CSS
+2. `templates/footer.php` contient la fermeture body, les scripts JS, et le copyright
+3. Le header inclut les balises meta viewport pour le responsive
+4. Le header permet de passer un titre de page dynamique via une variable PHP
+5. Les templates sont inclus dans `index.php` et la page s'affiche correctement
+6. Une fonction helper `include_template()` est créée pour inclure les templates avec des données
+
+## Tasks / Subtasks
+
+- [] **Task 1 : Créer la fonction helper include_template()** (AC: 6)
+  - [] Créer le fichier `includes/functions.php`
+  - [] Implémenter la fonction `include_template($name, $data = [])`
+  - [] La fonction doit utiliser `extract()` pour passer les variables au template
+  - [] Gérer le chemin vers le dossier templates/
+
+- [] **Task 2 : Créer le template header.php** (AC: 1, 3, 4)
+  - [] Créer `templates/header.php`
+  - [] Ajouter le doctype HTML5
+  - [] Ajouter les meta tags essentiels (charset, viewport, description)
+  - [] Ajouter les meta tags Open Graph de base
+  - [] Ajouter le lien vers `output.css`
+  - [] Ajouter le preload des polices
+  - [] Permettre un titre dynamique via `$pageTitle`
+  - [] Permettre une description dynamique via `$pageDescription`
+
+- [] **Task 3 : Créer le template footer.php** (AC: 2)
+  - [] Créer `templates/footer.php`
+  - [] Ajouter le copyright avec l'année dynamique
+  - [] Ajouter le lien vers `main.js` avec attribut `defer`
+  - [] Fermer les balises body et html
+
+- [] **Task 4 : Mettre à jour index.php** (AC: 5)
+  - [] Inclure `includes/functions.php`
+  - [] Utiliser `include_template('header', ['pageTitle' => '...'])`
+  - [] Ajouter un contenu de test minimal
+  - [] Utiliser `include_template('footer')`
+
+- [] **Task 5 : Tester l'affichage**
+  - [] Lancer le serveur PHP local
+  - [] Vérifier que la page s'affiche correctement
+  - [] Vérifier le titre dans l'onglet du navigateur
+  - [] Vérifier que le CSS est chargé
+  - [] Valider le HTML avec W3C Validator
+
+## Dev Notes
+
+### Fonction include_template()
+
+```php
+// includes/functions.php
+
+/**
+ * Inclut un template avec des données
+ * @param string $name Nom du template (sans .php)
+ * @param array $data Variables à passer au template
+ */
+function include_template(string $name, array $data = []): void
+{
+    extract($data);
+    include __DIR__ . "/../templates/{$name}.php";
+}
+```
+
+### Contenu templates/header.php
+
+```php
+<?php
+/**
+ * Template Header
+ * Variables disponibles :
+ * - $pageTitle (string) : Titre de la page
+ * - $pageDescription (string, optionnel) : Meta description
+ */
+
+$pageTitle = $pageTitle ?? 'Portfolio - Développeur Web';
+$pageDescription = $pageDescription ?? 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
+$siteName = 'Portfolio';
+?>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="<?= htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8') ?>">
+
+    <!-- Open Graph -->
+    <meta property="og:title" content="<?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?>">
+    <meta property="og:description" content="<?= htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8') ?>">
+    <meta property="og:type" content="website">
+    <meta property="og:locale" content="fr_FR">
+
+    <!-- Preload fonts -->
+    <link rel="preload" href="/assets/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/assets/fonts/jetbrains-mono-var.woff2" as="font" type="font/woff2" crossorigin>
+
+    <!-- Favicon -->
+    <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="/assets/css/output.css">
+
+    <title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?> | <?= $siteName ?></title>
+</head>
+<body class="bg-background text-text-primary font-sans antialiased">
+```
+
+### Contenu templates/footer.php
+
+```php
+<?php
+/**
+ * Template Footer
+ */
+$currentYear = date('Y');
+?>
+    <!-- Footer -->
+    <footer class="bg-surface border-t border-border py-8 mt-auto">
+        <div class="container-content text-center">
+            <p class="text-text-muted text-sm">
+                &copy; <?= $currentYear ?> Portfolio. Tous droits réservés.
+            </p>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="/assets/js/main.js" defer></script>
+</body>
+</html>
+```
+
+### Structure index.php mise à jour
+
+```php
+<?php
+// index.php - Point d'entrée
+
+require_once __DIR__ . '/includes/functions.php';
+
+// Inclure le header avec le titre
+include_template('header', [
+    'pageTitle' => 'Accueil',
+    'pageDescription' => 'Portfolio de développeur web. Découvrez mes projets et compétences.'
+]);
+?>
+
+<main class="min-h-screen">
+    <div class="container-content py-20">
+        <h1 class="text-display text-center">Hello World</h1>
+        <p class="text-center text-text-secondary mt-4">
+            Le portfolio est en construction.
+        </p>
+    </div>
+</main>
+
+<?php include_template('footer'); ?>
+```
+
+### Conventions pour les Variables de Template
+
+| Variable | Type | Obligatoire | Description |
+|----------|------|-------------|-------------|
+| `$pageTitle` | string | Oui | Titre affiché dans l'onglet |
+| `$pageDescription` | string | Non | Meta description SEO |
+| `$bodyClass` | string | Non | Classes additionnelles sur body |
+
+### Meta Tags SEO Inclus
+
+- `charset` : UTF-8
+- `viewport` : responsive mobile-first
+- `description` : description de la page
+- `og:title` : titre Open Graph
+- `og:description` : description Open Graph
+- `og:type` : website
+- `og:locale` : fr_FR
+
+### Fichier main.js Minimal
+
+Créer `assets/js/main.js` avec un contenu minimal pour éviter l'erreur 404 :
+
+```javascript
+// assets/js/main.js
+// Script principal du portfolio
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Portfolio chargé');
+});
+```
+
+## Testing
+
+### Validation Manuelle
+
+- [ ] La page index.php s'affiche sans erreur PHP
+- [ ] Le titre de l'onglet affiche "Accueil | Portfolio"
+- [ ] Le fond est sombre (#17171F)
+- [ ] Le texte "Hello World" est visible et stylé
+- [ ] Pas d'erreur 404 dans la console (CSS, JS)
+- [ ] Le HTML est valide (W3C Validator)
+
+### Commandes de Test
+
+```bash
+# Lancer le serveur PHP
+php -S localhost:8000
+
+# Ouvrir dans le navigateur
+# http://localhost:8000
+
+# Vérifier les erreurs dans la console DevTools
+```
+
+### Checklist Accessibilité
+
+- [ ] `lang="fr"` sur la balise html
+- [ ] Meta viewport présent
+- [ ] Titre de page descriptif
+- [ ] Structure sémantique (main, footer)
+
+## Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2026-01-22 | 0.1 | Création initiale de la story | Sarah (PO) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+Claude Opus 4.5 (claude-opus-4-5-20251101)
+
+### Debug Log References
+
+_À compléter par le dev agent_
+
+### Completion Notes List
+
+- Fonction include_template() créée avec extract() pour les variables
+- header.php avec doctype, meta SEO, Open Graph, preload fonts, CSS link
+- footer.php avec copyright dynamique et script main.js defer
+- index.php mis à jour pour utiliser les templates
+- main.js créé (minimal) pour éviter erreur 404
+- Syntaxe PHP validée sans erreurs
+- CSS regénéré avec nouvelles classes (7,7 Ko)
+
+### File List
+
+| Fichier | Action |
+|---------|--------|
+| `includes/functions.php` | Créé |
+| `templates/header.php` | Créé |
+| `templates/footer.php` | Créé |
+| `assets/js/main.js` | Créé |
+| `index.php` | Modifié |
+| `assets/css/output.css` | Regénéré |
+
+## QA Results
+
+_À compléter par le QA agent_