1
00:00:00,240 --> 00:00:00,840
Continuemos.

2
00:00:00,900 --> 00:00:06,060
Vamos a ver manejo formulario, pero vamos a crear un nuevo proyecto, lo vamos a manejar de forma separada,

3
00:00:06,150 --> 00:00:09,200
pero antes tenemos que respaldar algo del pomme kml.

4
00:00:09,390 --> 00:00:13,410
Entonces nos vamos a ir el POM para no tener que ser todo nuevo por acá.

5
00:00:13,650 --> 00:00:16,020
Vamos a copiar los plugins de acá.

6
00:00:16,110 --> 00:00:19,270
Entonces los seleccionamos, lo copiamos PLAYING y T.M.

7
00:00:19,290 --> 00:00:24,720
La dependencia que tenemos, la dependencia, dependencias, copiamos todo eso y lo vamos a respaldar.

8
00:00:24,750 --> 00:00:30,060
Vamos a crear un live template y vamos a crear nuestro atajo de Maven con esta dependencia.

9
00:00:30,210 --> 00:00:31,200
Así ahorramos tiempo.

10
00:00:31,260 --> 00:00:35,130
Entonces nos vamos a ir al control ese editor.

11
00:00:36,300 --> 00:00:37,770
Por qué buscamos light templetes?

12
00:00:37,950 --> 00:00:38,490
Perfecto.

13
00:00:39,150 --> 00:00:39,780
Acá hay varios.

14
00:00:39,840 --> 00:00:47,280
Buscamos Maven acá Teoman, desplegamos, seleccionamos Maven y agregamos uno nuevo Lipe Template acá.

15
00:00:47,700 --> 00:00:48,630
Perfecto.

16
00:00:48,720 --> 00:00:54,330
Le vamos a llamar a este snippets yaba e MBN de Maven.

17
00:00:54,420 --> 00:00:58,950
Entonces ya e mbn acá pegamos tal cual.

18
00:00:59,430 --> 00:01:00,300
Todo lo que plugins.

19
00:01:00,390 --> 00:01:07,350
Por lo tanto, desde que se cierra todo lo plugins que tenemos hasta que se abre con el build dependencias.

20
00:01:07,470 --> 00:01:08,010
En efecto.

21
00:01:08,010 --> 00:01:08,330
Esto.

22
00:01:09,030 --> 00:01:14,330
Parece que faltó el builds a ver gratinado build satisfactor build.

23
00:01:14,490 --> 00:01:20,520
Entonces vamos a bajar de casa ramos vuelta y cerramos.

24
00:01:20,610 --> 00:01:22,720
Qué faltaría aplicable.

25
00:01:23,130 --> 00:01:24,840
Definir seleccionamos maven.

26
00:01:25,680 --> 00:01:29,010
Listamos listo sin variable ok.

27
00:01:29,160 --> 00:01:30,360
Aplicábamos ok.

28
00:01:30,660 --> 00:01:33,300
Ahora podemos cerrar este proyecto tranquilamente.

29
00:01:33,660 --> 00:01:34,530
Lo cerramos.

30
00:01:36,050 --> 00:01:38,630
Vamos a crear un nuevo proyecto New Project.

31
00:01:41,170 --> 00:01:49,210
Siguiente le vamos a llamar Web App Form en el artefacto por acá

32
00:01:53,080 --> 00:01:57,880
web app form a pixel de punto web, app punto for y todo lo demás lo dejamos como está.

33
00:01:58,010 --> 00:02:00,310
Web Alfom el arte y fak finalizar.

34
00:02:02,610 --> 00:02:03,420
Tengo proyecto.

35
00:02:03,630 --> 00:02:04,530
Acá estamos en Maven.

36
00:02:04,650 --> 00:02:06,720
Vamos a escribir y ya va.

37
00:02:06,900 --> 00:02:08,010
Eh, eh, MBN.

38
00:02:08,100 --> 00:02:08,820
Ahí lo tenemos.

39
00:02:08,880 --> 00:02:10,530
Con Tab auto completamos.

40
00:02:10,600 --> 00:02:11,250
Ya tenemos todo.

41
00:02:11,340 --> 00:02:13,050
Se fijan mucho más simple.

42
00:02:13,440 --> 00:02:17,400
Podríamos organizar al control l ordenamos un poco.

43
00:02:17,490 --> 00:02:18,600
Bueno, quedó todo bien.

44
00:02:19,770 --> 00:02:20,460
Estamos listos.

45
00:02:20,580 --> 00:02:24,720
Acá actualizamos los cambios de Maven y comenzamos.

46
00:02:25,440 --> 00:02:29,490
Vamos a tener acá en ese reze Main y dentro de Main.

47
00:02:29,550 --> 00:02:31,280
Vamos a crear la carpeta центр.

