CRUD ASÍNCRONO PHP-MYSQL-JQUERY

 

Hola, hoy voy a explicar como crear un CRUD asíncrono con el servidor usando PHP-MYSQL-JQUERY, datatables-Jquery y programación orientada a objetos, también utilizaremos Bootstrap y Toast para estilizar un poco el aspecto de la página. Suena muy complicado pero es relativamente sencillo, así que empecemos.

Primero,crearemos nuestra base de datos sencilla para este ejemplo: 

create database php_crud;

y ahora crearemos una tabla con algunos registros:

CREATE TABLE `crud` (

  `Id` int(2) NOT NULL AUTO_INCREMENT,

  `nombre` varchar(25) DEFAULT NULL,

  `apellido` varchar(25) DEFAULT NULL,

  `direccion` varchar(35) DEFAULT NULL,

  `referencias` varchar(45) DEFAULT NULL,

  `cuidad` varchar(15) DEFAULT NULL,

  `edad` int(2) DEFAULT NULL,

  PRIMARY KEY (`Id`)

) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;

INSERT INTO `crud` VALUES (1,'Alejandro','Castillo','Av Quito','Cerca de la iglesia','Machala',20);

INSERT INTO `crud` VALUES (2,'Liss','Pardo','Av. las Americas','En la esquina','Pasaje',23);

INSERT INTO `crud` VALUES (3,'Antonella','Arias','Av Jose Olmedo','Cerca de una tienda','Machala',19);

INSERT INTO `crud` VALUES (4,'Alejandro','Martinez','Av. Idependencia','Cerca del hospital','Arenillas',23);

UNLOCK TABLES;

DIRECTORIO DE ARCHIVOS

Crearemos esta estructura de archivos en una carpeta dentro de nuestro localhost.

Dentro de la capa presentación vamos a poner todo el contenido que tenga que ver con el aspecto de la página(css, js, bootstrap, toast, etc). Ahí crearemos nuestro index.php que será así:

index.php

Ahora vamos a la capa lógica y crearemos nuestra clase, con sus respectivos atributos y métodos.

clase.php

Ahora vamos a la capa datos y crearemos la conexión con nuestra base de datos:

conexion.php

Ahora vamos a la carpeta ajax y crearemos un switch que nos servirá más tarde.

app.php

Listo, ya tenemos la estructura de nuestro pequeño CRUD, ahora vamos a la capa de presentación y dentro de la carpeta JS crearemos un archivo javascript que controlara nuestro CRUD.

app.js

Y listo ya tendremos nuestro pequeño CRUD asíncrono usando programación orientada a objetos, viste que fácil que es.

Acá te dejo el link del repositorio por si deseas descargarlo.