Ingenierira sw

INSTITUTO TECNOLÓGICO SUPERIOR
“NUESTRA SEÑORA DEL ROSARIO”
TECNOLOGÍA EN ANÁLISIS DE SISTEMAS
TEMA:
“ANÁLISIS, DISEÑO Y DESARROLLO DE UN SITIO WEB PARA
EL REGISTRO Y CONTROL DEL PROCESO DE SEGUIMIENTO
DE EGRESADOS Y GRADUADOS DEL INSTITUTO
TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA DEL
ROSARIO” EN EL CANTÓN CATAMAYO, PROVINCIA DE LOJA.”
AUTORA:
Carmen del Rocio Benites Torres
TUTOR:
Tnlg. Luis Tillaguango
AÑO LECTIVO:
2015-2016

CERTIFICACIÓN:
Yo, Tnlg. Luis Tillaguango Docente del Instituto Tecnológico Superior
“Nuestra Señora del Rosario” certifico que la Srta. Carmen del Rocio Benites
Torres con C.I No.1104746217 realizó el presente proyecto de grado con el
título “ANÁLISIS, DISEÑO Y DESARROLLO DE UN SITIO WEB PARA EL
REGISTRO Y CONTROL DEL PROCESO DE SEGUIMIENTO DE
EGRESADOS Y GRADUADOS DEL INSTITUTO TECNOLÓGICO
SUPERIOR “NUESTRA SEÑORA DEL ROSARIO” EN EL CANTÓN
CATAMAYO, PROVINCIA DE LOJA.”, siendo la autora intelectual del
mismo, que es original, auténtico y personal cumpliendo así con las
disposiciones reglamentarias establecidas para el efecto.
____________________
Tnlg. Lius Tillaguango
C.I. 1104476575
I

CERTIFICADO DE AUTORÍA:
El proyecto de fin de ciclo con el tema: “ANÁLISIS, DISEÑO Y
DESARROLLO DE UN SITIO WEB PARA EL REGISTRO Y CONTROL
DEL PROCESO DE SEGUIMIENTO DE EGRESADOS Y GRADUADOS
DEL INSTITUTO TECNOLÓGICO SUPERIOR “NUESTRA SEÑORA DEL
ROSARIO” EN EL CANTÓN CATAMAYO, PROVINCIA DE LOJA.”, ha sido
desarrollado por Carmen del Rocio Benites Torres con C.I No.1104746217.
Es absolutamente original, auténtico y personal, en la virtud, el contenido,
efectos legales y académicos que se desprenden del mismo son
exclusividad de la autora.
Carmen del Rocio Benites Torres.
II

RESUMEN
En el presente proyecto se analiza la falta de una Aplicación Web que realice
el Registro y Control de los Estudiantes Egresados y Graduados, del Instituto
Tecnológico Superior “Nuestra Señora del Rosario”, el mismo que se realiza
en un Sistema Local, generando una pérdida de tiempo al realizar este tipo
de procesos académicos, este sistema colabora con el departamento de
Bienestar Estudiantil de la Institución ubicada en las calles 9 de Octubre y
Eugenio Espejo de la Ciudad de Catamayo, en la provincia de Loja.
Mediante el uso de la presente Aplicación Web se brindará un mejor acceso
a la información de los Egresados y Graduados. Se podrá registrar toda la
información general que le solicite a la Aplicación Web como registrar datos
personales del egresado, datos académicos, datos de su trabajo actual,
podrá realizar consultas de los datos registrados, realizar sugerencias, y con
una base de datos que permitirá almacenar la información de manera segura
y ordenada.
Por las razones mencionadas anteriormente, se presenta como tema:
“ANÁLISIS, DISEÑO Y DESARROLLO DE UN SITIO WEB PARA EL
REGISTRO Y CONTROL DEL PROCESO DE SEGUIMIENTO DE
EGRESADOS Y GRADUADOS DEL INSTITUTO TECNOLÓGICO
SUPERIOR “NUESTRA SEÑORA DEL ROSARIO” EN EL CANTÓN
CATAMAYO, PROVINCIA DE LOJA.”
III

INTRODUCCIÓN
El Instituto Tecnológico Superior “Nuestra Señora del Rosario”, propone el
proyecto de implementación de una Aplicación Web para el Seguimiento de
Egresados y Graduados de la Especialidad de Análisis de Sistemas y
Contabilidad y Auditoría.
Con la Aplicación en entorno Web se pretende que todas las facultades
tengan información oportuna de los egresados y graduados, modalidad de
titulación entre otros, además que, aprovechando que el sistema estará
desarrollado en entorno web la Institución podrá disponer de la información
de cada Egresado y Graduado la misma que podrá ser actualizada por el
Administrador y Secretaria desde cualquier punto de acceso a internet, así
como también los Egresados y Graduados podrán solicitar o seleccionar a
información que deseen constatar que se encuentra actualizada, permitiendo
así que la Institución logre proporcionar a sus profesionales una información
veraz y efectiva.
El presente proyecto ha sido propuesto desde Abril el 2016 y permite el
registro de datos personales, datos académicos, datos del trabajo actual, y el
envío de sugerencias del egresado y graduado. El mismo que se verá en
detalle cada una de las funcionalidades del Sistema de Seguimiento de
Egresados y Graduados y como puede ser utilizado por el personal
encargado del ingreso de la información, así como también por los mismos
Egresados y Graduados que actualizaran su datos.
IV

CAPÍTULO I
1. DATOS DEL PROYECTO
1.1. PROBLEMÁTICA:
Hoy en día la implementación de Aplicaciones Web ha causado
mucho auge en Instituciones Educativas y Empresas de toda
índole. De hecho, se dice que estamos en un nuevo tipo de
sociedad llamada Sociedad del Conocimiento, que viene a
reemplazar cada uno de los procesos o actividades desarrolladas,
de una manera más eficiente, en las Instituciones de Educación
Superior es en donde más específicamente se dan pasos
agigantados a la par con la Tecnología, con el fin de modernizar
cada uno de los procesos y obtener una respuesta segura, y eficaz
al momento de procesar solicitudes de información de las diversas
operaciones que se llevan a cabo.
La Educación Superior en el Ecuador también va implementando
la tecnología dentro de las diversas Instituciones que tiene a su
cargo a nivel nacional, mejorando cada una de sus áreas de
gestión, pero especialmente los departamentos que archivan
información, todo esto se permite, a que las Institución Educativa
realizan varios eventos para los estudiantes. Sin embargo hay que
tener en cuenta que la educación es la formación destinada a
desarrollar la capacidad intelectual de la persona y precisamente
esa extensa formación genera una demanda de recursos, muy alta
para la Institución Educativa, analizando y deduciendo de tal forma
que se podría decir, que la implementación de nuevas
Aplicaciones Web den un aporte muy significativo para el
desarrollo de la misma.
El Instituto Tecnológico Superior “Nuestra Señora del Rosario”
1

perteneciente al Cantón Catamayo provincia de Loja es uno de
estos casos, al momento de prestar su atención sobre las
necesidades que presentan los Egresados y Graduados de las
Especialidades de Análisis de Sistemas y Contabilidad y Auditoría,
cabe resaltarlo ya que es necesario en dicha Institución requiera
de un Sistema que permita el registro, control y respaldo de los
datos personales, solicitudes, sugerencias, de los Egresados y
Graduados con el fin de que la información sea veraz y quede
archivada a un buen recaudo y presta a quienes la soliciten.
Entonces, es aquí donde radica el problemas, todos los registros
de datos de los Egresados y Graduados se realizan en una
Aplicación Local en donde se demanda de cierto modo un mayor
tiempo tanto del Administrador como del registrado, y por último el
tiempo invertido al momento de querer emitir algún reporte
solicitado.
1.2. OBJETIVOS:
OBJETIVO GENERAL:
Analizar, Diseñar un sistema web para la automatización del
registro y control de Egresados y Graduados del Instituto
Tecnológico Superior “Nuestra Señora del Rosario”, mediante
una investigación muy amplia, y varias alternativas de
soluciones tecnológicas que permitirán desarrollar esta
actividad de manera rápida, eficaz y confiable.
OBJETIVOS ESPECÍFICOS:
✔ Realizar el registro y control adecuado de los datos
informativos de los Egresados y Graduados del Instituto
2

Tecnológico Superior “Nuestra Señora del Rosario”, mediante
la Aplicación Web, la cual permitirá almacenar dicha
información de manera eficiente y segura.
✔ Contribuir a la Institución a tener un seguimiento continuo de
los Egresados y Graduados, a través del registro y envío de
sugerencias las mismas que servirán para que la Aplicación
Web tenga cambios más significativos en la obtención y
presentación de información a los Egresados y Graduados.
✔ Diseñar una interface accesibles, mediante el uso de estilos
web que permitan el acceso a la aplicación de una manera más
fácil y rápida, sobretodo que pueda optimizar cada uno de los
procesos realizados.
1.3. REQUERIMIENTOS:
REQUERIMIENTOS FUNCIONALES:
CÓDIGO DESCRIPCIÓN CATEGORÍA
RF001 Administrar Usuarios Evidente
RF002 Registro y Control de Cuentas de Usuario. Evidente
RF003 Registro y Control de datos personales de
los Egresados y Graduados.
Evidente
RF004 Registro y Control de los datos del trabajo
actual de los Egresados y Graduados.
Evidente
RF005 Actualización de datos de trabajo actual del
Egresado y Graduado.
Evidente
RF006 Actualizar datos informativos de los
Egresados y Graduados.
Evidente
3

