Tema

FORMULARIO WEB CON MVC

UTILIZANDO NETBEANS

Tutor
Ing. Eduardo Mauricio Campaña Ortega
MIS.MDU.CCNA.CCIA.
PhD. (c) Ingeniería de Software
PhD. (c) Seguridad Información

Fecha
15/12/2020
FORMULARIO WEB CON MVC EN NETBEANS
MARCO TEÓRICO ..........................................................................................................................2
JAVA WEB .................................................................................................................................2
JAVA SERVER PAGES (JSP) ........................................................................................................2
SERVLETS ..................................................................................................................................3
JAVABEANS...............................................................................................................................3
MODELO VISTA CONTROLADOR - MVC ....................................................................................4
MODELOS .............................................................................................................................4
VISTAS ..................................................................................................................................4
CONTROLADORES ................................................................................................................4
CREACIÓN DEL PROYECTO............................................................................................................6
OBJETIVO..................................................................................................................................6
CREAR UN SITIO WEB LLAMADO FORMULARIOWEBCONMVC .................................................6
_APELLIDO_ NOMBRE ..............................................................................................................6
DESARROLLO DEL PATRÓN MVC ..............................................................................................8
AÑADIR UNA CLASE AL MODELO “PACKAGE MODEL” .......................................................8
AÑADIR UNA CLASE AL CONTROLADOR “PACKAGE CONTROLADOR” .............................11
2.3 Creación de la Vista index.jsp en la carpeta Web Pages de nuestro proyecto .................16
2.4 Creación de la Vista salida.jsp en la carpeta Web Pages de nuestro proyecto .................18
EJECUCIÓN DEL PROYECTO ....................................................................................................22
CONCLUSIONES ......................................................................................................................23
BIBLIOGRAFÍA .........................................................................................................................23

1
MARCO TEÓRICO

JAVA WEB

Figura 1. Logotipo identificativo de Java Enterprise Edition

Es una plataforma de programación—parte de la Plataforma Java—para desarrollar y ejecutar

software de aplicaciones en el lenguaje de programación Java. Permite utilizar arquitecturas de
N capas distribuidas y se apoya ampliamente en componentes de software modulares
ejecutándose sobre un servidor de aplicaciones. La plataforma Java EE está definida por
una especificación. Similar a otras especificaciones del Java Community Process, Java EE es
también considerado informalmente como un estándar debido a que los proveedores deben
cumplir ciertos requisitos de conformidad para declarar que sus productos son conformes a Java
EE.

Java EE tiene varias especificaciones de API, tales como JDBC, RMI, e-mail, JMS, Servicios
Web, XML, etc y define cómo coordinarlos. Java EE también configura algunas especificaciones
únicas para Java EE para componentes.

Estas incluyen Enterprise JavaBeans, servlets, portlets (siguiendo la especificación de Portlets

Java), JavaServer Pages y varias tecnologías de servicios web. Ello permite al desarrollador crear
una Aplicación de Empresa portable entre plataformas y escalable, a la vez que integrable con
tecnologías anteriores. Otros beneficios añadidos son, por ejemplo, que el servidor de
aplicaciones puede manejar transacciones, la seguridad, escalabilidad, concurrencia y gestión
de los componentes desplegados, significando que los desarrolladores pueden concentrarse
más en la lógica de negocio de los componentes en lugar de en tareas de mantenimiento de bajo
nivel.

JAVA SERVER PAGES (JSP)

JavaServer Pages (JSP) es una tecnología que ayuda a los desarrolladores de software
a crear páginas web dinámicas basadas en HTML y XML, entre otros tipos de
documentos. JSP es similar a PHP, pero usa el lenguaje de programación Java.
El rendimiento de una página JSP es el mismo que tendría el servlet equivalente, ya que
el código es compilado como cualquier otra clase Java. A su vez, la máquina virtual
compilará dinámicamente a código de máquina las partes de la aplicación que lo
requieran. Esto hace que JSP tenga un buen desempeño y sea más eficiente que otras
tecnologías web que ejecutan el código de una manera puramente interpretada.
La principal ventaja de JSP frente a otros lenguajes es que el lenguaje Java es un
lenguaje de propósito general que excede el mundo web y que es apto para crear clases
que manejen lógica de negocio y acceso a datos de una manera prolija. Esto permite

