Estaremos construyendo también este proyecto en este curso.
Es una agenda de contactos.
Como desarrollador web es muy probable que te pidan proyectos de este tipo.
Es algo que se conoce como un crowd Croods es un acrónimo de crear leer actualizar y eliminar registros
en inglés.
Veamos cómo funciona este proyecto.
Puede ser que tenemos un formulario diseñado un contacto todos los campos son obligatorios si presionas
nada más añadir te aparece esta notificación.
Todos los campos son obligatorios.
Una notificación flotante aparece y después desaparece.
Aquí por ejemplo puedes colocar un nombre colocar el mío una empresa y cualquier número está bien si
damos clic en Añadir tenemos algo puedes ver que aparece esta notificación.
Contacto creado correctamente y desaparece y así como el formulario también se reinicia.
Este proyecto será hecho con Ayax.
Por lo tanto no hay necesidad de recargar la página con dar scroll hacia abajo.
Aquí aparece el nuevo contacto que acabamos de crear.
Aquí estamos mostrando los contactos también mostraremos cómo crear este buscador.
Por ejemplo si tienes muchos contactos muchos proveedores tal vez comienzas a realizar una búsqueda.
Puedes realizar este filtrado.
Como cuando elimino todo aparece ocho contactos pero cuando comienzo a filtrar aparece y este número
se actualiza automáticamente de la misma forma y volver hacia arriba y recargo.
Puedes ver que tengo ocho ocho contactos y si agrego aquí por ejemplo otro contacto a la hora de escribir
añadir este número se actualiza.
Todo esto es gracias a JavaScript y a Ayax que son tecnologías que te van a permitir aplicaciones web
más interactivas.
También podemos editar los registros.
Digamos que esta persona queremos cambiar su nombre damos clic aquí nos lleva al formulario para editarlo.
Si no quieres realizar ningún cambio nada más presionas volver y te lleva nuevamente el listado o puedes
cambiar el nombre o poner mi nombre.
Nuevamente doy clic en Guardar.
Vemos que hice contacto editado correctamente.
Después de un momento nos lleva automáticamente a la página principal y el contacto ha sido actualizado.
Entonces ya vimos cómo crear la operación de crear registros listar los actualizarlos pero también si
quieres eliminar un registro de digamos que quieres eliminar este das click aquí te pregunta si quieres
ser liminar.
Presionas ok y vemos que se ha desaparecido de esta parte y se contacta eliminado con una notificación
y puede ser que ya nada más tenemos ocho contactos.
Las herramientas que estaremos utilizando para este proyecto toda la parte visual está hecha con HTML5
y CSS3.
Estaremos utilizando Flex Box y CSS Grid.
Todo esto será responsivo si lo haces más pequeño puedes ver que se ve bastante bien.
Y vamos a hacerlo más grande la parte de inserción de los datos se realiza con PHP se almacenan en una
base de datos Maykel y la parte interactiva y de agregar por ejemplo nuevo contacto y que se cargue
sin necesidad de cargar la página es con JavaScript y con Ayax tecnologías lo bastante robustas y estables
para crear cualquier tipo de aplicación web.