Devoir pratique STI n°6 : l'inscription au club d'informatique, vérifier le formulaire en JavaScript et en PHP, inscrire dans MySQL

Exercice 1 : vérifier le formulaire en JavaScript (8 pts)

Le club d'informatique du lycée inscrit ses membres en ligne avec la page formulaire.html, donnée à l'exercice 2. Avant d'envoyer le formulaire, sa fonction verifier() (onsubmit) vérifie l'adresse e-mail et le numéro de téléphone avec deux fonctions JavaScript, à écrire dans le fichier controle.js sans expression régulière.

• 1) Écrire la fonction emailValide(email) qui renvoie true si l'adresse contient un @ qui n'est pas le premier caractère, et un point placé après ce @ ; sinon false (4 pts).
• 2) Écrire la fonction telValide(t) qui renvoie true si t est formé d'exactement 8 chiffres et commence par 2, 5, 7 ou 9 ; sinon false (4 pts).

Exemples : emailValide("[email protected]") donne true, emailValide("@lycee.tn") donne false, telValide("22123456") donne true et telValide("31234567") donne false.

Exercice 2 : les pages PHP de l'inscription (12 pts)

Le club garde ses inscrits dans la base MySQL club, créée par le fichier base.sql. La page formulaire.html, reliée à controle.js (exercice 1), envoie les champs email et tel à la page inscription.php avec la méthode POST. La connexion à la base est dans connexion.php, que chaque page inclut avec require.

CREATE DATABASE club;
USE club;
CREATE TABLE inscrit (
  id INT AUTO_INCREMENT PRIMARY KEY,
  email VARCHAR(60) NOT NULL UNIQUE,
  tel CHAR(8) NOT NULL
);
INSERT INTO inscrit (email, tel) VALUES ('[email protected]', '22123456'), ('[email protected]', '98765432');

<?php
$cnx = mysqli_connect("localhost", "root", "", "club");
?>

<form action="inscription.php" method="post" onsubmit="return verifier()">
  <label for="email">E-mail</label>
  <input type="text" id="email" name="email">
  <label for="tel">Téléphone</label>
  <input type="text" id="tel" name="tel">
  <input type="submit" value="S'inscrire">
</form>
<script>
  function verifier() {
    if (!emailValide(document.getElementById("email").value)) {
      alert("Adresse e-mail invalide");
      return false;
    }
    if (!telValide(document.getElementById("tel").value)) {
      alert("Numéro de téléphone invalide");
      return false;
    }
    return true;
  }
</script>
<script src="controle.js"></script>

• 1) Écrire la page inscription.php. Elle vérifie les valeurs reçues dans cet ordre : si l'adresse n'a pas de @, si le @ est le premier caractère ou s'il n'y a pas de point après le @, elle affiche « Adresse e-mail invalide » ; sinon, si le téléphone n'a pas exactement 8 chiffres ou ne commence pas par 2, 5, 7 ou 9, elle affiche « Numéro de téléphone invalide » ; sinon, si l'adresse est déjà dans la table inscrit, elle affiche « Cette adresse est déjà inscrite » ; sinon, elle ajoute l'inscrit à la table et affiche « Inscription réussie » (7 pts).
• 2) Écrire la page liste.php, pour le responsable du club : elle affiche le titre « Inscrits », un tableau HTML avec l'adresse et le téléphone de chaque inscrit triés par adresse, puis le nombre d'inscrits sous la forme « 2 inscrit(s) » (5 pts).

Exemple : avec la base donnée, le responsable qui ouvre liste.php voit le titre Inscrits, les lignes [email protected] 22123456 et [email protected] 98765432, puis 2 inscrit(s).