Live Coding : PHP Orienté Objet - Générateur de formulaires

29 mai 2020 - : PHP Tutoriel Live-Coding - : 0 commentaire - Tutoriel PHP Live-Coding Orienté Objet Formulaires

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 29 mai 2020

Avant de pouvoir mettre en place notre CRUD, nous aurons besoin de créer un certain nombre de formulaires qui permettront, par exemple, aux utilisateurs de s'inscrire ou se connecter, d'ajouter des annonces...

Ces formulaires pourront accueillir de nombreux champs différents comme des champs texte, des listes déroulantes, des boutons...

Attention : le générateur de formulaires présenté ici restera basique, il conviendra d'y ajouter de nombreux paramètres.

La classe Form

Nous allons commencer par créer une classe "Form" dans "Core" qui commencera donc comme ceci

namespace App\Core;

class Form {

}

Jusque là pas de soucis.

Nous allons également y ajouter une propriété privée qui contiendra le code du formulaire généré. Cette propriété commencera par être vide. Nous aurons également besoin d'un "getter" que nous appellerons "create".

private $formCode = "";

/**
 * Générer le formulaire HTML
 * @return string 
 */
public function create(){
    return $this->formCode;
}

Nous ajouterons également une méthode de validation de formulaire (basique) qui vérifiera uniquement si le formulaire est rempli.

/**
 * Valide si tous les champs proposés sont remplis
 * @param array $form Tableau contenant les champs à vérifier (en général issu de $_POST ou $_GET)
 * @param array $fields Tableau listant les champs à vérifier
 * @return bool 
 */
public static function validate(array $form, array $fields){
    // On parcourt chaque champ
    foreach($fields as $field){
        // Si le champ est absent ou vide dans le tableau
        if(!isset($form[$field]) || empty($form[$field])){
            // On sort en retournant false
            return false;
        }
    }
    // Ici le formulaire est "valide"
    return true;
}

Méthode "générique" d'ajout d'attributs

Les champs de formulaire peuvent avoir des attributs divers comme un id, des classes, mais aussi des attributs spécifiques comme required ou multiple, entre autres.

Nous proposerons à l'utilisateur de la classe de fournir un tableau contenant les attributs qu'il souhaite mettre dans le champ et nous gèrerons ce tableau dans la méthode ci-dessous.

/**
 * Ajoute les attributs envoyés à la balise
 * @param array $attributs Tableau associatif ['class' => 'form-control', 'required' => true]
 * @return string Chaine de caractères générée
 */
private function ajoutAttributs(array $attributs): string
{
    // On initialise une chaîne de caractères
    $str = '';

    // On liste les attributs "courts"
    $courts = ['checked', 'disabled', 'readonly', 'multiple', 'required', 'autofocus', 'novalidate', 'formnovalidate'];

    // On boucle sur le tableau d'attributs
    foreach($attributs as $attribut => $valeur){
        // Si l'attribut est dans la liste des attributs courts
        if(in_array($attribut, $courts) && $valeur == true){
            $str .= " $attribut";
        }else{
            // On ajoute attribut='valeur'
            $str .= " $attribut='$valeur'";
        }
    }

    return $str;
}

Balise d'ouverture de formulaire

Tout formulaire commence par une balise "form", qui contient, en général, au moins une méthode (post par défaut) pais également peut contenir une action, un id ou d'autres attributs.

Nous allons donc générer cette balise et la stocker dans la propriété "formCode"

/**
 * Balise d'ouverture du formulaire
 * @param string $methode Méthode du formulaire (post ou get)
 * @param string $action Action du formulaire
 * @param array $attributs Attributs
 * @return Form 
 */
public function debutForm(string $methode = 'post', string $action = '#', array $attributs = []): self
{
    // On crée la balise form
    $this->formCode .= "<form action='$action' method='$methode'";

    // On ajoute les attributs éventuels
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs).'>' : '>';

    return $this;
}

Balise de fermeture

Un formulaire doit, bien sûr, être fermé. Nous allons créer une méthode ajoutant la balise de fermeture. Nous pourrions l'éviter mais le choix est celui là.

/**
 * Balise de fermeture du formulaire
 * @return Form 
 */
public function finForm():self
{
    $this->formCode .= '</form>';
    return $this;
}