RF007 Registro y control de datos académicos de
los Egresados y Graduados.
Evidente
RF008 El Egresado y Graduado envia una
sugerencia a la Institución (para que asi se le
puea cmabiar su estado).
Evidente
RF009 Presentar un reporte general de los
Egresados Graduados y Directores del
Proyecto de Grado.
Evidente
RF010 Presenta reportes de los datos académicos
de los Egresados y Graduados.
Evidente
RF011 Presenta reportes de los datos del trabajo
actual de los Egresados y Graduados y
Sugerencias.
Evidente
RF012 Registro y control de los datos informativos
del Director del Proyecto de grado.
Evidente
Figura 01: Tabla de Requerimientos Funcionales
Fuente: Instituto Tencológico Superior “Nuestra Señora del Rosario”
Responsable: Carmen del Rocio Benites Torres
1.4. REQUERIMIENTOS NO FUNCIONALES:
REQUERIMIENTO NO FUNCIONAL 001: SEGURIDAD
La información del sistema está protegida por claves de acceso y que
solo permiten ingresar a usuarios de distintas áreas de acuerdo a
privilegios que posee el mismo.
REQUERIMIENTO NO FUNCIONAL 002: MANTENIMIENTO
El administrador del sistema puede modificar o actualizar cualquier
aspecto de la información cuando se requiera para así garantizar su
4

mantenimiento.
REQUERIMIENTO NO FUNCIONAL 003: PORTABILIDAD
Esta aplicación puede ser manejada por distintos ordenadores que
esté instalada porque tendra un servidor que se almacena la
información.
REQUERIMIENTO NO FUNCIONAL 004: USUABILIDAD
La APP es fácil de usar de comprender y manejar por el usuario ya
que ofrece una pantalla muy amigable.
Figura 02: Tabla de Requerimientos No Funcionales
5

1.5. DIAGRAMA DE ACTIVIDADES:
6

Figura 03: Diagrama de Actividades
7

1.6. MODELADO DE DOMINIO:
Figura 04: Modelo de Dominio
8

1.7. DIAGRAMA DE CLASES INICIAL:
Figura 05: Diagrama de Clase Inicial
9

CAPÍTULO II
2. CICLO DE VIDA DEL PROYECTO
2.1. MODELO:
INTRODUCCIÓN:
El modelo de ciclo de vida en cascada comenzó a diseñarse en
1966 y se terminó alrededor de 1970. Se define como una
secuencia de fases en la que al final de cada una de ellas se
reúne la documentación para garantizar que cumpla con las
especificaciones y los requisitos antes de pasar a la fase siguiente.
Es por eso que se determinado utilizar este modelo para el
desarrollo del sistema, ya que sigue los pasos intuitivos necesarios
a la hora de desarrollar el software.
FASES:
✔ Análisis de los requisitos del software: El proceso de
recopilación de los requisitos se centra e intensifica
especialmente en el software. El ingeniero de software debe
comprender el ámbito de la información del software así como
la función, el rendimiento y las interfaces requeridas.(Mendéz,
2010)
✔ Diseño: El diseño del software se enfoca en cuatro atributos
distintos del programa; la estructura de los datos, la
arquitectura del software, el detalle procedimental y la
caracterización de la interfaz. El proceso de diseño traduce los
requisitos en una representación del software con la calidad
requerida antes de que comience la codificación. (Mendéz,
2010)
10

✔ Codificación: el diseño debe traducirse en una forma legible
para la maquina. Si el diseño se realiza de una manera
detallada, la codificación puede realizarse mecánicamente.
(Mendéz, 2010)
✔ Prueba: La prueba se centra en la lógica interna del software y
en las funciones externas, realizando pruebas que aseguren
que la entrada definida produce los resultados que realmente
se requieren. (Mendéz, 2010)
✔ Mantenimiento: el software sufrirá cambios después de que se
entrega al cliente. Los cambios ocurrirán debidos a que se
haya encontrado errores, a que el software deba adaptarse a
cambios del entorno externo (sistema operativo o dispositivos
periféricos).(Mendéz, 2010).
VENTAJAS:
✔ Se tiene todo bien organizado y no se mezclan las fases.
✔ La planificación es sencilla.
DESVENTAJAS:
✔ Se tarda mucho tiempo en pasar por todo el ciclo.
✔ Es dificil incorporar nuevas cosas si se quiere actualizar.
2.2. DISEÑO PRELIMINAR:
INTERFAZ DE INICIO:
La Aplicación Web al momento de iniciar presentará una interfaz
de inicio en la cual solo se muestra un botón de ingreso al sistema
para que los usuarios puedan ingreso a la ventana de inicio de
11

sesión. (Ver Figura 07).
Figura 07: Interfaz de Inicio.
INTERFAZ INICIO DE SESIÓN:
En la interfaz de Iniciar Sesión el usuario deberá ingresa su Email
en (Usuario) y su número de cédula en (Contraseña) para poder
ingresar al sistema.(Ver Figura 08)
12

Figura 08: Inicio de Sesión
INTERFAZ DEL ADMINISTRADOR:
En el caso de ser el Administrador el que ingrese al sistema se
mostrará una pantalla con un menú, el mismo que tendrá las
siguientes opciones, Inicio, Datos Registrados (donde se encontrar
las Matrices de Registro de datos personales, datos del trabajo
actual, datos académicos) del Egresado y Graduado, Registro de
datos de el (Egresados, Graduados y Director Proyecto), Registro
de Sugerencias, Reportes (Egresados, Graduados, Consultas,
Sugerencias), Autor. (Ver Figura 09)
Figura 09: Interfaz del Administrador
INTERFAZ DEL EGRESADO Y GRADUADO:
La interfaz de los egresados y graduados se presentará un menú
13

con siguientes opciones: Inicio, Registro de datos del trabajo
actual, Datos Registrados (Matriz de datos personales y
académicos). (Ver Figura 10).
Figura 19: Interfaz del Egresado y Graduado
INTERFAZ DE REGISTRO DE DATOS:
Interfaz para el registro de datos personales (Ver Figura 11).
14

Figura 11: Registro de Datos
INTERFAZ DEL REGISTRO DE SUGERENCIA:
Para poder enviar un sugerencia al Administrador se mostrará al
Egresado y Graduado la presente interfaz en la cual debe llenar
cada uno de los campos de texto. (Ver Figura 12).
15

Figura 12: Interfaz de Sugerencias
2.3. METODOLO ÍA:Ǵ
INTRODUCCIÓN:
Iconix será la metodología utilizada para el desarrollo de software,
porque proporciona requisitos suficientes y documentación de
diseño, simplifica muchísimo en el proceso sin perder
documentación al dejar solo aquello que es necesario. Esto
implica un uso dinámico del UML de tal forma que siempre se
pueden utilizar otros diagramas además de los ya estipulados si se
cree conveniente. Iconix nos guía a través de casos de uso y sigue
un ciclo de vida iterativo e incremental, el objetivo es que a partir
de los casos de uso se obtenga el sistema final.
CARACTERÍSTICAS:
Iterativo e incremental: Varias iteraciones ocurren entre el
16

desarrollo del modelo de dominio y la identificación de los
casos de uso, el modelo estático es incrementalmente refinado
por los modelos dinámicos.
Trazabilidad: Cada paso está referenciado por algún requisito,
se define trazabilidad como la capacidad de seguir una relación
entre los diferentes artefactos producidos.
Dinámica del UML: La metodología ofrece un uso dinámico
del UML como los diagramas del caso de uso, diagramas de
secuencia y de colaboración. (San Martin, 2010).
FASES:
✔ Análisis de Requisitos: En esta primera fase se identifica los
objetos y todas las relaciones de agregación y generalización
entre ellos. Se deben analizar todos los requisitos que
formaran parte del sistema y con estos construir el diagrama de
clases, que representa las agrupaciones funcionales que
estructuraran el sistema.
✔ Análisis y Diseño Preliminar: El Caso de Uso, posee una
breve descripción una precondición que debe cumplir antes de
iniciarse, una post condición que debe cumplir al terminar si
termina correctamente, un flujo normal que sigue el sistema en
caso de que todo vaya correctamente y un flujo alternativo en
caso de que haya cualquier problema. El resto de campos son
opcionales, después será necesario realizar lo que se conoce
como Diagrama de Robustez, el cual pertenece al proceso
Iconix.
✔ Diseño Detallado: En esta fase se proceden a realizar los
17

Diagramas de Secuencia, los cuales derivan directamente de
las fichas de Caso de Uso, se relacionan con fichas de casos
de uso que y al igual estos se relacionan con requisitos, esto
implica que una vez finalizado el diseño, tras refinar
nuevamente el Diagrama de Clases, podremos verificarlo
directamente gracias a este factor de trazabilidad.
✔ Implementación: Para poder distribuir el software
correctamente, puede ser adecuado realizar un Diagrama de
Componentes en algunos casos, pero no siempre es
necesario; en cualquier caso, aquí es donde se escribe el
código tal y como fue especificado en las fases anteriores y se
planean las pruebas basándonos en los requisitos iniciales, al
nivel que fuese necesario. Aquí es donde hacemos uso real de
la trazabilidad y donde realmente ponemos en práctica esa
garantía de calidad que tanto hemos mencionado.
VENTAJAS:
✔ Desarrollo incremental e iterativo y la relativa facilidad con que
se puede utilizar en otras metodologías de desarrollo u otras
técnicas.
✔ Usa una análisis de robustez que reduce la ambigüedad al
describir los casos.
✔ Es usado en proyectos más ligeros que los usados en RUP, por
lo que tiene un mayor campo de aplicabilidad.
DESVENTAJAS:
✔ No puede ser usado para proyectos grandes.
✔ Necesita información rápida y puntual de los requisitos, el
18

