1
00:00:00,490 --> 00:00:06,770
En esto vamos a continuar trabajando con nuestro proyecto cada que estamos agregando nuevos registros.

2
00:00:06,770 --> 00:00:11,510
La idea es que se vayan insertando en la parte inferior eso es algo de lo que hace Ayax que te permite

3
00:00:12,710 --> 00:00:18,080
hacer una consulta a la base de datos sin necesidad de que la lo que es la ventana se recargue.

4
00:00:18,770 --> 00:00:24,020
Vamos a ver cómo agregar los contactos a esta parte si recuerda sigue siendo HTML pero primero vamos

5
00:00:24,020 --> 00:00:29,630
a ver cómo cómo mostrar el registro de los contactos que se van agregando.

6
00:00:29,750 --> 00:00:36,220
Aquí puedes ver que utilizando la notación de punto podemos ir accediendo a los distintos datos que

7
00:00:36,230 --> 00:00:42,570
vamos a poner un comentario que diga inserta un nuevo elemento a la tabla.

8
00:00:42,590 --> 00:00:46,430
Todo esto lleva a venir de la respuesta que recibamos por medio de PHP.

9
00:00:46,430 --> 00:00:53,030
Por lo tanto hay que poner const nuevo contacto y esto va a ser igual a document apuntó criadita element.

10
00:00:53,030 --> 00:00:59,390
Vamos a crear un TR si recuerdas cada uno de estos registros que tenemos aquí abajo cada uno es un Terré

11
00:00:59,900 --> 00:01:04,710
tenemos un CD y dentro de éste último tenemos un enlace y un botón.

12
00:01:04,840 --> 00:01:09,520
Toda esa parte es importante que la reconstruyamos tal cual.

13
00:01:09,650 --> 00:01:11,260
Utilizando javascript.

14
00:01:11,270 --> 00:01:17,990
Esto nos crea un T.R voy a crear al menos tres de los distintos de los cuatro teiboleras que tenemos

15
00:01:17,990 --> 00:01:25,550
aquí utilizando temple y strings los temples strings recuerda son la nueva forma de ir concatenando

16
00:01:25,750 --> 00:01:31,670
es la parte de estar concatenando línea por línea y puedes tener un temple bastante grande y es una

17
00:01:31,670 --> 00:01:35,960
forma de mezclar HTML con JavaScript.

18
00:01:35,950 --> 00:01:41,210
Si ponemos nuevo contacto eso nos crea el T.R pero tenemos que agregar la parte de adentro y utilizar

19
00:01:41,450 --> 00:01:42,950
HTML.

20
00:01:43,250 --> 00:01:48,500
Comillas tienen que hacer este tipo de Comillas que son inclinadas hacia atrás para que funcione el

21
00:01:48,500 --> 00:01:59,090
templates Streeck y que va a ponerte de te voy a colocar dentro lo que viene siendo la respuesta.

22
00:01:59,160 --> 00:02:03,030
Si recuerdas aquí todas las respuestas vienen datos.

23
00:02:03,030 --> 00:02:10,160
Principalmente tenemos respuesta y luego datos ya podríamos acceder a cada uno de estos valores ponemos

24
00:02:10,320 --> 00:02:17,950
aquí sino R$ llaves así es como accedes a la parte de llaves que puedes ver que tenemos como HTML.

25
00:02:18,030 --> 00:02:25,660
Esta parte de la llave signo de dólares llaves le dice que este código JavaScript respuesta apuntó datos

26
00:02:25,660 --> 00:02:30,140
punto nombres sería el primero sería este aquí entonces.

27
00:02:30,160 --> 00:02:37,090
Respuesta datos nombre iba a crear dos copias más.

28
00:02:37,300 --> 00:02:47,500
El segundo es empresa su empresa y el tercero es el teléfono muy importante que sigas el orden que está

29
00:02:47,500 --> 00:02:52,480
aquí porque en este orden que lo estás creando aquí es como se van a insertar acá entonces nombre empresa

30
00:02:52,480 --> 00:02:54,730
y teléfono nombre y teléfono.

31
00:02:54,730 --> 00:02:56,680
Eso nos va a crear los tres.

32
00:02:56,680 --> 00:02:59,980
Lo anterior no lo coloqué aquí porque voy a crearlo.

33
00:02:59,980 --> 00:03:07,700
O mejor dicho tiene incluso botones a crear un contenedor para los botones.

34
00:03:07,710 --> 00:03:15,030
Este viene siendo Conce que va para el contenedor acciones igual al document punto criadita Element

35
00:03:15,330 --> 00:03:21,640
que iba a ser el tipo de entonces creo los otros que no tienen nada más que texto pero este otro sí