48
00:02:31,590 --> 00:02:35,660
Entonces, como siempre, ok.

49
00:02:35,910 --> 00:02:38,730
Ya que van a estar en nuestra plantilla, podemos crear el index.

50
00:02:38,820 --> 00:02:42,330
HTML lo mismo html index.

51
00:02:43,950 --> 00:02:46,590
Entonces vamos a partir con un formulario de usuarios.

52
00:02:50,220 --> 00:02:51,810
Vamos a seleccionar todo acá.

53
00:02:51,900 --> 00:02:52,770
Lo copiamos.

54
00:02:52,890 --> 00:02:53,550
Bajamos.

55
00:02:53,670 --> 00:02:58,380
Vamos a tener un H3 y pegamos un título.

56
00:02:58,440 --> 00:02:59,910
Formulario de usuarios.

57
00:03:00,060 --> 00:03:00,990
En realidad formulario.

58
00:03:01,740 --> 00:03:02,760
Vamos a quitarle la s.

59
00:03:03,210 --> 00:03:06,990
Acá también bajamos y comenzamos.

60
00:03:07,440 --> 00:03:10,050
Lo primero vamos a partir con la vista, con la plantilla.

61
00:03:10,140 --> 00:03:13,980
Después vamos a implementar el SALDE, que va a ser el controlador que va a recibir los parámetros del

62
00:03:13,980 --> 00:03:14,370
usuario.

63
00:03:14,460 --> 00:03:20,730
Vamos a implementar el post en ese caso para poder procesar todos estos input de entrada que supuestamente

64
00:03:20,730 --> 00:03:21,750
va a llenar el usuario.

65
00:03:21,930 --> 00:03:25,770
Los campos en HTML un formulario comienza con la etiqueta form.

66
00:03:25,920 --> 00:03:27,350
Entonces vamos a escribir acá form.

67
00:03:28,500 --> 00:03:31,500
Vamos a cerrar y el formulario tiene etiquetas.

68
00:03:31,530 --> 00:03:33,000
Por ejemplo, el action.

69
00:03:33,240 --> 00:03:38,850
El H1 es muy importante porque es donde se va a ir el formulario, a qué ruta o cuál va a ser el target

70
00:03:38,940 --> 00:03:40,140
que va a recibir estos datos.

71
00:03:40,230 --> 00:03:46,050
Bueno, supuestamente acá tiene que ir la ruta Aurelie Qué tema piada el select que iba a procesar estos

72
00:03:46,050 --> 00:03:46,440
datos.

73
00:03:46,620 --> 00:03:54,750
Entonces bueno, primero tengo que colocar el nombre proyecto web app form latch, le vamos a colocar

74
00:03:54,840 --> 00:03:58,140
registro, por ejemplo registro usuario.

75
00:03:58,500 --> 00:04:00,960
Lo siguiente tenemos que indicar el método.

76
00:04:01,140 --> 00:04:04,230
Acá tenemos el atributo Method Post Hoggett.

77
00:04:04,380 --> 00:04:04,920
Se fijan?

78
00:04:05,040 --> 00:04:11,130
Vamos a enviar mediante el post de que la idea enviar por detrás ocultar los parámetros del request,

79
00:04:11,220 --> 00:04:16,530
porque si colocamos GET, los datos de formulario se van a enviar en la ruta °l y le diré que se envíe

80
00:04:16,620 --> 00:04:19,710
en el cuerpo el mensaje que no sea visible si lo hiciéramos.

81
00:04:19,710 --> 00:04:21,300
Post perfecto.

82
00:04:21,590 --> 00:04:23,810
De todas formas, después vamos a saber un poco la diferencia.

83
00:04:23,820 --> 00:04:25,080
Qué pasa si cambiamos de post?

84
00:04:25,140 --> 00:04:31,530
Hallet Cómo se visualizan estos parámetros en la ruta Burela y podríamos tener datos sensibles de formulario

85
00:04:31,530 --> 00:04:32,670
que no queremos que se muestren.

86
00:04:32,820 --> 00:04:35,870
Entonces por eso mucho mejor en este caso utilizar post.

87
00:04:36,030 --> 00:04:41,130
Además que mediante post podemos enviar mucho más caracteres e información en el recuesto, mientras

88
00:04:41,130 --> 00:04:43,800
que cuando enviemos mediante ruta °l tiene un límite.

89
00:04:44,130 --> 00:04:49,500
Bien, los siguientes serán los campos, pero estos campos tienen que ir dentro de algún tipo de elemento

90
00:04:49,620 --> 00:04:53,850
HTML, algún tipo layout para que después lo podamos maquetar de alguna forma.

91
00:04:53,940 --> 00:04:59,610
Dar un diseño puede ser una tabla o también pueden ser contenedores div y después a los div les podemos

92
00:04:59,610 --> 00:05:03,820
dar estilos CSS, por ejemplo utilizando el framework de vostra.