diseño y las estimaciones.
✔ Gran parte de la información lo podemos encontrar en inglés, lo
cual requiere establecer muy bien su comprensión.
2.4. ARQUITECTURA
INTRODUCCIÓN:
De acuerdo con capítulos anteriores la arquitectura utilizada estará
orientada a entornos Web. Bajo este diseño las tareas se ejecutan
por el lado del servidor, evitando delegar tales responsabilidades
hacia las máquinas clientes desde sus navegadores.
Asimismo asegurara la disponibilidad a tiempo completo y desde
un equipo fijo a otro con conexión a Internet. Es así como el
diseño debe garantizar un óptimo aprovechamiento de las
capacidades propias del sistemas Web satisfaciendo
adecuadamente los requisitos no funcionales del producto. Entre
las fortalezas exigidas a la arquitectura se a determinado utilizar
una arquitectua orientada hacia la web.
ARQUITECTURA ORIENTADA HACIA LA PRESENTACIÓN
WEB:
El patrón Modelo, Vista, Controlador (MVC) tiene sus orígenes
desde 1979 por una comunidad de usuarios del lenguaje Smalltalk
proveniente de los laboratorios de investigación en Xerox. Bajo
este diseño el modelo de dominio (de datos y aplicaciones), la
presentación y las acciones basadas en la información ingresada
por el usuario quedan separados bajo estos tres componentes:
Modelo: En este ámbito se gestionan las comunicaciones entre el
dominio de datos y dominio de aplicación atendiendo las consultas
19

sobre su estado (realizadas con frecuencia desde la Vista) así
como a las instrucciones de cambio de estado (usualmente desde
el Controlador)
Vista: Este ámbito maneja la visualización de la información en un
formato adecuado para el usuario y su interacción.
Controlador: Este ámbito funciona interpretando las acciones del
usuario sea por el teclado o el mouse, informando al modelo y/o a
la vista sobre los cambios a realizarse en cada ámbito.
2.5. ESTILO
INTRODUCCIÓN:
El estilo arquitectónico habitual utilizado para el desarrollo de la
aplicación Web se basa en N-Capas, comprende la
implementación de la presentación, la lógica de negocio y la base
de datos en capas por separado donde N representa el número de
capas conformadas en la arquitectura. Los componentes
residentes en una determinada capa pueden interactuar con sus
pares ubicados en la misma capa o con componentes residentes
en capas inferiores. Cada capa podría residir físicamente en
ambientes diferentes favoreciendo así a la escalabilidad del
software (Ver Figura 13).
20

Figura 13: Estilo Arquitectónico
RESPONSABILIDAD DE CADA CAPA:
CAPA DE PRESENTACIÓN:
Responsable de presentar información al usuario e interactuar con
éste, La información recibida mediante comunicación can la capa
de lógica (puede realizar un filtrado previo para comprobar que no
hay errores de formato). Suele consistir en la interfaz gráfica de
usuario; cuadros de texto, botones, etc.
CAPA LÓGICA DE NEGOCIOS:
Responsable de implementar las operaciones solicitadas por los
clientes a la capa de presentación. El componente que comprueba
si un cliente se ha registrado en la aplicación seria un breve
ejemplo de esta capa. Dependiendo de la complejidad y de técnica
de implementación empleada, también se le conoce como
proceso/lógica/reglas de negocio.
CAPA DE DATOS:
21

Es responsable del almacenamiento de los datos. Es común
reusar sistemas existentes de bases de datos en esta capa.
Actualmente se usan manejadores relacionales: son avanzados,
permiten el uso de los tiggers y paquetes. Existen manejadores
Orientados a Objetos.
VENTAJAS:
✔ Separación clara de la interfaz de usuario de la lógica de la
aplicación. Esta separación permite tener diferentes
presentaciones accediendo a las misma lógica.
✔ La redefinición del almacenamiento de información no tiene
ifluencia sobre la presentación.
✔ En contraste con una arquitectura de 2 capas, donde
solamente los datos están accesibles al público, los objetos de
negocios pueden brindar servicios (lógica de aplicación) por la
red.
DESVENTAJAS:
✔ Pueden incrementar el tráfico en la red cuando muchos clientes
envian peticiones a un solo servidor.
✔ Requiere mas balance de carga y tolerancia a las fallas.
✔ Es mucho más difícil programar y probar el software que en
arquitectura de dos niveles porque tienen que comunicarse
más dispositivos para terminar la transacción de un usuario.
22

CAPÍTULO III
3. DESARROLLO DEL PROYECTO
3.1. DIAGRAMA Y DESCRIPCIÓN DE CASOS DE USO:
23

Figura 14: Caso de Uso General
Fuente: Instituto Tecnológico Superior “Nuestra Señora del Rosario”
DESCRIPCIÓN DEL CASO DE USO GENERAL:
Caso de Uso: Gestionar Usuarios.
Actores: Administrador, Secretaria, Egreasado, Graduado, Base
de Datos.
Tipo: General
Propósito: Admitir un Egresado o Graduado para registrar sus datos
personales o académicos al Sistema.
Precondiciones: El Egresado o Graduado ha sido aceptado en el Sistema
con el rol de Administrador o Secretaria.
Poscondición: Se ha registrado en el Sistema los datos del Egresado o
Graduado asignados por el Admistrador o Secretaria.
Flujo Básico: 1. El caso de uso comienza cuando el Administrador
o Secretaria indica que registrara un Egresado o
Graduado.
2. El Sistema muestra un formulario de validación de
ingreso.
3. El Administrador o Secretaria ingresa su email y
cédula como usuario y contraseña.
4. El Sistema muestra una pantalla con un menú de
opciones. En el cual se presenta el Registrar
Datos al dar clic en esta opción se deplegarán tres
ítems más, para registrar el Egresado, Graduado
o Director de Proyecto. Cada una de estas
opciones presentan un submenú que tiene dos
ítems cada uno para registrar datos personales y
el otro para registrar los datos académicos del
Egresado o Graduado.
5. El Administrador selecciona una de las opción
6. El Sistema muestra el registro de datos
personales o académicos de acuerdo a la opción
seleccionada.
24

7. El Administrador llena cada campo de texto con la
información solicitada.
8. El Administrador indica Guardar.
9. El Sistema valida toda la información y muestra un
mensaje de confirmación.
10.El Administrador acepta el mensaje de
confirmacion, y el caso de uso finaliza.
Flujo
Alternativo:
Código de usuario o contraseña erradas:
● En el paso 3, si el código del usuario y contraseña
son erradas el sistema muestra mensaje y vuelve
a solicitar usuario y contraseña.
Datos personales o académicos incompletos:
● En el paso 8 si el Administrador o Secretaria no
llena todas las cajas de texto con la información
solicitada, y pulsa el botón Guardar no podrá
registrar los datos en el sistema.
● En el paso 10 si el Administrador o Secretaria no
acepta el mensaje de confirmación no se
registraran los datos en la base de datos.
Figura 15: Tabla de la Descripción del Caso de Uso General
3.2. HERRAMIENTAS:
NETBEANS:
Se hizo uso de la herramienta NetBeans la misma que es un
Entorno de Desarrollo o IDE (integrated development environment)
para todo tipo de tecnologías desarrolladas en el Lenguaje de
Programación Java e incluso este entorno, permite la codificación
de programas en C, C++ y otros. Además permite crear
aplicaciones profesionales para entornos de escritorio, empresa,
web y móviles debido a que ha sido desarrollado para distintas
plataformas como linux, MacOs X, Solaris y también Windows.
25

MySQL:
Para almacenar los datos de la Aplicación Web se utilizó el
Sistema Gestor de Base de Datos MySQL, el cual está sujeto a la
licencia GNU public license (llamada GPL), para así admitir el uso
de MySQL para la creaión de cualquier tipo de aplicación, ya que
se trata de un sistema de libre distribución y de código abierto.
Aunque carece de algunas características avanzadas disponibles
en otros SGBD (Sistema Gestor de Base de Datos) del mercado,
es una opción atractiva tanto para aplicaciones web, como de
entretenimiento precisamente por su facilidad de uso y su tiempo
reducido de puesta en marcha.
APACHE TOMCAT:
Tomcat, desarrollado por Apache (www.apache.org), es un
estándar implementación de referencia para los servlets Java y
JSP. Puede ser utilizado independiente como un servidor Web o
ser conectado a una Web servidor como Apache, Netscape
Enterprise Server o Microsoft Internet Information Server.
NAVEGADOR CHROME:
Permite navegar e forma rápida en un Orenador, iPhone, iPad
Google Chrome es un navegador que realiza búsquedas por voz y
lee páginas web en cualquier idiona fácilmente.
ENTERPRISE ARCHITECT:
Enterprise Architect es otra de las herramienta utilizadas para el
desarrollo de cada uno de los diagramas que componen el
sistema, es una herramienta multi-usuario, basada en Windows,
diseñada para ayudar a a la construcción de un software robusto y
fácil de mantener. Permite un Análisis y Diseño comprensible de
UML, cubriendo el desarrollo de software desde el paso de los
26

requerimientos a través de las etapas del análisis, modelos de
diseño, hasta llegar a las pruebas y mantenimiento.
PHOTOSHOP:
Adobe Photoshop fue una herramienta utilizada para la creación,
edición y retoque de imágenes para la Aplicación Web. Fue
desarrollado por la compañía Adobe Systems. Se lanzó
originalmente para computadoras Apple, pero luego saltó a la
plataforma Windows. Lo cual le ha permitido hacerse muy popular,
incluso fuera del ámbito informático, llegándose a usar la palabra
"photoshop" para hacer referencia a una foto que ha sido retocada
digitalmente.
REPORTES PDF
Para generar reportes en NetBeans se utilizó varias librerías y por
supuesto a MySQL como nuestro motor de base de datos
predeterminado aunque también funciona con un base de datos
PostgreSQL ya que se lo conecta mediante JDBC (Java DataBase
Connectivity). Las Herramientas utilizadas para la creación del pdf
son:
Adobe Reader: Se utilizó para poder visualizar los reportes
que se encuentren en formato PDF. Aunque en ocasiones no
es indispensable ya que en ocasiones se los visualiza través
de Jasperviewer.
itextpdf-5.5.1.jar: Es importante ya que esta librería es la
encargada de generar el reporte en formato PDF.
27

