Examen Practico Web 2009b

EXAMEN PRÁCTICO TÓPICOS SELECTOS DE INFORMÁTICA III Desarrollo de una pequeña aplicación web con uso de: • • • • • •

HTML CSS JavaScript ASP Dreamweaver SQL Server 2005

Universidad de Guadalajara Centro Universitario de los Valles Departamento de Ciencias Computacionales e Ingenierías Tópicos Selectos de Informática 3 (Programación para web) EXAMEN PRÁCTICO (Desarrollo de una pequeña aplicación web)

INSTRUCCIONES Lee detenidamente y con cuidado lo que se te pide que realicen en cada sección. Este examen práctico se conforma de varias partes, entre ellas: • Estructuración de un sitio web (conjunto de carpetas) • Configuración de un Sitio web bajo Adobe Dreamweaver CS3 • Maquetación de objetos web mediante CSS • Configuración y Administración de un sitio web secundario bajo IIS • Elaboración de formularios y de paginas web • Validación de objetos de formulario mediante JavaScript • Diseño, desarrollo y estructuración de una pequeña Base de Datos bajo el servidor SQL Server 2005 Express Edition • Programación de scripts de ASP que accederán a las tablas de la base de datos para: o Consultar datos o Verificar datos o Almacenar datos o Recuperar datos El examen se deberá realizar en tiempos extra clase (en el laboratorio de prácticas o en sus casas). El examen se realizará de manera individual. Cada quien entregará un solo proyecto. El examen se revisará en las dos horas de clase presencial en el laboratorio de cómputo, de las 08:00 a las 10:00 hrs. (No habrá otra fecha ni otro horario) Ya deben de estar funcionales los proyectos de examen práctico antes de que llegue el asesor al laboratorio de prácticas. A quienes se les vaya evaluando, podrán retirarse del laboratorio de prácticas. Para este proyecto no habrá asesorías pues es examen.

PARTE 1 ESTRUCTURACION DE UN SITIO WEB LOCAL • Deberás tener una carpeta llamada biblioteca directamente en C:\ • Dentro de esa carpeta deberás tener subcarpetas llamadas: o pags o imgs o js o css • En la carpeta pags deberás guardar todas aquellas páginas web que conformarán tu sitio web (excepto la de index (principal.asp)) • En la carpeta imgs deberás guardar todas las imágenes que se usarán en tu sitio web • En la carpeta js deberás guardar todos aquellos archivos .js que tendrán tus funciones de validaciones de JavaScript • En la carpeta css deberás guardar todos aquellos estilos en cascada (clases, pseudo clases, etiquetas, etc) que darán maquetación y presentación a tus páginas web PARTE 2 CONFIGURACION DE UN SITIO WEB BAJO ADOBE DREAMWEAVER CS3 • Deberás configurar la carpeta que creaste en C:\ llamada “biblioteca” como un sitio web de Adobe Dreamweaver CS3 • Este sitio web utilizará tecnología ASP VBscript • Su dirección virtual en web será: http://localhost/biblioteca • Su acceso de edición será precisamente c:\biblioteca (Local/Network)

PARTE 3 CONFIGURACION Y ADMINISTRACION DE UN SITIO WEB SECUNDARIO BAJO EL SERVIDOR WEB IIS • Deberás agregar un sitio web secundario (carpeta virtual) al servidor web IIS (Internet Information Server) • Ese sitio web secundario o carpeta virtual deberá apuntar a la carpeta que creaste en C:\biblioteca • El alias de este sitio web secundario será: “biblioteca” • Administrar el sitio web secundario: o Deberás configurar este sitio web de IIS llamado “biblioteca” con una pagina de arranque llamada: principal.asp o Deberás configurar este sitio para que tenga acceso anónimo

