Creación y validación de formularios con CodeIgniter (capítulo 2)
Por Jonathan Rodríguez. @jojo5717
En este video tutorial voy a enseñaros cómo crear formularios en CodeIgniter con ayuda del helper form y validarlos de manera sencilla mediante la librería form_validation.
Los helpers como su nombre lo indica son ayudas, existen diferentes Helpers por ejemplo de URL que te ayudan a la creación de vínculos, helares de formulario ( es el que usaremos en este capitulo) que le ayudarán a crear elementos de formulario, los ayudantes de texto realizar varias rutinas de formato de texto, los ayudantes de cookies establecer y leer cookies, Ayudantes de archivos ayudarle a lidiar con los archivos, etc.
A diferencia de la mayoría de otros sistemas en Codeigniter, los ayudantes no están escritas en un formato orientado a objetos. Son funciones simples de procedimiento. Cada función auxiliar realiza una tarea específica, sin depender de otras funciones.
Empecemos a crear nuestro formulario!
Paso 1: Empecemos con una instalación básica de codeigniter como vimos en el capitulo anterior.
Una vez hecho esto crearemos nuestro Controlador ‘Formulario.php’ que será el encargado de gestionar todo el formulario, tanto mostrarlo como procesarlo.
Creamos nuestra clase, nos debería quedar algo como:
class Formulario extends Controller{
function __construct(){
parent::Controller();
}
}
y dentro de nuestro constructor vamos a cargar los Helpers de url y formulario que nos ayudaran a crear nuestro formulario. para eso debemos colocar en el constructor después de parent::__construct();
$this->load->helper(array(‘url’,’form’));
$this->load->library(‘form_validation’);
Ahora debemos crear nuestra función ‘Index’ que como dijimos en el capitulo anterior es la primera función en ejecutarse en el controlador. Una vez creada haremos lo primero que haremos será comprobar que el formulario se a enviado correctamente, para eso usaremos un método llamado run(), si este método es igual a FALSE significa que el formulario no se envio correctamente.
function index(){
if($this->form_validation->run()==FALSE){
}
}
Nota: En Codeigniter cuando debemos usar FALSE o TRUE se tienen que escribir todo en mayúscula , es una regla del codeigniter.
Si nuestro formulario no se a enviado debemos cargar una vista que será nuevamente el formulario mostrando los errores de validación, para ello debemos usar dentro del if
$this->load->view(‘form_view’)
(mas adelante veremos como mostrar dichos errores).
De lo contrario, es decir, si el formulario fue cargado correctamente cargaremos otra vista que la llamaremos ‘exito_view.php’ donde mostraremos algún mensaje de bienvenida.
Muy bien con esto tenemos listo nuestro controlador formulario por el momento, para los que están un poco perdidos, su controlador debe haber quedado de la siguiente forma:
class Formulario extends Controller{
function __construct(){
parent::__construct();
$this->load->helper(array(‘url’,’form’));
$this->load->library(‘form_validation’);
}
function index(){
If ($this->form_validation->run()==FALSE){
$this->load->view(‘form_view’);
}else{
$this->load->view(‘exito_view’);
}
}
}
Ahora crearemos nuestros Views, nuestro primer view será ‘form_open.php’, aquí es donde ya crearemos nuestro formulario. Una vez creado nuestro archivo dentro de la etiqueta <body> empezaremos con
<?php echo validation_errors(‘<div class=”error”>’,’</div>’) ?>
con esto creamos un <div> que será donde mostraremos los errores de validación. luego colocamos:
<?php echo form_open(‘formulario’); ?>
esto solo nos creara lo que seria en html <form>, el nombre formulario que colocamos dentro del paréntesis es la url a procesar.
ahora seguiremos con nuestro formulario creando una etiqueta label. que seria de la siguiente forma:
<?php echo form_label(‘Nombre: ‘,’nombre’);
el primer campo es el nombre a mostrar y el segundo seria el ID y el name de dicho campo.
Luego crearemos nuestro input para poder ingresar el nombre, esta parte lo haremos con un array para poder asignarle a nuestro input varios atributos. como name, value, size, etc..
<?php echo form_input(array(‘name’ => ‘nombre’ , ‘id’ => ‘nombre’ , ‘size’ => ‘50’ , ‘value’ => set_value(‘nombre’)) ?>
Ahora se preguntara porque en value ponemos set_value(‘nombre’), con esto lo que estamos haciendo es mostrando el mismo nombre que habíamos colocado antes si existe algún error de validación. Ahora seguiremos con los demás campos ( email, contraseña, repetir contraseña y el botón submit) y nos debería quedar algo como:
<?php echo form_open(‘formulario’) ?>
<?php echo form_label(‘Nombre: ‘, ‘nombre’) ?>
<?php echo form_input(array(‘name’ => ‘nombre’, ‘id’ => ‘nombre’, ‘size’ => ‘50’, ‘value’ => set_value(‘nombre’))) ?>
<?php echo form_label(‘Email:’, ‘email’); ?>
<?php echo form_input(array(‘name’ => ‘email’, ‘id’ => ‘email’, ‘size’ => ‘50’, ‘value’ => set_value(‘email’))); ?>
<?php echo form_label(‘Contraseña:’, ‘password’); ?>
<?php echo form_password(array(‘name’ => ‘password’, ‘id’ => ‘password’, ‘size’ => ‘50’)); ?>
<?php echo form_label(‘Reescribe la contraseña:’, ‘repassword’); ?>
<?php echo form_password(array(‘name’ => ‘repassword’, ‘id’ => ‘repassword’, ‘size’ => ‘50’)); ?>
<?php echo form_submit(‘enviar’, ‘Enviar’) ?>
<?php echo form_close() ?>
Ahora ejecuten nuestro proyecto y deberán ver algo como esto.
Le podemos dar un poco de estilo a nuestro formulario y aprovechar para crear un div donde mostraremos los errores de validación para que se vea un poco mejor. agregamos el siguiente estilo en nuestra pagina:
<style type=”text/css” media=”screen”>
label,input{
display:block;
padding:5px;
}
div.error{
background-color:#FF8F8F;
border: 1px solid #FF1111;
margin-bottom:5px;
padding:5px;
width:400px;
}
</style>
y nos quedara algo mas presentable.
Ahora solo nos queda empezar a validar nuestro formulario.
Para eso nos vamos a nuestro controlador principal que es ‘formulario’ y en nuestra función índex de primero que todo debemos establecer las reglas de validación, es muy sencillo, para eso debemos colocar:
$this->form_validation->set_rules(‘nombre’, ‘nombre’, ‘required|min_length[5]’);
El primer parámetro es el nombre del campo, el segundo es el nombre que va aparecer cuando nos de un error de validación, y por ultimo colocamos las reglas de validación separadas por el símbolo ’ | ’ podemos poner varias, vamos a poner required (requerido) , y min_length[5] ( mínimo de caracteres 5), luego veremos muchos mas.
Debemos aplicar las reglas a cada campo de nuestro formulario.
$this->form_validation->set_rules(‘email’, ‘correo electrónico’,’required|valid_email’);
$this->form_validation->set_rules(‘password’, ‘contraseña’, ‘required’);
$this->form_validation->set_rules(‘repassword’, ‘reescribir contraseña’, ‘required|matches[password]’);
Si ejecutamos veremos que nos muestra los errores de validación en un div color rojo, y que esta en ingles, luego veremos como hacer que nos muestre los errores en español.
Ahora crearemos nuestra vista que será la que se mostrara cuando el formulario se envie correctamente. creamos nuestro archivo llamado ‘exito_view.php’ y en la etiqueta <body> creamos un DIV con un id ‘éxito’
y dentro escribimos ‘El formulario se a enviado correctamente’ y agregamos el siguiente estilo:
<style type=”text/css” media=”screen”>
div.exito{
background-color:#C2FFAF;
border:1px solid #2A7F0F;
padding:5px;
margin-bottom:15px;
width:400px;
}
</style>
luego podemos añadir después de cerrar la etiqueta del DIV, un helper que será
<?php echo anchor(‘formulario’,’Volver al formulario’); ?>
Esto nos creara un link, donde el primer parámetro es la url que va a llamar y el segundo parámetro es el texto que va a mostrar como link.
Muy bien ya tenemos nuestro formulario trabajando correctamente.
Espero que les guste el tutorial, cualquier cosa no duden en consultarme.Saludos.Aquí les dejo unas imágenes del código. Archivo : Formulario.php
Archivo: form_view.php
Archivo: éxito_view.php
-
A emileeyou89 le gusta esto
-
Jonathan Rodriguez ha enviado esto a yucazos