3.3. DIAGRAMA DE ROBUSTEZ:
Figura 16: Diagrama de Robustez
28

3.4. DIAGRAMA DE SECUENCIA:
Figura 17: Diagrama de Secuencia
29

3.5. DIAGRAMA DE ESTADOS:
Diagrama del administrador al registrar un estudiante:
Figura 18: Diagrama del Administrador al registrar un estudiante
Diagrama de estado de la secretaria al registrar un estudiante
Figura 19: Diagrama de la secretaria al registrar un estudiante
Diagrama de estados del egresado al registrar datos:
Figura 20: Diagrama del egresado al registrar datos del trabajo
30

Diagrama de estados del graduado al registrar datos:
Figura 21: Diagrama del graduado al registrar su datos de trabajo
3.6. DIAGRAMA DE PAQUETES:
Figura 22: Diagrama de Paquetes
31

3.7. DIAGRAMA DE DISTRIBUCIÓN:
Figura 23: Diagrama de Distribución
32

CAPÍTULO IV
4. IMPLEMENTACIÓN
4.1. PROTOTIPADO:
INTERFAZ DE INICIO DE SESIÓN:
Figura 22: Interfaz de Incio de Sesión
INTERFAZ DEL AMINISTRADOR
Figura 25: Interfaz de Incio del Administrador
33

1.1INTERFAZ PARA REGISTRAR DATOS:
Figura 26: Interfaz para registrar datos
INTERFAZ PARA REGISTRAR UNA SUGERENCIA
Figura 27: Interfaz para registrar una Sugerencia
34

INTERFAZ DE REPORTES:
Figura 28: Interfaz de Reportes
MATRIZ DE SUGERENCIAS
Figura 29: Matriz de Sugerencias
35

4.2. CÓDIGO:
CÓDIGO DE LA INTERFAZ DE INICIO DE SESIÓN:
1 <%--
2 Document : Inicio_Seccion
3 Created on : 26/06/2016, 8:49:25
4 Author : carmita
5 --%>
6
7 <%@page import="javax.swing.JOptionPane"%>
8 <%@page import="Modelo.Inicio_Seccion"%>
9 <%@page session="true"%>
10 <%@page contentType="text/html" pageEncoding="UTF-8"%>
11 <!DOCTYPE html>
12
13 <html>
14 <head>
15 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
16 <title>JSP Page</title>
17
18 <link rel="shortcut icon" href="ig/escudo.ico">
19
20 <style type="text/css">
21 .boton{
22 font-size:16px;
23 font-family:Verdana,Helvetica;
24 font-weight:bold;
25 color:black;
26 background:#81F781;
27 width:155px;
28 height:37px;
29 border:#04B404;
30 border-width: 2px;
31 border-style: solid;
32 }
33 </style>
34
35 <style>
36 #container {
37 width: 270px;
38 margin: 0 auto;}
39 .ex2 img{
40 height: 180px;
41 width: 180px;
42 margin: 15px 0;
43 -webkit-transition: all 1s ease;
44 -moz-transition: all 1s ease;
45 -ms-transition: all 1s ease;
46 transition: all 1s ease;}
47 .ex2 img:hover {
36

48 height: 175px;
49 width: 175px;
50 margin-left: -20px;}
51 </style>
52
53 <script>
54 function mostrarOcultarTablas(id){
55 mostrado=0;
56 elem = document.getElementById(id);
57 if(elem.style.display=='block')mostrado=1;
58 elem.style.display='none';
59 if(mostrado!=1)elem.style.display='block';}
60 </script>
61 </head>
62
63 <body bgcolor="#ECF6CE">
64
65 <div id="container">
66 <div class="ex2">
67 <img alt="img0" src="img/escudo.png" width=200 height=210
style="Position:Absolute; left:4%; top:0%; cursor:crosshair">
68 <img alt="img0" src="img/escudo.png" width=200 height=210
69 </div>
70 </div>
71
72 <img alt="img0" src="img/virgen.png" width=368 height=390
73
74 <table bgcolor="#ECF6CE" width="60%" hight="10%" style="Position:Absolute;
left:20%; top:4%">
75 <tr>
76 <td><b style="Position:Absolute; left:14%; top:4%"><font FACE="Ubuntu
Medium" SIZE=6 COLOR="#000000">INSTITUTO TECNOLÓGICO
SUPERIOR</font></b></td>
77 </tr>
78
79 <tr>
Medium" SIZE=6 COLOR="#000000">"NUESTRA SEÑORA DEL
ROSARIO"</font></b></td>
81 </tr>
82
83 <tr>
Medium" SIZE=6 COLOR="#000000" >Sistema de Seguimiento de Egresados y
Graduados</font></b>
85 <br></br>
86 <br></br>
87 <br></br>
88 <br></br>
89 </td>
37

90 </tr>
91 </table>
92
93 <form method="post" action="Inicio_Seccion.jsp" onsubmit="return
validarForm(this);">
94
95 <div id="tabla1">
96 <table BORDER=10 width="45%" hight="35%" bgcolor="#ECF6CE" style="box-
shadow: 0px 0px 20px 0; height: 60px; border-radius: 20px; border-radius: 20px;
Position:Absolute; left:42%; top:42%">
97 <tr>
98 <td><center><font FACE="Ubuntu Medium" SIZE=6 COLOR="red">INICIO
DE SECCIÓN</font></center>
99 </td>
100 </tr>
101
102 <tr>
103 <td>
104 <center>
105 <br></br>
106 <b><i>Email(*):<input type="text" name="usuario" size=30
placeholder="Ingrese su email" style="margin-left:9%; width:230px; margin-
bottom:5px;"></i></b>
107 <br></br>
108 <b><i>Contraseña(*): <input type="text" name="pasword" size=30
placeholder="Ingrese su contraseña" style="margin-left:1%; width:230px; margin-
bottom:5px;"></i></b>
109 <br></br>
110 </center>
111 <br></br>
112 <br></br>
113 <br></br>
114 </td>
115 </tr>
116
117 <tr>
118 <td>
119 <input type="submit" name="btn_ingresar" value="INICIAR SECCIÓN"
class="boton" style="box-shadow: 0px 0px 18px 0; height:42px; border-radius: 19px;
border-radius: 15px; Position:Absolute; left:18%; top:85%; cursor:pointer"/>
120 <a href="Seleccio_Usuario.jsp"><input type="button" value="CANCELAR"
class="boton" style="box-shadow: 0px 0px 18px 0; height:42px; border-radius: 19px;
border-radius: 15px; Position:Absolute; left:59%; top:85%; cursor:pointer"/>
121 <br></br>
122 <br></br>
123 </td>
124 </tr>
125 </table>
126 </div>
127
128 <div><a href="javascript:mostrar('tabla1')" style="Position:Absolute; left:57%;
top:79%"><font FACE="Ubuntu Medium" SIZE=4>Olvidaste tu contraseña?
38

