Guia Práctica de Desarrollo de Aplicaciones Web

Elaboración: Aprobación y fecha:
UNIDAD DE LABORATORIO RESOLUCION Nº 174-2019-UPTELESUP-R

Lima, 18 de marzo de 2019
ESTRUCTURA DE GUÍA DE PRÁCTICAS DE
LABORATORIO DE DESARROLLO DE APLICACIONES EN Página 2 de 76
WEB
ESTRUCTURA DE GUÍA DE
PRÁCTICAS DE LABORATORIO
DESARROLLO DE
APLICACIONES EN WEB
FACULTAD DE EDICIÓN
PRIMERA INGENIERÍA Y
ARQUITECTURA
2018
Este documento es propiedad de la UPTELESUP, se prohíbe su reproducción total o parcial sin la autorización expresa (escrita) de la Gerencia General o de un
representante legal.
WEB
UNIVERSIDAD PRIVADA TELESUP
Rector
Dr. Luis Alberto Colán Villegas
Vicerrector Académico
Dr. Anaximandro Odilo Perales Sánchez
Oficina de laboratorio
Mg. Bernardino Morales Fernández
Revisado Por:
Decano de la Facultad de Ingeniería y Arquitectura
Dr. Marco Antonio Torrey Motta
Director de la Escuela Profesional de Ingeniería Industrial y Comercial
WEB
Dr. Manuel Hilario Falcon
PRESENTACIÓN
La presente Guía de Prácticas de Laboratorio, tiene por finalidad reforzar el aprendizaje
cubierto por la parte teórica, con el desarrollo de las prácticas en el Laboratorio. En las
páginas de este documento, la información se presenta de forma general, de modo tal, que
sirva a los docentes y a todos los estudiantes de las carreras que tengan como parte de su
programa la asignatura Desarrollo de Aplicaciones en Web. Esta edición, cuenta con 15
actividades que se llevarán a cabo en el Laboratorio de la asignatura mencionada.
Lo que caracteriza a cada una de estas prácticas es una estructura común, que sea de fácil
entendimiento el hecho de que cada práctica planteada pueda ser reproducida en
Laboratorio. Tras plantear los objetivos, en los fundamentos teóricos se detallan los
contenidos básicos que ayudan a comprender mejor cada sesión de Laboratorio, los cuales
deben ser repasadas por el alumno antes de comenzar cada sesión de Laboratorio.
El objetivo del documento es otorgar una guía para planificar las prácticas y desarrollar la
motivación en los estudiantes, de forma que el estudiante encuentre su propia forma de
aprender a través de la experimentación. Cada una de las sesiones se ha ensayado
cuidadosamente por los docentes del curso con el apoyo de alumnos de la carrera
profesional, permitiéndoles comprobar que cada una de las prácticas en los Laboratorios se
realice en un tiempo prudente.
Finalmente, esta guía de carácter práctico y editado por la Facultad de Ingeniería y

Arquitectura de la Universidad Privada TELESUP, refleja la autoridad de nuestros docentes en
la materia y el fortalecimiento de los alumnos en nuestros Laboratorios.
WEB
TABLA DE CONTENIDO
I. GENERALIDADES..................................................................................................................... 8
1. INTRODUCCIÓN.......................................................................................................................................................... 8
2. OBJETIVOS................................................................................................................................................................... 9
3. ALCANCES Y/O LIMITACIONES................................................................................................................................... 9
4. REGLAS DEL COMPORTAMIENTO DEL ALUMNO EN EL LABORATORIO DE DESARROLLO DE A. WEB...........10
5. ESTRUCTURA DE LOS INFORMES DEL LABORATORIO DE DESARROLLO DE APLIC. WEB.................................10
II. PLAN DE ACTIVIDADES..................................................................................................... 15
LABORATORIO Nº 01-JAVA COLLECCTIONS, SERVELTS.............................................................................................. 15
LABORATORIO Nº 02-MANEJO Y USO DE SESIONES.................................................................................................. 18
LABORATORIO Nº 03-JAVABEANS................................................................................................................................. 22
LABORATORIO Nº 04-INTERFACES JDBC...................................................................................................................... 26
LABORATORIO Nº 05-PATROM MVC............................................................................................................................ 29
LABORATORIO Nº 06-PREPAREDSTATEMENT, CALLABLESTATEMENT......................................................................32
LABORATORIO Nº 07-REPORTES CON IREPORT.......................................................................................................... 36
LABORATORIO Nº 08-TECNOLOGÍAS AJAX.................................................................................................................. 40
LABORATORIO Nº 09-APLICACIÓN DEL MODELO DOM/BOM .................................................................................44
LABORATORIO Nº 10-CONSULTAS A BASE DE DATOS USANDO AJAX......................................................................47
LABORATORIO Nº 11-APLICACIONES CON JQUERY.................................................................................................... 51
LABORATORIO Nº 12-LIBRERIAS JQUERY, JQGRID...................................................................................................... 54
WEB
GLOSARIO
 APA: Normas de la American Psychological Association - APA, son hoy en día uno de los
estándares más reconocidos para la transmisión del conocimiento científico y académico. El
Manual de publicaciones de la APA contiene directrices para todos los aspectos relacionados
con la redacción, especialmente en las ciencias sociales, desde la determinación de la autoría
hasta la construcción de un cuadro para evitar el plagio, y para la precisión en las referencias
bibliográficas.
 Datos o datos brutos: Son los valores cualitativos o cuantitativos mediante los cuales se
miden las características de los objetos, sucesos o fenómenos a estudiar antes de ser
organizados y analizados. Los datos son colecciones de un número cualquiera de observaciones
relacionadas entre sí
 VANCOUVER: Las normas Vancouver o el estilo Vancouver es un tipo de reglas que se han
conformado para buscar un criterio de uniformidad al momento de preparar y publicar un
manuscrito que esté vinculado con las Ciencias de la Salud. En ese orden de ideas, las normas
Vancouver son usadas como un medio para lograr una cierta unicidad al momento de realizar
citas bibliográficas.
WEB
GENERALIDADES
1. INTRODUCCIÓN
La presente estructura de guía de práctica tiene como finalidad servir de guía al

docente como al alumno de la UPTELESUP en la elaboración de las Guías de Práctica
de la asignatura Desarrollo de Aplicaciones en Web de la Facultad de Ingeniería y
Arquitectura.
El documento consta de 02 partes, una está referida a las generalidades que permitirá
al estudiante poder aplicar la parte teórica y dos la parte práctica de laboratorio.
Para el desarrollo de la asignatura Desarrollo de Aplicaciones en Web, se debe

conocer contenidos de diseño y modelamiento de base de datos, la programación
web, la programación orientado a objetos y ciertos patrones de desarrollo.
Las prácticas se centran en desarrollo de aplicaciones mediante el lenguaje Java, con

el uso de sesiones, el acceso a base de datos con JDBC, el uso de del patrón MVC, la
creación de reportes y el desarrollo de la capa vista haciendo uso de Jquery.
Para las prácticas se harán uso los siguientes programas: como gestor de base de
datos PostgreSql con el lenguaje SQL, el editor Netbeans y Eclipse para Java y otros
como herramientas de desarrollo.
WEB
2. OBJETIVOS
La asignatura Desarrollo de Aplicaciones en Web se enfoca en analizar, diseñar y

desarrollar una aplicación web compuesta de páginas dinámicas en JSP aplicando
Ajax, JQuery y Frameworks MVC con una actitud responsable y comprometida a
trabajar en equipo.
3. ALCANCES Y/O LIMITACIONES
La finalidad de esta guía es complementar la teoría y contribuir a la formación del

