Algorithmique et développement web S2 (M2202) – TD #4

Dans cette séance de TD on va utiliser les sessions, les cookies et les bases de données.

Révisez le CM #3 pour faire ces exercices.

Avant de commencer, créez dans votre répertoire m2202 un sous-répertoire m2202-td4 pour sauvegarder les exercices de cette séance (TD #4).

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

Le projet

Vous allez faire un projet en binôme commun aux modules Algorithmique et développement web (M2202) et Intégration web (M2206). Le sujet du projet est ici. Lisez attentivement toutes les consignes.

Exercices

On commence par un exercice qui utilise les sessions, très utile pour votre projet.

Exercice 1

Cette exercice va vous apprendre comment faire l'identification d'un utilisateur en améliorant l'exercice 2 du TD #2.

Dans le fichier index.php, un formulaire nous permet d'entrer un mot de passe. Ce formulaire est traité par un fichier traitement.php.

Si le mot de passe est correcte, on renvoie l'utilisateur vers la page d'accueil, qui affiche maintenant son nom et un lien pour se déconnecter. Si le mot de passe n'est pas correcte, on affiche un message d'erreur et un lien vers la page d'accueil.

Si on choisit de se déconnecter, on revient dans la page d'accueil, qui nous propose de nous connecter.

Maintenant un exercice plus interactif.

Exercice 2

On va faire un site web dynamique qui compte nos clics et affiche quelques statistiques.

Un fichier appelé index.php affiche le nombre de clics effectués, la vitesse (clics par seconde) et la vitesse maximale. En bas, il y a un lien pour cliquer, et un autre pour réinitialiser le compteur.

Le code HTML généré doit ressembler à ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #4 / Exo 2</h1>
  <p>
    Nombre de clics : <!-- remplir -->
  </p>
  <p>
    Vitesse (clics/sec) : <!-- remplir -->
  </p>
  <p>
    Vitesse max : <!-- remplir -->
  </p>
  <p>
    <a href="traitement.php">Click !</a> &middot; <a href="reset.php">Reset</a>
  </p>
</body>
</html>

Démarrez une session pour stocker le nombre de clics (initialisé à zéro) et la date de début (utilisez la fonction time() [doc]). Chaque fois qu'on visite cette page, on incrémente les compteur de clics et on recalcule les statistiques.

Dans le fichier reset.php, fermez la session et renvoyez l'utilisateur vers la page d'accueil.

Astuce : pour afficher une variable de type float avec moins de chiffres décimales, utilisez la fonction number_format().

Ensuite, un exercice avec des cookies.

Exercice 3

On va faire un site web qui affiche un message quand on a cliqué 100 fois sur un bouton.

Dans un fichier index.php on affiche le nombre de clics, avec une barre de progression, et un bouton. Quand on arrive à 100 clics, le bouton disparaît et on voit un message.

Quand on clique sur le bouton, un fichier traitement.php met à jour un cookie pour ajouter un nouveau clic.

Le code HTML généré doit ressembler à ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>M2202</title>
</head>
<body>
  <h1>TD #4 / Exo 3</h1>
  <p>
    Tu as fait 30 / 100 clics.
  </p>
  <progress value="30" max="100" style="width: 50%;">30</progress>
  <form action="count_click.php">
    <input type="submit" value="Click">
  </form>
</body>
</html>

Remarque : on peut modifier la valeur d'un cookie dans l'onglet storage des outils de développement web de votre navigateur web.