Arquitectura Del Proyecto (MVC) - Explicacion

SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016

PROGRAMACION DE SOFTWARE
PROYECTO: FORMULARIO CRUD PARA GESTIONAR UNA TABLA DE LA BASE DE DATOS

(OPERACIONES CRUD)
PATRON DE ARQUITECURA MODELO – VISTA – CONTROLADOR (MVC)
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
Ing. Juan Diego Porras

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…

GENERALIDADES DEL PATRON MVC

(Esquema adaptado para este proyecto en especial)
Patrón de arquitectura MVC

“En el patrón de arquitectura de software “Modelo Vista Controlador” (MVC), s e separan
los datos y la lógica de negocio de una aplicación, de la interfaz de usuario y del módulo
encargado de gestionar los eventos y las comunicaciones. Para ello MVC propone la
construcción de tres paquetes de componentes distintos que son el modelo, la vista y el
controlador, es decir, por un lado define componentes para la representación de la
información, y por otro lado para la interacción del usuario. Este patrón de diseño se basa en
las ideas de reutilización de código y la separación de conceptos, características que buscan
facilitar la tarea de desarrollo de aplicaciones y su posterior mantenimiento.”
Wikipedia
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.
ELEMENTOS NUEVOS EN EL ESQUEMA:

BEAN: es una clase que encapsula los datos que vienen del formulario, para que no se pierdan
durante la ejecución 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.
GENERALIDADES DEL EJEMPLO

Este es el modelo de la base de datos para el ejemplo, de la cual solo usaremos la tabla de
“cliente” y sus campos:
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
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
GENERALIDADES DEL PROYECTO
LÓGICA DETRÁS DE LAS OPERACIONES CRUD DEL EJEMPLO:
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.
NOTA: Consultar un registro es prerrequisito para eliminar y modificar registros.
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”.
PARA EL EJEMPLO SI SE VA A IMPLEMENTAR UN BORRADO FISICO DE UN REGISTRO EN LA BASE

DE DATOS, SOLO COMO EJERCICIO DEMOSTRATIVO
5. LISTAR EL CONTENIDO DE UNA TABLA DE LA BD (REPORTE)

Esta opción no tiene prerrequisitos ni validaciones, es una orden directa al Servlet para
que muestre el contenido completo de una tabla de la base de datos. Al hacer clic en esta
opción se generará automáticamente una página nueva con el contenido solicitado.
Esta consulta se llama “REPORTE” y debe tener la opción de imprimirse.
CAPITULO 0: ARMANDO LA ESTRUCTURA DEL PROYECTO (NETBEANS)
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)
Miremos los pasos para lleva a cabo lo que se enuncio anteriormente………..

PASO #1: CREANDO LA ESTRUCTURA DEL PROYECTO

Paso #2: CREANDO LA ESTRUCTURA DEL PROYECTO

Paso #3: CREANDO LA ESTRUCTURA DEL 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

Paso #4: Crear paquetes:

(cilc derecho sobre la carpeta “Source Packages”)

Paso #5: Crear paquetes
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

AL FINAL, EL PROYECTO TENDRÁ UNA ESTRUCTURA COMO LA SIGUIENTE:
DESCRIPCION DE CARPETAS:
Web Pages: Contendrá todas las

páginas web que vamos a crear.
Source Packages: contendrá las clases

de java que componen el proyecto
(Servlet, Dao, Bean, ClassConex,
interfaceCRUD)
Libraries: contendrá las librerías

adicionales y necesarias para que el
proyecto funcione, entre ellas está el
Driver para bases de datos MySQL
Configuration Files: archivos de

configuración del proyecto

CAPITULO 1: LA CONEXIÓN A LA BASE DE DATOS (ClassConex)

Recordemos el esquema….
ClassConex es una clase de java cuya

función es establecer la conexión
entre el programa que se está
desarrollando y la base de datos
La conexión se debe abrir cada vez

que se vaya a consultar la base de
datos, y se debe cerrar una vez
concluya cada transacción o
consulta.
NOTA MUY IMPORTANTE!!!:

Antes de siquiera intentar escribir la clase para conectar el
programa con la base de datos debemos importar un paquete de
librerías especial para trabajar con bases de datos MySQL,
llamado: “MYSQL JDBC Driver”
IMPORTANDO EL DRIVER PARA BASES DE DATOS

MYSQL
Un Driver de una base de datos es un paquete de librerías

o clases prediseñadas, que permiten crear una conexión
y facilitan hacer transacciones y consultas a la misma.
Miremos lo que hay que hacer para incorporar el Driver

