Gestiona tu base de datos usando CRUD con PHP SQL AJAX
En esta entrada aprenderemos a gestionar nuestra base de datos mediante un sistema CRUD realizado en PHP, SQL y Ajax. De ésta manera podremos actualizar los datos mostrados sin tener que recargar la página.
Hagamos memoria: CRUD significa:
- Crear (CREATE, insertar datos en la base de datos utilizando la instrucción SQL INSERT)
- Leer (READ, leer datos de la base de datos utilizando instrucción SQL SELECT)
- Actualizar (UPDATE, actualizar registros usando instrucción SQL UPDATE)
- Eliminar (DELETE, borrar registros usando instrucción SQL DELETE)
En este post te enseñé a realizar un CRUD muy simple para tu base de datos.
En estas dos entradas te muestro cómo gestionar la base de datos sin recargar la página desde un formulario y desde un enlace.
|
Consultas a bases de datos sin recargar la página Al enviar el formulario, AJAX captura los datos incluidos en los INPUT del formulario, los envía al archivo PHP que los procesa y devuelve una respuesta. |
Consultas a bases de datos sin recargar la página Al hacer click en un enlace, una imagen, un texto… AJAX captura los datos y los envía al archivo PHP para ser procesado. Es una forma de convertir variables PHP a variables Javascript. |
Empecemos!
La estructura del proyecto es muy simple:
- proyecto
-
- index.php
-
- ajax
-
-
- ajax.js (este archivo se encarga de las consultas dinámicas)
-
-
- backend
-
-
- database.php (conexión a la base de datos)
- save.php (guardar datos)
- edit.php (editar datos)
- delete.php (borrar datos)
-
-
- css
-
-
- loader.css (se muestra durante las consultas)
-
-
- modal
-
-
- add_modal.php (formulario modal para añadir datos)
- edit_modal.php (formulario modal para editar datos)
- delete_modal.php (modal para eliminar datos)
-
El funcionamientod del sistema es bastante simple.
En el archivo index.php consultamos a la base de datos para que nos devuelva la información de la consulta y la mostramos a través de una simple tabla. Añadimos igualmente un boton para eliminar o editar datos.
Cuando pulsamos en Añadir (o en Editar o Borrar), se abre un modal que recogerá los datos que introduciremos:
- En el caso de añadir nuevo, es un simple formulario. Puedes ampliarlo todo lo que necesites.
- En el caso de editar, el formulario ya viene con los datos cargados desde la base de datos. Esta carga se hace a través del archivo ajax.js.
- Para eliminar dato, simplemente nos pregunta si queremos borrar y envía el id al pulsar el ok.
Verás que, en lugar de enviar esa información a sus respectivos archivos php (save.php, edit.php, delete.php), los pasamos por el archivo ajax.js que se encarga de recoger la información desde los modales, llamar a los archivos .php, y mostrar la modificación en el archivo index.php sin tener que recargar toda la página.
A partir de aquí, puedes modificar todo el sistema para añadir todos los campos que necesites para tu propio proyecto.
Puedes ver el sistema en funcionamiento AQUI
Puedes descargar el sistema completo desde este enlace.
Recuerda configurar correctamente el archivo database.php para conectarlo con tu base de datos. Con un poco de trabajo puedes añadir todos los campos que requiera tu proyecto y adaptar el CSS a tu gusto y necesidades.
PERO RECUERDA ESTE CONSEJO CUANDO TRABAJES SOBRE BASES DE DATOS:
Espero que te haya sido de utilidad esta entrada y el consejo final.
No dudes en dejar tus comentarios.
Hasta pronto!