Développement web S2 (M2202) — TP #1

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

Vous allez apprendre à envoyer vos fichiers dans un serveur virtuel. En même temps, vous allez continuer à travailler avec les variables, les structures de contrôle et les formulaires.

Dans le répertoire m2202 que vous avez déjà créé, ajoutez un répertoire nommé m2202-tp1 pour sauvegarder les exercices de cette séance (TP #1).

Dans ce répertoire m2202-tp1, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc.

Vous devez rendre ces exercices. Pour cela, compressez (en format ZIP ou RAR) le répertoire m2202-tp1 et soumettez-le sur AMeTICE dans TP #1 - exercices à rendre. Les exercices marqués avec une étoile (*) sont obligatoires, mais essayez de les faire tous.

Si vous soumettez vos exercices en retard (après la date de remise), la correction sera plus exigeante. Il est impossible de rendre les exercices après la date limite.

Comment utiliser le serveur virtuel

Vous avez à votre disposition une machine virtuelle avec un serveur web Apache et un moteur de base de données MySQL. Les informations de connexion sont les suivantes :

Vous avez un dossier pour vous sur ce serveur qui agit comme racine de votre page web. Pour accéder à votre dossier racine sur le serveur web, utilisez l'adresse suivante sur le navigateur : https://a-pedagoarles-mmi.aix.univ-amu.fr/identifiant

Vous disposez aussi d'une base de données avec le même nom de votre identifiant. ATTENTION : Vous aurez accès uniquement à votre base de données.

Connexion via SFTP (transfert des fichiers)

Pour vous connecter, il faut utiliser un client SFTP (ex : FileZilla) ou la console de commandes.

Si vous décidez d'utiliser la console de commandes, il faut commencer par se placer (rappel : cd) dans le dossier où se trouvent les fichiers que vous voulez envoyer. Ensuite, utilisez les commandes suivantes : 

% sftp -P 2222 b18000294@a-pedagoarles-mmi.aix.univ-amu.fr
> put <nom_du_fichier> .
> exit

La première commande (sftp ...) est pour vous connecter au serveur. Ensuite, on vous demande votre mot de passe, et vous devez attendre un peu. Vous vous trouverez donc dans votre dossier racine sur le serveur.

La deuxième commande (put ...) vous permet de transférer un fichier de votre dossier local au dossier distant.

La commande exit est pour quitter la connexion.

Aide : la commande help vous permet d'accéder à l'aide du sftp.

Connexion au serveur MySQL (base de données)

Pour vous connecter au PhpMyAdmin, utilisez le lien suivant sur un navigateur web : https://a-pedagoarles-mmi.aix.univ-amu.fr/phpmyadmin/

Entrez l'identifiant et le mot de passe fourni par votre intervenant.

Exercices

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

Exercice 1

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

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).

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>M2202</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>M2202</title>
</head>
<body>
  <h1>TP #1 / Exo 4</h1>
  <p>
    1 + 1/2 + ... + 1/50 = 4.499205
  </p>
</body>
</html>

Exercice 5

Dans cet exercice vous allez faire un script qui génère les tables de multiplication de 1 jusqu'à 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 3) : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <style>
  table, td, th {
    border: 1px solid #333;
  }
  </style>
  <title>M2202</title>
</head>
<body>
  <h1>TP #1 / Exo 5</h1>
  <p>
    Tables de multiplication de 1 à 3 :
  </p>
  <table>
    <tbody>
      <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
      <tr>
        <th>1</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <th>2</th>
        <td>2</td>
        <td>4</td>
        <td>6</td>
      </tr>
      <tr>
        <th>3</th>
        <td>3</td>
        <td>6</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Exercice 6*

Dans cet exercice on va améliorer l'exercice précédent en utilisant les variables dans l'URL, sans utiliser un formulaire.

Vous devez modifier le tableau (toujours généré par un script PHP) pour que chaque case contienne un lien vers une autre page (dynamique). Dans cette page dynamique, un texte nous explique le résultat de la multiplication.

Par exemple, vous aurez une case du tableau comme ceci : 

<a href="explication.php?a=2&b=7">14</a>

Du coup, le fichier explication.php aura deux variables : $_GET['a'] (qui vaut 2) et $_GET['b'] (qui vaut 7). Avec ceci, ce fichier doit afficher quelque chose comme ceci : 

...
<p>2 x 7 = 14</p>
...