36
00:03:21,640 --> 00:03:29,530
voy a utilizar un poco más de scripting nos crea el TD que vendría siendo este último el que tienen

37
00:03:29,530 --> 00:03:36,310
los enlaces y este enlace por ejemplo tiene lo que viene siendo Helí es bastante escríbele el que vamos

38
00:03:36,310 --> 00:03:46,370
a estar escribiendo a continuación crear el ícono de editar y aquí va a poner Conce ícono editar igualas

39
00:03:46,390 --> 00:03:55,230
document punto criadita Element ya no se quedaron ni la etiqueta ahí y vamos a poner el ícono editar

40
00:03:55,430 --> 00:04:07,860
puntuó Class Licio junto a puede ser que este ícono de editar tiene dos clases faz y faz a Escuer con

41
00:04:07,980 --> 00:04:17,470
el primero y lo Koma y el segundo entonces agregamos las dos clases y está dentro de una.

42
00:04:17,470 --> 00:04:29,210
Tenemos que crear avara ESEA crea el enlace para editar cons bete en editar lo voy a nombrar document

43
00:04:29,210 --> 00:04:32,040
punto create element.

44
00:04:32,950 --> 00:04:42,320
Y es que vamos a utilizar Bestene editar junto a Paint Jael lo que es el icono editar entonces va a

45
00:04:42,320 --> 00:04:48,940
crear el ícono de editar con esta clase y después creamos una y le agregamos como hijo y con editar.

46
00:04:48,950 --> 00:04:50,930
Por lo tanto queda dentro como si estuviera aquí.

47
00:04:52,760 --> 00:04:55,010
Entonces aquí voy a continuar.

48
00:04:55,020 --> 00:04:59,850
De hecho puedes copiar este código por ejemplo y pegarlo en la consola

49
00:05:03,730 --> 00:05:14,170
y después con ese icono editar y te va a esta con editar MTM editar y Tyria apareciendo como va construyendo

50
00:05:14,170 --> 00:05:24,020
más o menos esto es lo que llevamos los enlaces y dentro con las clases pero si colocamos el chat este

51
00:05:24,080 --> 00:05:31,030
es nada por lo tanto podemos poner en editar punto HR-V y de nueva cuenta utilizando templetes strings

52
00:05:31,970 --> 00:05:43,010
podemos colocar aquí editar punto PHP Heydi igual a y aquí agregamos el Heydi el Heydi que viene cantarás

53
00:05:43,010 --> 00:05:51,690
aquí en añadir que en datos nos está retornando el Live insertado entonces vamos a colocar ese y punto

54
00:05:52,170 --> 00:05:58,810
datos punto y de insertado por eso es que en la respuesta que acabamos de construir hemos colocado el

55
00:05:58,810 --> 00:06:04,500
inserta Artadi para que cuando alguien crea un nuevo registro Presione aquí y lo lleve a la opción de

56
00:06:04,590 --> 00:06:12,970
editar entonces si vemos lo que es el botón de Editar todavía nos hace falta agregar esta clases de

57
00:06:13,270 --> 00:06:25,760
veten editar y votan Podemos veten editar punto Class Liset punto a veten Koma y Bestene editar de esa

58
00:06:25,760 --> 00:06:31,430
forma tener todo lo que vienen siendo los botones anteriormente habíamos creado el contenedor de acciones

59
00:06:31,460 --> 00:06:41,020
por lo tanto la vamos a agregar una vez agregarlo al padre contenedor acciones APEM Jael el botón de

60
00:06:41,020 --> 00:06:41,640
Editar.

61
00:06:41,680 --> 00:06:47,530
Por lo tanto creamos Helí y Elisha agrega su padre que venía haciéndola y después se las agrega a su

62
00:06:47,530 --> 00:06:52,410
padre que vendría siendo el TD nos hace falta el botón de eliminar.

63
00:06:52,410 --> 00:06:58,760
Crear el icono de Limina va a ser muy similar a este código que esté arriba por lo tanto lo va a copiar

64
00:06:59,950 --> 00:07:09,020
y que en lugar de editar va a decir icono borrar eliminar va crear también y su clase va a ser diferente

65
00:07:09,030 --> 00:07:12,700
si recuerdas aquí es esta clase de aquí.

66
00:07:16,070 --> 00:07:26,230
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é

67
00:07:26,230 --> 00:07:27,230
hace este código.

68
00:07:27,250 --> 00:07:36,420
Bueno recuerda que el capítulo de scripting sea limpiar aquí y no eliminar y puede ser que me crean

69
00:07:36,470 --> 00:07:46,210
y que crea un elemento nuevo con JavaScript y las clases lo añaden aquí y finalmente me hace falta crear