93
00:05:04,050 --> 00:05:05,790
Por ahora vamos a tener el div.

94
00:05:07,080 --> 00:05:12,900
Bueno, de hecho el interesting tree, un plugin que yo puedo escribir acá sin colocar el menor o también

95
00:05:12,900 --> 00:05:18,420
conocido como corchete triangulares el mayor y menor para la etiqueta sin colocar eso simplemente cribo

96
00:05:18,510 --> 00:05:27,540
y con tab me completa por ejemplo div tab autocompletar ya dentro del div vamos a tener un label lo

97
00:05:27,540 --> 00:05:31,860
mismo acá de forma automática nos indica un atributo for.

98
00:05:31,950 --> 00:05:33,810
Después lo vamos a ver más en detalle para qué sirven?

99
00:05:33,870 --> 00:05:35,760
Pero por ahora lo dejamos así, tal cual.

100
00:05:35,820 --> 00:05:38,470
Vamos a bajar y vamos a tener un input.

101
00:05:38,850 --> 00:05:42,000
Entonces input cerramos.

102
00:05:42,180 --> 00:05:50,280
Aunque también lo podría escribir de esta forma input tab y forma automática genera el campo, el elemento,

103
00:05:50,280 --> 00:05:51,570
el input del tipo texto.

104
00:05:51,600 --> 00:05:57,660
Por defecto vamos a enviar un texto, pero vamos a colocar además el atributo name, que es el nombre

105
00:05:57,720 --> 00:06:00,210
del campo, igual por ahora sin valor.

106
00:06:00,330 --> 00:06:06,840
De esa forma y el campo lo vamos a anidar dentro de otro div podríamos colocar control al té que nos

107
00:06:06,840 --> 00:06:12,030
dice anidar este elemento dentro de algunas etiqueta, por ejemplo div.

108
00:06:12,390 --> 00:06:19,920
Entonces en liet template anidar con y vamos a colocar la etiqueta div se fijan y en forma automática

109
00:06:20,010 --> 00:06:20,480
lo anidad.

110
00:06:20,670 --> 00:06:25,920
Entonces dentro del div vamos a tener el input y el label es para el nombre campo es como una etiqueta.

111
00:06:26,220 --> 00:06:32,040
Entonces por ejemplo acá podríamos colocar Yussef n y está el campo para el Yusa en el input.

112
00:06:32,310 --> 00:06:36,900
Lo vamos a ver más en detalle, pero vamos a tener el nombre usuario, un password y un email.

113
00:06:37,050 --> 00:06:38,130
Vamos a tener tres campo.

114
00:06:38,340 --> 00:06:46,430
Entonces podríamos seleccionar este grupo y lo copiamos, bajamos y pegamos tres de Bejan.

115
00:06:47,340 --> 00:06:54,510
Ahora si podemos completar el primer fore, vamos a colocar acá y Usenet y esta etiqueta está enlazada

116
00:06:54,510 --> 00:06:55,170
a este nombre.

117
00:06:56,550 --> 00:07:00,620
Le vamos a indicar el Heidy que es requerido para el FOR ahí.

118
00:07:00,630 --> 00:07:06,360
Después voy a explicar lo vamos a poner un identificador básicamente como un nombre único de este campo

119
00:07:06,600 --> 00:07:10,740
o asociado a este elemento y USENET se fijan.

120
00:07:10,830 --> 00:07:16,590
Ahí se fue el error acá que marcada en rojo lo que hace el FOR es si hacemos un clic con el mouse en

121
00:07:16,590 --> 00:07:18,900
el texto del campo o label en.

122
00:07:19,570 --> 00:07:25,870
Automáticamente el cursor se posiciona sobre el campo, lo que está haciendo es enlazar el yussef net

123
00:07:25,960 --> 00:07:28,740
acá con algún elemento que tenga es aquí.

124
00:07:29,110 --> 00:07:29,850
Hay dilluns en él.

125
00:07:30,340 --> 00:07:35,290
Por lo tanto, este nombre tiene que ser igual a este de acá y también al NAICM.

126
00:07:35,560 --> 00:07:36,820
Este sería el nombre campo.

127
00:07:37,120 --> 00:07:39,670
Este sería el identificador único.

128
00:07:40,720 --> 00:07:42,710
Continuamos con el segundo Passwords.

129
00:07:44,480 --> 00:07:44,980
Perfecto.

130
00:07:45,040 --> 00:07:46,900
Acá también password.

131
00:07:48,130 --> 00:07:51,250
Y también vamos a tener el Heidy con lo mismo Pascual.

132
00:07:52,450 --> 00:07:58,330
Lo que si el tipo en vez de texto como una contraseña es mejor que vaya, ocultÃ.

