PhpBB Lab Académie

Continuer dans le même fichier index.php avec le tableau de pages créé dans la leçon précédente, comprendre la différence entre index numérique et clé textuelle, découvrir l’opérateur =>, représenter chaque page avec les clés titre et fichier, utiliser deux niveaux d’accès dans $pagesPrincipales et préparer le parcours automatique du tableau avec foreach dans la leçon suivante.

Avant de commencer

Dans la leçon précédente, nous avons créé notre premier tableau PHP.

Le dossier du fil rouge contient toujours notamment :

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

Au début de :

index.php

nous avons ajouté :

$pagesPrincipales = [
    'Accueil',
    'À propos',
    'Contact'
];

Nous avons appris à accéder aux trois valeurs avec :

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

Puis nous avons utilisé ces valeurs dans la vraie navigation.

Cette première organisation répond à une question :

quel est le nom de chaque page ?

Mais une page possède plusieurs informations.

Par exemple :

Accueil
= titre visible

index.html
= nom du fichier

Nous voulons maintenant regrouper ces deux informations sans créer deux séries de variables séparées.

Dans cette deuxième leçon du chapitre, nous allons répondre à quatre questions :

- Qu’est-ce qu’un tableau associatif ?
- Qu’est-ce qu’une clé textuelle ?
- Quel est le rôle de l’opérateur

=>

dans un tableau ?
- Comment représenter chacune de nos pages avec son titre et son fichier ?

À la fin de cette leçon, notre tableau

$pagesPrincipales

contiendra toujours les trois vraies pages du fil rouge, mais chaque page possédera maintenant deux informations clairement nommées :

titre
fichier

Nous n’utiliserons toujours aucune boucle.

Nous allons d’abord comprendre la nouvelle structure.

1. La limite du tableau précédent

Notre tableau actuel est :

$pagesPrincipales = [
    'Accueil',
    'À propos',
    'Contact'
];

Il regroupe correctement trois titres.

Mais il ne contient pas directement :

index.html
apropos.html
contact.html

Ces informations restent écrites séparément dans les attributs

href

de la navigation.

Nous voulons maintenant rapprocher :

le titre d’une page

et

le fichier correspondant

dans la même structure.

2. Représenter une page avec plusieurs informations

Prenons seulement la page Accueil.

Nous voulons représenter :

titre
= Accueil

fichier
= index.html

Au lieu d’utiliser des index numériques comme :

0
1

nous allons donner un nom à chaque information.

Ces noms seront :

titre
fichier

3. Découvrir le tableau associatif

Nous pouvons écrire :

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

Nous avons encore un tableau.

Mais cette fois, les valeurs ne sont pas seulement repérées par des nombres automatiques.

Elles sont associées à des clés textuelles.

Cette forme est appelée :

tableau associatif

4. Comprendre la notion de clé

Dans :

'titre' => 'Accueil'

la clé est :

'titre'

et la valeur est :

'Accueil'

Dans :

'fichier' => 'index.html'

la clé est :

'fichier'

et la valeur est :

'index.html'

Nous pouvons donc retenir :

clé
= nom permettant de retrouver une valeur

5. Comprendre l’opérateur =>

Dans un tableau associatif, nous utilisons :

=>

pour associer une clé à une valeur.

Nous pouvons lire :

'titre' => 'Accueil'

ainsi :

la clé titre
est associée à
la valeur Accueil

Et :

'fichier' => 'index.html'

ainsi :

la clé fichier
est associée à
la valeur index.html

6. Ne pas confondre => avec les opérateurs déjà appris

Nous connaissons déjà :

=
===
>=
<=
=>

Ces écritures n’ont pas le même rôle.

Dans cette leçon :

=
= attribuer une valeur à une variable

===
= comparer strictement

>=
= supérieur ou égal à

<=
= inférieur ou égal à

=>
= associer une clé à une valeur dans le tableau

Nous devons donc regarder le symbole complet.

7. Accéder au titre de la page Accueil

Avec :

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

nous pouvons obtenir le titre avec :

$pageAccueil['titre']

PHP retrouve la valeur associée à la clé :

'titre'

Le résultat est :

Accueil

8. Accéder au fichier de la page Accueil

Nous pouvons obtenir le fichier avec :

$pageAccueil['fichier']

Le résultat est :

index.html

Nous n’utilisons donc plus :