para el motor de base de datos MySQL en este
proyecto…..
PASO #1: Clic derecho sobre la carpeta “libraries” del

proyecto, y se adiciona la librería

PASO #2
Luego seleccionamos la librería:

“MySQL JDBC Driver” y hacemos clic
en el botón “Add Library”
Después de todo, la carpeta

“Libraries” en el proyecto, debe
quedar de la siguiente manera:
---------------------------------------------------------------------------------------------------------------------------
LA CLASE: ClassConex.java
 Esta clase se escribe con el propósito de utilizar el Driver y crear

la conexión necesaria a la base de datos.
 Dentro del proyecto estará ubicada en el paquete “utilidades”.
 Para establecer una conexión se necesitan 4 parámetros o
variables de tipo String:
driver = // contiene el nombre de la librería que se ha de usar

para crear la conexión
urlbd = // ruta donde se encuentra la base de datos en el equipo
usrbd = //usuario de la base de datos
passbd = //clave del usuario de la base de datos

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 class ClassConex {
public String driver,urlbd,usrbd,passbd;

public Connection conexion;
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);
}
}
public Connection ObtenerConexion()

{ return conexion;
}
public Connection CerrarConexion() throws SQLException

{ conexion.close();
conexion = null;
return conexion;
}
} //fin de la clase

CAPITULO 2: EL BEAN
Esta clase es usada para crear un objeto en el servlet

y encapsular (guardar) temporalmente los datos que
vienen del formulario.
El Bean es una clase que se vale de una serie de

variables privadas para encapsular los datos. Como las
variables son privadas no se les puede modificar su
contenido directamente, entonces esta clase usa
métodos get y set para ello:
Método get: para recuperar el valor de la variable

Método set: para establecer el valor de la variable
La clase se encuentra en el paquete “modelo” del proyecto.
CODIGO DEL ARCHIVO: BeanCliente.java
package modelo;
public class BeanCliente {

private String idCliente;
private String nombreCliente;
private String apellidoCliente;
private String generoCliente;
public BeanCliente(String idCliente, String nombreCliente, String apellidoCliente, String

generoCliente) {
this.idCliente = idCliente;
this.nombreCliente = nombreCliente;
this.apellidoCliente = apellidoCliente;
this.generoCliente = generoCliente;
}
public BeanCliente() {
}
public String getIdCliente() {

return idCliente;
}
public void setIdCliente(String idCliente) {

this.idCliente = idCliente;
}
public String getNombreCliente() {

return nombreCliente;
}
public void setNombreCliente(String nombreCliente) {

this.nombreCliente = nombreCliente;
}
public String getApellidoCliente() {

return apellidoCliente;
}
public void setApellidoCliente(String apellidoCliente) {

this.apellidoCliente = apellidoCliente;
}
public String getGeneroCliente() {

return generoCliente;
}
public void setGeneroCliente(String generoCliente) {

this.generoCliente = generoCliente;
}

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()
Luego, cuando sea el momento de utilizarlos desde el DAO, es cuando se escribe el

comportamiento de cada uno.
CODIGO DEL ARCHIVO: InterfaceCrud.java
package utilidades;
import java.sql.ResultSet;
public interface interfaceCRUD {

// número de opción:
public abstract boolean agregarRegistro(); // 1
public abstract boolean borrarRegistro(); // 2
public abstract boolean actualizarRegistro(); // 3
public abstract ResultSet consultarRegistro(); // 4
public abstract ResultSet listarTabla(); // 5

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
Formulario para captura de datos
Espacio para los mensajes
Menú de operaciones CRUD que se pueden

hacer con una base de datos

CARACTERISTICAS GENERALES DEL FORMULARIO CRUD
La página web del formulario debe contar mínimamente, con las siguientes partes:
1. formulario para capturar los datos

2. botones para seleccionar la opción crud (crear, consultar, modificar, eliminar, listar
registros)
3. validación y envío de datos (código)
4. forma de recibir y mostrar las respuestas que vienen del Servlet (código)
NOTA: recordemos que para que la página web se pueda programar, debemos guardarla
como un archivo .JSP
Analicemos cada una de las partes mencionadas……
1. FORMULARIO PARA CAPTURAR LOS DATOS Y BOTONES CRUD

