Saltar al contenido

JQuery Ajax CRUD editar guardar en linea PHP MySQL

2 abril, 2018
JQuery Ajax CRUD editar guardar en linea PHP MySQL
Valorar Entrada

JQuery Ajax CRUD editar guardar en linea PHP MySQL. En este articulo veremos como crear un sistema CRUD a base de JQuery, AJAX, PHP y MySQL de una manera dinamica con el fin de evitar actualizar la pagina o abrir ventanas nuevas. Por lo tanto, para agregar nuevo registro presionaremos con un clic el boton agregar y nos generara de manera dinamica una fila nueva. En el cual, solo ingresaremos nuevos valores para dicha fila.

La creación de un CRUD para nuestro sistema es una modulo muy usado en el desarrollo web. Si usted es un Desarrollador Web, usted debe haber diseñado varios modelos de CRUD en su historial de programación. Sin embargo, esto existe en un sistema de gestión de contenido que hay a montones en internet.

JQuery Ajax CRUD editar guardar en linea PHP MySQL

Su usabilidad es siempre requerida en un sistema de gestión de inventario o un software de contabilidad, etc. Si usted está iniciando el desarrollo web. Sin duda va a experimentar varios proyectos de creación de CRUD en su carrera más adelante.

QUE SIGNIFICA CRUD EN EL DESARROLLO DE UN SISTEMA

CRUD significa Crear, Leer, Actualizar, Eliminar.

Generalmente estos datos se almacenan en la base de datos MySQL u otro gestor de almacenamiento. PHP será el leguaje de comunicación con el servidor que controla a grandes rasgos las tablas de bases de datos MySQL para brindar al usuario de front-end la capacidad de gestionar cómodamente acciones relacionadas al CRUD.

JQuery Ajax CRUD PHP MySQL
JQuery Ajax CRUD PHP MySQL

Filas de una tabla HTML editables con ayuda de JQuery y AJAX

Creando Base de datos llamado PHP_ENLINEA y sus respectivas tablas

Creamos un fichero llamado INDEX.PHP

  • Este archivo estará encargado de mostrar la tabla dinámica con los datos extraídos desde el servidor MySQL.
  • Cada celda tendrá una propiedad “contenteditable” de tipo Booleano, es decir verdadero o falso. Por ejemplo, si queremos que la celda sea editable tendrá la propiedad true, caso contrario si no deseamos que sea editable será false.

JQuery Ajax en línea Fichero AGREGAR.PHP

Este archivo se utiliza para crear una fila nueva con las opciones ‘ guardar ‘ y ‘ Cancelar ‘ el evento. Después de introducir datos, podemos presionar la opción ‘ guardar ‘ y ejecutara el evento de guardado en la base de datos. Una vez guardado el registro, se visualizará de manera automática el nuevo registro insertado.

JQuery Ajax CRUD editar guardar en linea PHP MySQL
JQuery Ajax CRUD editar guardar en linea PHP MySQL

CONCLUSIÓN

  • Su usabilidad se va incrementando rápidamente y es muy recomendable. Porque, no crea nuevas ventanas para insertar, editar y/o eliminar registros, lo hace de manera dinámica.
  • Si deseamos rapidez, apuesta por este pequeño sistema, la página no refrescara. Por lo tanto, ahorramos tiempo de respuesta del servidor para cargar el HTML

DESCARGA

Descargar Código Fuente