133
00:07:58,480 --> 00:08:02,950
Entonces vamos a cambiar el tipo a password a un tipo password.

134
00:08:03,640 --> 00:08:03,910
Déjalo.

135
00:08:03,910 --> 00:08:04,800
Tenemos password.

136
00:08:06,340 --> 00:08:08,800
Bajamos el siguiente sería email.

137
00:08:10,270 --> 00:08:10,960
Lo mismo acá.

138
00:08:14,610 --> 00:08:19,410
Con el Heidy e-mail y me faltaría dar los nombres en las etiquetas.

139
00:08:19,530 --> 00:08:25,270
Acá en Yussef sería usuario o Usenet a cacería?

140
00:08:25,290 --> 00:08:26,040
Contraseña?

141
00:08:26,550 --> 00:08:27,660
Te vamos a poner password nomá.

142
00:08:30,870 --> 00:08:31,710
Llega el email.

143
00:08:32,580 --> 00:08:41,670
Por último, faltaría un botón div dentro vamos a tener otro div y dentro el botón también es el tipo

144
00:08:41,670 --> 00:08:47,100
de input del tipo submit submit que para enviar.

145
00:08:47,160 --> 00:08:53,100
Entonces cada vez que queramos implementar un botón en un formulario es un campo, un input, pero submit

146
00:08:53,250 --> 00:08:58,020
que tiene fondo para hacer un clic, enviar el formulario al servidor valeo.

147
00:08:58,800 --> 00:09:01,380
Vamos a colocar el nombre, el botón o el texto.

148
00:09:01,380 --> 00:09:04,050
En realidad enviar ya lo tenemos.

149
00:09:04,200 --> 00:09:06,570
Entonces ahora podríamos probar lo podría ejecutar.

150
00:09:07,200 --> 00:09:08,460
Agregar configuraciones.

151
00:09:09,360 --> 00:09:11,580
Lo tienes que configurar de que es un nuevo proyecto.

152
00:09:11,670 --> 00:09:12,660
Nos vamos a ir a Maven.

153
00:09:13,660 --> 00:09:24,460
En command line acá vamos a colocar el nombre Tomcat command line, tom K7 Ready play perfecto, aplicamos

154
00:09:25,090 --> 00:09:25,600
ok.

155
00:09:25,870 --> 00:09:26,540
Y estamos listo.

156
00:09:26,560 --> 00:09:28,620
Entonces lo primero levantar Tomcat.

157
00:09:28,870 --> 00:09:33,760
Nos vamos a terminal C de punto punto C de Apache.

158
00:09:33,760 --> 00:09:40,600
Tomcat 10 bin acá estatal levantamos.

159
00:09:41,710 --> 00:09:44,110
Una Cleantes hemos ya podemos hacer el diploide.

160
00:09:51,780 --> 00:09:53,880
Si sale todo bien, hacemos un click.

161
00:09:55,420 --> 00:09:56,810
Aunque falta un detalle.

162
00:09:57,010 --> 00:10:02,890
Sí, un detallito, por eso me aparece el link acá no vamos a hacer el POM por acá nos faltó incluir

163
00:10:02,890 --> 00:10:03,420
el pacato.

164
00:10:03,580 --> 00:10:04,150
Se acuerdan?

165
00:10:04,350 --> 00:10:06,760
Entonces por acá colocamos packaging.

166
00:10:07,690 --> 00:10:12,340
Jugar el tipo empaquetado tiene que ser jugar para que se realice el despliegue.

167
00:10:12,930 --> 00:10:13,720
Bien, ahora sí que sí.

168
00:10:14,260 --> 00:10:17,620
Actualizamos los cambios y levantamos nuevamente.

169
00:10:23,580 --> 00:10:27,380
Ahora, si se fijan, ahora parece la ruta web app form.

170
00:10:27,630 --> 00:10:28,490
Hacemos un click.

171
00:10:30,490 --> 00:10:34,590
Y aparece el formulario usuario password y el email con el botón.

172
00:10:35,040 --> 00:10:40,350
Después le vamos a dar un diseño y lo vamos a ir completando con más tipos de campo con lista desplegable

173
00:10:40,350 --> 00:10:40,830
SELECT.

174
00:10:40,920 --> 00:10:41,260
En fin.

175
00:10:41,400 --> 00:10:48,090
Pero el siguiente paso más cercano e implementar es el SELECT con el post para poder procesar este formulario,

176
00:10:48,240 --> 00:10:52,140
recibir los datos, hacer algo, por ejemplo, guardarlo en la base de datos.

177
00:10:52,140 --> 00:10:57,420
En fin, vamos a partir de a poco lo vamos a mostrar como resultado en el HTML dentro del SELECT, pero

178
00:10:57,420 --> 00:10:58,680
eso lo dejamos para la siguiente clase.

179
00:10:58,800 --> 00:10:59,430
Nos vemos.