 El formulario debe especificar a donde será enviada la información:
action=”ServletCliente”
 Todos los elementos del formulario, incluida la etiqueta <form….>, deben tener un nombre.
 Debemos construir una serie de botones para que el usuario elija cuál de las acciones crud
desea realizar (crear, borrar, actualizar ----- consultar, listar).
 Dentro del formulario debemos construir un campo oculto, …
<input type="hidden" name="txtopcion" value=""/>
…. que llevará un número asociado a la opción que el usuario haya escogido para el
tratamiento de los datos
o crear (1) un registro,
o borrar (2) un registro,
o actualizar (3) un registro,
o consultar (4),
o listar (5) – también se puede llamar reporte
 En el formulario deben estar marcados los campos obligatorios con un asterisco *
 Cada que se realice una acción sobre el formulario o se haga clic sobre un botón, debe salir
un mensaje que le indique al usuario el estado de esa acción:

CÓDIGO DEL FORMULARIO CRUD Y LOS BOTONES
<form action="ServletCliente" method="post" name="formulario">

<table>
<tr>
<td><span>* </span>ID</td>
<td><input type="text" name="txtid" required value=""/></td>
</tr>
<tr>
<td><span>* </span>NOMBRE</td>
<td><input type="text" name="txtnombre" required value=""/></td>
</tr>
<tr>
<td><span>* </span>APELLIDO</td>
<td><input type="text" name="txtapellido" required value=""/></td>
</tr>
<tr>
<td><span>* </span>GENERO</td>
<td><input type="text" name="txtgenero" required value=""/></td>
</tr>
</table>
<input type="hidden" name="txtopcion" value=""/>
<input type="button" value="agregar" onclick="validaEnvia('1')"/>

<input type="button" value="borrar" onclick="validaEnvia('2')"/>
<input type="button" value="actualizar" onclick="validaEnvia('3')"/>
//////
<input type="button" value="consultar" onclick="validaEnvia('4')"/>
<input type="button" value="listar" onclick="validaEnvia('5')"/>
</form>
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.
Esa y otras funciones las veremos a continuación……

2. VALIDACIÓN EN EL FORMULARIO JSP Y ENVÍO DE DATOS AL

SERVLET
Estas acciones se hacen a través de un Script (o código) de JavaScripit
JavaScript: “es un lenguaje de programación interpretado, dialecto del estándar ECMAScript.

Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y
dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como
parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas
web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side
JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF,
aplicaciones de escritorio (mayoritariamente widgets) es también significativo.
JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del
lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos
diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas
web. Para interactuar con una página web se provee al lenguaje JavaScript de una
implementación del Document Object Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y
únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor.
Actualmente es ampliamente utilizado para enviar y recibir información del servidor junto con
ayuda de otras tecnologías como AJAX. JavaScript se interpreta en el agente de usuario al
mismo tiempo que las sentencias van descargándose junto con el código HTML.”
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>
Estos códigos van dentro de las etiquetas <head> de la página.

Validar es lo mismo que verificar.

Entonces vamos a verificar ciertas condiciones mínimas que se deben cumplir, para que el
formulario envíe los datos correctamente. En este caso validaremos solo 3 situaciones básicas:
1. Para agregar un registro se debe llenar el formulario, si el formulario se intenta enviar

sin datos, el sistema debe advertir al usuario.
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
Entonces aquí vamos…….
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:
1. quitanull() para eliminar la palabra “null”

para verificar que el formulario ha sido diligenciado, antes de
2. emptyForm()
poder mandarlo al servlet
Función encargada de llamar a las otras cuando se necesiten,
3. validaEnvia(opcion) recibe como parámetro un número que representa la opción
escogida por el usuario, para el tratamiento

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).
function emptyForm(){ Esta función es llamada

dentro de la función
if(document.formulario.txtid.value===""){ validaEnvia()
alert ("escriba el número del documento");
document.formulario.txtid.focus();
}else if(document.formulario.txtnombre.value===""){
alert ("escriba el nombre del cliente");
document.formulario.txtnombre.focus();
}else if(document.formulario.txtapellido.value===""){
alert ("escriba el apellido del cliente");
document.formulario.txtapellido.focus();
}else if(document.formulario.txtgenero.value===""){
alert ("escriba el genero del cliente");
document.formulario.txtgenero.focus();
}else{
return true;
}
}

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.
El formulario se envía con la función “submit()”
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:");
break;
case "5":
break;
}
}

3. MOSTRANDO LOS DATOS CONSULTADOS DE LA BASE DE

DATOS, EN EL FORMULARIO
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}
<%}%>
LISTAR TODOS LOS REGISTROS DE UNA TABLA EN LA PÁGINA DEL FORMULARIO
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">

<%ResultSet rs = (ResultSet) request.getAttribute("resultset");

