Introduccin Al Desarrollo De Aplicaciones Empresariales.

Tema: Prueba N 3 Grupal.

Integrantes: Guillermo Henrquez. Celso Silva. Cristian Fuentes. Pablo Lincoqueo. Profesor: Gustavo Donoso. Fecha: 08 de junio de 2011.

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

1.- Uso de HTML y JSTL (20 ptos.) Suponga que tiene una tabla Persona para una base de datos que contiene los siguientes atributos: rut (incluye dgito verificador), nombre, apellido paterno, apellido materno, fecha de nacimiento, sexo, ciudad de residencia (cuyas opciones estn en una tabla ciudades), intereses (un texto largo), Fecha de ingreso a la compaa, Horario de entrada (hora, minutos) y Horario de Salida. Haga el formulario HTML para dar cabida a los datos solicitados en esa tabla. Para el caso de las ciudades complemente el cdigo HTML con las sentencias JSTL correspondientes (asuma que usa un pool de conexiones). Justifique el uso de los elementos del formulario. Respuesta:

En el formulario presentado anteriormente, se destacaron ciertas reas por sobre las otras, ya que funcionan de forma diferente o contienen una estructura diferente a las otras. Se destac en color negro, la seccin donde se ingresan datos mediante el teclado, por medio de un Text imput que captura el texto ingresado. Por ejemplo al solicitar el nombre, se espera que el usuario escriba su nombre. La estructura de cdigo para capturar los datos en esta seccion es la siguiente:

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

Se destac en color caf, la seccin en donde se ingresa la fecha de ingreso y la fecha de nacimiento. Esto se realiza mediante un script el cual controla que el ingreso de datos corresponda a una fecha valida. Es decir mediante este formulario al escribir la fecha se van ingresando automticamente los / correspondientes a la separacin de das, con los meses y a los meses la separacin con aos (ejemplo: 12/05/2010). Adems el script permite verificar que no existan errores en el ingreso de la fecha, ya sea porque se ingres un da, mes o ao no valido (ejemplo: 14/13/2010, donde el mes ingresado 13 no es vlido). La estructura del cdigo del script es la siguiente:

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

La estructura del cdigo que permite capturar la fecha de nacimiento y la fecha de ingreso es la siguiente (en esta estructura se realiza la referencia al script donde se normaliza la fecha con lo dicho anteriormente):

Se destac en color rojo, la seccin donde se ingresa el sexo y la ciudad, por medio de dos DropDow List, esto quiere decir que mediante dos listas desplegables se completa esa parte del registro, una lista contiene la opcin masculino o femenino para el sexo y la otra lista contiene ciertas ciudades y se debe seleccionar una de ellas (no se permite ingresar una nueva ciudad, solo seleccionar una ya existente). Esta fue la estructura ms acorde para lo que se solicitaba, ya que la respuesta generalmente debera estar en la lista desplegable. La estructura de cdigo para capturar los datos en esta seccin es la siguiente:

Se destac en color verde, la seccin donde se debe ingresar el Inters personal, que al ser una parte que contiene textos ms extensos, tiene una estructura diferente a la estructura en donde se ingresaba el nombre, en esta ocasin se utiliza un campo de texto, en este se pueden ingresar textos ms extensos y su estructura en cdigo es la siguiente:

Finalmente se destac en color azul, la seccin donde se debe ingresar la hora de entrada y la hora de salida, esto se maneja mediante dos listas desplegables, una lista contiene la hora de ingreso, incluyendo hora y minutos y la otra contiene lo mismo pero para la hora de salida. La estructura en cdigo para capturar la hora ingresada es la siguiente:

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

2.- Uso de CSS (20 ptos.) El sitio http://www.csszengarden.com muestra la potencia asociada al uso de las Hojas de Estilo en Cascada para modificar la vista de nuestra aplicacin. Se pide que el grupo haga un ejemplo de una web que tenga un men a la izquieda (slo un par de opciones, links, que desplieguen pginas estticas a la derecha) que, al cambiar su hoja de estilo, pase el men a la derecha y el despliegue a la izquierda. Respuesta: CSS: Las hojas de estilo o CSS, nos permiten aadir cierto tipo de formato a todo lo que este escrito en HTML, entre otros. Haciendo una divisin entre la apariencia de una determinada pgina, con su contenido. Esto nos dice que la informacin estar en la pgina HTML, pero este no definir como es que el usuario visualizara dicha informacin, debido a que todo lo relacionado a visualizacin est contenido en la hoja de estilo. Estas hojas funcionan mediante el uso de tags o etiquetas, las cuales son responsables de indicarle al navegador, los elementos que conforman la pgina, y este se encarga de darle el formato a cada elemento individualmente.

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

