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 · TD #1

Dans le répertoire r213 que vous avez déjà créé, ajoutez un 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) et MAMP (pour MAC).

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.1.2-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 http://localhost:8080/ ou simplement localhost:8080/
    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-td1 › exo3 › index.php
vous tapez l'URL localhost:8080/r213/r213-td1/exo3/index.php

Pour ouvrir phpMyAdmin, allez simplement sur localhost:8080/phpmyadmin ou cliquez sur bouton « Admin » du module MySQL.

Exercices

Si vous avez fait les exercices du TD #1, vous devriez être capable de faire tous ces exercices vous-même.

Exercice 1

Répétez l'exercice 5 du TD #1 avec un formulaire pour que l'utilisateur puisse rentrer sa date de naissance.

Il vous faut cette fois pouvoir entrer trois données, donc il y aura trois éléments <input> dans le même formulaire.

Exercice 2

Dans cet exercice vous allez faire un script qui affiche le jour de la semaine en français.

Vous pouvez récupérer le jour de la semaine avec date('l') (ça donne un string, en anglais) ou avec idate('w') (ça donne un integer). Ensuite, pour chaque cas, vous devez afficher un texte différent avec un structure if.

Comme toujours, votre script doit générer un document HTML valide, avec les balises <html>, <head>, etc. Pour être sûr que c'est bon, utilisez le W3C Markup Validation Service.

Exercice 3

Dans cet exercice vous allez faire un script qui transforme un prix en euros en dollars américains.

Vous devez d'abord faire un formulaire où on puisse rentrer un prix. Dans un fichier séparé, vous prenez cette quantité, calculez le prix équivalent en dollars américains, et vous l'affichez comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 3</h1>
  <p>
    11.50 euros sont 13.13 dollars américains.
  </p>
</body>
</html>

Vous pouvez trouver facilement le taux de change sur Google.

Exercice 4*

Dans cet exercice vous allez calculer la somme de 1 + 1/2 + … + 1/n, où n est un nombre entier positif entré par l'utilisateur.

Votre script PHP doit générer quelque chose comme ceci (si n vaut 50) :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <h1>TP #1 / Exo 4</h1>
  <p>
    1 + 1/2 + ... + 1/50 = 4.499205
  </p>
</body>
</html>

Faites un formulaire pour rentrer le nombre n.

S'il vous reste du temps, faites les exercices du TD #1 pour vérifier qu'ils marchent correctement.