estudiante para la solución de problemas de sistemas reales de mucha mayor
complejidad. Dentro de lo posible se debe prescindir de los sistemas digitales de
adquisición de datos, para que el estudiante se enfrente personalmente a la toma de
datos, los analice y extraiga sus propias conclusiones.
Una de las limitaciones en algunos de los laboratorios es la disponibilidad de equipos

ya sea por el espacio que ocupen o por ser sumamente costosos y serán solo de
carácter demostrativo. En estos casos, se exige una mayor atención por parte del
estudiante, y una explicación detallada y fácil de entender por parte del profesor.
4. REGLAS DEL COMPORTAMIENTO DEL ALUMNO EN EL LABORATORIO DE

DESARROLLO DE APLICACIONES EN WEB
 Leer la Guía de laboratorio de acuerdo a la práctica que corresponde.
 Está prohibido fumar, comer o beber en el laboratorio.
 Los estudiantes deben comportarse de forma respetuosa entre compañeros y

con sus profesores.
 Si no se está seguro de lo que se está haciendo pregunte al profesor a cargo.
WEB
 Procurar no andar de un lado a otro sin motivo, y, sobre todo, no correr dentro
del laboratorio.
 Mantener el laboratorio de computo limpio y ordenado.
5. ESTRUCTURA DE LOS INFORMES DEL LABORATORIO DE DESARROLLO DE

APLICACIONES EN WEB PARA EL ALUMNO
El informe del laboratorio debe redactarse con cohesión y claridad a fin de ser de fácil
entendimiento para el lector. Por ejemplo, cada sección del informe debe estar
resaltada y organizada en una secuencia apropiada que sea fácil de entender. En el
contexto del curso para el que se ha escrito, el informe del laboratorio sirve para
describir lo que realizó durante dicha sesión, de cómo manipuló los datos registrados
y cómo llegó a la conclusión de sus resultados. Si bien puede parecerle lógico escribir
un informe en una secuencia cronológica o histórica, tal enfoque no es el más útil
para los lectores, quienes encontrarían que un informe de este tipo es difícil de
revisar en busca de los elementos de mayor interés. Piense en el informe como un
documento eficiente, es decir, pruebe que comprendió lo que realizó y que puede
aplicarlo en situaciones prácticas.
Las secciones requeridas para completar los informes de laboratorio de Programación

Estructurada I deben escribirse en el orden que se detalla a continuación:
1) Portada. La siguiente información debe aparecer en la carátula:
 Título, que indique el experimento de la práctica.

 Fecha de realización del experimento.
 Fecha de entrega del informe.
 Nombre de los alumnos que realizaron el experimento.
 Identificación del laboratorio donde se realizó el experimento.
 Nombre(s) del Profesor y/o Auxiliar del Laboratorio.
WEB
2) Objetivos. Indique el objetivo(s) del experimento de forma concisa, en forma de

párrafo. La guía de laboratorio o la hoja de instrucciones ayudarán aquí. El
hecho de que los experimentos en cursos de laboratorio se utilicen para educar
a los estudiantes es un objetivo secundario, y no debe mencionarse en el
informe. En otras palabras, el objetivo escrito en su informe nunca debe ser
"familiarizar a los estudiantes con el uso del equipo". El objetivo debe indicar el
problema, procedimiento y datos que intentan responder. Algunos verbos clave
que usará en el objetivo pueden incluir "investigar", "trazar", "medir" o
"comparar". La sección debe informar al lector por qué se realizó el proyecto.
3) Marco Teórico. Se debe proporcionar una descripción concisa de la teoría

relevante para comprender otras partes del informe, como el análisis de datos o
las secciones de discusión. Esta sección a veces se combina con la introducción
y la sección de antecedentes, si esto resulta en un informe más legible. Deben
introducirse las ecuaciones relevantes y deben definirse todos los términos que
se utilizarán en el informe. Las ecuaciones deben presentarse como partes de
oraciones completas. Debe citar las Fuentes de información según las normas
APA1 y VANCOUVER2
4) Descripción del Experimento. Proporcione un dibujo esquemático ordenado,

correcto y claro de la configuración experimental, que muestre todas las
interconexiones e interrelaciones, de corresponder fotografías. Incluya una
breve descripción textual que haga referencia a todas las partes del dibujo
esquemático. Esta sección debe tener toda la información necesaria para que
un lector duplique la configuración de forma independiente. Haga una lista de
todos los equipos y materiales utilizados en el experimento. El lector debe
1
http://normasapa.com/formato-apa-presentacion-trabajos-escritos/
2
referenciar
WEB
poder conectar cada elemento de esta sección al elemento en la sección

Descripción de la configuración experimental.
5) Procedimiento. - Detalle el procedimiento realizado en el laboratorio para llevar

a cabo el experimento paso a paso. Se debe proporcionar suficiente
información para permitir que el lector repita el experimento de manera
idéntica. Se deben describir los procedimientos especiales utilizados para
asegurar condiciones experimentales específicas, o para mantener una
precisión deseada en la información obtenida. Como en todas las secciones del
informe, el procedimiento describe lo que se hizo en el laboratorio. Por lo tanto,
debe escribirse en tiempo pasado. Copiar el procedimiento de un guía de
laboratorio sería un reflejo inexacto del trabajo realizado en el laboratorio y no
es aceptable.
6) Toma de Datos. Todos los datos brutos pertinentes obtenidos durante el

experimento se presentan en esta sección. Esta sección debe contener solo
información bruta, no resultados de la manipulación de datos. Si este último
necesita ser incluido en la misma tabla que los datos brutos en interés del
espacio o estilo de presentación, los datos brutos deben identificarse
claramente como tales. El tipo de datos variará de acuerdo con el experimento
individual y puede incluir números, bocetos, imágenes, fotografías, etc. Todos
los datos numéricos deben tabularse cuidadosamente. Cada tabla, figura y
gráfico en el informe debe tener un título o etiqueta y un número al que se
hace referencia en el texto escrito. Las variables tabuladas o representadas
deben identificarse claramente con un símbolo o nombre. Las unidades, si las
hay, siempre deben anotarse claramente.
7) Análisis de Datos. Esta sección describe en forma de texto cómo se llevó a cabo
la manipulación de fórmulas de los datos y proporciona las ecuaciones y los
WEB
procedimientos utilizados. Si se usa más de una ecuación, todas las ecuaciones

se deben enumerar secuencialmente de forma que se les pueda hacer
referencia en otra parte del texto. Los resultados finales del análisis de datos se
informan en esta sección, usando figuras, gráficos, tablas u otras formas
convenientes. Esta sección debe incluir declaraciones sobre la exactitud de los
datos, respaldados cuando sea necesario por un análisis de errores.
8) Discusión y Resultados. Esta sección está dedicada a la interpretación del

resultado del experimento. La información del análisis de datos es examinada y
explicada. Debe describir, analizar y explicar (no solo repetir) todos sus
resultados. Esta sección debe responder a la pregunta "¿Qué me dicen los
datos?" Describa cualquier proyección lógica del resultado, por ejemplo, la
necesidad de repetir los experimentos o medir ciertas variables de manera
diferente. Evalúe la calidad y precisión de su procedimiento. Compare sus
resultados con el comportamiento esperado, si tal comparación es útil o
necesaria, y explique cualquier comportamiento inesperado.
9) Conclusiones. Las conclusiones deben basarse en resultados reales. Explica el

