PhpBB Lab Académie

Continuer dans le même fichier index.php avec les trois pages réelles du fil rouge, comprendre pourquoi plusieurs valeurs liées peuvent être regroupées dans un tableau, créer un premier tableau indexé avec la syntaxe courte entre crochets, comprendre les index numériques à partir de 0, accéder à une valeur précise et utiliser les éléments du tableau dans la navigation sans introduire encore de boucle.

Avant de commencer

Dans la leçon précédente, nous avons terminé le chapitre consacré aux décisions plus complètes.

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 pouvons maintenant avoir une logique déjà assez riche :

$pagesConvertiesPhp = 1;
$pagesRestantes = $nombrePages - $pagesConvertiesPhp;

$progressionCommencee = $pagesConvertiesPhp > 0;
$conversionTerminee = $pagesRestantes === 0;
$conversionEnCours = $progressionCommencee && !$conversionTerminee;

Nous savons donc maintenant :

- stocker une valeur dans une variable ;
- reconnaître plusieurs types ;
- effectuer des opérations ;
- comparer des valeurs ;
- construire des conditions ;
- combiner plusieurs booléens.

Une nouvelle difficulté apparaît maintenant.

Notre site possède trois pages principales :

Accueil
À propos
Contact

Jusqu’à présent, si nous voulions stocker ces trois noms séparément, nous pourrions écrire :

$page1 = 'Accueil';
$page2 = 'À propos';
$page3 = 'Contact';

Cette écriture fonctionne.

Mais les trois valeurs représentent la même chose :

les noms des pages principales du site

PHP permet de les regrouper dans une seule structure :

un tableau

Dans cette première leçon du nouveau chapitre, nous allons répondre à quatre questions :

- Qu’est-ce qu’un tableau PHP ?
- Comment créer un premier tableau simple ?
- Comment PHP repère-t-il chaque valeur dans ce tableau ?
- Comment utiliser une valeur précise du tableau dans notre vraie page ?

À la fin de cette leçon, les trois libellés de navigation seront regroupés dans un tableau PHP et utilisés directement dans le HTML existant.

Nous n’utiliserons encore aucune boucle.

Nous allons d’abord comprendre le tableau lui-même.

1. Pourquoi regrouper plusieurs valeurs ?

Imaginons :

$page1 = 'Accueil';
$page2 = 'À propos';
$page3 = 'Contact';

Nous avons trois variables.

Pour trois valeurs, cela reste possible.

Mais si le site possédait dix ou vingt pages, cette méthode deviendrait rapidement encombrante.

Nous aurions :

$page1
$page2
$page3
$page4
...
$page20

Le problème n’est pas que PHP refuse cette écriture.

Le problème est que les valeurs appartiennent au même ensemble et devraient pouvoir être manipulées comme un groupe.

2. Qu’est-ce qu’un tableau ?

Un tableau PHP permet de regrouper plusieurs valeurs dans une seule variable.

Nous pouvons retenir :

variable simple
= une valeur

tableau
= plusieurs valeurs regroupées

Notre tableau représentera :

les pages principales du site

Nous lui donnerons donc un nom clair :

$pagesPrincipales

3. Créer notre premier tableau

Ajoutez au début de :

index.php

après les informations générales du site :

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

Nous avons créé notre premier tableau.

La variable est :

$pagesPrincipales

et elle contient maintenant trois valeurs.

4. Comprendre les crochets

Dans :

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

nous utilisons :

[

pour ouvrir le tableau,

et :

]

pour le fermer.

Ces deux signes sont des crochets carrés.

Pour cette leçon, retenez :

[
= début des valeurs du tableau

]
= fin des valeurs du tableau

Le point-virgule termine ensuite l’instruction complète.

5. Comprendre les virgules

Les valeurs du tableau sont séparées par des virgules :

'Accueil',
'À propos',
'Contact'

Chaque virgule sépare une valeur de la suivante.

Nous pouvons également écrire le même tableau sur une seule ligne :

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

Les deux écritures représentent le même principe.

Dans le cours, nous garderons souvent plusieurs lignes lorsque cela améliore la lecture.

6. Un tableau est lui-même une valeur

Nous avons déjà étudié plusieurs types :

string
int
float
bool
null

Un tableau est également une valeur que PHP peut stocker dans une variable.

Son type est :

array

Nous avons donc maintenant :

$pagesPrincipales
= une variable

sa valeur
= un tableau

son type
= array

7. Observer temporairement le tableau