</font></a></div>
129
130 </form>
131 <%
132 Inicio_Seccion opt=new Inicio_Seccion();
133 if(request.getParameter("btn_ingresar")!=null){
134 String usuario=request.getParameter("usuario");
135 String pass=request.getParameter("pasword");
136
137 HttpSession secion=request.getSession();
138 switch (opt.Iniciar_Seccion(usuario, pass)){
139 case 1:
140 secion.setAttribute("user", usuario);
141 secion.setAttribute("tipo", "1");
142 response.sendRedirect("index.jsp");
143 JOptionPane.showMessageDialog(null, "BIENVENIDO AL SISTEMA
ADMINISTRADOR...");
144 break;
145
146 case 2:
149 response.sendRedirect("SECRETARIA.jsp");
150 JOptionPane.showMessageDialog(null, "BIENVENIDA AL SISTEMA
SECRETARIA...");
151 break;
152
153 case 3:
156 response.sendRedirect("GRADUADO.jsp");
157 JOptionPane.showMessageDialog(null, "BIENVENIDO ALSISTEMA
GRADUADO...");
158 break;
159
160 case 4:
163 response.sendRedirect("EGRESADO.jsp");
164 JOptionPane.showMessageDialog(null, "BIENVENIDO AL SISTEMA
EGRESADO...");
165 break;
166
167 case 5:
170 response.sendRedirect("BIENESTAR_ESTUDIANTIL.jsp");
171 JOptionPane.showMessageDialog(null, "BIENVENIDO ENCARGAD@
DE BIENESTAR ESTUDIANTIL...");
172 break;
173
174 default:
39

175 %>
176 <div><input type="text" name="usuario" value="USUARIO Y
CONTRASEÑA NO ESXISTEN" style="Position:Absolute; left:52%; top:73%" size="38"
disabled="disabled"></div>
177 <%
178 break;
179 }
180 }if(request.getParameter("cerrar") != null){
181 session.invalidate();
182 }%>
183
184 </body>
185 </html>
CÓDIGO DE LA INTERFAZ DEL ADMINISTRADOR
1<%--
2 Document : index
3 Created on : 06/07/2016, 14:21:05
4 Author : carmita
5--%>
6<%@page session = "true"%>
7<%@page contentType="text/html" pageEncoding="UTF-8"%>
8<!DOCTYPE html>
9<html>
10 <head>
13
14<%--Estilo para diseñar el menú de la página del administrador--%>
15<style type="text/css">
16 * {
17 margin:0px;
18 padding:0px;
19 }
20
21 #header {
22 margin:auto;
23 width:900px;
24 font-family:Ubuntu Medium, sans-serif;
25 }
26
27 ul, ol {
28 list-style:none;
29 }
30
31 .nav > li {
32 float:left;
33 }
34
35 .nav li a {
40

36 background-color:#81F781;
37 color:#000;
38 text-decoration:none;
39 padding:20px 33px;
40 display:block;
41 }
42
43 .nav li a:hover {
44 background-color:#A9F5BC;
45 }
46
47 .nav li ul {
48 display:none;
49 position:absolute;
50 min-width:100px;
51 }
52
53 .nav li:hover > ul {
54 display:block;
55 }
56
57 .nav li ul li {
58 position:relative;
59 }
60
61 .nav li ul li ul {
62 right:-200px;
63 top:0px;
64 }
65</style>
66<%--Código para colocar el icono de la pagina--%>
67<link rel="shortcut icon" href="ig/escudo.ico">
68</head>
69
70<body bgcolor="#ECF6CE">
71
72<%-- Codigo para colocar um imagen como banner principal--%>
73<img alt="img0" src="img/NUEVA3.jpg" width=1312 height=250>
74
75<div style="position: relative;">
76 <%--Desarrollo del Menú y submenu--%>
77 <form name="" method="post" action="">
78 <div id="header" style="position: absolute; left:220px; top:10px; z-index:3;">
79 <ul class="nav">
80
81 <li><a href="">Inicio</a></li>
82
83 <li><a href="">Administrador</a>
84 <ul>
85 <li><a href="">Egresado</a>
86 <ul>
87 <li><a href="Matriz_Egresado.jsp">Datos Personales</a></li>
88 <li><a href="Matriz_DatosAcademicos.jsp">Datos Académicos</a></li>
89 <li><a href="Matriz_DatosTrabajoN2.jsp">Datos de Trabajo</a></li>
41

90 </ul>
91 </li>
92
93 <li><a href="">Graduado</a>
94 <ul>
96 <li><a href="Matriz_DAGraduado.jsp">Datos Académicos</a></li>
97 <li><a href="Matriz_DTGraduado2.jsp">Datos de Trabajo</a></li>
98 </ul>
99 </li>
100
101 <li><a href="">Docentes</a>
102 <ul>
103 <li><a href="Matriz_DirectorProyecto.jsp">Datos Personales</a></li>
104 </ul>
105 </li>
106 </ul>
107 </li>
108
109 <li><a href="">Registro</a>
110 <ul>
112 <ul>
113 <li><a href="REGISTRO_EGRESADO.jsp">Datos Personales</a></li>
114 <li><a href="REISTRO_DATOSACADEMICOS.jsp">Datos
115Académicos</a></li>
116 </ul>
117 </li>
118
120 <ul>
121 <li><a href="REGISTRO_EGRESADO.jsp">Datos Personales</a></li>
122 <li><a href="Registro_DAGrauado.jsp">Datos Académicos</a></li>
123 </ul>
124 </li>
125
127 <ul>
128 <li><a href="REGISTRO_DIRECTORPROYECTO.jsp">Datos
129Personales</a></li>
130 </ul>
131 </li>
132 </ul>
133
134 </li>
135
136 <li><a href="">Reportes</a>
137 <ul>
138 <li><a href="ReporteGeneral.jsp" target="_blank">Reporte General</a></li>
139 <li><a href="Reporte_Parametro.jsp" target="_blank">Reporte por
140Parametro</a></li>
141 </ul>
142 </li>
143
42

144 <li><a href="">Sugerencias</a>
145 <ul>
146 <li><a href="Matriz_Sugerencias.jsp">Egresados</a></li>
147 <li><a href="Matriz_SGraduado.jsp">Graduados</a></li>
148 </ul>
149 </li>
150
151 <li><a href="Derechos_Autor.jsp" target="_blank">Derehos Autor</a></li>
152 </ul>
153 </div>
154</form>
155</div>
156
157<%--Codigo para establecer lineas en la Pagina del Aministrador--%>
158<hr color="#B40404" width="100%" hight="10%" style="Position:Absolute; left:0%;
159top:37%;">
160<hr color="#088A08" width="76%" hight="10%" style="Position:Absolute; left:13%;
161top:61%;">
163top:62%;">
165top:91%;">
167top:92%;">
168
169<%--Tabla para colocar el nombre de la página--%>
170 <table bgcolor="#ECF8E0" border="4" width="60%" hight="20%" style="box-shadow:
1710px 0px 20px 0; height: 60px; border-radius: 15px; border-radius: 15px;
172Position:Absolute; left:21%; top:68%">
173 <tr>
174 <td>
175 <center>
176 <font FACE="Ubuntu Medium" SIZE=10 COLOR="red"
177style="Position:Absolute;left:5%; top:21%">BIENVENIDO ADMINISTRADOR</font>
178 </center>
179 <br></br>
180 <br></br>
181 </br>
182 </td>
183 </tr>
184 </table>
185
186<%--Codigo embebido para mantener el inicio de seccion--%>
187 <%
188 HttpSession seccion=request.getSession();
189 String usu;
190 String nivel;
191 String pass;
192 if(session.getAttribute("user")!=null && session.getAttribute("tipo")!=null){
193 usu=session.getAttribute("user").toString();
194 nivel=session.getAttribute("tipo").toString();
195 %>
196 <p aling="right">
197 <a href="Inicio_Seccion.jsp?cerrar=true" style="position: absolute; left:1103px;
43

198top:275px;"><font FACE='Ubuntu Condensed' size=5 color='blue'><h3>Cerrar_Seccion
199<%=usu%></h3></font></a>
200 </p>
201 <%
202 }else{
203 out.println("<script>location.replace('Inicio_Seccion.jsp');</script>");
204 } %>
205
206 </body>
207</html>
CÓDIGO DE LA INTERFAZ DE REGISTRO DE DATOS
1 <%--
2 Document : REGISTRO_EGRESADO
3 Created on : 12/07/2016, 17:02:57
4 Author : carmita
5 --%>
6 <%@page session = "true"%>
8 <!DOCTYPE html>
9 <html>
10 <head>
13 <%--Codigo para colocar icono a la pagina--%>
14 <link rel="shortcut icon" href="img/i.ico">
15
16 <%--Script para validar datos--%>
17 <script type="text/javascript">
18 validarDocumento = function() {
19 numero = document.getElementById('ruc').value;
20 /* alert(numero); */
21 var suma = 0;
22 var residuo = 0;
23 var pri = false;
24 var pub = false;
25 var nat = false;
26 var numeroProvincias = 22;
27 var modulo = 11;
28 /* Verifico que el campo no contenga letras */
29 var ok=1;
30 for (i=0; i<numero.length && ok==1 ; i++){
31 var n = parseInt(numero.charAt(i));
32 if (isNaN(n)) ok=0;}
33 if (ok==0){
34 alert("No se puede ingresar caracteres.");
35 return false;}
36
37 if (numero.length < 10 ){
38 alert("El numero ingresado no es valido.");
39 return false;}
44

40
41 /* Los primeros dos digitos corresponden al codigo de la provincia */
42 provincia = numero.substr(0,2);
43 if (provincia < 1 || provincia > numeroProvincias){
44 alert("El codigo de la provincia es invalido");
45 return false;}
46
47 /* Aqui almacenamos los digitos de la cedula en variables. */
48 d1 = numero.substr(0,1);
58
59 /* El tercer digito es: */
60 /* 9 para sociedades privadas y extranjeros */
61 /* 6 para sociedades publicas */
62 /* menor que 6 (0,1,2,3,4,5) para personas naturales */
63 if (d3==7 || d3==8){
64 alert('El tercer digito ingresado es invalido');
65 return false;}
66 /* Solo para personas naturales (modulo 10) */
67 if (d3 < 6){
68 nat = true;
69 p1 = d1 * 2; if (p1 >= 10) p1 -= 9;
70 p2 = d2 * 1; if (p2 >= 10) p2 -= 9;
71 p3 = d3 * 2; if (p3 >= 10) p3 -= 9;
72 p4 = d4 * 1; if (p4 >= 10) p4 -= 9;
73 p5 = d5 * 2; if (p5 >= 10) p5 -= 9;
74 p6 = d6 * 1; if (p6 >= 10) p6 -= 9;
75 p7 = d7 * 2; if (p7 >= 10) p7 -= 9;
76 p8 = d8 * 1; if (p8 >= 10) p8 -= 9;
77 p9 = d9 * 2; if (p9 >= 10) p9 -= 9;
78 modulo = 10;}
79
80 /* Solo para sociedades publicas (modulo 11) */
81 /* Aqui el digito verficador esta en la posicion 9, en las otras 2 en la pos. 10 */
82 else if(d3 == 6){
83 pub = true;
84 p1 = d1 * 3;
85 p2 = d2 * 2;
86 p3 = d3 * 7;
87 p4 = d4 * 6;
88 p5 = d5 * 5;
89 p6 = d6 * 4;
90 p7 = d7 * 3;
91 p8 = d8 * 2;
92 p9 = 0;}
93 /* Solo para entidades privadas (modulo 11) */
45

94 else if(d3 == 9) {
95 pri = true;
96 p1 = d1 * 4;
97 p2 = d2 * 3;
98 p3 = d3 * 2;
99 p4 = d4 * 7;
100 p5 = d5 * 6;
101 p6 = d6 * 5;
102 p7 = d7 * 4;
103 p8 = d8 * 3;
104 p9 = d9 * 2;}
105 suma = p1 + p2 + p3 + p4 + p5 + p6 + p7 + p8 + p9;
106 residuo = suma % modulo;
107
108 /* Si residuo=0, dig.ver.=0, caso contrario 10 - residuo*/
109 digitoVerificador = residuo==0 ? 0: modulo - residuo;
110
111 /* ahora comparamos el elemento de la posicion 10 con el dig. ver.*/
112 if (pub==true){
113 if (digitoVerificador != d9){
114 alert('El ruc de la empresa del sector publico es incorrecto.');
115 return false;
116 }
117 /* El ruc de las empresas del sector publico terminan con 0001*/
118 if ( numero.substr(9,4) != '0001' ){
119 alert('El ruc de la empresa del sector publico debe terminar con 0001');
120 return false;}
121 }else if(pri == true){
123 alert('El ruc de la empresa del sector privado es incorrecto.');
124 return false;}
125 if ( numero.substr(10,3) != '001' ){
126 alert('El ruc de la empresa del sector privado debe terminar con 001');
127 return false;}
128 }else if(nat == true){
130 alert('El numero de cedula de la persona natural es incorrecto.');
131 return false;
132 }if (numero.length >10 && numero.substr(10,3) != '001' ){
133 alert('El ruc de la persona natural debe terminar con 001');
134 return false;}
135 }
136 return true;}
137 </script>
138
139 <%--Estilo para cambiar el mouse--%>
141 p.cruz { Cursor : crosshair;}
142 p.normal { Cursor : default}
143 p.puntero { Cursor : pointer;}
144 p.mover { Cursor : move;}
145
146 p.redimensionarE { Cursor : e-resize;}
147 p.redimensionarSE { Cursor : se-resize;}
46

148 p.redimensionarSO { Cursor : sw-resize;}
149 p.redimensionarS { Cursor : s-resize;}
150
151 p.seleccionTexto { Cursor : text;}
152 p.espera { Cursor : wait;}
153 p.ayuda { Cursor : help;}
154 </style>
155
156 <%--Script para activar cajas de texto--%>
158 function activar(){
159 var de7=document.getElementById("uno").disabled= false;
160 var p=document.getElementById("dos").disabled= false;
161 var s=document.getElementById("tres").disabled= false;
162 var t=document.getElementById("cuatro").disabled= false;
163 var c=document.getElementById("cinco").disabled= false;
164 var q=document.getElementById("seis").disabled= false;
165 var s=document.getElementById("siete").disabled= false;
166 var sp=document.getElementById("ocho").disabled= false;
167 var o=document.getElementById("nueve").disabled= false;
168 var n=document.getElementById("diez").disabled= false;
169 var de=document.getElementById("once").disabled= false;
170 var de1=document.getElementById("doce").disabled= false;
171 var de2=document.getElementById("trece").disabled= false;
172 var de2=document.getElementById("catorce").disabled= false;
173 var de3=document.getElementById("quince").disabled= false;
174 var de3=document.getElementById("diesiseis").disabled= false;
175 var de4=document.getElementById("diesiocho").disabled= false;
176 var de6=document.getElementById("btn_re").disabled= false;
177 }
178 </script>
179
180 <%--Estilo para diseñar el boton--%>
182 .boton1{
183 font-size:16px;
186 color:black;
188 width:190px;
189 height:42px;
190 border:#04B404;
193 background-image:url(img/regg.png);
194 background-repeat:no-repeat;
195 height:40px;
196 width:170px;
197 background-position:right;
198 </style>
199
47

202 .boton2{
203 font-size:16px;
206 color:black;
208 width:160px;
209 height:42px;
210 border:#04B404;
213 background-image:url(img/salir.png);
215 height:40px;
216 width:170px;
218 </style>
219
222 .boton3{
223 font-size:16px;
226 color:black;
228 width:160px;
229 height:42px;
230 border:#04B404;
233 background-image:url(img/ver.png);
235 height:33px;
236 width:40px;
238 </style>
239
240 <%--Estilo validar numeros--%>
241 <script>
242 function verif(n){
243 permitidos=/[^0-9.]/;
244 if(permitidos.test(n.value)){
245 alert("Solo se puede ingresar números");
246 n.value="";
247 n.focus();}}
248 </script>
249
250 <%--Estilo para no copiar texto--%>
251 <script language="Javascript" type="text/javascript">
252 document.oncontextmenu = function(){return false}
253 </script>
254
255 <%--Estilo para validar letras--%>
48

257 function validar(e) { // 1
258 tecla = (document.all) ? e.keyCode : e.which;
259 if (tecla==8) return true;
260 patron =/[A-Za-zs]/;
261 te = String.fromCharCode(tecla);
262 return patron.test(te); }
263 </script>
264
265 <%--Estilo para validar las cajas de texto vacio--%>
266 <script>
267 function validaVacio(){
268 if(document.form.Cedula.value==""){
269 alert("Ingrese su Cedula");
270 form.Cedula.focus();
271 return false;}
272 if(document.form.Nombre.value==""){
273 alert("Ingrese su Nombre");
274 form.Nombre.focus();
275 return false;}
276 if(document.form.Apellido.value==""){
277 alert("Ingrese su Apellido");
278 form.Apellido.focus();
279 return false;}
280 if(document.form.Telefono.value==""){
281 alert("Ingrese su Telefono");
282 form.Telefono.focus();
283 return false;}
284 if(document.form.Ciudad.value==""){
285 alert("Ingrese su Ciudad");
286 form.Ciudad.focus();
287 return false;}
288 if(document.form.Direccion.value==""){
289 alert("Ingrese su Direccion");
290 form.Direccion.focus();
291 return false;}
292 if(document.form.Email.value==""){
293 alert("Ingrese su Email");
294 form.Email.focus();
295 return false;}
296 if(document.form.Dia.value==""){
297 alert("Ingrese su Dia");
298 form.ia.focus();
299 return false;}
300
301 if(document.form.Anio.value==""){
302 alert("Ingrese su Anio");
303 form.Anio.focus();
304 return false;}
305 if(document.form.Inicio.value==""){
306 alert("Ingrese su Inicio");
307 form.Inicio.focus();
308 return false;}
309 if(document.form.Fin.value==""){
49

310 alert("Ingrese su Fin");
311 form.Fin.focus();
312 return false;}
313
314 return true;
315 }
316 </script>
317 <%--Estilo para diseñar el menu--%>
319 * {
320 margin:0px;
321 padding:0px;
322 }
323
324 #header {
325 margin:auto;
326 width:900px;
328 }
329
330 ul, ol {
331 list-style:none;
332 }
333
334 .nav > li {
335 float:left;
336 }
337
338 .nav li a {
340 color:#000;
343 display:block;
344 }
345
348 }
349
350 .nav li ul {
351 display:none;
353 min-width:100px;
354 }
355
357 display:block;
358 }
359
360 .nav li ul li {
362 }
363
50

365 right:-200px;
366 top:0px;
367 }
368 </style>
369 </head>
370
372 <%--Codigo para colocar imagen como banner--%>
373 <img alt="img0" src="img/RDPE.jpg" width=1298 height=220
style="Position:Absolute; left:0%; top:0%">
374 <hr color="#B40404" width="100%" hight="10%" style="Position:Absolute; left:0%;
top:33%;">
375
376 <%--Estilo para colocar el menu--%>
377 <div style="position: relative;">
379 <ul class="nav">
380
381 <li><a href="index.jsp">Inicio</a></li>
382
383 <li><a href="">Administrador</a>
384 <ul>
386 <ul>
388 <li><a href="Matriz_DatosAcademicos.jsp">Datos
Académicos</a></li>
389 <li><a href="Matriz_DatosTrabajoN2.jsp">Datos de Trabajo</a></li>
390 </ul>
391 </li>
392
394 <ul>
396 <li><a href="Matriz_DAGraduado.jsp">Datos Académicos</a></li>
397 <li><a href="Matriz_DTGraduado2.jsp">Datos de Trabajo</a></li>
398 </ul>
399 </li>
400
402 <ul>
403 <li><a href="Matriz_DirectorProyecto.jsp">Datos Personales</a></li>
404 </ul>
405 </li>
406 </ul>
407 </li>
408
410 <ul>
412 <ul>
413 <li><a href="REGISTRO_EGRESADO.jsp">Datos
Personales</a></li>
51

414 <li><a href="REISTRO_DATOSACADEMICOS.jsp">Datos
415 </ul>
416 </li>
417
419 <ul>
420 <li><a href="REGISTRO_EGRESADO.jsp">Datos
Personales</a></li>
421 <li><a href="Registro_DAGrauado.jsp">Datos Académicos</a></li>
422 </ul>
423 </li>
424
426 <ul>
427 <li><a href="REGISTRO_DIRECTORPROYECTO.jsp">Datos
Personales</a></li>
428 </ul>
429 </li>
430 </ul>
431
432 </li>
433
435 <ul>
436 <li><a href="ReporteGeneral.jsp" target="_blank">Reporte
General</a></li>
Parametro</a></li>
438 </ul>
439 </li>
440
442 <ul>
443 <li><a href="Matriz_Sugerencias.jsp">Egresados</a></li>
444 <li><a href="Matriz_SGraduado.jsp">Graduados</a></li>
445 </ul>
446 </li>
447
449 </ul>
450 </div>
451 </div>
452
453 <form name="form" id="form" method="post" action="usuario" onsubmit="if
(validaVacio()) { return comprueba(); }; return false">
454
455 <%--Código para colocar las cajas de texto--%>
456 <table bgcolor="#fff" width="68%" align="center" border="0" cellspacing="15"
cellpadding="15" style="Position:Absolute; left:15%; top:60%;">
457 <tr>
458 <td>
459
460 <fieldset >
52

461 <legend>  <font FACE="Ubuntu Medium" SIZE=4
COLOR="red">Registrar Datos Personales del Egresado/a</font></legend>
462 <dl>
463 </br>
464 </br>
465 <label
for="Cedula"><i><b>         &
nbsp;Cédula(*): </b></i></label>
466    <input name="Cedula" id="ruc" type="text" size="25"
maxlength="11" onKeyup="verif(this)" onblur="verif(this)" oncopy="return false;"
onpaste="return false;" oncut="return false;"/>
467 </br></br><br/>
468
469 <label
for="Nombre"><i><b>         
 Nombre(*): </b></i></label>
470   <input name="Nombre" id="uno" disabled="disabled" type="text"
size="25" maxlength="20" onkeypress="return validar(event)" style="text-
transform:uppercase;" oncopy="return false;" onpaste="return false;" oncut="return false;"/>
471      
472
473 <label for="Apellido"><b><i>  Apellido(*): </i></b></label>
474 <input name="Apellido" id="dos" disabled="disabled" type="text" size="25"
maxlength="20" onkeypress="return validar(event)" style="text-transform:uppercase;"
oncopy="return false;" onpaste="return false;" oncut="return false;"/>
475 </br></br><br/>
476
477 <label
for="Telefono"><i><b>         
 Telefono(*): </b></i></label>
478  <input name="Telefono" id="tres" disabled="disabled" type="text" size="25"
479      
480
481 <label for="Ciudad"><i><b>  Ciudad(*): </b></i></label>
482   <input name="Ciudad" id="cuatro" disabled="disabled" type="text"
size="25" maxlength="15" onkeypress="return validar(event)" style="text-
transform:uppercase;" oncopy="return false;" onpaste="return false;" oncut="return false;"/>
483 </br></br><br/>
484
485 <label
for="Direccion"><b><i>        &nbsp
; Dirección(*): </i></b></label></br>
486
           &nbsp
;     
487
           &nbsp
;     
488 <textarea name="Direccion" rows="4" disabled="disabled" id="cinco" type="text"
cols="65" maxlength="35" style="text-transform:uppercase;" oncopy="return false;"
onpaste="return false;" oncut="return false;"></textarea>
489 </br><br/></br>
53

490
491
492 <label
for="Estado_Civil"><b><i>        &n
bsp;Estado Civil(*): </i></b></label>
493   <select name="Estado_Civil" type="text" style="width:110px;"
disabled="disabled" id="seis">
494 <option name=Mes value=0>SELECCIONE: </option>
495 <option name=Mes value=Soltero>Solter@</option>
496 <option name=Mes value=Casado>Casad@</option>
497 </select>
498
           &nbsp
; 
499         
500
501 <label for="Email"><b><i>  Email(*): </i></b></label>
502 <input name="Email" size="28" maxlength="25" disabled="disabled" id="siete"
type="text" oncopy="return false;" onpaste="return false;" oncut="return false;"/>
503 </br><br/></br>
504
505
<i><b>          Fecha
de nacimiento(*): </b></i>
506          
507 <i><b>Dia: </b></i><input name="Dia" disabled="disabled" id="ocho" type="text"
size="7" maxlength="3" onKeyup="verif(this)" onblur="verif(this)" oncopy="return false;"
508          
509 <i><b>Mes: </b></i><select type="text" id="nueve" name="Mes">
510 <option value="1">Enero</option>
511 <option value="2">Febrero</option>
512 <option value="3">Marzo</option>
513 <option value="4">Abril</option>
514 <option value="5">Mayo</option>
515 <option value="6">Junio</option>
516 <option value="7">Julio</option>
517 <option value="8">Agosto</option>
518 <option value="9">Septiembre</option>
519 <option value="10">Octubre</option>
520 <option value="11">Noviembre</option>
521 <option value="12">Diciembre</option>
522 </select>
523         
524 <b><i>Año: </i></b><input type="text" disabled="disabled" id="diez" size="7"
maxlength="4" name="Anio" onKeyup="verif(this)" onblur="verif(this)" oncopy="return false;"
525 <br/><br/><br/>
526
527 <label
for="Sexo"><b><i>         &n
bsp;Sexo(*): </i></b></label>
528     
529 <input type="radio" name="Sexo" type="text" disabled="disabled" id="once"
54

value="Masculino" checked> M
530 <input type="radio" name="Sexo" type="text" disabled="disabled" id="doce"
value="Femenino" checked> F
531
           &nbsp
;
532
           &nbsp
;
533
           &nbsp
;  
534   
535
536 <label for="Estado"><i><b>Estado(*): </b></i></label>
537 <input type="radio" name="Estado" disabled="disabled" id="trece" type="text"
value="Egresado" checked>Egresad@
538 <input type="radio" name="Estado" disabled="disabled" id="catorce" type="text"
value="Graduado" checked>Graduad@
539 <br/><br/><br/>
540
541 <label
for="Inicio"><i><b>         &n
bsp;Inicio(*): </b></i></label>
542 <input name="Inicio" disabled="disabled" id="quince" type="text" size="10"
543
           &nbsp
;  
544     
545
546 <label for="Fin"><i><b>Fin(*): </b></i></label>
547 <input name="Fin" disabled="disabled" id="diesiseis" type="text" size="10"
548
           &nbsp
;  
549     
550
551 <label for="Tipo"><i><b>Tipo: </b></i></label>
552 <select name="Tipo" type="text" disabled="disabled" id="diesiocho"
style="width:110px;" oncopy="return false;" onpaste="return false;" oncut="return
false;"></b></i>
553 <option name=Tipo value="0">SELECCIONE:</option>
554 <option name=Tipo value=3>Graduado</option>
555 <option name=Tipo value=4>Egresado</option>
556 </select>
557 </dl>
558 </br>
559 </br>
560 <%--Codigo para los botones--%>
561 <div><input name="enviar" type="submit" value="Registrar" class="boton1"
55

id="btn_re" disabled="disabled" style="box-shadow: 0px 0px 18px 0; height:44px; border-
radius: 19px; border-radius: 15px; Position:Absolute; left:22%; top:85%;
cursor:pointer"</div>
562 <button type="button" name="dsm" onclick="if (validarDocumento()){
563 alert('El número de cédula ingresado es correcto');
564 activar();
565 }else{
566 alert('El número de cédula ingresado es incorrecto');
567 }" class="boton3" style="Position:Absolute; left:43%; top:9%;
cursor:pointer"/><label></label></button>
568
569 <a href="index.jsp"><input type="button" value="Cancelar" class="boton2"
style="box-shadow: 0px 0px 18px 0; height:44px; border-radius: 19px; border-radius: 15px;
Position:Absolute; left:60%; top:85%; cursor:pointer"/></a>
570 </br></br></br>
571 </br>
572
573 </fieldset>
574 </br>
575 </td></tr></table>
576
577 </form>
578
579 <%--Coigo para colocar pie de pagina--%>
580 <div style="Position:Absolute; left:82%; top:185%; z-index:3;"><a href=""><img
src="img/f.png" width=58 height=50 ></a></div>
src="img/mail.ico" width=56 height=56 ></a></div>
src="img/t.PNG" width=55 height=50 ></a></div>
583
584
585 <div><img src="img/y1.jpg" width=1295 height=90 style="Position:Absolute; left:0%;
top:180%"></div>
586 <table width="80%" hight="8%" style="Position:Absolute; left:20%; top:182%">
587 <tr>
588 <td>
589 <center><i style="Position:Absolute; left:12%; top:0%"><b>Copyright 2016 -
Instituto Tecnológico Superior "Nuestra Señora del Rosario"</b></i></center>
590 </td>
591 </tr>
592 <tr>
593 <td>
594 <center><i style="Position:Absolute; left:0%; top:300%"><b>Dirección: 9 de
Octubre y Eugenio Espejo fono: 07-2677024 / 07-2677929
Email:rosaristascatamayo@gmail.com</b></i></center>
595 </td>
596 </tr>
597 <tr>
598 <td>
599 <center><i style="Position:Absolute; left:28%; top:600%"><b>Catamayo - Loja -
Ecuador</b></i></center>
600 </td>
601 </tr>
56

602 </table>
603 </body>
604 </html>
CÓDIGO DE LA INTERFAZ PARA REGISTRAR SUGERENCIA
1 <%--
2 Document : Sugerencias
3 Created on : 28/06/2016, 1:00:26
4 Author : carmita
5 --%>
6
7 <%@page import="java.util.List"%>
8 <%@page import="Modelo.Registro_Egresado"%>
9 <%@page import="Control.cls_Egresado"%>
11 <!DOCTYPE html>
12 <html>
13 <head>
16
17 <%--Colocar el icono a la pagina--%>
19
22 .boton{
23 font-size:16px;
26 color:black;
28 width:120px;
29 height:37px;
30 border:#04B404;
33 }
34 </style>
37 .boton1{
38 font-size:16px;
41 color:black;
43 width:60px;
44 height:16px;
45 border:#04B404;
57

48 }
49 </style>
50
51 <%--Estilo para diseñar el menú de la página de sugerencias--%>
53 * {
54 margin:0px;
55 padding:0px;
56 }
57
58 #header {
59 margin:auto;
60 width:900px;
62 }
63
64 ul, ol {
65 list-style:none;
66 }
67
68 .nav > li {
69 float:left;
70 }
71
72 .nav li a {
74 color:#000;
77 display:block;
78 }
79
82 }
83
84 .nav li ul {
85 display:none;
87 min-width:100px;
88 }
89
91 display:block;
92 }
93
94 .nav li ul li {
96 }
97
99 right:-200px;
100 top:0px;
58

