Portal web para un colegio: Internado Meinston

Memoria Proyecto Final de Carrera Portal web para un colegio: Internado Meinston Dirigido por: Félix Buendía Lidia Contreras Ochando Ingeniería Técnica en Informática de gestión Junio 2011 Memoria Proyecto Final de Carrera 2 Lidia Contreras Ochando 3 INDICE 1. INTRODUCCIÓN 7 1.1 OBJETIVOS DEL PROYECTO 7 1.2 CONTEXTO 7 1.3 ESTRUCTURA DEL DOCUMENTO 8 2. ESPECIFICACIÓN DE REQUISITOS 9 2.1 INTRODUCCIÓN 9 2.1.1 PROPÓSITO 9 2.1.2 ÁMBITO 9 2.1.3 DEFINICIONES, ACRÓNIMOS Y ABREVIATURAS 9 2.1.4 REFERENCIAS 10 2.1.5 VISIÓN GLOBAL 10 2.2 DESCRIPCIÓN GENERAL 10 2.2.1 PERSPECTIVA DEL PRODUCTO 10 2.2.2 FUNCIONES DEL PRODUCTO 10 2.2.3 CARACTERÍSTICAS DE USUARIO 11 2.2.4 RESTRICCIONES GENERALES 12 2.2.5 SUPUESTOS Y DEPENDENCIAS 12 2.3 REQUISITOS ESPECÍFICOS 12 2.3.1 REQUISITOS DE INTERFACES EXTERNAS 12 2.3.2 REQUISITOS FUNCIONALES 12 2.3.3 RESTRICCIONES DE DISEÑO 24 2.3.4 ATRIBUTOS 24 3. ANÁLISIS 25 3.1 UML 25 3.1.1 DIAGRAMA DE CLASES 25 3.1.2 DIAGRAMAS DE CASOS DE USO 27 Memoria Proyecto Final de Carrera 4 4. DISEÑO 33 4.1 ARQUITECTURA DEL SISTEMA 33 4.1.1 NIVEL DE PRESENTACIÓN 34 4.1.2 NIVEL DE APLICACIÓN 36 4.1.3 NIVEL DE PERSISTENCIA 37 5. IMPLEMENTACIÓN 38 5.1 TECNOLOGÍAS UTILIZADAS 38 5.1.1 HTML 39 5.1.2 CSS 39 5.1.3 PHP 39 5.1.4 JQUERY (JAVASCRIPT) 39 5.1.5 MYSQL 40 5.2 HERRAMIENTAS UTILIZADAS 40 5.3 IMPLEMENTACIÓN DETALLADA 40 5.3.1 CAPA DE PRESENTACIÓN 40 5.3.2 CAPA DE APLICACIÓN 45 5.3.3 CAPA DE PERSISTENCIA 54 6. EVALUACIÓN Y PRUEBAS 56 6.1 PRUEBA DE ENLACES ROTOS 56 6.2 VALIDACIÓN DE HTML 57 6.3 VALIDACIÓN DE CSS 57 6.4 PRUEBA DE COMPATIBILIDAD PARA MÓVIL 58 6.5 COMPATIBILIDAD CON LOS NAVEGADORES 59 6.5.1 MOZILLA FIREFOX 59 6.5.2 INTERNET EXPLORER 60 6.5.3 GOOGLE CHROME 61 6.5.4 OPERA 62 6.6 COMPATIBILIDAD CON DIFERENTES RESOLUCIONES 63 Lidia Contreras Ochando 5 7. CONCLUSIONES 64 8. BIBLIOGRAFÍA 65 9. ANEXOS 66 9.1 ANEXO A: CASOS DE USO 66 9.2 ANEXO B: DISEÑO CONCEPTUAL DE LA BASE DE DATOS 83 9.3 ANEXO C: DOMINIOS BASE DE DATOS 86 9.4 ANEXO D: FICHERO DE CREACIÓN DE LA BASE DE DATOS 87 9.5 ANEXO E: ESTRUCTURA DE ARCHIVOS 94 9.6 ANEXO F: MANUAL DE USUARIO 96 9.6.1 PÁGINA PRINCIPAL 96 9.6.2 INTRANET 100 9.5 ANEXO G: ÍNDICE DE ILUSTRACIONES 115 Memoria Proyecto Final de Carrera 6 Lidia Contreras Ochando 7 1. Introducción Este documento es el Proyecto Final de Carrera de Ingeniería Técnica en Informática de Gestión, cursado en la Escuela Técnica Superior de Ingeniería informática de la Universidad Politécnica de Valencia. Durante el resto del documento podremos ver la evolución que ha sufrido el proyecto para su desarrollo, desde el planteamiento y análisis de requisitos, hasta su implementación y diseño de la interfaz visible para el usuario final. 1.1 Objetivos del proyecto La finalidad es crear un portal web para un colegio-internado, en el que los familiares puedan tener un seguimiento de la educación y la evolución de sus hijos; los alumnos puedan comunicarse con sus familiares, además de ver sus notas y su progreso; y los profesores puedan poner a sus alumnos las notas correspondientes, las observaciones requeridas o puedan evaluar el seguimiento de sus alumnos tutelados. El portal del colegio, en adelante Meinston, tratará de cumplir dos objetivos esenciales: 1Servir de portal informativo, claro y ordenado, en el que quede patente para todo el que lo visite, de las intenciones y las cualidades del colegio. 2Albergar una intranet para personal docente, alumnos y familiares, donde poder comunicarse entre ellos de forma rápida y simple, donde los padres puedan ver el progreso de sus hijos y los profesores comunicarse con ellos. 1.2 Contexto El colegio Meinston, es un internado ubicado en los Pirineos, en un inmejorable entorno natural, ofreciendo un amplio programa educativo al aire libre. Enseña a alumnos desde los 2 años hasta 2º de Bachillerato, es bilingüe español-inglés y sirve de residencia a los alumnos que deciden vivir allí el año escolar entero. La directiva del colegio ha decidido darse a conocer a través de las nuevas tecnologías, ya que hasta ahora no han tenido página web, y quieren crear una plataforma que sirva tanto de intranet para las personas del colegio, como informativa para los visitantes. Ilustración 1 – 1 - Colegio Meinston Memoria Proyecto Final de Carrera 8 1.3 Estructura del documento Este documento presenta una estructura en etapas, común en el desarrollo de un proyecto software. Estas etapas serán las siguientes:  Especificación de requisitos  En esta fase se reúnen todos los requisitos funcionales que debe tener el producto final. En la especificación de requisitos participa activamente el cliente, de modo que pueda aportar sus ideas.  Análisis El Análisis describe la estructura y funcionalidad del producto mediante diagramas que permiten comprender el sistema y su funcionamiento. Se incluyen diagrama de clases UML y casos de uso, que describen los principales comportamientos del portal.  Diseño  En esta fase se explican los diferentes niveles que componen la arquitectura de la aplicación (nivel de presentación, nivel lógico y nivel de persistencia).  Implementación En esta etapa, se describen las diferentes tecnologías utilizadas, las herramientas usadas en el desarrollo del proyecto, y se explican detalladamente la implementación y el código asociado.  Evaluación y pruebas  En este apartado se efectúan una serie de pruebas para evaluar el correcto funcionamiento del sistema. Finalmente el documento terminará con un apartado de conclusiones, bibliografía y anexos, incluyendo estos últimos los diagramas UML, diseños conceptuales de la base de datos, relación de ilustraciones, etc. Lidia Contreras Ochando 9 2. Especificación de requisitos 2.1 Introducción 2.1.1 Propósito La especificación de requisitos tiene como finalidad conocer lo que se demanda y espera obtener de la aplicación, muy importante para el desarrollo de la misma. 2.1.2 Ámbito El colegio Meinston es un internado para niños desde infantil hasta bachillerato, ubicado en los Pirineos. La directiva del colegio ha decidido darse a conocer a través de las nuevas tecnologías en internet y a la vez servir de puente entre profesores y alumnos, con los familiares de estos últimos, de manera que esa comunicación se pueda hacer en tiempo real. 2.1.3 Definiciones, Acrónimos y abreviaturas Internado  Centro de enseñanza donde los niños además de dar clase, viven allí durante el periodo escolar. Alumno  Todas las personas que están matriculadas en el internado con la finalidad de estudiar. Profesor  Todas aquellas personas que trabajan en el internado como docentes de alguna materia. Monitor  Todas aquellas personas que trabajan en el internado como monitor de algún deporte. Familiar  La persona que se responsabiliza de uno o más alumnos del internado. Intranet  Una intranet es una red privada que utiliza tecnología Internet para compartir, dentro de una organización, parte de sus sistemas de información y sistemas operacionales. Anónimo  Toda persona que accede a la web sin identificarse. Comunicado  Aquel mensaje que puede ser enviado: - Desde un alumno a su familiar. - Desde un alumno a su tutor. - Desde el familiar a algún alumno suyo. - Desde un profesor a un alumno tutelado. Observación  Aquel mensaje que puede ser enviado por el personal del colegio a cualquier alumno o de un alumno al personal del colegio, siempre que este último sea profesor o monitor suyo. Informe  Un informe que un profesor deberá escribir y enviar a cada uno de los familiares de sus alumnos tutelados, informando del progreso, comportamiento y estado del alumno. Memoria Proyecto Final de Carrera 16 3.4. Listar comunicados. Introducción: Visualizar los comunicados enviados o recibidos. Entradas: Datos del familiar. Proceso: Consultar los comunicados. Salida: Lista de comunicados. 3.5. Escribir comunicado al alumno. Introducción: Escribir un comunicado para el alumno seleccionado. Entradas: Datos del alumno, datos del comunicado. Proceso: Enviar comunicado al alumno, introducir nueva tupla. Salida: Confirmación de envío. 3.6. Listar observaciones del alumno. Introducción: Consultar las observaciones enviadas al alumno seleccionado. Entradas: Datos del alumno. Proceso: Consultar observaciones del alumno. Salida: Lista de observaciones. 3.7. Listar notas del alumno. Introducción: Consultar las notas pertenecientes al alumno seleccionado. Entradas: Datos del alumno. Proceso: Consultar las notas del alumno. Salida: Lista de las notas del alumno. 3.8. Listar exámenes del alumno. Introducción: Consultar las fechas de los exámenes del alumno. Entradas: Datos del alumno. Proceso: Consultar calendario de exámenes. Salida: Lista de exámenes. 3.9. Listar deportes a los que el alumno está apuntado. Introducción: Consultar los deportes a los que está apuntado el alumno seleccionado. Entradas: Datos del alumno. Proceso: Consultar deportes. Salida: Lista de deportes. Lidia Contreras Ochando 17 3.10. Modificar datos personales del alumno. Introducción: Modificar los datos del alumno seleccionado. Entradas: Datos del alumno, nuevos datos. Proceso: Modificar las tuplas de los datos del alumno. Salida: Confirmación de modificación, Lista de los nuevos datos. 4. Operaciones permitidas para Profesor: 4.1. Acceder a la intranet mediante su DNI. Introducción: Acceder a la intranet del profesor mediante su clave de acceso. Entradas: DNI del profesor y clave de acceso. Proceso: Acceder a la intranet y conectarse a la base de datos. Salida: Visualizar la intranet. 4.2. Listar asignaturas asignadas. Introducción: Consultar las asignaturas en las que el profesor debe dar clase. Entradas: Datos del profesor. Proceso: Listar asignaturas asignadas al profesor que ha iniciado sesión. Salida: Lista de las asignaturas asignadas. 4.3. Listar exámenes. Introducción: Consultar los exámenes a los que debe acudir el profesor. Entradas: Datos del profesor. Proceso: Consultar las fechas de los exámenes del profesor. Salida: Lista de los exámenes. 4.4. Listar alumnos tutelados. Introducción: Consultar los alumnos bajo su tutela. Entradas: Datos del profesor. Proceso: Consultar los alumnos que el profesor tiene asignados como tutor. Salida: Lista de alumnos tutelados. Memoria Proyecto Final de Carrera 18 4.5. Listar comunicados. Introducción: Consultar los comunicados enviados y recibidos. Entradas: Datos del profesor. Proceso: Consultar los comunicados. Salida: Lista comunicados. 4.6. Escribir comunicados a alumnos. Introducción: Escribir un comunicado a los alumnos tutelados. Entradas: Datos del alumno. Proceso: Enviar comunicado. Salida: Confirmación de envío. 4.7. Escribir informe a los alumnos tutelados. Introducción: Escribir el informe a los familiares de los alumnos tutelados. Entradas: Datos del alumno. Proceso: Enviar informes. Salida: Confirmación de envío. 4.8. Escribir observación a alumno. Introducción: Escribir una observación a un alumno. Entradas: Datos del alumno. Proceso: Consultar los comunicados recibidos. Salida: Lista comunicados. 4.9. Modificar nota de alumno. Introducción: Modificar la nota de un alumno de alguna asignatura del profesor. Entradas: Datos del profesor, datos del alumno. Proceso: Modificar tupla de nota. Salida: Lista de notas, confirmación de cambio. 4.10. Modificar sus datos personales. Introducción: Modificar los datos personales del profesor. Entradas: Datos del profesor, nuevos datos del profesor. Proceso: Modificar tuplas. Salida: Lista de datos personales, confirmación de cambio. Lidia Contreras Ochando 19 4.11. Listar sus datos personales. Introducción: Consultar los datos personales del profesor. Entradas: Datos del profesor. Proceso: Consultar los datos personales. Salida: Lista de datos personales. 5. Operaciones permitidas para Administrador: 5.1. Buscar alumno por DNI. Introducción: Consultar los datos de un alumno mediante su DNI. Entradas: DNI del alumno. Proceso: Consultar los datos del alumno Salida: Lista de datos personales del alumno. 5.2. Buscar alumno por nombre. Introducción: Consultar los datos de un alumno mediante su nombre. Entradas: Nombre (o apellido) del alumno. Proceso: Consultar los datos del alumno Salida: Lista de datos personales del alumno. 5.3. Buscar personal por DNI. Introducción: Consultar los datos de un miembro del personal mediante su DNI. Entradas: DNI del miembro del personal. Proceso: Consultar los datos del miembro del personal. Salida: Lista de datos personales del miembro del personal. 5.4. Buscar alumno por nombre. Introducción: Consultar los datos de un miembro del personal mediante su nombre. Entradas: Nombre (o apellido) del miembro del personal. Proceso: Consultar los datos del miembro del personal. Salida: Lista de datos personales del miembro del personal. Memoria Proyecto Final de Carrera 20 5.5. Buscar familiar por DNI. Introducción: Consultar los datos de un familiar mediante su DNI. Entradas: DNI del familiar. Proceso: Consultar los datos del familiar. Salida: Lista de datos personales del familiar. 5.6. Buscar familiar por nombre. Introducción: Consultar los datos de un familiar mediante su nombre. Entradas: Nombre (o apellido) del familiar. Proceso: Consultar los datos del familiar. Salida: Lista de datos personales del familiar. 5.7. Buscar familiar por DNI de alumno. Introducción: Consultar los datos de un familiar mediante del DNI de un alumno. Entradas: DNI del alumno. Proceso: Consultar los datos del familiar de un alumno. Salida: Lista de datos personales del familiar. 5.8. Listar alumnos dado un familiar. Introducción: Consultar los alumnos asignados a un familiar concreto. Entradas: Datos del familiar. Proceso: Consultar los alumnos. Salida: Lista de alumnos. 5.9. Buscar familiar por nombre de alumno. Introducción: Consultar los datos de un familiar mediante el nombre de un alumno. Entradas: Nombre (o apellido) del alumno. Proceso: Consultar los datos del familiar. Salida: Lista de datos personales del familiar. 5.10. Consultar número total de alumnos/personal/familiares. Introducción: Consultar el número total de alumnos/personal/familiares registrados en la base de datos. Entradas: Tipo de dato (Alumno/personal/familiar). Proceso: Consultar cantidad de datos registrados. Lidia Contreras Ochando 21 Salida: Número de datos. 5.11. Listar todos los alumnos/personal/familiares. Introducción: Consultar la totalidad de los alumnos/personal/familiares registrados en la web. Entradas: Tipo de dato (Alumno/personal/familiar). Proceso: Listar todos los alumnos/personal/familiares. Salida: Lista de nombres y DNI. 5.12. Listar alumnos por curso/asignatura/deporte. Introducción: Consultar los alumnos pertenecientes a un curso/asignatura/deporte en concreto. Entradas: Tipo de dato (Curso/Asignatura/Deporte). Proceso: Listar los alumnos. Salida: Lista de nombres y DNI. 5.13. Listar alumnos por fecha de ingreso. Introducción: Consultar los alumnos que se registraron en la web en una fecha concreta. Entradas: Fecha o intervalo de tiempo. Proceso: Listar los alumnos. Salida: Lista de nombres y DNI. 5.14. Listar alumnos por edad/año de nacimiento. Introducción: Consultar los alumnos que nacieron el mismo año. Entradas: Edad/año de nacimiento. Proceso: Listar los alumnos. Salida: Lista de nombres y DNI. 5.15. Listar alumnos por sexo. Introducción: Consultar los alumnos del mismo sexo. Entradas: Sexo (Hombre/mujer). Proceso: Listar los alumnos. Salida: Lista de nombres y DNI. Memoria Proyecto Final de Carrera 22 5.16. Listar alumnos tutelados por un profesor. Introducción: Consultar los alumnos que comparten el mismo tutor. Entradas: Datos del profesor. Proceso: Listar los alumnos. Salida: Lista de nombres y DNI. 5.17. Consultar tutor dado un alumno. Introducción: Consultar el tutor del alumno seleccionado. Entradas: Datos del alumno. Proceso: Listar datos del profesor. Salida: Datos del profesor. 5.18. Listar notas dado un alumno. Introducción: Consultar las notas de un alumno. Entradas: Datos del alumno. Proceso: Listar notas. Salida: Lista de notas. 5.19. Listar profesores por curso/asignatura. Introducción: Consultar los profesores asignados a un curso o a una asignatura. Entradas: Tipo de dato (Curso/Asignatura). Proceso: Listar los profesores. Salida: Lista de nombres y DNI. 5.20. Listar monitores deportivos por deporte. Introducción: Consultar el monitor deportivo asignados a un deporte. Entradas: Deporte. Proceso: Listar los monitores deportivos. Salida: Lista de nombres y DNI. 5.21. Listar deportes/asignaturas. Introducción: Consultar todos los deportes/asignaturas impartidos en el colegio. Entradas: Base de datos. Proceso: Listar deportes/asignaturas. Salida: Lista de deportes/asignaturas. Lidia Contreras Ochando 23 5.22. Añadir personal/alumno Introducción: Introducir los datos de un nuevo personal/alumno. Entradas: Datos de la persona. Proceso: Crear nuevas tuplas. Salida: Datos introducidos, confirmación de inserción. 5.23. Añadir familiar Introducción: Introducir los datos de un nuevo familiar. Entradas: Datos de la persona, datos del alumno. Proceso: Crear nuevas tuplas. Salida: Datos introducidos, confirmación de inserción. 5.24. Modificar usuarios. Introducción: Modificar los datos de un usuario. Entradas: Datos del usuario, nuevos datos del usuario. Proceso: Modificar las tuplas. Salida: Confirmación de modificación, nuevos datos. 5.25. Asignar/modificar claves a los usuarios. Introducción: Modificar la clave de un usuario. Entradas: Datos del usuario, nueva clave. Proceso: Modificar las tuplas. Salida: Confirmación de modificación, nuevos datos. 5.26. Borrar usuarios. Introducción: Borrar los datos de un usuario. Entradas: Datos del usuario. Proceso: Eliminar las tuplas. Salida: Confirmación de borrado. Memoria Proyecto Final de Carrera 24 2.3.3 Restricciones de diseño Se realizará un diseño general para cualquier situación. 2.3.4 Atributos 2.3.4.1 Seguridad La aplicación no mostrará en ningún momento los datos de sus usuarios para protegerlos de posibles fraudes con sus datos personales, para ello se utilizaran los servicios que ofrece SSL. El usuario que desee utilizar los servicios de la Web tendrá identificarse dentro de la página con su DNI y clave (asignados al registrarse en la web). El servidor protegerá todas las transacciones que se puedan realizar tanto del usuario hacia el servidor como el servidor al usuario. 2.3.4.2 Mantenimiento El mantenimiento se llevará a cabo por la persona asignada y autorizada previamente, con conocimientos sobre el sistema. Se realizarán las pertinentes copias de seguridad de la base de datos periódicamente. Lidia Contreras Ochando 25 3. Análisis El siguiente apartado nos describe la fase de análisis del proyecto. En esta etapa se analiza la aplicación que vamos a crear y se describe su estructura y funcionalidad mediante diagramas UML, con los que entender su funcionalidad nos será más sencillo. Al final de esta fase tendremos un modelo con los diferentes actores que interactúan con los objetos del sistema a través de diversas relaciones y las acciones que cada uno de ellos podrá llevar a cabo. 3.1 UML UML es un lenguaje de modelado que utilizaremos para describir nuestro sistema, para detallar y construir los métodos y atributos que estarán presentes en él. Realizaremos varios diagramas para poder entender mejor nuestra aplicación. 3.1.1 Diagrama de clases Un diagrama de clases describe la estructura de un sistema mostrando sus clases, atributos y las relaciones entre ellos, donde se crea el diseño conceptual de la información que se manejará en el sistema, y los componentes que se encargaran del funcionamiento y la relación entre uno y otro. En la ilustración 3-1podemos ver el diagrama de clases de nuestra aplicación. Ilustración 3–1 - Diagrama de clases Memoria Proyecto Final de Carrera 32 3.1.2.6 Caso de uso: Administrador Ilustración 3–9 - Caso de Uso: Administrador El Administrador tiene permisos totales para modificar, añadir o borrar cualquier elemento de la aplicación. Para una información más detallada de cada uno de los casos de uso, se encontrarán sus descripciones en el Anexo A. Lidia Contreras Ochando 33 4. Diseño 4.1 Arquitectura del sistema Nuestra aplicación está basado en el modelo Cliente / Servidor. Los clientes realizan peticiones Servidor Web que le ofrece la respuesta, de este modo la capacidad de proceso está repartida entre los clientes y los servidores. Mediante esta arquitectura los accesos, recursos y la integridad de los datos son controlados por el servidor, de modo que un cliente no puede acceder a aquellos datos a los que no esté autorizado. La arquitectura de nuestra web estará estructurada de la siguiente manera:  Nivel de presentación  Esta capa de nuestra arquitectura se encarga de la representación de la información para el usuario final, interactuando con él y comunicándose únicamente con el nivel de aplicación.  Nivel de aplicación  Es donde se ubica el código de los programas, que se ejecutan, recibiendo las peticiones del usuario y enviándole las respuestas tras el proceso.  Nivel de persistencia  En esta capa se encuentran los datos guardados en bases de datos y procesados por el nivel de aplicación. A continuación se detallan cada uno de los niveles en nuestro proyecto. Nivel de presentación (Interfaz gráfica de usuario) Nivel de aplicación Nivel de persistencia (Base de datos) Memoria Proyecto Final de Carrera 34 4.1.1 Nivel de presentación El nivel de Presentación está formado por todos los documentos que envía el servidor al cliente y que se muestran al usuario final de la aplicación. En nuestra aplicación hay dos vistas diferentes de la web. La primera para usuarios en general y la segunda, solo para registrados, la intranet. 4.1.1.1 Interfaz gráfica Ilustración 4–1 - Interfaz de usuario, Vista 1 La primera vista de nuestra aplicación, que se corresponde a la página de inicio, galería de imágenes, formulario de contacto e información, se divide en los siguientes apartados: 1. En la parte superior, el logotipo del colegio a la izquierda y el menú de categorías de la web a la derecha (Ilustración 4-1, Menú principal). Con este menú podremos acceder a la página de inicio, a la información del colegio, a la galería de imágenes y a la información de contacto. 2. En la parte izquierda de la web tenemos el cuerpo de la misma (Ilustración 4-1, Cuerpo), el texto que nos describe aquello que estamos viendo. 3. En la parte derecha podemos encontrar en primer lugar el buscador de la web. Seguidamente vemos el formulario de acceso a la intranet (Ilustración 4-1, Acceso a la intranet), donde tendremos que introducir nuestro DNI y contraseña. La última parte es el menú interno de la categoría en la que nos encontramos, si dispone de él, en caso contrario se verá el menú de la web (Ilustración 4-1, Submenú). Lidia Contreras Ochando 35 La segunda vista se corresponde a la intranet, a la que accederán solo los usuarios registrados. Ilustración 4–2 - Interfaz de usuario, Vista 2 1. El menú de categorías se encuentra a la izquierda de la pantalla, con el podremos acceder a las diferentes funciones de la intranet (Ilustración 4-2, Menú). Este menú será diferente según que usuario haya iniciado sesión. 2. En la parte superior podemos ver una cabecera con el logotipo del colegio, el nombre y apellidos de la persona que ha iniciado sesión, así como su tipo de usuario y dos enlaces, para volver a la página inicial y cerrar sesión respectivamente (Ilustración 4-2, Cabecera). 3. La parte derecha, bajo la cabecera, es el cuerpo de la página. En este apartado veremos los datos y resultados de las consultas a las bases de datos (Ilustración 4-2, Cuerpo). Memoria Proyecto Final de Carrera 36 4.1.2 Nivel de aplicación Con esta capa definiremos el comportamiento de los objetos que interactuaran en la web. Estos objetos contienen diversos tipos de funciones que se diferencian según su propósito: mostrar información, acceder a la base de datos o procesar datos. A continuación, se muestran las diferentes acciones que se pueden desarrollar en el sistema, asociando a cada una, los ficheros que contienen las funciones que deben utilizar. Ilustración 4–3 - Diagrama de componentes Desde la página principal accederemos a las diversas funciones del portal. Los archivos descritos en la ilustración 4-3, en el apartado de la página principal, mostrarán sobre todo información, sin acceder a la base de datos. Sí accederán, sin embargo, los archivos de identificación y aquellos asociados a las funciones de la intranet. Para mayor detalle en la estructura de archivos, hay más información en el Anexo E. Página Principal (Index.php) contacto.php galeria.php informacion.php form_intra.php Identificación (intranet.php) carga_intranet.php inicia_sesión.php Solicitar Información (contacto.php) enviar.php Intranet (Intranet.php) lista_datos.php modifica_datos.php elimina_datos.php inserta_datos.php form_datos.php Lidia Contreras Ochando 37 4.1.3 Nivel de persistencia Es en esta capa donde los datos de nuestra aplicación están almacenados. 4.1.3.1 Base de datos Para nuestro proyecto hemos creado una base de datos llamada Internado que contendrá en cada una de sus tablas los datos tanto de alumnos, como personal del colegio, como las relaciones entre ellos. Se muestra a continuación el diagrama entidad-relación que describe las relaciones entre los diferentes usuarios y objetos del sistema y las restricciones entre ellos. 4.1.3.1.1 Diagrama Entidad-Relación Como podemos ver en la ilustración 4-4, el diagrama nos detalla los usuarios que interactuaran con el sistema (Alumno, Familiar, Personal, y administrador) y sus atributos, así como las restricciones a la hora de insertar nuevos datos o modificar los existentes. Para una información más detallada tanto el diagrama conceptual como los dominios están definidos en los Anexos B y C respectivamente. En el Anexo D se puede encontrar el ejecutable internado.sql para la creación de la base de datos. Ilustración 4 – 4 - Diagrama entidad - relación Memoria Proyecto Final de Carrera 38 5. Implementación 5.1 Tecnologías utilizadas Para realizar este proyecto se han utilizado varías tecnologías y lenguajes, ya sea para el aspecto visual de la web, como del comportamiento y la dinámica. Para el aspecto visual de la página se ha utilizado en conjunto HTML y Css. El primero para la estructura y el segundo para el aspecto. Para el comportamiento de la web se ha utilizado PHP en el lado del servidor y JQuery (Javascript) para el lado del cliente. Con PHP nos ocupamos de las acciones de acceso a la base de datos y de envío y recepción de datos desde la web a la base de datos y viceversa, así como de la comprobación de la sesión iniciada y autentificación. Con JQuery hemos conseguido que la interfaz sea dinámica, es decir, que al realizar una petición, por ejemplo hacer clic en un apartado del menú de intranet, se carguen los datos directamente en otra zona de la página, sin tener que recargar toda la web. Con el conjunto de estas dos tecnologías conseguimos que cada usuario tenga su intranet correspondiente. Para la visualización de los datos se ha utilizado un plugin de JQuery llamado jqGrid. Para la base de datos se ha utilizado MySQL. El funcionamiento básico de la intranet será el siguiente: - Se creará mediante PHP el menú lateral y la cabecera y mediante un javascript, cargado en el document.ready de la página, se le darán acciones al menú. - Mediante este ultimo javascript, y en base a esas acciones, al hacer clic en cada uno de los apartados del menú se cargará dinámicamente un script PHP en el cuerpo de la página. - Este último script contendrá código JQuery que cargará una tabla con los datos. Para ello se utilizarán diferentes scripts PHP: o Tipo lista_xx.php, donde xx serán los datos a cargar, devolverá a la página los datos procedentes de la base de datos. o Tipo modifica_xx.php / inserta_xx.php, mandará los datos a la base de datos. o Tipo elimina_xx.php, borrará de la base de datos lo que se pida. o Tipo form_xx.php, se podrá pedir si se necesitan datos del usuario para su modificación. Estos archivos se cargarán en un diálogo de JQuery y se mostrarán por pantalla. Lidia Contreras Ochando 39 Veamos un poco más detalladamente cada una de ellas. 5.1.1 HTML El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee que cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) que permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) que sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML es un sistema de etiquetas que no requiere compilador. Estos documentos pueden ser mostrados por los navegadores. 5.1.2 CSS Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento. CSS funciona a base de reglas. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. h1 {color: red;} 5.1.3 PHP PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf en 1994. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno. 5.1.4 JQuery (Javascript) JavaScript es un lenguaje de programación interpretado. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM). Memoria Proyecto Final de Carrera 40 jQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. 5.1.5 MySQL MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario. 5.2 Herramientas utilizadas Para la implementación de la web y la base de datos se han utilizado diferentes aplicaciones o herramientas que son las siguientes: - Para la creación de los Scripts de PHP y Javascript se ha utilizado Eclipse for PHP Developers, un entorno de desarrollo integrado de código abierto multiplataforma, muy útil cuando se crean diferentes funciones en diferentes archivos. - Para la creación de HTML y Css se ha utilizado Adobe Dreamweaver CS3 . - La base de datos MySQL, ha sido mantenida y modificada localmente mediante Navicat Lite , un software de interfaz muy sencilla e intuitiva. Para la manipulación remota se ha utilizado PhpMyAdmin , una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet. - Para las pruebas y comprobaciones de la web se han utilizado distintos navegadores ( Firefox, Internet Explorer, Chrome y Opera ) y un complemento llamado Firebug para la comprobación de errores en el envío de datos entre los scripts PHP, por ejemplo. 5.3 Implementación detallada A continuación se mostrará la descripción detallada de la implementación del proyecto, con ejemplos de código. Se seguirá la arquitectura de diseño utilizada, basándonos en el diagrama de componentes mostrado en la ilustración 4-3. 5.3.1 Capa de presentación Para la capa de presentación se ha optado por utilizar HTML para la estructura, Css para cambiar el aspecto de la página y código javascript para darle dinamismo. 5.3.1.1 Página principal La estructura de la página principal, mostrada en la ilustración 4-1, es común para el índice (índex.php), la galería de imágenes (galería.php), la información del colegio (información.php) y el formulario de contacto (contacto.php). La página se compone de contenedores html, dónde uno de ellos será sustituido por la información a mostrar según el apartado en el que nos encontremos. El código es el siguiente: Lidia Contreras Ochando 41 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>_* Internado Meinston *_</title> <link rel="shortcut icon" href="favicon.ico" /> <link href="estilos/estilo.css" rel="stylesheet" type="text/css" media="screen" /> <script src="javascript/jquery-1.5.1.min.js" type="text/javascript"></script> </head> <body> <div id="contenedor"> <div id="cabecera"> <div id="logo"></div> <div id="menu"> <a href="index.php">Inicio</a> <a href="informacion.php">Información</a> <a href="galeria.php">Galería</a> <a href="contacto.php">Contacto</a> </div> <a href="#"><img src="images/eng.png" alt="English / Inglés" title="English / Inglés" /></a> <a href="#"><img src="images/spa.png" alt="Spanish / Español" title="Spanish / Español" /></a> </div> <div id="cuerpo"> <div id="contenido"> <textarea id="texto" class="texto" readonly="readonly"> ... </textarea> </div> <div id="lateral"> <div id="buscador"> <p> Busqueda: </p> <form id="formbus" name="formbus" action="#" method="post"> <input type="text" class="textbusqueda" size="8" id="busqueda" name="busqueda"/> <input type="submit" class="botonbusqueda" value="Buscar" id="botonbus" name="botonbus" /> </form> </div> <div id="acceso_intranet> <? include "scripts/form_intra.php"; form_intra();?> </div> <div id="submenu"> <p> Menú: Inicio </p> <ul> <li> <a href="index.php"> Inicio </a> </li> <li> <a href="informacion.php"> Información </a></li> <li> <a href="galeria.php"> Galería </a></li> <li> <a href="contacto.php"> Contacto </a> </li> </ul> </div> </div> </div> <div id="pie"> <p> Internado Meinston © 2011 - Lidia Contreras </p> </div> </div> </body> </html> Las áreas comunes a todas las páginas que comparten esta estructura (áreas sin colorear en el código), se componen básicamente de código HTML y css. Memoria Proyecto Final de Carrera 48 Esta estructura se repetirá para cada uno de los contenidos de la intranet. Siempre se listarán los datos para verlos, modificarlos o borrarlos. El mecanismo utilizado es el siguiente: - Se crean una tabla y un div vacios que le pasamos a JqGrid para cargar los datos (color amarillo en el código). - Para la carga de los elementos generados, en la zona coloreada de azul del código, estos serán devueltos mediante JSON por un script, que le pasamos a JqGrid en la zona verde del código. El script tendrá siempre la siguiente estructura: $sql =" SELECT A.Id, A.NumExp, A.DNI, A.Direccion, A.Telefono, A.Nombre, A.Apellidos, A.Fecha_nacimiento, A.Grupo, P.Nombre AS Tutor_nombre, P.Apellidos AS Tutor_apellidos, F.Nombre AS Familiar_nombre, F.Apellidos AS Familiar_apellidos FROM `alumno` A LEFT JOIN `familiar` F ON F.NumExp = A.Familiar LEFT JOIN `personal` P ON P.NumExp=A.Tutor WHERE 1 AND A.NumExp LIKE '".$_SESSION['usuario']."' "; $result = mysql_query($sql,$conexion) or die("Couldn t execute query.".mysql_error()); $row = mysql_fetch_array($result,MYSQL_ASSOC) ; $responce->rows[0]['id']=1; $responce->rows[0]['cell']=array( utf8_encode($row["NumExp"]), utf8_encode($row["DNI"]), utf8_encode($row["Nombre"]), utf8_encode($row["Apellidos"]), $row["Fecha_nacimiento"]!=NULL?date("d/m/Y",strtotime($row["Fecha_nacimi ento"])):"-", utf8_encode($row["Direccion"]), utf8_encode($row["Telefono"]), utf8_encode($row["Grupo"]), utf8_encode($row["Familiar_nombre"].' '.$row["Familiar_apellidos"]), utf8_encode($row["Tutor_nombre"].' '.$row["Tutor_apellidos"]) ); Estos tipos de script harán siempre las mismas acciones. Su misión es obtener de la base de datos los elementos requeridos y devolverlos (en el orden que ponemos en javascript, color azul del código) a la tabla de JqGrid (texto coloreado en amarillo). Para que el resultado sea devuelto mediante JSON, ponemos al principio del script: header("Content-type: text/json"); Y al final: echo json_encode($responce); Lidia Contreras Ochando 49 5.3.2.3.2 Insertar Datos Tanto para insertar datos, como para modificarlos, en algunos casos es necesario obtener más datos de los que nos ofrece la tabla, o nos es útil tener generado un formulario que podamos mostrar para que el usuario rellene nuevos datos. Esto lo conseguimos creando unos scripts PHP que llamaremos form_tipo, en el que definimos los formularios necesarios para el tipo de dato que estamos manipulando. Por ejemplo, para la inserción de asignaturas creamos el siguiente formulario en form_asignaturas.php: <!-- INSERTA ASIGNATURA --> <form id="form_admin_inserta_asignatura" style="display:none; fontsize:10px;"> <table> <tr><th colspan="2"> Rellena los siguientes datos: </th></tr> <tr><td> Nombre*: </td> <td><input type="text" id="form_admin_inserta_asignatura_nombre" name="form_admin_inserta_asignatura_nombre"></input></td></tr> <tr><td> Grupo*: </td> <td><select id="form_admin_inserta_asignatura_grupos" name="form_admin_inserta_asignatura_grupos"> <? $sql = "SELECT Codigo, Edad FROM grupo WHERE 1"; $select=mysql_query($sql, $conexion) or die("Problemas : ".mysql_error($conexion)); while($res=mysql_fetch_array($select)) echo '<option value="'.$res['Codigo'].'">'.$res['Codigo'].' - Edad: '.$res['Edad'].'</option>'; ?> </select></td></tr> <tr><td> Profesor: </td> <td><select id="form_admin_inserta_asignatura_profesores" name="form_admin_inserta_asignaturas_profesores"> <option value=""></option> <? $sql = "SELECT NumExp FROM profesor WHERE 1"; $select=mysql_query($sql, $conexion) or die("Problemas : ".mysql_error($conexion)); while($res=mysql_fetch_array($select)) echo '<option value="'.$res['NumExp'].'">'.$res['NumExp'].'</option>'; ?> </select></td></tr> <tr><td> Horario: </td> <td><input type="text" id="form_admin_inserta_asignatura_horario" name="form_admin_inserta_asignatura_horario"></input></td></tr> </table></form> Cuando se haga click en el elemento del menú correspondiente, y antes de crear el jqGrid, se cargará este archivo con el formulario oculto. $("#formularios").load('scripts/admin/form_asignaturas.php'); Memoria Proyecto Final de Carrera 50 Para seguir con la estética del jqGrid, le añadimos un botón para la función de inserción, de modo que al hacer click en el botón se nos abrirá un dialogo con el formulario que habíamos cargado previamente, que nos facilitará la inserción. .navButtonAdd('#pager',{ caption:"", title:"Insertar Asignatura", buttonicon:"ui-icon-plus", onClickButton: function(){ $("#form_admin_inserta_asignatura").dialog( { buttons: [ {text: "Insertar", click: function(){ var nombre=$("#form_admin_inserta_asignatura_nombre").val(); var grupo=$("#form_admin_inserta_asignatura_grupos").val(); var profesor=$("#form_admin_inserta_asignatura_profesores").val(); var horario=$("#form_admin_inserta_asignatura_horario").val(); if(nombre=="" || grupo=="") alert("Los campos con asterisco son obligatorios."); else{ $.post("scripts/admin/inserta_asignaturas.php", { nombre:nombre, grupo:grupo, profesor:profesor, horario:horario }, function(datos){ if (datos.status=="OK") { alert("Asignatura insertada correctamente."); $("#form_admin_inserta_asignatura").dialog("close"); $("#form_admin_inserta_asignatura").dialog("destroy"); $('#list').trigger("reloadGrid"); $("#formularios").load('scripts/admin/ form_asignaturas.php?id='+id_fila); } else alert("Error-> "+datos.texto); },"json"); } }}, {text: "Cancelar", click: function(){ $(this).dialog("close"); $(this).dialog("destroy"); }} ] }, { modal: true }, { title: 'Insertar Asignatura' } ); }, position:"first" Una vez se hace click en el botón insertar, se comprueba que efectivamente los campos obligatorios están rellenos (color amarillo en el código). Si no es así, se advertirá mediante una alerta (código verde). Una vez esté todo correcto, se procede al envío de los datos mediante post, a un script que ejecutará la inserción (color azul en el código) y que devuelve, una vez más mediante JSON, el resultado de la operación (color rosa en el código). Lidia Contreras Ochando 51 Este script de inserción de asignatura queda del siguiente modo: <?php session_start(); header("Content-type: text/json"); error_reporting(E_ALL); ini_set("display_errors", 0); include "../conexion.php"; include "../funciones.php"; $error = ""; if( !isset($_POST['nombre']) || $_POST['nombre']=="") $error = "No se recibieron los parámetros correctamente"; $conexion = conectar_mysql(); $sql = "SELECT Nombre, Grupo FROM asignatura WHERE 1 AND Nombre LIKE '".$_POST['nombre']."' AND Grupo LIKE '".$_POST['grupo']."'"; $select=mysql_query($sql, $conexion) or $error="Problemas en el select: ".mysql_error($conexion); if (mysql_num_rows($select)>'0') $error="La asignatura ya existe"; if($error=="") { $sql = "INSERT INTO asignatura SET Profesor = '".$_POST['profesor']."', Grupo = '".$_POST['grupo']."', Nombre = '".$_POST['nombre']."', Horario = '".$_POST['horario']."' "; $select=mysql_query($sql, $conexion) or $error="Problemas en el select: ".mysql_error($conexion); log_modificacion('', $sql, 'asignatura', ''); } mysql_close($conexion); // DEVUELVO UN JSON CON ESTADO if($error <> ""){ $responce->status = "ERROR"; $responce->texto = utf8_encode($error); } else{ $responce->status = "OK"; } echo json_encode($responce); ?> Primero se comprueba que se hayan recibido correctamente los datos (color amarillo en el código) y seguidamente que la asignatura no exista ya (color azul en el código). Si todo está correcto, se procede a insertar la asignatura (color rosa) y se envía la respuesta mediante JSON (color verde en el código). Memoria Proyecto Final de Carrera 52 5.3.2.3.3 Modificar datos Para modificar los datos se utiliza el mismo sistema de la inserción. La diferencia reside en que el formulario oculto contendrá los datos a modificar y que para modificar, tendremos que asegurarnos de que hay una fila seleccionada y de que el usuario está seguro de querer modificarla. Esto lo conseguimos con javascript: var id_fila=$('#list').jqGrid('getGridParam','selrow'); if ((id_fila==null)||(id_fila==undefined)) alert("Seleccione una fila"); if (!confirm("Modificar asignatura \""+$('#list').getCell( id_fila, 'Nombre' )+"\"?")) { $("#form_admin_modifica_asignatura").dialog("close"); $("#form_admin_modifica_asignatura").dialog("destroy return; } El formulario en este caso lo llamaremos, pasándole por GET la id del objeto a modificar: $("#formularios").load('scripts/admin/form_asignaturas.php?id='+id_fila); De modo que nos debemos asegurar que, al seleccionar una fila, el formulario correspondiente a ese dato esté disponible: onSelectRow: function(id){ //Borramos los dialogos abiertos y los divs creados para que no se almacenen var id_fila=$('#list').jqGrid('getGridParam','selrow'); $("#form_admin_inserta_asignatura").dialog("destroy"); $("#form_admin_inserta_asignatura").remove(); $("#form_admin_modifica_asignatura").dialog("destroy"); $("#form_admin_modifica_asignatura").remove(); $("#formularios").load('scripts/admin/form_asignaturas.php?id='+id_fila) ;} Lidia Contreras Ochando 53 5.3.2.3.4 Borrar datos Para borrar datos se sigue el mismo procedimiento que para modificarlos, con la excepción de que, en la mayoría de los casos, no necesitamos el formulario con los datos. Nos aseguraremos igualmente de que el usuario esté seguro de eliminar: var valor=prompt("Si está seguro de que desea borrar la asignatura, escriba BORRAR y haga click en Aceptar:"); if (valor=='BORRAR') { $.post("scripts/admin/elimina_asignatura.php", { id:id_fila, tipo:"asignatura" }, function(datos){ if (datos.status=="OK") { alert("Asignatura eliminada correctamente."); $('#list').trigger("reloadGrid"); } else alert("Error-> "+datos.texto); },"json"); } else if (valor==null) ; else alert("Error, el texto introducido no coincide."); } Memoria Proyecto Final de Carrera 54 5.3.3 Capa de persistencia Para la manipulación y almacenamiento de los datos de nuestra web, se utiliza una base de datos creada en MySQL con la siguiente estructura: Ilustración 5 – 1 – Base de datos Lidia Contreras Ochando 55 En base a nuestro diagrama, creamos la base de datos, donde almacenaremos todos los datos de la web. Ilustración 5–2 - Base de datos: Internado Para conectarnos a ella, usaremos el archivo conexión.php: <?php if (!function_exists("conectar_mysql")) { function conectar_mysql () { $dbhost="localhost"; $dbusuario="internado"; $dbpassword="liconoc"; $db="internado"; $conexion = mysql_connect($dbhost, $dbusuario, $dbpassword, true) or die ("No se puede conectar con la base de datos. Error:" . mysql_error($conexion)); mysql_select_db($db, $conexion) or die ("No se puede seleccionar la base de datos"); return $conexion; } } ?> Memoria Proyecto Final de Carrera 56 6. Evaluación y Pruebas Para evaluar el correcto funcionamiento del producto acabado, se han realizado una serie de pruebas donde comprobamos tanto la navegabilidad en diferentes navegadores y resoluciones, como la estructura interna de la aplicación. 6.1 Prueba de enlaces rotos Realizamos esta prueba para la comprobar que no haya ningún enlace todo en nuestra aplicación. Para ello utilizamos la herramienta que nos ofrece http://validator.w3.org/checklink. Como ejemplo pondremos la validación de los enlaces en la página principal: Ilustración 6–1 - Comprobación de enlaces rotos Lidia Contreras Ochando 57 6.2 Validación de html Se ha comprobado que el html cumple los estándares, mediante el validador http://validator.w3.org/. 6.3 Validación de css Igual que el código html, las hojas de estilo Css, pueden ser validadas mediante http://jigsaw.w3.org/css-validator/. Ilustración 6 – 2 - Validación de html Ilustración 6 – 3 - Validación de Css Memoria Proyecto Final de Carrera 64 7. Conclusiones Durante este proyecto, hemos creado la web del Internado Meinston, partiendo de cero. Al finalizarlo, el colegio ha entrado en internet, dándose a conocer y ofreciendo a sus alumnos, empleados y familiares un espacio virtual para poder comunicarse. Viendo el resultado final, creo que el objetivo se ha conseguido, ya que se ha creado una interfaz sencilla, pero eficiente para el colegio. Durante la realización de este proyecto, he aprendido muchas características de las tecnologías que he usado, en especial de PHP y JQuery que no había utilizado casi. He intentado crear una interfaz sencilla, para un usuario final sin conocimientos informáticos, donde fuera fácil consultar, modificar o eliminar datos. Otra de mis metas era que los usuarios se pudieran enviar mensajes entre ellos, que si bien no es tan sofisticado como lo puede ser el correo electrónico, para el uso para el que está creado creo que puede ser útil. Los mensajes se cargan dinámicamente, de modo que si un usuario le manda uno a otro usuario, este último solo tiene que actualizar la tabla para verlo. Se podrían realizar mejoras visuales para la intranet, ya que es bastante sencilla. Sin embargo ese no era el objetivo de este proyecto y con su aspecto actual es fácil saber cómo llegar a donde se quiere ir. JqGrid tiene muchas más opciones que no hemos utilizado en nuestra web, y que podrían ser de utilidad para las acciones que se realizan en la intranet. En el futuro se podría mejorar el aspecto de la intranet, así como introducir nuevas acciones como ejercicios online, chat para el grupo de alumnos, tablón de anuncios, préstamo de libros, cita médica, etc. De igual modo, se podría actualizar para que fuera accesible a personas invidentes, o adaptada a otros medios como los teléfonos móviles. Lo que más me ha costado ha sido crear las sesiones y utilizarlas para todos los scripts, ya que nunca lo había hecho con PHP y averiguar los fallos de Javascript. También me costó al principio crear la página principal y poner cada apartado en su sitio mediante Css. Sin embargo me ha gustado realizar este proyecto y su resultado final. Lidia Contreras Ochando 65 8. Bibliografía - Proyectos de Fin de Carrera de años anteriores. - Apuntes de asignaturas: o BDA : Bases de datos o ISG: Ingeniería del software o CDH: Creación de documentos de hipertexto o DBD: Diseño de bases de datos o PBS: Programación básica en el servidor o SWE: Servidores de web o ADB: Administración se sistemas de bases de datos - Apuntes de cursos: o CURSO DE PROGRAMACIÓN AJAX CON HTML, JAVASCRIPT Y PHP - Conocimientos adquiridos en la realización de prácticas de empresa en el Colegio de Psicólogos de la Comunidad Valenciana. - Información de páginas web: o http://es.wikipedia.org o http://www.forosdelweb.com o http://docs.jquery.com o http://www.php.net/manual/es o http://www.javascriptya.com.ar/jquery o http://www.phpya.com.ar o http://www.cssya.com.ar o http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs Memoria Proyecto Final de Carrera 66 9. ANEXOS 9.1 ANEXO A: Casos de Uso Caso de uso Solicitar información Actores Todos los usuarios Propósito Obtener información acerca del colegio Resumen Cualquier usuario puede solicitar información sobre cualquier aspecto del internado. Precondiciones Ser usuario Pos condiciones La administración recibirá la solicitud Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El usuario pulsa el botón “contacto” y accede al formulario 2. Rellena el formulario 3. Le da al botón enviar 4. El sistema enviará la información del formulario por e-mail a la administración. Extensiones síncronas Hasta el paso 3 se puede cancelar Si no se rellena algún dato obligatorio el sistema lo comprobará y mostrará el error Lidia Contreras Ochando 67 Caso de uso Acceder a la intranet Actores Cualquier usuario con clave Propósito Acceder a la zona restringida de la web Resumen Cualquier usuario que sea registrado puede intentar acceder a su zona privada mediante su usuario y su contraseña Precondiciones Ser un usuario registrado Pos condiciones El usuario accederá a la intranet Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El usuario pulsa el botón “Intranet” 2. Selecciona entre “Alumno / Familiar / Personal / Admin” 3. Rellena los campos “usuario” y “contraseña”. 4. Pulsa el botón “Entrar” 5. El sistema comprueba que el usuario y la contraseña existen y que pertenecen al tipo de cuenta seleccionado y redirige al navegador a la intranet. Extensiones síncronas Hasta el paso 4 se puede cancelar Si en el paso 5 se comprueba que algún dato no es correcto el sistema informará del error y vaciará los campos. Memoria Proyecto Final de Carrera 68 Caso de uso Consultar datos personales propios Actores Usuario registrado Propósito Consultar los datos que hay registrados Resumen El usuario registrado puede ver los datos personales que la base de datos tiene suyos Precondiciones Ser usuario registrado y estar en la intranet Pos condiciones El usuario ve sus datos personales Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El usuario pulsa el botón “Datos personales” 2. El sistema redirige el navegador a la página adecuada. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se vean Caso de uso Listar alumnos asignados Actores Familiar / tutor Propósito Ver la lista de los alumnos a su cargo Resumen El familiar / tutor verá los alumnos que tiene asignados Precondiciones Ser un familiar / tutor registrado y estar en la intranet Pos condiciones El familiar / tutor ve los alumnos Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El familiar / tutor pulsa el botón “ver alumnos asignados” 2. El sistema redirige el navegador a la página adecuada. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se vean Lidia Contreras Ochando 69 Caso de uso Seleccionar alumno Actores Familiar o personal Propósito Seleccionar un alumno de una lista de alumnos Resumen El usuario accede a los datos requeridos del alumno seleccionado Precondiciones Ser familiar del alumno o personal del colegio y estar en la intranet habiendo seleccionado previamente ver la lista de alumnos Pos condiciones El usuario ve los datos del alumno Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El usuario pulsa el botón con el nombre del alumno requerido de la lista de alumnos. 2. El sistema redirige el navegador a la página adecuada. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se vean Caso de uso Ver informe semanal Actores Familiar Propósito Ver el informe semanal de un alumno a su cargo Resumen El familiar verá el informe semanal del alumno Precondiciones Ser un familiar registrado y estar en la intranet Pos condiciones Poder leer el informe Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El familiar pulsa el botón “Ver informe semanal” 3. El familiar pulsa el botón cuyo nombre pertenece al alumno de quien desea ver el informe. 2. El sistema redirige el navegador a la página con la lista de alumnos a cargo del familiar. 4. El sistema redirige el navegador a la página adecuada. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se vean Memoria Proyecto Final de Carrera 70 Caso de uso Listar comunicados / asignaturas / deportes / notas / observaciones / exámenes del alumno Actores Familiar Propósito Ver los datos seleccionados del alumno a su cargo Resumen El familiar verá los datos del alumno Precondiciones Ser un familiar registrado y estar en la intranet Pos condiciones Poder leer los datos Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El familiar pulsa el botón “Ver comunicados / asignaturas / deportes / notas / observaciones / exámenes de alumno” 3. El familiar pulsa el botón cuyo nombre pertenece al alumno 2. El sistema redirige el navegador a la página con la lista de alumnos a cargo del familiar. 4. El sistema redirige el navegador a la página adecuada. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se vean Lidia Contreras Ochando 71 Caso de uso Escribir comunicado a un alumno Actores Familiar o Tutor del alumno Propósito Enviar un comunicado al alumnos seleccionado Resumen El familiar o tutor de un alumno puede enviarle un comunicado Precondiciones Ser un familiar registrado o tutor y estar en la intranet Pos condiciones El alumno debe recibir el comunicado Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El familiar o tutor pulsa el botón “Enviar comunicado” 3. Pulsa el botón cuyo nombre pertenece al alumno a quien desea enviar el comunicado 5. Rellena el formulario de envío 6. Pulsa el botón “Enviar” 2. El sistema redirige el navegador a la página con la lista de alumnos a cargo del familiar o tutor. 4. El sistema redirige el navegador a la página adecuada. 7. El sistema enviará el comunicado a la bandeja de entrada de comunicados del alumno. Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Memoria Proyecto Final de Carrera 72 Caso de uso Escribir comunicado al tutor de un alumno Actores Familiar Propósito Enviar un comunicado tutor del alumno seleccionado Resumen El familiar envía un comunicado al tutor Precondiciones Ser un familiar registrado o tutor y estar en la intranet Pos condiciones El tutor debe recibir el comunicado Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El familiar o tutor pulsa el botón “Enviar comunicado” 3. Pulsa el botón cuyo nombre pertenece al alumno 5. Rellena el formulario de envío 6. Pulsa el botón “Enviar” 2. El sistema redirige el navegador a la página con la lista de alumnos a cargo del familiar o tutor 4. El sistema redirige el navegador a la página adecuada 7. El sistema enviará el comunicado a la bandeja de entrada de comunicados del tutor del alumno seleccionado Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Hasta el paso 5 se puede cancelar Lidia Contreras Ochando 73 Caso de uso Modificar datos personales Actores Familiar / Personal Propósito Modificar los datos personales Resumen Cualquier usuario registrado, salvo los alumnos, puede modificar sus datos Precondiciones Ser un usuario registrado –no alumnoy estar en la intranet Pos condiciones Actualizar sus datos Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El usuario pulsa el botón “Modificar datos” 3. Rellena los campos que quiere cambiar y pulsa el botón “Cambiar” 2. El sistema redirige el navegador a la página con el formulario 4. El sistema comprueba que los datos sean correctos, los actualiza en la base de datos y redirige el navegador a la página de resultados Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Hasta el paso 3 se puede cancelar Memoria Proyecto Final de Carrera 80 Caso de uso Escribir Informe semanal Actores Tutor Propósito Enviar el informe semanal al familiar de un alumno Resumen El tutor envía el informe Precondiciones Ser un tutor registrado y estar en la intranet Pos condiciones El familiar debe recibir el informe Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El tutor pulsa el botón “Escribir informe semanal” 3. Selecciona el alumno y pulsa “Aceptar” 4. Rellena el formulario de envío 5. Pulsa el botón “Enviar” 2. El sistema redirige a la página de selección de alumno 3.. El sistema redirige el navegador a la página adecuada 6. El sistema enviará el informe a la bandeja de entrada de comunicados Familiar del alumno Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Hasta el paso 5 se puede cancelar Lidia Contreras Ochando 81 Caso de uso Escribir observación Actores Personal / Alumno Propósito Enviar una observación Resumen Se envía una observación a la persona seleccionada Precondiciones Ser un alumno / personal registrado y estar en la intranet Pos condiciones La persona debe recibir el informe Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El tutor pulsa el botón “Escribir observación” 3. Selecciona el receptor y pulsa “Aceptar” 4. Rellena el formulario de envío 5. Pulsa el botón “Enviar” 2. El sistema redirige a la página de selección de receptor 3.. El sistema redirige el navegador a la página adecuada 6. El sistema enviará el informe a la bandeja de entrada de observaciones Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Hasta el paso 5 se puede cancelar Memoria Proyecto Final de Carrera 82 Caso de uso Buscar usuario Actores Administrador Propósito Buscar un usuario por nombre / DNI Resumen El administrador puede hacer una búsqueda por diferentes criterios Precondiciones Ser administrador y estar en la intranet Pos condiciones Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El administrador pulsa el botón “Nueva búsqueda” 3. Rellena el formulario y pulsa “Aceptar” 2. El sistema redirige a la página con el formulario 3.El sistema realiza la búsqueda y redirige a una página con los resultados obtenidos Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Hasta el paso 3 se puede cancelar Caso de uso Listar usuarios Actores Administrador Propósito Listar todos los usuarios Resumen El administrador puede ver todos los usuarios de la aplicación Precondiciones Ser administrador y estar en la intranet Pos condiciones Flujo de eventos Interacción con el usuario Obligaciones del sistema 1. El administrador pulsa el botón “Listar usuarios” 2. El sistema redirige a la página Extensiones síncronas Si la sesión ha terminado el sistema no permitirá que los datos se envíen Lidia Contreras Ochando 83 9.2 ANEXO B: Diseño conceptual de la base de datos USUARIO (Id:dom_Id, NumExp:dom_NumExp, Usuario:dom_DNI, Contrasenya:dom_contrasenya, Fecha_Alta:dom_Fecha_Alta, Tipo:dom_Tipo) CP{Id, NumExp, Usuario} PERSONAL (Id:dom_Id, NumExp:dom_NumExp, DNI:dom_DNI, Telefono:dom_Telefono, Direccion:dom_Direccion, Nombre:dom_Nombre, Apellidos:dom_Apellidos, Fecha_nacimiento:dom_Fecha_nacimiento) CP{ID, NumExp, DNI } CAj: {NumExp}USUARIO GRUPO (Id:dom_Id, Codigo:dom_Codigo, Edad:dom_Edad) CP{Id, Codigo, Edad} PROFESOR (Id:dom_Id, NumExp:dom_NumExp , Titulacion:dom_Titulacion) CP{Id, NumExp } CAj: {NumExp}PERSONAL DEPORTE {Id:dom_Id , Nombre:dom_Nombre, Horario:dom_Horario, Monitor:dom_NumExp) CP{Id, Nombre} CAj: {Monitor}MONITOR MONITOR (Id:dom_Id, NumExp:dom_NumExp) CP{Id, NumExp} CAj: {NumExp}PERSONAL FAMILIAR (Id:dom_Id, NumExp:dom_NumExp, DNI:dom_DNI, Telefono:dom_Telefono, Direccion:dom_Direccion, Nombre:dom_Nombre, Apellidos:dom_Apellidos) CP{Id, DNI, NumExp} CAj: {NumExp}USUARIO Memoria Proyecto Final de Carrera 84 ALUMNO (Id:dom_Id, NumExp:dom_NumExp, DNI:dom_DNI, Telefono:dom_Telefono, Direccion:dom_Direccion, Nombre:dom_Nombre, Apellidos:dom_Apellidos, Fecha_nacimiento:dom_Fecha_nacimiento, Familiar: dom_NumExp, Grupo:dom_Codigo, Tutor: dom_NumExp) CP{Id, NumExp, DNI } CAj: {Familiar}FAMILIAR CAj: {Grupo}GRUPO CAj: {Tutor}PERSONAL ASIGNATURA (Id:dom_Id, Nombre:dom_Nombre, Grupo:dom_Codigo, Profesor:dom_NumExp, Horario:dom_Horario) CP{Id, Nombre} CAj: {Grupo}GRUPO CAj: {Profesor}PROFESOR CALIFICA (Id:dom_Id, Alumno:dom_NumExp, Asignatura:dom_Id, Grupo:dom_Codigo, Nota:dom_Nota) CP{Id } CAj: {Alumno}ALUMNO CAj: {Asignatura}ASIGNATURA CAj: {Grupo}GRUPO PRACTICA (Id:dom_Id, Alumno:dom_NumExp, Deporte:dom_Id) CP{Id} CAj: {Alumno}ALUMNO CAj: {Deporte}DEPORTE ADMINISTRADOR (Id:dom_Id, NumExp:dom_NumExp, Usuario:dom_DNI) CP{Id, NumExp, Usuario} CAj: {NumExp}USUARIO COMUNICADOS (Id:dom_Id, Emisor:dom_NumExp, Receptor:dom_NumExp, Mensaje:dom_Mensaje, Fecha:dom_Fecha, Leido:dom_Leido) CP{Id} CAj: {Emisor}USUARIO CAj: {Receptor}USUARIO Lidia Contreras Ochando 85 OBSERVACIONES (Id:dom_Id, Emisor:dom_NumExp, Receptor:dom_NumExp, Mensaje:dom_Mensaje, Fecha:dom_Fecha, Leido:dom_Leido) CP{Id} CAj: {Emisor}USUARIO CAj: {Receptor}USUARIO INFORMES (Id:dom_Id, Tutor:dom_NumExp, Familiar:dom_NumExp, Alumno:dom_NumExp, Informe:dom_Informe, Fecha:dom_Fecha, Leido:dom_Leido) CP{Id} CAj: {Tutor}PERSONAL CAj: {Familiar}FAMILIAR CAj: {Alumno}ALUMNO EXAMENES (Id:dom_Id, Asignatura:dom_Id, Grupo:dom_Codigo, Fecha:dom_Fecha, Hora:dom_Hora, Duracion:dom_Duracion) CP{Id, Asignatura, Grupo} CAj: {Asignatura}ASIGNATURA CAj: {Grupo}GRUPO Memoria Proyecto Final de Carrera 86 9.3 ANEXO C: Dominios base de datos Nombre dominio Tipo de dato dom_DNI Cadena(9) dom_Contrasenya Cadena(45) dom_Telefono Cadena(9) dom_Direccion Cadena(45) dom_Nombre Cadena(45) dom_Fecha_nacimiento Fecha dom_Codigo Cadena(6) dom_Edad Entero(10) dom_Titulacion Cadena(45) dom_Horario Cadena(45) dom_Id Entero(11) dom_NumExp Cadena(30) dom_Fecha_Alta Fecha+Hora dom_Tipo Cadena(30) dom_Apellidos Cadena(80) dom_Nota Double dom_Mensaje Cadena(200) dom_Fecha Fecha dom_Leido Tinynt(1) dom_Informe Cadena(200) dom_Hora Hora dom_Duracion Cadena(5) Lidia Contreras Ochando 87 9.4 ANEXO D: Fichero de creación de la base de datos CREATE SCHEMA IF NOT EXISTS `internado`; -- ---------------------------- -- Table structure for `administrador` -- ---------------------------- DROP TABLE IF EXISTS `administrador`; CREATE TABLE `administrador` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Usuario` varchar(9) NOT NULL, `NumExp` varchar(30) NOT NULL DEFAULT '', PRIMARY KEY (`Id`,`Usuario`,`NumExp`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `alumno` -- ---------------------------- DROP TABLE IF EXISTS `alumno`; CREATE TABLE `alumno` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `NumExp` varchar(30) NOT NULL DEFAULT '', `DNI` varchar(9) NOT NULL, `Direccion` varchar(45) CHARACTER SET utf8 NOT NULL, `Fecha_nacimiento` datetime NOT NULL, `Telefono` varchar(9) CHARACTER SET utf8 DEFAULT NULL, `Nombre` varchar(45) NOT NULL, `Apellidos` varchar(80) DEFAULT NULL, `Familiar` varchar(9) DEFAULT NULL, `Grupo` varchar(6) DEFAULT NULL, `Tutor` varchar(9) DEFAULT NULL, PRIMARY KEY (`Id`,`NumExp`,`DNI`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `asignatura` -- ---------------------------- DROP TABLE IF EXISTS `asignatura`; CREATE TABLE `asignatura` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Nombre` varchar(45) NOT NULL, `Grupo` varchar(6) NOT NULL, `Profesor` varchar(9) DEFAULT NULL, `Horario` varchar(100) DEFAULT NULL, PRIMARY KEY (`Id`,`Nombre`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; Memoria Proyecto Final de Carrera 88 -- ---------------------------- -- Table structure for `califica` -- ---------------------------- DROP TABLE IF EXISTS `califica`; CREATE TABLE `califica` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Alumno` varchar(30) NOT NULL, `Asignatura` varchar(45) NOT NULL, `Grupo` varchar(6) NOT NULL, `Nota` double unsigned DEFAULT NULL, PRIMARY KEY (`Id`), KEY `Alumno` (`Alumno`), KEY `Asignatura` (`Asignatura`), KEY `Grupo` (`Grupo`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `comunicados` -- ---------------------------- DROP TABLE IF EXISTS `comunicados`; CREATE TABLE `comunicados` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Emisor` varchar(30) NOT NULL, `Receptor` varchar(30) NOT NULL, `Mensaje` varchar(200) NOT NULL, `Fecha` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', `Leido` tinyint(1) NOT NULL DEFAULT '0', PRIMARY KEY (`Id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `deporte` -- ---------------------------- DROP TABLE IF EXISTS `deporte`; CREATE TABLE `deporte` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Nombre` varchar(45) NOT NULL, `Horario` varchar(45) DEFAULT NULL, `Monitor` varchar(30) DEFAULT NULL, PRIMARY KEY (`Id`,`Nombre`), KEY `Monitor` (`Monitor`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; Lidia Contreras Ochando 89 -- ---------------------------- -- Table structure for `examenes` -- ---------------------------- DROP TABLE IF EXISTS `examenes`; CREATE TABLE `examenes` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Asignatura` varchar(30) NOT NULL, `Grupo` varchar(30) NOT NULL, `Fecha` date DEFAULT NULL, `Hora` time DEFAULT NULL, `Duracion` varchar(5) DEFAULT NULL, PRIMARY KEY (`Id`,`Asignatura`,`Grupo`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `familiar` -- ---------------------------- DROP TABLE IF EXISTS `familiar`; CREATE TABLE `familiar` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `NumExp` varchar(30) NOT NULL DEFAULT '', `DNI` varchar(9) NOT NULL, `Telefono` varchar(9) NOT NULL, `Direccion` varchar(45) NOT NULL, `Nombre` varchar(45) NOT NULL, `Apellidos` varchar(80) DEFAULT NULL, PRIMARY KEY (`Id`,`NumExp`,`DNI`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; -- ---------------------------- -- Table structure for `grupo` -- ---------------------------- DROP TABLE IF EXISTS `grupo`; CREATE TABLE `grupo` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Codigo` varchar(6) NOT NULL, `Edad` int(10) unsigned NOT NULL, PRIMARY KEY (`Id`,`Codigo`,`Edad`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; Memoria Proyecto Final de Carrera 96 9.6 ANEXO F: Manual de usuario Podemos entrar en nuestra web mediante un navegador, en la página: http://pion.disca.upv.es/internado. 9.6.1 Página principal Esta es nuestra página principal: Ilustración 9–1 - Internado Meinston: Página principal El resto de páginas de la página principal, a la que pueden acceder todos los usuarios, tienen la misma estructura, cambiando el contenido del cuerpo y el submenú lateral. Por ejemplo, podemos ver el menú del apartado información: Ilustración 9–2 - Menú Información Lidia Contreras Ochando 97 La galería de imágenes sustituye el área de texto por una secuencia de imágenes del colegio: Ilustración 9–3 - Galería de imágenes El último apartado de la página principal es el de contacto. En él podemos ver un formulario de solicitud de información: Ilustración 9 – 4 - Formulario de contacto Memoria Proyecto Final de Carrera 98 La intranet para usuarios registrados tiene el siguiente aspecto: Los demás usuarios tendrán la misma intranet, cambiando el menú lateral. Veámoslo con unas imágenes: Ilustración 9 – 5 - Intranet Administrador 9 – 6 - Menú Alumno 9 – 8 - Menú Familiar 9 – 9 - Menú Profesor Ilustración 9 – 7 - Menú Personal Lidia Contreras Ochando 99 Para la información recuperada en cada uno de los apartados del menú se ha utilizado un formato de tablas dinámicas, como la que se muestra a continuación: Ilustración 9–10 - Tablas JQuery Estas tablas nos permiten recuperar, manipular y borrar los datos en tiempo real. 9.6.1.1 Formulario de acceso a la intranet (LOGIN) En la página principal hay un apartado, en el menú de la derecha, que contiene un formulario con el que podemos acceder a la intranet mediante un DNI y una contraseña. Este formulario cambiará a los datos del usuario si este ya ha iniciado sesión previamente. Al hacer clic, tanto en el botón Entrar, como en el enlace de la ilustración 9-11, Entrar en la intranet, se comprobarán los datos y se cargará la intranet del usuario e iniciará la sesión si no se había iniciado previamente. Ilustración 9 – 12 - Formulario de acceso (LOGIN) Ilustración 9 – 11 - Acceso a la intranet Memoria Proyecto Final de Carrera 100 Si los datos son erróneos o no se corresponden a los de la base de datos, se producirá un error. Ilustración 9–13 - Error en inicio de sesión 9.6.2 Intranet La intranet es el espacio privado de la web, reservado para los usuarios registrados en ella. Existe una intranet para cada tipo de usuario. Vamos a verlas una a una. 9.6.2.1 Administrador El administrador tiene poder total sobre los datos de los usuarios, por tanto su intranet le permite la modificación de cada uno de ellos. 9.6.2.1.1 Usuarios El administrador puede agregar nuevos usuarios, modificar los datos de los existentes y eliminarlos. Las contraseñas de usuario solo puede modificarlas él. La página de usuarios es la siguiente: Ilustración 9–14 - Administrador: Usuarios registrados Lidia Contreras Ochando 101 En ella, el administrador puede ver el usuario (DNI) y contraseña de cada uno de los usuarios, así como el tipo de usuario, la fecha de alta y el número de expediente, que será único para cada uno de ellos, se genera automáticamente y no es modificable. A través de los espacios de escritura que podemos ver en la cabecera de la tabla, podemos realizar búsquedas más exhaustivas de los datos que hay en ellas. Por ejemplo, si quisiéramos ver solamente los alumnos: Ilustración 9–15 - Búsqueda en tablas Mediante los botones de las tablas, podremos realizar las modificaciones pertinentes en cada una de ellas. Ilustración 9–16 - Botones de la intranet En particular en esta tabla podremos Insertar usuarios, modificar los existentes o borrarlos. Insertemos uno, por ejemplo de tipo Alumno. Ilustración 9–17 - Administrador: Insertando usuario Memoria Proyecto Final de Carrera 102 Para introducir las fechas nos ayudaremos de un calendario. Ilustración 9–18 – Calendario Ilustración 9–19 - Datepicker Si algún dato obligatorio no lo rellenáramos, la función encargada nos lo recordaría mediante un diálogo. Ilustración 9–20 – Diálogo Una vez insertado, se nos notificará y se recargará la tabla donde podremos ver el nuevo usuario: Ilustración 9–21 - Administrador: Usuario insertado Desde esta tabla, el administrador podrá modificar el usuario y contraseña de los usuarios. Para eliminar se nos preguntará siempre si estamos seguros, y al hacerlo quedará constancia de ello en una tabla historico_borrados, que nos dirá quien lo borró, y qué día. Lidia Contreras Ochando 103 Ilustración 9–22 - Confirmación borrado 9.6.2.1.2 Alumnos En la tabla de alumnos podemos modificar, insertar y borrar alumnos, así como cambiarles el tutor, el grupo y el familiar. Ilustración 9–23 - Administrador: Alumnos Ilustración 9–24 – Cambiar familiar Ilustración 9–25 - Modificar Alumno Memoria Proyecto Final de Carrera 104 9.6.2.1.3 Personal En este apartado podremos insertar, modificar y eliminar personal, ya sea profesor o monitor y asignarle o quitarle asignaturas o deportes, respectivamente. Ilustración 9 – 27 - Administrador: Personal Ilus tración 9 – 26 - Asignando deportes Lidia Contreras Ochando 105 9.6.2.1.4 Familiares Igual que al personal, podremos modificar, añadir y eliminar, y en este caso, asignar alumnos. Ilustración 9–28 - Administrador: Familiares 9.6.2.1.5 Grupos De los grupos, el administrador podrá añadir y eliminar. Ilustración 9–29 - Administrador: Grupos Memoria Proyecto Final de Carrera 112 9.6.2.4 Personal El personal es aquella persona que trabaja en el centro. Pueden ser profesores, que impartirán asignaturas, o monitores que enseñaran algún deporte. Los dos tipos podrán ser tutores de los alumnos y por tanto enviarles comunicados e informes a sus familiares. 9.6.2.4.1 Datos personales El personal podrá modificar sus propios datos personales. Ilustración 9–47 - Personal: Datos personales 9.6.2.4.2 Tutor Como tutor, el personal puede ver sus alumnos tutelados, enviarles comunicados y recibirlos de ellos, y enviar informes a los familiares. Ilustración 9–48 - Personal: Tutor Lidia Contreras Ochando 113 9.6.2.4.3 Monitor: Deportes El monitor podrá ver los deportes que le han sido asignados, así como el número de alumnos apuntados. Ilustración 9–49 - Monitor: Deportes 9.6.2.4.4 Profesor: Asignaturas, exámenes y notas El profesor tiene unas asignaturas asignadas, con unos exámenes, y de ellos tendrá que poner nota a sus alumnos. Ilustración 9–50 - Profesor: Asignaturas, exámenes y notas Ilustración 9–51 - Poniendo notas Memoria Proyecto Final de Carrera 114 Si la asignatura no tuviese alumnos matriculados, el sistema nos avisaría. Ilustración 9–52 - Profesor: Asignatura sin alumnos 9.6.2.4.5 Observaciones El personal puede enviar observaciones a los alumnos que pertenezcan a sus asignaturas o deportes, así como recibirlos de ellos. Ilustración 9–53 - Personal: Observaciones Lidia Contreras Ochando 115 9.5 ANEXO G: Índice de Ilustraciones - COLEGIO MEINSTON 7 - DIAGRAMA DE CLASES 25 - COMUNICACIONES 26 - CASOS DE USO, ACTORES 27 - CASO DE USO: ANÓNIMO 28 - CASO DE USO: USUARIO REGISTRADO 28 - CASO DE USO: FAMILIAR 29 - CASO DE USO: ALUMNO 30 - CASO DE USO: PROFESOR 31 - CASO DE USO: ADMINISTRADOR 32 - INTERFAZ DE USUARIO, VISTA 1 34 - INTERFAZ DE USUARIO, VISTA 2 35 - DIAGRAMA DE COMPONENTES 36 - DIAGRAMA ENTIDAD-RELACIÓN 37 – BASE DE DATOS 54 - BASE DE DATOS: INTERNADO 55 - COMPROBACIÓN DE ENLACES ROTOS 56 - VALIDACIÓN DE HTML 57 - VALIDACIÓN DE CSS 57 - COMPROBACIÓN SOBRE MÓVIL, PÁGINA PRINCIPAL 58 - COMPROBACIÓN SOBRE MÓVIL, INTRANET 58 - FIREFOX: PÁGINA PRINCIPAL 59 - FIREFOX: INTRANET 59 - INTERNET EXPLORER: PÁGINA PRINCIPAL 60 - INTERNET EXPLORER: INTRANET 60 - GOOGLE CHROME: PÁGINA PRINCIPAL 61 - GOOGLE CHROME: INTRANET 61 - OPERA: PÁGINA PRINCIPAL 62 - OPERA: INTRANET 62 - RESOLUCION:1366X768 63 - RESOLUCIÓN: 1280X1024 63 - RESOLUCIÓN: 1024X768 63 - INTERNADO MEINSTON: PÁGINA PRINCIPAL 96 - MENÚ INFORMACIÓN 96 - GALERÍA DE IMÁGENES 97 - FORMULARIO DE CONTACTO 97 - INTRANET ADMINISTRADOR 98 - MENÚ ALUMNO 98 - MENÚ PERSONAL 98 - MENÚ FAMILIAR 98 - MENÚ PROFESOR 98 - TABLAS JQUERY 99 - ACCESO A LA INTRANET 99 - FORMULARIO DE ACCESO (LOGIN) 99 - ERROR EN INICIO DE SESIÓN 100 - ADMINISTRADOR: USUARIOS REGISTRADOS 100 - BÚSQUEDA EN TABLAS 101 - BOTONES DE LA INTRANET 101 - ADMINISTRADOR: INSERTANDO USUARIO 101 – CALENDARIO 102 - DATEPICKER 102 – DIÁLOGO 102 - ADMINISTRADOR: USUARIO INSERTADO 102 Memoria Proyecto Final de Carrera 116 - CONFIRMACIÓN BORRADO 103 - ADMINISTRADOR: ALUMNOS 103 – CAMBIAR FAMILIAR ILUSTRACIÓN 9–25 - MODIFICAR ALUMNO 103 - ASIGNANDO DEPORTES 104 - ADMINISTRADOR: PERSONAL 104 - ADMINISTRADOR: FAMILIARES 105 - ADMINISTRADOR: GRUPOS 105 - ADMINISTRADOR: ASIGNATURAS 106 - ADMINISTRADOR: EXÁMENES 106 - ADMINISTRADOR: DEPORTES 107 - ADMINISTRADOR: COMUNICADOS, OBSERVACIONES E INFORMES 107 - ALUMNO: ASIGNATURAS 108 - ALUMNO: EXÁMENES 108 - ALUMNO: NOTAS 108 - ALUMNO: DATOS PERSONALES 108 - ALUMNO: DEPORTES 109 - ERROR, MÁXIMO DE DEPORTES INSCRITOS 109 - ALUMNO: OBSERVACIONES Y COMUNICADOS 109 - ESCRIBIENDO MENSAJE 110 - FAMILIAR: DATOS PERSONALES 110 - FAMILIAR: DATOS PERSONALES DE LOS ALUMNOS 110 - FAMILIAR: NOTAS 111 - FAMILIAR: COMUNICADOS E INFORMES 111 - FAMILIAR: EXÁMENES 111 - PERSONAL: DATOS PERSONALES 112 - PERSONAL: TUTOR 112 - MONITOR: DEPORTES 113 - PROFESOR: ASIGNATURAS, EXÁMENES Y NOTAS 113 - PONIENDO NOTAS 113 - PROFESOR: ASIGNATURA SIN ALUMNOS 114 - PERSONAL: OBSERVACIONES 114