Nous connaissons déjà :

var_dump()

comme outil temporaire de diagnostic.

Testez :

var_dump($pagesPrincipales);

PHP vous indique notamment qu’il s’agit d’un tableau et montre les valeurs qu’il contient.

Vous devez pouvoir repérer :

Accueil
À propos
Contact

Supprimez ensuite l’appel à :

var_dump()

Nous ne voulons pas conserver cette sortie dans la page normale.

8. PHP donne un index à chaque valeur

Dans notre tableau :

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

PHP associe automatiquement un index numérique à chaque valeur.

Nous pouvons représenter :

0
= Accueil

1
= À propos

2
= Contact

Le mot :

index

désigne ici le numéro permettant de retrouver une valeur dans le tableau.

9. Le premier index est 0

C’est une règle importante.

La première valeur n’utilise pas :

1

Elle utilise :

0

Nous avons donc :

première valeur
= index 0

deuxième valeur
= index 1

troisième valeur
= index 2

Cette numérotation à partir de zéro est courante en programmation.

10. Accéder à la première valeur

Pour obtenir :

Accueil

nous écrivons :

$pagesPrincipales[0]

Nous utilisons :

- le nom du tableau ;
- un crochet ouvrant ;
- l’index ;
- un crochet fermant.

Nous pouvons lire :

dans $pagesPrincipales,
prendre la valeur située à l’index 0

11. Accéder à la deuxième valeur

Pour obtenir :

À propos

nous écrivons :

$pagesPrincipales[1]

L’index :

1

correspond à la deuxième valeur.

12. Accéder à la troisième valeur

Pour obtenir :

Contact

nous écrivons :

$pagesPrincipales[2]

Nous avons donc :

$pagesPrincipales[0]
= Accueil

$pagesPrincipales[1]
= À propos

$pagesPrincipales[2]
= Contact

13. Tester une valeur avec echo

Nous pouvons faire un test temporaire :

echo $pagesPrincipales[0];

PHP produit :

Accueil

Testez ensuite :

echo $pagesPrincipales[1];

puis :

echo $pagesPrincipales[2];

Retirez ces sorties de test une fois le principe compris.

14. Ne pas demander un index qui n’existe pas

Notre tableau possède trois valeurs aux index :

0
1
2

L’index :

3

n’existe donc pas dans ce tableau.

Nous n’allons pas écrire :

$pagesPrincipales[3]

comme si une quatrième valeur existait.

Selon la configuration PHP, l’accès à un index inexistant peut produire un avertissement.

Nous devons donc connaître la structure du tableau que nous utilisons.

15. Utiliser le tableau dans la vraie navigation

Nous allons maintenant donner un vrai rôle au tableau.

Dans la navigation de notre page, nous avons actuellement des liens comme :

<li><a href="index.html">Accueil</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>

Nous allons conserver exactement les mêmes liens.

Nous allons seulement demander à PHP de produire leurs libellés.

16. Remplacer le premier libellé

Remplacez :

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

par :

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

Le lien pointe toujours vers :

index.html

Seul le texte :

Accueil

provient maintenant du tableau.

17. Remplacer le deuxième libellé

Remplacez :

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

par :

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

Le navigateur doit toujours afficher :

À propos

18. Remplacer le troisième libellé

Remplacez :

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

par :

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

La navigation devient :

<ul class="navigation-principale">
    <li><a href="index.html"><?php echo $pagesPrincipales[0]; ?></a></li>
    <li><a href="apropos.html"><?php echo $pagesPrincipales[1]; ?></a></li>
    <li><a href="contact.html"><?php echo $pagesPrincipales[2]; ?></a></li>
</ul>

19. Pourquoi les href ne changent-ils pas ?

Nous travaillons ici sur :

les tableaux

Nous ne sommes pas encore dans le chapitre consacré à l’organisation des fichiers et à la transformation complète des pages.

Nous conservons donc :

index.html
apropos.html
contact.html

dans les attributs :

href

comme dans le fil rouge actuel.

Nous changeons uniquement la source des libellés visibles.

20. Le HTML conserve son sens

Regardons :

<a href="apropos.html"><?php echo $pagesPrincipales[1]; ?></a>

Le lien reste un élément HTML :

a

L’adresse reste dans :

href

PHP produit uniquement le texte du lien.

Le navigateur reçoit donc un résultat équivalent à :

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

La sémantique et l’accessibilité du lien restent intactes.

