Cours IUT : PHP et Formulaires

A l'origine d'internet il existait une personne qui possédait tous les pouvoirs. Cet individu avait le droit de vie ou de mort sur un site internet. Cette personne c'était le maître du web aka webmaster.

Il connaissait tous les raccourcis Frontpage, pouvait animer une page à l'aide d'images 16 couleurs en .gif, faire défiler ou clignoter du texte, et transférer ses fichier sur le web à l'aide de logiciels FTP.

Certains de ces individus se sont transformés en développeurs web. D'autres en découpeurs HTML, encore appelés intégrateurs. Ces magiciens du CSS étaient capables de cacher des liens dans des images à l'aide de leur logiciel de prédilection Dreamweaver. Ils ont aussi découvert le copier / coller et l'utilisaient à travers le web pour récupérer du code source JavaScript.

Mais ce temps est révolu...

Manifeste d'un développeur front-end éclairé

J’ai été contraint et forcé de parler de PHP. Un langage que je n’ai pas utilisé depuis 10 ans. Un langage de bidouilles par excellence. Un langage dont la qualité des ressources en ligne est très variable (mais il y a des pépites). Dur.

Mais c’est aussi l’occasion d’essayer de transmettre quelque chose que je ne maîtrise pas du tout, entamer la discussion sur l’importance d’apprendre à apprendre tout au long de sa carrière. Sur ce que l’on peut apprendre en aidant sur un forum, sur irc, en participant à une conférence ou en formant. Et de faire une introduction à la mise en forme des formulaires et aux attributs HTML 5 dédiés. Et de troller un peu aussi hein.

Je compte partir sur un formulaire d’envoi d’email très basique mais qui permet d’explorer les différents concepts (architecture client/serveur, double validation, séparation du code et de l’affichage, etc) :

<?php
if(isset($_POST['submit'])
    && isset($_POST['email'])
    && isset($_POST['name'])
    && isset($_POST['message'])
    /* L'existence est vérifiée pour tout malgré le required en HTML. */) {
  $to = "you@example.com";
  $from = filter_input(INPUT_POST, 'email');
  $name = filter_input(INPUT_POST, 'name');
  $message = filter_input(INPUT_POST, 'message');
  $subject = "Un email vous a été envoyé via le site !";
  $headers = "From: {$from}";
  if (strpos($from, '@') !== false) {
    $is_email_sent = mail($to, $subject, $message, $headers);
    if (!$is_email_sent) {
      # Il faudrait ici gérer les erreurs en cas de non-envoi de l'email.
    } else {
      $success = "Message envoyé. Merci {$name} ({$from}), "
                ."nous répondrons rapidement à « {$message} ».";
    }
  } else {
    # Il faudrait ici gérer les erreurs en cas de soumission d'un email
    # erroné malgré le type="email" du formulaire.
    # L'erreur devrait être affichée proche du champ concerné.
  }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Envoi d'un message</title>
  <style>
    #main {
      margin: 1em auto;
      width: 32em;
    }
    .form-row {
      display: flex;
      flex-direction: row;
    }
    .form-row label {
      flex: 1;
    }
    .form-row input, .form-row textarea {
      flex: 4;
    }
    button {
      width: 99%;
      margin: 2px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="main">
  <?php if($success): /* Affichage du message de remerciement. */ ?>
      <p><?php echo $success; ?></p>
  <?php else:  /* Sinon affichage du formulaire de soumission. */ ?>
    <form method="post">
      <fieldset>
        <legend>Formulaire de contact</legend>
        <div class="form-row">
          <label for="name">Nom :</label>
          <input type="text" id="name" name="name" required autofocus>
        </div>
        <div class="form-row">
          <label for="email">Email :</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-row">
          <label for="message">Message :</label>
          <textarea rows="6" id="message" name="message" required></textarea>
        </div>
      </fieldset>
      <button type="submit" name="submit">Envoyer</button>
    </form>
  <?php endif /* Fin du if(!$success) correspondant au formulaire. */ ?>
</div>
</body>
</html>

Ce simple exemple nous prendra je l’espère moins de 4 heures à expliquer, c’est pas gagné car à 24 l’inertie de compréhension est terrible. Il faut que j’arrive à mieux faire en sorte que ceux qui percutent rapidement aident les autres.

Pour l’instant, les retours sur les cours sont vraiment positifs et les étudiants en redemandent ce qui est très motivant. Je vais peut-être avoir une autre classe plus technique pour parler du web mobile (whatever it means) lors du premier trimestre 2015.

Discussion suite à l’article :

PHP est en effet une bonne opportunité de parler de l’histoire du Web. Je l’ai vu arriver chez nous en 1995 chez Calvacom. Cela s’appelait encore « Personal Home Page/Forms Interpreter » (PHP/FI). Et c’était justement pour fournir de la flexibilité aux webmasters (dévelopeurs Web de l’époque) car les serveurs étaient contrôlés par les sysadmins et donc très difficile de pouvoir travailler sur la couche serveur côté CGI avec des scripts perl pour réaliser le traitement des formulaires.

C’est ironique mais je pense que HTTP est si mal compris et si pauvre en partie à cause de ce contrôle des serveurs. Et donc plutôt d’améliorer côté serveur les gens ont développé la pile client : JavaScript, etc.

Karl Dubost, le 2014-12-08 à 17:55