PhpBB Lab Académie

Continuer dans le même fichier index.php avec le tableau associatif des pages principales, comprendre ce que signifie parcourir un tableau, découvrir progressivement la structure foreach, le rôle de as et de la variable représentant l’élément courant, remplacer les trois lignes répétées de navigation par un seul bloc exécuté pour chaque page, préserver la structure HTML accessible et préparer l’étude des boucles plus générales dans le chapitre suivant.

Avant de commencer

Dans la leçon précédente, nous avons fait évoluer :

$pagesPrincipales

pour représenter chacune de nos trois pages avec deux informations :

titre
fichier

Le dossier du fil rouge contient toujours notamment :

index.html
index.php
apropos.html
contact.html
ordinateur.jpg
styles.css

Dans :

index.php

nous pouvons maintenant avoir :

$pagesPrincipales = [
    [
        'titre' => 'Accueil',
        'fichier' => 'index.html'
    ],
    [
        'titre' => 'À propos',
        'fichier' => 'apropos.html'
    ],
    [
        'titre' => 'Contact',
        'fichier' => 'contact.html'
    ]
];

Et la navigation peut encore contenir trois lignes très proches :

<li><a href="<?php echo $pagesPrincipales[0]['fichier']; ?>"><?php echo $pagesPrincipales[0]['titre']; ?></a></li>
<li><a href="<?php echo $pagesPrincipales[1]['fichier']; ?>"><?php echo $pagesPrincipales[1]['titre']; ?></a></li>
<li><a href="<?php echo $pagesPrincipales[2]['fichier']; ?>"><?php echo $pagesPrincipales[2]['titre']; ?></a></li>

Cette écriture fonctionne.

Mais la même structure est répétée trois fois.

Seules les données changent.

Dans cette troisième et dernière leçon du chapitre, nous allons répondre à quatre questions :

- Que signifie parcourir un tableau ?
- Qu’est-ce qu’une boucle ?
- Comment fonctionne

foreach

?
- Comment utiliser l’élément courant pour produire notre navigation sans répéter presque le même code ?

À la fin de cette leçon, la navigation utilisera une seule structure HTML répétée automatiquement pour les trois pages du tableau.

Nous allons d’abord comprendre

foreach

avant de l’intégrer à la page.

1. Que signifie parcourir un tableau ?

Parcourir un tableau signifie examiner ses éléments les uns après les autres.

Notre tableau contient trois éléments :

premier élément
= page Accueil

deuxième élément
= page À propos

troisième élément
= page Contact

Nous pouvons représenter le parcours ainsi :

prendre Accueil
faire une action

prendre À propos
faire la même action

prendre Contact
faire la même action

L’action peut utiliser les données de chaque élément.

2. Qu’est-ce qu’une boucle ?

Une boucle est une structure qui permet de répéter un bloc de code.

Nous avons déjà utilisé des blocs avec :

if
elseif
else

Mais une condition choisit si un bloc doit être exécuté.

Une boucle, elle, peut exécuter plusieurs fois un bloc selon une règle.

Pour notre tableau, nous voulons :

exécuter le même bloc
une fois pour chaque page

3. Pourquoi foreach est adapté ici

PHP possède plusieurs structures de boucle.

Pour parcourir directement les éléments d’un tableau, l’une des plus naturelles est :

foreach

Nous pouvons lire ce mot comme :

pour chaque

Dans notre cas :

pour chaque page de $pagesPrincipales
faire quelque chose

4. Écrire la structure minimale

Nous pouvons écrire :

foreach ($pagesPrincipales as $page)
{
    var_dump($page);
}

Nous utilisons ici

var_dump()

uniquement comme outil temporaire d’observation.

Nous allons maintenant décomposer cette structure avant de la conserver dans le projet.

5. Comprendre foreach

Le mot :

foreach

indique à PHP que nous voulons parcourir les éléments d’un tableau.

Dans :

foreach ($pagesPrincipales as $page)

le tableau parcouru est :

$pagesPrincipales

PHP va donc prendre ses éléments successivement.

6. Comprendre le mot as

Dans :

