Développement web S2 (R213) – TP #1

Dans cette séance de TP vous allez programmer des scripts en PHP qui doivent marcher pour de vrai.

Vous allez apprendre à utiliser un serveur web local. En même temps, vous allez continuer à travailler avec les variables, les structures de contrôle et les formulaires.

Liens utiles : CM #1

Avant de commencer, créez dans votre espace personnel un répertoire nommé r213 pour y sauvegarder tout votre travail dans ce module. Dedans, créez un autre répertoire nommé r213-tp1 pour sauvegarder les exercices de cette séance (TP #1). Dans ce répertoire r213-tp1, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r213-tp1 avec tous vos exercices et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché après l'évaluation des exercices.

Comment utiliser le serveur web local

Pour exécuter vos scripts en PHP sur votre ordinateur, vous avez besoin d'un serveur web virtuel : c'est un logiciel qui permet d'avoir un serveur web dans votre propre ordinateur, sans besoin de mettre votre site web en ligne.

Dans ce module on va utiliser XAMPP, qui est déjà installé sur les postes fixes de l'université. Autres logiciels connus sont WampServer (pour Windows uniquement) et MAMP (pour macOS uniquement).

Pour installer XAMPP sur votre ordinateur personnel, vous devez :

  1. Télécharger le fichier d'installation depuis le site web de XAMPP.
    Si vous avez un Mac, allez directement ici et téléchargez le fichier xampp-osx-8.2.4-0-installer.dmg.
  2. Installer le logiciel en laissant tous les paramètres par défaut.

Pour utiliser XAMPP il y a trois étapes :

  1. Démarrer le serveur. Démarrez le logiciel, puis cliquez sur les deux boutons « Start » dans le panneau de contrôle. Ils démarrent Apache (le serveur HTTP) et MySQL (la base de données).
  2. Déposer vos fichiers. Déposez le répertoire racine de votre site web dans
    PC › Win10 (C:) › xampp › htdocs
    Pour y arriver facilement, cliquez dans le bouton « Explore » du panneau de contrôle, puis allez dans le dossier « htdocs ».
  3. Visiter votre site web. Sur la barre d'adresses de votre navigateur web, tapez le nom de votre site web précédé de localhost/
    Pour y arriver plus facilement (l'URL exacte peut changer d'un ordinateur à l'autre), cliquez sur le bouton « Admin » du panneau de contrôle du module Apache.

Par exemple, pour ouvrir le fichier qui se trouve dans
PC › Win10 (C:) › xampp › htdocs › r213 › r213-tp1 › exo3 › index.php
vous tapez l'URL localhost/r213/r213-tp1/exo3/index.php

Pour l'instant nous n'avons pas besoin de la base de données, mais si vous voulez ouvrir phpMyAdmin, allez simplement sur localhost/phpmyadmin ou cliquez sur bouton « Admin » du module MySQL.

Exercices

Exercice 1

Dans cet exercice vous allez faire une page qui affiche un texte avec deux variables.

Déclarez et initialisez deux variables, une pour le jour du mois (de type integer) et l'autre pour le mois (string). Donnez-leur les valeurs que vous voulez.

Affichez les deux variables dans une phrase. Par exemple, « Nous sommes le 31 mai ». Utilisez le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 1</h1>
  <p>
    <!-- ajoutez votre code PHP ici -->
  </p>
</body>
</html>

Il vous faut faire une concatenation de chaînes de caractères.

Exercice 2

Dans cet exercice vous allez faire un formulaire pour que l'utilisateur puisse rentrer son année de naissance. Le site web dit ensuite si l'utilisateur est né dans le 21e siècle ou pas.

Vous avez besoin de deux fichiers : index.html contient le formulaire et reponse.php affiche la réponse. Utilisez le code suivant :

## index.html ##
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 2</h1>
  <form method="post" action="reponse.php">
    Dans quelle année es-tu né ?
    <input type="number" name="annee">
    <input type="submit" value="Envoyer">
  </form>
</body>
</html>

## reponse.php ##
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 2</h1>
  <p>
<?php 
// ajoutez votre code PHP ici
?>
  </p>
</body>
</html>

Il vous faut manipuler les données d'un formulaire et utiliser une structure if-else.

Exercice 3

Dans cet exercice vous allez faire un script PHP qui genère un formulaire.

Tout est prêt, il ne reste qu'à ajouter un bouton radio pour chaque mois afin de choisir le mois de naissance. Utilisez le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 3</h1>
  <form method="post" action="reponse.php">
    <p>
      Donne ta date de naissance :
    </p>
    <p>
      Jour : <input type="number" name="jour">
    </p>
    <p>
      Mois : 
<?php
// afficher <input type="radio" name="mois" value="1">Janvier <input type="radio" name="mois" value="2">Février ...
$mois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
// ...
?>
    </p>
    <p>
      Année : <input type="number" name="annee">
    </p>
    <p>
      <input type="submit" value="Envoyer">
    </p>    
  </form>
</body>
</html>

Faites attention, la valeur de janvier est 1, la valeur de février est 2, etc. Une boucle for vous serait utile pour cet exercice.

Exercice 4

Dans cet exercice nous calculons l'age de l'utilisateur.

Vous avez déjà fait le formulaire dans l'exercice 2, vous n'avez qu'à afficher l'age. Pour cela, il faut la date d'aujourd'hui et un algorithme pour calculer l'age.

Pour trouver la date d'aujourd'hui, nous avons trois fonctions en PHP :

  • idate('d') donne le jour du mois (1-31)
  • idate('m') donne le numéro du mois (1-12)
  • idate('Y') donne l'année avec 4 chiffres

Pour calculer l'age, utilisez l'algorithme suivant :

jour_a, mois_a, annee_a ← date aujourd'hui
jour_n, mois_n, annee_n ← date de naissance
if (mois_a < mois_n)
  age ← anne_a - anne_n - 1
else if (mois_a == mois_n et jour_a < jour_n)
  age ← anne_a - anne_n - 1
else
  age ← anne_a - anne_n