Vamos a continuar con el caso de agregar al cliente en este momento si damos clic sobre el botón no
aparece nada ya que no hemos creado nuestra página modal así que vamos a hacer lo siguiente el código
de agregar un nuevo cliente puede estar dentro de esta misma página.
Sin embargo vamos a hacer lo mismo que en la página de clientes JSP vamos a separar el contenido en
otras páginas así que vamos a crear una nueva página para no cargar demasiado el código del listado
clientes puntos JSP así que sobre el folder de clientes vamos a dar clic derecho Nioh JSP y agregamos
el archivo agregar cliente punto JSP estamos en finalizar
y dentro de la página del listado clientes hasta el final vamos a incluir el JSP de agregar al cliente
para que pueda reconocer el código HTML y poder abrir este contenido que va a ser una página modal agregar
cliente modal
utilizamos la acción de jote CEPES incluso indicamos el Page y debido a que estamos en una página interna
web inf.
Vamos a comenzar nuestra carpeta de Weaving primero poniendo diagonal y posteriormente empezamos a entrar
en nuestras carpetas.
Entramos en la carpeta de páginas cliente y finalmente el archivo de agregar clientes JSP ya que si
no comenzamos con Diagonal entonces no vamos a visualizar correctamente este archivo esto es debido
a que este JSP está dentro de la carpeta de Weddings así que tendremos que volver a indicar con Diagonal
que vamos a empezar desde la carpeta de Weddings
bien con esto ya se va a incluir el contenido de agregar cliente dentro de esta página del listado clientes
JSP.
Incluso podemos observar que el código del botón de Agregar cliente tampoco se encuentra en este JSP
sino que ese botón se encuentra dentro de la página de botones navegación
aquí es donde se encuentra el botón de Agregar cliente y aquí sólo le indicamos que se debe abrir lo
que vamos a agregar ahora dentro de la página de agregar cliente así que vamos a agregar esta referencia
a agregar cliente modal dentro de la página de agregar cliente punto JSP así que vamos a quitar todo
este contenido y vamos a empezar a agregar nuestro código que básicamente es un formulario pero dentro
de una ventana modal así que vamos a empezar agregamos un dip agregamos la clase modal con el efecto
de Fait posteriormente agregamos un Aydin y este es el Heydi que nos interesa agregar cliente modal
que debe de ser exactamente igual a este nombre que estamos utilizando así que usamos primero el símbolo
de número y posteriormente el nombre del código que se va a abrir así que en este caso es agregar cliente
modal bien seguimos configurando todo este código.
Cualquier duda pueden revisar el concepto de elementos de tipo modal.
En vostra ya que allí nos explican cada uno de estos elementos que vamos a utilizar agregamos la clase
de moda el Dialog
y la clase de moda.
LG
ahora agregamos la siguiente clase del siguiente Dip modal content ya que vamos a tener la división
de este código primero en un cabecero y posteriormente el cuerpo de este Código de la ventana modal
que se va a abrir así que ese es el contenido de esta ventana modal
agregamos la clase de moda el Gelder este va a ser el cabecero con el color de Bagram info y el texto
blanco textualidad y agregamos un título H5 pero vamos a dar una clase que va a ser moda al teito y
agregamos el texto agregar cliente y después del título H5.
Vamos a agregar un botón
para que en dado caso necesario puedan cerrar también esta ventana modal así que agregamos la clase
de Kloss y el atributo DATA Disney's
que nos va a servir para cerrar esta ventana agregamos un Spahn con el símbolo de una X podemos observar
que este va a ser el símbolo que se va a mostrar es una X así que agregamos el código de Timms y en
lo que se va a visualizar hasta aquí tenemos el modo al Alger y después de modo Angerer vamos a agregar
a nuestro formulario y posteriormente en moda el body.
Pero vamos a probar hasta aquí para ver si funciona nuestro código guardamos cambios refrescamos damos
clic en Agregar cliente y podemos observar que ya se muestra en nuestra ventana modal.
únicamente hemos agregado hasta el momento el título de agregar cliente y el botón de cerrar esta ventana
y si damos clic sobre la X se debe de cerrar esta ventana modal también si damos clic y damos clic fuera
de esta ventana.
También se debe de cerrar así que cualquiera de las dos opciones debe de funcionar bien vamos a continuar.
Ahora después del div de moda al Gelder vamos a agregar nuestro formulario para que todo lo que agreguemos
dentro de este formulario se incluya en el envío de la información hacia el controlador.
Así que establecemos la acción de este formulario.
Vamos a hacer una llamada al context Path utilizando nuestro objeto paiche context.
Posteriormente el objeto recuesto context Path para que nos regrese el nombre de nuestra aplicación
o lo que es lo mismo en este caso el contextual.
Posteriormente indicamos el controlador y vamos a pasar como argumento también una acción el parámetro
de acción y en este caso va a ser el valor de insertar ya que todo lo que proporcionemos en este formulario
vamos a insertarlo en la base de datos.
Vamos a utilizar el método post así que a diferencia de las acciones que hemos programado hasta el momento
el controlador únicamente ha procesado peticiones de tipo Duguech.
Ahora vamos a procesar una petición de tipo de post para que la información que enviamos en este formulario
no se visualice en el relevo y vamos a cerrar hasta aquí nuestro formulario cerramos nuestro elemento
de form y ahora vamos a agregar el modo el body así que agregamos un dip con la clase de moda el body
la cual es el complemento de moda Alger que definimos en este momento.
Por eso este de El Bodin debe estar dentro del div de moda al contenten ya que el modo de contén se
divide en Gelder y en Body bien y cerramos este Dib y dentro de este modelo body vamos a dar otro Dip
con la clase de Font Group
cualquier duda con los estilos que vamos a aplicar en estos formularios.
Pueden revisar el tema de formularios de vostra.
Ahí es donde se especifica cada uno de estos elementos que vamos a utilizar incluyendo el tema de validaciones
que también vamos a comentar posteriormente.
Así que agregamos un form Group cerramos este Dib y vamos a agregar nuestro primer elemento que va a
ser el Olimpo Tex de nombre así que dentro de este formuló vamos a agregar un neighbor agregamos el
atributo de Fort indicamos cuál va a ser el elemento que se va asociar a esta etiqueta así que posteriormente
vamos a definir el imputs de nombre y la etiqueta que se va a mostrar va a ser la etiqueta con el texto
de nombre ahora vamos a crear un input text
el tipo va a ser texto
la clase va a ser FOM contó
que es la clase de Bushra y agregamos el atributo de nombre.
En este caso este componente se va a llamar nombre y por ello la referencia que hemos hecho de la etiqueta
que está haciendo referencia a este componente y este es el nombre que vamos a utilizar dentro de nuestro
CV el controlador para procesar este parámetro.
Así que ese es el nombre que vamos a utilizar cuando hacemos este formulario desde el servlet bien así
que con eso estamos definiendo el input text de nombre y vamos a hacer algo muy similar para los demás
elementos así que podemos apoyarnos de este Dip ya que van a ser cuatro elementos más muy similares
agregamos el nombre agregamos otro Dib para el apellido.
Posteriormente pegamos otro Dib para el e-mail otro para el teléfono y finalmente otro para el saldo
y vamos a modificar cada uno de estos elementos
modificamos este form Group para hacer referencia al apellido cambiamos también el texto por apellido
posteriormente también cambiamos este nombre por apellido hacemos lo mismo para el e-mail
cambiamos cada uno de los valores posteriormente el teléfono
cambiamos todos los valores de teléfono y finalmente el saldo
cambiamos todos los valores y con eso ya tenemos todos los elementos del formulario.
Después de cerrar el modelo Bodhi vamos a agregar un elemento más que es el modo el poder así que vamos
a agregar otro Dip
llamado Model Fugger
así que este elemento lo agregamos antes de cerrar el formulario y este modelo únicamente va a tener
un botón que va a ser el submit de nuestro formulario así que agregamos la clase de veten y la clase
de BSN Primary
con el tipo submit
y con el texto guardar bien así que con eso ya tenemos todos los elementos de nuestro formulario guardamos
cambios y vamos a probar en el controlador todavía no hemos programado nada respecto a procesar la acción
de insertar así que todavía no vamos a enviar información al servidor pero vamos a visualizar estos
cambios así que guardamos cambios
refrescamos damos clic en Agregar cliente y podemos observar que se visualizan correctamente Nombre
Apellido Email Teléfono y saldo.
Sin embargo estos valores deberían de ser requeridos.
De lo contrario podríamos enviar información vacía hacia el servidor así que vamos a poner estos campos
como requeridos.
Ustedes deciden si todos los elementos son requeridos o no. En este caso voy a poner todos como requeridos
aunque esto no es necesario.
Algunos de los campos podrían ser no requeridos
así que agregamos el atributo de ritual para cada uno de los elementos sin especificar ningún valor
solamente agregando ese atributo
bien así que con eso y a todos los elementos son requeridos.
Como hemos comentado algunos de estos elementos podrían no ser requeridos simplemente quitamos ese atributo
para que se considere un valor como no requerido bien guardamos cambios refrescamos y vamos a probar
hasta el momento no hay ningún cambio ya que no hemos aplicado la validación de Bushra para que podamos
aplicar una validación.
Existen varios tipos.
Vamos a aplicar la más simple que es apoyándonos de la validación del mismo navegador
así que dentro del Formulario vamos a agregar el siguiente Clas Guash vãlida y Teeth y con eso es suficiente
para que se revise cada uno de los elementos.
Si es válido así que en este caso va a revisar si cada uno de los campos contiene algún valor.
De lo contrario va a poner el campo como inválido utilizando estas clases de Bushra y únicamente va
a cambiar el estado del campo hasta que queremos información a este texto.
Guardamos cambios vamos a refrescar damos clic en Agregar y podemos observar que en este momento todos
los campos están en rojo pero si agregamos información por ejemplo el nombre de Carlos entonces este
valor ya es válido y si no llenamos estos campos y damos clic en Guardar Podemos no se va que nos muestra
el mensaje completa este campo así que no podemos enviar información al servidor hasta que este formulario
sea válido.
Por ejemplo Carlos Laura alargamos el email desvelara aquí para que nos valide el formato de email.
Vamos a hacer el cambio ya que esto no debería de ser válido.
Este valor le falta a la arroba así que en el caso del campo Daily Mail en lugar de texto vamos a utilizar
el tipo email y también para el teléfono.
Vamos a utilizar el tipo del y para el saldo vamos a utilizar el tipo nombró esto para que en cada uno
de los campos aplique la validación del navegador.
De lo contrario va a considerar como válido simplemente agregar un texto.
Con esto ya tenemos que proporcionar un valor válido dependiendo del tipo de campo que hemos especificado.
Guardamos cambios vamos a refrescar damos clic en Agregar cliente
agregamos nuevamente los valores Carlos Laura y hasta este momento escribimos sellará no es un valor
válido.
Si damos siguen guardar.
Podemos se va que nos muestra la validación que debemos de incluir un símbolo de arroba en la dirección
del email así que tendríamos que utilizar por ejemplo celar arroba mail puntocom.
Posteriormente proporcionamos algún teléfono
este es un formato válido y finalmente el saldo no podemos agregar textos y tratamos de agregar texto
no podemos pero podemos agregar por ejemplo algún número incluyendo decimales y si damos clic en Guardar
en este momento todavía no hemos configurado nada para que se procese del lado del servidor.
Pero este formulario ya es válido por lo tanto nos permitió hacer clic en Guardar de lo contrario no
podemos ni siquiera presionar el botón de guardar no se ejecuta ninguna acción
así que si por ejemplo dejamos un valor inválido el de saldo y damos siguen guardar.
No podemos enviar los datos de este formulario así que con esto ya tenemos todo el código de nuestra
página.
Agregar cliente punto JSP bien vamos a dejar hasta aquí este video y en el siguiente video vamos a configurar
nuestro servlet para procesar y almacenar esta información en la base de datos.
Nos vemos en el siguiente video.
Saludos.