21. CSS continue également à fonctionner

Le parent :

<ul class="navigation-principale">

reste inchangé.

La feuille :

styles.css

continue donc à appliquer les règles déjà créées pour la navigation.

Le fait que les libellés soient produits depuis un tableau ne change pas la structure reçue par le navigateur.

22. Modifier temporairement une valeur du tableau

Nous allons maintenant observer qu’un élément du tableau peut recevoir une nouvelle valeur.

Après la création du tableau, testez temporairement :

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

Actualisez :

index.php

Le deuxième lien doit afficher :

À propos du projet

Nous avons modifié une valeur précise en utilisant son index.

23. Remettre la valeur du fil rouge

Après le test, supprimez :

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

Le tableau doit rester :

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

La navigation doit donc revenir à :

Accueil
À propos
Contact

24. Un tableau évite plusieurs variables séparées

Sans tableau, nous aurions pu écrire :

$pageAccueil = 'Accueil';
$pageAPropos = 'À propos';
$pageContact = 'Contact';

Avec le tableau :

$pagesPrincipales

nous savons immédiatement que les trois valeurs appartiennent au même ensemble.

Nous pouvons représenter :

$pagesPrincipales
= groupe des noms de pages

Cette organisation deviendra particulièrement utile lorsque nous apprendrons à traiter plusieurs valeurs successivement.

25. Nous n’utilisons pas encore de boucle

Pour le moment, nous écrivons encore :

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

séparément.

Cela peut sembler répétitif.

C’est volontaire.

Avant d’apprendre à parcourir automatiquement un tableau, nous devons comprendre :

- ce que contient le tableau ;
- comment ses valeurs sont repérées ;
- comment accéder à une valeur précise.

Nous étudierons le parcours automatique plus tard.

26. Nous conservons nombrePages pour le moment

Nous avons déjà :

$nombrePages = 3;

Notre tableau contient également trois noms.

Il serait possible, plus tard, de calculer automatiquement le nombre d’éléments d’un tableau.

Nous n’allons pas utiliser cette nouvelle notion maintenant.

Nous conservons donc :

$nombrePages = 3;

tel qu’il existe dans le fil rouge.

Nous n’utilisons pas un nouvel outil avant de l’avoir expliqué.

27. État final du début de index.php

À la fin de cette leçon, le début de :

index.php

peut maintenant contenir :

<?php
$nomSite = 'Mon premier site HTML';

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

$nombrePages = 3;
$pagesConvertiesPhp = 1;
$pagesRestantes = $nombrePages - $pagesConvertiesPhp;
$messageAccueil = 'Le site possède ' . $nombrePages . ' pages principales et il reste ' . $pagesRestantes . ' pages à faire évoluer vers PHP.';

$progressionCommencee = $pagesConvertiesPhp > 0;
$conversionTerminee = $pagesRestantes === 0;
$conversionEnCours = $progressionCommencee && !$conversionTerminee;

La suite de la logique sur les conditions reste inchangée.

Nous avons simplement ajouté une nouvelle structure de données utile au projet.

28. État final de la navigation

La navigation de :

index.php

peut maintenant être :

<nav>
    <ul class="navigation-principale">
        <li><a href="index.html"><?php echo $pagesPrincipales[0]; ?></a></li>
        <li><a href="apropos.html"><?php echo $pagesPrincipales[1]; ?></a></li>
        <li><a href="contact.html"><?php echo $pagesPrincipales[2]; ?></a></li>
    </ul>
</nav>

Le résultat visible reste le même.

Mais les trois libellés sont maintenant regroupés dans :

$pagesPrincipales

29. Le tableau indexé a une limite pour notre futur besoin

Notre tableau fonctionne bien pour stocker trois noms :

Accueil
À propos
Contact

Mais une page possède plusieurs informations.

Par exemple, la page Accueil possède :

un nom
= Accueil

un fichier
= index.html

La page À propos possède :

un nom
= À propos

un fichier
= apropos.html

Pour le moment, notre tableau ne relie pas encore clairement un nom à son fichier.

30. Préparer la prochaine étape

Dans la prochaine leçon, nous allons découvrir une autre manière d’utiliser les tableaux.

Au lieu de repérer une valeur seulement avec un nombre comme :

0
1
2

nous pourrons utiliser des clés textuelles comme :

titre
fichier

Nous apprendrons ainsi à représenter une page avec plusieurs informations liées.

Cette forme est appelée :

tableau associatif