0
1

pour distinguer les deux informations de cette page.

Nous utilisons des clés qui décrivent leur rôle.

9. Tester temporairement avec echo

Testez :

echo $pageAccueil['titre'];

Vous devez obtenir :

Accueil

Puis testez :

echo $pageAccueil['fichier'];

Vous devez obtenir :

index.html

Supprimez ensuite ces sorties de test.

10. Observer le tableau associatif avec var_dump()

Testez temporairement :

var_dump($pageAccueil);

Vous devez pouvoir repérer les deux clés :

titre
fichier

et les deux valeurs :

Accueil
index.html

Supprimez ensuite cet appel à

var_dump()

.

11. Pourquoi les clés sont plus lisibles ici

Comparez :

$pageAccueil[0]

$pageAccueil[1]

avec :

$pageAccueil['titre']

$pageAccueil['fichier']

La deuxième écriture indique directement ce que nous demandons.

Nous pouvons lire :

donner le titre

donner le fichier

Le code explique mieux son intention.

12. Représenter la page À propos

Nous pouvons créer :

$pageAPropos = [
    'titre' => 'À propos',
    'fichier' => 'apropos.html'
];

Nous obtenons :

$pageAPropos['titre']
= À propos

$pageAPropos['fichier']
= apropos.html

13. Représenter la page Contact

Nous pouvons également créer :

$pageContact = [
    'titre' => 'Contact',
    'fichier' => 'contact.html'
];

Nous obtenons :

$pageContact['titre']
= Contact

$pageContact['fichier']
= contact.html

14. Nous avons maintenant trois tableaux associatifs

Nous pouvons représenter l’état ainsi :

$pageAccueil
= titre + fichier de la page Accueil

$pageAPropos
= titre + fichier de la page À propos

$pageContact
= titre + fichier de la page Contact

Chaque tableau possède la même structure :

'titre'
'fichier'

Seules les valeurs changent.

15. Revenir à pagesPrincipales

Dans la leçon précédente, nous avions déjà une variable importante :

$pagesPrincipales

Nous ne voulons pas l’abandonner.

Elle représente toujours :

l’ensemble des pages principales du site

Nous allons donc l’utiliser pour regrouper les trois tableaux associatifs.

16. Un tableau peut contenir d’autres tableaux

Nous pouvons écrire :

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

Le tableau extérieur contient toujours trois éléments.

Mais chaque élément est maintenant lui-même un tableau associatif.

17. Lire la nouvelle structure progressivement

Nous pouvons représenter :

$pagesPrincipales[0]
= tableau de la page Accueil

$pagesPrincipales[1]
= tableau de la page À propos

$pagesPrincipales[2]
= tableau de la page Contact

Puis, dans chacun de ces tableaux, nous pouvons demander :

['titre']

ou

['fichier']

Nous avons donc deux niveaux d’accès.

18. Accéder au titre de la première page

Pour obtenir :

Accueil

nous écrivons :

$pagesPrincipales[0]['titre']

Nous pouvons lire cette expression en deux étapes :

$pagesPrincipales[0]
= prendre la première page

['titre']
= prendre son titre

Le résultat est :

Accueil

19. Accéder au fichier de la première page

Pour obtenir :

index.html

nous écrivons :

$pagesPrincipales[0]['fichier']

Nous pouvons lire :

prendre la première page

puis

prendre son fichier

20. Accéder aux informations de la deuxième page

Pour la page À propos :

$pagesPrincipales[1]['titre']
= À propos

$pagesPrincipales[1]['fichier']
= apropos.html

Le premier crochet numérique choisit la page.

Le second crochet textuel choisit l’information.

21. Accéder aux informations de la troisième page

Pour la page Contact :

$pagesPrincipales[2]['titre']
= Contact

$pagesPrincipales[2]['fichier']
= contact.html

Nous utilisons exactement la même structure que pour les deux autres pages.

22. Faire évoluer le premier lien de navigation

Dans la leçon précédente, nous avions :

<li><a href="index.html"><?php echo $pagesPrincipales[0]; ?></a></li>

Nous pouvons maintenant utiliser le même tableau pour l’adresse et le titre :

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

Le navigateur reçoit toujours un lien équivalent à :

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

23. Faire évoluer les deux autres liens

Pour À propos :

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

Pour Contact :

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