foreach ($pagesPrincipales as $page)

le mot :

as

relie le tableau à une variable de travail.

Nous pouvons lire :

pour chaque élément de $pagesPrincipales,
utiliser temporairement le nom $page

Le mot

as

fait partie de la syntaxe de

foreach

.

7. Comprendre la variable page

Nous avons choisi :

$page

parce que chaque élément de :

$pagesPrincipales

représente une page.

Au premier passage :

$page

représente :

[
    'titre' => 'Accueil',
    'fichier' => 'index.html'
]

Au deuxième passage, elle représente la page À propos.

Au troisième passage, elle représente la page Contact.

8. La variable page change à chaque passage

La variable :

$page

n’est pas toujours associée au premier élément.

PHP lui attribue successivement chaque élément du tableau pendant le parcours.

Nous pouvons représenter :

premier passage
$page = page Accueil

deuxième passage
$page = page À propos

troisième passage
$page = page Contact

Chaque passage de la boucle peut être appelé :

une itération

Retenez simplement :

itération
= un passage de la boucle

9. Comprendre les accolades

Après :

foreach ($pagesPrincipales as $page)

nous avons :

{
    var_dump($page);
}

Comme avec les conditions, les accolades délimitent le bloc.

Mais ici, le bloc est exécuté une fois pour chaque élément du tableau.

Avec trois pages, ce bloc est donc exécuté trois fois.

10. Observer les trois passages

Testez temporairement :

foreach ($pagesPrincipales as $page)
{
    var_dump($page);
}

Vous devez pouvoir observer successivement les tableaux correspondant à :

Accueil
À propos
Contact

Supprimez ensuite ce test.

Nous avons seulement vérifié le mécanisme du parcours.

11. Accéder au titre de l’élément courant

Pendant un passage de la boucle :

$page

contient un tableau associatif.

Nous connaissons déjà les clés :

titre
fichier

Nous pouvons donc écrire :

$page['titre']

Au premier passage, le résultat est :

Accueil

Au deuxième :

À propos

Au troisième :

Contact

12. Accéder au fichier de l’élément courant

De la même manière :

$page['fichier']

produit successivement :

index.html
apropos.html
contact.html

Nous n’avons donc plus besoin d’écrire :

$pagesPrincipales[0]
$pagesPrincipales[1]
$pagesPrincipales[2]

pour produire chaque lien séparément.

13. Faire un test uniquement avec les titres

Testez temporairement :

foreach ($pagesPrincipales as $page)
{
    echo $page['titre'];
}

PHP parcourt les trois pages et produit leurs trois titres.

Les textes peuvent apparaître collés les uns aux autres car nous n’avons ajouté aucune structure HTML entre eux.

C’est normal pour ce test.

Supprimez ensuite ce bloc.

14. Pourquoi ne pas construire toute la navigation avec une longue chaîne echo

Nous pourrions fabriquer chaque élément

li

et chaque lien

a

dans une longue chaîne PHP.

Nous ne choisirons pas cette approche ici.

Notre HTML est déjà clair.

Nous voulons conserver :

ul
li
a

comme structure HTML directement lisible.

PHP servira seulement à répéter le bloc et à fournir les valeurs.

15. Mélanger proprement le bloc foreach et le HTML

Nous pouvons écrire :

<ul class="navigation-principale">
    <?php foreach ($pagesPrincipales as $page) { ?>
        <li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>
    <?php } ?>
</ul>

Cette écriture contient :

- le HTML de la liste ;
- l’ouverture de la boucle PHP ;
- un seul élément

li

;
- la fermeture du bloc PHP après cet élément.

Le serveur répète le

li

pour chaque page.

16. Lire la première ligne PHP

Reprenons :

<?php foreach ($pagesPrincipales as $page) { ?>

Nous pouvons la lire :

ouvrir PHP

pour chaque élément de $pagesPrincipales,
le représenter par $page

ouvrir le bloc

revenir au HTML

Le bloc n’est pas terminé.

Nous avons seulement quitté temporairement le code PHP pour écrire le HTML qu’il doit répéter.

17. Lire le li répété

À l’intérieur de la boucle, nous avons :

<li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>

Le fichier vient de :

$page['fichier']

Le titre vient de :

$page['titre']

À chaque itération, ces deux valeurs correspondent au même élément courant.

18. Fermer le bloc foreach

Après le

li

, nous avons :

<?php } ?>

