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:
- Nombre del campo
- 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',"")?>- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter