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

En este tutorial veremos como hacer un crud con codeigniter y jQuery.
Ya que tenemos hecho un crud con php y pdo, vamos a hacer otro con nuestro framework codeigniter haciendo uso de jQuery, no puede ser menos, haremos uso del código javascript y css del crud con php y veremos como hacer validaciones de formularios con la clase form validation de codeigniter, pero haciendo uso de ajax de jQuery, podremos crear nuevos registros, leer registros, actualizarlos y eliminarlos.

Como veremos no es muy complicado, pero al introducir algo de jQuery es más interesante y mucho mejor de cara al usuario final. Como siempre, empezamos creando nuestro proyecto.

Imágenes crud con codeigniter y jQuery

Crud en php con la extensión PDO4

Crud en php con la extensión PDO3

Crud en php con la extensión PDO

Crud en php con la extensión PDO

Creamos el proyecto

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, le podemos poner crud_ci, sugiero que coloquen el mismo así será más sencillo seguir el tutorial.

Los archivos css

Esta carpeta contiene los archivos css para el proyecto, debemos colocarla tal cuál en la raíz del proyecto.
Archivos css

La base de datos

 

El archivo .htaccess

El que tenga problemas de url, ya sea le diga que no se encuentra la url o de este tipo, seguramente es porque tiene inactivo el mod rewrite en su apache, así que deberá acceder con http://localhost/crud_ci/index.php/controlador/funcion en vez de http://localhost/crud_ci/controlador/funcion.

Si todo ha ido bien, ahora ya podemos acceder al proyecto desde aquí, sin el htaccess sería http://localhost/crud_ci/index.php.

 

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 de acceso a la base de datos.

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 todo lo anterior ya tenemos hecha la configuración de codeigniter para poder crear nuestro proyecto.

El controlador crud

Creamos un archivo nuevo llamado crud.php y lo guardamos en la carpeta controllers, dentro colocamos el siguiente código.

Con esto ya podemos pasar al modelo, que es donde haremos la comunicación con la base de datos, veamos.

El modelo crud_model.php

Creamos un nuevo archivo en la carpeta application/models llamado crud_model.php y dentro colocamos el siguiente código.

Con esto ya tenemos parte de la funcionalidad, ya podemos preparar la vista y ver el resultado, sólo nos quedará crear el código jQuery para que todo funcione correctamente, veamos.

La vista crud.php

Creamos un nuevo archivo en application/views llamado crud.php y dentro colocamos el siguiente código.

Como vemos en el head cargamos los css y js, podemos ver como cargamos la librería jquery y jquery ui, aparte de sus css para hacer uso de las ventanas modales.

Simplemente recorremos el array users para imprimir los usuarios en pantalla. Al pulsar el botón con class editar o eliminar, con jQuery obtenemos su id, que es la id del usuario, de esta forma sabemos sobre que usuario queremos actuar.

El archivo funciones.js

Ahora sólo nos queda crear el archivo funciones.js, para ello creamos una carpeta en la raíz de la aplicación llamada js, y dentro un archivo que llamaremos funciones.js, dentro colocaremos el siguiente código jQuery.

Y ya está, ya tenemos montado un crud con codeigniter y jQuery, no me pararé a explicar el código jQuery. Si alguién no tiene mucha idea sobre jQuery, que lo pida e iremos haciendo tutoriales sobre esta libreria.

Espero que os sea de ayuda y podamos entender un poco mejor como trabaja este framework, dejo los archivos para su descarga.

Descargar crud con codeigniter y jQuery