Enviar peticiones de tipo get y post (Formulario) en CodeIgniter 4

▶

Ya con el modo desarrollador activo en CodeIgniter 4, vamos a aprender a hacer el típico envío de datos de un formulario HTML con algunos campos HTML definidos en el mismo en CodeIgniter 4, sean procesados mediante un controlador o función particular definido dentro del controlador; para esto vamos a necesitar un par de funciones, una vista HTML y un modelo que ya explicamos anteriormente, además de tener la conexión a la base de datos y la tabla generada; todo estos son conceptos que ya vimos anteriormente y por lo tanto puedes visitar los artículos correspondientes.

Recordando...

Un punto muy importante si recordamos cómo trabajamos en Codeigniter 3, es decir, la versión anterior del framework, es que tienes más flexibilidad al momento de definir este tipo de procesos; es decir, perfectamente podríamos definir todo el proceso de pintar la vista/formulario y procesar el mismo en una sola función, pero esto en CodeIgniter 4 no viene siendo lo recomendado y no es el enfoque que deberíamos de seguir aquí; y esto es un punto muy importante, CodeIgniter 4 toma la organización de otros frameworks como Laravel para definir controladores de tipo recurso que iremos abordando en otra entrada, pero que en pocas palabras nos permite crear todas las rutas de tipo CRUD.

Componentes necesarios para trabajar con los formularios en CodeIgniter 4

• Una vista que solamente va a ser consumida vía get, una petición de tipo get y es la que se va a encargar de pintar nuestra vista, específicamente nuestro formulario
• Otra vista que se va a encargar de procesar la petición del formulario que irá vía Post, que viene siendo el tipo de método recomendado para crear recursos (y CodeIgniter también emplea este tipo de peticiones para actualizar registros pero esto lo veremos en otra entrada.).
• Una vista HTML, que viene siendo nuestro formulario.
• Un modelo, que viene siendo simplemente el ente con el cual vamos a trabajar para crear un registro en base a la información o datos recibidos por el formulario.

Construir la app

En este bloque vamos a ir paso por paso construyendo la aplicación que señalamos anteriormente.

Definiendo el Modelo

Vamos a trabajar con el modelo de películas:

<?php namespace App\Models;
 
use CodeIgniter\Model;
 
class PersonModel extends Model {
    protected $table = 'people';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'surname','age','description'];
}

Definir el controlador

Ahora, vamos a crear un controlador que vamos a llamar como Person.php:

class Person extends Controller
{
}

Recuerda que el controlador es la capa que se encarga de comunicar a la vista con el modelo, y más que esto es el que tiene la lógica y la organización para hacer cada uno de los procesos señalados anteriormente, pintar una vista y procesar un formulario.

Definir las rutas de tipo recurso CRUD

Como vamos a aprovechar este formulario para crear un completo CRUD en posteriores entradas, vamos a aprovechar a definir una ruta de tipo recurso, como la explicamos anteriormente:

$routes->resource('person');

Con esto, nosotros ahora tenemos que definir en nuestro controlador unas funciones con nombres y parámetros correspondientes que son las que se van a encargar de realizar nuestro CRUD, aunque de momento nos interesa sería simplemente crear un registro; para eso.

Función para pintar un formulario get

La primera función que vamos a ver seria para pintar un formulario, por lo tanto no tenemos que hacer nada más, recordemos que estamos creando una ruta de tipo recurso y por lo tanto tenemos que crear una función llamada new, que es la que permite ser consumida vía una petición get y simplemente va a devolver una vista:

    public function new()
    {
        return view('person/new');
    }

Función par crear un registro Post

Ahora la función más interesante, la que solamente puede ser consumida vía una petición Post y por lo tanto es la que recibe los datos de nuestro formulario que viajan en base una petición vía Post:

    public function create()
    {
 
        $person = new PersonModel();
 
        $person->insert(
            [
                'name' => $this->request->getPost('name'),
                'surname' => $this->request->getPost('surname'),
                'age' => $this->request->getPost('age'),
                'description' => $this->request->getPost('description'),
            ]
        );
    }

El request para obtener los datos

