Mes recettes

Travaux Pratiques de PHP

Vous trouverez ci-dessous les instructions pour faire ce TP.

Partie 1 : Prise en main du site

1. Télécharger le code source du site
2. Copier/coller le projet dans votre dossier htdocs ou www
3. Regardez le code source du site en l'ouvrant avec l'éditeur de texte de votre choix (atom, phpstorm, visual sutdio, xcode...)
4. Visualisez le code HTML pour la barre de navigation (élément <nav>) pour chaque page : remarquez que ce bout de code est presque toujours identique.

Vous l'avez peut-être remarqué, les liens dans la navigation ne sont pas toujours les mêmes ! Pourquoi ? Car suivant le répertoire dans lequel se trouve la page, le chemin relatif vers la page cible ne sera pas le même, logique !

5. Nous souhaitons modifier le titre "Soupe de potimaron" en "Soupe de potimarron" partout sur le site. Ce serait dommage de laisser une faute d'orthographe sur notre beau site !
1. Modifiez le titre dans la barre de navigation (sur toutes les pages !)
2. N'oubliez pas de modifier le h2 de la page soupepotimarron.php
6. Modifiez le code de la page tp_instructions.php (celle que vous êtes en train de lire !) au fur et à mesure que vous validez les étapes. Ajoutez l'attribut "checked" dans l'élément input à côté des tâches que vous avez effectuées. Regardez, j'ai déjà validé pour vous l'étape 1 ;).

Partie 2 : Un code modulaire

1. Créez un fichier footer.php à la racine de votre projet.
2. Ouvrez le code source de index.php et copiez le texte HTML de la balise <footer> à la balise </footer>
3. Collez ce texte dans le fichier footer.php
4. Revenez dans le code du fichier index.php et remplacez le code HTML du pied de page par ce code : <?php require "footer.php"; ?>
5. Testez votre code : ouvrez le site sur votre navigateur. S'il n'y a pas d'erreur c'est que votre fonction require a fonctionné !

Vous auriez aussi pu utiliser <?php include "footer.php"; ?> mais je vous invite à privilégier require. La fonction include est plus permissive que require. Si le fichier footer.php n'existe pas, avec include un simple warning sera levé alors qu'en utilisant require une erreur fatale empêchera la page de s'afficher.

6. Faites de même pour toutes les pages du site.

Attention, pour les pages contenues dans le répertoire recettes, pensez à changer le chemin relatif : <?php require "../footer.php"; ?>

Attention, l'image de la flèche vers le haut ne s'affiche certainement plus pour les pages du répertoire recette ! Le lien vers l'image étant relatif, il dépend donc de la page qui va inclure footer.php !

Pour régler ce problème, modifiez le lien relatif vers l'image avec son chemin absolu.

Pour connaître le chemin absolu de votre image, commencez par regarder l'URL de votre page dans la barre d'adresse.
Pour moi, c'est "http://localhost:8888/tp_php/tp_php_2/tp_instructions.php", mais pour vous c'est peut-être un peu différent.

• L'adresse de mon serveur local, avec le port : http://localhost:8888
• Le chemin absolu de la racine de mon projet : /tp_php/tp_php_2/
• Le chemin relatif vers la page demandée : tp_instructions.php

Chez moi, le lien vers l'image du footer <img src="images/up-arrow.png" alt=""> devient <img src="/tp_php/tp_php_2/images/up-arrow.png" alt="">

7. De la même manière, utilisez la fonction php require pour inclure nav.php à la place de la barre de navigation de chaque page.
8. A présent modifiez toutes les pages du site pour inclure nav.php à la place de la balise <nav>.

Attention, votre site n'est sûrement plus opérationnel ! Les liens dans la navigation sont relatifs, ils dépendent donc de la page qui va inclure nav.php !

Pour régler ce problème, modifiez les liens de votre barre de navigation avec les chemins absolus des pages php cibles.

Partie 3 : Utiliser une variable

1. Créez un fichier head.php à la racine de votre projet.
2. Faites un copier/coller des 18 premières lignes de index.php dans le fichier head.php.
3. Dans le fichier index.php supprimez les 18 premières lignes et remplacez-les par l'appel à la fonction php require pour inclure head.php.

Attention, votre site n'est sûrement plus opérationnel !
Il est probable que vous ayez de nouveau à gérer des problématiques liées aux chemins relatifs et absolu. A vous de jouer !

Avez-vous remarqué que les 18 premières lignes de chaque fichier sont (presque) tout le temps identique ? Nous allons voir comment conserver leur titre unique tout en conservant l'appel à la fonction require.

4. Avant l'appel à la fonction require pour inclure head.php nous allons définir une variable nommée $page_title contenant le titre de la page.

   <?php
$page_title = "Accueil - Mes recettes";
require "head.php";
?>

5. Dans le fichier head.php, modifiez la ligne de la balise <title> de cette manière :

   <title><?php echo $page_title ?></title>

6. Faites de même pour toutes les pages du site afin qu'elles retrouvent leur titre d'origine.

Partie 4 : Envoyer des informations via l'URL

1. Cliquez sur "Contact" dans le menu du site Mes recettes.
2. Dans la barre d'adresse vous pouvez voir l'URL de la page. Nous allons la modifier, à la fin, après contact.php, ajouter ?prenom=Flavie en remplaçant Flavie par votre propre prénom.

L'URL de ma page étant http://localhost:8888/tp_php/tp_php_2/contact.php, je la modifie pour obtenir http://localhost:8888/tp_php/tp_php_2/contact.php?prenom=Flavie.

3. Visualisez le changement sur la page contact lorsque vous avez ajouté votre nom dans l'URL comme indiqué à l'étape précédente.

Lorsque votre navigateur souhaite accéder à une page web (ou toute autre ressource), une requête HTTP est effectuée, dans la plupart du temps avec la méthode GET (demander une ressource au serveur).

En ajoutant ?prenom=VotrePrenom à l'URL vous venez d'utiliser un paramètre (ici prenom) avec votre requête HTTP de type GET en modifiant directement l'URL.

Partie 5 : Apprenti cuisto

1. Choisissez votre recette préférée et ajoutez-la à ce site !

Vous devrez bien sûr utiliser require, créer un nouveau fichier, indiquer les ingrédients dans la barre latérale, ajouter une image, modifier la barre de navigation...

2. Faites un screenshot de votre merveilleuse recette et partagez-la avec la classe !