CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

En esta ocasión quiero compartir un fragmento de código que he desarrollado para mostrar datos de clientes usando datatables.  Básicamente la carga de datos se hace de manera asíncrona, esto es útil si queremos cargar datos  de una tabla que contenga miles de registros.

Para todos aquellos usuarios que tenga una aplicación web que requiera la carga de muchos registros,  este ejemplo podría servirles, porque  la carga de datos es rápida, esto evita a que el usuario tenga que esperar mucho tiempo para que se le muestren los datos

Cabe mencionar que hace algunos meses escribí un tutorial para cargar datos usando bootstrap, PHP, MySQL y jQuery;  todo ello sin usar ningún plugins, si deseas echarle un vistazo sigue el siguiente enlace:

Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery

Instalación del CRUD de datos usando dataTables, Bootstrap, PHP y MySQL

1- Creación de la base de datos: Empezaremos creando la base de datos, para ello debemos abrir nuestra herramienta de gestión de base de datos y crear la base de datos. Para este ejemplo, he usado phpMyAdmin

 

2- Ahora procedemos a importar los datos: Los datos de nuestra aplicación se encuentran dentro de la carpeta “DB”, el archivo a importar se llama “datatables.sql”

 

3- Editar el archivo de conexión a la base de datos: Una vez hayamos creado e importado los datos, procederemos a editar el archivo de conexión a la base de datos  llamado “conn.php”, debemos colocar los datos de conexión según nuestra configuración  

4- Creación de archivo index.php: El archivo index.php contiene la estructura html, para mostrar los datos del cliente cargados desde nuestra base de datos:

Obtendremos una vista similar a la siguiente:

5- Creación del archivo ajax-grid-data: Este archivo se encargara de procesar las peticiones via Ajax, las cuales son enviadas desde el archivo index.php, se conectará a la base de datos y enviará a la vista los resultados de la consulta sql solicitados desde el index.php.

6- Agregando registro a la base de datos: Para crear un nuevo registro en la base de datos, hemos creado un archivo llamado: registro.php, que servirá para la captura de datos.

Vista de registro de datos:

7- Editando los registros: Para la edición de los registros, hemos creados 2 archivos:

  • Archivo “editar.php”, el cual se encarga de mostrar los datos  a actualizar desde la base de datos
  • Archivo “update-edit.php”, el encarga de procesar los datos enviados desde al archivo editar.php

Creando el archivo “editar.php”.

Vista para actualizar los datos:

Creando el archivo “update-edit.php”.

Te invito a que descargues todos los archivos base para desarrollar este tutorial a continuacion:


Espero que este breve tutorial y explicación pueda ser  útil para  todos aquellos que están construyendo aplicaciones web o que están aprendiendo a programar con PHP.