Programación IV Ing. Jhon Felix Zabala J.

MVC (Modelo Vista Controlador).El Modelo Vista Controlador (MVC) es un estilo de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos.

La estructura MVC ("Model-View-Controller") es un paradigma utilizado en diversos desarrollos de software, a través de este "Framework" se logra una división de las diferentes partes que conforman una aplicación, siendo su principal razón de ser: manutención del código fuente.

El uso de "MVC" en ambientes Web para JSP's y Servlets ha empezado a generar gran interés, debido a que una vez diseñada una aplicación para ambiente Web es necesario realizarle cambios, el uso de MVC permite realizar diseños con JSP's/Servlets que logran verdaderas soluciones a escala.

Se trata de un modelo muy maduro y que ha demostrado su validez a lo largo de los años en todo tipo de aplicaciones, y sobre multitud de lenguajes y plataformas de desarrollo.

1. El Modelo: que contiene una representación de los datos que maneja el sistema, su lógica de negocio, y sus mecanismos de persistencia.

2. La Vista (interfaz de usuario): que compone la información que se envía al cliente y los mecanismos de interacción con éste.

3. El Controlador: que actúa como intermediario entre el Modelo y la Vista, gestionando el flujo de información entre ellos y las transformaciones para adaptar los datos a las necesidades de cada uno.

Programación IV Ing. Jhon Felix Zabala J.

Manejo de MVC e Integración con JAVA

WEBEmpezaremos repasando los sencillos conceptos de MVC para implementarlos con éxito en nuestra aplicación Java Web.

El modelo es el responsable de:

Acceder a la capa de almacenamiento de datos. Lo ideal es que el modelo sea independiente del sistema de almacenamiento.

Define las reglas de negocio (la funcionalidad del sistema). Un ejemplo de regla puede ser: "Si el usuario no se encuentra en el sistema, solicitar crear uno para identificarse al sistema".

Lleva un registro de las vistas y controladores del sistema.

Si estamos ante un modelo activo, notificará a las vistas los cambios que en los datos pueda producir un agente externo (por ejemplo, un fichero por lotes que actualiza los datos, un temporizador que desencadena una inserción, etc.).

Las vistas son responsables de:

Recibir datos del modelo y los muestra al usuario.

Tienen un registro de su controlador asociado (normalmente porque además lo instancia).

Pueden dar el servicio de "Actualización()", para que sea invocado por el controlador o por el modelo (cuando es un modelo activo que informa de los cambios en los datos producidos por otros agentes).

El controlador es responsable de:

Recibe los eventos de entrada (un clic, un cambio en un campo de texto, etc.).

Contiene reglas de gestión de eventos, del tipo "SI Evento Z, entonces Acción W". Estas acciones pueden suponer peticiones al modelo o a las vistas. Una de estas peticiones a las vistas puede ser una llamada al método "Actualizar()". Una petición al modelo puede ser "Obtener nuevo usuario (Nuevo registro en el sistema)".

Programación IV Ing. Jhon Felix Zabala J.

El flujo que sigue el control generalmente es el siguiente:

Programación IV Ing. Jhon Felix Zabala J.

PRIMER MVC En java web.Lo primero que demos hacer para empezar a implementar el concepto de modelo vista controlador en java web es lo siguiente:

Creamos nuestra base de datos en SQL Server de la siguiente manera:

Una vez creada nuestra tabla, Insertamos los campos que vamos a usar:

Programación IV Ing. Jhon Felix Zabala J.

Como se puede apreciar se crea un Usuario llamado usercecep y su contraseña encriptada para mayor seguridad y por qué cuando creamos la tabla definimos el campo de esta manera, la contraseña creada tiene el valor cecep01.

Como se puede observar los campos han sido insertados ya tenemos un usuario para realizar le Login en el sistema y aplicar los conceptos MVC.

Como se puede observar el usuario es legible, pero la contraseña no, porque esta ha sido encriptada en nuestra base de datos de tal manera que sea más seguro realizar los procesos en la base de datos.

Programación IV Ing. Jhon Felix Zabala J.

Ahora crearemos un proyecto y en este crearemos un Servlet que será nuestro Controlador de la siguiente manera:

Luego crearemos los nombres y parámetros:

Programación IV Ing. Jhon Felix Zabala J.

Programación IV Ing. Jhon Felix Zabala J.

Método Get

Esta técnica consiste en agregar al final del URL un signo "?" y pares de "nombre" y "valor" separados por un símbolo"&". Ejemplo:

El método Get tiene dos principales inconvenientes. El primero es que se ven los datos en el URL. Esto es muy malo en el ejemplo de usuario y clave ya que cualquiera que viera la casilla del URL en el navegador vería nuestra clave. La segunda desventaja es que el largo del URL está limitado por lo que esto nos limita la cantidad de caracteres que podemos enviar.

Método Post

Este método igual que el Get envía al servidor pares de "nombre" y "valor" pero lo hace dentro del mensaje HTTP que solicita una pagina al servidor. De esta forma los datos no son visibles en el URL y no existe la limitación dada por el largo máximo de un URL. El método Post está asociado con el de formulario HTML. Aunque se pueden usar formularios usando el método Get.

Programación IV Ing. Jhon Felix Zabala J.

Una vez creado el servlet obtenemos el siguiente paquete con su clase correspondiente y los métodos que necesitaremos para empezar a trabajar el MVC.

Programación IV Ing. Jhon Felix Zabala J.

Ahora crearemos dos clases que serán nuestro modelo para la aplicación

web:

Programación IV Ing. Jhon Felix Zabala J.

Y dentro de este paquete creamos dos clases que manejara nuestros modelos así:

Primero crearemos nuestro servlet controlador que se encargará de realizar el proceso de almacenamiento de datos y servirá para el paso entre la vista y el modelo.

Veamos cómo se hace:

Programación IV Ing. Jhon Felix Zabala J.

Primero declaramos dos variables que almacenaran los datos recibidos de la vista que configuraremos más tarde, estas variables dentro del método protegido doPost el cual se encargara de ser el puente entre vista y modelo.

Las variables declaradas son:

Junto con una variable RequestDispatcher:

El objeto RequestDispatcher nos sirve para invocar de modo directo un recurso web, encapsularlo y mostrarlo en un Servlet/jsp.

En este caso la variable rd declarada de tipo RequestDispatcher nos permitirá encapsular las vistas dependiendo de lo que el modelo devuelva y luego mostrarlo veamos como:

1. Se realiza una instancia de la clase Modelo (Autenticador) la cual veremos más adelante.

2. Se crea una variable de tipo String que traerá el resultado de la clase Modelo Autenticador desde el método autorizar.

3. Si el resultado es verdadero el Login se realiza correctamente y se realiza el encapsulamiento de la vista para mostrarlo.3.1. El encapsulamiento es realizado y se procede a instanciar la

clase Modelo Usuario para almacenar en un request.setAttribute() el nombre del usuario logueado en el sistema.

3.2. Si no se cumple la condición, la variable encapsuladora se encarga de empaquetar y mostrar la otra vista.

Programación IV Ing. Jhon Felix Zabala J.

4. Esta salida nos devuelve los resultados encapsulados dentro del mismo controlador por lo que se ve en la URL es siempre el mismo controlador interpretando y asumiendo todas las vistas disponibles que tenga que procesar.

Una vez creado nuestro servlet CONTROLADOR procedemos a crear las clases MODELO que realizaran todo el proceso funcional de la aplicación y dará como paso intermedio todo el control de la aplicación web.

Primero se crea la clase usuario que almacenara los datos del usuario ingresados por medio del método post de la vista y asumido por el controlador y los guardara para proceder a utilizarlos cuando se necesiten en este caso en la vista de bienvenida.

La clase en cuestión es la siguiente:

Programación IV Ing. Jhon Felix Zabala J.

Una vez creada la clase Usuarios procedemos a crear la Clase MODELO Autenticador() que tendrá una método autenticar() para los datos de la conexión a la base de datos.

Programación IV Ing. Jhon Felix Zabala J.

La clase en cuestión es la siguiente:

Se declaran las variables privadas a usar en este caso las que se han venido trabajando desde la conexión a base de datos.

Se crea el método autenticar() al cual se le pasan los valores obtenidos de la vista para realizar la consulta a la base de datos.

Una vez realizada la consulta a la base de datos se establece si el resultado de la misma es verdadero o es falso y se retorna el valor al controlador para su procesamiento.

Programación IV Ing. Jhon Felix Zabala J.

Una vez tenemos esto creado procedemos a crear las vistas para nuestro proyecto de la siguiente manera:

Creamos una carpeta dentro de WebContent, la cual llamaremos Vista:

Programación IV Ing. Jhon Felix Zabala J.

Una vez creada esta carpeta procedemos a crear nuestro Index.jsp que mostrará los elementos de nuestro Login y dentro de la carpeta vista estará nuestras vistas complementarias.

Asumiendo el conocimiento antes aplicado de Bootstrap obtenemos un Login como este:

Se tiene el siguiente código.

Programación IV Ing. Jhon Felix Zabala J.

Con su navbar aplicada por medio de Bootstrap, aplicado antes en el tutorial anterior.

Programación IV Ing. Jhon Felix Zabala J.

Debemos tener Claro que nuestro index.jsp posee un formulario que contiene una acción declarada hacia el controlador principal que creamos y un método POST que es el que enviara los datos de manera segura para una correcta práctica.

¡SIN ESTO LA APLICACIÓN NO FUNCIONA!

Siempre se debe crear un FORM con la acción apuntando al Servlet y un Método Apuntando al POST.

Programación IV Ing. Jhon Felix Zabala J.

Una vez creado nuestro Login con el código provisto en este tutorial pasamos a la parte divertida y aplicar el concepto de MVC.

Obtenemos la siguiente pantalla de Login y se aplican las siguientes vistas en las validaciones que realiza el controlador de nuestra aplicación web.

Las vistas creadas se componen del siguiente código:

BIENVENIDA.JSP

Programación IV Ing. Jhon Felix Zabala J.

Como se puede observar La vista bienvenida.jsp contiene el mismo código que ya hemos usado anteriormente con bootstrap y una pequeña línea de código que hace el llamado del nombre del usuario en nuestro controlador que a la vez lo llama del MODELO.

Con este código veremos en la pantalla de bienvenida lo siguiente:

Programación IV Ing. Jhon Felix Zabala J.

Programación IV Ing. Jhon Felix Zabala J.

Una vez insertamos los datos correctos la vista transfiere los datos al Controlador por medio del método POST por esta razón se verá en la barra de direcciones el nombre del controlador y no de las paginas como veníamos viendo, ya que el controlador se encargará de encapsular las vistas y los métodos del MODELO para administrar todo.

ERROR.JSP

Programación IV Ing. Jhon Felix Zabala J.

Con este código veremos la vista de ERROR si los datos son incorrectos en el Login así:

Programación IV Ing. Jhon Felix Zabala J.

Como se puede observar, de la misma manera que en la vista de bienvenida el controlador toma el control de la página y se encarga de gestionar en este caso la vista de Error para mostrarla y encapsular los datos para asegurar la información.

Con esto concluye la guía de MVC espero les sea de utilidad.