CodeValidación y envío de formularios en Igniter 4 con ejemplo

Formulario en CodeEncendedor 4

Los formularios permiten a los usuarios interactuar con la aplicación y enviar datos. Un formulario puede utilizarse como formulario de contacto, que los visitantes del sitio web pueden completar y enviarnos. La información recibida se suele almacenar en la base de datos o enviarse por correo electrónico.

Estructura del formulario HTML

El siguiente código muestra la estructura de un formulario HTML típico.

<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>

Aquí:

• … son las etiquetas de apertura y cierre del formulario. Los atributos id y name especifican el nombre y el ID del formulario. El atributo method especifica el verbo HTTP que se utilizará, normalmente POST.
• Especifica los elementos del formulario. El atributo "name" es el nombre de la variable que se envía al servidor backend para su procesamiento.

CodeAsistente de formularios de Igniter

HTML es fácil de entender y escribir, pero CodeEncendedor simplifica aún más las cosas. CodeIgniter tiene funciones integradas para crear formularios HTML. Consideremos lo siguiente: CodeCódigo de formulario de Igniter que utiliza el asistente de formularios para crear un formulario:

<?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();
?>

Aquí:

• echo form_open('create_user.php', ['id' => 'frmUsers']); crea la etiqueta de apertura del formulario, establece el método en POST y establece la acción URL a create_user.php.
• echo form_label('ID de usuario', 'user_id'); crea una etiqueta que dice ID de usuario para el campo de entrada llamado user_id.
• echo form_input(['name' => 'user_id']); crea un campo de entrada de texto llamado user_id.
• echo form_submit('btnSubmit', 'Crear usuario'); crea un botón de envío con la etiqueta Crear usuario.
• echo form_close(); cierra el formulario.

Como puede ver, las funciones auxiliares para formularios facilitan la creación de formularios utilizando PHP puro. Al pasar atributos a los métodos de estas funciones, podemos personalizar el HTML generado para el formulario. El código anterior genera el siguiente código HTML para el formulario:

<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>

La mayor ventaja de usar el asistente de formularios es que genera código semánticamente correcto que se adhiere a los estándares HTML. Puede consultar la documentación oficial. CodePara obtener más detalles, consulte la documentación de Igniter: https://codeigniter.com/user_guide/helpers/form_helper.html.

CodeEjemplo de formulario de Igniter

Después de cubrir los conceptos básicos de CodeIgniter, volvamos a nuestro proyecto tutorial, en el que hemos estado trabajando durante todo este tiempo. CodeSerie de tutoriales de IgniterEn resumen, el proyecto del tutorial crea una aplicación de gestión de contactos que almacena los detalles en la base de datos.

Crear contacto

En el tutorial anterior, creamos rutas para nuestra aplicación y vistas simples. Abra application/views/contacts/create.php y modifique el código de create.php de la siguiente manera:

<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>

Nota: El código anterior utiliza HTML simple para crear el formulario. Veamos ahora cómo se ve nuestro formulario en el navegador web. Cargar lo siguiente URL en su navegador web: http://localhost:3000/contacts/createSi has estado siguiendo el proyecto del tutorial, deberías ver lo siguiente:

Validación de formularios en CodeEncendedor

La validación desempeña un papel fundamental al procesar datos de formularios. Por ejemplo, si un usuario se registra en un sitio web, debemos asegurarnos de que complete correctamente sus datos y proporcione una dirección de correo electrónico válida. Si trabajamos con fechas, debemos verificar que los rangos de fechas sean válidos; por lo tanto, no aceptaríamos una fecha con 32 días en un mes.

La validación resuelve estos problemas. CodeLa validación de Igniter se realiza en dos frentes al trabajar con aplicaciones web.

La validación del lado del cliente se realiza en el navegador web, generalmente con HTML y JavaScript. Mejora el rendimiento porque todo se hace en el cliente, por lo que no es necesario enviar los datos al servidor. La desventaja es que el usuario tiene control sobre él; si dependes de JavaScript para validar y deshabilitar el usuario JavaScript, tu validación fallará.

La validación del lado del servidor se realiza en el servidor. La desventaja es que el usuario tiene que enviar los datos al servidor y esperar la respuesta, lo que consume recursos de red y puede degradar el rendimiento. La principal ventaja es un mayor control y la garantía de que sus reglas de validación funcionan incluso si el usuario desactiva la validación. JavaGuión.

Una mejor estrategia consiste en utilizar la validación del lado del cliente como estrategia principal y la validación del lado del servidor como mecanismo de reserva.

Agregar reglas de validación de formularios

CodeIgniter tiene una biblioteca de validación integrada. La biblioteca se carga mediante la siguiente línea:

$this->load->library('form_validation');

El CodeLa biblioteca de validación de formularios de Igniter puede realizar algunas de las siguientes acciones:

