PlatesPHP: Sistema de plantillas para Codeigniter 3
PlatesPHP: Sistema de plantillas para Codeigniter 3

Hola y bienvenidos como siempre a otro tutorial de uno-de-piera.com, esta vez seguimos viendo el trabajo con codeIgniter. Vamos a crear un formulario que procesaremos con ajax mediante un script que crearemos con la librería de jQuery.

Crearemos las validaciones con el framework codeIgniter así iremos viendo lo sencillo que es, trabajaremos con las urls amigables que nos proporciona codeIgniter mediante el archivo routes.php de nuestro proyecto, esto simplemente lo haremos para pasar una variable que nos mostrará un mensaje de conformidad, pero más que nada es para que puedan coger la idea de como hacerlo e intentar ayudarlos en lo que se pueda, con todo esto ya podemos empezar nuestro proyecto.

Creamos la base de datos

Crearemos una base de datos que vamos a llamar comentarios.

Y como siempre creamos una tabla para insertar datos en este caso

Como comentario decir que no es muy recomendable en lugar de usar fecha y hora por separados utilizar timestamp, siempre es mejor de esta forma así tendremos más flexibilidad a la hora de mostrar los datos, ahora creamos nuestro proyecto.

Descargamos los archivos

Nos vamos a La web de codeIgniter y nos descargamos la versión que hay disponible, la guardamos y la extraemos en nuestro directorio raíz, en mi caso C:\xampp\htdocs, una vez tengamos ya la carpeta con los archivos debemos cambiarle el nombre, yo le puse formulario_cod_ajax, sugiero que coloquen el mismo así será más sencillo seguir el tutorial.

El archivo .htaccess

Esta vez les dejo aquí el archivo .htaccess con el que podremos quitar el index.php de nuestra url, aquí está.
Descargar el .htaccess, lo debemos colocar en el directorio raíz de nuestro proyecto.

Ahora ya podemos acceder al proyecto desde http://localhost/formulario_cod_ajax, sin el htaccess sería http://localhost/formulario_cod_ajax/index.php.

Ahora ya veremos el mensaje de bienvenida de codeIgniter.

El archivo database.php

Ahora debemos dirigirnos a nuestro archivo database.php que está en la carpeta config y modificar el código para que quede así, siempre dependiendo de nuestros datos.

El archivo autoload.php

Ahora nos dirigimos al archivo autoload.php que está dentro de la carpeta config y en la línea 55 debemos modificar el código por éste.

De esta forma cargamos automáticamente la base de datos y la validación de formularios que nos propone codeIgniter, y en la línea 67 modificamos por este otro.

Con el helper url tendremos disponible las urls amigables y así podremos crear nuestra ruta, y el helper date es para poder trabajar con fechas en codeIgniter, que cosas como la función now() de php aquí no sirven.

La verdad que de la forma que trabaja codeIgniter también deberíamos haber cargado el helper form, pero prefiero explicarlo en otro tutorial ya que sino se puede hacer demasiado extenso y pesado, así que aquí crearemos el formulario como lo hacemos con php.

El archivo config.php

Ahora vamos a nuestra carpeta config y abrimos el archivo config.php, en la línea 17 colocaremos este código.

Con esta línea podemos utilizar la función base_url() que nos proporciona codeIgniter, así cada vez que escribamos base_url() es como si escribimos http://localhost/formulario_cod_ajax/, esto es muy bueno para poder trabajar con rutas absolutas y no tener problemas con nuestros archivos, hay que tenerlo muy en cuenta siempre.

La hoja de estilos del formulario

Nuestro formulario

Ahora vamos a crear el formulario y nuestro script para poder procesarlo con ajax, nos vamos a la carpeta views y creamos un archivo que llamaremos formulario_view.php, este es el código que pasaremos a explicar detalladamente.

Hacemos una llamada a la librería de jQuery online y creamos el script que procesará el archivo con ajax, primero hacemos el document.ready para que se ejecute el ajax sólo cuando el DOM esté listo, después decimos que cuando se haga submit, el selector con id formulario_ajax, osea a nuestro formulario, se le coja la url donde será procesado, eso esta en el atributo action del form.

El type que viene a ser el método como lo ejecutaremos, en este caso es vía post y la data, que serán los campos de nuestro formulario que se serializarán para que puedan ser procesados por jQuery, antes de realizar la petición ajax(beforeSend) mostramos el loader que tenemos oculto en el div loader y a continuación hacemos el success y le hacemos fadeOut al loader, con esto desaparece pero poco a poco.

Dejo este enlace donde están las funciones y métodos de ajax con jQuery, todo muy bien detallado.

Después creamos el formulario, lo más interesante que cabe destacar es el value de los campos, con ese código los datos quedarán guardados en cada campo en caso de que el formulario no sea validado correctamente y las líneas.

son para que codeIgniter a través de la validación que haremos en nuestro controlador nos muestre los errores individualmente.

Los segmentos en codeIgniter son trozos de nuestra url, por ejemplo en la url localhost/formulario_cod_ajax/mensaje/enviado tenemos nuestra base_url() que es localhost/formulario_cod_ajax/ y después tenemos dos segmentos, mensaje sería nuestro primer segmento y enviado sería el segundo segmento, entonces con las líneas.

decimos que si nuestra url es localhost/formulario_cod_ajax/mensaje/enviado nos diga en un div con una clase llamada correcto que el mensaje se envío correctamente, para que esto funcione tenemos que crear una ruta en el archivo routes.php de nuestra carpeta config, vamos a ello.

Creando una ruta

Debemos ir a nuestra carpeta config y dentro de ella abrimos el archivo routes.php e insertamos el siguiente código
más o menos en la línea 43.

Esto quiere decir que cuando nuestra url sea localhost/formulario_cod_ajax/mensaje/enviado nos llevará a la página localhost/formulario_cod_ajax/formulario, esto simplemente lo hago para ver de forma sencilla el tema del ruteo en codeIgniter y de paso mostramos el mensaje conforme se ha envíado el mensaje aunque también lo podríamos haber hecho con el success de jQuery, preferí hacerlo así está vez.

Nuestro controlador

Creamos un archivo que llamaremos formulario.php y lo colocamos en la carpeta controllers, dentro iría el siguiente código.

Por último creamos en nuestra carpeta models un archivo que llamaremos formulario_model.php y colocamos el siguiente código.

Aquí creamos la función para hacer la inserción que es la que llamamos desde el controlador pasandole las variables que envíamos desde el formulario, creamos dos variables, una con la hora y otra con la fecha, para esto tuvimos que cargar el helper date y creamos un array llamado $data al que le vamos pasando el nombre del campo y el valor que queremos introducir, después realizamos la inserción pasando el array $data y si todo ha ido bien volverá al controlador y hará el redirect a http://localhost/formulario_cod_ajax/mensaje/enviado con lo que nuestro mensaje habrá sido envíado correctamente y se mostrará el mensaje que hemos personalizado.

Esto ha sido todo, espero que les sirva y bueno, cualquier comentario será bien recibido, saludos y nos vemos en el próximo tutorial.