101 }
102 </style>
103
104 <%--Estilo para validar numeros--%>
105 <script>
106 function verif(n){
107 permitidos=/[^0-9.]/;
108 if(permitidos.test(n.value)){
109 alert("Solo se puede ingresar números");
110 n.value="";
111 n.focus();}}
112 </script>
113
114 <%--Estilo para validar el copiar informacion--%>
115 <script language="Javascript" type="text/javascript">
117 </script>
118
119 <%--Estilo para valiar letras--%>
121 function validar(e) { // 1
122 tecla = (document.all) ? e.keyCode : e.which;
123 if (tecla==8) return true;
124 patron =/[A-Za-zs]/;
125 te = String.fromCharCode(tecla);
126 return patron.test(te); }
127 </script>
128
129 <%--Estilo para vlidar las cajas de texto vacias--%>
130 <script>
131 function validaVacio(){
132 if(document.form.Nombre.value==""){
133 alert("Ingrese su Nombre");
134 form.Nombre.focus();
135 return false;}
136 if(document.form.Apellido.value==""){
137 alert("Ingrese su Apellido");
138 form.Apellido.focus();
139 return false;}
140 if(document.form.Fecha.value==""){
141 alert("Ingrese su Fecha");
142 form.Fecha.focus();
143 return false;}
144 if(document.form.Destino.value==""){
145 alert("Ingrese su Destino");
146 form.Destino.focus();
147 return false;}
148 if(document.form.Asunto.value==""){
149 alert("Ingrese su Asunto");
150 form.Asunto.focus();
151 return false;}
152 if(document.form.Mensaje.value==""){
153 alert("Ingrese su Mensaje");
154 form.Mensaje.focus();
59

155 return false;}
156 return true;
157 }
158 </script>
159
160 </head>
162 <%--Estilo para diseñar el menú de la página de sugerencias--%>
163 <div style="position: relative;">
165 <ul class="nav">
166
167 <li><a href="EGRESADO.jsp">Inicio</a></li>
168
169 <li><a href="">Datos</a>
170 <ul>
171 <li><a href="">Egresados</a>
172 <ul>
173 <li><a href="Matriz_TrabajoActual.jsp">Datos Trabajo Actual</a></li>
174 <li><a href="Matriz_Sugerencia2.jsp">Sugerencias</a></li>
175 </ul>
176 </li>
177 </ul>
178 </li>
179
181 <ul>
182 <li><a href="">Egresados</a>
183 <ul>
184 <li><a href="Matriz_EgresadoN2.jsp">Datos Personales</a></li>
185 <li><a href="REGISTRO_DATOSTRABAJO.jsp">Datos de
Trabajo</a></li>
186 <li><a href="Matriz_DatosAcademicosN2.jsp">Datos
187 </ul>
188 </li>
189 </ul>
190 </li>
191
193 <ul>
Parametro</a></li>
195 </ul>
196 </li>
197
199 <ul>
200 <li><a href="Sugerencias.jsp">Registar</a></li>
201 </ul>
202 </li>
203
205 </ul>
60