2
separar en niveles las aplicaciones web, dejando la parte encargada de generar el
documento HTML en el archivo JSP.

Figura 2. Logotipo identificativo de Java Server Pages

SERVLETS
El servlet es una clase en el lenguaje de programación Java, utilizada para ampliar las
capacidades de un servidor. Aunque los servlets pueden responder a cualquier tipo de
solicitudes, estos son utilizados comúnmente para extender las aplicaciones alojadas
por servidores web, de tal manera que pueden ser vistos como applets de Java que se
ejecutan en servidores en vez de navegadores web. Este tipo de servlets son la
contraparte Java de otras tecnologías de contenido dinámico Web,
como PHP y ASP.NET.
La palabra servlet deriva de otra anterior, applet, que se refiere a pequeños programas
que se ejecutan en el contexto de un navegador web.
El uso más común de los servlets es generar páginas web de forma dinámica a partir de
los parámetros de la petición que envíe el navegador web.

JAVABEANS
Los JavaBeans son un modelo de componentes creado por Sun Microsystems para la
construcción de aplicaciones en Java.
Se usan para encapsular varios objetos en un único objeto (la vaina o Bean en inglés),
para hacer uso de un solo objeto en lugar de varios más simples.
La especificación de JavaBeans de Sun Microsystems los define como "componentes
de software reutilizables que se puedan manipular visualmente en una herramienta de
construcción".
Para funcionar como una clase JavaBean, una clase debe obedecer ciertas
convenciones sobre nomenclatura de métodos, construcción y comportamiento.
Estas convenciones permiten tener herramientas que puedan utilizar, reutilizar, sustituir
y conectar JavaBeans.
Las convenciones requeridas son:

• Debe tener un constructor sin argumentos.

• Sus atributos de clase deben ser privados.
• Sus propiedades deben ser accesibles mediante métodos get y set que siguen una
convención de nomenclatura estándar.

3
MODELO VISTA CONTROLADOR - MVC

Su fundamento es la separación del código en tres capas diferentes, acotadas por su

responsabilidad, en lo que se llaman Modelos, Vistas y Controladores.

MODELOS
Es la capa donde se trabaja con los datos, por tanto contendrá mecanismos para acceder a la
información y también para actualizar su estado. Los datos los tendremos habitualmente en una
base de datos, por lo que en los modelos tendremos todas las funciones que accederán a las
tablas y harán los correspondientes selects, updates, inserts, etc.

No obstante, cabe mencionar que cuando se trabaja con MCV lo habitual también es utilizar
otras librerías como PDO o algún ORM como Doctrine, que nos permiten trabajar con
abstracción de bases de datos y persistencia en objetos. Por ello, en vez de usar directamente
sentencias SQL, que suelen depender del motor de base de datos con el que se esté trabajando,
se utiliza un dialecto de acceso a datos basado en clases y objetos.

VISTAS
Las vistas, como su nombre nos hace entender, contienen el código de nuestra aplicación que
va a producir la visualización de las interfaces de usuario, o sea, el código que nos permitirá
renderizar los estados de nuestra aplicación en HTML. En las vistas nada más tenemos los
códigos HTML y PHP que nos permite mostrar la salida.

En la vista generalmente trabajamos con los datos, sin embargo, no se realiza un acceso directo
a éstos. Las vistas requerirán los datos a los modelos y ellas se generarán la salida, tal como
nuestra aplicación requiera.

CONTROLADORES
Contiene el código necesario para responder a las acciones que se solicitan en la aplicación,
como visualizar un elemento, realizar una compra, una búsqueda de información, etc.

En realidad es una capa que sirve de enlace entre las vistas y los modelos, respondiendo a los
mecanismos que puedan requerirse para implementar las necesidades de nuestra
aplicación. Sin embargo, su responsabilidad no es manipular directamente datos, ni mostrar
ningún tipo de salida, sino servir de enlace entre los modelos y las vistas para implementar las
diversas necesidades del desarrollo.

