Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Arquitectura Del Proyecto (MVC) - Explicacion
Arquitectura Del Proyecto (MVC) - Explicacion
INDICE DE TEMAS:
INTRODUCCION
EL PROBLEMA
GENERALIDADES DEL PATRON MVC
GENERALIDADES DEL PROYECTO
LOGICA DETRÁS DE LAS OPERACIONES CRUD
CAPITULO 0: ARMANDO LA ESTRUCTURA DEL PROYECTO (NETBEANS)
CAPITULO 1: LA CONEXIÓN A LA BASE DE DATOS
CAPITULO 2: EL BEAN
CAPITULO 3: LA INTERFACE
CAPITULO 4: EL FORMULARIO
CAPITULO 5: EL DAO
CAPITULO 6: EL SERVLET
INTRODUCCION
El objetivo de este documento, es mostrar cómo aplicar una adaptación del patrón de
arquitectura de software MVC (Modelo – Vista - Controlador), al desarrollo de un proyecto, a
través de un ejemplo ficticio; también se pretende mostrar cuáles son los componentes del
proyecto, cuáles son sus funciones, cómo se comunican entre sí y cómo conectar el proyecto
a una base de datos MySQL.
El proyecto es de tipo web, es decir, las interfaces de usuario son páginas web, por lo tanto
nuestro proyecto funcionará en internet con ayuda de un Servidor de páginas web (apache
Tomcat o GlassFish) y el motor de bases de datos MySQL y para programarlo usaremos el IDE
llamado NETBeans y el lenguaje JAVA. Las páginas web serán de tipo JSP
Como todo proyecto parte de un problema que se quiere resolver o necesidad que se quiere
satisfacer, entonces miremos qué motiva el desarrollo de éste…..:
EL PROBLEMA
Mi nombre es Juan vivo en Tangamandapio, un pueblito pequeño de 2000 habitantes y
estudio media técnica en programación de software en el colegio. En el pueblo se está
montando una cooperativa financiera, esto nos beneficiará a todos, pero la cooperativa no
tiene sistematizados sus procesos, por el momento requiere hacer un registro ágil de sus
clientes y yo me he ofrecido para hacer un software que les ayude en éste proceso a través de
internet. El gerente de la cooperativa me ha pedido que le haga un ejemplo de cómo
funcionaría el software para manejar la información de sus clientes.
Este es el ejemplo…
Modelo: parte de la arquitectura compuesta por las clases de java que se encargarán de los
datos y la conexión a la base de datos
Vista: parte de la arquitectura compuesta por las interfaces de usuario. Para nuestro caso,
serán todas las páginas web.
Controlador: parte de la arquitectura compuesta por las clases de java que se encargarán de
la lógica del negocio (Servlets), es decir, las operaciones internas del programa.
INTERFACE: es una clase totalmente abstracta, donde sólo se definen los nombres de las
operaciones CRUD, esto con el fin de poder usar esas operaciones en los otros formularios
CRUD.
LISTA: es una página generada por el Servlet con a modo de REPORTE, con todos los
registros de una tabla, esto como respuesta al botón “LISTAR” que se encuentra en el
formulario.
Las Operaciones CRUD** sobre la base de datos son: Crear, consultar, Actualizar, “eliminar
registros”; además se incluye una opción LISTAR para ver el contenido completo de la tabla
de la base de datos sobre la que estamos trabajando.
Habrá un formulario crud para manipular los datos de una tabla especifica de la base de
datos, así mismo debe haber un SERVLET, un BEAN, y un DAO, por cada formulario crud
Después de realizar la operación crud en la base de datos, el sistema debe generar una
Ing. Juan Diego Porras
SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016
PROGRAMACION DE SOFTWARE
respuesta del estado de la operación, es decir, un mensaje que indique si se tuvo éxito o no,
al realizar la operación; para el programa, internamente, esto se manejará como un dato
booleano (falso o verdadero) en las operaciones CREAR, MODIFICAR, BORRAR; o un
elemento ResultSet ** como resultado de las operaciones CONSULTAR y LISTAR que deben
mostrar datos de la base de datos
** ver el glosario al final del documento
1. CREAR UN REGISTRO
Para poder crear registros se deben llenar los campos del formulario con los datos solicitados
del cliente, luego se le da clic en el botón “crear”, si el registro ya existe, el sistema no debe
permitir crearlo por lo tanto se debe advertir al usuario mediante un mensaje por pantalla; si
el registro se ha creado correctamente en la BD, el sistema se lo debe comunicar al usuario
mediante un mensaje por pantalla.
2. CONSULTAR UN REGISTRO
Para consultar se debe hacer con ayuda de algún campo especial del formulario (clave
primaria en la base de datos), que sirva como criterio de búsqueda, como el de
“identificación”, que es el dato que identifica unívocamente ese registro dentro de la base
de datos.
Se llena el campo del formulario que es criterio de la consulta y se le da clic al botón
consultar, si el registro no existe, el sistema le debe advertir al usuario; si el registro existe,
los datos deben aparecer en los campos del formulario correspondientes.
3. MODIFICAR UN REGISTRO
Previamente se debe haber consultado el registro (es decir, los datos del cliente deben estar
en los correspondientes campos del formulario),
Luego se hace la modificación necesaria en alguno de los datos,
Luego se da clic en la opción “Actualizar” para que los cambios sean guardados y el sistema
debe notificar al usuario del éxito de esta operación.
4. ELIMINAR UN REGISTRO
Previamente se debe haber consultado el registro, luego se hace clic en la opción “Eliminar”.
El sistema debe notificar al usuario del éxito de esta operación.
NOTA:
ES PELIGROSO QUE UN SISTEMA PERMITA “BORRAR” O ELIMINAR REGISTROS DE UNA BASE DE
DATOS, YA QUE LA ESCENCIA ES MANTENER LOS DATOS GUARDADOS EN ALGUN LUGAR, POR
ESO SE HABLA DE QUE SE DEBE HACER UN “BORRADO LOGICO” DE LOS REGISTROS, ES DECIR,
NO SE BORRAN FISICAMENTE DE LA BASE DE DATOS PERO SI SE PUEDEN MARCAR COMO
“ACTIVO” O “INACTIVO”.
EN ESTE CASO, LOS CLIENTES DEL BANCO QUE ABRAN UNA CUENTA PODRIAN ESTAR MARCADOS
COMO “ACTIVO” Y LOS QUE CANCELEN SUS CUENTAS SE MARCARIAN COMO “INACTIVO”.
Abrir NETBeans y crear un proyecto nuevo de tipo java web, al cual llamaremos
“CoopTangamandapio”, luego creamos tres paquetes:
1. modelo,
2. controlador,
3. utilidades.
En estos paquetes iremos clasificando las clases que se van creando:
En el paquete modelo: clases “Dao” y “Bean” (uno por cada formulario)
En el paquete controlador: clases tipo “Servlet” (uno por cada formulario)
En el paquete utilidades: “ClassConex”, “interfaceCRUD” (uno solo para todo el
proyecto)
Escoger… se debe escoger el servidor a utilizar para desplegar el proyecto y que se vea en el
navegador. Deben aparecer dos opciones:
Apache Tomcat
GlassFish
Cualquiera de los dos servidores funcionará de manera correcta; para nuestro proyecto,
escogeremos “Apache Tomcat”, si está en la lista
NOTA: los pasos 4 y 5 en las dos fotografías anteriores se repiten para crear los paquetes
“modelo” y “utilidades”. Las vistas estarán guardadas en la carpeta “Web Pages” en el
proyecto
DESCRIPCION DE CARPETAS:
PASO #2
---------------------------------------------------------------------------------------------------------------------------
LA CLASE: ClassConex.java
La conexión se logra solo con 2 líneas de código, que se encuentran dentro del método
constructor de la clase:
1. Class.forName(driver).newInstance();
2. conexion=DriverManager.getConnection(urlbd,usrbd,passbd);
Explicación:
Con la primera se crea una nueva instancia del driver
Con la segunda se crea la conexión usando los parámetros, luego se guarda en la variable:
“conexion”
Luego esa variable “conexión” podrá ser usada cuando se necesite conectar a la base de
datos
El resto de código se escribe para darle a la clase, estabilidad (para que funcione bien)
CODIGO:
/****************************************
**
* @author Marco A. Trejo Lemus *
* 17/06/2008 09:47:01 AM *
****************************************/
package util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public ClassConex(){
driver="com.mysql.jdbc.Driver";
usrbd ="root";
passbd ="";
urlbd="jdbc:mysql://localhost/bancobd";
try
{ Class.forName(driver).newInstance();
conexion=DriverManager.getConnection(urlbd,usrbd,passbd);
System.out.println("Conexion a Base de Datos: status Ok!");
}
catch (Exception e){
System.out.println("Error al tratar de abrir la base de Datos"+e);
Ing. Juan Diego Porras
SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016
PROGRAMACION DE SOFTWARE
}
}
} //fin de la clase
CAPITULO 2: EL BEAN
package modelo;
public BeanCliente() {
}
CAPITULO 3: LA INTERFACE
Es una clase construida con el
único propósito de facilitar la
programación, porque en ella
sólo se definen los nombres de
los métodos CRUD que van a ser
utilizados
agregarRegistro()
actualizarRegistro()
borrarRegistro()
consultarRegistro()
listarTabla()
package utilidades;
import java.sql.ResultSet;
CAPÍTULO 4: EL FORMULARIO
Formulario CRUD WEB: “CLIENTES DE UN BANCO”
El formulario es una página web cuya finalidad es permitirle al usuario interactuar con la base
de datos, dejándole realizar tareas como CREAR nuevos registros en una tabla, CONSULTAR
un registro, LISTAR todos los registros de una tabla, BORRAR algún registro, o MODIFICAR los
datos de algún registro.
Dentro de sus funciones también está la de interpretar y mostrar el mensaje de respuesta
que el Servlet arroje sobre el estado de la operación crud solicitada y se puede programar para
que también muestre todos los registros de una tabla (aunque esta parte también se puede
programar para que los datos se muestren en una página nueva)
Actividad:
Identifica las partes del formulario y asociales el número correspondiente
La página web del formulario debe contar mínimamente, con las siguientes partes:
NOTA: recordemos que para que la página web se pueda programar, debemos guardarla
como un archivo .JSP
NOTA: observemos que los botones llaman a la función “validaEnvia()” cuando se les da
click, y como parámetro entre el paréntesis cada botón envía el número que le corresponde.
https://es.wikipedia.org/wiki/JavaScript
Para escribir Código JavaScript en una página HTML, se debe hacer dentro de las siguientes
etiquetas:
<script type="text/javascript" >
……..//aquí va el código
</script>
2. Tanto para "borrar" como para "actualizar", se debe “consultar” primero el registro. Si
se pretende borrar o actualizar con el formulario vacío, el sistema debe advertir al
usuario que primero debe consultar el registro, para que los datos aparezcan en el
formulario
3. Debido a que el formulario siempre está pendiente de los datos que vienen de la base
de datos y a que no siempre hay datos para mostrar, en sus campos aparecerá la
palabra “null”; entonces vamos a crear una función que borre esa palabra y deje los
campos libres para los datos
Crearemos tres funciones de JavaScript que nos ayudarán con las validaciones antes
mencionadas y el envío de los datos, luego mostraremos como es que esas funciones son
llamadas por el código HTML:
quitanull():
Esta función verifica el contenido de uno de los campos, si es “null”, quiere decir que el resto
de los campos también lo tienen, entonces la reemplaza con un espacio en banco. Debe ser
cargada al inicio cuando se abre la pagina web, por eso se le hace un llamado desde la etiqueta
html:
<body onload="quitanull();">
function quitanull(){
if (document.formulario.txtid.value==="null"){
document.formulario.txtid.value="";
document.formulario.txtnombre.value="";
document.formulario.txtapellido.value="";
document.formulario.txtgenero.value="";
}
}
emptyForm():
Esta función verifica que dentro de cada uno de los campos haya un dato, si no es así, el
sistema saca un mensaje pidiendo el dato que falta. Al final, si todos los campos del
formulario tienen datos, la función devuelve como resultado el valor “true” (verdadero).
validaEnvia(opcion)
Lo primero que hay que notar de esta función, es que recibe como parámetro la variable
“opcion”, que en últimas es el número asociado a la operación crud que el usuario desea
realizar
o crear (1) o consultar (4)
o borrar (2) o listar (5)
o actualizar (3)
Ese número que recibe es guardado en el campo oculto llamado “txtopcion” y será enviado
junto con los datos del cliente hacia el servlet.
Pero también sirve aquí en este formulario para saber cuál fue la opción escogida por el
usuario y así poderle dar tratamiento a los datos con ayuda de una estructura de código
switch…. Case.
function validaEnvia(opcion){
document.formulario.txtopcion.value=opcion;
var id=document.formulario.txtid.value;
switch (opcion){
case "1":
if(emptyForm()){
document.formulario.submit();
}
break;
case "2":
if(id===""){
alert ("primero debe consultar el registro que quiere borrar");
}else{
document.formulario.submit();}
break;
case "3":
if(id===""){
alert ("primero debe consultar el registro que quiere modificar");
}else{
document.formulario.submit();}
break;
case "4":
document.formulario.txtid.value=prompt("digite el id:");
document.formulario.submit();
break;
case "5":
document.formulario.submit();
break;
}
}
Debemos tener en cuenta que los datos consultados vienen desde el servlet en forma de
variables, y éstas se deben mostrar en los campos del formulario ya sea para borrar el registro
o para modificarlo.
Para hacer que los datos se vean en el formulario, debemos agregar código java a la página en
el atributo “value” de cada campo; sabiendo que los datos vienen desde el servlet en las
siguientes variables: (id, nom, ape, gen) las etiquetas para los campos del formulario
quedarían así:
<table>
<tr>
<td><span>* </span>ID</td>
<td><input type="text" name="txtid" required value="
<%= request.getAttribute("id")%> "/></td>
</tr>
<tr>
<td><span>* </span>NOMBRE</td>
<td><input type="text" name="txtnombre" required value="
<%= request.getAttribute("nom")%> "/></td>
</tr>
<tr>
<td><span>* </span>APELLIDO</td>
<td><input type="text" name="txtapellido" required value="
<%= request.getAttribute("ape")%> "/></td>
</tr>
<tr>
<td><span>* </span>GENERO</td>
<td><input type="text" name="txtgenero" required value="
<%= request.getAttribute("gen")%> "/></td>
</tr>
</table>
4. MENSAJES DE CONFIRMACIÓN
(Deben ir al final de la página, todavía dentro del <body>)
Tan importante como los datos, son los mensajes que el sistema ofrece al usuario,
comunicándole el estado de la operación ejecutada
El mensaje es creado desde el servlet y viaja en forma de la variable “mensaje” que será
mostrada en la página con ayuda del siguiente código:
<%if(request.getAttribute("mensaje")!=null){%>
${mensaje}
<%}%>
Para listar todos los registros de la tabla a modo de reporte se debe tener en cuenta lo
siguiente:
La primera línea de código de la página web, será código java importando la clase Resultset
<%@page import="java.sql.ResultSet"%>
Luego, en donde se desee que aparezca la lista, se escribe el siguiente código:
<div id="resulset">
<!--LISTANDO TODOS LOS REGISTROS DE LA TABLA-->
---------------------------------------------------------------------------------------------------------------------------
CAPITULO 5
EL DAO (Data Acces Object): DaoCliente.java
Código:
package modelo;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.logging.Level;
import java.util.logging.Logger;
import modelo.BeanCliente;
import utilidades.*;
@Override
public boolean agregarRegistro() { //opcion 1.
try {
st.executeUpdate("insert into cliente
values('"+id+"','"+nombre+"','"+apellido+"','"+genero+"');");
listo=true;
Ing. Juan Diego Porras
SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016
PROGRAMACION DE SOFTWARE
@Override
public boolean borrarRegistro() {// opcion 2.
try {
st.executeUpdate("delete from cliente where id_cliente='"+id+"';");
listo=true;
} catch (SQLException ex) {
Logger.getLogger(DaoCliente.class.getName()).log(Level.SEVERE, null, ex);
}
return listo;
}
@Override
public boolean actualizarRegistro() { //opcion 3.
try {
st.executeUpdate("update cliente set
nom_cliente='"+nombre+"',ape_cliente='"+apellido+"',genero_cliente='"+genero+"' where
id_cliente='"+id+"';");
listo=true;
@Override
public ResultSet consultarRegistro() { //opcion 4.
try {
rs = st.executeQuery("SELECT id_cliente,nom_cliente,ape_cliente, genero_cliente
FROM cliente where id_cliente='"+id+"';");
} catch (SQLException ex) {
Logger.getLogger(DaoCliente.class.getName()).log(Level.SEVERE, null, ex);
}
return rs;
}
@Override
public ResultSet listarTabla() { //opcion 5.
try {
Ing. Juan Diego Porras
SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016
PROGRAMACION DE SOFTWARE
CAPITULO 6
EL SERVLET:
Primero se tienen que capturar los datos que vienen del formulario y convertirlos al tipo
requerido para procesarlos:
Código:
String id=request.getParameter("id_cliente");
String nombre=request.getParameter("nom_cliente") ;
String apellido=request.getParameter("ape_cliente") ;
String genero=request.getParameter("genero_cliente");
int opcion=Integer.parseInt(request.getParameter("txtOpcion"));
Lo segundo es:
Lo tercero es: De acuerdo a la variable “opcion” que es la que tiene el número de la opción
escogida por el usuario, se procesaran los datos, esto con ayuda de una estructura “switch –
case”, asi:
------------------------------------------------------------------------------------
switch(opcion){
default:
request.getRequestDispatcher("index_1.jsp").forward(request, response);
break;
}
BIBLIOGRAFIA