Les trois liens utilisent maintenant la même source de données.

24. La navigation reste du HTML accessible

Même si PHP produit désormais :

href
et
texte du lien

le navigateur reçoit toujours des éléments HTML :

a

avec une adresse et un libellé compréhensible.

Nous n’ajoutons aucune balise ARIA inutile.

Le lien conserve son fonctionnement natif.

Le HTML reste responsable de la structure.

PHP fournit seulement les valeurs.

25. Nous ne changeons pas encore les noms de fichiers

Notre tableau contient :

index.html
apropos.html
contact.html

C’est volontaire.

Même si nous travaillons dans :

index.php

nous n’avons toujours pas effectué la migration complète des pages et de la navigation.

Nous conservons donc l’état réel du fil rouge.

Le tableau représente les fichiers tels qu’ils sont encore utilisés dans la navigation actuelle.

26. Modifier temporairement une valeur associative

Pour vérifier que nous pouvons cibler une information précise, testez temporairement :

$pagesPrincipales[1]['titre'] = 'À propos du projet';

Actualisez la page.

Le deuxième lien doit afficher :

À propos du projet

Son fichier reste :

apropos.html

Nous avons modifié uniquement la valeur associée à la clé :

'titre'

27. Remettre l’état réel

Supprimez ensuite la modification temporaire.

Le deuxième élément doit de nouveau être :

[
    'titre' => 'À propos',
    'fichier' => 'apropos.html'
]

Nous conservons ainsi l’état réel du projet.

28. Pourquoi cette structure est plus utile

Notre premier tableau contenait :

un titre
un titre
un titre

Le nouveau tableau contient :

une page
une page
une page

Et chaque page contient :

un titre
un fichier

Nous avons donc mieux représenté la réalité du site.

29. Ne pas ajouter toutes les informations possibles

Nous pourrions déjà imaginer d’autres clés :

description
active
ordre
classe

Nous ne les ajoutons pas.

Pour le moment, notre besoin réel est simplement :

titre
fichier

Nous gardons la structure aussi simple que possible.

30. Pourquoi nous n’utilisons toujours pas de boucle

La navigation contient encore trois lignes :

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

Nous pourrions vouloir éviter cette répétition.

Mais nous ne devons pas utiliser une nouvelle structure avant de l’avoir comprise.

Dans cette leçon, notre objectif était :

comprendre les tableaux associatifs
et
comprendre les deux niveaux d’accès

Le parcours automatique viendra ensuite.

31. État final du tableau

À la fin de cette leçon, nous pouvons conserver :

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

Nous remplaçons donc le tableau simple de la leçon précédente par une structure plus complète.

32. État final de la navigation

La navigation peut maintenant devenir :

<nav>
    <ul class="navigation-principale">
        <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>
    </ul>
</nav>

Le résultat visible reste :

Accueil
À propos
Contact

et les fichiers restent :

index.html
apropos.html
contact.html

33. La répétition devient maintenant évidente

Regardez les trois lignes de navigation.

La structure HTML est presque identique.

Seul l’index change :

0
1
2

Nous avons maintenant exactement le type de situation pour lequel un parcours automatique devient utile.

34. Préparer la prochaine étape

PHP possède une structure conçue pour parcourir les éléments d’un tableau :

foreach

Dans la prochaine leçon, nous terminerons ce chapitre en apprenant d’abord ce que signifie parcourir un tableau.

Nous utiliserons ensuite

foreach

pour traiter successivement :

Accueil
À propos
Contact

et produire les trois éléments de navigation sans écrire trois fois presque la même ligne.

Nous n’utiliserons

foreach

qu’après avoir expliqué :

- le tableau parcouru ;
- la variable représentant l’élément courant ;
- le début et la fin du bloc ;
- l’ordre de parcours ;
- la manière d’accéder à

titre

et

fichier

dans l’élément courant.

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

Vous devez maintenant être capable d’expliquer :

- ce qu’est un tableau associatif ;
- ce qu’est une clé textuelle ;
- le rôle de

=>

;
- la différence entre une clé et une valeur ;
- comment accéder à

$pageAccueil['titre']

;
- comment accéder à

$pageAccueil['fichier']

;
- pourquoi les clés

titre

et

fichier

rendent le code plus explicite ;
- comment

$pagesPrincipales

peut contenir plusieurs tableaux ;
- ce que représente