significado del experimento y las implicaciones de los resultados. Examina el
resultado a la luz de los objetivos establecidos. Busca sacar conclusiones en un
contexto más amplio a la luz de los resultados.
10) Referencias. Utilizando el formato bibliográfico estándar, cite todas las fuentes
publicadas que consultó durante la realización del experimento y la preparación
de su informe de laboratorio. Enumere los autores, título del articulo o libro,
nombre de la revista o editorial, según corresponda, número (s) de página, si
corresponde, y la fecha. Si una fuente está incluida en la lista de referencias,
también debe referirse a los lugares apropiados en el informe.
WEB
11) Apéndice. Los detalles de análisis, cálculos, etc. que se mencionaron en el

cuerpo principal del informe deben incluirse en el apéndice.
WEB
PLAN DE ACTIVIDADES
LABORATORIO Nº 01
USO DE COLECCIONES JAVA
I. OBJETIVOS
 Realizar aplicaciones javas mediante el uso de colecciones.
 Programar y comprobar diferencias entre las distintas colecciones.
II. FUNDAMENTO TEÓRICO

COLECCIONES EN JAVA
Las colecciones son una especie de arrays de tamaño dinámico. Para usarlas haremos
uso del Java Collections Framework (JCF), el cual contiene un conjunto de clases e
interfaces del paquete java.util para gestionar colecciones de objetos.
En Java las principales interfaces que disponemos para trabajar con colecciones son:
Collection, Set, List, Queue y Map:
Collection<E>: Un grupo de elementos individuales, frecuentemente con alguna regla

aplicada a ellos.
List<E>: Elementos en una secuencia particular que mantienen un orden y permite
duplicados. La lista puede ser recorrida en ambas direcciones con un ListIterator. Hay
3 tipos de constructores:
ArrayList<E>: Su ventaja es que el acceso a un elemento en particular es ínfimo. Su
desventaja es que, para eliminar un elemento, se ha de mover toda la lista para
eliminar ese “hueco”.
Vector<E>: Es igual que ArrayList, pero sincronizado. Es decir, que, si usamos varios
hilos, no tendremos de qué preocuparnos hasta cierto punto.
LinkedList<E>: En esta, los elementos están conectados con el anterior y el posterior.
La ventaja es que es fácil mover/eliminar elementos de la lista, simplemente
WEB
moviendo/eliminando sus referencias hacia otros elementos. La desventaja es que

para usar el elemento N de la lista, debemos realizar N movimientos a través de la
lista.
III. EQUIPOS, MATERIALES E INSUMOS

1. Equipos
 Computadora
 Proyector
2. Materiales
 Pizarra, Mota, plumones
 Documento de trabajo
3. Software
 Editor NetBeans
 Sistema Operativo (Windows/Linux)
IV. PARTE EXPERIMENTAL
Procedimiento
1. Aplicación de ejemplo usando LIST.
WEB
2. Aplicación de ejemplo usando Map.
3. Aplicación de ejemplo usando ArrayList.
WEB
V. CUESTIONARIO
1. Realiza ejemplos de aplicaciones que hagan uso de vectores y linkedlist.
2. Realizar una aplicación que haga uso de ArrayList y que el ingreso de datos se
realice desde un formulario Swing.
VI. REFERENCIA BIBLIOGRÁFICA

 Álvarez, C. (2012). Arquitectura Java Sólida. España.
 Coronel, G. (2011). Desarrollando Soluciones con Java. Macro.
 Llobet, R. (2008). Introducción a la Programación Orientada a Objetos con Java.
Universidad Politécnica de Valencia.
WEB
LABORATORIO Nº 02
MANEJO Y USO DE SESIONES
I. OBJETIVOS
 Realizar aplicaciones con sesiones como parte de su estructura.
 Desarrollar programas que permite crear, leer y destruir variables de sesiones.

Java Session
Para solventar este problema en la plataforma Java EE se usa de forma muy habitual
la clase HttpSession que tiene una estructura de HashMap (Dicccionario) y permite
almacenar cualquier tipo de objeto en ella de tal forma que pueda ser compartido
por las diferentes páginas que como usuarios utilizamos.

1. Equipos
 Computadora personal
 Proyector
2. Materiales
WEB
3. Software
 Editor NetBeans
PARTE EXPERIMENTAL
Procedimiento
1. Ejemplo de aplicación con sesiones.
@WebServlet("/CrearSession")
public class CrearSession extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {
HttpSession misession= request.getSession(true);

Producto miproducto= new Producto(1,"telefono",300);
misession.setAttribute("producto",miproducto);
PrintWriter pw= response.getWriter();
pw.println("<html><body>Producto en session</body></html>");
pw.close();
}
}
2. Ejemplo de aplicación que hace uso sesiones.
@WebServlet("/VerSession")
public class VerSession extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {
HttpSession misession= (HttpSession) request.getSession();
WEB
Producto miproducto= (Producto) misession.getAttribute("producto");
PrintWriter pw= response.getWriter();

pw.println("<html><body>"+ miproducto.getId()+ ","
+miproducto.getConcepto()+","+ miproducto.getImporte());
pw.close();
}
}
IV. CUESTIONARIO
1. Desarrolla ejemplos de sesiones y acceda desde una aplicación web.
V. REFERENCIA BIBLIOGRÁFICA
WEB
LABORATORIO Nº 03
USO DE JAVA BEANS
I. OBJETIVOS
 Proporcionar unidades reutilizables y autosuficientes para que en el desarrollo
posterior puedan manipular mediante programación.
 Realizar aplicaciones web que permiten hacer uso de JavaBean.

JavaBeans
Los JavaBeans definen un modelo de componentes potente y simple para Java. El

objetivo de los JavaBeans es proporcionar unas unidades reutilizables y
autosuficientes que los desarrolladores puedan manipular mediante programación o
que las herramientas de construcción puedan manipular de forma visual.
Los JavaBeans pueden ser controles de interfaz gráfica de usuario o pueden no tener
representación visual alguna. Los controles de interfaz gráfica de usuario en Java
habitualmente son JavaBeans para que las herramientas de construcción puedan
manipularlos. En J2EE, los JavaBeans sencillos se utilizan habitualmente desde JSP,
donde proporcionan una separación de la presentación en HTML y el código Java, que
lo contienen los JavaBeans.
Un JavaBean es una clase Java con tres características distintivas:
 Propiedades
 Sucesos
 Métodos

1. Equipos
WEB
 Computadora
 Proyector
2. Materiales
3. Software
 Editor NetBeans