Para el desarrollo de la pregunta 2 utilizamos el siguiente CSS. #derecha { background-color:orange; // se le asigna el color que tendra el cuadro position: absolute; // la posicion que tendra width: 184px; //las cordenadan en la cual estara en la pagina top: 120px; ; //las cordenadan en la cual estara en la pagina float: right; ; //las cordenadan en la cual estara en la pagina left: 1050px; ; //las cordenadan en la cual estara en la pagina height: 40%; overflow:hidden; } #izquierda { background-color: yellowgreen; //se repite lo mismo que el anterior pero tomas otros datos de position:absolute; //posicion y color width: 184px; top: 120px; float: right; left: 50px; height: 40%; overflow:hidden; text-align:center; } #izquierda1 { background-color: cornsilk; position:absolute; width: 184px; top: 120px; left: 50px; height: 40%; overflow:hidden; text-align:center; } #cuerpo { background-color: white; position: relative; Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

width: 720px; top: 0px; left: 250px; MIN-HEIGHT: 700px; HEIGHT: auto !important; HEIGHT: 700px; }

ul#menu { list-style:none; /* Para que no salgan simbolos a la izquierda */ padding:0; margin:15px; font-family: arial, verdana, sans-serif; /* Tipo de letra */ font-size: 12px; float: left; width:390px; line-height:220%; /* Es para que la letra no quede pegada arriba. El valor lo he ido calculando a ojo */ border: 1px solid white; /* El que rodea a toda la lista */ } ul#menu li { color: white; background-color:#006600; border: 1px solid white; /* El que rodea a cada elemento */ height: 30px; text-align: left; font-weight: bold; } ul#menu li a { background-color:#339933; display:block; height: 100%; text-decoration:none; color:white; } ul#menu li a:hover { background-color:#006600; } Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

Para hacer el llamado a la hoja de estilo se realiza de la siguiente forma:

Igual mente darle referencia a las distintas forma que se ocupara la hoja de estilo se realiza de la siguiente forma:

Donde se da referencia a la hoja de estilo de la izquierda y al men. Al momento de realizar cualquier accin en uno del men se activa una nueva pgina el cual tendr referencia a otra forma de men y ubicacin como se muestra en las siguientes imgenes

En cada pgina se cambian el estilo del men y el color de fondo que tiene el men es este caso es naranjo y est a la derecha.

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

En este caso se volvi al principio en donde se obtiene otra forma de menu con otro color y orientacin como se muestra en la hoja de estilo de css.

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

3.- Uso de Scriplet en JSP (20 ptos.) Haga una pgina JSP (sin JSTL) que reciba por POST los datos del formulario establecidos en la pregunta No. 1 y los inserte en la tabla Personas. Respuesta:

Imagen N2 Formulario en HTML. En primer lugar debemos saber que es el mtodo POST: Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP, utilizando la codificacin enctype. Se utiliza para aplicaciones que modifican la base de datos de destino (Ingresar registro a la base de datos). Para el problema que se nos est solicitando a realizar se nos pide que a travs del mtodo POST que se ingresen registros a la tabla personas. En primer lugar debemos llenar el tem Ciudad de la tabla ciudad a travs de una consulta como se muestra en el siguiente fragmento de cdigo html, mysql u Oracle:

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

<sql:query var="result" dataSource="jdbc/myDataOracle"> SELECT ciudad FROM ciudad </sql:query> <p>Ciudad <select name="ciudad"> <c:forEach var="row" items="${result.rowsByIndex}"> <c:forEach var="column" items="${row}"> <option value="${column}" > <c:out value="${column}"/> </option> </c:forEach> </c:forEach> </select> </p> Luego de haber llenado el drop-down list a travs de una consulta a la base de datos. Y haber llenado los campos de formulario (Ver imagen N 2). A travs del mtodo POST los datos sern enviados a la base de datos. Donde a travs del script de java se obtienen los parmetros de la pgina JSP ya sea nombre, apellido, direccin y otros campos que obtiene el formulario con el mtodo request.getParameter() .

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