Recordemos que sin importar que utilices, siempre existe algo llamada request, que viene siendo la petición de nuestro usuario, aquí viajan los datos de nuestro usuario, los datos del formulario anterior, por lo tanto, es el mecanismo que tenemos que emplear para obtener los datos; en C4, para obtener datos que van vía Post seria de la siguiente manera:

this->request->getPost('key')

En donde a key hace juego con el nombre del campo; por lo tanto, para obtener cada uno de los campos de formulario anterior; por ejemplo, name:

$this->request->getPost('name')

Y ahora simplemente queremos insertar un registro: para eso tenemos que crear una instancia de nuestro modelo que en este caso serìa de unas personas y la función llamada insert que es la que se encarga de insertar un registro; así de simple, ya con esto tenemos el proceso completo.

Vista para el formulario

Vamos a crear un sencillo formulario en la carpeta app/Views de nuestra aplicación como la siguiente y que llamaremos como new.php para que haga juego con el nombre de la función:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crear Persona</title>
</head>
 
<body>
 
    <h1>Crear Persona</h1>
 
    <form action="<?= base_url() ?>/person" method="post">
 
        <label for="name">Nombre</label>
        <input type="text" name="name" id="name" value="Andres">
 
        <br>
 
        <label for="surname">Apellido</label>
        <input type="text" name="surname" id="surname" value="Cruz">
 
        <br>
 
        <label for="age">Edad</label>
        <input type="text" name="age" id="age" value="29">
 
        <br>
 
        <label for="description">Descripción</label>
 
        <textarea name="description" id="description" cols="30" rows="10">Desarrollador</textarea>
 
        <br>
 
        <input type="submit" value="Enviar">
 
    </form>
 
</body>
 
</html>

Retornar a la vista de formulario

Ahora bien en este punto, si intentas crear un registro desde: http://codeigniter4.test/person/new o el dominio que tengas configurado, veras que a la final se queda una pantalla en blanco, y esto se debe a que la función de créate no devuelve nada; aquí perfectamente pudieras hacer algo como lo siguiente para pintar una vista desde create:

public function create()
    {
 
*** Resto del código
 
        return view('person/new');
    }

Pero de esta forma básicamente estamos haciendo el mismo trabajo de la función de new y por lo tanto sabemos que replicar código para que queda igual es malo en cualquier lenguaje de programación y además de que, si en este punto intentamos refrescar la página veremos una entraña alerta como la siguiente:

Y esto se debe a que estamos enviando o nuevamente una petición de tipo Post; y no queda bien; por lo tanto, lo que vamos a hacer es simplemente retornar a función anterior, para esto podemos emplear las rutas y tenemos una función llamada back que nos permite retornar a la función anterior:

return redirect()->back(); 

Es como si presiones back o retroceder desde tu navegador

Y con esto ahora funciona de una manera mucho mejor.

Extra: Recordar valores anteriores con el la función de old en CodeIgniter 4

Seguramente te interesa que C4 recuerda los valores anteriores en tu formulario; para eso, podemos emplear una función llamada old que recibe dos parámetros:

1. Nombre del campo
2. Valor por defecto (que es el que vamos a establecer cuando no existe un valor anterior, por ejemplo, cuando entramos en la página de new por primera vez.)

Ahora, para que los datos puedan ser tomado desde la redirección que estamos haciendo tenemos que emplear la función llamada withInput al momento de hacer la redirección:

return redirect()->back()->withInput();

Y para los campos del formulario, tenemos que definir la función en cuestión; por ejemplo:

<?=old('name',"")?>

Reglas de validación de los formularios

Realizar validaciones sobre los datos recibidos por el usuario mediante un formulario es fundamental garantizar la integridad y la calidad de los datos solicitados; para esto es que se utilizan las validaciones de formularios indicando cuales campos son de caracter obligatorio y que estructura tiene que tener; las validaciones son particularmente importante en situaciones en las que se depende de estos datos, ya que los errores pueden ser costosos o incluso peligrosos ya que mediante los formularios no validados se pueden realizar procesos de inyección de SQL entre otros tipos de ataques.