Nous pouvons lire :

ouvrir PHP

fermer l’accolade du bloc foreach

revenir au HTML

La balise :

</ul>

se trouve ensuite en dehors de la boucle.

Elle n’est donc produite qu’une seule fois.

19. Ce que PHP produit pour la première page

Au premier passage :

$page['titre']
= Accueil

$page['fichier']
= index.html

Le bloc produit donc un résultat équivalent à :

<li><a href="index.html">Accueil</a></li>

20. Ce que PHP produit pour la deuxième page

Au deuxième passage :

$page['titre']
= À propos

$page['fichier']
= apropos.html

Le résultat est équivalent à :

<li><a href="apropos.html">À propos</a></li>

21. Ce que PHP produit pour la troisième page

Au troisième passage :

$page['titre']
= Contact

$page['fichier']
= contact.html

Le résultat est équivalent à :

<li><a href="contact.html">Contact</a></li>

Nous retrouvons donc la même navigation qu’avant.

22. Une seule structure, trois résultats

Avant

foreach

, nous avions trois lignes presque identiques.

Maintenant, nous avons une seule ligne de structure :

<li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>

et la boucle l’utilise successivement avec les trois pages.

Nous pouvons résumer :

données dans le tableau
+
structure foreach
=
navigation produite automatiquement

23. L’ordre du tableau détermine l’ordre du parcours

Notre tableau contient les pages dans cet ordre :

Accueil
À propos
Contact

foreach

les parcourt dans cet ordre.

La navigation produite conserve donc :

Accueil
À propos
Contact

Si nous modifions l’ordre des éléments dans le tableau, l’ordre produit par cette boucle change également.

24. Faire un test temporaire sur l’ordre

Pour observer ce principe, vous pouvez temporairement placer la page Contact avant la page À propos dans :

$pagesPrincipales

Actualisez la page.

La navigation suivra le nouvel ordre du tableau.

Remettez ensuite l’ordre réel :

Accueil
À propos
Contact

Nous ne changeons pas définitivement la structure du fil rouge.

25. foreach s’adapte au nombre d’éléments

Le bloc ne contient aucun index écrit manuellement :

0
1
2

Il demande simplement :

pour chaque page du tableau

Cela signifie que le même mécanisme peut parcourir un tableau contenant davantage d’éléments.

Nous n’ajoutons pas de fausse page pour le démontrer.

Nous retenons seulement que la boucle dépend du contenu réel du tableau.

26. La navigation reste accessible

Le navigateur reçoit toujours :

<nav>
<ul>
<li>
<a>
...
</a>
</li>
</ul>
</nav>

Nous n’avons supprimé aucun élément sémantique.

Nous n’ajoutons aucune balise ARIA inutile.

Chaque lien possède toujours :

- une adresse ;
- un texte visible compréhensible ;
- le comportement natif d’un lien HTML.

PHP modifie la manière de produire les liens, pas leur sens.

27. Les valeurs restent contrôlées par notre code

Dans cette leçon, les valeurs :

titre
fichier

sont écrites directement dans notre tableau PHP.

Elles ne proviennent pas encore d’un formulaire, d’une requête ou d’une base de données.

Plus tard, lorsque des données pourront provenir de l’extérieur du code, nous étudierons leur validation et leur affichage avant de les réutiliser dans le HTML.

Nous ne mélangeons pas ces notions maintenant.

28. Nous conservons toujours les fichiers actuels

Le tableau contient encore :

index.html
apropos.html
contact.html

C’est cohérent avec l’état actuel du fil rouge.

Nous travaillons dans :

index.php

mais nous n’avons pas encore réalisé la migration complète des autres pages.

foreach

ne change pas cette situation.

Il parcourt uniquement les données que nous lui avons données.

29. Ne pas utiliser page en dehors de la boucle

Dans cette leçon, nous considérons :

