Algorithmique et développement web S2 (M2202) – TP #2

Cette séance est la suite du TP #1. Vous allez apprendre à envoyer vos fichiers dans un serveur virtuel, et vous continuerez à faire des exercices sur les contenus vus en cours.

Liens utiles : CM #1 · TD #1 · TP #1

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

Dans ce répertoire m2202-tp2, 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.

Vous devez rendre ces exercices. Pour cela, compressez (en format ZIP ou RAR) le répertoire m2202-tp2 et soumettez-le sur AMeTICE dans TP #2 - 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 web

En plus du serveur web local, vous avez à votre disposition un serveur web de l'IUT pour mettre vos sites webs en ligne. Les informations de connexion au serveur 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 (votre identifiant). Attention, vous avez accès uniquement à votre base de données et pas celles des autres étudiants.

Connexion au serveur (transfert des fichiers)

Pour vous connecter, il faut utiliser un client SFTP (par exemple, 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 b19000294@a-pedagoarles-mmi.aix.univ-amu.fr
> put <nom_du_fichier> .
> exit

La première commande (sftp …) sert à 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 sert à quitter la connexion.

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

Connexion à la base de données

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

Entrez le même identifiant et mot de passe que pour la connexion par SFTP.

Exercices

Exercice 1

Dans cet exercice vous allez faire un script qui génère la table de multiplication de 7.

Votre script PHP doit générer ce code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  </style>
  <title>M2202</title>
</head>
<body>
  <h1>TP #2 / Exo 1</h1>
  <p>
    Tables de multiplication de 7 :
  </p>
  <ul>
    <li>7 x 1 = 7</li>
    <li>7 x 2 = 14</li>
    <!-- &vellip -->
    <li>7 x 10 = 70</li>
  </ul>
</body>
</html>

Exercice 2

Dans cet exercice vous allez faire un script qui génère la tables de multiplication de 1 jusqu'à 5.

Vous allez juste mettre les résultat des multiplications dans un tableau (élement HTML <table>). Pour cela, vous aurez besoin d'utiliser une boucle for dans une autre boucle for. Commencez par faire une seule colonne au début, ce qui est très proche de l'exercice 1.

Votre script PHP doit générer ce code HTML :

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

Exercice 3

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.

Pour cela, il vous faudra modifier votre script de l'exercice 2 en ajoutant un formulaire pour récuperer le nombre saisi par l'utilisateur.

Exercice 4*

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 :

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

Ainsi, 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>
...