Le label

Dans les formulaires nous avons souvent à mettre des balises "label", nous allons donc créer une méthode spécifique

/**
 * Ajout d'un label
 * @param string $for 
 * @param string $texte 
 * @param array $attributs 
 * @return Form 
 */
public function ajoutLabelFor(string $for, string $texte, array $attributs = []):self
{
    // On ouvre la balise
    $this->formCode .= "<label for='$for'";

    // On ajoute les attributs
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs) : '';

    // On ajoute le texte
    $this->formCode .= ">$texte</label>";

    return $this;
}

Champ input

Les champs input sont les plus courament utilisés dans les formulaires, ils auront une méthode spécifique qui permettra de spécifier le type et le nom ainsi qu'un tableau d'attributs éventuels

/**
 * Ajout d'un champ input
 * @param string $type 
 * @param string $nom 
 * @param array $attributs 
 * @return Form
 */
public function ajoutInput(string $type, string $nom, array $attributs = []):self
{
    // On ouvre la balise
    $this->formCode .= "<input type='$type' name='$nom'";

    // On ajoute les attributs
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs).'>' : '>';

    return $this;
}

Champ textarea

Le textarea est une balise fermante spécifique qui nécessite donc une méthode à elle

/**
 * Ajoute un champ textarea
 * @param string $nom Nom du champ
 * @param string $valeur Valeur du champ
 * @param array $attributs Attributs
 * @return Form Retourne l'objet
 */
public function ajoutTextarea(string $nom, string $valeur = '', array $attributs = []):self
{
    // On ouvre la balise
    $this->formCode .= "<textarea name='$nom'";

    // On ajoute les attributs
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs) : '';

    // On ajoute le texte
    $this->formCode .= ">$valeur</textarea>";

    return $this;
}

Champ select

Nous avons parfois besoin de créer des listes d'options, créons la méthode qui permettra de définir le comportement de notre liste, méthode qui sera à compléter pour gérer les différents cas (selected, optgroups...)

/**
 * Liste déroulante
 * @param string $nom Nom du champ
 * @param array $options Liste des options (tableau associatif)
 * @param array $attributs 
 * @return Form
 */
public function ajoutSelect(string $nom, array $options, array $attributs = []):self
{
    // On crée le select
    $this->formCode .= "<select name='$nom'";

    // On ajoute les attributs
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs).'>' : '>';

    // On ajoute les options
    foreach($options as $valeur => $texte){
        $this->formCode .= "<option value='$valeur'>$texte</option>";
    }

    // On ferme le select
    $this->formCode .= '</select>';

    return $this;
}

Les boutons

Tout formulaire a au moins un bouton, voici la méthode pour l'ajouter

/**
 * Ajoute un bouton
 * @param string $texte 
 * @param array $attributs 
 * @return Form
 */
public function ajoutBouton(string $texte, array $attributs = []):self
{
    // On ouvre le bouton
    $this->formCode .= '<button ';

    // On ajoute les attributs
    $this->formCode .= $attributs ? $this->ajoutAttributs($attributs) : '';

    // On ajoute le texte et on ferme
    $this->formCode .= ">$texte</button>";

    return $this;
}

Créer un formulaire

Si nous souhaitons créer un formulaire, par exemple pour une connexion, nous allons devoir instancier notre classe Form puis ajouter tous les champs qui nous intéressent pour enfin, envoyer le tout à la vue.

Dans un contrôleur, nous ajouterons donc ce code

// On instancie le formulaire
$form = new Form;

// On ajoute chacune des parties qui nous intéressent
$form->debutForm()
    ->ajoutLabelFor('email', 'Email')
    ->ajoutInput('email', 'email', ['id' => 'email', 'class' => 'form-control'])
    ->ajoutLabelFor('password', 'Mot de passe')
    ->ajoutInput('password', 'password', ['id' => 'password', 'class' => 'form-control'])
    ->ajoutButton('Me connecter', ['class' => 'btn btn-primary'])
    ->finForm()
;

// On envoie le formulaire à la vue en utilisant notre méthode "create"
$this->render('users/login', ['loginForm' => $form->create()]);

Dans notre vue, il nous suffira d'appeler le formulaire de cette façon

<?= $loginForm ?>

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire