CodeExemple de validation de formulaire Igniter avec soumission de formulaire
Fiona Brun
Formulaire dans Codeallumeur
Les formulaires permettent aux utilisateurs d'interagir avec l'application et de soumettre des données. Il peut être utilisé pour un formulaire de contact qu'un visiteur du site Web peut remplir et nous envoyer les informations. Les informations reçues sont généralement stockées dans la base de données ou envoyées par e-mail.
Structure du formulaire HTML
Le code suivant montre la structure d'un formulaire HTML typique.
<form id="frmUsers" name="frmUsers" method="POST" action="create_user.php"> <input type="text" id="user_id" name="user_id"> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form>
ICI,
- … sont les balises d'ouverture et de fermeture du formulaire. Les attributs id et name spécifient le nom et l'identifiant du formulaire. L'attribut méthode spécifie le verbe HTTP à utiliser. Ceci est généralement spécifié par le verbe POST
- Spécifie les éléments du formulaire. L'attribut name est le nom de la variable qui est soumis au serveur principal pour traitement.
CodeAssistant de formulaire Igniter
Le HTML est génial, il est facile à comprendre et à écrire, mais Codeallumeur cela simplifie encore les choses. CodeIgniter possède des fonctions intégrées pour créer des formulaires HTML.
Considérons ce qui suit CodeCode de soumission de formulaire Igniter utilisant l'assistant de formulaire pour créer un formulaire
<?php
echo form_open('create_user.php', ['id' => 'frmUsers']);
echo form_label('User Id', 'user_id');
echo form_input(['name' => 'user_id']);
echo form_label('Password', 'password');
echo form_input(['type' => 'password', 'name' => 'password']);
echo form_submit('btnSubmit', 'Create User');
echo form_close();
?>
ICI,
- echo form_open('create_user.php', ['id' => 'frmUsers']); crée la balise d'ouverture du formulaire, définit l'action sur POST et définit l'action URL pour créer_utilisateur.php
- echo form_label('ID utilisateur', 'id_utilisateur'); crée une étiquette qui lit l'ID utilisateur pour le champ de saisie avec le nom user_id.
- echo form_input(['name' => 'user_id']); crée un champ de saisie de type texte avec le nom user_id
- echo form_submit('btnSubmit', 'Créer un utilisateur'); crée un bouton de soumission avec le libellé Créer un utilisateur
- echo form_close(); ferme le formulaire
Comme vous pouvez le voir ci-dessus CodeAvec Igniter, les fonctions d'assistance de formulaires simplifient la création de formulaires en PHP pur. En passant des attributs aux méthodes de ces fonctions, on peut personnaliser le code HTML généré pour le formulaire.
Le code ci-dessus génère le code de formulaire HTML suivant
<form action="http://localhost:3000/index.php/create_user.php" id="frmUsers" method="post" accept-charset="utf-8">
<label for="user_id">User Id</label>
<input type="text" name="user_id" value=""/>
<label for="password">Password</label>
<input type="password" name="password" value=""/>
<input type="submit" name="btnSubmit" value="Create User"/>
</form>
Le plus grand avantage de l’utilisation de l’assistant de formulaire est qu’il génère un code sémantiquement correct qui adhère aux normes HTML définies.
Vous pouvez vous référer au site officiel CodePour plus de détails, consultez la documentation Igniter.
https://codeigniter.com/user_guide/helpers/form_helper.html
CodeExemple de formulaire d'allumeur
Après avoir abordé les bases de CodeIgniter, revenons à notre projet tutoriel sur lequel nous avons travaillé tout au long de ce projet. CodeSérie de tutoriels Igniter. En résumé, le projet du didacticiel crée une application de gestion de contacts qui stockera les détails dans la base de données.
Créer un contact
dans le didacticiel précédent, nous avons créé des itinéraires pour nos applications et des vues simples. Ouvrez application/views/contacts/create.php
Modifiez le code de create.php comme suit
<div class="column">
<h2 class="title">Create Contact</h2>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="name" name="name" class="input" type="text" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email" name="email" class="input" type="email" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>
À noter: le code ci-dessus utilise du HTML brut pour créer des formulaires.
Voyons maintenant à quoi ressemblent nos formulaires dans le navigateur Web
Charger les éléments suivants URL dans notre navigateur web.
http://localhost:3000/contacts/create
Si vous avez créé le projet de didacticiel, vous devriez pouvoir voir ce qui suit
Validation de formulaire dans Codeallumeur
La validation joue un rôle très critique lors du traitement des données des formulaires. Disons qu'un utilisateur s'inscrit sur un site Web ; nous voulons nous assurer qu'ils remplissent les informations et l'adresse e-mail requises. Nous devons nous assurer que l'adresse e-mail saisie est valide. Si nous travaillons avec des valeurs de date, nous voulons nous assurer que les plages de dates sont valides. Nous n'aurions pas à accepter une date comportant 32 jours dans un mois, etc.
La validation résout les problèmes ci-dessus. CodeLa validation Igniter est effectuée sur deux (2) fronts lors de l'utilisation d'applications Web.
La validation côté client est effectuée du côté du navigateur Web. Cela implique généralement l'utilisation de HTML et JavaScript. La validation côté client améliore les performances car tout est effectué côté client. Il n'est donc pas nécessaire de soumettre les données au serveur. L'inconvénient de la validation côté client est que l'utilisateur en a le contrôle. Si vous comptez sur JavaScript à valider et l'utilisateur désactive JavaScript dans le navigateur, votre validation échouera alors.
La validation côté serveur est effectuée côté serveur. L'inconvénient de cette validation est que l'utilisateur doit soumettre les données au serveur pour traitement et attendre la réponse. Cela utilise les ressources du réseau et peut dégrader les performances. Le principal avantage de la validation côté serveur est que vous avez un meilleur contrôle et que vous êtes assuré que vos règles de validation fonctionnent même si l'utilisateur désactive JavaScript dans le navigateur.
Une meilleure stratégie consiste à utiliser le côté client comme stratégie de validation principale et le côté serveur comme mécanisme de secours.
Ajout de règles de validation de formulaire
CodeIgniter possède une bibliothèque de validation intégrée. Cette bibliothèque est chargée à l'aide de la ligne suivante :
$this->load->library('form_validation');
Le CodeLa bibliothèque de validation de formulaires Igniter peut être utilisée pour effectuer certaines des actions suivantes
- Vérifiez les champs obligatoires. Ceci examine les valeurs soumises et renvoie une erreur si un champ qui a été marqué comme requis n'a pas de valeur.
- Validation du type de données – certains champs peuvent nécessiter uniquement des valeurs numériques. Si une valeur non numérique est détectée, la bibliothèque renvoie une erreur. L'exécution de la soumission du formulaire est également interrompue.
- Validation de la longueur – certains types de données nécessitent que les champs comportent un certain nombre minimum ou maximum de caractères. La bibliothèque de validation est utile dans de tels cas.
- Désinfection des données – la bibliothèque de validation dispose également de fonctionnalités qui suppriment le code malveillant des données soumises pour des raisons de sécurité. Si par exemple les valeurs soumises ont une valeur active JavaScript ou code d'injection SQL, la bibliothèque de validation supprime le code nuisible et le rend inutile.
- Validez les champs de base de données uniques – supposons que vous disposiez d'un formulaire dans lequel les utilisateurs s'inscrivent en utilisant une adresse e-mail. Vous voudriez vous assurer que l’adresse e-mail est unique. La bibliothèque vous permet de vérifier facilement les données soumises par rapport à une table et un champ de base de données. Cela permet de savoir que la valeur a déjà été prélevée.
Les règles de validation sont définies en utilisant le format suivant
$this->form_validation->set_rules('field','human readable field','rule',['custom message']);
ICI,
- 'field' spécifie le nom du champ du formulaire à valider par la bibliothèque
- « champ lisible par l'homme » spécifie le format lisible par l'homme du champ en cours de validation. Ceci est affiché à l'utilisateur lorsqu'une erreur se produit.
- 'rule' spécifie la règle de validation à appliquer, telle que obligatoire, numérique, vérifier si la longueur minimale est… etc.
- ['custom message'] est facultatif et peut être utilisé pour définir un message de validation personnalisé qui doit être affiché lorsque la règle de validation échoue.
Voici un formulaire à soumettre. CodeExemple Igniter pour la validation du nom du contact
$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');
ICI,
- Le code ci-dessus vérifie si le champ contact_number a été renseigné. S'il n'est pas défini, renvoie une erreur indiquant que le champ Numéro de contact est requis.
Pour exécuter la validation par rapport aux règles définies, nous utilisons la fonction suivante de la bibliothèque de validation
$this->form_validation->run()
Si le code ci-dessus renvoie false, cela signifie qu'une ou plusieurs règles définies ont échoué. Si le résultat est vrai, cela signifie que les règles de validation ont toutes été respectées et que vous pouvez poursuivre l'action.
Examinons d'autres exemples de règles de validation. Supposons que vous souhaitiez valider certains champs indiquant le nom, le numéro et l'adresse e-mail du contact, vous pouvez utiliser le code suivant pour y parvenir.
$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);
$this->form_validation->set_rules($rules);
ICI,
- Dans la validation d'email ci-dessus dans CodeDans l'exemple Igniter, nous fournissons un tableau de champs avec des règles pour la fonction `set_rules` de la bibliothèque. Cela simplifie la validation de certains champs.
Validation unique
Si nous voulons valider le numéro de contact pour nous assurer que nous n'enregistrons pas deux fois le même numéro, nous pouvons utiliser la règle suivante pour ce faire.
$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');
ICI,
- | est utilisé pour regrouper plusieurs règles ensemble
- is_unique[contacts.contact_number] vérifie si la valeur de contact_number est unique par rapport aux valeurs du champ contact_number dans la table de base de données contacts.
Affichage des messages d'erreur de validation de formulaire
Si une erreur survient lors du traitement du formulaire, vous pouvez utiliser le code suivant pour afficher les erreurs de validation survenues
<?php echo validation_errors(); ?>
ICI,
- La fonction ci-dessus renvoie toutes les erreurs survenues.
Remplir les données du formulaire soumis : formulaires collants
Certains formulaires comportent de nombreux champs et si une erreur s'est produite, vous devez vous assurer que les données correctement ajoutées sont conservées. La bibliothèque de validation dispose de mécanismes pour y parvenir. Nous faisons cela en utilisant le code suivant.
<?php echo set_value('field_name'); ?>
ICI,
- Le code ci-dessus affiche l'entrée que l'utilisateur a saisie.
Pour obtenir un guide de référence complet sur les méthodes disponibles dans la bibliothèque de validation, vous pouvez vous référer à la documentation de l'API dans le guide utilisateur officiel. Codeallumeur
https://codeigniter.com/userguide3/libraries/form_validation.html
CodeExemple de validation de formulaire Igniter
Tout au long de cette série de didacticiels, nous avons ajouté davantage de code à notre projet de didacticiel qui est une application de gestion de contacts. Dans cette section, nous allons charger la bibliothèque de validation et voir comment nous pouvons la mettre en pratique à l'aide d'un exemple d'application réel.
Modifiez le code des routes comme suit pour inclure la méthode store
$route['default_controller'] = 'welcome'; $route['contacts'] = 'contacts'; $route['create'] = 'contacts/create'; $route['store'] = 'contacts/store'; $route['edit/:id'] = 'contacts/edit'; $route['update/:id'] = 'contacts/update'; $route['delete/:id'] = 'contacts/delete'; $routes['users'] = 'welcome/users';
Chargeons maintenant la bibliothèque de validation de formulaire dans le contrôleur Contacts et définissons quelques règles de validation.
Modifiez le code comme indiqué dans la validation du formulaire ci-dessous. CodeExemple d'allumeur :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Contacts extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url', 'form');
$this->load->library('form_validation');
}
public function index() {
$this->load->view('header');
$this->load->view('contacts/index');
$this->load->view('footer');
}
public function create() {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
}
public function store() {
$rules = array(
array(
'field' => 'contact_name',
'label' => 'Contact Name',
'rules' => 'required'
),
array(
'field' => 'contact_number',
'label' => 'Contact Number',
'rules' => 'required',
'errors' => array(
'required' => 'You must provide a %s.',
),
),
array(
'field' => 'email_address',
'label' => 'Email Address',
'rules' => 'required'
)
);
$this->form_validation->set_rules($rules);
if ($this->form_validation->run() == FALSE) {
$this->load->view('header');
$this->load->view('contacts/create');
$this->load->view('footer');
} else {
redirect(base_url('contacts'));
}
}
public function edit($id) {
$this->load->view('header');
$this->load->view('contacts/edit');
$this->load->view('footer');
}
public function update($id) {
$this->load->view('header');
$this->load->view('contacts/update');
$this->load->view('footer');
}
public function delete($id) {
$this->load->view('header');
$this->load->view('contacts/delete');
$this->load->view('footer');
}
}
ICI,
- $rules = array(…) sets définit les règles de validation
- $this->form_validation->set_rules($rules); définit les règles de validation
- if ($this->form_validation->run() == FALSE) {…} exécute les règles de validation et si elles échouent, le formulaire est réaffiché avec des erreurs de validation. Si la validation réussit, nous redirigeons simplement vers la page de la liste des contacts. Dans des circonstances normales, nous écrivions les données dans la base de données. Nous le ferons dans les prochains tutoriels lorsque nous examinerons bases de données.
Modifiez la vue de création dans le code application/contacts/create.php comme indiqué dans la validation du formulaire ci-dessous CodeExemple d'allumeur :
<div class="column">
<h2 class="title">Create Contact</h2>
<div class="notification is-danger">
<?php echo validation_errors(); ?>
</div>
<form action="<?= base_url('contacts/store') ?>" method="POST">
<div class="field">
<label class="label">Contact Name</label>
<div class="control">
<input id="contact_name" name="contact_name" class="input" type="text" value="<?php echo set_value('contact_name'); ?>" placeholder="Type the contact name">
</div>
</div>
<div class="field">
<label class="label">Contact Number</label>
<div class="control">
<input id="contact_number" name="contact_number" class="input" type="text" value="<?php echo set_value('contact_number'); ?>" placeholder="Type the contact number">
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
<div class="control">
<input id="email_address" name="email_address" class="input" type="email" value="<?php echo set_value('email_address'); ?>" placeholder="Type the email address">
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Save Contact</button>
</div>
</div>
</form>
</div>
ICI,
- nous affichons les erreurs qui surviennent le cas échéant pendant le processus de validation
- définit la valeur qui a été précédemment définie, le cas échéant
Vous devez charger les éléments suivants URL Ouvrez votre navigateur web. Cliquez ensuite sur « Créer un contact » sans saisir aucune information.
Résumé
- Les formulaires permettent aux utilisateurs d'interagir avec l'application et de soumettre des données.
- Le HTML est génial, il est facile à comprendre et à écrire, mais CodeIgniter simplifie encore les choses. CodeIgniter possède des fonctions intégrées pour créer des formulaires HTML.
- La validation joue un rôle très critique lors du traitement des données des formulaires.
- Dans ce tutoriel, nous avons examiné les principales stratégies de validation, ainsi que leurs avantages et inconvénients. Nous avons également appris à définir des règles de validation et à configurer les messages d'erreur. CodeBibliothèque de validation intégrée d'Igniter. Nous avons conclu cette leçon par la mise en pratique des connaissances acquises à travers un exemple concret.