Validar formularios en CodeIgniter es muy fácil; tan solo debemos conocer qué es lo que queremos validar; cuales son las reglas que vamos a incorporar; por ejemplo, si tenemos el siguiente formulario:

	<div class="form-group">
		<label>Nombre</label>
		<input type="text" value="<?php echo $name ?>" class="form-control" placeholder="Nombre" name="name" required>
		<?php echo form_error('name', '<div class="text-danger">', '</div>') ?>
	</div>
	<div class="form-group has-feedback">
		<label>Apellido</label>
		<input type="text" value="<?php echo $surname ?>" class="form-control" placeholder="Apellido" name="surname" required>
		<?php echo form_error('surname', '<div class="text-danger">', '</div>') ?>
	</div>
	<div class="form-group has-feedback">
		<label>Teléfono</label>
		<input type="text" value="<?php echo $phone1 ?>" class="form-control" placeholder="Teléfono" name="phone1" required>
		<?php echo form_error('phone1', '<div class="text-danger">', '</div>') ?>
	</div>
	<div class="form-group has-feedback">
		<label>Teléfono 2</label>
		<input type="text" value="<?php echo $phone2 ?>" class="form-control" placeholder="Teléfono 2" name="phone2" required>
		<?php echo form_error('phone2', '<div class="text-danger">', '</div>') ?>
	</div>

Nos interesa que todos los campos estén presentes a excepción del teléfono 2 que es completamente opcional, nos interesa colocar diversas longitudes máximas y mínimas en nuestro formulario y además también nos interesa que algunos campos como la edad solo permita tipos de datos enteros; todo esto y mucho más lo podemos hacer en CodeIgniter mediante la validación de formularios; entre los más importantes tenemos:

Como puedes ver, tenemos reglas de validaciones para muchos casos, tipos de datos, emails, decimales, requeridos y cantidades máximas y mínimas para las longitudes de los String; estos son los que considero más importantes, pero puedes tener todas las reglas de validación desde la documentación oficial.

Entonces, para colocar reglas de validación en el formulario anterior debemos hacer lo siguiente:

$this->form_validation->set_rules('name', 'Nombre', 'max_length[100]|required');
$this->form_validation->set_rules('surname', 'Apellido', 'max_length[100]|required');
$this->form_validation->set_rules('phone1', 'Número de celular', 'min_length[9]|max_length[9]|required');
$this->form_validation->set_rules('phone2', 'Número de celular', 'min_length[9]|max_length[9]);

Como puedes ver, agregamos múltiples reglas de validación separadas por pipes (|); además de esto, fíjese que el teléfono 2 no se le aplica el tipo de validación "required" porque es completamente opcional; luego al momento de enviar el POST (también puede ser GET, simplemente cambia POST por GET):

if ($this->form_validation->run()) {
	// datos a guardar
	$save = array(
		'name' => $this->input->post("name"),
		'surname' => $this->input->post("surname")
	);
}

Aquí simplemente cuando detectamos que el formulário es un Post y es válido simplemente componemos un array para luego guardarlo en base de datos; pero tu puedes hacer lo que tu quieras con la data validada.

Reglas personalizadas para el formulario en CodeIgniter

Puede ser que quieras crear tus propias reglas de validación personalizadas para CodeIgniter; para eso simplemente tienes que crear una función en tu clase controlador y evaluar su condición; lo importante es que retorne o verdadero o falso:

function validate_passwd($password) {
	// At least one digit required
	// $regex = '(?=.*\d)';
	// At least one lower case letter required
	$regex = '(?=.*[a-z])';
	// At least one upper case letter required
	// $regex .= '(?=.*[A-Z])';
	// No space, tab, or other whitespace chars allowed
	$regex .= '(?!.*\s)';
	// No backslash, apostrophe or quote chars are allowed
	$regex .= '(?!.*[\\\\\'"])';
	if (preg_match('/^' . $regex . '.*$/', $password)) {
		return TRUE;
	}
	return FALSE;
}

Y luego la agregas tus reglas de validación colocando la función creada anteriormente con el prefijo callback_:

$crud->set_rules('passwd', 'Contraseña', 'min_length[8]|required|max_length[12]|callback_validate_passwd_admin');

Luego ve a tu archivo de lenguajes ubicado en application\language\english\form_validation_lang.php y configuras el mensaje de error de tu nueva regla:

$lang['validate_same_passwd'] = "La contraseña debe ser igual a la almacenada en el sistema.";

Aquí estamos tomando como ejemplo que estás empleando el inglés como idioma por defecto en tu proyecto, pero si varías el idioma simplemente varías la carpeta.

Mensajes personalizados para las reglas de validación:

En el archivo anterior podemos definir los mensajes en caso de que queramos personalizar los mismos; pero también podemos hacerlo desde el controlador:

$this->form_validation->set_message('min_length', '{field} must have at least {param} characters.');

Mostrar errores del formulario

Finalmente, para mostrar los errores del formulario podemos emplear:

<?php echo form_error(name, '<div class="text-danger">', '</div>') ?>

Este elemento generalmente se coloca en la vista del formulario, al lado del elemento de formulario a la cual aplicamos la regla de validación que para este ejemplo es uno llamado name.

Mostrar todos los errores del formulario de una

Muchas veces es útil mostrar los errores juntos, todos los errores del formulario desde un solo lugar desde una sola función, para eso existe la siguiente función:

validation_errors()

También puedes definir el elemento que contendrá dicho error que por defecto es simplemente una línea de texto, puedes colocarla en un alert de Bootstrap por ejemplo:

validation_errors('<div class="alert alert-danger" role="alert">', '</div>')

Ejemplo completo de un elemento de formulario en Bootstrap 5:

<div class="form-group">
    <?php
    echo form_label('Título', 'name');
    ?>
    <?php
    $text_input = array(
        'name' => 'name',
        'minlength' => 10,
        'maxlength' => 100,
        'required' => 'required',
        'id' => 'name',
        'value' => $name,
        'class' => 'form-control input-lg',
    );
    echo form_input($text_input);
    ?>
    <?php echo form_error('name', '<div class="text-danger">', '</div>') ?>
</div>

Validaciones personalizadas en CodeIgniter 4

▶

Las validaciones en CodeIgniter 4 son un punto fundamental en cualquier aplicación y en CodeIgniter 4 no es la excepción; poder validar nuestra data para poder estar seguros de que es válida y segura.

Son procesos que tenemos que llevar a cabo en nuestras aplicaciones; pero seguramente existen validaciones que son un poco más específicas para tu negocio y por ende no puedes emplear las genéricas que nos ofrece el framework; en esos casos, tenemos que crear una nosotros mismos; en CodeIgniter 4 lo podemos hacer fácilmente y con las mismas evitamos ensuciar de más el controlador que es donde generalmente las colocamos; tenemos que ir al archivo de:

config/Validation.php
En ella, veremos definidas una serie de clases:
public $ruleSets = [
\CodeIgniter\Validation\Rules::class,
\CodeIgniter\Validation\FormatRules::class,
\CodeIgniter\Validation\FileRules::class,
\CodeIgniter\Validation\CreditCardRules::class,
];

Las cuales puedes revisar y veras que son clases con funciones, los nombres de las funciones corresponden a las validaciones que podemos emplear y las mismas reciben un argumento, que como puedes suponer es el parámetro de validación; ya todo este mapeo se encarga el framework por nosotros; en mi ejemplo (que forma parte de mi curso completo en CodeIgniter 4 que puedes tomar en esta plataforma) vamos a crear un archivo dentro de:

app/validator/UserRules

Vamos a crear una carpeta extra que llamamos /app/Validation (puede tener cualquier nombre y dentro de la misma un archivo llamado UserRules (o el nombre que prefieras):

<?php
namespace App\Validation;
use App\Models\UserModel;
class UserRules
{
}

Y dentro de este archivo y clases, creamos nuestras funciones de validación a las cuales les aplicamos nuestras validaciones; lógicamente, tienen que devolver un booleano, true si pasa la validación y falso en caso contrario:

    public function provider(string $userId): bool
    {
        return $this->checkType($userId, "provider");
    }
    public function customer(string $userId): bool
    {
        return $this->checkType($userId, "customer");
    }

Para usarlas, basta con:

        $res = $this->validate([
            'user_id' => 'required|customer'
        ]);

Extra, crear validaciones con pase de parámetros

También podemos crear validaciones más generales en la cual podamos pasar un parámetro o mas mediante la definición de la validación:

$res = $this->validate([
            'user_id' => 'required|checkType[customer]',
        ]);

Y en nuestra clase:

   public function checkType($userId, $type)
    {
        $userModel = new UserModel();
        $user = $userModel->asObject()->where("type", $type)->find($userId);
        return $user != null;
    }

Validaciones e imprimir errores de formularios en CodeIgniter 4 con estilo de Bootstrap 5

▶

Las validaciones son un mecanismo fundamental que nosotros empleamos para mostrar errores que ocurran en un formulario, por lo tanto, en Codeigniter 4 nosotros podemos crear rápidamente unas reglas de validación desde el framework, en un archivo de configuración del mismo y configurarlo en cualquier parte desde nuestros controladores.

Vamos a ver cómo podemos emplear las validaciones sobre nuestro formulario, para esto podemos hacerlo de dos maneras básicamente, la primera sería sobre la función que se encarga de recibir los datos que creamos anteriormente por ejemplo, la función de create, para crear un nuevo elemento, en este caso, una persona:

    public function create(){
        $movie = new MovieModel();
        if($this->validate('movies')){
            $id = $movie->insert([
                'title' =>$this->request->getPost('title'),
                'description' =>$this->request->getPost('description'),
            ]);
            return redirect()->to("/movie/$id/edit")->with('message', 'Película creada con éxito.');
        }
        return redirect()->back()->withInput();
    }

Archivos de validación

CodeIgniter a partir de la versión 4 permite crear archivos de validación, en la cual sería simplemente un array, que tenemos que implementar con las validaciones y simplemente colocamos las validaciones que queramos emplear; el archivo se encuentra en app/Config/Validation y simplemente tienes que definir tus reglas de validación:

    public $movies =[
        'title' => 'required|min_length[3]|max_length[255]',
        'description' => 'min_length[3]|max_length[5000]'
    ];

Básicamente muy similar al ejemplo anterior, pero de esta manera queda mucho más organizado, más extensible y por lo tanto más usable.

El punto aquí, es que coloques como la key del array anterior el nombre del campo seguido de las reglas que puedes ver que tipos de reglas puedes colocar en la documentación oficial.

Por lo tanto, ya tenemos un esquema que podemos emplear para trabajar con las validaciones.

Mostrar errores de validación

Los errores de validación lo tenemos que mostrar en la vista de new, para eso tenemos que cargar un servicio de validaciones desde este archivo que luego le pasamos a la vista para mostrar los mismos:

  public function new()
    {
        $validation =  \Config\Services::validation();
        return view('person/new',['validation' => $validation]);
    }

Y en la vista recibimos una colección, entiéndase un listado de errores que los podemos imprimir de la siguiente manera:

<?= $validation->listErrors() ?>

Para dar un estilo personalizado para los errores; puedes ir a el archivo de Config/Validation.php y en la variable de templates, indicar la referencia al archivo que tiene que emplear como plantilla o template para imprimir los errores; por ejemplo:

    public $templates = [
        //'list'   => 'CodeIgniter\Validation\Views\list',
        'list'   => 'App\Views\Validations\list_bootstrap',
        'single' => 'CodeIgniter\Validation\Views\single',
    ];

Crear plantilla para mostrar los errores con Bootstrap

Y creamos dicho archivo, por ejemplo, con el estilo de Bootstrap: 

<?php if (! empty($errors)) : ?>
    <div class="errors" role="alert">      
        <?php foreach ($errors as $error) : ?>
            <div class="alert alert-danger"><?= esc($error) ?></div>
        <?php endforeach ?>
    </div>
<?php endif ?>

Pero, como puedes darte cuenta, puedes personalizar el mismo al 100% e incluir por ejemplo tu estilo que tengas para otros kit CSS como Tailwind.css

Conclusiones

De tal manera que ya sabes cómo puedes emplear validaciones personalizadas y un poco más que eso, pasar parámetros a las validaciones personalizadas.

Siguiente paso, aprende a cargar archivos en CodeIgniter 4.