Close

Crear CRUD con JQuery + Materializecss Parte 2

Vamos a continuar con la segunda parte de nuestro tutorial Crear Crud con Jquery + Materializecss , si les interesa ver la primera parte pueden dar clic aqui.

En esta segunda parte veremos:

  1. Eliminaremos el código duro que teníamos en un archivo tipo JSON.
  2. Como traer datos ya desde nuestra base de datos MySQL interactuando con PHP y su tecnología PDO.
  3. Generamos nuestro primer Insert dinámico a nuestra lista.
  4. Cambiaremos el diseño de nuestro lista.

Nuestro index.html : Aquí solo cambiamos el tipo de lista, donde ahora ponemos una con mejor aspecto que nos proporciona Materializecss.

Nuestro main.js : En nuestro archivo javascript tenemos nuestro método llenarListaAlumnos() donde tenemos una función AJAX  en la cual va y le pide una petición GET a nuestro Servidor. Tenemos un método llamado agregarAlumno() donde tenemos una petición POST a nuestro servidor que es donde generaremos un insert.

 

Nuestro main.php : dentro de nuestro PHP teneos la conexión a nuestra Base de Datos de MySQL por medio de PDO que nos facilita de manera ligera nuestra interacción a la Base de Datos.

Nuestro main.css

Ver Demo

Descargar Ejemplo

Con esto finalizamos la segunda parte de nuestro tutorial, se me hace bastante interesante el uso de materializecss pues es sencillo de implementar y tiene componentes muy útiles, espero que les este gustando el tutorial y en cuanto pueda subo la 3ra parte.

Saludos.

3 thoughts on “Crear CRUD con JQuery + Materializecss Parte 2

  1. Hola muy bueno el ejemplo, pero creo que se podria refactorizar mas el código para tener un codigo mucho mas legible.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.