Exercice : Utilisation des formulaires

Exercice 0 : Les fichiers

Les fichiers sont les mêmes pour tous les exercices.

Architecture des fichiers :

- assets
    - styles
        - style.css
- controllers
    - user-form.php
- templates
    - partials
        - _header.phtml
        - _footer.phtml
        - _main.phtml
    - layout.phtml
index.php

assets/styles/style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
    font-size: 18px;
}

body {
    display: grid;
    padding: 0;
    margin: 0;
    grid-template-rows: 15vh 75vh 10vh;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body > header {
    display: grid;
    background-color: #4e148c;
    color: white;
    align-items: center;
    justify-content: center;
}

body > header > h1 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
}

body > main {
    display: grid;
    grid-template-rows: 15vh 60vh;
    background-color: #D6EFFF;
    color:#0a090c;
    grid-template-columns: 10% 80% 10%;
}

body > main > h2 {
    display: grid;
    grid-column: 2 / 3;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    align-self: center;
    justify-self: center;
}

body > main > form {
    grid-column: 2 / 3;
}

body > footer {
    display: grid;
    background-color: #4e148c;
    color: white;
    align-items: center;
    justify-content: center;
}

templates/partials/_header.phtml

<header>
    <h1>Exercices Formulaires</h1>
</header>

templates/partials/_main.phtml

<main>
    <h2>
        <?= $pageTitle; ?>
    </h2>
    <!-- Votre formulaire ici -->
</main>

<footer>
    <p>
        Exercices sur les formulaires en PHP
    </p>
</footer>

templates/layout.phtml

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Exercices Formulaires</title>
        <link rel="stylesheet" href="assets/styles/style.css">
    </head>
    <body>
        <?php require "templates/partials/_header.phtml"; ?>
        <?php require "templates/partials/_main.phtml"; ?>
        <?php require "templates/partials/_footer.phtml"; ?>
    </body>
</html>

index.php

<?php

$pageTitle = "Titre de l'exercice";

require "templates/layout.phtml";

?>

Exercice 1 : formulaire de connexion

Titre de l'exercice : "Formulaire de connexion".

Dans le fichier templates/partials/_main.phtml vous allez créer un formulaire qui contient 2 champs et un bouton de soumission. Votre formulaire aura la méthode post et l'action controllers/user-form.php. Vos deux champs de formulaire seront une adresse email et un mot de passe.

Dans votre fichier controllers/user-form.php vous allez récupérer les informations du formulaire et les afficher avec un echo sous le format suivant :

"Email : l'adresse email | Mot de passe : le mot de passe"

Exercice 2 : formulaire d'inscription

Titre de l'exercice : "Formulaire d'inscription".

Dans le fichier templates/partials/_main.phtml vous allez créer un formulaire qui contient 4 champs et un bouton de soumission. Votre formulaire aura la méthode post et l'action controllers/user-form.php.

Vos champs de formulaire seront :

une adresse email
un mot de passe
la confirmation du mot de passe
une checkbox d'inscription à une newsletter

Dans votre fichier controllers/user-form.php vous allez récupérer les informations du formulaire.

Vous allez vérifier que le mot de passe et sa confirmation sont identiques. S'ils le sont, vous afficherez : "Vérification des mots de passe : OK" sinon vous afficherez "Vérification des mots de passe : NOK".

Vous allez ensuite vérifier si l'utilisateur-ice s'est inscrit-e à la newsletter. Pour faire ça vous allez devoir vérifier si la checkbox de votre newsletter est bien présente dans $_POST.

Si l'utilisateur-ice s'est inscrit-e utilisez echo pour afficher :

"Email : l'adresse email | Mot de passe : le mot de passe | Newsletter : Oui".

Sinon affichez :

"Email : l'adresse email | Mot de passe : le mot de passe | Newsletter : Non".

Correction

Correction Exercice 1 & 2

21 May 2025