Procedimiento
1. Modelo de un Java Bean
public class ClienteBean {

private String nomb_cli;
private String ape_cli;
private String dir_cli;
public String getNomb_cli() {

return nomb_cli;
}
public void setNomb_cli(String nomb_cli) {

this.nomb_cli = nomb_cli;
}
public String getApe_cli() {

return ape_cli;
}
public void setApe_cli(String ape_cli) {

this.ape_cli = ape_cli;
WEB
public String getDir_cli() {

return dir_cli;
}
public void setDir_cli(String dir_cli) {

this.dir_cli = dir_cli;
}
}
V. CUESTIONARIO
1. Desarrolla 3 ejemplos de aplicaciones haciendo uso de JavaBeans.
2. Crear un entorno web para hacer uso de los Java Beans.

WEB
LABORATORIO Nº 04
INTERFACES - JDBC
I. OBJETIVOS
 Conocer la conectividad a bases de datos en Java (JDBC) a través de las interfaces
para articular las bases de datos con las aplicaciones.
 Identificar las interfaces más importantes de JDBC que permitan realizar consultas,
actualizaciones, creaciones, modificaciones, borrado de tablas, ejecución de
procedimientos almacenados en la base de datos, etc.

JDBC
JDBC significa Java™ EE Database Connectivity (conectividad de bases de datos Java).
En desarrollo de Java EE se trata de una tecnología muy conocida que se utiliza de
forma habitual para implementar la interacción de bases de datos. JDBC es una API de
nivel de llamada, lo que significa que las sentencias SQL se pasan como series a la API
que, posteriormente, se encarga de ejecutarlas en RDMS. Por ello, el valor de estas
series se puede modificar durante el tiempo de ejecución, haciendo que JBDC sea
dinámica.
JDBC ofrece el paquete java.sql, en el que existen clases muy útiles para trabajar con
bases de datos.
DriverManager: Es una clase estática de Java™ 2 Plaform, Standard Edition (J2SE) y

Java SE Development Kit (JDK). DriverManager gestiona el conjunto de controladores
Java Database Connectivity (JDBC) que están disponibles para que los utilice una
aplicación.
WEB
Statement: El objeto Statement (sentencia) sirve para procesar una sentencia SQL
estática y obtener los resultados producidos por ella. Solo puede haber un ResultSet
abierto para cada objeto Statement en un momento dado. Todos los métodos
statement que procesan una sentencia SQL cierran implícitamente el ResultSet actual
de una sentencia si existe uno abierto.
PreparedStatement: Las PreparedStatements amplían la interfaz Statement y

proporcionan soporte para añadir parámetros a sentencias SQL.
Las sentencias SQL que se pasan a la base de datos pasan por un proceso de dos
pasos al devolver los resultados al usuario. Primero se preparan y, a continuación, se
procesan. Con los objetos Statement, estas dos fases aparecen como una sola en las
aplicaciones. Las PreparedStatements permiten independizar estos dos procesos. El
paso de preparación se produce cuando se crea el objeto, y el paso de proceso se
produce cuando se llama a los métodos executeQuery, executeUpdate o execute en el
objeto PreparedStatement.
La interfaz CallableStatement de JDBC amplía PreparedStatement y proporciona
soporte para parámetros de salida y de entrada/salida. La interfaz CallableStatement
tiene también soporte para parámetros de entrada, que proporciona la interfaz
PreparedStatement.
CallableStatement: La interfaz CallableStatement permite la utilización de sentencias

SQL para llamar a procedimientos almacenados. Los procedimientos almacenados
son programas que tienen una interfaz de base de datos. Estos programas tienen lo
siguiente:
 Pueden tener parámetros de entrada y de salida, o parámetros que son tanto
de entrada como de salida.
 Pueden tener un valor de retorno.
WEB
 Tienen la capacidad de devolver varios ResultSets.
ResultSet: El objeto ResultSet proporciona varios métodos para obtener los datos de
columna correspondientes a un fila. Todos ellos tienen el formato get<Tipo>, siendo
<Tipo> un tipo de datos Java™. Algunos ejemplos de estos métodos son getInt,
getLong, getString, getTimestamp y getBlob. Casi todos estos métodos toman un solo
parámetro, que es el índice que la columna tiene dentro del ResultSet o bien el
nombre de la columna.

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
 Editor NetBeans
Procedimiento
1. Crear la base de datos e ingresar registros en ella.

Para nuestro ejemplo crear la base de datos gestión.
2. Crear la clase de conexión llamado AccesoDB.
WEB
3. Crear una clase llamara prueba1 para comprobar la conexión.
WEB
4. Para probar una aplicación con base de datos es necesario agregar el driver de Mysql.
El editor Netbeans ya trae la librerías ahí encontramos MySQL JDBC Driver necesarios
para realizar la conexión.
5. Crear una clase llamada prueba2 que permita insertar un registro en una tabla de la
base de datos.
WEB
6. Crear una clase llamada prueba 3 que permita mostrar los registros de una tabla.
7. Al ejecutar la aplicación se obtiene el siguiente resultado.
WEB
V. CUESTIONARIO
1. Crear una clase llamada prueba4 y muestra datos de la tabla estudiantes.
2. Crear una clase llamada prueba5 y muestra datos de la tabla administrativos.
3. REFERENCIA BIBLIOGRÁFICA
WEB
LABORATORIO Nº 05
PATRÓN DE DISEÑO MVC
1. OBJETIVOS
 Identificar las ventajas que brinda el patrón de diseño MVC.
 Desarrollar una aplicación que permite insertar, leer, modificar y eliminar datos
empleado el patrón MVC.
2. FUNDAMENTO TEÓRICO
Patrón de diseño MVC
El MVC o Modelo-Vista-Controlador es un patrón de arquitectura de software que,
utilizando 3 componentes (Vistas, Models y Controladores) separa la lógica de la
aplicación de la lógica de la vista en una aplicación. Es una arquitectura importante
puesto que se utiliza tanto en componentes gráficos básicos hasta sistemas
empresariales; la mayoría de los frameworks modernos utilizan MVC (o alguna
adaptación del MVC) para la arquitectura, entre ellos podemos mencionar a Ruby on
Rails, Django, AngularJS, Spring para Java y muchos otros más.
Modelo
Se encarga de los datos, generalmente (pero no obligatoriamente) consultando la
base de datos. Actualizaciones, consultas, búsquedas, etc. todo eso va aquí, en el
modelo.
Controlador
Se encarga de... controlar, recibe las órdenes del usuario y se encarga de solicitar los
datos al modelo y de comunicárselos a la vista.
WEB
Vistas
Son la representación visual de los datos, todo lo que tenga que ver con la interfaz
gráfica va aquí. Ni el modelo ni el controlador se preocupan de cómo se verán los
datos, esa responsabilidad es únicamente de la vista.
3. EQUIPOS, MATERIALES E INSUMOS

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
 Editor NetBeans
4. PARTE EXPERIMENTAL
Procedimiento
PATRONES DE DISEÑO DAO - MVC

Enunciado el Problema
A partir de la aplicación desarrollada en la
práctica anterior desarrollar una aplicación
aplicando los patrones de diseño DAO y MVC.
Esta aplicación debe registrar objetos y debe
buscar por Código al objeto registrado.
WEB
 Abrir el proyecto anterior donde cuenta con el acceso a base de datos y agregar
la siguiente estructura de paquetes y clases.
 En el paquete model crear las clases considerando las tablas de la base de datos,
luego en estas clases codificar los atributos, métodos constructores, encapsular
atributos y luego generar los métodos get y set. Aplicar herencia en las clases que
sean necesarias.
 En el paquete
dao crear una
interface con
métodos que
nos permitirán
realizar un crud para el sistema.
 En el paquete Dao crear una clase llamada AlumnoDaoImpl donde se
implementará todos los métodos de la interface creada en el paso anterior.
WEB
WEB
 En el paquete controller crea una clase llamada AlumnoController que nos

permitirá enlazar la vista con el modelo, el controller toma los requerimientos de
la vista y los pasa al modelo, luego devuelve a la vista los resultados que se
generan a partir del modelo y la base de datos.
 En el paquete view crear un formulario del tipo MDI Application Sample For y un
JDialog, luego elaborar el diseño como muestra la imagen.
WEB
 Programar el botón Buscar para realizar la búsqueda de un registro mediante el

dni del estudiante.
 Programar el botón guardar para registrar los datos de un estudiante.
WEB
V. CUESTIONARIO
 Realizar un ejemplo similar al anterior con basado en una tabla de la base de

datos que Ud. considere conveniente.

WEB
LABORATORIO Nº 06
INTERFACES PREPAREDSTATEMENT Y
CALLABLESTATEMENT
I. OBJETIVOS
 Realizar aplicaciones que hagan uso de las interfaces preparedstatement y
callablestatement mediante buenas prácticas de desarrollo.

Prepared Statement
Cuando se ejecuta una sentencia SQL, la sentencia se compila y se envía al SGBD para
su ejecución. Si esta misma sentencia se va a ejecutar varias veces, puede ser
conveniente precompilarla para que su ejecución sea más eficiente.
Una PreparedStatement es una sentencia SQL precompilada.
Las utilizaremos en lugar de una Statement cuando haya que ejecutar varias veces
una misma sentencia SQL con distintos parámetros.
Ventajas de PreparedStatement sobre Statement:
 Mayor velocidad de ejecución.
 No tendremos que revisar los datos que introduzca el usuario para formar la
sentencia SQL.
CallableStatements
El método prepareCall se utiliza para crear objetos CallableStatement nuevos. Al igual
que en el método prepareStatement, la sentencia SQL debe suministrarse en el
momento de crear el objeto CallableStatement. En ese momento, se precompila la
sentencia SQL. Por ejemplo, suponiendo que ya exista un objeto Connection
denominado conn, el siguiente código crea un objeto CallableStatement y realiza la
fase de preparación de la sentencia SQL para que se procese en la base de datos:
PreparedStatement ps = conn.prepareStatement("? = CALL ADDEMPLOYEE(?, ?, ?");
WEB

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
 Editor NetBeans
Procedimiento
STATEMENT Y PREPAREDSTATEMENT
Para esta práctica se debe contar la clase AccesoDB creado en los ejemplos anteriores.
1. Realiza el siguiente diseño partiendo desde un JFrame.
2. Realiza un evento ActionPerformed en el botón btnConsultar y programe con el

siguiente código haciendo uso de PreparedStatement:
WEB
3. Programe el método mostrarData para llevar los registros de la base de datos a la

tabla.
4. Realiza un evento ActionPerformed en el botón btnConsultar2 y programe con el

siguiente código haciendo uso de Statement:
5. Ejecute el programa y realiza las comparaciones de ambas consultas.
WEB
5. CUESTIONARIO
1. Realizar una aplicación que haga uso de la interfaz c

CallableStatements
WEB
LABORATORIO Nº 07
CREACIÓN DE REPORTES CON LA LIBRERÍA IREPORT
I. OBJETIVOS
 Importar base de datos desde la consola del sistema operativo Linux.
 Exportar base de datos desde la consola del sistema operativo Linux.
Pg_dump
Extrae una base de datos Postgres a un fichero de script
pg_dump es un programa cliente de la base de datos (como psql), lo que significa que
podemos utilizarlo para hacer copias de bases de datos remotas, siempre que
tengamos privilegios para acceder a todas sus tablas. En la práctica, esto significa que
debemos ser el usuario administrador de la base de datos para hacerlo.

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
 Gestor de base de datos PostgreSQL
WEB
Procedimiento
GENERAR REPORTES CON JASPER REPORT

1. DISEÑO NUESTRO PRIMER INFORME
Ya hemos creado nuestro informe, ahora mismo puedes pulsar el botón Preview y se
ejecutará el informe por defecto en la vista previa que viene integrada en Jaspersoft
Studio, así es como se ven el informe que hemos creado:
Jasper Reports – New Report – Diseño (Design)
WEB
En la siguiente imagen te detallo las partes más importantes del generador de

informes:
Jasper Reports – Partes principales del generador de informes
Vamos a hacer unos cambios sencillos para ir familiarizándonos con el entorno y

aprendiendo como se trabaja con el desarrollo de informe con Jaspersoft Studio.
Editor de consultas SQL

Con JasperReports y en concreto desde la aplicación JasperSoft Studio podemos
actualizar la consulta en cualquier momento, esto nos va a permitir añadir nuevos
campos si se nos olvidó alguno, o cambiar la consulta por completo si es necesario.
WEB
Para modificar la consulta pulsa el botón que se indica en la imagen y se abrirá un

editor donde podrás editar la consulta:
Jasper Reports – New Report – Diseño – Edición de consulta SQL (Query Editor)
También tiene otras funcionalidades adicionales como: editor gráfico de consulta,

añadido de parámetros, ordenación, …, esto lo veremos con más detalle cuando
necesitemos profundizar en el diseño de informes con JasperReports.
1. Diseño – Editor de expresiones (Expression editor)

Inicialmente en nuestro informe vamos a tener etiquetas (Label) y expresiones
(Expressions), en la paleta del diseñador los verás como Static Text y Text Field
respectivamente.
WEB
Para añadir un nuevo Text Field simplemente arrástralo desde la paleta al informe,
este añadirá el elemento al informe, este tiene una expresión que nos permitirá hacer
referencia a los elementos de la base de datos: fields ($F{database-field}), y también,
a otro tipo de expresiones como son parámetros (parameters: $F{parameter}) y
valores calculados ($V{variable}).
Para abrir el editor puedes hacer click sobre el elemento que quieras modificar y te
aparecerá la siguiente ventana:
Jasper Reports – New Report – Diseño – Editor de expresiones (Expression editor)
1. Diseño – Editar etiquetas (Label)

Las etiquetas (Label) son los Static Text que nos permitirán añadir texto plano a
nuestro informe y enriquecer nuestro diseño mediante la modificación de la fuente,
WEB
tamaño, colores, … , todo esto se encuentra dentro de las propiedades de Static Text.
Una vez añadida la etiqueta a nuestro informe también podemos modificar el texto
directamente sobre el generador:
Jasper Reports – New Report – Diseño – Editar etiquetas (Label)
5. CUESTIONARIO
 Basado en los campos de una tabla de la base de datos que Ud. seleccione,
desarrollar un reporte que se deben generar a partir de unos filtros de datos.
WEB
 Llobet, R. (2008). Introducción a la Programación Orientada a Objetos con
Java. Universidad Politécnica de Valencia.
WEB
LABORATORIO Nº 08
CLIENTE SERVIDOR AJAX
I. OBJETIVOS
 Identificar la estructura y funcionamiento de la tecnología Ajax.
 Desarrollar aplicaciones básicas aplicando la tecnología Ajax.

Ajax
AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es
una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de
los usuarios mientras se mantiene la comunicación asíncrona con el servidor en
segundo plano. De esta forma es posible realizar cambios sobre las páginas sin
necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y
usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se

requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni
el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting
language) en el que normalmente se efectúan las funciones de llamada de Ajax
mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto
disponible en los navegadores actuales. En cualquier caso, no es necesario que el
contenido asíncrono esté formateado en XML.
WEB
Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dado que está basado en estándares abiertos como
JavaScript y Document Object Model (DOM).

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
 Editores Eclipse, Atom, etc.