• Comprueba los campos obligatorios. Examina los valores enviados y devuelve un error si un campo marcado como obligatorio no tiene ningún valor.
• Validación del tipo de datos: algunos campos solo admiten valores numéricos. Si se detecta un valor no numérico, la biblioteca devuelve un error y cancela el envío del formulario.
• Validación de longitud: algunos campos requieren un número mínimo o máximo de caracteres. La biblioteca de validación gestiona estos casos.
• Sanitización de datos: la biblioteca puede eliminar código malicioso de los datos enviados por motivos de seguridad. Si los valores enviados tienen activos JavaLa biblioteca elimina el código malicioso, ya sea de scripts o de inyección SQL, y lo inutiliza.
• Validar campos únicos de la base de datos: supongamos que tiene un formulario de registro que utiliza una dirección de correo electrónico y desea asegurarse de que la dirección sea única. La biblioteca facilita la verificación de los datos enviados comparándolos con una tabla y un campo de la base de datos.

Las reglas de validación se establecen utilizando el siguiente formato:

$this->form_validation->set_rules('field','human readable field','rule',['custom message']);

Aquí:

• 'field' especifica el nombre del campo del formulario que será validado por la biblioteca.
• El parámetro 'campo legible para humanos' especifica el formato legible del campo, que se muestra al usuario cuando se produce un error.
• 'regla' especifica la regla de validación que se aplicará, como por ejemplo, que sea obligatoria, numérica o que tenga una longitud mínima.
• ['mensaje personalizado'] es opcional y puede establecer un mensaje de validación personalizado que se mostrará cuando la regla falle.

La siguiente es una CodeEjemplo de Igniter para validar el número de contacto:

$this->form_validation->set_rules('contact_number', 'Contact Number', 'required');

Aquí:

• El código anterior comprueba si se ha introducido el campo contact_number. Si no se ha introducido, devuelve un error que indica que el campo Número de contacto es obligatorio.

Para ejecutar la validación según las reglas establecidas, utilizamos la siguiente función de la biblioteca de validación:

$this->form_validation->run()

Si el código anterior devuelve falso, significa que una o más reglas establecidas han fallado. Si devuelve verdadero, significa que todas las reglas de validación se han superado y puede continuar con la siguiente acción.

Veamos más ejemplos de reglas de validación. Supongamos que desea validar varios campos, como el nombre, el número y la dirección de correo electrónico del contacto. Puede utilizar el siguiente código:

$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);

Aquí:

• En el ejemplo anterior, proporcionamos una matriz de campos con reglas para la función set_rules de la biblioteca. Esto facilita la validación de varios campos.

Validación única

Si queremos validar el número de contacto para asegurarnos de no guardar el mismo número dos veces, podemos utilizar la siguiente regla:

$this->form_validation->set_rules('contact_number', 'Contact Number','required|is_unique[contacts.contact_number]');

Aquí:

• | se utiliza para encadenar varias reglas.
• is_unique[contacts.contact_number] comprueba si el valor de contact_number es único con respecto a los valores del campo contact_number en la tabla de contactos de la base de datos.

Mostrar mensajes de error de validación de formulario

Si se produce un error durante el procesamiento del formulario, puede utilizar el siguiente código para mostrar los errores de validación:

<?php echo validation_errors(); ?>

Aquí:

• La función anterior devuelve todos los errores que se produjeron.

Completar los datos del formulario enviado: formularios fijos

Algunos formularios tienen muchos campos, y si ocurre un error, es importante asegurarse de que los datos que se ingresaron correctamente se conserven. La biblioteca de validación cuenta con mecanismos para lograrlo, utilizando el siguiente código:

<?php echo set_value('field_name'); ?>

Aquí:

• El código anterior muestra la información que el usuario introdujo.

Para obtener una guía de referencia completa sobre los métodos disponibles en la biblioteca de validación, consulte la documentación de la API en el sitio web oficial. CodeGuía del usuario de Igniter: https://codeigniter.com/userguide3/libraries/form_validation.html.

CodeEjemplo de validación de formularios de Igniter

A lo largo de esta serie de tutoriales, hemos estado agregando código a nuestro proyecto de ejemplo, una aplicación de gestión de contactos. En esta sección, cargaremos la biblioteca de validación y veremos cómo usarla en un ejemplo práctico. Modifique el código de las rutas de la siguiente manera para incluir el método 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';
$route['users'] = 'welcome/users';

Ahora cargaremos la biblioteca de validación de formularios en el controlador de Contactos y estableceremos algunas reglas de validación. Modifique el código como se muestra a continuación:

<?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');
}
}

Aquí:

• $rules = array(…) define las reglas de validación.
• $this->form_validation->set_rules($rules); establece las reglas de validación.
• Si ($this->form_validation->run() == FALSE) {…} se ejecutan las reglas de validación, y si fallan, el formulario se vuelve a mostrar con errores de validación. Si la validación es correcta, redirigimos a la página de lista de contactos. En circunstancias normales, escribiríamos los datos en la base de datos, lo cual hacemos en el siguiente tutorial sobre bases de datos.

Modifique la vista de creación en application/views/contacts/create.php como se muestra a continuación:

<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>

Aquí:

• Muestra los errores que se produzcan, si los hay, durante el proceso de validación.
• Establece el valor que se introdujo previamente, si lo hubiera.

Cargar lo siguiente URL Entra en tu navegador web y haz clic en Crear contacto sin introducir ningún valor:

Preguntas Frecuentes