Anda di halaman 1dari 22

Universidad de Antioquia

Arquitectura de Software
Laboratorio Nro 1. Desarrollo de una Aplicacin en JSP utilizando Netbeans
1. Introduccin:Crearemos una simple aplicacin de tipo CRUD utilizando JSP en Netbeans. Esta contendr 4 operaciones dentro
del JSP.
o Insert : Inserta datos en la tabla STUDENT y los muestra.
o Update : Actualiza datos en la tabla STUDENT y los muestra..
o Delete: Elimina datos en la tabla STUDENT y los muestra.
o Search: Realiza una bsqueda de datos definidos por el ID del Estudiante en la tabla STUDENT y los muestra.
PASOS GLOBALES
1. Configurar la Base de Datos
2. Conectar la Base de Datos al Servidor de Aplicaciones Glassfish.
2.1 Crear Connection Pool
2.2 Crear Recurso JDBC
3. Crear Proyecto Web
3.1 Crear el modelo de clases con anotaciones JPA
3.2 Crear componentes DAO (EJB).
4. Crear la Unidad de Persistencia
5. Crear el componente Controller (Servlet)
6. Crear la pgina web (JSP)
7. Desplegar la aplicacin en el servidor de aplicaciones.
1.- Cargar Netbeans y crear la base de datos y luego realizar la conexin a la BD tal como
se muestra a continuacin:
1.1 En el tab Services de click con el botn derecho del mouse sobre el nodo MySQL
Server y haga click en Create Database. (Asegrese que el motor esta iniciado, si no es as
dele click sobre Start..

1.2 Escriba el nombre de la Base de Datos (llamela StudentDB)


1.3 Sobre el nodo de conexin de Bases de Datos, haga click con el botn derecho del ratn y elija la opcin
Connect..

1.4 Abra el nodo StudentDB y sobre Tables haga click con el botn derecho del ratn sobre la opcin Create Table
(Se crea la estructura de la tabla. El nombre de la tabla ser STUDENT).

1.5 Cree los campos relacionados en la siguiente tabla. Por el momento no nos preocuparemos de los tipos de
datos ya que esta base de datos es solo ilustrativa para nuestro ejemplo. Revise que el nodo de StudentDB
contenga cada nuevo campo creado.

COLUMN NAME
COLUMN NAME
studentId
Firstname
lastname
yearLevel

TYPE
INTEGER
VARCHAR(50)
VARCHAR(50)
INTEGER

2. Creando la aplicacin:
o Inicie NetBeans.
o Vaya al men File -> New project.

DETAIL
PRIMARY KEY
NOT NULL
NOT NULL
NOT NULL

o En la ventana de arriba. Seleccione categories y luego Java Web.


o Ahora seleccione Web Application y haga click en el botn next.
o Usted ver la ventana como aparece a continuacin.

o Aqu puede especificar el nombre del proyecto y la ruta donde almacenar los proyectos.
o Cuando usted da siguiente se mostrar la configuracin del servidor de aplicaciones.
o Seleccione como servidor de aplicaciones a GlassFish.
o Despus de dar al botn siguiente se mostrar la ventana para seleccionar un framework.
o No se utilizar frameworks aqu, as que no seleccione y haga click en Finalizar. Se crear nuestro proyecto.

O La pgina index.jsp se crear automticamente por defecto.


4. Creando un pool de conexiones a la BD:
o Vaya a la ventana del proyecto
Haga click en Glassfish luego seleccione JDBC Resource. Ver la siguiente figura:

o Seleccione create New_JDBC Connection Pool, De ahora un nombre al JNDI.


o El nombre del pool de conexiones lo llamaremos jdbc/StudentDB.
o Haga click en next, ahora se le preguntar por las propiedades del pool djelas por defecto y haga click en next.

o En la anterior figura coloque un nombre al Studentpool.


o Seleccione la conexin que ha sido creada previamente al conectar la base de datos y haga click en next

o Revise las propiedades del pool de conexin y haga click en el botn finish.
o Ahora abra dentro del proyecto la opcin Web pages -> WEB-INF -> web.xml
o Haga click en el tabulador references , y en la opcin Resource references haga click en Add.

o Coloque en nombre del recurso en el cuadro de texto. Este es el recurso JNDI que haba sido creado.
o Abra el archivo glassfish-resources.xml ubicado dentro de la carpeta Server Resources.
Verifique la siguiente configuracin

o Se crear un nombre con la referencia correspondiente al nombre JNDI.


A continuacin se creara un JAVA Class el cual permitir crear el POJO Student. Esta clase representar el modelo
del dominio de persistencia.

Edite el cdigo con las anotaciones @Entity, @Table, @NamedQueries, etc; que indicaran el comportamiento del
Entity Bean. Para agregar el constructor con parmetros y los setters / getters, recuede ubicarse con el cursos sobre
el editor de cdigo y dar click con el botn derecho del ratn y elegir la opcin Insert Code. En el men
contextual que aparece elegir Add Setter and Getter o Add Constructor segn sea el caso.
NOTA: Recuerde buscar el significado de cada anotacin empleada en este laboratorio.

Student.java
package com.udea.model;
import
import
import
import
import
import
import
import
import

java.io.Serializable;
javax.persistence.Column;
javax.persistence.Entity;
javax.persistence.GeneratedValue;
javax.persistence.GenerationType;
javax.persistence.Id;
javax.persistence.NamedQueries;
javax.persistence.NamedQuery;
javax.persistence.Table;

/**
*
* @author User
*/
@Entity
@Table
@NamedQueries(@NamedQuery(name="Student.getAll",query="SELECT e FROM Student
e"))
public class Student implements Serializable{
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column
private int studentId;
@Column
private String firstname;
@Column
private String lastname;
@Column
private int yearLevel;
public Student(int studentId, String
yearLevel) {
this.studentId = studentId;
this.firstname = firstname;
this.lastname = lastname;
this.yearLevel = yearLevel;
}

firstname,

public Student(){}
public int getStudentId() {
return studentId;
}
public void setStudentId(int studenId) {
this.studentId = studenId;

String

lastname,

int

}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public int getYearLevel() {
return yearLevel;
}
public void setYearLevel(int yearLevel) {
this.yearLevel = yearLevel;
}
}
A continuacin agregue un EJB de tipo Session Bean el cual representar el patrn DAO de nuestra capa de Lgica
del negocio. Llamelo StudentDAO de tipo Stateless y con interfaz Local. Ubiquelo en el Package com.udea.dao.

Por cada mtodo de negocio se colocar automticamente la referencia hacia la interfaz que actuar como un
Facade contra el servlet. El proceso se ve en las siguientes figuras:

Asegrese de agregar los siguientes mtodos de negocio en la clase.

StudentDao.java
@Stateless
public class StudentDao implements StudentDaoLocal {
@Override
public void addStudent(Student student) {
}
@Override
public void editStudent(Student student) {
}
@Override
public void deleteStudent(int studentId) {
}

@Override
public Student getStudent(int studentId) {
return null;
@Override
public List<Student> getAllStudents() {
return null;
}

}
Agregue la Unidad de Persistencia (P:U) como se presenta a continuacin:

Asegrese que la estrategia de generacin de tablas este colocada en None, debido a que ya se tiene creada
previamente la tabla en la base de datos.
Modifique la clase StudentDAO para que se agregue la funcionalidad de cada mtodo del negocio por medio de la
clase Entity Manager.
StudentDao.java
@Stateless
public class StudentDao implements StudentDaoLocal {
@PersistenceContext
private EntityManager em;
@Override
public void addStudent(Student student) {
em.persist(student);
}
@Override
public void editStudent(Student student) {
em.merge(student);
}
@Override
public void deleteStudent(int studentId) {
em.remove(getStudent(studentId));
}
@Override
public Student getStudent(int studentId) {
return em.find(Student.class, studentId);
}
@Override
public List<Student> getAllStudents() {
return em.createNamedQuery("Student.getAll").getResultList();
}
}

Ahora Agregue el Servlet llamado StudentServlet, que actuar como un controlador de la vista.

Verifique que este activado la opcin de usar el descriptor de despliegue.

Sobre el cdigo, agregue en Insert Code la opcin Call Enterprise Bean y agregue la Interfaz Local de la fachada
de StudentDAO.

Asegrese que este referenciado el acceso a los mtodos del negocio con la interfaz a travs de la llamada con la
anotacin @EJB

Edite el mtodo processRequest() del servlet para que se capture los datos desde el formulario que actuara como la
vista del sistema.
protected void processRequest(HttpServletRequest request, HttpServletResponse
response throws ServletException, IOException {
String action=request.getParameter("action");
String studentIdStr= request.getParameter("studentId");
int studentId=0;
if(studentIdStr!=null && !studentIdStr.equals(""))
studentId=Integer.parseInt(studentIdStr);
String firstname=request.getParameter("firstname");
String lastname=request.getParameter("lastname");
String yearLevelStr=request.getParameter("yearLevel");
int yearLevel=0;
if(yearLevelStr!=null && !yearLevelStr.equals(""))
yearLevel=Integer.parseInt(yearLevelStr);

Student student=new Student(studentId,firstname,lastname,yearLevel);


if("Add".equalsIgnoreCase(action)){
studenDao.addStudent(student);
}

else

}else
}else

if("Edit".equalsIgnoreCase(action)){
studenDao.editStudent(student);
if("Delete".equalsIgnoreCase(action)){
studenDao.deleteStudent(studentId);
if("Search".equalsIgnoreCase(action)){
student=studentDao.getStudent(studentId);

}
O EJERCICIO
Cree dentro del index.jsp una vista que al momento de correrla en el sistema se parezca como lo observado en las
siguientes figuras

5. Creando la pgina Intert.jsp


o Abra la pagina Insert.jsp
o Entre la etiqueta <body> coloque el cdigo HTML para crear el formulario.
La siguiente figura muestra el formulario deseado:
.

o Cuando haga click en el botn submit se har un request a la misma pagina. Esto con el objetivo de actualizar de
nuevo la tabla de datos.
o El cdigo HTML ser el siguiente.

o Encima de la etiqueta <form> coloque tres etiquetas del tipo c:set para obtener el valor del ID,el nombre y la
rama del estudiante
o La primera vez que se llaman a estos valores permanecen nulos.
o Cuando se retorna a esta pagina despus de hacer click en el botn submit, se toman los parmetros desde el
formulario que deseamos enviar a la base de datos.
<c:set var="id" value="${param.id}"/>
<c:set var="name" value="${param.name}"/>
<c:set var="branch" value="${param.branch}"/>

O Para utilizar la librera de etiquetas estndar, se debe incluir las siguientes dos lneas al inicio de la pagina JSP.
Estas son directivas obligatorias.
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
Despus de colocar estos estamentos se deber insertar una etiqueta de tipo JSTL IF. Para hacerlo vaya a la ventana
de la paleta, y bajo la etiqueta JSP, seleccione y arrastre el elemento JSTL IF a la aplicacin despus de la ultima
etiqueta c:set. En la ventana que aparece coloque los valores como se observa en la figura:

Como se observa en la figura, si la condicin es verdadera entonces y solo entonces se podr insertar los
datos en la BD.
Entonces, todo el cdigo dentro de la etiqueta c:if ser ejecutado si y solo si la condicin es verdadera.
Dentro de la etiqueta c:if se escribir el cdigo para insertar la consulta.
Para hacerlo, vaya de nuevo a la ventana de la paleta, bajo la etiqueta Database, seleccione y arrastre la
opcin DB Insert a la aplicacin dentro de la etiqueta c:if.
En la siguiente figura usted deber insertar el nombre de Data source que hemos creado y luego insertar la
consulta. No olvide darle un nombre a la variable.

o Ahora se insertar el valor de los parmetros que colocamos en la etiqueta c:set.


o Despues del estamento INSERT, colocamos tres etiquetas sql:param para colocar los valores a tomar en por el
signo de interrogacin (?) utilizado dentro del estamento.
o Adicionamos los siguientes tres estamento despus del estamento INSERT pero dentro de la etiqueta sql:update.
<sql:param value="${id}"/>
<sql:param value="${name}"/>
<sql:param value="${branch}"/>
o Ahora, el cdigo de insercin de datos ha terminado.
o Debemos imprimir el detalle de los datos de la tabla STUDENT.
o Para generar el reporte, vamos a la ventana de la paleta, bajo la etiqueta Database, seleccionamos y arrastramos el
elemento DB Report hacia la aplicacin despus de la etiqueta </form> .
o Se debe insertar la consulta, el nombre del data source y el nombre de la variable como se observa a
continuacin.

o Se adicionar automticamente un fragmento de cdigo.


o Despus de insertar los datos en la BD, se mostrar automticamente los datos en una tabla HTML.
La siguiente figura muestra la ejecucin de la aplicacin en el navegador. Verifique la insercin de los datos en la
BD.

EJERCICIO
Complete la aplicacin y cree las vistas de actualizacin y borrado de datos. Siga el mismo procedimiento de la
vista de insercin e investigue cual es la mejor forma de aplicar los JSTL de JSP aplicados a estas dos operaciones.
A continuacin se presenta como deben quedar las vistas propuestas.
Pagina Update.jsp

Pagina Delete.jsp