Procedimiento
TRAER UN CONTENIDO CON AJAX AL PULSAR UN ENLACE

a) En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se
pulse un enlace. Esto lo hemos puesto en marcha en el servidor de
DesarrolloWeb.com y lo puedes ver en una página aparte.
Aquí podemos ver el enlace, al que ponemos un identificador (atributo id) para
seleccionarlo desde jQuery.
<a href="#" id="enlaceajax">Haz clic!</a>
WEB
b) Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un
evento a un enlace. No obstante, recordemos cómo asignar una función para cuando
se haga clic en el enlace:
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
});
})
Ya se trata sólo de poner en marcha Ajax dentro de la función del evento "click" sobre
el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos
a recibir del servidor con la llamada Ajax. Le pondremos id="destino" para poder
referirnos a ella desde jQuery:
c) Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas
con este framework Javascript. Una única línea de código será suficiente:
$("#destino").load("contenido-ajax.html");
Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una
simple invocación al método load() de un elemento de la página, en concreto el que
habíamos puesto con id="destino". Al método load() le pasamos como parámetro la
ruta de la página que queremos cargar dentro del elemento.
WEB
El archivo que cargamos con load() en este ejemplo es "contenido-ajax.html" y

simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo
directorio que la página web donde está el script jQuery.
código completo de este ejemplo:
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("contenido-ajax.html");
});
})
</script>
</head>
<body>
<a href="#" id="enlaceajax">Haz clic!</a>