70
00:07:46,480 --> 00:07:50,500
lo que viene siendo el botón Crear el botón de eliminar

71
00:07:53,490 --> 00:07:54,450
eliminar

72
00:07:57,090 --> 00:08:08,420
este botón de eliminar es un botón que vamos a ponerle const veten eliminar igualas document to create

73
00:08:08,540 --> 00:08:09,200
element.

74
00:08:09,200 --> 00:08:16,630
Esto es siempre son iguales a los elementos HTML que va a crear un botón y primero agregarle el icono

75
00:08:16,630 --> 00:08:22,260
de eliminar como su hijo Choir y eliminar

76
00:08:25,080 --> 00:08:26,900
de nueva cuenta si copias todo este código.

77
00:08:30,560 --> 00:08:43,960
A recargar y veten eliminar te crea un botón con el hijo de Eli estamos agregando el hijo ahí y si recuerdas

78
00:08:43,960 --> 00:08:50,700
también cada uno de estos botones tiene andara iría un atributo que estamos creando que nos va a permitir

79
00:08:50,700 --> 00:08:57,190
después que cuando hacemos clic en Eliminar tomar ese aire y poder eliminar de la base de datos veten

80
00:08:57,210 --> 00:09:07,010
eliminar y poner a atributo para que me agregue ese atributo dará Heydi Koma y este viene de respuesta

81
00:09:07,020 --> 00:09:08,440
punto Heydi.

82
00:09:08,510 --> 00:09:14,400
En respuesta a punto datos Airy insertaba es diferente lo que viene siendo este templo de string que

83
00:09:14,400 --> 00:09:21,150
está aquí a éste porque estás mezclando un poco lo que viene siendo el HTML con JavaScript en este caso.

84
00:09:21,180 --> 00:09:29,940
Por lo tanto no requiere ni estas comillas ni tampoco las llaves ni el signo de dólar eso lo va a crear

85
00:09:29,940 --> 00:09:37,980
lo que viene siendo Leydi y vamos a darle espacio también tiene estas clases veten borrar y veten.

86
00:09:38,270 --> 00:09:44,480
Estas clases nos van a servir como Liz Enersur un poco más adelante por lo tanto agregarlas aquí to

87
00:09:44,780 --> 00:09:57,110
class leads to add MTN Koma between borrar dos clases y el último que nos falta es agregarlo el padre

88
00:09:58,620 --> 00:10:03,250
que ya habíamos agregado anteriormente al padre lo que era el botón de Editar de la misma forma tenemos

89
00:10:03,250 --> 00:10:12,350
que agregar este botón Eliminar Hideaki aquí y este es el padre lo que viene siendo el té de lo que

90
00:10:12,360 --> 00:10:18,840
creamos anteriormente pero ese también debe de agregarse al nuevo contacto si recuerdas habíamos creado

91
00:10:18,840 --> 00:10:19,160
3.

92
00:10:19,170 --> 00:10:24,950
Los otros nos hicimos con el scripting tiene muchas ventajas sólo con scripting primeiros más rápido.

93
00:10:24,960 --> 00:10:29,450
Segundo la parte de la seguridad y sanity sanciones hechas automáticamente.

94
00:10:29,700 --> 00:10:34,760
Por eso es que se hace de esta forma ponerla aquí también.

95
00:10:34,990 --> 00:10:43,890
Agregarlo al R y aquí serían nuevos contactos si recuerdas nuevo contacto contiene todo el TR aquí con

96
00:10:43,900 --> 00:10:53,540
estos tres y todo lo demás ya está agregado aquí nuevo contacto Appen Chile y aquí vamos a poner con

97
00:10:53,730 --> 00:10:56,840
acciones que sería el TD.

98
00:10:56,940 --> 00:11:04,440
Esto ya crea lo que viene siendo un nuevo contacto con los 4th así como los botones pero el scroll hacia

99
00:11:04,440 --> 00:11:08,920
arriba y esquivo a crear una nueva variable en las como para no escribir Const.

100
00:11:08,950 --> 00:11:18,350
Nuevamente hay que poner el listado contactos va a ser igual al document .4 y selector y si recuerdas

101
00:11:18,360 --> 00:11:25,620
también le habíamos dado una clase a todo este listado que tenemos listado de contactos y voy a seleccionar

102
00:11:25,710 --> 00:11:36,060
luego el The Body expondremos aquí Heydi listado de contactos espacio te voy ya tengo el listado de

103
00:11:36,060 --> 00:11:41,040
contactos scroll hacia abajo y ahí es donde vamos a colocar el nuevo elemento que acabamos de crear

104
00:11:41,370 --> 00:11:51,140
el nuevo registro se pone aquí agregarlo con los contactos y ponemos lista de contactos y de nueva cuenta

