Project 10: a PHP form, and the real loop with AI

<?php
// ============================================================================
// FORMULAIRE DE CONTACT VALIDÉ EN PHP — un seul fichier, qui tourne sur un SERVEUR.
// Contrairement aux projets précédents (tout dans le navigateur), ici c'est PHP
// qui reçoit les données, les VALIDE et décide quoi en faire. C'est le serveur
// qui a le dernier mot : on ne fait jamais confiance à ce qui vient du navigateur.
//
// Démo volontairement "sans suite" : on ne fait ni envoi d'email ni stockage
// (pour ne pas créer de spam ni de surface d'abus). On valide, puis on confirme.
// ============================================================================

session_start();

// --- Jeton CSRF -------------------------------------------------------------
// Un token secret, généré une fois et gardé en session. On le remet dans le
// formulaire (champ caché) ; à la soumission, on vérifie qu'il correspond.
// But : prouver que la requête vient bien de NOTRE page, pas d'un site tiers
// qui aurait piégé l'utilisateur (attaque CSRF).
if (empty($_SESSION['demo_csrf'])) {
    $_SESSION['demo_csrf'] = bin2hex(random_bytes(16));
}
$csrf = $_SESSION['demo_csrf'];

// --- Langue (fr par défaut) -------------------------------------------------
$lang = ((($_REQUEST['lang'] ?? 'fr')) === 'en') ? 'en' : 'fr';
$S = [
  'fr' => [
    'title' => "Formulaire de contact (PHP)", 'sub' => "Tout est validé côté serveur. Essaie de le tromper.",
    'nom' => "Nom", 'email' => "Email", 'message' => "Message", 'send' => "Envoyer",
    'ph_nom' => "Ton nom", 'ph_email' => "ton@email.fr", 'ph_msg' => "Ton message (au moins 10 caractères)…",
    'err_csrf' => "Jeton de sécurité invalide. Recharge la page et réessaie.",
    'err_nom' => "Indique un nom (2 caractères minimum).",
    'err_email' => "Cet email n'est pas valide.",
    'err_message' => "Le message doit faire au moins 10 caractères.",
    'ok_title' => "Message validé ✓", 'ok_text' => "En conditions réelles, il serait maintenant envoyé par email ou enregistré. Pour cette démo, on s'arrête là.",
    'recap' => "Récapitulatif (échappé, donc sûr à afficher) :",
    'again' => "Envoyer un autre message",
    'note' => "Le navigateur impose « required », mais c'est PHP qui revalide tout : un robot ou un outil comme curl ignore le HTML.",
    'credit' => 'Tourne sur un serveur PHP · Mini-projet du cours <a href="/apprendre/projets/">Projets appliqués</a>'
  ],
  'en' => [
    'title' => "Contact form (PHP)", 'sub' => "Everything is validated on the server. Try to fool it.",
    'nom' => "Name", 'email' => "Email", 'message' => "Message", 'send' => "Send",
    'ph_nom' => "Your name", 'ph_email' => "you@email.com", 'ph_msg' => "Your message (at least 10 characters)…",
    'err_csrf' => "Invalid security token. Reload the page and try again.",
    'err_nom' => "Please enter a name (2 characters minimum).",
    'err_email' => "This email is not valid.",
    'err_message' => "The message must be at least 10 characters.",
    'ok_title' => "Message validated ✓", 'ok_text' => "In real conditions, it would now be emailed or stored. For this demo, we stop here.",
    'recap' => "Summary (escaped, so safe to display):",
    'again' => "Send another message",
    'note' => "The browser enforces \"required\", but PHP re-validates everything: a bot or a tool like curl ignores the HTML.",
    'credit' => 'Runs on a PHP server · A mini-project from the <a href="/apprendre/projets/">Applied projects</a> course'
  ],
][$lang];

// Échappe une valeur AVANT de l'afficher : la parade universelle contre le XSS.
// Si quelqu'un tape <script>…</script> dans un champ, ce sera affiché comme du
// texte, jamais exécuté.
function e($s) { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }

$errors = [];
$success = false;
$v = ['nom' => '', 'email' => '', 'message' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 1) Honeypot : un champ caché que seuls les robots remplissent. S'il est
    //    rempli, on fait comme si tout allait bien, sans rien traiter.
    if (!empty($_POST['website'])) {
        $success = true;
    }
    // 2) Jeton CSRF : doit correspondre à celui de la session (hash_equals évite
    //    les comparaisons de chaînes vulnérables au "timing").
    elseif (!isset($_POST['csrf']) || !hash_equals($csrf, $_POST['csrf'])) {
        $errors['csrf'] = $S['err_csrf'];
    }
    // 3) Validation CÔTÉ SERVEUR (le "required" HTML ne suffit pas : on revérifie tout).
    else {
        $v['nom']     = trim($_POST['nom'] ?? '');
        $v['email']   = trim($_POST['email'] ?? '');
        $v['message'] = trim($_POST['message'] ?? '');

        if (mb_strlen($v['nom']) < 2)                          $errors['nom'] = $S['err_nom'];
        if (!filter_var($v['email'], FILTER_VALIDATE_EMAIL))   $errors['email'] = $S['err_email'];
        if (mb_strlen($v['message']) < 10)                     $errors['message'] = $S['err_message'];

        // En vrai, ICI on enverrait l'email / on enregistrerait en base.
        // (Et les identifiants SMTP/BDD seraient dans un fichier de config HORS
        //  du dossier public, jamais écrits en dur dans cette page.)
        if (!$errors) { $success = true; }
    }
}
?>
<!DOCTYPE html>
<html lang="<?= e($lang) ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($S['title']) ?></title>
<meta name="robots" content="noindex, follow">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<style>
  :root { --ink:#1a1d24; --muted:#5a6270; --accent:#267d42; --border:#e2e6ea; --warn:#a8341f; }
  * { box-sizing:border-box; }
  html,body { margin:0; padding:0; }
  body { font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; background:#f4f6f8; color:var(--ink); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:32px 18px 48px; line-height:1.5; }
  .app { width:100%; max-width:520px; }
  header { text-align:center; margin-bottom:18px; }
  h1 { font-size:1.5rem; margin:0 0 6px; letter-spacing:-0.01em; }
  .sub { color:var(--muted); font-size:0.95rem; margin:0 0 16px; }
  .lang-switch { display:inline-flex; border:1.5px solid var(--border); border-radius:999px; overflow:hidden; background:#fff; }
  .lang-btn { border:0; background:transparent; padding:7px 18px; font:inherit; font-weight:700; font-size:0.8rem; color:var(--muted); cursor:pointer; text-decoration:none; }
  .lang-btn.active { background:var(--accent); color:#fff; }
  .lang-btn:focus-visible { outline:3px solid rgba(38,125,66,0.4); outline-offset:2px; }

  form { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; }
  label { display:block; font-weight:700; font-size:0.9rem; margin:14px 0 6px; }
  label:first-child { margin-top:0; }
  input[type=text], input[type=email], textarea { width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-size:1rem; color:var(--ink); }
  textarea { min-height:96px; resize:vertical; }
  input:focus-visible, textarea:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(38,125,66,0.12); }
  input.bad, textarea.bad { border-color:var(--warn); }
  .field-err { color:var(--warn); font-size:0.85rem; margin:6px 0 0; }
  .btn { margin-top:18px; width:100%; min-height:50px; border-radius:12px; border:0; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:1rem; cursor:pointer; }
  .btn:hover { background:#1f6a37; }
  .btn:focus-visible { outline:3px solid rgba(38,125,66,0.4); outline-offset:2px; }
  .note { color:var(--muted); font-size:0.82rem; margin-top:14px; }

  .alert { border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:0.92rem; }
  .alert-err { background:#fdecea; color:var(--warn); border:1px solid #f3c4be; }
  .ok { background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; }
  .ok h2 { margin:0 0 8px; color:var(--accent); }
  .ok dl { background:#f4f6f8; border-radius:10px; padding:12px 14px; margin:14px 0; }
  .ok dt { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  .ok dd { margin:2px 0 10px; word-break:break-word; }
  .ok dd:last-child { margin-bottom:0; }
  .credit { text-align:center; color:var(--muted); font-size:0.78rem; margin-top:22px; }
  .credit a { color:var(--accent); }
</style>
</head>
<body>
<main class="app">
  <header>
    <h1><?= e($S['title']) ?></h1>
    <p class="sub"><?= e($S['sub']) ?></p>
    <!-- Le changement de langue est un simple lien (?lang=…), géré par le serveur. -->
    <div class="lang-switch" role="group" aria-label="Langue / Language">
      <a class="lang-btn <?= $lang==='fr'?'active':'' ?>" href="?lang=fr">FR</a>
      <a class="lang-btn <?= $lang==='en'?'active':'' ?>" href="?lang=en">EN</a>
    </div>
  </header>

<?php if ($success): ?>
  <!-- SUCCÈS : on réaffiche les valeurs, mais ÉCHAPPÉES avec e() → aucun script ne s'exécute. -->
  <div class="ok">
    <h2><?= e($S['ok_title']) ?></h2>
    <p><?= e($S['ok_text']) ?></p>
    <?php if ($v['nom'] !== '' || $v['email'] !== ''): ?>
    <p style="margin:0;color:var(--muted);font-size:0.85rem;"><?= e($S['recap']) ?></p>
    <dl>
      <dt><?= e($S['nom']) ?></dt><dd><?= e($v['nom']) ?></dd>
      <dt><?= e($S['email']) ?></dt><dd><?= e($v['email']) ?></dd>
      <dt><?= e($S['message']) ?></dt><dd><?= e($v['message']) ?></dd>
    </dl>
    <?php endif; ?>
    <a class="lang-btn active" style="display:inline-block;padding:10px 18px;border-radius:10px;" href="?lang=<?= e($lang) ?>"><?= e($S['again']) ?></a>
  </div>
<?php else: ?>
  <form method="post" action="">
    <?php if (!empty($errors['csrf'])): ?>
      <div class="alert alert-err"><?= e($errors['csrf']) ?></div>
    <?php endif; ?>

    <!-- Champs cachés : le jeton CSRF et la langue voyagent avec le formulaire. -->
    <input type="hidden" name="csrf" value="<?= e($csrf) ?>">
    <input type="hidden" name="lang" value="<?= e($lang) ?>">

    <!-- Honeypot : invisible pour un humain, souvent rempli par un robot. -->
    <div style="position:absolute;left:-9999px;" aria-hidden="true">
      <label>Ne pas remplir<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
    </div>

    <label for="nom"><?= e($S['nom']) ?></label>
    <input type="text" id="nom" name="nom" value="<?= e($v['nom']) ?>" placeholder="<?= e($S['ph_nom']) ?>" class="<?= isset($errors['nom'])?'bad':'' ?>" required>
    <?php if (isset($errors['nom'])): ?><p class="field-err"><?= e($errors['nom']) ?></p><?php endif; ?>

    <label for="email"><?= e($S['email']) ?></label>
    <input type="email" id="email" name="email" value="<?= e($v['email']) ?>" placeholder="<?= e($S['ph_email']) ?>" class="<?= isset($errors['email'])?'bad':'' ?>" required>
    <?php if (isset($errors['email'])): ?><p class="field-err"><?= e($errors['email']) ?></p><?php endif; ?>

    <label for="message"><?= e($S['message']) ?></label>
    <textarea id="message" name="message" placeholder="<?= e($S['ph_msg']) ?>" class="<?= isset($errors['message'])?'bad':'' ?>" required><?= e($v['message']) ?></textarea>
    <?php if (isset($errors['message'])): ?><p class="field-err"><?= e($errors['message']) ?></p><?php endif; ?>

    <button class="btn" type="submit"><?= e($S['send']) ?></button>
    <p class="note"><?= e($S['note']) ?></p>
  </form>
<?php endif; ?>

  <p class="credit"><?= $S['credit'] /* contient un lien <a> rédigé par nous, pas par l'utilisateur */ ?></p>
</main>
</body>
</html>