PARTE 4 DISEÑO, DESARROLLO Y ESTRUCTURACIÓN DE UNA PEQUEÑA BASE DE DATOS BAJO EL SERVIDOR SQL SERVER 2005 EXPRESS EDITION • Deberás crear una base de datos en SQL Server 2005 Express Edition llamada BDBiblioteca • Esa Base de Datos la guardarás en el directorio por defecto en el cual SQL Server almacena sus bases de datos • Deberás crear tres tablas, una llamada libros, otra llamada autores y otra llamada usuarios • La tabla usuarios deberá estar conformada de los siguientes campos o Id (Entero Autonumérico [Identidad 1,1]) (Llave primaria) o Usuario (nvarchar de 10) NOT NULL o Secreta (int de 5) NOT NULL o Nombre (nvarchar de 20) NOT NULL o Paterno (nvarchar de 20) NOT NULL o Materno (nvarchar de 20) NOT NULL • La tabla autores deberá estar conformada de los siguientes campos o Id (Entero Autonumérico [Identidad 1,1]) o Claveautor (nvarchar de 10) NOT NULL [Llave primaria] o Nombre (nvarchar de 20) NOT NULL o Paterno (nvarchar de 20) NOT NULL o Materno (nvarchar de 20) NOT NULL o Nacionalidad (nvarchar de 20) NOT NULL • La tabla libros deberá estar conformada de los siguientes campos o Id (Entero Autonumérico [Identidad 1,1]) o Isbn (nvarchar 20) NOT NULL [Llave primaria] o Claveautor (nvarchar de 10) NOT NULL [Llave foranea] o Titulo (nvarchar 30) NOT NULL o Editorial (nvarchar 25) NOT NULL o Paginas (Entero de 4) • Deberás introducir manualmente datos en las tres tablas, por lo menos 3 registros en cada una de ellas, por ejemplo: • TABLA USUARIOS: o Usuario1, secreto1, Juan, Pérez, García • TABLA AUTORES o Cesaromega, Cesar, Hernández, Rodríguez, España o Patyaa, Patricia, Alatorre, Rosas, México o Machan, Maria Elena, Chan, Salas, Guatemala • TABLA LIBROS o Xw2005esp, Cesaromega, SQL Server 2005, Alfaomega, 500 o Mx2003mex, Patyaa, Teorías del Aprendizaje, Trillas, 388

o Gm2002gua, Machan, Educación a Distancia, Paidós, 250 PARTE 5 ELABORACION DE FORMULARIOS Y PAGINAS WEB • Deberás diseñar y estructurar paginas web que servirán a manera de pantallas de captura para tus tablas de tus bases de datos pantallas de reportes o de presentación de datos consultados, por lo tanto: • Tu página web de inicio se llamará principal.asp y deberá tener: o Formulario web llamado formalogin o Caja de texto llamada txtusuario o Caja de texto tipo Password llamada txtpassword o Botón de comando tipo submit (para envío del formulario) o Diseño gráfico, imágenes, banner, pie de página con todos los datos del que hace el examen web (Tus datos personales) • Deberás tener una página web llamada menubiblioteca.asp en la cual tendrás una imagen de bienvenida y ligas a las demás páginas que conformarán tu sitio web, es decir ligas que digan y apunten a: o Altas de autores o Altas de libros o Consulta de autores o Consulta de Libros o Información del sitio (Datos generales sobre la web) • Deberás tener una página web llamada altasautores.asp que tendrá: o Formulario web llamado: formaautores o Caja de texto para capturar la clave del autor o Caja de texto para capturar el nombre del autor o Caja de texto para capturar el a. paterno del autor o Caja de texto para capturar el a. materno del autor o Combo Box o Caja de Selección para capturar la Nacionalidad del Autor con valores de: Selecciona un país… México España Guatemala Estados Unidos Cuba Austria Francia Alemania Italia Japón