206 </div>
207 </div>
208
209 <%--Coigo para colocar una imagen como banner--%>
210 <img alt="img0" src="img/RS.jpg" width=1311 height=220 style="Position:Absolute;
left:0%; top:0%">
211 <hr color="#088A08" width="95%" hight="10%" style="Position:Absolute; left:2%;
top:55%;">
top:56%;">
top:124%;">
top:125%;">
top:32%;">
216
217 <%--Código para el diseño del fieldset para ingresar datos--%>
218 <form name="form" id="form" method="post" action="sugerencias" onsubmit="if
(validaVacio()) { return comprueba(); }; return false">
220 <tr>
221 <td>
222 <fieldset >
COLOR="red">Registrar de Sugerencia</font></legend>
224 <dl></br>
225 <label for="Nombre">   <b><i>Nombre:(*)</i></b>
226   <select name="Nombre" id="combo" style="width:200px;">
227 <option value="0">Seleccione...</option>
228 <%
229 int x=0;
230 List<cls_Egresado> estudiante=Registro_Egresado.MostrarEstudiante();
231 for(x=0;x<estudiante.size();x++){
232 %>
233 <option value="<%=estudiante.get(x).getNombre()%>">
234 <%=estudiante.get(x).getNombre()%>
235 </option>
236 <%
237 }%>
238 </select>
239 <br/><br/>
240 <label for="Apellido">   <b><i>Apellido:(*)</i></b>
241   <select name="Apellido" id="combo" style="width:200px;">
242 <option value="0">Seleccione...</option>
243 <%
244 x=0;
245
246 for(x=0;x<estudiante.size();x++){
247 %>
248 <option value="<%=estudiante.get(x).getApellido() %>">
249 <%=estudiante.get(x).getApellido() %>
250 </option>
61

251 <%
252 }%>
253 </select>
254
255 <br/><br/>
256 <label for="Fecha">   <b><i>Cedula:(*)</i></b>
257 </label><input type="text" name="Fecha" id="nombre" size="36" style="margin-
left:3%; width:260px; margin-bottom:8px;" maxlength="11" onKeyup="verif(this)"
onblur="verif(this)" oncopy="return false;" onpaste="return false;" oncut="return false;"/>
258 <br/><br/>
259 </dl>
260 </fieldset>
261 <br/>
262 </td></tr>
263 </table>
264
265
266
268 <tr>
269 <td>
270 <fieldset>
COLOR="red">Destinatario</font></legend>
272 <dl>
273 </br>
274    <b><i>Para:(*)</i></b><select name="Destino" id="estado_civil"
style="margin-left:4%; width:160px; margin-bottom:8px;">
275 <option name=Usuario value=0>Seleccione</option>
276 <option name=Usuario value=Administrador>Administrador</option>
277 <option name=Usuario value=Secretaria>Secretaria</option>
278 </select>
279 <br/><br/>
280 <label for="Asunto">   <b><i>Asunto:(*)</i></b></label>
281 <input type="text" name="Asunto" id="nombre" size="36" style="margin-left:1%;
width:260px; margin-bottom:8px; text-transform:uppercase;" maxlength="20"
onkeypress="return validar(event)" oncopy="return false;" onpaste="return false;"
oncut="return false;"/>
282 <br/><br/>
283 <label for="Mensaje">  <b><i>Descripción:(*)</i></b></label>
<br/>
284 <textarea name="Mensaje" id="descripcion" cols="60" rows="10"
maxlength="55" onkeypress="return validar(event)" style="text-transform:uppercase;"
oncopy="return false;" onpaste="return false;" oncut="return false;" ></textarea>
285 <br/><br/><br/>
286 <input type="submit" value="Enviar" name="btnEnviar" class="boton"
style="box-shadow: 0px 0px 18px 0; height:36px; border-radius: 19px; border-radius: 15px;
Position:Absolute; left:3%; top:86%; cursor:pointer"/>
287 <br/>
288 </dl></fieldset>
289
290 </td>
291 </tr></table>
62

292
293
297
298
top:151%"></div>
301 <tr>
302 <td>
304 </td>
305 </tr>
306 <tr>
307 <td>
309 </td>
310 </tr>
311 <tr>
312 <td>
314 </td>
315 </tr>
316 </table>
317 </form>
318 </body>
319 </html>
CÓDIGO PARA GENERAR REPORTES
1 <%--
2 Document : ReporteGeneral
3 Created on : 08/08/2016, 18:37:58
4 Author : carmita
5 --%>
6
7 <%@page import="Modelo.Registro_Egresado"%>
8 <%@page import="Control.cls_Egresado"%>
11 <!DOCTYPE html>
12 <html>
13 <head>
63

16
18 <script language="Javascript">
20 </script>
22 .boton{
23 font-size:16px;
26 color:black;
28 width:150px;
29 height:40px;
30 border:#04B404;
33 }
34 </style>
35
36
37
38 </head>
39
40 <body>
41
42 <img alt="img0" src="img/SUGERENCIA.jpg" width=1311 height=220
43 <hr color="#B40404" width="100%" hight="10%" style="Position:Absolute; left:0%;
top:31%;">
44
45
46 <form name="form" method="post" action="reporte_general" target="_blank">
48 <tr>
49 <td>
50 <fieldset>
COLOR="red">REPORTE EGRESADO</font></legend>
52 <dl></br>
53
54 <img alt="img0" src="img/egresado.png" width=170 height=165
55 <input type="submit" name="visualizar" value="Generar PDF" class="boton"
style="Position:Absolute; left:28%; top:78%;">
56
57 </br></br></br></br>
58 </br></br></br></br>
59 </br></br></br></br>
60 </dl>
61 </fieldset>
62 </td>
64

63 </tr>
64 </table>
65 </form>
66
67 <form name="form" method="post" action="repor_graduado" target="_blank">
69 <tr>
70 <td>
71 <fieldset>
COLOR="red">REPORTE GRADUADO</font></legend>
73 <dl></br>
74
75 <img alt="img0" src="ig/student.png" width=170 height=165
77
78 </br></br></br></br>
79 </br></br></br></br>
80 </br></br></br></br>
81 </dl>
82 </fieldset>
83 </td>
84 </tr>
85 </table>
86 </form>
87
88 <form name="form" method="post" action="repor_dirproyecto" target="_blank">
90 <tr>
91 <td>
92 <fieldset>
COLOR="red">REPORTE DIRECTOR PROYECTO</font></legend>
94 <dl></br>
95
96 <img alt="img0" src="img/director.png" width=170 height=165
98
99 </br></br></br></br>
100 </br></br></br></br>
101 </br></br></br></br>
102 </dl>
103 </fieldset>
104 </td>
105 </tr>
106 </table>
107 </form>
108
65

109
113
114
top:126%"></div>
117 <tr>
118 <td>
120 </td>
121 </tr>
122 <tr>
123 <td>
125 </td>
126 </tr>
127 <tr>
128 <td>
130 </td>
131 </tr>
132 </table>
133 </body>
134 </html>
135
CÓDIGO PARA LA MATRIZ DE SUGERENCIAS
1 <%--
2 Document : Matriz_Sugerencias
3 Created on : 14/07/2016, 9:28:49
4 Author : carmita
5 --%>
6
8 <%@page import="Modelo.Registro_Sugerencia"%>
9 <%@page import="Control.cls_Sugerencia"%>
11 <!DOCTYPE html>
12 <html>
13 <head>
66

17
18 <%--Estilo para crear un boton--%>
20 .boton{
21 font-size:16px;
24 color:black;
25
26 width:160px;
27 height:42px;
28 border:#04B404;
31 background-image:url(img/bus3.png);
33 height:35px;
34 width:80px;
36 </style>
37
38 <%--Estilo para crear un menu--%>
40 * {
41 margin:0px;
42 padding:0px;
43 }
44
45 #header {
46 margin:auto;
47 width:900px;
49 }
50
51 ul, ol {
52 list-style:none;
53 }
54
55 .nav > li {
56 float:left;
57 }
58
59 .nav li a {
61 color:#000;
64 display:block;
65 }
66
67

Ingenierira sw

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Ingenierira sw

Ähnlich wie Ingenierira sw (20)

Mehr von Carmen Benites

Mehr von Carmen Benites (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Ingenierira sw