En esto vamos a continuar trabajando con nuestro proyecto cada que estamos agregando nuevos registros.
La idea es que se vayan insertando en la parte inferior eso es algo de lo que hace Ayax que te permite
hacer una consulta a la base de datos sin necesidad de que la lo que es la ventana se recargue.
Vamos a ver cómo agregar los contactos a esta parte si recuerda sigue siendo HTML pero primero vamos
a ver cómo cómo mostrar el registro de los contactos que se van agregando.
Aquí puedes ver que utilizando la notación de punto podemos ir accediendo a los distintos datos que
vamos a poner un comentario que diga inserta un nuevo elemento a la tabla.
Todo esto lleva a venir de la respuesta que recibamos por medio de PHP.
Por lo tanto hay que poner const nuevo contacto y esto va a ser igual a document apuntó criadita element.
Vamos a crear un TR si recuerdas cada uno de estos registros que tenemos aquí abajo cada uno es un Terré
tenemos un CD y dentro de éste último tenemos un enlace y un botón.
Toda esa parte es importante que la reconstruyamos tal cual.
Utilizando javascript.
Esto nos crea un T.R voy a crear al menos tres de los distintos de los cuatro teiboleras que tenemos
aquí utilizando temple y strings los temples strings recuerda son la nueva forma de ir concatenando
es la parte de estar concatenando línea por línea y puedes tener un temple bastante grande y es una
forma de mezclar HTML con JavaScript.
Si ponemos nuevo contacto eso nos crea el T.R pero tenemos que agregar la parte de adentro y utilizar
HTML.
Comillas tienen que hacer este tipo de Comillas que son inclinadas hacia atrás para que funcione el
templates Streeck y que va a ponerte de te voy a colocar dentro lo que viene siendo la respuesta.
Si recuerdas aquí todas las respuestas vienen datos.
Principalmente tenemos respuesta y luego datos ya podríamos acceder a cada uno de estos valores ponemos
aquí sino R$ llaves así es como accedes a la parte de llaves que puedes ver que tenemos como HTML.
Esta parte de la llave signo de dólares llaves le dice que este código JavaScript respuesta apuntó datos
punto nombres sería el primero sería este aquí entonces.
Respuesta datos nombre iba a crear dos copias más.
El segundo es empresa su empresa y el tercero es el teléfono muy importante que sigas el orden que está
aquí porque en este orden que lo estás creando aquí es como se van a insertar acá entonces nombre empresa
y teléfono nombre y teléfono.
Eso nos va a crear los tres.
Lo anterior no lo coloqué aquí porque voy a crearlo.
O mejor dicho tiene incluso botones a crear un contenedor para los botones.
Este viene siendo Conce que va para el contenedor acciones igual al document punto criadita Element
que iba a ser el tipo de entonces creo los otros que no tienen nada más que texto pero este otro sí
voy a utilizar un poco más de scripting nos crea el TD que vendría siendo este último el que tienen
los enlaces y este enlace por ejemplo tiene lo que viene siendo Helí es bastante escríbele el que vamos
a estar escribiendo a continuación crear el ícono de editar y aquí va a poner Conce ícono editar igualas
document punto criadita Element ya no se quedaron ni la etiqueta ahí y vamos a poner el ícono editar
puntuó Class Licio junto a puede ser que este ícono de editar tiene dos clases faz y faz a Escuer con
el primero y lo Koma y el segundo entonces agregamos las dos clases y está dentro de una.
Tenemos que crear avara ESEA crea el enlace para editar cons bete en editar lo voy a nombrar document
punto create element.
Y es que vamos a utilizar Bestene editar junto a Paint Jael lo que es el icono editar entonces va a
crear el ícono de editar con esta clase y después creamos una y le agregamos como hijo y con editar.
Por lo tanto queda dentro como si estuviera aquí.
Entonces aquí voy a continuar.
De hecho puedes copiar este código por ejemplo y pegarlo en la consola
y después con ese icono editar y te va a esta con editar MTM editar y Tyria apareciendo como va construyendo
más o menos esto es lo que llevamos los enlaces y dentro con las clases pero si colocamos el chat este
es nada por lo tanto podemos poner en editar punto HR-V y de nueva cuenta utilizando templetes strings
podemos colocar aquí editar punto PHP Heydi igual a y aquí agregamos el Heydi el Heydi que viene cantarás
aquí en añadir que en datos nos está retornando el Live insertado entonces vamos a colocar ese y punto
datos punto y de insertado por eso es que en la respuesta que acabamos de construir hemos colocado el
inserta Artadi para que cuando alguien crea un nuevo registro Presione aquí y lo lleve a la opción de
editar entonces si vemos lo que es el botón de Editar todavía nos hace falta agregar esta clases de
veten editar y votan Podemos veten editar punto Class Liset punto a veten Koma y Bestene editar de esa
forma tener todo lo que vienen siendo los botones anteriormente habíamos creado el contenedor de acciones
por lo tanto la vamos a agregar una vez agregarlo al padre contenedor acciones APEM Jael el botón de
Editar.
Por lo tanto creamos Helí y Elisha agrega su padre que venía haciéndola y después se las agrega a su
padre que vendría siendo el TD nos hace falta el botón de eliminar.
Crear el icono de Limina va a ser muy similar a este código que esté arriba por lo tanto lo va a copiar
y que en lugar de editar va a decir icono borrar eliminar va crear también y su clase va a ser diferente
si recuerdas aquí es esta clase de aquí.
F.A tras Alt y FASP también se mantiene eso crea lo que viene siendo mi si no estás muy seguro de qué
hace este código.
Bueno recuerda que el capítulo de scripting sea limpiar aquí y no eliminar y puede ser que me crean
y que crea un elemento nuevo con JavaScript y las clases lo añaden aquí y finalmente me hace falta crear
lo que viene siendo el botón Crear el botón de eliminar
eliminar
este botón de eliminar es un botón que vamos a ponerle const veten eliminar igualas document to create
element.
Esto es siempre son iguales a los elementos HTML que va a crear un botón y primero agregarle el icono
de eliminar como su hijo Choir y eliminar
de nueva cuenta si copias todo este código.
A recargar y veten eliminar te crea un botón con el hijo de Eli estamos agregando el hijo ahí y si recuerdas
también cada uno de estos botones tiene andara iría un atributo que estamos creando que nos va a permitir
después que cuando hacemos clic en Eliminar tomar ese aire y poder eliminar de la base de datos veten
eliminar y poner a atributo para que me agregue ese atributo dará Heydi Koma y este viene de respuesta
punto Heydi.
En respuesta a punto datos Airy insertaba es diferente lo que viene siendo este templo de string que
está aquí a éste porque estás mezclando un poco lo que viene siendo el HTML con JavaScript en este caso.
Por lo tanto no requiere ni estas comillas ni tampoco las llaves ni el signo de dólar eso lo va a crear
lo que viene siendo Leydi y vamos a darle espacio también tiene estas clases veten borrar y veten.
Estas clases nos van a servir como Liz Enersur un poco más adelante por lo tanto agregarlas aquí to
class leads to add MTN Koma between borrar dos clases y el último que nos falta es agregarlo el padre
que ya habíamos agregado anteriormente al padre lo que era el botón de Editar de la misma forma tenemos
que agregar este botón Eliminar Hideaki aquí y este es el padre lo que viene siendo el té de lo que
creamos anteriormente pero ese también debe de agregarse al nuevo contacto si recuerdas habíamos creado
3.
Los otros nos hicimos con el scripting tiene muchas ventajas sólo con scripting primeiros más rápido.
Segundo la parte de la seguridad y sanity sanciones hechas automáticamente.
Por eso es que se hace de esta forma ponerla aquí también.
Agregarlo al R y aquí serían nuevos contactos si recuerdas nuevo contacto contiene todo el TR aquí con
estos tres y todo lo demás ya está agregado aquí nuevo contacto Appen Chile y aquí vamos a poner con
acciones que sería el TD.
Esto ya crea lo que viene siendo un nuevo contacto con los 4th así como los botones pero el scroll hacia
arriba y esquivo a crear una nueva variable en las como para no escribir Const.
Nuevamente hay que poner el listado contactos va a ser igual al document .4 y selector y si recuerdas
también le habíamos dado una clase a todo este listado que tenemos listado de contactos y voy a seleccionar
luego el The Body expondremos aquí Heydi listado de contactos espacio te voy ya tengo el listado de
contactos scroll hacia abajo y ahí es donde vamos a colocar el nuevo elemento que acabamos de crear
el nuevo registro se pone aquí agregarlo con los contactos y ponemos lista de contactos y de nueva cuenta
pincha él y ponemos el nuevo contacto.
Ya tiene todo el té el té con los 4 de los iconos de borrar y editar voy a guardar cambios aquí a recargar
puede ser que de momento tenemos tres registros únicamente que son los que hemos colocado con código
estático están aquí en esta parte voy a crear un nuevo registro un 2 3 nada más añadir y vemos que hemos
recreado totalmente esta apariencia y cada vez que le dé a agregar van a ir agregando nuevos registros
en la parte inferior y de esa forma evitamos estar recargando la página y esa es una de las características
principales de Ayax ahora dos cosas primero cuando hay que añadir se agrega que abajo me gustaría utilizar
mi nueva función que creamos anteriormente de notificaciones que apareciera aquí.
Y segundo si me gustaría agregar nuevos datos pues este formulario lo ideal es que se reinicie.
Quiero mostrarte algo que va a poner mi nombre a añadir y si abrimos lo que son los registros de quién
examinar el que vienen muchos uno dos 3 pero aquí abajo aparece el nuevo.
Por lo tanto está funcionando perfectamente insertando en la base datos insertando en el DOM de nuestra
página.
Faltan algunas cosas por ejemplo la parte de resetear el formulario por aquí un comentario resetear
el Forum y también mostrar la notificación lo que nos haría falta para finalizar esta parte.
Primero la notificación si recuerdas notificación toma dos parámetros mensaje y la clase que habíamos
creado a la clase anteriormente se llama correcto en la que se va a mostrar en color verde.
Entonces vamos a mostrar la notificación aquí poner mostrar notificación primero toma el mensaje de
contacto creado correctamente y después la clase que dice correcto guardamos cambios y recargamos un
dos tres añadir y vemos que ese contacto creado correctamente y desaparece por lo tanto gracias a este
parámetro de mensaje y de clase tenemos ya una notificación que podemos reutilizar para mostrar distintos
mensajes ya sea correcto o incorrecto.
Aparte de resetear el formulario es lo que nos falta.
Por lo tanto aquí ponemos document y selector nada más quiero retornar un formulario form y un método
que existe en JavaScript para resetear un formulario esputo reset loscambios y recargamos
añadir aparece en mi notificación y también lo que viene siendo el formulario se reinicia.
Anteriormente habíamos creado varios registros puedes ver que nada más tengo uno cada vez que recargas
esos registros se van a perder porque solamente estamos utilizando scripting para añadirlos es necesario
crear aquí en lo que viene siendo blindex eliminar todo este código estático y escribir una función
de PHP que realiza una consulta a la base de datos si el usuario agrega nuevos contactos se van a agregar
aquí pero si recargan ahora la consulta la base de datos y los mostrará aquí puede parecerse como doble
trabajo pero es lo que hace a Ayax una herramienta más interactiva.
Así que en el próximo video vamos a eliminar todo este código estático que está aquí y vamos a agregar
una función de PHP y código PHP que realiza una consulta la base de datos y se traga estos registros.