# 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
<?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?> | <?= $siteName ?>
```
### Contenu templates/footer.php
```php
```
### Structure index.php mise à jour
```php
'Accueil',
'pageDescription' => 'Portfolio de développeur web. Découvrez mes projets et compétences.'
]);
?>
Hello World
Le portfolio est en construction.
```
### 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_