4
Figura 3. Modelo Vista Controlador (MVC)

5
CREACIÓN DEL PROYECTO

OBJETIVO

El objetivo de la presente práctica de laboratorio es realizar un formulario WEB utilizando MVC

tomando como IDE de desarrollo Netbeans.

CREAR UN SITIO WEB LLAMADO FORMULARIOWEBCONMVC

_APELLIDO_ NOMBRE
Abra el IDE de desarrollo Netbeans 8.02

Figura 3. Logotipo identificativo de NetBeans

Se sitúa en la Pestaña superior File->New Project -> Java Web -> Web Application

Figura 4. Selección del tipo de aplicación a desarrollar

6
Le da el siguiente nombre FormularioWebConMVC_APELLIDO_NOMBRE, adicionalmente
dentro del disco C cree una carpeta llamada DISTRIBUIDAS allí crea otra subcarpeta llamada
FORMULARIOSWEB y dentro de ésta otra subcarpeta FORMULARIOWEB_JAVA_CON_MVC

Figura 5. Selección del nombre y directorio donde guardar el proyecto

Seleccione como servidor de aplicaciones Payara, que da soporte a nuevas tecnologías de java
que provee la versión anterior que era Glassfish.

Figura 6. Selección del servidor de aplicaciones

7
A continuación seleccione el framework de desarrollo

Figura 7. Selección del framework

DESARROLLO DEL PATRÓN MVC

AÑADIR UNA CLASE AL MODELO “PACKAGE MODEL”

Para añadir una clase al modelo, primero se necesita crear el paquete que contendrá los
modelos en la carpeta del proyecto Source Packages y le da el nombre de edu.monster.modelo

Figura 8. Creación del paquete Modelo

8
Luego hace clic derecho en la carpeta Modelo, new -> java class. La clase se llamará
DatosEncuesta.java

Figura 9. Creación de la clase DatosEncuesta.java

Nos crea la clase y llenamos con el siguiente código

Figura 10. Codificación de la clase DatosEncuesta.java

9
Tabla 1. Codificación de la clase DatosEncuesta.java

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package edu.monster.modelo;
public class DatosEncuesta {
private String nombreCompleto;
private String[] progLeng;

public String getNombreCompleto() {

return nombreCompleto;
}

public void setNombreCompleto(String nombreCompleto){

this.nombreCompleto = nombreCompleto;
}

public String[] getProgLeng() {

return progLeng;
}

public void setProgLengList(String[] progLeng) {

this.progLeng = progLeng;
}
}

// Add business logic below. (Right-click in editor and choose

// "Insert Code > Add Business Method")
}
}

10
AÑADIR UNA CLASE AL CONTROLADOR “PACKAGE CONTROLLER”

Para añadir una clase al controlador, primero se necesita crear el paquete que contendrá los
controladores en la carpeta del proyecto Source Packages y le da el nombre de
edu.monster.controlador

Figura 11. Creación del paquete Controlador

Luego hace clic derecho en la carpeta Controlador, new -> java class. La clase se llamará
ServletController.java

Figura 12. Creación de la clase ServletController.java

11
Se crea la clase y procede a codificar la misma con el siguiente código

Figura 13. Codificación de la clase ServletController.java

12
Tabla 2. Codificación de la clase ServletController.java

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package edu.monster.controlador;
import edu.monster.modelo.DatosEncuesta;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse
/**
*
* @author MasterMonster
*/
@WebServlet(name = "ServletController", urlPatterns = {"/ServletController"})
public class ServletController extends HttpServlet {
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/

13
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
DatosEncuesta datosEncuesta = new DatosEncuesta();
datosEncuesta.setNombreCompleto(request.getParameter("nombreCompleto"));
datosEncuesta.setProgLengList(request.getParameterValues("progLeng"));
request.setAttribute("DatosEncuesta", datosEncuesta);
request.getRequestDispatcher("Salida.jsp").forward(request, response);
}

// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs

*/

14
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>

15
CODIFICACIÓN DE LA VISTA INDEX.JSP EN LA CARPETA WEB PAGES DEL
PROYECTO

