2 changed files with 71 additions and 44 deletions
@@ -1,6 +1,27 @@
 <?php
-$osSet = ['linux','apple','windows'];
-$os = "linux";
+// Les valeurs autorisées servent à la fois pour la validation
+// du formulaire et pour l'affichage dans la vue.
+$osSet = [
+    'linux' => 'Linux',
+    'windows' => 'Windows',
+    'apple' => 'MacOS',
+];

-include './views/main.php';
-?>
+$cookieName = 'preferred_os';
+$os = 'linux';
+
+// Si le formulaire est soumis, on valide la valeur reçue avant
+// de l'enregistrer dans un cookie valable 60 secondes.
+if (isset($_POST['os']) && array_key_exists($_POST['os'], $osSet)) {
+    $os = $_POST['os'];
+    setcookie($cookieName, $os, time() + 60);
+
+    // On met aussi $_COOKIE à jour pour refléter immédiatement le choix
+    // sans attendre le rechargement suivant du navigateur.
+    $_COOKIE[$cookieName] = $os;
+} elseif (isset($_COOKIE[$cookieName]) && array_key_exists($_COOKIE[$cookieName], $osSet)) {
+    // En l'absence de soumission, on relit la préférence mémorisée.
+    $os = $_COOKIE[$cookieName];
+}
+
+include_once './views/main.php';
@@ -1,43 +1,49 @@
 <!doctype html>
-<html>
+<html lang="fr">
    <head>
        <meta charset="UTF-8">
+        <title>Cookie OS préféré</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
        />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-
    </head>
    <body>
        <main class="container">
            <form method="POST">
                <fieldset class="grid">
                    <legend>Changez votre os</legend>
+                    <?php foreach ($osSet as $value => $label) { ?>
                        <label>
-						<input type="radio" name="os" value="linux"> 
-						<i class="fa fa-linux fa-2x" aria-hidden="true"></i>
-					</label>
-					<label>
-						<input type="radio" name="os" value="windows"> 
-						<i class="fa fa-windows fa-2x" aria-hidden="true"></i>
-					</label>
-					<label>
-						<input type="radio" name="os" value="apple"> 
-						<i class="fa fa-apple fa-2x" aria-hidden="true"></i>
+                            <input
+                                type="radio"
+                                name="os"
+                                value="<?php echo htmlspecialchars($value, ENT_QUOTES); ?>"
+                                <?php echo $os === $value ? 'checked' : ''; ?>
+                            >
+                            <i class="fa fa-<?php echo htmlspecialchars($value, ENT_QUOTES); ?> fa-2x" aria-hidden="true"></i>
+                            <?php echo htmlspecialchars($label, ENT_QUOTES); ?>
                        </label>
+                    <?php } ?>
                </fieldset>

                <button type="submit">Envoyer</button>
            </form>
            <article>
                <header>Votre os</header>
-				<?php echo "<i class='fa fa-$os fa-5x'></i>";?>
+                <p>
+                    <!-- On affiche l'icône et le nom de l'OS courant. -->
+                    <i class="fa fa-<?php echo htmlspecialchars($os, ENT_QUOTES); ?> fa-5x" aria-hidden="true"></i>
+                </p>
+                <p><?php echo htmlspecialchars($osSet[$os], ENT_QUOTES); ?></p>
                <footer>
-					Rafraîchir la page <a href=""><i class="fa fa-refresh" aria-hidden="true"></i></a>
+                    Rafraîchir la page
+                    <a href="./" aria-label="Rafraîchir la page">
+                        <i class="fa fa-refresh" aria-hidden="true"></i>
+                    </a>
                </footer>
            </article>
-
        </main>
    </body>
 </html>