if (rs != null) {%>
<table border="1">
<tr>
<td>ID</td><td>NOMBRE</td><td>APELLIDO</td><td>GENERO</td>
</tr>
<%while (rs.next()) {%>
<tr>
<td> <%=rs.getString(1)%></td>
</tr>
<%}%>
</table>
<%}%>
</div>
CODIGO COMPLETO DEL FORMULARIO (documento anexo)
---------------------------------------------------------------------------------------------------------------------------
CAPITULO 5
EL DAO (Data Acces Object): DaoCliente.java
El DAO se encarga de ejecutar las sentencias SQL que

harán las transacciones con la base de datos, como
consultas, actualización, eliminación y creación de nuevos
registros.
Para para establecer la conexión a la base de datos, el

DAO hereda los atributos y los métodos necesarios de la
clase ClassConex.java el cual fue explicado anteriormente,
e implementa la interface interfaceCrud.java para tomar
los nombres de los métodos CRUD y redefinirlos en
función de las sentencias necesarias para interactuar
con la tabla “Cliente” de la base de datos.
Recordemos que por cada formulario CRUD (página web con el

formulario), debe existir un SERVLET, un BEAN y un DAO
específicos para manejar los datos del CRUD; en este caso
estamos manejando datos del cliente del banco, entonces los
componentes son ServletCliente.java, BeanCliente.java,
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.*;
public class DaoCliente extends ClassConex implements interfaceCRUD{
public Connection conn=null;

public Statement st=null;
public ResultSet rs=null;
public boolean listo = false;
public String id="";

public String nombre="";
public String apellido="";
public String genero="";
public DaoCliente(BeanCliente cliente) {

super();
try {
conn = this.ObtenerConexion();
st = conn.createStatement();
id = cliente.getIdCliente();
nombre =cliente.getNombreCliente();
apellido =cliente.getApellidoCliente();
genero=cliente.getGeneroCliente();
} catch (SQLException ex) {
Logger.getLogger(DaoCliente.class.getName()).log(Level.SEVERE, null, ex);
}
}
@Override
public boolean agregarRegistro() { //opcion 1.
try {
st.executeUpdate("insert into cliente
values('"+id+"','"+nombre+"','"+apellido+"','"+genero+"');");
listo=true;

}
return listo;
}
@Override
public boolean borrarRegistro() {// opcion 2.
try {
st.executeUpdate("delete from cliente where id_cliente='"+id+"';");
listo=true;
}
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;

}
return listo;
}
@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+"';");
}
return rs;
}
@Override
public ResultSet listarTabla() { //opcion 5.
try {
rs = st.executeQuery("SELECT id_cliente,nom_cliente,ape_cliente, genero_cliente

FROM cliente order by id_cliente;");
}
return rs;
}
CAPITULO 6
EL SERVLET:
Es la clase de java que recibe los datos

del formulario y utiliza un objeto DAO
para realizar las operaciones o
transacciones con la base de datos; es
decir, el Servlet se encarga de decidir
qué hacer con los datos que recibe del
formulario.
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");
//se captura el dato y se hace la conversion a entero
int opcion=Integer.parseInt(request.getParameter("txtOpcion"));

Lo segundo es:
a. Crear un BEAN para guardar temporalmente los datos capturados

b. Crear un objeto a partir del DAO que estemos manejando, para poder hacer las consultas y
transacciones con la BD (DaoCliente), Este objeto DAO recibe como parámetro el objeto
BEAN creado anteriormente
c. Por ultimo creamos un objeto de tipo ResultSet, donde guardaremos el resultado de las
consultas a la BD para mostrarlo cuando se necesite
-------------------------------------------------
a. BeanCliente BCliente=new BeanCliente(id,nombre,apellido,genero);
b. DaoCliente DCliente=new DaoCliente(BCliente);
c. ResultSet rs;
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:
si la variable opc = 1 entonces la opción es crear

si la variable opc = 2 entonces la opción es eliminar
si la variable opc = 3 entonces la opción es actualizar
si la variable opc = 4 entonces la opción es consultar
si la variable opc = 5 entonces la opción es listar
------------------------------------------------------------------------------------
String mExito="Operacion exitosa, Felicidades!!!!";

String mError="Operacion Fallida, Lo siento mucho!!!!";
switch(opcion){
case 1: // AGREGAR REGISTROS

if(DCliente.agregarRegistro()){
request.setAttribute("mensaje", mExito);
}else{request.setAttribute("mensaje", mError);}
request.getRequestDispatcher("index_1.jsp").forward(request, response);
break;
case 2://BORRAR REGISTROS

if(DCliente.borrarRegistro()){
break;
case 3://ACTUALIZAR REGISTROS

if(DCliente.actualizarRegistro()){
break;
case 4://CONSULTAR UN REGISTRO

rs=(ResultSet)DCliente.consultarRegistro();
try {
while(rs.next()){
request.setAttribute("id", rs.getString(1));
request.setAttribute("nom", rs.getString(2));
request.setAttribute("ape", rs.getString(3));
request.setAttribute("gen", rs.getString(4));
}
Logger.getLogger(ServletCliente.class.getName()).log(Level.SEVERE, null, ex);
}
break;
case 5://LISTAR TODOS LOS REGISTROS

rs=DCliente.listarTabla();
request.setAttribute("resultset", rs);
break;
default:
break;
}
BIBLIOGRAFIA
Modelo Vista Controlador. (2014, 8 de abril). Wikipedia, La enciclopedia libre. Fecha

de consulta: 12:30, abril 9, 2014 desde:
http://es.wikipedia.org/w/index.php?title=Modelo_Vista_Controlador&oldid=73683156
.

Arquitectura Del Proyecto (MVC) - Explicacion

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Arquitectura Del Proyecto (MVC) - Explicacion

Cargado por

Copyright:

Formatos disponibles

SENA - CENTRO DE SERVICIOS Y GESTION EMPRESARIAL

PROGRAMA DE ARTICULACION CON LA EDUCACION MEDIA - 2016

PROYECTO: FORMULARIO CRUD PARA GESTIONAR UNA TABLA DE LA BASE DE DATOS

Ing. Juan Diego Porras

Ing. Juan Diego Porras

GENERALIDADES DEL PATRON MVC

Patrón de arquitectura MVC

Ing. Juan Diego Porras

ELEMENTOS NUEVOS EN EL ESQUEMA:

GENERALIDADES DEL EJEMPLO

GENERALIDADES DEL PROYECTO

LÓGICA DETRÁS DE LAS OPERACIONES CRUD DEL EJEMPLO:

NOTA: Consultar un registro es prerrequisito para eliminar y modificar registros.

Ing. Juan Diego Porras

PARA EL EJEMPLO SI SE VA A IMPLEMENTAR UN BORRADO FISICO DE UN REGISTRO EN LA BASE

5. LISTAR EL CONTENIDO DE UNA TABLA DE LA BD (REPORTE)

Esta consulta se llama “REPORTE” y debe tener la opción de imprimirse.

CAPITULO 0: ARMANDO LA ESTRUCTURA DEL PROYECTO (NETBEANS)

Miremos los pasos para lleva a cabo lo que se enuncio anteriormente………..

Ing. Juan Diego Porras

PASO #1: CREANDO LA ESTRUCTURA DEL PROYECTO

Ing. Juan Diego Porras

Paso #2: CREANDO LA ESTRUCTURA DEL PROYECTO

Ing. Juan Diego Porras

Paso #3: CREANDO LA ESTRUCTURA DEL PROYECTO

Ing. Juan Diego Porras

Paso #4: Crear paquetes:

Ing. Juan Diego Porras

Paso #5: Crear paquetes

Ing. Juan Diego Porras

AL FINAL, EL PROYECTO TENDRÁ UNA ESTRUCTURA COMO LA SIGUIENTE:

Web Pages: Contendrá todas las

Source Packages: contendrá las clases

Libraries: contendrá las librerías

Configuration Files: archivos de

Ing. Juan Diego Porras

CAPITULO 1: LA CONEXIÓN A LA BASE DE DATOS (ClassConex)

ClassConex es una clase de java cuya

La conexión se debe abrir cada vez

NOTA MUY IMPORTANTE!!!:

IMPORTANDO EL DRIVER PARA BASES DE DATOS

Un Driver de una base de datos es un paquete de librerías

Miremos lo que hay que hacer para incorporar el Driver

PASO #1: Clic derecho sobre la carpeta “libraries” del

Ing. Juan Diego Porras

Luego seleccionamos la librería:

Después de todo, la carpeta

 Esta clase se escribe con el propósito de utilizar el Driver y crear

driver = // contiene el nombre de la librería que se ha de usar

Ing. Juan Diego Porras

public class ClassConex {

public String driver,urlbd,usrbd,passbd;

public Connection ObtenerConexion()

public Connection CerrarConexion() throws SQLException

Ing. Juan Diego Porras

Esta clase es usada para crear un objeto en el servlet

El Bean es una clase que se vale de una serie de

Método get: para recuperar el valor de la variable

La clase se encuentra en el paquete “modelo” del proyecto.

CODIGO DEL ARCHIVO: BeanCliente.java

public class BeanCliente {

public BeanCliente(String idCliente, String nombreCliente, String apellidoCliente, String