Continuemos.
Vamos a ver manejo formulario, pero vamos a crear un nuevo proyecto, lo vamos a manejar de forma separada,
pero antes tenemos que respaldar algo del pomme kml.
Entonces nos vamos a ir el POM para no tener que ser todo nuevo por acá.
Vamos a copiar los plugins de acá.
Entonces los seleccionamos, lo copiamos PLAYING y T.M.
La dependencia que tenemos, la dependencia, dependencias, copiamos todo eso y lo vamos a respaldar.
Vamos a crear un live template y vamos a crear nuestro atajo de Maven con esta dependencia.
Así ahorramos tiempo.
Entonces nos vamos a ir al control ese editor.
Por qué buscamos light templetes?
Perfecto.
Acá hay varios.
Buscamos Maven acá Teoman, desplegamos, seleccionamos Maven y agregamos uno nuevo Lipe Template acá.
Perfecto.
Le vamos a llamar a este snippets yaba e MBN de Maven.
Entonces ya e mbn acá pegamos tal cual.
Todo lo que plugins.
Por lo tanto, desde que se cierra todo lo plugins que tenemos hasta que se abre con el build dependencias.
En efecto.
Esto.
Parece que faltó el builds a ver gratinado build satisfactor build.
Entonces vamos a bajar de casa ramos vuelta y cerramos.
Qué faltaría aplicable.
Definir seleccionamos maven.
Listamos listo sin variable ok.
Aplicábamos ok.
Ahora podemos cerrar este proyecto tranquilamente.
Lo cerramos.
Vamos a crear un nuevo proyecto New Project.
Siguiente le vamos a llamar Web App Form en el artefacto por acá
web app form a pixel de punto web, app punto for y todo lo demás lo dejamos como está.
Web Alfom el arte y fak finalizar.
Tengo proyecto.
Acá estamos en Maven.
Vamos a escribir y ya va.
Eh, eh, MBN.
Ahí lo tenemos.
Con Tab auto completamos.
Ya tenemos todo.
Se fijan mucho más simple.
Podríamos organizar al control l ordenamos un poco.
Bueno, quedó todo bien.
Estamos listos.
Acá actualizamos los cambios de Maven y comenzamos.
Vamos a tener acá en ese reze Main y dentro de Main.
Vamos a crear la carpeta центр.
Entonces, como siempre, ok.
Ya que van a estar en nuestra plantilla, podemos crear el index.
HTML lo mismo html index.
Entonces vamos a partir con un formulario de usuarios.
Vamos a seleccionar todo acá.
Lo copiamos.
Bajamos.
Vamos a tener un H3 y pegamos un título.
Formulario de usuarios.
En realidad formulario.
Vamos a quitarle la s.
Acá también bajamos y comenzamos.
Lo primero vamos a partir con la vista, con la plantilla.
Después vamos a implementar el SALDE, que va a ser el controlador que va a recibir los parámetros del
usuario.
Vamos a implementar el post en ese caso para poder procesar todos estos input de entrada que supuestamente
va a llenar el usuario.
Los campos en HTML un formulario comienza con la etiqueta form.
Entonces vamos a escribir acá form.
Vamos a cerrar y el formulario tiene etiquetas.
Por ejemplo, el action.
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
que va a recibir estos datos.
Bueno, supuestamente acá tiene que ir la ruta Aurelie Qué tema piada el select que iba a procesar estos
datos.
Entonces bueno, primero tengo que colocar el nombre proyecto web app form latch, le vamos a colocar
registro, por ejemplo registro usuario.
Lo siguiente tenemos que indicar el método.
Acá tenemos el atributo Method Post Hoggett.
Se fijan?
Vamos a enviar mediante el post de que la idea enviar por detrás ocultar los parámetros del request,
porque si colocamos GET, los datos de formulario se van a enviar en la ruta °l y le diré que se envíe
en el cuerpo el mensaje que no sea visible si lo hiciéramos.
Post perfecto.
De todas formas, después vamos a saber un poco la diferencia.
Qué pasa si cambiamos de post?
Hallet Cómo se visualizan estos parámetros en la ruta Burela y podríamos tener datos sensibles de formulario
que no queremos que se muestren.
Entonces por eso mucho mejor en este caso utilizar post.
Además que mediante post podemos enviar mucho más caracteres e información en el recuesto, mientras
que cuando enviemos mediante ruta °l tiene un límite.
Bien, los siguientes serán los campos, pero estos campos tienen que ir dentro de algún tipo de elemento
HTML, algún tipo layout para que después lo podamos maquetar de alguna forma.
Dar un diseño puede ser una tabla o también pueden ser contenedores div y después a los div les podemos
dar estilos CSS, por ejemplo utilizando el framework de vostra.
Por ahora vamos a tener el div.
Bueno, de hecho el interesting tree, un plugin que yo puedo escribir acá sin colocar el menor o también
conocido como corchete triangulares el mayor y menor para la etiqueta sin colocar eso simplemente cribo
y con tab me completa por ejemplo div tab autocompletar ya dentro del div vamos a tener un label lo
mismo acá de forma automática nos indica un atributo for.
Después lo vamos a ver más en detalle para qué sirven?
Pero por ahora lo dejamos así, tal cual.
Vamos a bajar y vamos a tener un input.
Entonces input cerramos.
Aunque también lo podría escribir de esta forma input tab y forma automática genera el campo, el elemento,
el input del tipo texto.
Por defecto vamos a enviar un texto, pero vamos a colocar además el atributo name, que es el nombre
del campo, igual por ahora sin valor.
De esa forma y el campo lo vamos a anidar dentro de otro div podríamos colocar control al té que nos
dice anidar este elemento dentro de algunas etiqueta, por ejemplo div.
Entonces en liet template anidar con y vamos a colocar la etiqueta div se fijan y en forma automática
lo anidad.
Entonces dentro del div vamos a tener el input y el label es para el nombre campo es como una etiqueta.
Entonces por ejemplo acá podríamos colocar Yussef n y está el campo para el Yusa en el input.
Lo vamos a ver más en detalle, pero vamos a tener el nombre usuario, un password y un email.
Vamos a tener tres campo.
Entonces podríamos seleccionar este grupo y lo copiamos, bajamos y pegamos tres de Bejan.
Ahora si podemos completar el primer fore, vamos a colocar acá y Usenet y esta etiqueta está enlazada
a este nombre.
Le vamos a indicar el Heidy que es requerido para el FOR ahí.
Después voy a explicar lo vamos a poner un identificador básicamente como un nombre único de este campo
o asociado a este elemento y USENET se fijan.
Ahí se fue el error acá que marcada en rojo lo que hace el FOR es si hacemos un clic con el mouse en
el texto del campo o label en.
Automáticamente el cursor se posiciona sobre el campo, lo que está haciendo es enlazar el yussef net
acá con algún elemento que tenga es aquí.
Hay dilluns en él.
Por lo tanto, este nombre tiene que ser igual a este de acá y también al NAICM.
Este sería el nombre campo.
Este sería el identificador único.
Continuamos con el segundo Passwords.
Perfecto.
Acá también password.
Y también vamos a tener el Heidy con lo mismo Pascual.
Lo que si el tipo en vez de texto como una contraseña es mejor que vaya, ocultÃ.
Entonces vamos a cambiar el tipo a password a un tipo password.
Déjalo.
Tenemos password.
Bajamos el siguiente sería email.
Lo mismo acá.
Con el Heidy e-mail y me faltaría dar los nombres en las etiquetas.
Acá en Yussef sería usuario o Usenet a cacería?
Contraseña?
Te vamos a poner password nomá.
Llega el email.
Por último, faltaría un botón div dentro vamos a tener otro div y dentro el botón también es el tipo
de input del tipo submit submit que para enviar.
Entonces cada vez que queramos implementar un botón en un formulario es un campo, un input, pero submit
que tiene fondo para hacer un clic, enviar el formulario al servidor valeo.
Vamos a colocar el nombre, el botón o el texto.
En realidad enviar ya lo tenemos.
Entonces ahora podríamos probar lo podría ejecutar.
Agregar configuraciones.
Lo tienes que configurar de que es un nuevo proyecto.
Nos vamos a ir a Maven.
En command line acá vamos a colocar el nombre Tomcat command line, tom K7 Ready play perfecto, aplicamos
ok.
Y estamos listo.
Entonces lo primero levantar Tomcat.
Nos vamos a terminal C de punto punto C de Apache.
Tomcat 10 bin acá estatal levantamos.
Una Cleantes hemos ya podemos hacer el diploide.
Si sale todo bien, hacemos un click.
Aunque falta un detalle.
Sí, un detallito, por eso me aparece el link acá no vamos a hacer el POM por acá nos faltó incluir
el pacato.
Se acuerdan?
Entonces por acá colocamos packaging.
Jugar el tipo empaquetado tiene que ser jugar para que se realice el despliegue.
Bien, ahora sí que sí.
Actualizamos los cambios y levantamos nuevamente.
Ahora, si se fijan, ahora parece la ruta web app form.
Hacemos un click.
Y aparece el formulario usuario password y el email con el botón.
Después le vamos a dar un diseño y lo vamos a ir completando con más tipos de campo con lista desplegable
SELECT.
En fin.
Pero el siguiente paso más cercano e implementar es el SELECT con el post para poder procesar este formulario,
recibir los datos, hacer algo, por ejemplo, guardarlo en la base de datos.
En fin, vamos a partir de a poco lo vamos a mostrar como resultado en el HTML dentro del SELECT, pero
eso lo dejamos para la siguiente clase.
Nos vemos.