Check

Affichage Declaration Tableaux

On this page
Objectif
Créer un menu bilingue : francais, anglais.

Prérequis

Avant de commencer

  • Créez un répertoire TP01
Attention
Vérifiez bien que vous êtes en UTF8.

Copiez le code suivant dans un fichier que vous allez appeler TPMenu.php :

<?php
?>
<!doctype html>

<html lang="fr">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>TP01</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <ul class="navbar-nav">
            <li  class="nav-item">
				<a class="nav-link" href="#presentation">Accueil</a>
		    </li>
      </ul>
   </nav>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"> </script>
    </body>

</html>
Il s’agit d’une page HTML, même si l’extension du nom est en php, qui utilise le framework css Bootstrap. Vous n’avez pas à vous occuper du design, bootstrap le fait pour vous !

Résultat

Lancez TPMenu.php pour voir si tout fonctionne. Vous devez obtenir ceci :

menuAccueil

Exercice 1 - Affichage en php

a - Insertion de balises PHP

dossier technique les variables

Nous voulons que les titres des menus puissent être définis par le programmeur. Pour ce faire, nous allons adapter une version anglaise. Avant le doctype, insérez le code suivant :

<?php
//Déclaration de variables
$menu01="ACCUEIL";
$menu02="HOME";
?>

En vous aidant de la documentation php, répondez aux questions suivantes :

  1. À quoi correspondent menu01 et menu02 ?
  2. Pourquoi y a-t-il un $ devant leur nom ?
  3. À quoi sert le ; à la fin de chaque ligne ?
  4. Pourquoi ACCUEIL et HOME sont entre " ?
  5. Pourquoi le code //Déclaration de variables, n’apparaît pas à l’écran ?
  6. Pourquoi lorsque l’on exécute le fichier, seul le code HTML de la page apparaît ?
  7. À quoi correspond l’extension php ?

b - Paramétrons le lien accueil :

Remplacez le lien existant par celui ci-dessous et exécutez la page.

<a class="nav-link" href="#presentation"><?php echo $menu01;?></a>

Résultat de menu01

Lancez TPMenu.php pour voir si tout fonctionne. Vous devez obtenir ceci :

menuAccueil

Remplacez $menu01 par $menu02.

Résultat de menu02

Lancez TPMenu.php pour voir si tout fonctionne. Vous devez obtenir ceci :

menuHome

En vous aidant de la documentation php, répondez aux questions suivantes :

  1. À quoi servent les balises <?php et ?> ?
  2. À quoi sert l’instruction echo ?
  3. Pourquoi à l’affichage, nous avons ACCUEIL et non pas $menu01 ?
  4. Pourquoi à l’affichage, nous avons ACCUEIL et non pas “ACCUEIL” ?
  5. Que se passe-t-il lorsqu’on change $menu01 en $menu02 ?

Exercice 2 - Modification de la langue

Prérequis :

Copiez le code de TPMenu.php dans un nouveau fichier TPMenuLangue.php. Changez le contenu de la balise titre comme l’exemple suivant

<title><?= basename(__File__)?></title>

Résultat de menu02

Lancez TPMenuLangue.php pour voir si tout fonctionne. Vous devez obtenir ceci :

menuTitle

En vous aidant de la documentation php, répondez aux questions suivantes :

  1. À quoi correspond la balise <?= ? (utilisez l’aide php )
  2. Que fait la fonction basename()
  3. À quoi correspond la variable __File__ ?

b - Objectif :

Dossier technique les tableaux

Changer la langue du menu avec une zone de liste. Voici le tableau des correspondances :

Français Anglais
accueil home
nos produits products
nous contacter contacts us
plan d’accès find Us
qui sommes-nous ? about us
langue language
Création au niveau de la déclaration de variables de 2 tableaux $menu01 et $menu02 à partir du tableau précédent :

<?php
//Déclaration de variables
$menu01 = ["accueil","nos produits","nous contacter","plan d’accès","qui sommes nous ?","langage"];
$menu02 = ["home","products",...à compléter....];
$lang=array();
?>

En vous aidant de la documentation php, répondez aux questions suivantes :

  1. Que signifie le caractère [ ?
  2. Comment peut-on déclarer un tableau vide ?
  3. Pourquoi accueil et home sont entre " ? (retirez les doubles cotes pour voir ce qui se passe)

c - Affichage des valeurs

Dossier technique les boucles

Nous allons saisir dynamiquement les valeurs en français.

  1. À partir de la ligne 21 (si vous avez correctement suivi le TP), supprimer les balises et les balises qui sont à l’intérieur de la balise .
  2. À cette place copiez le code suivant : 

    <?php
for ($i= 0; $i < count($lang); $i++) { ?>
    <li><a class="nav-link" href="#" ><?php echo ucfirst($lang[$i]);?></a></li>
<?php } //fin de la boucle ?>
  3. Au début de la page, remplacez php$lang=array(); par php$lang=$menu01;

    Résultat de menu en français

    Lancez TPMenuLangue.php pour voir si tout fonctionne. Vous devez obtenir ceci :

menuFrancais

En vous aidant de la documentation php, répondez aux questions suivantes :

  1. À quoi sert $i ?
  2. À quoi correspond count($lang) ?
  3. À quoi correspond $lang[$i] ?
  4. Combien de balises <li> seront affichées ?
  5. Affichez le code source de votre navigateur. Le nombre de balises <li> est-il le même que celui du P01Menu.php ?
  6. Quelle est la différence entre le contenu de ces deux balises ?
  7. Ajoutez le code nécessaire pour supprimer cette différence.
  8. Changez $lang=$menu01; en $lang=$menu02;, que se passe-t-il ?
  9. À quoi sert cette instruction ?
  10. Que fait la fonction ucfirst()?