Close

Crear CRUD con JQuery + Materializecss Parte 1

Vamos a realizar un CRUD a base de las herramientas JQuery y Materializecss que en mi punto de vista me agrado bastante, vamos a dar una maquetación tipo móvil para explotar sus componentes al 100.

Este tutorial Consistirá en ir subiendo actualizaciones de este proyecto, en cuanto tenga oportunidad lo ire actualizando hasta terminar nuesto CRUD.

Por el momento en esta primera parte veremos la maquinación de nuestro HTML apoyándonos de Materializecss donde solo tenemos un header con sus botones, una lista y una footer, lo básico que se muestra en una app móvil y por ultimo muy poca programación donde tenemos código duro para llenar nuestra lista.

Para más información sobre el framework de CSS Materializecss pueden visitar su sition web oficial http://materializecss.com/

Nuestro index.html

Por el momento importamos materializecss desde los serividores de clouflare, agregamos un componente navbar, una colección de objetos que viene siendo una lista y por ultimo un footer.

listaAlumnosJSON.json

Tenemos nuestro código duro que es un archivo json externo.

Nuestro main.js

Nuestro archivo javascript no tiene nada relevante pues simplemente mandamos a llamar nuestro archivo JSON que tiene nuestros datos, esto lo iremos transformando hasta convertirlo en peticiones AJAX interactuando con algún archivo PHP

Nuestro main.css

En nuestro CSS tenemos estilos para darle forma al footer, a la fuente ya al final un estilo que se le da a la lista para que resalte nuestra flecha >

Descargar Código Fuente

Ver Ejemplo en Accion

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.