<br>
<div id="destino"></div>
</body>
</html>
El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros
opcionales que podemos utilizar si fuera necesario:
Parámetros a pasar a la página: la página que carguemos con Ajax puede recibir
parámetros por la URL, que se especifican con la típica notación de propiedades y
valores de jQuery.
WEB
{nombre: "Pepe", edad: 45}
Por ejemplo, con ese código estaríamos enviando a la página los datos nombre y
edad, con los valores "pepe" y 45. Esos datos viajarían en la URL, por el método
"POST".
2. CUESTIONARIO
1. Desarrollar 4 ejercicios que haga uso del conjunto de tecnologías Ajax,

documentar el código y el resultado de la ejecución.
WEB
LABORATORIO Nº 09
DOM/BOM EN APLICACIONES AJAX
I. OBJETIVOS
 Realizar aplicaciones que permitan manipular documentos XHTML y HTML.
 Analizar el funcionamiento de las utilidades del DOM para aplicar en el desarrollo

de programas con la parte lógica basado en el lenguaje Java.

DOM (Document Object Model)
DOM o Document Object Model es un conjunto de utilidades específicamente
diseñadas para manipular documentos XML. Por extensión, DOM también se puede
utilizar para manipular documentos XHTML y HTML. Técnicamente, DOM es una API
de funciones que se pueden utilizar para manipular las páginas XHTML de forma
rápida y eficiente.
Antes de poder utilizar sus funciones, DOM transforma internamente el archivo XML
original en una estructura más fácil de manejar formada por una jerarquía de nodos.
De esta forma, DOM transforma el código XML en una serie de nodos interconectados
en forma de árbol.

1. Equipos
 Computadora
 Proyector
WEB
2. Materiales
3. Software
CREAR, MODIFICAR Y ELIMINAR NODOS DEL DOM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Ejercicio 9 - Crear, eliminar y modidicar nodos DOM</title>
<script type="text/javascript">
function genera() {
// Generar números aleatorios entre 0 y 10
var numero1 = (Math.random()*10).toFixed();
var numero2 = (Math.random()*10).toFixed();
// Obtener los nodos padre de los párrafos

var primero = document.getElementById("primero");
var segundo = document.getElementById("segundo");
// Obtener el cada uno de los p �rrafos

var parrafoAnterior1 = primero.firstChild;
var parrafoAnterior2 = segundo.firstChild;
// Crear el nuevo párrafo

var parrafo1 = document.createElement("p");
var texto1 = document.createTextNode(numero1);
parrafo1.appendChild(texto1);
WEB
// Si ya existía un párrafo, sustituirlo. Si no, añadirlo

if(parrafoAnterior1 != null) {
primero.replaceChild(parrafo1, parrafoAnterior1);
}
else {
primero.appendChild(parrafo1);
}
// Crear el otro nuevo párrafo

var parrafo2 = document.createElement("p");
var texto2 = document.createTextNode(numero2);
parrafo2.appendChild(texto2);
// Si ya existía un párrafo, sustituirlo. Si no, añadirlo
if(parrafoAnterior2 != null) {
segundo.replaceChild(parrafo2, parrafoAnterior2);
}
else {
segundo.appendChild(parrafo2);
}
}
function compara() {
// Obtener los nodos padre de los párrafos
var primero = document.getElementById("primero");
var segundo = document.getElementById("segundo");
// Obtener los párrafos (existen varios metodos...)

var parrafo1 = primero.getElementsByTagName("p")[0];
var parrafo2 = segundo.firstChild;
// Obtener los números a través del nodo Text de cada

// nodo de tipo Element de los parrafos
var numero1 = parseInt(parrafo1.firstChild.nodeValue);
var numero2 = parseInt(parrafo2.firstChild.nodeValue);
// Determinar el nodo del párrafo cuyo nodo es mayor

var parrafoMayor = (numero1 > numero2)? parrafo1 : parrafo2;
// Obtener el nodo padre del párrafo resultado

var resultado = document.getElementById("resultado");
var parrafoAnterior = resultado.firstChild;
WEB
// Si ya existía un párrafo de resultado anterior, sustituirlo. Si

no, añadirlo
if(parrafoAnterior != null) {
resultado.replaceChild(parrafoMayor, parrafoAnterior);
}
else {
resultado.appendChild(parrafoMayor);
}
}
</script>
<style type="text/css">
#primero, #segundo, #resultado {width: 150px; height: 150px; border:
thin solid silver; background: #F5F5F5; float: left; margin:20px; font-
size: 6em; color: #333; text-align: center; padding: 5px; font-
family:Arial, Helvetica, sans-serif;}
#primero p, #segundo p, #resultado p {margin:.2em 0;}
#resultado {margin-left:1.3em; border-color: black;}
.clear {clear:both;}
#compara {margin-left:11em;}
#genera {font-size:1.2em; margin-left:8em;}
</style>
</head>
<body>
<input id="genera" type="button" value="�� Genera !!"

onclick="genera()" />
<div id="primero"></div>
<div id="segundo"></div>
<div class="clear"></div>
<input id="compara" type="button" value="<< Comparar >>"

onclick="compara()" />
<div id="resultado"></div>
</body>
</html>
WEB
2. CUESTIONARIO
1. Plantea y desarrollar 2 ejercicios que permita crear, modificar y eliminar el DOM
WEB
LABORATORIO Nº 10
EVENTOS JQUERY - AJAX
I. OBJETIVOS
 Desarrollar aplicaciones que hagan uso de eventos para generar interactividad de
las acciones de los usuarios.
 Identificar los principales eventos para desarrollar aplicaciones de la capa vista de
un programa.

Principales eventos
Evento Descripción
 onblur Un elemento pierde el foco
 onchange Un elemento ha sido modificado
 onclick Pulsar y soltar el ratón
 ondblclick Pulsar dos veces seguidas con el ratón
 Evento Descripción
 onfocus Un elemento obtiene el foco
 onkeydown Pulsar una tecla y no soltarla
 onkeypress Pulsar una tecla
 onkeyup Soltar una tecla pulsada
 onload Página cargada completamente
 onmousedown Pulsar un botón del ratón y no soltarlo
 onmousemove Mover el ratón
 onmouseout El ratón "sale" del elemento
WEB
 onmouseover El ratón "entra" en el elemento

 onmouseup Soltar el botón del ratón
 onreset Inicializar el formulario
 onresize Modificar el tamaño de la ventana
 onselect Seleccionar un texto
 onsubmit Enviar el formulario
 onunload Se abandona la página

1. Equipos
 Computadora
 Proyector
2. Materiales
3. Software
WEB

DESARROLLAR EVENTOS
 Para añadir o eliminar un Listener de un evento a un elemento:
var windowOnLoad = function(e) {
console.log('window:load', e);
};
window.addEventListener('load', windowOnLoad);
window.removeEventListener('load', windowOnLoad);
 Podemos crear eventos personalizados:

var event = new Event('build');
elem.addEventListener('build', function (e) { ... }, false);
 Podemos crear eventos personalizados con datos:

var event = new CustomEvent('build', { 'detail': detail });
elem.addEventListener('build', function (e) {
log('The time is: ' + e.detail);
}, false);
 Podemos disparar eventos:

function simulateClick() {
var event = new MouseEvent('click');
var element = document.getElementById('id');
element.dispatchEvent(event);
}
WEB
 Propagación
// en fase de CAPTURA
addEventListener("eventName",callback, true);
// en fase de BURBUJA
addEventListener("eventName",callback, false); // por defecto
// detiene la propagación del evento

event.stopPropagation();
// elimina las acciones por defecto (ejemplo: abrir enlace)

event.preventDefault();
V. CUESTIONARIO
 Genera eventos a partir de la lista mencionada en este documento, sin
considerar los eventos usados en los ejercicios anteriores.

WEB
OPERACIONES CON UNA BASE DE DATOS USANDO AJAX
I. OBJETIVOS
 Desarrollar aplicaciones que usan Ajax para interactuar en la capa vista con el
manejo de datos que se registrarán en la base de datos.
 Identificar las actividades más relevantes de la programación empleando el
conjunto de tecnologías Ajax.
Ajax, operaciones acceso a base de datos
 Desarrollar la capa dao con sentencias sql que implemente un crud.
 Desarrollar la parte lógica de negocio y el acceso a datos con java.
 Desarrollar la capa vista con HTML5, jquery y Ajax
Create, Read, Update, Delete
Cuando estamos creando API, queremos que nuestros modelos proporcionen cuatro
tipos básicos de funcionalidad. El modelo debe poder crear, leer, actualizar y eliminar
recursos. Los informáticos a menudo se refieren a estas funciones por el acrónimo
CRUD. Un modelo debe tener la capacidad de realizar, como máximo, estas cuatro
funciones para estar completo. Si una de estas cuatro operaciones no puede describir
una acción, entonces potencialmente debería ser un modelo propio.

1. Equipos
 Computadora
 Proyector
2. Materiales
WEB
3. Software

Fichero ajax_producto.js
var xmlHttp
function getDetalleProducto(id_pro){
xmlHttp=new XMLHttpRequest();
if (xmlHttp==null){
alert ("Tu navegador no soporta AJAX!");
return;
}
today = new Date();
id= Math.abs(Math.sin(today.getTime()));
var url = "ajax_detalleProducto.jsp";
url = url + "?id_pro=" + id_pro;
url = url + "&id=" + id;
xmlHttp.onreadystatechange = resultado_detalle;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function resultado_detalle(){
if (xmlHttp.readyState==4){
document.getElementById("result_detalle").innerHTML=xmlHttp.responseText
;
}
}
WEB
Fichero ajax_masDetalle.js
var xmlHttp
function getMasDetalleProducto(id_pro, id_det){
xmlHttp=new XMLHttpRequest();
if (xmlHttp==null){
alert ("Tu navegador no soporta AJAX!");
return;
}
today = new Date();
id= Math.abs(Math.sin(today.getTime()));
var url = "ajax_masDetalle.jsp";
url = url + "?id_pro=" + id_pro;
url = url + "&id_det=" + id_det;
url = url + "&id=" + id;
xmlHttp.onreadystatechange = resultado_mas_detalle;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function resultado_mas_detalle(){
if (xmlHttp.readyState==4){
document.getElementById("result_mas_detalle").innerHTML=xmlHttp.response
Text;
}
}
Fichero index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8" language="java" %>
<%@page import="java.util.*" %>
<%@page import="ajax.logic.productoBo" %>
<%@page import="ajax.bean.productoBean" %>
<html>
<head>
<title>AJAX DEMO</title>
<Script src="AJAX/ajax_producto.js"></Script>
<Script src="AJAX/ajax_masDetalle.js"></Script>
</head>
WEB
<body>
<table border="0" align="center">
<tr>
<td>PRODUCTOS: </td>
<td>
<select name="productos"
onchange="getDetalleProducto(this.value)">
<%
int id_pro;
String desc_pro = null;
ArrayList lst_pro = new ArrayList();
productoBo pro_bo = new productoBo();
lst_pro = pro_bo.getProductos();
if(lst_pro.size() > 0){
for(int i = 0; i<lst_pro.size(); i++){
id_pro =
((productoBean)lst_pro.get(i)).getId_pro();
desc_pro =
((productoBean)lst_pro.get(i)).getDesc_pro();
out.write("<option value=" + id_pro + ">" +
desc_pro + "</option>");
}
}
%>
</select>
</td>
</tr>
<tr>
<td>DETALLE PRODUCTO: </td>
<td id="result_detalle">
<select name="detalle_producto">
</select>
</td>
</tr>
<tr>
<td>MAS DETALLE PRODUCTO: </td>
<td id="result_mas_detalle">
<select name="mas_detalle_producto">
</select>
</td>
</tr>
</table>
WEB
</body>
</html>
V. CUESTIONARIO
 Realiza y documenta 2 ejemplos de aplicaciones usando Ajax a partir de una
nueva base de datos.

WEB
LABORATORIO Nº 12
IMPLEMENTACIÓN Y PROGRAMACIÓN EN JQUERY
I. OBJETIVOS
 Desarrollar aplicaciones web que hagan uso del framework jquery.
 Aplicar los métodos de envío de datos, capturar datos y manipular información
que permitan registrarse en las bases de datos.

Tecnologías utilizadas:
 HTML
 JAVA con MySQL / POSGRESQL
 jQuery
 Bootstrap
 CSS
 AJAX

1. Equipos
 Computadora
 Proyector
2. Materiales
WEB
3. Software
 Gestor de base de datos PostgreSQL / Mysql

Procedimiento
Fichero index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRUD de productos con PHP - MySQL - jQuery AJAX </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m
in.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j
s"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="table-wrapper">
WEB
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Administrar <b>Productos</b></h2>
</div>
<div class="col-sm-6">
<a href="#addProductModal" class="btn btn-
success" data-toggle="modal"><i class="material-icons"></i>
<span>Agregar nuevo producto</span></a>
</div>
</div>
</div>
<div class='col-sm-4 pull-right'>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-
control" placeholder="Buscar" id="q" onkeyup="load(1);" />
<span class="input-group-btn">
<button class="btn btn-info"
type="button" onclick="load(1);">
<span class="glyphicon
glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<div class='clearfix'></div>
<hr>
<div id="loader"></div>
<div id="resultados"></div>
<div class='outer_div'></div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
WEB
Fichero modal_add.html
<div id="addProductModal" class="modal fade">

<div class="modal-dialog">
<div class="modal-content">
<form name="add_product" id="add_product">
<div class="modal-header">
<h4 class="modal-title">Agregar Producto</h4>
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Código</label>
<input type="text" name="code" id="code"
class="form-control" required>
</div>
<label>Producto</label>
<input type="text" name="name" id="name"
</div>
<label>Categoría</label>
<input type="text" name="category"
id="category" class="form-control" required>
</div>
<label>Stock</label>
<input type="number" name="stock" id="stock"
</div>
<label>Precio</label>
<input type="text" name="price" id="price"
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default"
data-dismiss="modal" value="Cancelar">
WEB
<input type="submit" class="btn btn-success"

value="Guardar datos">
</div>
</form>
</div>
</div>
</div>
Fichero modal_edit.html
<div id="editProductModal" class="modal fade">

<div class="modal-dialog">
<div class="modal-content">
<form name="edit_product" id="edit_product">
<div class="modal-header">
<h4 class="modal-title">Editar Producto</h4>
<button type="button" class="close" data-
dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<label>Código</label>
<input type="text" name="edit_code"
id="edit_code" class="form-control" required>
<input type="hidden" name="edit_id"
id="edit_id" >
</div>
<label>Producto</label>
<input type="text" name="edit_name"
id="edit_name" class="form-control" required>
</div>
<label>Categoría</label>
<input type="text" name="edit_category"
id="edit_category" class="form-control" required>
</div>
<label>Stock</label>
<input type="number" name="edit_stock"
id="edit_stock" class="form-control" required>
WEB
</div>
<label>Precio</label>
<input type="text" name="edit_price"
id="edit_price" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default"
data-dismiss="modal" value="Cancelar">
<input type="submit" class="btn btn-info"
value="Guardar datos">
</div>
</form>
</div>
</div>
</div>
Fichero scripts.js
$(function() {
load(1);
});
function load(page){
var query=$("#q").val();
var per_page=10;
var parametros =
{"action":"ajax","page":page,'query':query,'per_page':per_page};
$("#loader").fadeIn('slow');
$.ajax({
url:'ajax/listar_productos.php',
data: parametros,
beforeSend: function(objeto){
$("#loader").html("Cargando...");
},
success:function(data){
$(".outer_div").html(data).fadeIn('slow');
$("#loader").html("");
}
})
}
WEB
$('#editProductModal').on('show.bs.modal', function (event) {

var button = $(event.relatedTarget) // Button that triggered the
modal
var code = button.data('code')
$('#edit_code').val(code)
var name = button.data('name')
$('#edit_name').val(name)
var category = button.data('category')
$('#edit_category').val(category)
var stock = button.data('stock')
$('#edit_stock').val(stock)
var price = button.data('price')
$('#edit_price').val(price)
var id = button.data('id')
$('#edit_id').val(id)
})
$('#deleteProductModal').on('show.bs.modal', function (event) {

var button = $(event.relatedTarget) // Button that triggered the
modal
var id = button.data('id')
$('#delete_id').val(id)
})
$( "#edit_product" ).submit(function( event ) {

var parametros = $(this).serialize();
$.ajax({
type: "POST",
url: "ajax/editar_producto.php",
data: parametros,
$("#resultados").html("Enviando...");
},
success: function(datos){
$("#resultados").html(datos);
load(1);
$('#editProductModal').modal('hide');
}
});
});
WEB
$( "#add_product" ).submit(function( event ) {

$.ajax({
type: "POST",
url: "ajax/guardar_producto.php",
data: parametros,
},
load(1);
$('#addProductModal').modal('hide');
}
});
});
$( "#delete_product" ).submit(function( event ) {

$.ajax({
type: "POST",
url: "ajax/eliminar_producto.php",
data: parametros,
},
load(1);
$('#deleteProductModal').modal('hide');
}
});
});
WEB
mostrarán los datos en el navegador web
5. CUESTIONARIO
1. Desarrollar un proyecto personal aplicando todos los contenidos estudiados en