$page

comme la variable de travail du parcours.

Nous l’utilisons uniquement à l’intérieur du bloc

foreach

.

Nous ne construisons pas la suite du projet en dépendant de sa valeur après la boucle.

Cela garde le rôle de la variable simple et clair :

$page
= élément courant pendant le parcours

30. État final du tableau

À la fin de cette leçon, le tableau reste exactement :

$pagesPrincipales = [
    [
        'titre' => 'Accueil',
        'fichier' => 'index.html'
    ],
    [
        'titre' => 'À propos',
        'fichier' => 'apropos.html'
    ],
    [
        'titre' => 'Contact',
        'fichier' => 'contact.html'
    ]
];

Nous n’avons pas besoin de modifier sa structure pour utiliser

foreach

.

31. État final de la navigation

La navigation peut maintenant être :

<nav>
    <ul class="navigation-principale">
        <?php foreach ($pagesPrincipales as $page) { ?>
            <li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>
        <?php } ?>
    </ul>
</nav>

Les trois anciennes lignes écrites avec :

$pagesPrincipales[0]
$pagesPrincipales[1]
$pagesPrincipales[2]

ne sont plus nécessaires dans la navigation.

32. Vérifier le résultat dans le navigateur

Enregistrez :

index.php

puis actualisez la page.

La navigation visible doit toujours être :

Accueil
À propos
Contact

Chaque lien doit toujours pointer vers :

index.html
apropos.html
contact.html

Le résultat visible n’a pas besoin de changer pour que le code ait progressé.

33. Le chapitre se termine ici

Dans ce chapitre, nous avons avancé dans cet ordre :

tableau indexé
→ regrouper plusieurs valeurs

tableau associatif
→ donner un nom aux informations d’un élément

foreach
→ parcourir les éléments et réutiliser la même structure

Nous avons donc appris à regrouper des données,

à les organiser,

puis à les parcourir.

34. foreach est notre première vraie boucle

Nous avons maintenant utilisé une structure qui répète un bloc.

Mais

foreach

est particulièrement adapté aux tableaux.

Il existe d’autres situations dans lesquelles nous voulons répéter une action sans simplement dire :

pour chaque élément de ce tableau

Par exemple, nous pouvons vouloir répéter une action un nombre déterminé de fois.

35. Préparer le prochain chapitre

Dans la prochaine leçon, nous ouvrirons un nouveau chapitre consacré plus largement aux boucles.

Nous découvrirons progressivement :

for

Cette structure nous permettra de comprendre une autre forme de répétition basée sur :

- une valeur de départ ;
- une condition de continuation ;
- une évolution à chaque passage.

Nous réutiliserons le nombre de pages et les notions de comparaison déjà apprises.

Nous n’écrirons pas une boucle

for

avant d’avoir expliqué chacune de ses trois parties.

36. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- ce que signifie parcourir un tableau ;
- ce qu’est une boucle ;
- pourquoi

foreach

est adapté à notre tableau de pages ;
- quel tableau est parcouru dans

foreach ($pagesPrincipales as $page)

;
- le rôle de

as

;
- ce que représente

$page

;
- ce qu’est une itération ;
- pourquoi le bloc est exécuté trois fois dans notre projet ;
- ce que contient

$page['titre']

à chaque passage ;
- ce que contient

$page['fichier']

à chaque passage ;
- pourquoi nous n’avons plus besoin d’écrire les index

0

,

1

et

2

dans la navigation ;
- pourquoi l’ordre du tableau détermine l’ordre des liens ;
- pourquoi la structure HTML et l’accessibilité restent intactes ;
- pourquoi

$page

est utilisée comme variable de travail de la boucle.

Retenez surtout ceci :

foreach ($pagesPrincipales as $page)
{
    ...
}

= pour chaque élément de $pagesPrincipales,
utiliser $page pour représenter l’élément courant
et exécuter le bloc

Dans la prochaine leçon, nous ouvrirons un nouveau chapitre et nous étudierons une boucle

for

, étape par étape, à partir des notions déjà comprises.

Nous partons du tableau :