$pagesPrincipales[0]

;
- ce que représente

$pagesPrincipales[0]['titre']

;
- ce que représente

$pagesPrincipales[0]['fichier']

;
- pourquoi nous pouvons maintenant produire à la fois le

href

et le libellé depuis le tableau ;
- pourquoi nous conservons encore

index.html

,

apropos.html

et

contact.html

;
- pourquoi nous n’utilisons toujours pas de boucle dans cette leçon.

Retenez surtout ceci :

'titre' => 'Accueil'
= associer la clé titre à la valeur Accueil

$pagesPrincipales[0]['titre']
= titre de la première page

$pagesPrincipales[0]['fichier']
= fichier de la première page

Dans la prochaine leçon, nous garderons exactement cette structure et nous apprendrons à parcourir les trois pages avec

foreach

.

Nous faisons évoluer le tableau précédent :

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

Nous pouvons alors obtenir :

$pagesPrincipales[0]['titre']
= Accueil

$pagesPrincipales[0]['fichier']
= index.html

$pagesPrincipales[1]['titre']
= À propos

$pagesPrincipales[1]['fichier']
= apropos.html

Dans la navigation :

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

PHP fournit l’adresse et le libellé.

Le navigateur reçoit toujours un lien HTML normal.

Continuez dans le même fichier :

index.php

1. Créer un premier tableau associatif temporaire

Ajoutez :

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

2. Tester les deux clés

Testez temporairement :

echo $pageAccueil['titre'];
echo $pageAccueil['fichier'];

Effectuez les tests séparément.

Supprimez ensuite ces sorties.

3. Observer le tableau

Testez :

var_dump($pageAccueil);

Repérez les clés

titre

et

fichier

, puis supprimez

var_dump()

.

4. Faire évoluer pagesPrincipales

Remplacez le tableau simple de la leçon précédente par :

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

La variable temporaire

$pageAccueil

n’est plus nécessaire.

Supprimez-la.

5. Tester deux niveaux d’accès

Testez temporairement :

echo $pagesPrincipales[0]['titre'];
echo $pagesPrincipales[0]['fichier'];

Puis retirez ces sorties.

6. Faire évoluer les trois liens

Utilisez pour chaque page :

['fichier']

dans le

href

,

et :

['titre']

comme libellé visible.

7. Modifier temporairement un titre

Testez :

$pagesPrincipales[1]['titre'] = 'À propos du projet';

Vérifiez que seul le titre change.

Supprimez ensuite cette réattribution.

8. Vérifier l’état final

Conservez exactement les trois pages :

Accueil / index.html
À propos / apropos.html
Contact / contact.html

9. Ne pas utiliser foreach

N’ajoutez pas encore de parcours automatique.

La prochaine leçon expliquera

foreach

avant son utilisation.

10. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. ce qu’est une clé textuelle ;
2. le rôle de

=>

;
3. la différence entre

$pagesPrincipales[0]

et

$pagesPrincipales[0]['titre']

;
4. comment obtenir le fichier de la page À propos ;
5. pourquoi le titre et le fichier sont maintenant liés dans la même structure ;
6. pourquoi les liens restent accessibles ;
7. pourquoi la répétition de la navigation prépare naturellement

foreach

.

Dans cette leçon, nous avons fait évoluer le tableau simple de la leçon précédente vers une structure plus précise.

Nous avons découvert le tableau associatif et l’opérateur :

=>

Nous pouvons maintenant associer :

'titre' => 'Accueil'

'fichier' => 'index.html'

Nous avons ensuite regroupé les trois pages dans :

$pagesPrincipales

Chaque élément du tableau représente désormais une page avec deux informations :

titre
fichier

Nous avons appris à lire :

$pagesPrincipales[0]['titre']

$pagesPrincipales[0]['fichier']

Le premier niveau choisit la page.

Le second niveau choisit l’information à l’intérieur de cette page.

Nous utilisons maintenant le même tableau pour produire l’adresse et le libellé de chaque lien de navigation, tout en conservant le HTML natif et l’état réel des fichiers.

Nous n’avons encore utilisé aucune boucle.

Dans la prochaine leçon, nous terminerons le chapitre en apprenant à parcourir

$pagesPrincipales

avec

foreach

afin de générer les trois liens sans répéter presque la même ligne trois fois.