Nous ne parcourrons toujours pas automatiquement tous les éléments avant d’avoir compris cette nouvelle structure.

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

Vous devez maintenant être capable d’expliquer :

- pourquoi plusieurs valeurs liées peuvent être regroupées ;
- ce qu’est un tableau PHP ;
- ce que représente la variable

$pagesPrincipales

;
- le rôle des crochets dans la création du tableau ;
- le rôle des virgules entre les valeurs ;
- pourquoi le type du tableau est

array

;
- ce qu’est un index ;
- pourquoi le premier index est

0

;
- quelle valeur correspond à

$pagesPrincipales[0]

;
- quelle valeur correspond à

$pagesPrincipales[1]

;
- quelle valeur correspond à

$pagesPrincipales[2]

;
- pourquoi

$pagesPrincipales[3]

n’existe pas dans notre tableau actuel ;
- comment modifier temporairement une valeur à un index précis ;
- pourquoi nous utilisons le tableau pour les libellés sans modifier encore les

href

;
- pourquoi nous n’utilisons pas encore de boucle.

Retenez surtout :

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

$pagesPrincipales[0]
= première valeur

$pagesPrincipales[1]
= deuxième valeur

$pagesPrincipales[2]
= troisième valeur

Dans la prochaine leçon, nous garderons ce fil rouge et nous apprendrons à utiliser des clés textuelles avec les tableaux associatifs.

Nous regroupons les trois noms réels du site :

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

PHP leur associe automatiquement les index :

0
1
2

Nous pouvons donc accéder à :

$pagesPrincipales[0]
= Accueil

$pagesPrincipales[1]
= À propos

$pagesPrincipales[2]
= Contact

Dans la navigation :

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

Le navigateur reçoit toujours des liens HTML normaux avec les mêmes libellés visibles.

Continuez dans le même fichier :

index.php

1. Créer le tableau

Ajoutez :

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

2. Observer temporairement le tableau

Testez :

var_dump($pagesPrincipales);

Repérez les trois valeurs et leurs index.

Supprimez ensuite

var_dump()

.

3. Tester les index séparément

Testez temporairement :

echo $pagesPrincipales[0];
echo $pagesPrincipales[1];
echo $pagesPrincipales[2];

Effectuez les tests un par un afin de lire clairement chaque résultat.

Supprimez ensuite ces sorties de test.

4. Faire évoluer le premier lien

Remplacez son libellé par :

<?php echo $pagesPrincipales[0]; ?>

sans modifier son

href

.

5. Faire évoluer les deux autres liens

Utilisez :

$pagesPrincipales[1]

pour À propos,

et :

$pagesPrincipales[2]

pour Contact.

6. Modifier temporairement une valeur

Testez :

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

Vérifiez que le libellé change dans la navigation.

Supprimez ensuite cette réattribution.

7. Vérifier l’état final

Le tableau doit de nouveau contenir exactement :

Accueil
À propos
Contact

et les trois liens doivent conserver leurs adresses actuelles.

8. Ne pas utiliser de boucle

N’ajoutez aucun parcours automatique du tableau.

Nous l’étudierons seulement après avoir compris les différentes formes de tableaux.

9. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. pourquoi nous avons créé un tableau ;
2. ce que représentent les index

0

,

1

et

2

;
3. pourquoi le premier élément utilise

0

;
4. comment obtenir uniquement le libellé À propos ;
5. comment modifier un élément précis ;
6. pourquoi les

href

restent inchangés ;
7. quelle limite du tableau actuel prépare la prochaine leçon.

Cette leçon ouvre un nouveau chapitre :

Regrouper et parcourir des valeurs avec les tableaux

Nous avons créé notre premier tableau PHP :

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

Un tableau permet de regrouper plusieurs valeurs dans une seule variable.

Nous avons découvert que PHP associe ici automatiquement des index numériques :

0
1
2

Nous avons donc appris à accéder à :

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

Nous avons également utilisé ces valeurs dans la vraie navigation du site sans modifier les liens ni la structure HTML.

Le fil rouge reste intact :

index.php
= page PHP en cours d’apprentissage

apropos.html
contact.html
= pages encore conservées en HTML

Nous n’avons utilisé aucune boucle.

Nous avons d’abord appris à créer le tableau et à accéder à une valeur précise.

Dans la prochaine leçon, nous découvrirons les tableaux associatifs afin d’utiliser des clés textuelles et de relier plusieurs informations comme le titre d’une page et son nom de fichier.