$pagesPrincipales = [
    [
        'titre' => 'Accueil',
        'fichier' => 'index.html'
    ],
    [
        'titre' => 'À propos',
        'fichier' => 'apropos.html'
    ],
    [
        'titre' => 'Contact',
        'fichier' => 'contact.html'
    ]
];

Puis nous écrivons :

foreach ($pagesPrincipales as $page)
{
    var_dump($page);
}

PHP prend successivement chaque élément du tableau.

Dans la navigation, nous pouvons ensuite écrire :

<ul class="navigation-principale">
    <?php foreach ($pagesPrincipales as $page) { ?>
        <li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>
    <?php } ?>
</ul>

Le même élément

li

est produit une fois pour Accueil, une fois pour À propos et une fois pour Contact.

Continuez dans le même fichier :

index.php

1. Conserver le tableau de la leçon précédente

Vérifiez que

$pagesPrincipales

contient toujours les trois pages avec les clés :

titre
fichier

2. Observer foreach avec var_dump()

Testez temporairement :

foreach ($pagesPrincipales as $page)
{
    var_dump($page);
}

Repérez les trois éléments successifs.

Supprimez ensuite ce test.

3. Tester uniquement les titres

Testez temporairement :

foreach ($pagesPrincipales as $page)
{
    echo $page['titre'];
}

Vérifiez que les trois titres sont parcourus, puis supprimez ce bloc.

4. Remplacer les trois lignes de navigation

Supprimez les trois

li

utilisant explicitement les index

0

,

1

et

2

.

5. Ajouter le foreach dans la liste

Conservez :

<ul class="navigation-principale">

puis ajoutez :

<?php foreach ($pagesPrincipales as $page) { ?>
    <li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>
<?php } ?>

avant :

</ul>

6. Vérifier les trois liens

La navigation doit toujours afficher :

Accueil
À propos
Contact

et conserver :

index.html
apropos.html
contact.html

comme destinations.

7. Tester temporairement l’ordre

Inversez temporairement les positions de À propos et Contact dans le tableau.

Vérifiez que

foreach

suit l’ordre du tableau.

Remettez ensuite l’ordre :

Accueil
À propos
Contact

8. Nettoyer les expériences

Aucun

var_dump()

ni

echo

de test ne doit rester en dehors de la navigation finale.

9. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. ce que signifie parcourir un tableau ;
2. ce que fait

foreach

;
3. le rôle de

as

;
4. ce que représente

$page

;
5. pourquoi le bloc est exécuté trois fois ;
6. comment le même

li

produit trois liens différents ;
7. pourquoi l’ordre du tableau influence l’ordre de la navigation ;
8. pourquoi la prochaine leçon pourra maintenant élargir la notion de boucle au-delà de

foreach

.

Dans cette leçon, nous avons terminé le chapitre :

Regrouper et parcourir des valeurs avec les tableaux

Nous avons découvert notre première vraie boucle :

foreach

La structure :

foreach ($pagesPrincipales as $page)
{
    ...
}

signifie :

pour chaque élément de $pagesPrincipales,
utiliser $page pour représenter l’élément courant
et exécuter le bloc

Nous avons appris qu’un passage de la boucle peut être appelé une itération.

Dans le fil rouge,

$page

représente successivement :

Accueil
À propos
Contact

avec leurs clés :

titre
fichier

Nous avons remplacé trois lignes presque identiques de navigation par un seul bloc :

<li><a href="<?php echo $page['fichier']; ?>"><?php echo $page['titre']; ?></a></li>

répété automatiquement par

foreach

.

La structure HTML et l’accessibilité restent intactes.

Le tableau conserve toujours les fichiers réels du fil rouge :

index.html
apropos.html
contact.html

Le chapitre nous a donc appris successivement :

tableau indexé
→ regrouper des valeurs

tableau associatif
→ organiser plusieurs informations

foreach
→ parcourir les éléments

Dans la prochaine leçon, nous ouvrirons un nouveau chapitre consacré aux boucles et nous apprendrons progressivement à utiliser

for

pour répéter un bloc à partir d’une valeur de départ, d’une condition et d’une évolution.