las sesiones anteriores.

Guia Práctica de Desarrollo de Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Guia Práctica de Desarrollo de Aplicaciones Web

Cargado por

Información del documento

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

Guia Práctica de Desarrollo de Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

Elaboración: Aprobación y fecha:

UNIDAD DE LABORATORIO RESOLUCION Nº 174-2019-UPTELESUP-R

UNIVERSIDAD PRIVADA TELESUP

Dr. Manuel Hilario Falcon

Finalmente, esta guía de carácter práctico y editado por la Facultad de Ingeniería y

La presente estructura de guía de práctica tiene como finalidad servir de guía al

Para el desarrollo de la asignatura Desarrollo de Aplicaciones en Web, se debe

Las prácticas se centran en desarrollo de aplicaciones mediante el lenguaje Java, con

La asignatura Desarrollo de Aplicaciones en Web se enfoca en analizar, diseñar y

3. ALCANCES Y/O LIMITACIONES

La finalidad de esta guía es complementar la teoría y contribuir a la formación del

Una de las limitaciones en algunos de los laboratorios es la disponibilidad de equipos

4. REGLAS DEL COMPORTAMIENTO DEL ALUMNO EN EL LABORATORIO DE

 Leer la Guía de laboratorio de acuerdo a la práctica que corresponde.

 Está prohibido fumar, comer o beber en el laboratorio.

 Los estudiantes deben comportarse de forma respetuosa entre compañeros y

 Si no se está seguro de lo que se está haciendo pregunte al profesor a cargo.

 Mantener el laboratorio de computo limpio y ordenado.

5. ESTRUCTURA DE LOS INFORMES DEL LABORATORIO DE DESARROLLO DE

Las secciones requeridas para completar los informes de laboratorio de Programación

1) Portada. La siguiente información debe aparecer en la carátula:

 Título, que indique el experimento de la práctica.

2) Objetivos. Indique el objetivo(s) del experimento de forma concisa, en forma de

3) Marco Teórico. Se debe proporcionar una descripción concisa de la teoría

4) Descripción del Experimento. Proporcione un dibujo esquemático ordenado,

poder conectar cada elemento de esta sección al elemento en la sección

5) Procedimiento. - Detalle el procedimiento realizado en el laboratorio para llevar

6) Toma de Datos. Todos los datos brutos pertinentes obtenidos durante el

procedimientos utilizados. Si se usa más de una ecuación, todas las ecuaciones

8) Discusión y Resultados. Esta sección está dedicada a la interpretación del

9) Conclusiones. Las conclusiones deben basarse en resultados reales. Explica el

11) Apéndice. Los detalles de análisis, cálculos, etc. que se mencionaron en el

 Programar y comprobar diferencias entre las distintas colecciones.

II. FUNDAMENTO TEÓRICO

Collection<E>: Un grupo de elementos individuales, frecuentemente con alguna regla

moviendo/eliminando sus referencias hacia otros elementos. La desventaja es que

III. EQUIPOS, MATERIALES E INSUMOS

 Pizarra, Mota, plumones

 Sistema Operativo (Windows/Linux)

IV. PARTE EXPERIMENTAL

1. Aplicación de ejemplo usando LIST.

2. Aplicación de ejemplo usando Map.

3. Aplicación de ejemplo usando ArrayList.

1. Realiza ejemplos de aplicaciones que hagan uso de vectores y linkedlist.

VI. REFERENCIA BIBLIOGRÁFICA

 Desarrollar programas que permite crear, leer y destruir variables de sesiones.

II. FUNDAMENTO TEÓRICO

III. EQUIPOS, MATERIALES E INSUMOS

 Pizarra, Mota, plumones

 Sistema Operativo (Windows/Linux)

1. Ejemplo de aplicación con sesiones.

protected void doGet(HttpServletRequest request, HttpServletResponse

HttpSession misession= request.getSession(true);

2. Ejemplo de aplicación que hace uso sesiones.

protected void doGet(HttpServletRequest request, HttpServletResponse

Producto miproducto= (Producto) misession.getAttribute("producto");

PrintWriter pw= response.getWriter();

1. Desarrolla ejemplos de sesiones y acceda desde una aplicación web.

II. FUNDAMENTO TEÓRICO