105
00:11:51,170 --> 00:11:54,500
pincha él y ponemos el nuevo contacto.

106
00:11:54,530 --> 00:12:05,370
Ya tiene todo el té el té con los 4 de los iconos de borrar y editar voy a guardar cambios aquí a recargar

107
00:12:05,800 --> 00:12:10,320
puede ser que de momento tenemos tres registros únicamente que son los que hemos colocado con código

108
00:12:10,320 --> 00:12:17,820
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

109
00:12:17,820 --> 00:12:23,910
recreado totalmente esta apariencia y cada vez que le dé a agregar van a ir agregando nuevos registros

110
00:12:23,910 --> 00:12:29,790
en la parte inferior y de esa forma evitamos estar recargando la página y esa es una de las características

111
00:12:29,790 --> 00:12:37,410
principales de Ayax ahora dos cosas primero cuando hay que añadir se agrega que abajo me gustaría utilizar

112
00:12:37,410 --> 00:12:42,080
mi nueva función que creamos anteriormente de notificaciones que apareciera aquí.

113
00:12:42,360 --> 00:12:46,740
Y segundo si me gustaría agregar nuevos datos pues este formulario lo ideal es que se reinicie.

114
00:12:47,160 --> 00:12:52,820
Quiero mostrarte algo que va a poner mi nombre a añadir y si abrimos lo que son los registros de quién

115
00:12:52,830 --> 00:12:57,240
examinar el que vienen muchos uno dos 3 pero aquí abajo aparece el nuevo.

116
00:12:57,240 --> 00:13:03,900
Por lo tanto está funcionando perfectamente insertando en la base datos insertando en el DOM de nuestra

117
00:13:03,900 --> 00:13:04,930
página.

118
00:13:05,280 --> 00:13:14,700
Faltan algunas cosas por ejemplo la parte de resetear el formulario por aquí un comentario resetear

119
00:13:14,700 --> 00:13:23,540
el Forum y también mostrar la notificación lo que nos haría falta para finalizar esta parte.

120
00:13:23,590 --> 00:13:29,440
Primero la notificación si recuerdas notificación toma dos parámetros mensaje y la clase que habíamos

121
00:13:29,440 --> 00:13:33,800
creado a la clase anteriormente se llama correcto en la que se va a mostrar en color verde.

122
00:13:34,090 --> 00:13:43,010
Entonces vamos a mostrar la notificación aquí poner mostrar notificación primero toma el mensaje de

123
00:13:43,150 --> 00:13:52,840
contacto creado correctamente y después la clase que dice correcto guardamos cambios y recargamos un

124
00:13:52,840 --> 00:13:59,770
dos tres añadir y vemos que ese contacto creado correctamente y desaparece por lo tanto gracias a este

125
00:14:00,130 --> 00:14:06,580
parámetro de mensaje y de clase tenemos ya una notificación que podemos reutilizar para mostrar distintos

126
00:14:06,580 --> 00:14:09,630
mensajes ya sea correcto o incorrecto.

127
00:14:09,780 --> 00:14:11,710
Aparte de resetear el formulario es lo que nos falta.

128
00:14:11,710 --> 00:14:19,090
Por lo tanto aquí ponemos document y selector nada más quiero retornar un formulario form y un método

129
00:14:19,090 --> 00:14:25,330
que existe en JavaScript para resetear un formulario esputo reset loscambios y recargamos

130
00:14:27,770 --> 00:14:34,130
añadir aparece en mi notificación y también lo que viene siendo el formulario se reinicia.

131
00:14:34,130 --> 00:14:39,040
Anteriormente habíamos creado varios registros puedes ver que nada más tengo uno cada vez que recargas

132
00:14:39,070 --> 00:14:45,950
esos registros se van a perder porque solamente estamos utilizando scripting para añadirlos es necesario

133
00:14:45,950 --> 00:14:51,950
crear aquí en lo que viene siendo blindex eliminar todo este código estático y escribir una función

134
00:14:51,950 --> 00:14:57,290
de PHP que realiza una consulta a la base de datos si el usuario agrega nuevos contactos se van a agregar

135
00:14:57,290 --> 00:15:03,830
aquí pero si recargan ahora la consulta la base de datos y los mostrará aquí puede parecerse como doble

136
00:15:03,830 --> 00:15:08,350
trabajo pero es lo que hace a Ayax una herramienta más interactiva.

137
00:15:08,540 --> 00:15:13,670
Así que en el próximo video vamos a eliminar todo este código estático que está aquí y vamos a agregar

138
00:15:13,670 --> 00:15:20,060
una función de PHP y código PHP que realiza una consulta la base de datos y se traga estos registros.