• Deberás tener una página web llamada altaslibros.asp que tendrá: o Formulario web llamado: formalibros o Caja de texto para capturar la clave del libro (ISBN) o Caja de texto para capturar el nombre del libro o Caja de texto para capturar el No. de Páginas del Libro (solamente deberá aceptar valores numéricos (validada con JS) o Combo Box o Caja de Selección para capturar la Clave del Autor con valores dinámicos (Los valores que deberá mostrar esta caja de selección deberán de ser los valores de la tabla autores. Esta caja de selección deberá mostrar al usuario los nombres de los autores pero internamente deberán guardar la clave del autor. Para esto deberás hacer una consulta a la tabla autores y mediante un While – Wend deberás llenar o poblar los valores del combo box). • Deberás tener una página web llamada consultaautores.asp en la cual se tiene que ver en una tabla HTML todos los valores de los registros de la tabla autores de la base de datos. Mediante un ciclo While – Wend deberás armar esta tabla que mostrará en pantalla todos y cada uno de los registros de los autores que se encuentren en la tabla autores de SQL Server. o El campo clave del autor deberá ser una liga HTML, es decir, en tu tabla de HTML ya con los datos en pantalla, la celda que mostrará la clave del autor deberá ser una liga que al dar clic en esa liga deberá de enviarnos a otra página web llamada detalleautor.asp y en la cual se deberán mostrar todos aquellos libros que ha escrito el autor al cual le has dado clic a su clave. Por ejemplo, en la tabla autores tenemos un autor llamado Pedro Sánchez con clave 12345 y en la tabla libros tenemos 5 libros con la llave secundaria o en el campo claveautor el valor de 12345. Esto quiere decir que el autor Pedro Sánchez tiene en nuestra biblioteca 5 libros, entonces cuando demos clic en la liga de su clave 12345 la página llamada detalleautor.asp nos deberá mostrar solamente los libros de este autor. A esto se le conoce como una consulta Maestro – Detalle. • Deberás tener una página web llamada consultalibros.asp la cual será una tabla HTML que en sus celdas deberá mostrar todos los registros encontrados en la tabla libros de la Base de Datos. • Todas las páginas antes mencionadas que conformarán tu sitio web deberán tener una liga o enlace que apunte o te regrese a la página llamada menubiblioteca.asp.

PARTE 6 VALIDACIÓN DE OBJETOS DE FORMULARIO MEDIANTE JAVASCRIPT • En tu carpeta “js” de tu sitio web deberás desarrollar un script o página de JavaScript llamado validabiblioteca.js en el cuál tendrás las funciones de validación de todos y cada uno de los formularios. • Deberás tener una función llamada validaautores la cual en su interior tendrá código de JavaScript que te permitirá validar que el usuario: o No deje sin datos la caja de texto donde pides la clave del autor o No deje sin datos la caja de texto donde pides el nombre del autor o No deje sin datos la caja de texto donde pides el apellido paterno del autor o No deje sin datos la caja de texto donde pides el apellido materno del autor o No deje seleccionada la primera opción del combo box o caja de selección de la nacionalidad del autor que dice “Selecciona un autor” • Deberás tener otra función en el mismo archivo JS llamada validalibros la cual en su interior tendrá código de JavaScript que permitirá valida que el usuario: o No deje sin datos la caja de texto donde pides la clave del libro (ISBN) o No deje sin datos la caja de texto donde pides el titulo o el nombre del libro o No deje sin datos la caja de texto donde pides el Número de Páginas del Libro o No permitas que introduzca valores que no sean números donde pides el Número de Páginas, es decir, checar que solo se puedan escribir números en esta caja de textos (Se realiza con JavaScript) • Deberás tener otra función de código JavaScript en el mismo archivo JS que se llame validalogin la cual te permitirá validar que el usuario: o No deje sin datos o vacía la caja de texto donde pides nombre de usuario al inicio de tu sitio web (la página de logueo) o No deje sin datos o vacía la caja de texto donde pides Contraseña de usuario al inicio de tu sitio web (la página de logueo) Todas estas validaciones deberán mostrar un mensaje de alerta (ALERT de JS) indicándole al usuario en donde hubo omisiones de datos y además deberás colocar el cursor o el foco en el objeto de formulario que tenga una omisión o que esté siendo validado (Función Alert y Función Focus) Recuerda, todas estas funciones van en un solo archivo del tipo JS y deberás mandarlo llamar mediante la etiqueta <script> de HTML en todas aquellas paginas que requieran de las funciones que programaste.

PARTE 7 PROGRAMACION DE SCRIPTS DE ASP PARA GUARDAR Y RECUPERAR DATOS DEL SERVIDOR DE BASES DE DATOS • En la página de inicio, la que se llama principal.asp deberás tener código asp para verificar que el usuario y la contraseña que escriban en tu formulario de login sean usuarios que realmente existan en la base de datos • Mediante ASP deberás recuperar los valores escritos en las dos cajas de texto del fomulario de logueo. • Con esos dos valores (de las 2 cajas de texto) deberás hacer una consulta SQL hacia la tabla de usuarios del servidor de base de datos para verificar si es un usuario que existe en tu tabla antes mencionada. • Si hay coincidencia en tu tabla de los valores usuario y contraseña, deberás redireccionar tu usuario a la página de menubiblioteca.asp • Si no hay coincidencia en tu tabla de los valores de usuario y constreña deberás redireccionar a la página principal.asp • Para este script de ASP usarás línea de conexión hacia la base de datos, usarás recordset para la consulta hacia la tabla usuarios y verificarás el recordset mediante las propiedades BOF & EOF para saber si tiene datos o no el recordset. Usará una sentencia IF para ver hacia donde redireccionarás a tu usuario dependiente de lo que tenga de contenido el recordset. • Deberás tener una página llamada grabaautor.asp en la cual deberás tener código de ASP que te permitirá recuperar lo que el usuario escribió en los objetos de formulario de la página de altasautores.asp. Además deberás mediante ASP grabar esos datos en la tabla de la Base de Datos llamada autores y por último mostrar en pantalla un mensaje que diga: Se han grabado satisfactoriamente los siguientes datos. Y mostrarás en una tabla de HTML los datos recuperados y recién grabados en la tabla. Esta página deberá tener su liga hacia la página de menubiblioteca.asp • Deberás tener una página llamada grabalibros.asp en la cual deberás tener código de ASP que te permitirá recuperar lo que el usuario escribió en los objetos de formulario de la página de altaslibros.asp. Además deberás mediante ASP grabar esos datos en la tabla de la Base de Datos llamada libros y por último mostrar en pantalla un mensaje que diga: Se han grabado satisfactoriamente los siguientes datos. Y mostrarás en una tabla de HTML los datos recuperados y recién grabados en la tabla libros. Esta página deberá tener su liga hacia la página de menubiblioteca.asp

• La página llamada consultaautores.asp debe tener código ASP con acceso a los datos de la tabla autores y deberás mostrar en pantalla, en la parte visual de la página una tabla HTML en donde ubicarás en cada celda un valor de cada campo de la tabla de la Base de Datos. (Ya se había explicado anteriormente). En la celda que mostrará la clave del autor se deberá mostrar a manera de liga o enlace la cual enviará un parámetro llamado “idautor” a la página llamada detalleautor.asp. Ese parámetro es la clave del autor. • La página llamada consultalibros.asp debe tener código ASP con acceso a los datos de la tabla libros y deberás mostrar en pantalla, en la parte visual de la página una tabla HTML en donde ubicarás en cada celda un valor de cada campo de la tabla de la Base de Datos. (Ya se había explicado anteriormente). Deberá tener su respectiva liga o enlace que apunte hacia la página de menubiblioteca.asp • Deberás tener una página llamada detalleautor.asp la cuál tendrá código de ASP para recuperar el parámetro que le es enviado desde la página llamada consultaautores.asp. Ese parámetro se llama “idautor” y mediante Request.QueryString deberás recuperar ese valor. Con ese valor deberás hacer una consulta (query de SQL) hacia la tabla libros y verificarás en todo momento si tu consulta viene vacía o con datos. Si es positivo el encontrar registros idénticos al parámetro “idautor” entonces deberás recuperar todos los registros de la tabla libros y mostrarlos en una tabla de HTML en la parte visual de esta página web. Mostrarás los registros en una tabla HTML. Si es negativo el encontrar registros idénticos al “idautor” entonces deberás redireccionar al usuario a la página de menubiblioteca.asp • Deberás tener una página web llamada infositio.asp en la cual mostrarás los datos de tu empresa de desarrollo de aplicaciones web como su nombre, su dirección, su eslogan y por su puesto el nombre de la persona quien desarrolló este examen práctico.

PARTE 8 MAQUETACIÓN DE OBJETOS WEB MEDIANTE CSS • Deberás de formatear o configurar los objetos de formulario con colores de la siguiente manera: • En la página altaautores.asp los objetos de formulario deberán estar configurados así: o Cajas de texto en color amarillo claro como color de fondo y color azul fuerte el color de los textos o Cajas de Selección o Combo Box de color azul claro como fondo y color blanco los textos • En la página altalibros.asp los objetos de formulario deberán estar configurados así: o Cajas de texto en color violeta claro como color de fondo y color gris fuerte el color de los textos o Cajas de Selección o Combo Box de color verde claro o limón como fondo y color rojo los textos • En la página principal.asp los objetos de formulario deberán estar configurados así: o Cajas de texto en color gris claro como color de fondo y color azul fuerte el color de los textos o Botón de Comando o Submit de color Negro como color de Fondo y Color Blanco los textos que aparecen en él • Todos los textos de tu sitio web deberán estar configurados con los siguientes datos: o Familia Tipográfica: Tahoma, Verdana, Arial o Tamaño de Fuente: 10 pixeles (10px) o Esto lo deberás realzar mediante una clase de CSS llamada .textos_sitios • Todas las ligas o enlaces de este sitio web deberán de comportarse como rollover, es decir, que mientras no se coloque el puntero encima de una liga éstas NO deberán mostrar el clásico subrayado de los enlaces en las páginas web. Al momento de posicionar el puntero sobre cualquier enlace del sitio web, estos enlaces deberán mostrar el subrayado clásico. Mientras no estén subrayadas las ligas, éstas deberán de ser de color AZUL, y al momento de posicionar el puntero deberán de cambiar a color ROJO. Esto también deberá estar en clases o pseudo clases dentro de tu archivo llamado estilos_biblioteca.css que estará almacenado en la carpeta CSS de tu sitio web.

Todas las páginas de tu sitio web deberán tener las medidas estándar para visualizarse bien en una resolución de 800 x 600, es decir, de 760 píxeles de ancho por lo que necesiten de altura. Todo tu sitio web deberá tener uniformidad u homogeneidad en cuanto a su estructura, acomodo, diseño, colores, imágenes, banners, fuentes, etc. Todos los códigos de CSS, de JavaScript y de ASP deberán de estar comentados, deberán de agregar comentarios a las líneas de código de cada lenguaje para documentar todos sus scripts. Además deberán estar indentados para que la lectura de sus códigos sea fácil de comprender y así detectar posibles errores de programación. Todos los objetos como RECODSETs y CONEXIONES de ASP hacia la Base de Datos cuando ya no se utilicen deberán de cerrarse y destruirse forzosamente. Es obligatorio cerrar y destruir estos objetos de ASP cuando ya no se requieran en la página ASP que los necesitó. (De lo contrario se penalizará en el puntaje final).

Tabla de Puntajes Punto a evaluar

Tiene parte o muy poco de lo que se le solicito 1

Tiene casi todo de lo que se le solicito 3

Tiene todos los puntos solicitados y bien aplicados

PARTE 2 CONFIGURACION DE UN SITIO WEB BAJO ADOBE DREAMWEAVER CS3

1

3

5

PARTE 3 CONFIGURACION Y ADMINISTRACION DE UN SITIO WEB SECUNDARIO BAJO EL SERVIDOR WEB IIS

5

7

10

PARTE 4 DISEÑO, DESARROLLO Y ESTRUCTURACIÓN DE UNA PEQUEÑA BASE DE DATOS BAJO EL SERVIDOR SQL SERVER 2005 EXPRESS EDITION

5

10

15

PARTE 1 ESTRUCTURACION DE UN SITIO WEB LOCAL

5

PARTE 5 ELABORACION DE FORMULARIOS Y PAGINAS WEB

5

7

10

PARTE 6 VALIDACIÓN DE OBJETOS DE FORMULARIO MEDIANTE JAVASCRIPT

10

15

20

PARTE 7 PROGRAMACION DE SCRIPTS DE ASP PARA GUARDAR Y RECUPERAR DATOS DEL SERVIDOR DE BASES DE DATOS

10

15

25

PARTE 8 MAQUETACIÓN DE OBJETOS WEB MEDIANTE CSS

5

7

10

42

67

100

MUCHA SUERTE !!! (Éxito) Todo lo solicitado en este examen se vio en clases presénciales, o son aspectos solicitados en las investigaciones de sus tareas. También se piden aspectos que podrán encontrar en los materiales del curso en línea de esta materia. Además, se pueden consultar códigos de ejemplo encontrados en Internet, todo los solicitado es muy común en el desarrollo de aplicaciones web con ASP. (Pero recuerda que los códigos deberán ir comentados y acorde con las requisiciones de este examen práctico).

Diseñador del examen: Mtro. Abraham Vega Tapia