El script que ejecuta el POST es el siguiente: <% String rut = request.getParameter("rut"); String nombre = request.getParameter("nombre"); String apellidop = request.getParameter("apellidop"); String apellidom = request.getParameter("apellidom"); String fechanacimiento = request.getParameter("fechanacimiento"); String sexo = request.getParameter("sexo"); String ciudad = request.getParameter("ciudad"); String interes = request.getParameter("interes"); String fechaingreso = request.getParameter("fechaingreso"); String horaentrada = request.getParameter("horaentrada"); String horasalida = request.getParameter("horasalida"); //A travs de estos obtenemos todos los datos ingresados por el usuario para poder manejarlos posteriormente en nuestra base de datos// try { //Ac es donde creamos la conexin con la base de datos, que puede ser la que estimemos pertinente, en este caso utilizamos MySQL donde se crea una instancia de insercin de datos, hacia la base de datos, ocupando las variables que almacenaban los datos ingresados por el usuario en el formulario.// Class.forName(driver).newInstance(); conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/"+bd,user,pass); Statement st = (Statement) conn.createStatement(); if (conn != null){ st.executeUpdate("INSERT INTO perosna (rut,nombre,apellido_p,apellido_m,fecha_nacimiento,sexo,interes,fecha_ingreso,hora_entrada,ho ra salida) values(\"" +rut+"\","+nombre+","+apellidop+","+apellidom+","+fechanacimiento+","+sexo+","+ciudad+","+in teres+","+fechaingreso+","+horaentrada+","+horasalida+")"); out.println("REGISTRO INSERTADO"); } st.close(); conn.close(); } catch(SQLException ex) { out.println(ex); } } %>

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

4.- Uso de Servlet (20 ptos. Haga los mismo que en problema no. 3 pero use ahora un Servlet. Servlet: Podramos definir un Servlet como un programa JAVA que se ejecuta en el marco de un servicio de red, como por ejemplo un servidor web, y que recibe y responde a las peticiones de un cliente. En el caso de servlet es casi lo mismo que la insercin de registro a travs de jsp utilizando el mtodo post, ya que se utilizan los mismos parmetros que se obtiene del formulario. Para poder activar la insercin de datos a travs del servlet se realiza un form que utilizando un action que da referencia al servlet al momento de realizar la accin de enviar.

Para obtener los valores del formulario se utiliza el siguiente cdigo String rut = request.getParameter("rut"); String nombre = request.getParameter("nombre"); String apellidop = request.getParameter("apellidop"); . A travs del metodo request.getParameter obtenemos los valores de los campos del formulario y los transformamos en String. Luego son enviados a la sentencia de insert. st.executeUpdate("INSERT INTO persona2 (rut,nombre,apellido_p,apellido_m,fecha_nacimiento,ciudad,sexo,interes,fecha_ingreso,hora_ent rada,hora_salida) values(\"" +rut+"\",\""+nombre+"\",\""+apellidop+"\",\""+apellidom+"\",\""+fechanacimiento+"\",\""+ciuda d+"\",\""+sexo+"\",\""+interes+"\",\""+fechaingreso+"\",\""+horaentrada+"\",\""+horasalida+"\") ");

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.

5.- Uso de JSTL (20 ptos.) Haga lo mismo que en el problema no. 3 pero ahora usando etiquetas JSTL JSTL: es una librera que encapsula las principales funcionalidades usadas para escribir paginas JSP, en etiquetas simples y fciles de entender y usar. Como su traduccin lo dice, JSTL es una librera de etiquetas de Paginas JavaServer, y facilita el uso de las funciones que antes se aplicaban mediante scriptlets JSP, los cuales eran ms engorrosos de manejar, debido a lo desordenado que se volvi el cdigo, adems como es cdigo embedido no se puede modificar. Las funciones generadas a partir de JSTL pueden ser reutilizadas, debido a que bsicamente es manejado como XML, siendo etiquetas simples y amigables.

<sql:update var="result" dataSource="jdbc/myDataMysql"> INSERT INTO persona2 (rut, nombre,apellido_p, apellido_m,fecha_nacimiento,ciudad,sexo, interes,fecha_ingreso,hora_entrada,hora_salida) VALUES (?,?,?,?,?,?,?,?,?,?,?) <sql:param value="${param['rut']}"></sql:param> <sql:param value="${param['nombre']}"></sql:param> <sql:param value="${param['apellidop']}"></sql:param> <sql:param value="${param['apellidom']}"></sql:param> <sql:param value="${param['ciudad']}"></sql:param> <sql:param value="${param['fechanacimiento']}"></sql:param> <sql:param value="${param['sexo']}"></sql:param> <sql:param value="${param['interes']}"></sql:param> <sql:param value="${param['fechaingreso']}"></sql:param> <sql:param value="${param['horaentrada']}"></sql:param> <sql:param value="${param['horasalida']}"></sql:param> </sql:update>

Introduccin Al Desarrollo De Aplicaciones Empresariales. Tema: Prueba N 3 Grupal.