En la carpeta Web Pages le da click derecho añadir jsp y le pone como nombre de index.jsp.

Hay que tener en cuenta que en este caso el archivo index.jsp en el action del <form> va a llamar
a la clase ServletController.java quien es la que procesará la información mediante JavaBean en
conjunto con la clase DatosEncuesta.java que se encuentra en el paquete edu.monster.modelo.

<form action="ServletController" method="post">

Figura 14. Creación de un archivo JSP llamado index.jsp

A dicho archivo proceda a codificar con el siguiente código

Figura 15. Coficación del archivo JSP index.jsp

16
Tabla 3. Codificación de la vista index.jsp

<!DOCTYPE html>
<!--
Document : Salida
Created on : 19/05/2020, 10:35:22
Author : Master Monster
-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Encuesta entre desarrolladores</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> Bienvenido a la encuesta para desarrolladores </h1>
<p> Indica los lenguajes de programación con los que esté familiarizado </p>
<form action="ServletController" method="post">
<table border="0">

<tbody>
<tr>
<td>Nombre Completo</td>
<td><input type="text" name="nombreCompleto" value="" /></td>
</tr>
<tr>
<td>Java</td>
<td><input type="checkbox" name="progLeng" value="Java" /></td>
</tr>
<tr>

17
<td>C++</td>
<td><input type="checkbox" name="progLeng" value="C++" /></td>
</tr>
<tr>
<td>PHP</td>
<td><input type="checkbox" name="progLeng" value="Php" /></td>
</tr>
<tr>
<td>Ruby</td>
<td><input type="checkbox" name="progLeng" value="Ruby" /></td>
</tr>
<tr>
<td>Python</td>
<td><input type="checkbox" name="progLeng" value="Python" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Enviar" name="btnenviar" /></td>
</tr>
</tbody>

</table>

</form>
</body>
</html>

18
CODIFICACIÓN DE LA VISTA SALIDA.JSP EN LA CARPETA WEB PAGES DEL
PROYECTO

En la carpeta Web Pages le da click derecho añadir jsp y le coloca el nombre de salida.jsp.

En este caso la información enviada desde el index será procesada mediante un javaBean y la
clase DatosEncuesta.java.

<jsp:useBean id="datos" scope="request" class="Model.DatosEncuesta" /> <jsp:getProperty

name="datos" property="nombreCompleto" />

Figura 16. Creación de un archivo JSP llamado salida.jsp

Netbeans creará el siguiente archivo que procede a codificar con el siguiente código

Figura 17. Coficación del archivo JSP salida.jsp

19
Tabla 3. Codificación de la vista salida.jsp

<!DOCTYPE html>
<!--
Document : Salida
Created on : 19/05/2020, 10:35:22
Author : Master Monster
-->
<html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gracias</title>
</head>
<body>
<form action="index.jsp">
<h2>Gracias por Responder nuestra encuesta</h2>
<p>
<jsp:getProperty name="DatosEncuesta" property="nombreCompleto" />
Nos ha indicado que está familiarizado con los siguientes
Lenguajes de programación:
<jsp:useBean id="DatosEncuesta" scope="request" class="edu.monster.modelo.DatosEncuesta" />
</p>
<ul>

20
<%
String[] lenguajesSeleccionados =
DatosEncuesta.getProgLeng();
if (lenguajesSeleccionados != null){
for (int i = 0; i < lenguajesSeleccionados.length;
i++) {
%>

<li>
<%= lenguajesSeleccionados [i]%>
</li>
<% }
}
%>

</ul>
<input type="submit" value="Regresar" name="btnregresar" />
</form>

</body>
</html>

21
EJECUCIÓN DEL PROYECTO
Al compilar el proyecto nos dará la siguiente vista de nuestra aplicación web

Figura 18. Ingreso de Datos en el formulario index.jsp

Procedemos a llenar los campos solicitados y le damos al botón enviar

Figura 19. Ingreso de Datos en el formulario index.jsp

Nos mostrará el salida con la información ingresada

Figura 20. Despliegue del formulario salida.jsp

22
CONCLUSIONES

BIBLIOGRAFÍA

23