You are on page 1of 99

Treball fi de carrera

ENGINYERIA TCNICA EN
INFORMTICA DE SISTEMES
Facultat de Matemtiques
Universitat de Barcelona

FORMULARIS WEB PER INSCRIPCIONS A


UN EVENT
Achraf El Imrani

Directors: Nria Fagella Rabionet i


Jaume Timoneda Salat
Realitzat a: Departament de Matemtica
Aplicada i Anlisi. UB
Barcelona, 15 de setembre de 2010

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

NDICE
Captulo 1: Introduccin ....................................................................................................... 3
1 Introduccin .............................................................................................................. 4
1.1. Objetivos ............................................................................................................ 4
1.2. Justificacin ....................................................................................................... 5
Captulo 2: Planificacin y requerimientos ........................................................................... 6
2 Planificacin inicial .................................................................................................... 7
3 Especificaciones ....................................................................................................... 8
3.1. Requerimientos funcionales del proyecto: ......................................................... 8
3.2. Requerimientos no funcionales del proyecto: .................................................... 9
3.2.1. Instalacin de la herramienta Web ............................................................. 9
3.2.2. Uso de la aplicacin: ................................................................................... 9
3.3. Otros requerimientos: ........................................................................................ 9
Captulo 3: Anlisis y especificacin .................................................................................. 10
4 Evaluacin tecnolgica ........................................................................................... 11
4.1. Lenguaje de programacin .............................................................................. 11
4.1.1. Lenguaje HTML ........................................................................................ 12
4.1.2. Lenguaje Javascript .................................................................................. 13
4.1.3. Lenguaje PHP........................................................................................... 13
4.1.4. Lenguaje ASP ........................................................................................... 15
4.1.5. Lenguaje ASP.NET ................................................................................... 15
4.1.6. Lenguaje JSP ........................................................................................... 16
4.1.7. Lenguaje Python ....................................................................................... 17
4.1.8. Lenguaje Ruby.......................................................................................... 18
5 Sistema gestor de Bases de datos.......................................................................... 19
5.1. Ventajas MySQL .............................................................................................. 19
5.2. Ventajas adicionales MySQL ........................................................................... 20
6 Servidor Web .......................................................................................................... 21
6.1. Ventajas Apache .............................................................................................. 22
7 Servidor de correo................................................................................................... 23
8 Anlisis conceptual ................................................................................................. 25
8.1. Modelo entidad-relacin ................................................................................... 25
8.2. Casos de uso ................................................................................................... 27
8.2.1. Modelo de casos de uso ........................................................................... 27
8.2.2. Descripcin casos de uso ......................................................................... 29
8.2.2.1. Crear cuenta ........................................................................................ 29
8.2.2.2. Registrar datos ..................................................................................... 29
8.2.2.3. Iniciar sesin ........................................................................................ 30
8.2.2.4. Contactar con la administracin ........................................................... 30
8.2.2.5. Modificar datos ..................................................................................... 30
8.2.2.6. Visualizar datos e imprimirlos .............................................................. 31
8.2.2.7. Modificar credenciales ......................................................................... 31
8.2.2.8. Ver todos los datos .............................................................................. 31
8.2.2.9. Modificar parmetros Web ................................................................... 32
8.2.2.10. Modificar datos de un grupo ............................................................... 32
8.2.2.11. Generar documento XLS ................................................................... 32
8.2.2.12. Realizar consulta SQL ....................................................................... 33
1

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

8.2.2.13. Realizar backup ................................................................................. 33


8.2.2.14. Salir de la herramienta ....................................................................... 33
9 Arquitectura del diseo de la aplicacin .................................................................. 34
Captulo 4: Diseo ............................................................................................................. 36
10
Diseo de la herramienta Web ............................................................................ 37
10.1.
Diseo del formulario Web ........................................................................... 39
10.2.
Diseo del Panel de Control del usuario ...................................................... 44
10.3.
Diseo del Panel de Control del administrador ............................................ 46
Captulo 5: Implementacin y pruebas............................................................................... 47
11
Tecnologas utilizadas y performance ................................................................. 48
11.1.
Navegador Web ........................................................................................... 48
12
Implementacin ................................................................................................... 49
12.1.
Archivos creados y desarrollo de la aplicacin ............................................. 49
12.2.
Uso de los principales archivos .php ............................................................ 52
12.3.
Tablas de la Base de Datos ......................................................................... 55
13
Testeo de la aplicacin ........................................................................................ 58
13.1.
La importancia de la deteccin oportuna ...................................................... 58
13.2.
Pruebas de stress ........................................................................................ 59
Captulo 6: Manuales ......................................................................................................... 63
14
Manual Usuario ................................................................................................... 64
15
Manual Administrador.......................................................................................... 80
16
Gua de instalacin .............................................................................................. 91
16.1.
Configuracin APACHE................................................................................ 91
16.2.
Configuracin PHP ....................................................................................... 92
16.3.
Instalar MySQL............................................................................................. 92
16.4.
Tratamiento de grficos ................................................................................ 93
16.5.
Seguridad ..................................................................................................... 93
16.6.
phpMyAdmin ................................................................................................ 93
Captulo 7: Valoracin personal ......................................................................................... 95
17
Valoracin personal ............................................................................................. 96
Bibliografa ......................................................................................................................... 97

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 1: Introduccin

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

1 Introduccin
El principal objetivo de este Proyecto de Fin de Carrera es la implementacin de una
pgina Web que facilite el registro de centros para acudir a conferencias. La pgina Web
tiene que ser capaz de gestionar todo el proceso de inscripcin y proveer tanto al usuario
como al administrador de las herramientas adecuadas para realizar las diferentes
gestiones que puedan surgir como consecuencia del registro: Modificacin de datos,
realizacin de backups, configuracin de la Web, etc.
El proyecto va a constar de 7 captulos. En el captulo primero, a excepcin de este
apartado, se dar una breve introduccin sobre el objetivo principal del proyecto y sobre
las nuevas necesidades que vienen como consecuencia de la implementacin de la
pgina Web, adems de ofrecer una visin general de las principales razones.
Por otra parte, en el segundo captulo, se estudiar la planificacin inicial del trabajo a
realizar. Esto nos dar unas pautas y unas directrices del tiempo que se debe destinar a
cada tarea, este tiempo es muy objetivo puesto que lo que una persona calcula que lo
realizara en 5 das otra lo puede realizar en 2.
En el captulo tercero, se analizan las diferentes opciones tecnolgicas disponibles y se
especifican los lenguajes de programacin, el Sistema Gestor de Base de Datos, el
servidor Web, entre otros requerimientos funcionales de la pgina Web. Adems, se
abordar el diseo conceptual de la pgina Web para especificar y documentar cada una
de las partes que formarn la misma.
En el captulo cuarto se determinar el diseo de la interfaz Web estudiando las diferentes
alternativas para disear la misma teniendo en cuenta que ha de ser una interfaz Web
intuitiva tanto para el usuario como para el administrador.
En el captulo antepenltimo, el captulo cinco, se definirn las diferentes
implementaciones para cada una de las partes de la pgina Web y se hablar de las
partes vitales de la misma, adems, se realizarn pruebas stress para estudiar la
eficiencia de la pgina Web. Adems, en el captulo penltimo, el captulo 6, se mostrarn
los distintos manuales disponibles para la pgina Web: Manual usuario, Manual
administrador y una gua de instalacin.
Finalmente, en el ltimo captulo, el captulo 7, veremos una valoracin personal tras
realizar el proyecto y las conclusiones que he sacado del mismo.

1.1.

Objetivos

El principal objetivo de este proyecto ha sido el de poder registrar los datos de un cliente
que desea acudir a una charla. El perfil de este cliente es la de un educador/profesor/tutor
que desea que sus alumnos asistan a esta charla. Por lo cual, debera indicar cuntas
personas asistiran (nmero total de alumnos), qu niveles de estudios disponen las
mismas, a qu charla desea asistir, etc. Adems, ste podra reflejar alguna opinin u
4

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

opcin no contemplada en el registro mediante un comentario que ser llegado al


administrador, que es la persona que administra las charlas.
A medida que el proyecto fue avanzando, han ido surgiendo cuestiones como la de cmo
un cliente puede hacer llegar al administrador que no puede finalmente asistir a la charla o
cmo el cliente puede actualizar datos que pueden variar despus del registro (tales como
nmero de alumnos, persona responsable, etc.).
En consecuencia, aparece el concepto de sesin. Es importante identificar una sesin que
identifica un cliente y de esta forma tener acceso a sus datos para poder jugar con los
mismos: Desde modificar el nmero de alumnos, nmeros de telfono, persona de
contacto, etc.
Adems, tambin va Web, puede enviar una notificacin al administrador para hacerle
ver algn comentario, entre otras gestiones. (Imprimir datos, cerrar sesin, cambiar
credenciales, etc.).
Tambin surge el concepto de administrador, pues ste es quien administra las charlas
por lo que debe tener el criterio para poder confirmar las asistencias para hacer llegar esta
confirmacin a estos clientes.
Adems, debera tambin poder modificar datos en caso de que un cliente tenga alguna
incidencia y no pueda hacerlo l mismo, de modificar tambin parmetros Web, etc. Y
siempre enfocndolo desde el punto en el que el administrador es una persona que no
tiene conocimientos informticos y que, por tanto, debe guiarse por una interfaz Web
apropiada.
El principal objetivo ha sido el de facilitar a los dos roles, tanto al cliente como al
administrador, la gestin de los datos que el cliente (o usuario) ha registrado.

1.2.

Justificacin

El hecho de dar el paso de pgina Web (o, mejor dicho, formulario Web) a herramienta
Web ha sido porque considero que a estas alturas, en lo que se refiere a los lenguajes de
programacin, nos encontramos con numerosas posibilidades y facilidades tecnolgicas
que posibilitan este tipo de herramientas. Quizs, aos atrs, esto hubiera sido ms
complejo de lo que es, obviamente, todo tiene su complejidad, pero si la tecnologa nos
brinda de la oportunidad de hacer las cosas mejor y de forma ms simple, creo que no
podemos dar la espalda a esto y es por ello que decid no slo crear un formulario Web
sino a retarme a usar todo lo que est al alcance de mi mano para crear lo que yo
denomino herramienta Web.

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 2: Planificacin y
requerimientos

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

2 Planificacin inicial
El factor tiempo es un factor muy importante a tener en cuenta, la planificacin inicial del
trabajo a realizar nos marca las franjas aproximadas del tiempo que debemos consumir
para una determinada fase del proyecto.
A groso modo, deber disear e implementar la pgina Web, as como documentar todo
lo que est haciendo en ese momento.
El diseo es un aspecto muy importante, crear una pgina Web que est dotada de una
interfaz nada compleja y que haga que el usuario (y tambin el administrador) intuyan lo
que hace cada parte de la pgina Web (o Herramienta Web, como me gusta llamarlo) es
muy importante y la dedicacin para este aspecto es muy alta. Aproximadamente, de
unos 30 das. Considerando que en funcin de lo que implemente variar tambin el
diseo, pueden ser ms. La implementacin tambin es un campo que acoger mucho
tiempo, y es que aproximadamente se requerirn de unos 60 das (2 meses) para poder
programar y optimizar todo el proyecto, considerando que hay muchos aspectos a tener
en cuenta para que ningn detalle no se tenga en cuenta.
La fase de betatesting, durar unos 10 das, y con la colaboracin de usuarios
simularemos la interaccin que debe tener este proyecto y as determinar si realmente se
ha conseguido lo solicitado.
Documentar es una parte importantsima, puede ocupar perfectamente todo el periodo del
proyecto, ya que, a medida que avanzamos, tengo que documentar.
Por tanto:
Las tareas a realizar de un modo global son las siguientes:




Bsqueda y aprendizaje de las tecnologas a utilizar.


Diseo y desarrollo de la pgina Web
Programacin y documentacin del proyecto.

Profundizando un poco ms podemos detallar estos apartados en:


Bsqueda e informacin de las tecnologas a usar  10 das
Diseo  30 das
Implementacin  60 das
Implantacin  2das
Testeo  10 das
Documentacin  25 das

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

60
50
40
30
20
10
0

TOTAL Estimado 137 das


Se considera que:





Los das tienen 8 horas de trabajo.


Las semanas tienen 5 das de trabajo
No se contabilizan fiestas ni puentes.
El aprendizaje de las tecnologas a utilizar se contabiliza en el primer punto y se
tiene en cuenta el posterior perfeccionamiento y mejora en el punto de la
implementacin.

3 Especificaciones
Determinar qu caractersticas tendr el proyecto es un aspecto importante para tener en
cuenta de cara al producto final para concluir si ste se ajusta a las prestaciones que
detallar a continuacin.

3.1.

Requerimientos funcionales del proyecto:










Registro de datos de un usuario (charla que quiere asistir, nmero de


alumnos, etc.).
Creacin de cuenta de un usuario
Consultar datos de usuario
Notificar al administrador de posibles incidencias
Salir de forma segura de la herramienta Web
Cambiar datos de un usuario y/o administrador
Cambiar parmetros Web (ao, fechas, charlas, etc.).
8

Proyecto Final de Carrera









3.2.

Formularios Web para inscripciones a un evento

Permitir configurar de forma dinmica la base de datos


Portabilidad de la herramienta Web.
Backup de la base de datos.
Visualizar consultas predeterminadas.
Posibilidad de realizar consultas complejas.
Cambiar credenciales de acceso y perfiles.
Generar hoja de clculo para que el administrador determine quien puede
asistir a una charla y quien deber asistir a otra

Requerimientos no funcionales del proyecto:

Los requerimientos no funcionales determinan los requisitos necesarios a la hora de


instalar la herramienta Web, requisitos para poder usar la herramienta Web y otros
requerimientos indispensables.
3.2.1. Instalacin de la herramienta Web
Se necesitar lo siguiente para poder instalar de forma ptima la herramienta Web:







Un ordenador con sistema Linux (preferiblemente). Su uso en otras


plataformas tambin es compatible (portabilidad).
Conexin a Internet (preferiblemente de banda ancha).
Un navegador Web. Se recomienda el uso de Mozilla Firefox aunque
tambin se pueden usar los dems navegadores que hay en el mercado.
Tener instalado el servidor Web Apache 2.
Tener instalado PHP en su versin 5 superior.
Tener instalado MySQL en su versin 4 superior.

3.2.2. Uso de la aplicacin:


Para poder usar la herramienta Web, se necesitar lo siguiente:




3.3.

Un ordenador con capacidad para navegacin Web (es decir, que el


rendimiento del mismo sea ptimo para navegar en Internet).
Conexin a Internet.
Un navegador Web (preferiblemente Mozilla Firefox).

Otros requerimientos:




Interfaz grfica intuitiva.


Buen rendimiento.
Acceso
a
las
diferentes

funcionalidades

con

facilidad.

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 3: Anlisis y especificacin

10

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

4 Evaluacin tecnolgica
Materializar el proyecto ha sido una misin algo compleja ya que para edificar los pilares
del mismo he tenido que enfrentarme a unas cuantas decisiones importantes que
marcaran y modelaran el proyecto hasta llegar a lo que es.
Entre estas decisiones, se encuentra la del lenguaje de programacin. Es importante
hacer una eleccin correcta en lo que se refiere al lenguaje de programacin, pues hay
muchos lenguajes en la actualidad, unos estn ms especializados en un campo y otros
lo estn en otros. A nivel de pgina Web, el lenguaje HTML (HyperText Markup
Language) iba a formar un papel importante pero no el ms importante.
Hay que decir que HTML no es un lenguaje de programacin como lo es, por ejemplo,
Java, C, Delphi, etc. HTML es un sistema de cdigos que permite crear pginas Web.
Ms adelante profundizar sobre el mismo.
El lenguaje de programacin adecuado para este proyecto es aquel que fuera orientado a
pginas Webs y que pudiera convivir con HTML sin problemas, de forma integrada, que
fuera capaz de procesar de forma dinmica los datos que se le estn siendo transmitidos.
Adems, debera ser capaz de crear cdigo HTML, pues los navegadores Web es lo que
al fin y al cabo interpretan.
Por otra parte, surge un concepto importante por la necesidad de almacenar los datos que
el usuario (o cliente) enva. Esto es, el concepto de Base de datos. Es importante contar
con un Gestor de Base de datos ya que debemos conservar los datos del cliente, adems
de operar con los mismos, realizar cualquier tipo de gestin en estos datos.
Al ser una pgina Web, si consideramos que necesitamos toda la arquitectura necesaria
para servir esta pgina Web, es muy importante tambin contar con un servidor Web,
capaz de servir esta herramienta Web a aquellos que la necesiten. Es importante que,
adems, este servidor Web interprete correctamente el cdigo de programacin y lo
codifique en HTML sin problema alguno.
El diseo tambin es importante y es por ello que tambin opt por poder modelar la
pgina Web de la forma ms simple posible, contando con uno de los mejores y ms
exitosos cdigos para el diseo. Evitando que el administrador finalmente tuviera que
mirar el cdigo Web para modelar la pgina.

4.1.

Lenguaje de programacin

Voy a nombrar las opciones que actualmente disponemos y decir el porqu la eleccin del
lenguaje elegido.

11

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Actualmente existen diferentes lenguajes de programacin para desarrollar en la Web,


estos han ido surgiendo debido a las tendencias y necesidades de las plataformas.
Desde los inicios de Internet, fueron surgiendo diferentes demandas por los usuarios y se
dieron soluciones mediante lenguajes estticos. A medida que paso el tiempo, las
tecnologas fueron desarrollndose y surgieron nuevos problemas a dar solucin. Esto dio
lugar a desarrollar lenguajes de programacin para la Web dinmicos, que permitieran
interactuar con los usuarios y utilizaran sistemas de Bases de Datos

4.1.1. Lenguaje HTML


Tal y como he dicho anteriormente, HTML no es un lenguaje de programacin, an as,
creo que es importante saber qu es realmente HTML y por qu es tan importante.
Desde el surgimiento de Internet se han publicado sitios Web gracias al lenguaje HTML.
Es un lenguaje esttico para el desarrollo de sitios Web (acrnimo en ingls de HyperText
Markup Language, en espaol Lenguaje de Marcas Hipertextuales). Desarrollado por el
World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm,
html).
Sintaxis:
<html> (Inicio del documento HTML)
<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>
<b> </b> Negrita
<p> </p> Definir parrafo
<etiqueta> Apertura de la etiqueta
</etiqueta> Cierre de la etiqueta
Ventajas:
 Sencillo que permite describir hipertexto.
 Texto presentado de forma estructurada y agradable.
 No necesita de grandes conocimientos cuando se cuenta con un editor de
pginas web o WYSIWYG.
 Archivos pequeos.
 Despliegue rpido.
 Lenguaje de fcil aprendizaje.
 Lo admiten todos los exploradores.
Desventajas:
12

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

 Lenguaje esttico.
 La interpretacin de cada navegador puede ser diferente.
 Guarda muchas etiquetas que pueden convertirse en basura y dificultan la
correccin.
 El diseo es ms lento.
 Las etiquetas son muy limitadas.

4.1.2. Lenguaje Javascript


Este es un lenguaje interpretado, no requiere compilacin. Fue creado por Brendan Eich
en la empresa Netscape Communications. Utilizado principalmente en pginas Web. Es
similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de
herencias. La mayora de los navegadores en sus ltimas versiones interpretan cdigo
Javascript.
El cdigo Javascript puede ser integrado dentro de nuestras pginas Web. Para evitar
incompatibilidades el World Wide Web Consortium (W3C) diseo un estndar
denominado DOM (en ingls Document Object Model, en su traduccin al espaol Modelo
de Objetos del Documento).
Sintaxis:
<script type="text/javascript"> ... </script>
Ventajas:
 Lenguaje de scripting seguro y fiable.
 Los script tienen capacidades limitadas, por razones de seguridad.
 El cdigo Javascript se ejecuta en el cliente.
Desventajas:
 Cdigo visible por cualquier usuario.
 El cdigo debe descargarse completamente.
 Puede poner en riesgo la seguridad del sitio, con el actual problema llamado
XSS (significa en ingls Cross Site Scripting renombrado a XSS por su
similitud con las hojas de estilo CSS).

4.1.3. Lenguaje PHP


Es un lenguaje de programacin utilizado para la creacin de sitio
Web. PHP es un acrnimo recursivo que significa PHP Hypertext
Pre-processor, (inicialmente se llam Personal Home Page).
Surgi en 1995, desarrollado por PHP Group.
PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la
generacin de pginas Web dinmicas, embebidas en pginas HTML y ejecutadas en el
13

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento


necesita tener instalado Apache o IIS con las libreras de PHP. La mayor parte de su
sintaxis ha sido tomada de C, Java y Perl con algunas caractersticas especficas. Los
archivos cuentan con la extensin (php).
Sintaxis:
La sintaxis utilizada para incorporar cdigo PHP es la siguiente:
<?
$mensaje = Hola;
hecho $mensaje;
?>
Tambin puede usarse:
<?php
$mensaje = Hola;
hecho $mensaje;
?>
Ventajas:
 Muy fcil de aprender.
 Se caracteriza por ser un lenguaje muy rpido.
 Soporta en cierta medida la orientacin a objeto. Clases y herencia.
 Es un lenguaje multiplataforma: Linux, Windows, entre otros.
 Capacidad de conexin con la mayora de los manejadores de base de datos:
MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
 Capacidad de expandir su potencial utilizando mdulos.
 Posee documentacin en su pgina oficial la cual incluye descripcin y
ejemplos de cada una de sus funciones.
 Es libre, por lo que se presenta como una alternativa de fcil acceso para todos.
 Incluye gran cantidad de funciones.
 No requiere definicin de tipos de variables ni manejo detallado del bajo nivel.
Desventajas:
 Se necesita instalar un servidor Web.
 Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser ms
ineficiente a medida que las solicitudes aumenten de nmero.
 La legibilidad del cdigo puede verse afectada al mezclar sentencias HTML y PHP.
 La programacin orientada a objetos es an muy deficiente para aplicaciones
grandes.
Seguridad:
PHP es un poderoso lenguaje e intrprete, ya sea incluido como parte de un servidor Web
en forma de mdulo o ejecutado como un binario CGI separado, es capaz de acceder a
14

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

archivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades


hacen que cualquier cosa que sea ejecutada en un servidor Web sea insegura por
naturaleza.
PHP est diseado especficamente para ser un lenguaje ms seguro para escribir
programas CGI que Perl o C, y con la seleccin correcta de opciones de configuracin en
tiempos de compilacin y ejecucin, y siguiendo algunas prcticas correctas de
programacin.

4.1.4. Lenguaje ASP


Es una tecnologa del lado de servidor desarrollada por Microsoft para el desarrollo de
sitio Web dinmicos. ASP significa en ingls (Active Server Pages), fue liberado por
Microsoft en 1996. Las pginas Web desarrolladas bajo este lenguaje es necesario tener
instalado Internet Information Server (IIS).
ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden
utilizar para crear pginas ASP. El ms utilizado es VBScript, nativo de Microsoft. ASP se
puede hacer tambin en Perl and Jscript (no JavaScript). El cdigo ASP puede ser
insertado junto con el cdigo HTML. Los archivos cuentan con la extensin (asp).
Sintaxis:
<% %>
Ventajas:
 Usa Visual Basic Script, siendo fcil para los usuarios.
 Comunicacin ptima con SQL Server.
 Soporta el lenguaje JScript (Javascript de Microsoft).
Desventajas:





Cdigo desorganizado.
Se necesita escribir mucho cdigo para realizar funciones sencillas.
Tecnologa propietaria.
Hospedaje de sitios Web costosos.

4.1.5. Lenguaje ASP.NET


Este es un lenguaje comercializado por Microsoft, y usado por programadores para
desarrollar entre otras funciones, sitios Web. ASP.NET es el sucesor de la tecnologa
ASP, fue lanzada al mercado mediante una estrategia de mercado denominada .NET.
El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP.
Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de
ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensin
(aspx). Para su funcionamiento de las pginas se necesita tener instalado IIS con el
15

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitar
instalarlo en versiones anteriores.
Sintaxis:
Ventajas:








Completamente orientado a objetos.


Controles de usuario y personalizados.
Divisin entre la capa de aplicacin o diseo y el cdigo.
Facilita el mantenimiento de grandes aplicaciones.
Incremento de velocidad de respuesta del servidor.
Mayor velocidad.
Mayor seguridad.

Desventajas:
 Mayor consumo de recursos.

4.1.6. Lenguaje JSP


Es un lenguaje para la creacin de sitios Web dinmicos, acrnimo de Java Server Pages.
Est orientado a desarrollar pginas Web en Java. JSP es un lenguaje multiplataforma.
Creado para ejecutarse del lado del servidor.
JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de
ASP.NET, desarrollado para la creacin de aplicaciones Web potentes. Posee un motor
de pginas basado en los servlets de Java. Para su funcionamiento se necesita tener
instalado un servidor Tomcat.
Sintaxis:
<%= new java.util.Date() %>
Caractersticas:
* Cdigo separado de la lgica del programa.
* Las pginas son compiladas en la primera peticin.
* Permite separar la parte dinmica de la esttica en las pginas web.
* Los archivos se encuentran con la extensin (jsp).
* El cdigo JSP puede ser incrustado en cdigo HTML.
Elementos de JSP
Los elementos que pueden ser insertados en las pginas JSP son los siguientes:
* Cdigo: se puede incrustar cdigo Java.
* Directivas: permite controlar parmetros del servlet.
* Acciones: permite alterar el flujo normal de ejecucin de una pgina.
16

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Ventajas:








Ejecucin rpida del servlets.


Crear pginas del lado del servidor.
Multiplataforma.
Cdigo bien estructurado.
Integridad con los mdulos de Java.
La parte dinmica est escrita en Java.
Permite la utilizacin se servlets.

Desventajas:
 Complejidad de aprendizaje.

4.1.7. Lenguaje Python


Es un lenguaje de programacin creado en el ao 1990 por Guido van Rossum, es el
sucesor del lenguaje de programacin ABC. Python es comparado habitualmente con
Perl. Los usuarios lo consideran como un lenguaje ms limpio para programar. Permite la
creacin de todo tipo de programas incluyendo los sitios Web.
Su cdigo no necesita ser compilado, por lo que se llama que el cdigo es interpretado.
Es un lenguaje de programacin multiparadigma, lo cual fuerza a que los programadores
adopten por un estilo de programacin particular:
* Programacin orientada a objetos.
* Programacin estructurada.
* Programacin funcional.
* Programacin orientada a aspectos.
Sintaxis:
Ejemplo de una clase en Phyton:
def dibujar_muneco(opcion):
if opcion == 1:
C.create_line(580, 150, 580, 320, width=4, fill="blue")
C.create_oval(510, 150, 560, 200, width=2, fill='PeachPuff')
Ventajas:








Libre y fuente abierta.


Lenguaje de propsito general.
Gran cantidad de funciones y libreras.
Sencillo y rpido de programar.
Multiplataforma.
Licencia de cdigo abierto (Opensource).
Orientado a Objetos.
17

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

 Portable.
Desventajas:
 Lentitud por ser un lenguaje interpretado.

4.1.8. Lenguaje Ruby


Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el
1993 por el programador japons Yukihiro Matz Matsumoto. Su sintaxis est inspirada
en Phyton, Perl. Es distribuido bajo licencia de software libre (Opensource).
Ruby es un lenguaje dinmico para una programacin orientada a objetos rpida y
sencilla.
Sintaxis:
puts "hola"
Caractersticas:
* Existe diferencia entre maysculas y minsculas.
* Mltiples expresiones por lneas, separadas por punto y coma ;.
* Dispone de manejo de excepciones.
* Ruby puede cargar libreras de extensiones dinmicamente si el (Sistema Operativo)
lo permite.
* Porttil.
Ventajas:
 Permite desarrollar soluciones a bajo Costo.
 Software libre.
 Multiplataforma.
Analizadas las diferentes opciones, finalmente creo que lo ms conveniente es PHP, tanto
por su capacidad para conectar con la mayora de gestores de bases de datos como por
lo fcil que es aprender y lo eficiente que es, hacen que sea el lenguaje ideal. La
desventaja es que necesitamos instalar un servidor Web para procesar el cdigo PHP,
pero creo que las ventajas pesan mucho ms y la dependencia con un servidor Web
puede ser, a la larga, una ventaja. Ms adelante veremos qu servidor Web usaremos.

18

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

5 Sistema gestor de Bases de datos


Tal y como he dicho en apartados anteriores, PHP tiene una
caracterstica muy ventajosa y es que tiene una gran facilidad para
conectar con la mayora de gestores de bases de datos, tales como
MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server,
Firebird y SQLite.
PHP ofrece interfaces para el acceso a la mayora de las bases de datos, entonces de
esta forma podremos almacenar y acceder a estos datos (se dice que los datos
guardados de esta forma son datos persistentes) a travs de una pgina Web
realizada en PHP.
Esta variedad que nos aporta PHP tambin es a la vez un nuevo reto, pues he de escoger
el Sistema gestor de bases de datos que yo considere adecuado, aunque este reto no es
complejo, ya que la base de datos ms comn para utilizar con PHP es MySql, debido a
que es muy potente, gratuito y se encuentra en la mayora de los servicios de hosting de
pginas webs, por lo que la eleccin que considero adecuada para este proyecto es la de
usar MySQL.

5.1.

Ventajas MySQL

Son muchas las razones para escoger a Mysql como una solucin de misin crtica para
la administracin de datos:
 Costo: Mysql es gratuito para la mayor parte de los usos y su servicio de
asistencia resulta econmico.
 Asistencia: MysqlAB ofrece contratos de asistencia a precios razonables y
existe una nutrida y activa comunidad Mysql.
 Velocidad: Mysql es mucho ms rpido que la mayora de sus rivales.
 Portabilidad: Mysql se ejecuta en la inmensa mayora de sistemas operativos y,
la mayor parte de los casos, los datos se pueden transferir de un sistema a otro
sin dificultad
 Facilidad de uso: Mysql resulta fcil de utilizar y de administrar. Las
herramientas de Mysql son potentes y flexibles, sin sacrificar su capacidad de
uso.
 Funcionalidad: Mysql dispone de muchas de las funciones que exigen los
desarrolladores profesionales, como compatibilidad completa con ACID,
compatibilidad para la mayor parte de SQL ANSI[19], volcados online,
duplicacin, funciones SSL e integracin con la mayor parte de los entornos de
programacin.
.

19

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

.
Mysql utiliza varios tipos de tablas. El tipo de tabla predeterminado es MyISAM que est
optimizado para la velocidad del comando SELECT.
La mayor parte de los sitios Web utilizan esta tabla, ya que estos sitios suelen utilizar
la instruccin SELECT mucho ms que las instrucciones INSERT o UPDATE.

5.2.

Ventajas adicionales MySQL

MySQL ofrece ventajas adicionales que a la larga aportarn eficiencia al proyecto. Entre
estas ventajas, las ms destacadas son:
 Escalabilidad: es posible manipular bases de datos enormes, del orden de seis
mil tablas y alrededor de cincuenta millones de registros, y hasta 32 ndices por
tabla.
 MySQL est escrito en C y C++ y probado con multitud de compiladores y
dispone de APIs para muchas plataformas diferentes.
 Conectividad: es decir, permite conexiones entre diferentes mquinas con
distintos sistemas operativos. Es corriente que servidores Linux o Unix, usando
MySQL, sirvan datos para ordenadores con Windows, Linux, Solaris, etc. Para
ello se usa TCP/IP, tuberas, o sockets Unix.
 Es multihilo, con lo que puede beneficiarse de sistemas multiprocesador.
 Permite manejar multitud de tipos para columnas.
 Permite manejar registros de longitud fija o variable.

La interaccin entre PHP y las base de datos se realiza a travs de herramientas propias
del lenguaje PHP por un lado, y escribiendo los pedidos a la base de datos en un idioma
universal, SQL (Structured Query Language) por otro, que podremos encontrar en todas
las bases de datos.

20

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Tambin existen otros Sistemas Gestores de Bases de Datos que interactan de forma
ptima con PHP.

6 Servidor Web
Todo el grueso del proyecto se ejecuta en un servidor Web.
Un servidor Web es un programa que se ejecuta continuamente en un ordenador,
mantenindose a la espera de peticiones de ejecucin que le har un cliente o un usuario
de Internet.
El servidor Web se encarga de contestar a estas peticiones de forma adecuada,
entregando como resultado una pgina Web o informacin de todo tipo de acuerdo a los
comandos solicitados.
Hay dos situaciones posibles en la que la aplicacin (es decir, el proyecto) se pueda
encontrar ubicado:



En un ordenador personal
En un proveedor de servicios de pginas Web con bases de datos.

En este caso los servidores Apache son la mejor solucin como servidor Web, puesto que
adems de ser de programario libre y de ser la que aplican la mayora de proveedores de
pginas Web, se integra perfectamente con el PHP y tiene muchos mdulos para
extender su funcionalidad.
El servidor HTTP Apache es un servidor Web HTTP de cdigo abierto para plataformas
Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh y otras, que implementa el
protocolo HTTP/1.1[1] y la nocin de sitio virtual. Cuando comenz su desarrollo en 1995
se bas inicialmente en cdigo del popular NCSA HTTPd 1.3, pero ms tarde fue
reescrito por completo. Su nombre se debe a que Behelendorf quera que tuviese la
connotacin de algo que es firme y enrgico pero no agresivo, y la tribu Apache fue la
ltima en rendirse al que pronto se convertira en gobierno de EEUU, y en esos momentos
la preocupacin de su grupo era que llegasen las empresas y "civilizasen" el paisaje que
haban creado los primeros ingenieros de Internet. Adems Apache consista solamente
en un conjunto de parches a aplicar al servidor de NCSA. Era, en ingls, a patchy server
(un servidor "parcheado").
El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache
Software Foundation.
Apache presenta entre otras caractersticas altamente configurables, bases de datos de
autenticacin y negociado de contenido, pero fue criticado por la falta de una interfaz
grfica que ayude en su configuracin.
Apache tiene amplia aceptacin en la red: desde 1996, Apache, es el servidor HTTP ms
usado. Alcanz su mxima cuota de mercado en 2005 siendo el servidor empleado en el
70% de los sitios web en el mundo, sin embargo ha sufrido un descenso en su cuota de
21

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

mercado en los ltimos aos. (Estadsticas histricas y de uso diario proporcionadas por
Netcraft[2] ).
La mayora de las vulnerabilidades de la seguridad descubiertas y resueltas tan slo
pueden ser aprovechadas por usuarios locales y no remotamente. Sin embargo, algunas
se pueden accionar remotamente en ciertas situaciones, o explotar por los usuarios
locales malvolos en las disposiciones de recibimiento compartidas que utilizan PHP
como mdulo de Apache.

6.1.

Ventajas Apache

Modular
Cdigo abierto
Multi-plataforma
Extensible
Popular (fcil conseguir ayuda/soporte)

Apache es usado principalmente para enviar pginas web estticas y dinmicas en la


World Wide Web. Muchas aplicaciones web estn diseadas asumiendo como ambiente
de implantacin a Apache, o que utilizarn caractersticas propias de este servidor web.
Apache es el componente de servidor web en la popular plataforma de aplicaciones
LAMP, junto a MySQL y los lenguajes de programacin PHP/Perl/Python (y ahora
tambin Ruby).
Este servidor web es redistribuido como parte de varios paquetes propietarios de
software, incluyendo la base de datos Oracle y el IBM WebSphere application server. Mac
OS X integra apache como parte de su propio servidor web y como soporte de su servidor
de aplicaciones WebObjects. Es soportado de alguna manera por Borland en las
herramientas de desarrollo Kylix y Delphi. Apache es incluido con Novell NetWare 6.5,
donde es el servidor web por defecto, y en muchas distribuciones Linux.
Apache es usado para muchas otras tareas donde el contenido necesita ser puesto a
disposicin en una forma segura y confiable. Un ejemplo es al momento de compartir
archivos desde una computadora personal hacia Internet. Un usuario que tiene Apache
instalado en su escritorio puede colocar arbitrariamente archivos en la raz de documentos
de Apache, desde donde pueden ser compartidos.
Los programadores de aplicaciones web a veces utilizan una versin local de Apache con
el fin de previsualizar y probar cdigo mientras ste es desarrollado.
Microsoft Internet Information Services (IIS) es el principal competidor de Apache, as
como Sun Java System Web Server de Sun Microsystems y un anfitrin de otras
aplicaciones como Zeus Web Server. Algunos de los ms grandes sitios web del mundo
estn ejecutndose sobre Apache. La capa frontal (front end) del motor de bsqueda
Google est basado en una versin modificada de Apache, denominada Google Web
22

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Server (GWS). Muchos proyectos de Wikimedia tambin se ejecutan sobre servidores


web Apache.

7 Servidor de correo
Uno de los puntos que he querido tener en cuenta es la posibilidad de enviar correos
electrnicos (o notificaciones). El usuario, al registrarse, recibir un correo electrnico con
la confirmacin del registro y, paralelamente, el administrador tambin recibir un email
informndole de la nueva inscripcin.
Adems, puesto que ya contamos con el servicio SMTP operativo, contemplar ms
formas de sacar provhecho (y que sobretodo aporten una utilidad).
El programa (o demonio) SMTP que he usado ha sido Postfix.
Postfix es un Agente de Transporte de Correo (MTA) de cdigo abierto, o lo que es lo
mismo, un programa informtico para el enrutamiento y envo de correo electrnico.
Postfix fue creado como alternativa a sendmail, buscando un servidor que fuera ms
rpido, fcil de administrar y seguro.

Postfix es de echo, el MTA que se usa por defecto en muchos sistemas operativos
derivados de UNIX, entre ellos, GNU/Linux.
Se distrinuye bajo Licencia Pblica IBM v.1.0, que a pesar de ser una licencia de software
libre, resulta incompatible con la Licencia GPL (aunque s lo sea con GPL v1.0).
Fue desarrollado por Wietse Venema durante una estancia en el Centro de Investigacin
Thomas J. Watson de IBM y fue conocido con el nombre de VMailer e IBM Secure Mailer,

23

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

siendo distribuido al gran pblico por primera vez a mediados de 1999. Desde entonces
sigue en proceso de desarrollo y mejora de una forma activa.
Por tanto, si esquematizamos los componentes de nuestro proyecto, obtendramos algo
as:

Como dato curioso, la unificacin de estos elementos recibe el acrnimo LAMP.


El acrnimo 'LAMP' se refiere a un conjunto de subsistemas de software necesarios para
alcanzar una solucin global, en este caso configurar sitios Web o Servidores dinmicos
con un esfuerzo reducido.
En las tecnologas LAMP esto se consigue mediante la unin de las siguientes
tecnologas:





Linux, el sistema operativo;


Apache, el servidor Web;
MySQL, el gestor de bases de datos;
Perl, PHP, o Python, lenguajes de programacin.

La combinacin de estas tecnologas es usado primariamente para definir la


infraestructura de un servidor Web, utilizando un paradigma de programacin para
desarrollo.

24

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

8 Anlisis conceptual
8.1.

Modelo entidad-relacin

Uno de los aspectos ms importantes de este proyecto es el de disear una base de


datos tal que englobe todos los datos que se harn uso en la misma, tener un buen
diseo de base de datos har que nuestra aplicacin pueda ser muy eficiente, de tal
forma que no nos encontremos en un futuro con incompatibilidades por restricciones a
nivel de base de datos (es decir, no poder implementar algunas cosas porque nuestro
diseo de base de datos no permite este tipo de implementacin, por tanto es
importantsimo cuidar minuciosamente cada uno de los aspectos de la base de datos,
pues estos se vern reflejados en todo el proceso de implementacin de la aplicacin).
El modelo entidad-relacin es el modelo conceptual ms utilizado para el diseo
conceptual de bases de datos. Fue introducido por Peter Chen en 1976. El modelo
entidad-relacin est formado por un conjunto de conceptos que permiten describir la
realidad mediante un conjunto de representaciones grficas y lingsticas.
Originalmente, el modelo entidad-relacin slo inclua los conceptos de entidad, relacin y
atributo. Ms tarde, se aadieron otros conceptos, como los atributos compuestos y las
jerarquas de generalizacin, en lo que se ha denominado modelo entidad-relacin
extendido.

25

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

telcon

codi

id_grup

n_alumnes

mobil
centre

localitat

CENTRO

tiene
1

1
assignacio

xerrada

email

responsable

modalitat

GRUPO

curs
comentari

elige
posee

op1
*

op2

OPCIN

CUENTA

id_grup

op4
op3

password

Tal y como podemos observar, hemos obtenido 4 entidades que sern las 4 tablas que
almacenaremos en la base de datos. Las tablas CENTRO, GRUPO, CUENTA y OPCIN.
Las relaciones que he establecido han sido las siguientes:
Relaciones 1-1:
Un centro posee una cuenta (puesto que cada Centro deber crear una cuenta para poder
registrar el grupo de alumnos que desea que acuda a las charlas).
Una cuenta es poseda por un Centro.
Es una relacin 1 a 1.
Relaciones 1 a n:
Un centro tiene n grupos. N grupos pertenecen a un centro.
Un grupo elige n opciones. N opciones son elegidas por un grupo.

26

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Es curioso pero pareca evidente que la tabla CHARLA debera haber aparecido. Pero he
decidido que no ser as, puesto que lo que queremos sacar de una CHARLA (los
atributos) no nos interesa, ya que son datos que no reflejaremos en la aplicacin. De una
charla slo nos interesa saber qu charla es, es decir, el nombre de la charla.
Como un grupo al inscribirse, se inscribe a una charla, en la tabla grupo tendremos la
charla que desea asistir ese mismo grupo, por lo que nos deshacemos de esta tabla al no
usar los atributos de la misma.

8.2.

Casos de uso

En este apartado mostrar los casos de uso que intervienen en el sistema.


Un caso de uso es una tcnica para la captura de requisitos potenciales de un nuevo
sistema o una actualizacin de software. Cada caso de uso proporciona uno o ms
escenarios que indican cmo debera interactuar el sistema con el usuario o con otro
sistema para conseguir un objetivo especfico.

8.2.1. Modelo de casos de uso

27

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

28

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

8.2.2. Descripcin casos de uso


8.2.2.1.

Crear cuenta

Para crear una cuenta, el usuario deber introducir un cdigo y una contrasea. El cdigo
introducido debe corresponder al cdigo del centro, que es nico, por lo que identifica al
mismo. Si el sistema detecta que los datos no son correctos (si un campo se deja en
blanco, por ejemplo), reportar un error al usuario informndole de que debe de ingresar
correctamente los datos. Una vez creada la cuenta correctamente, automticamente se
iniciar sesin y se redirigir al formulario para iniciar el registro de datos.
Actores
Sistema
El
usuario
introduce el cdigo
del centro y una
contrasea.
El sistema deber comprobar que los datos son
coherentes y crear la cuenta del usuario. Adems,
redirigir a la pgina de registro para iniciar el registro de
datos.
8.2.2.2.

Registrar datos

El registro de datos se inicia cuando el sistema detecta que el usuario tiene cuenta, existe,
pero no hay datos tales como nmero de charlas, etc. Por lo que le redirigir
inmediatamente al formulario para que inicie el registro de datos. Una vez registrados, el
sistema comprobar que son coherentes y que cumplen con los indicativos que se le ha
sealado. De no ser as, notificar al usuario de los datos que no cumplen con los
requisitos. De ser as, el sistema pedir una notificacin al usuario para confirmar los
datos, recibida la confirmacin, el sistema almacenar los datos en la base de datos.
Si la confirmacin es negativa, el sistema no almacenar los datos en la base de datos.
Actores
Sistema
El
usuario
introduce
los
datos que se
reflejan en el
formulario que el
sistema
le
provee.
El sistema deber comprobar que los datos son vlidos. En
caso de ser as, el sistema pedir una confirmacin al
usuario.
El
usuario
confirmar
el
29

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

correcto
contenido de los
datos.
El sistema los almacenar en la base de datos puesto que
ha recibido confirmacin y notificar al usuario va e-mail
de la inscripcin. Adems, tambin notificar al
administrador conforme hay una nueva inscripcin. Va
Web el usuario ver el estado correcto de esta transaccin.
8.2.2.3.

Iniciar sesin

Para iniciar sesin, el usuario deber introducir sus credenciales. Esto es, el cdigo del
centro y la contrasea. Puede pasar que el usuario ya no recuerde la contrasea, en tal
caso, el sistema le ofrecer la posibilidad de recordarla, envindola va e-mail. El e-mail al
que se enva es el e-mail de los datos que se han registrado anteriormente. El sistema, si
detecta que los datos son correctos, comprobar si ste tiene datos registrados o no. Si
tiene datos registrados, el sistema redirigir al usuario a un men en el que podr realizar
una serie de operaciones. Si no dispone de datos, el sistema le redirigir a un formulario
para registrar los datos.
Actores
Sistema
El
usuario/administrador
introduce el cdigo y la
contrasea
El sistema comprueba que son correctos. De ser
as, le redirige a una nueva pgina.
8.2.2.4.

Contactar con la administracin

El usuario desea enviar un e-mail a la administracin para notificarle de alguna cosa. Por
lo que deber escribir el texto y pulsar enviar para hacer llegar al administrador algo. Esto
se hace va Web sin usar una aplicacin de email a parte.
De esta forma el sistema evita mostrar el correo de la administracin, que puede ser
distinto en cada curso. El administrador configura este parmetro a travs de una opcin
que tendr.
Actores
Sistema
El usuario escribe el texto que desea
hacer llegar al administrador
El sistema se encarga de enviar a la
administracin este texto (Postfix)
8.2.2.5.

Modificar datos

El usuario detecta que hay datos que no son correctos, o bien que han cambiado. Por lo
que deber actualizar estos datos. El sistema comprobar que los nuevos datos son
30

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

correctos y los actualizar en la base de datos. Si no son correctos la base de datos


quedar intacta. De esta forma se evita que el administrador tenga que gestionar esta
accin. Aunque puede hacerlo. Cada vez que un usuario modifica datos, el administrador
recibe un correo electrnico notificndole de este hecho.
Actores
Sistema
El usuario rellena los
campos
que
han
cambiado y enva los
nuevos datos.
El sistema deber validar los nuevos datos y
actualizarlos en la base de datos. Adems
notificar al administrador va e-mail de esta
modificacin.
8.2.2.6.

Visualizar datos e imprimirlos

El usuario podr ver los datos que hay registrados. Adems, tambin podr imprimirlos
mediante un botn integrado en la herramienta.
Actores
Sistema
El usuario visualiza sus datos y, si lo desea, los podr imprimir
mediante un botn integrado en la herramienta.

8.2.2.7.

Modificar credenciales

El usuario introduce dos veces el nuevo password que desea cambiar. El sistema deber
comprobar que ste es correcto y lo actualizar en la base de datos. Si el password no es
correcto, el sistema notificar va Web al usuario y se dejar la base de datos intacta.
Actores
Sistema
El usuario/administrador
introduce dos veces el
password.
El sistema deber comprobar que ste es correct y
lo actualizar en la base de datos.

8.2.2.8.

Ver todos los datos

31

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

El administrador desea ver todos los datos de todos los centros que hay registrados hasta
el momento. El sistema le proveer esta informacin va Web.
Actores
El administrador desea ver
registros hasta el momento.

Sistema
todos

los
El sistema le facilitar esta
informacin va Web.

8.2.2.9.

Modificar parmetros Web

El administrador desea realizar un cambio de datos en la Web (nuevas charlas, nuevos


horarios, nuevo curso, nuevas fechas, etc.). El sistema deber validar los datos y
actualizarlos. (No en la base de datos sino en un archivo de configuracin XML).
Actores
Sistema
El administrador actualiza un
parmetro en la Web.
El sistema refleja este cambio en la
configuracin del mismo. Actualizando un XML.
8.2.2.10. Modificar datos de un grupo
El administrador actualizar datos de un grupo en concreto. El sistema validar los datos
y los actualizar en la base de datos. Si los datos no son correctos los har saber al
administrador va Web.
Actores
Sistema
El administrador actualiza los datos de
un grupo en concreto.
El sistema los valida y los actualiza
en la base de datos.

8.2.2.11. Generar documento XLS


El administrador desea generar un documento XLS con datos especficos para poder
operar con los mismos. El sistema deber estructurar el XLS (consultando los datos en la
base de datos y reflejndolos en el documento) y facilitarlo al administrador dndole la
posibilidad de abrirlo directamente o guardarlo.
Actores
Sistema
El
administrador
desea generar un
32

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

documento XLS.
El sistema deber consultar los datos en la base de
datos y estructurarlos en el XLS. Facilitar el mismo al
administrador.
8.2.2.12. Realizar consulta SQL
El administrador desea realizar una consulta SQL. El sistema gestionara la consulta y la
aplicar sobre la base de datos. Visualizar va Web los resultados.
Actores
Sistema
El administrador introduce la
consulta SQL
El sistema la lleva al SGDB y muestra el
resultado va Web.
8.2.2.13. Realizar backup
El administrador desea obtener una copia de seguridad de todos los datos que se
encuentran en la base de dato. El sistema le ofrecer un archivo SQL en el que dentro se
hallar el backup completo de la base de datos. Es importante recalcar que, a pesar de
ser administrador, no tiene por qu saber de SQL. Por lo que el sistema crea la sintaxis
SQL en un archivo SQL para facilitar al administrador la importacin de los datos a una
nueva base de datos.
Actores
El
administrador
realizar un backup

Sistema
desea
El sistema realiza una copia de seguridad de
toda la base de datos.

8.2.2.14. Salir de la herramienta


El administrador o usuario cierran sesin. El sistema limpiar todos los datos de sesin
que hay para cada rol. Redirigir a la pgina principal. (login).
Actores
Sistema
El usuario/administrador cierra
sesin.
El sistema limpiar todos los datos de
sesin.

33

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

9 Arquitectura del diseo de la aplicacin


El diseo del proyecto sigue el modelo de la programacin por capas, en concreto se ha
usado la de 3 capas.

La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios
niveles y, en caso de que sobrevenga algn cambio, slo se ataca al nivel requerido sin
tener que revisar entre cdigo mezclado.
1. Capa de presentacin: es la que ve el usuario (tambin se la denomina capa de
usuario"), presenta el sistema al usuario, le comunica la informacin y captura la
informacin del usuario en un mnimo de proceso (realiza un filtrado previo para
comprobar que no hay errores de formato). Esta capa se comunica nicamente
con la capa de negocio. Tambin es conocida como interfaz grfica y debe tener la
caracterstica de ser "amigable" (entendible y fcil de usar) para el usuario.
2. Capa de negocio: es donde residen los programas que se ejecutan, se reciben
las peticiones del usuario y se envan las respuestas tras el proceso. Se denomina
capa de negocio (e incluso de lgica del negocio) porque es aqu donde se
establecen todas las reglas que deben cumplirse. Esta capa se comunica con la
capa de presentacin, para recibir las solicitudes y presentar los resultados, y con
la capa de datos, para solicitar al gestor de base de datos para almacenar o
recuperar datos de l. Tambin se consideran aqu los programas de aplicacin.
3. Capa de datos: es donde residen los datos y es la encargada de acceder a los
mismos. Est formada por uno o ms gestores de bases de datos que realizan
todo el almacenamiento de datos, reciben solicitudes de almacenamiento o
recuperacin de informacin desde la capa de negocio

34

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Todas estas capas pueden residir en un nico ordenador, si bien lo ms usual es que
haya una multitud de ordenadores en donde reside la capa de presentacin (son los
clientes de la arquitectura cliente/servidor).
Las capas de negocio y de datos pueden residir en el mismo ordenador, y si el
crecimiento de las necesidades lo aconseja se pueden separar en dos o ms
ordenadores.
As, si el tamao o complejidad de la base de datos aumenta, se puede separar en varios
ordenadores los cuales recibirn las peticiones del ordenador en que resida la capa de
negocio.

35

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 4: Diseo

36

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

10 Diseo de la herramienta Web


En este apartado se describir cul ha sido el proceso para disear la herramienta Web.
Lo primero que quera hacer era integrar el aspecto de la herramienta Web acorde con el
diseo de la pgina de la Universitat de Barcelona (UB), en concreto, la de la Facultat de
Matemtiques, por lo que, a priori, no poda disear con libertad la herramienta Web, lo
ms adecuado era seguir el estndar definido por el diseo ya existente.
Por otra parte, el diseo deba de reflejar intuicin, de tal forma que la interfaz Web fuera
amigable para el usuario e incluso para el administrador.
Solemos pensar que el administrador es la persona que sabe lo que est gestionando a
nivel tcnico, pero no tiene por qu ser as, yo planteo al administrador, en este proyecto,
como la persona que tiene el criterio de decidir quin asistir a sus charlas o qu horarios
definir, etc. Por tanto, deba lograr que la interfaz tambin fuera amigable para el
administrador.
Lo primero que empec a disear ha sido la plantilla de la pgina, a partir de sta, las
pginas de la herramienta Web cogeran el mismo diseo para que, de esta forma, el
usuario o administrador tuviera la sensacin de seguir estando dentro.
Tal y como podemos ver, la plantilla general de la Herramienta Web tiene la siguiente
forma:

Columna 1, es la columna que mostrar datos a nivel informativo.


Columna 2, es la columna que mostrar los formularios o las gestiones que se
pueden/deben realizar.
La cabecera de la herramienta Web tiene un estilo muy similar a la pgina Web de la UB.
Mostrando, a su vez, un aspecto visual atractivo y serio.
La cabecera de la Web siempre ser mostrada.
He de decir que el diseo se ha echo gracias a las hojas de estilo CSS.
37

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

CSS es muy til para separar el contenido del diseo, siendo esto muy til cuando se
quiere cambiar un aspecto del diseo de un sitio Web, ya que sin hojas de estilo se
tendra que cambiar pgina a pgina dicho aspecto.
Cuando se han definido hojas de estilo, se puede cambiar dicho aspecto modificando
nicamente la hoja de estilo. Con lo que logramos adems de un ahorro de tiempo una
mayor uniformidad en el diseo.

Por ejemplo, cambiando slo una hoja de estilo, podramos modelar miles de pginas
Web que usan este estilo, por lo que ahorraramos el tener que ir picando cdigo pgina
por pgina para aplicar los nuevos cambios a nivel de diseo.
El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis
especial, la forma de presentacin que le aplicaremos a la herramienta Web.
La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que adems
esta sintaxis CSS permite aplicar al documento formato de modo mucho ms exacto. Si
antes el HTML se nos quedaba corto para maquetar las pginas y tenamos que utilizar
trucos para conseguir nuestros efectos, ahora tenemos muchas ms herramientas que
nos permiten definir esta forma:

Podemos definir la distancia entre lneas del documento.


Podemos colocar elementos en la pgina con mayor precisin, y sin lugar a
errores.
Y mucho ms, como definir la visibilidad de los elementos, mrgenes, subrayados,
tachados...

Tambin hay que destacar que usando las hojas de estilo estoy otorgando a los
documentos una mayor usabilidad y accesibilidad. Ya que permito a los usuarios definir
hojas de estilo locales, alcanzando as una visualizacin que se adapte mejor a sus
caractersticas. Como por ejemplo en el caso de una persona con deficiencia visual puede
aplicar una hoja de estilo para aumentar el tamao de las letras o remarcar los enlaces.

38

Proyecto Final de Carrera

10.1.

Formularios Web para inscripciones a un evento

Diseo del formulario Web

El aspecto ms importante de toda la herramienta Web ha sido, sin duda, el diseo del
formulario Web. De l depende toda la herramienta Web. Si no se registran datos, no hay
nada. No tiene sentido la gestin ni la propia herramienta en s.
El formulario Web es la cara amigable de la UB para atender a los usuarios. En l, los
usuarios escriben sus datos que pueden ser personales y confidenciales. De tal forma que
lo ms importante es reflejar seriedad y confianza.
Gracias a CSS, el diseo del formulario Web realizado ha sido el siguiente:

39

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

40

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

El azul caracteriza la pgina Web y a la propia UB. Este diseo integra perfectamente
HTML, PHP, JavaScript y CSS:

En este ejemplo, podemos ver que un usuario escoge la charla Crisis global.
Automticamente (JavaScript) se cargan los horarios de esta charla (das y horas).
El diseo sigue siendo slido (no se ha modificado incluso saltando el JavaScript, por
ejemplo).
Adems, estamos visualizando el nombre de las charlas gracias a PHP, pues es ste el
encargado de escribir los ttulos (Crisis global, etc.) en el formulario (los lee a partir de la
configuracin definida por el administrador).
El formulario es intuitivo, el usuario ya intuye que si quiere aadir un grupo (de un total de
4), nicamente deber hacer clic sobre Afegir grup n : n R.
Tal y como hemos definido en los casos de uso, el usuario al registrar sus datos, deber
confirmar que estos son correctos. De tal forma que quedara as:

41

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Esta interfaz permite al usuario leer sus datos, estos han sido validados correctamente
por el sistema pero existe la posibilidad de que pudieran haber datos errneos (nombre de
persona equivocado, nmero de telfono mvil con un dgito equivocado, etc.).
Si confirma, el usuario recibir una notificacin va e-mail y va interfaz Web (tambin
definido en el caso de uso):

42

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Adems, el diseo permite intuir al usuario que algo no ha ido bien, si el sistema valida
datos errneos, recibir un mensaje informndole de que hay un parmetro que no es
correcto:

En este ejemplo, el usuario ha introducido un correo invlido, por lo que el sistema se lo


hace saber para que subsane este error.
Siguiendo con los casos de uso, el usuario, si todo va bien y se registra, ser
redireccionado automticamente al men:

43

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

De esta forma, hacemos saber al usuario que, guardando sus credenciales, podr
acceder a la serie de mens que se le muestran por pantalla.
Como podemos ver, en la columna informativa (izquierda) vemos un pequeo recuadro
que enmarca nuestros datos.

10.2.

Diseo del Panel de Control del usuario

La ventaja principal de introducir el concepto de sesin en este proyecto es la de dotar al


usuario de la capacidad de cambiar/actualizar datos incluso despus del primer registro.
Existe la posibilidad de que un usuario deba notificar al administrador de un nuevo
cambio, por ejemplo, que un grupo finalmente no podr asistir o que, simplemente, l no
ser la persona responsable si no que ser otra. Es por eso que se han implementado
una serie de opciones para facilitar la tarea a ambos roles, es decir, tanto al usuario como
al administrador.
Imaginemos que tenemos 300 centros suscritos a las charlas, un importante nmero de
centros. Imaginemos que el 50% de ellos hacen saber al administrador de que hay datos
que han cambiado y es necesario aplicar estos cambios o informar al administrador de los
mismos. Por lo que, para ahorrar esta notificacin y, sobretodo, la tarea de ir modificando
centro por centro los nuevos cambios, el usuario (centro) puede modificar cualquier dato
que haya registrado a su antojo sin necesidad de avisar al administrador para que sea l
el que lo haga.

44

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Por supuesto, por cada cambio que se realice en los registros, el administrador recibir
una notificacin para determinar hasta qu punto puede afectar a la hora de dar criterio
para decidir quin viene y quin deber esperar o ir a otro turno.
Ahora mostrar el diseo de los diferentes mens disponibles en la herramienta.
He de decir que por cada rol, hay un men distinto, es decir, en total hay 2 mens, uno
para el usuario y otro para el administrador. Dependiendo del rol, habr unas opciones u
otras.
El men tambin he querido hacerlo intuitivo de tal forma que, a simple vista, el
usuario/administrador sea capaz de saber qu se puede hacer en X opcin:

Men usuario
A medida que movemos el cursor sobre una opcin, se activa el azul que indica la
posicin en la que nos encontramos (accesibilidad).
Adems, se acompaa con una imagen descriptiva de la operacin. A parte, se describe
en un lenguaje coloquial la funcin de la opcin, de tal forma que es amigable para el
usuario.
Ms adelante describiremos lo que hace cada opcin (Manual Usuario). Ahora nos
estamos centrando en el diseo.

45

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Para el rol de administrador, tambin he querido hacer una interfaz amigable que no sea
compleja de manejar. Porque, como bien he dicho antes, el administrador ni tiene por qu
saber a nivel tcnico configurar todo el sistema.

10.3.

Diseo del Panel de Control del administrador

Men administrador

46

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 5: Implementacin y pruebas

47

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Visto cmo es la herramienta Web, vamos a hablar sobre las tecnologas utilizadas en
este proyecto.

11 Tecnologas utilizadas y performance


Pese a haber visto qu lenguajes vamos a usar en este proyecto en puntos anteriores,
ahora vamos centrarnos sobre qu versiones de los mismos se utilizaron:
Las tecnologas utilizadas fueron el lenguaje de programacin PHP, HTML, JavaScript, un
sistema gestor de bases de datos MySQL, usando como servidor el Apache y como
servidor de correo el Postfix.
El desarrollo del proyecto se ha echo utilizando Linux (distribucin Ubuntu).
Se instal el servidor web Apache 2.2.11, el SGBD MySQL 5.1.30 y el lenguaje de
programacin PHP 5.2.
Se instalaron las libreras php5-gd, php5-imap, php5-ldap, php5-mysql, php5-odbc, php5xmlrpc, curl, libapache2-mod-perl2, libxml2 y libxml2-devel.
Se utiliz el Macromedia Dreamweaver 8 para codificar la aplicacin con PHP y HTML,
as como el Adobe PhotoShop CS2 para la creacin y modificacin de las diferentes
imgenes que aparecen en la herramienta Web.

11.1.

Navegador Web

La herramienta necesita de un navegador Web para ser visualizada correctamente, un


navegador Web es un programa que permite visualizar la informacin que contiene una
pgina Web (ya est est alojada en un servidor dentro de la World Wide Web o en uno
local).
El navegador interpreta el
cdigo, HTML generalmente,
en el que est escrita la
pgina Web y lo presenta en
pantalla permitiendo al usuario
interactuar con su contenido y
navegar hacia otros lugares
de la red mediante enlaces o
hipervnculos.
Mi proyecto puede ser interpretado por cualquiera de los navegadores que existen en el
mercado, no obstante es preferible el uso del Mozilla Firefox como predeterminado o del
Internet Explorer. Puesto que durante el proceso de implementacin se valid con estos.
No se han observado anomalas en otros navegadores (Google Chrome, Opera, Kmeleon,
etc.).

48

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

12 Implementacin
El proyecto se ha desarrollado bajo la filosofa de la programacin extrema, es el ms
destacado de los procesos giles de desarrollo de software
La programacin extrema se diferencia de las metodologas tradicionales principalmente
en que pone ms nfasis en la adaptabilidad que en la previsibilidad. Es decir, que los
cambios de requisitos sobre la marcha son un aspecto natural, inevitable e incluso
deseable del desarrollo de proyectos. Ser capaz de adaptarse a los cambios de requisitos
en cualquier punto de la vida del proyecto es una aproximacin mejor y ms realista que
intentar definir todos los requisitos al comienzo del proyecto e invertir esfuerzos despus
en controlar los cambios en los requisitos.
Se ha intentado hacer un desarrollo iterativo e incremental, es decir aadiendo pequeas
mejoras, unas tras otras, se han realizado pruebas continuamente para intentar corregir
todos los errores antes de aadir nuevas funcionalidades, sobretodo el cdigo ha
intentado ser simple en la medida de lo posible.

12.1.

Archivos creados y desarrollo de la aplicacin

Los diferentes archivos PHP que se han ido creando tienen como finalidad la de gestionar
una determinada parte de la pgina Web. A medida que el usuario o administrador llaman
a una funcionalidad, se llamar al archivo PHP correspondiente que se encargar de
realizar la gestin solicitada.
Todos estos archivos se encuentran en la carpeta raz de la aplicacin. Adems, tambin
hay ms archivos de no misma importancia pero que constituyen la pgina Web como,
por ejemplo, las imgenes. Aunque los archivos CSS tambin juegan un importante papel.
El paquete de instalacin de esta aplicacin contendr los siguientes archivos:

Imgenes:

GIF
li-triangulo-gris.gif
imatge_horitzontal_plantilla.gif
imatge_horitzontal_10.gif
imatge_horitzontal_09.gif
imatge_horitzontal_08.gif
imatge_horitzontal_07.gif
imatge_horitzontal_06.gif
imatge_horitzontal_05.gif
imatge_horitzontal_03.gif
imatge_horitzontal_02.gif
imatge_horitzontal_01.gif
fons_gris_intranet.gif
fons_barra_eines.gif
49

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

cap-3_final.gif
cap-2_mig.gif
email2.GIF
JPEG
tornar.jpeg
excel.jpeg
backup.jpeg
JPG
universitatlogo.jpg
ub_fons_navigator.jpg
tornar.jpg
sortir.jpg
printicon.jpg
print_icon.jpg
pencilADMIN.jpg
mark_ok_registre.jpg
mark_ok.jpg
exclamacio.jpg
ex2.jpg
desplegaboto.jpg
dades.jpg
cap-1_logoub.jpg
barragris_mc.jpg
PNG
sortir.PNG
pencil-icon2.PNG
password.PNG
home.PNG
sql-icon.png
bottom_logo.png

Archivos de gestin:

PHP
xerrada.php
sql4.php
sql3.php
sql2.php
sortir.php
resultasignar.php
registre.php
recuperar.php
prueba.php
pruebadform.php
50

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

plantilla.php
plantilla9.php
plantilla8.php
plantilla7.php
plantilla6.php
plantilla5.php
plantilla4.php
plantilla3.php
plantilla2.php
pagina.php
paginalogin.php
paginalogin2.php
nou_pass.php
mysqlbackup.php
myexcel.php
mybackup.php
modificar.php
modificar5.php
modificar4.php
modificar3.php
modificar2.php
modifica_grup_byadmin.php
modifica_dades.php
modifica_admin.php
menuadmin.php
login.php
insertaDades.php
insertaDades2.php
getImage.php
gestiona.php
gestiona4.php
gestiona3.php
gestiona2.php
gest2.php
formulari.php
formulario5.php
formulari6.php
formulari5.php
formulari4.php
formulari3.php
formulari2.php
form.php
excel.php
excel-ext.php
eliminacentre.php
desencapsular.php
dataexcel.php
consultaSQL.php
51

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

consultar.php
consultar_beta.php
assignar.php
alta.php

Hojas de estilo:

CSS
ub_text.css
ubstyle.css
ub_menu.css

12.2.

Uso de los principales archivos .php

paginalogin.php:

Desde aqu se gestiona el alta de usuarios y el paso a los diferentes mens segn el rol
(usuario/administrador).
Las hojas de estilo modelan la pgina Web, se usan 3 para modelar todas las pginas que
forman parte de esta herramienta. Para iniciar sesin, tras introducir los credenciales, se
crea la cookie (sesin) que identifica al cliente (navegador Web), de esta forma, en todo
momento, aunque vaya pasando de pgina, etc., el sistema sabr quin es la persona con
la que est interactuando, mostrndole de esta forma todos los datos que le pertenecen.

52

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Un cookie es un fichero que se enva a un navegador por medio de un servidor Web para
registrar las actividades de un usuario en un sitio Web. Por ejemplo, cuando se compran
artculos en se colocan en los que se llama un carrito de compra
virtual, esa informacin es almacenada en el cookie. Cuando el
navegador pide ficheros adicionales, la informacin del cookie
es devuelta al servidor Las cookies pueden recordar otros tipos
de informacin personal, como la contrasea de un usuario, de
manera que no haya que volver a escribirla cada vez que se
visita el mismo sitio, y sus preferencias, as que la prxima vez
que se visite un sitios, se es presentado con informaciones del
usuario.
La mayora de las cookies tienen una fecha de caducidad y o
bien residen en la memoria del ordenador del usuario hasta que
se cierra el navegador o guardados en el disco duro. Las cookies no pueden leer
informaciones almacenadas en el ordenador.
La pgina inicial tambin se encarga de dar de alta los usuarios, hay un link que indica la
necesidad de crear una cuenta para poder acceder al sistema:

Tambin se dispone de una opcin que gestiona el proceso de recordar una contrasea,
en caso de que el usuario haya olvidado la suya.
Para ambas gestiones, hay un archivo PHP dedicado que garantiza el correcto
funcionamiento de estas funcionalidades.
As pues, podemos definir paginalogin.php como la puerta de la herramienta Web.
registre.php: Se encarga de gestionar el proceso de registro de un usuario. Si el usuario
no dispone de cuenta, podr crearla y ser registre.php la elegida para llevar a cabo tal
accin (conectar a la base de datos, verificar usuario vlido, cdigo, etc.).
recuperar.php: Se encarga de gestionar el proceso de recuperacin de contrasea,
mediante el servidor SMTP enva al correo del usuario la contrasea que hay almacenada
en la base de datos.
formulari.php: Es el formulario. La razn de vivir de la pgina Web. Se encarga de
registrar los datos que sern procesados, adems, tiene que configurarse acorde el
53

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

archivo de configuracin config.xml, leyendo los parmetros que se han aplicado para
adaptarse a ellos (2 charlas en vez de 3 charlas 4, etc.).
gestiona.php: Tambin est gestiona2.php, ambos se encargan de gestionar toda la
parte de inscripcin. Es decir, tienen que validar que todos los datos que se estn
registrado son vlidos, en caso de no serlo, debern reportar estos errores al usuario y en
ningn momento introducirlos en la base de datos. En caso de validar correctamente, se
garantiza la coherencia de los datos por lo que se podr introducir en la base de datos. Es
uno de los principales motores importantes de la herramienta Web. Tambin se encarga
de traducir el lenguaje humano a lenguaje mquina. Esto es, charla cambio climtico
corresponde a charla con id 1 (por ejemplo).
modificar.php: Se encarga de la gestin del proceso de modificacin/actualizacin de
datos del usuario, tiene que mostrar los datos que hay actualmente y proveer la interfaz
grfica al usuario para que pueda aplicar los nuevos cambios.
insertarDades.php: Se encarga de coger los datos encapsulados por niveles anteriores e
introducirlos en el formato correcto de la base de datos para no violar restricciones a nivel
de base de datos.
excel.php: Se encarga de convertir a formato XLS los resultados de una consulta SQL y
ofrecer estos resultados mediante un documento XLS.
getImage.php: Es un captcha, esto es, se encarga de dibujar un recuadro con letras (en
una imagen), para que el usuario introduzca correctamente las letras y as asegurarnos de
que no se trata de un robot informtico. (Bots). Esta opcin est implementada, tal y como
se puede apreciar, pero no activada en la herramienta Web, pendiente de estudiar la
viabilidad.
consultarSQL.php: Se encarga de mostrar resultados dinmicos de consultas dinmicas
de bases de datos al usuario va interfaz grfica.
menuadmin.php y menu.php: Son los mens disponibles por cada rol. En l se incluyen
gestiones tales como visualizacin de datos, contacto con la administracin, gestin de
backup, etc. (ver modelo de casos de uso).
mybackup.php: Se encarga de la gestin del backup de la base de datos y de la creacin
de sentencias SQL para una posterior importacin del backup.
Hay ms archivos PHP que forman la herramienta Web que no voy a explicar puesto que
son llamados por estos principales archivos para que puedan realizar correctamente sus
funciones. Por lo que su explicacin sera informacin redundante.

54

Proyecto Final de Carrera

12.3.

Formularios Web para inscripciones a un evento

Tablas de la Base de Datos

A continuacin explicar, a nivel tcnico, cmo est formada la base de datos.


Recordemos que anteriormente hemos podido observar el diagrama de Entidad-Relacin
de la misma.
En total he necesitado crear 4 tablas: CENTRE, GRUP, OPCI y COMPTE.
Voy a comentar el porqu de cada taba:

Tabla CENTRE

Esta tabla engloba los datos de un centro, esto es: cdigo centro, nombre del centro,
localidad, responsable, telfono de contacto, telfono mvil, correo electrnico y
comentario.
La primary key es el cdigo del centro, puesto que es nico.
La sintaxis es la siguiente:
CREATE TABLE CENTRE (
codi varchar(20) PRIMARY KEY,
centre varchar(60),
localitat varchar(50),
responsable varchar(50),
telcon int(9),
mobil int(9),
email varchar(50),
comentari text
);
He decidido dar los valores de varchar a los campos codi, centre, localitat, responsable e
email porque as ahorramos espacio en la base de datos ya que slo se hace uso del
espacio utilizado dejando libres los dems. Esto ahorrara en un futuro memoria en la
base de datos. Comentari es text porque se entiende que un comentario puede estar
formado por muchas lneas. Los campos numricos se ajustan al nmero de dgitos que
tienen que tener.

Tabla GRUP

La tabla GRUP muestra los datos de un grupo, esto es: Centro al que pertenece, nmero
de alumnos, charla escogida (un grupo slo puede acudir a una charla), curso (son
alumnos de bachillerato), modalidad (tecnolgico, ciencias, etc.).
La primary key es la combinacin del cdigo del centro y el id del grupo (1-4). Para saber
que ese grupo pertenece a ese centro. Tendr, por tanto, una Foreign key (codi) para
referenciar a la primary key de la tabla CENTRO.
La sintaxis es la siguiente:
55

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

CREATE TABLE GRUP(


id_grup int NOT NULL,
codi varchar(20),
n_alumnes int,
xerrada varchar(50),
curs varchar(5),
modalitat varchar(10),
PRIMARY KEY (codi,id_grup),
FOREIGN KEY (codi) REFERENCES CENTRE(codi) ON DELETE CASCADE
);

Tabla OPCIO

La tabla OPCIO almacena las opciones de un grupo en base a la charla escogida. Es


importante entender que un grupo tiene que escoger una charla. Una vez realizado esto,
el usuario debe decir hasta qu punto (de ms a menos) puede acudir a esta charla, por
lo que se definen opciones. Si por ejemplo, quiere asistir a la charla Cambio climtico,
deber decir si puede venir o no a los horarios que se muestran. En caso de poder venir,
deber definir un nivel de disponibilidad. De esta forma el administrador podr tener
criterio para asignar charlas y das.
La primary key es la combinacin de cdigo, id_grupo y asignacin. Asignacin es un
valor que contiene el horario que se ha asignado finalmente a la opcin de un
determinado grupo.
La sintaxis es la siguiente:
CREATE TABLE OPCIO(
id_grup int NOT NULL,
codi varchar(20) NOT NULL,
FOREIGN KEY(codi,id_grup) REFERENCES GRUP(codi,id_grup),
op1 int,
op2 int,
op3 int,
op4 int,
assignacio char(1) DEFAULT ' ',
PRIMARY KEY (codi,id_grup,assignacio)
);

Tabla COMPTE

Finalmente la tabla COMPTE, sta contiene los credenciales y los roles de los
usuarios/administradores.
La sintaxis es la siguiente:
CREATE TABLE COMPTE(
codi varchar(20) PRIMARY KEY,
password varchar(60),
56

Proyecto Final de Carrera

);

Formularios Web para inscripciones a un evento

rol varchar(5) check (rol='admin' or rol='user')

57

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

13 Testeo de la aplicacin
Las pruebas de software, en ingls testing son los procesos que permiten verificar y
revelar la calidad de un producto software. Son utilizadas para identificar posibles fallos de
implementacin, calidad, o usabilidad de un programa de ordenador o videojuego.
Bsicamente es una fase en el desarrollo de software consistente en probar las
aplicaciones construidas.
Las pruebas de software se integran dentro de las diferentes fases del ciclo del software
dentro de la Ingeniera de software. As se ejecuta un programa y mediante tcnicas
experimentales se trata de descubrir que errores tiene.
Para determinar el nivel de calidad se deben efectuar unas medidas o pruebas que
permitan comprobar el grado de cumplimiento respecto de las especificaciones iniciales
del sistema.
Hay muchos planteamientos a la hora de abordar el proceso de pruebas de software, pero
para verificar productos complejos de forma efectiva requiere de un proceso de
investigacin ms que seguir un procedimiento al pie de la letra. Una definicin de
"testing" es:
proceso de evaluacin de un producto desde un punto de vista crtico, donde el "tester"
(persona que realiza las pruebas)
Somete el producto a una serie de acciones inquisitivas, y el producto responde con su
comportamiento como reaccin. Por supuesto, nunca se debe testear el software en un
entorno de produccin. Es necesario testear los nuevos programas en un entorno de
pruebas separado fsicamente del de produccin. Para crear un entorno de pruebas en
una mquina independiente de la mquina de produccin es necesario crear las mismas
condiciones que en la mquina de produccin. Existen a tal efecto varias herramientas
vendidas por los mismos fabricantes de hardware (IBM, Sun, HP etc.). Esas utilidades
reproducen automticamente las bases de datos para simular un entorno de produccin.

13.1.

La importancia de la deteccin oportuna

En la cadena de valor del desarrollo de un software especfico, el proceso de prueba es


clave a la hora de detectar errores o fallas. Conceptos como estabilidad, escalabilidad,
eficiencia y seguridad se relacionan a la calidad de un producto bien desarrollado. Las
aplicaciones de software han crecido en complejidad y tamao, y por consiguiente
tambin en costos. Hoy en da es crucial verificar y evaluar la calidad de lo construido de
modo de minimizar el costo de su reparacin. Mientras antes se detecte una falla, ms
barata es su correccin.
El proceso de prueba es un proceso tcnico especializado de investigacin que requiere
de profesionales altamente capacitados en lenguajes de desarrollo, mtodos y tcnicas de
pruebas y herramientas especializadas. El conocimiento que debe manejar un ingeniero
de prueba es muchas veces superior al del desarrollador de software.
58

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Durante el proyecto, he realizado varias pruebas de testing para verificar que la


herramienta cumple con los requisitos deseados y que, sobretodo, el rendimiento de la
misma sea ptimo. Con la ayuda de amigos, he podido contar con varios beta testers
que se dedicaban a realizar varios flujos en la herramienta Web.
A medida que iban apareciendo errores o sugerencias, se iban anotando para estudiar su
implementacin, obviamente, ante un error de fallo de sistema la implementacin de la
solucin era esencial . Tambin he contado con la ayuda de mis dos tutores que han ido
exponiendo sus ideas para cambiar/mejorar varios aspectos de la herramienta Web.

13.2.

Pruebas de stress

Sobre mi proyecto he realizado 3 pruebas de stress. Una prueba de stress es una


simulacin de un escenario productivo en el que la pgina Web es sometida a
comportamientos extremos.
Las pruebas de stress que he realizado han sido sobre estos parmetros:
-

Tiempos de carga
Tiempo de carga acumulado
Consumo de banda ancha.

El escenario que he montado ha sido el siguiente:


He simulado que entran 10 personas a la pgina Web, y que, poco a poco, este nmero
de conexiones aumenta hasta llegar a 50. Lo interesante es estudiar el comportamiento
de la herramienta Web a lo largo de este escenario. (Y tambin del hardware disponible).
El tiempo de carga de una Web, es un factor importante para xito o fracaso del mismo.
Un punto tan simple y casi siempre ignorado por los webmasters, puede ser determinante
para que nuestra Web, logre nuestras expectativas o se quede en el camino.
Estudios sobre usabilidad, indican que el tiempo mximo de espera para la carga de una
Web, es de 10 segundos. A partir de este tiempo el internauta empieza a desesperarse o
a
perder
inters
por
el
Web.
Por ello, el tamao del Web, ser un factor importante a tener en cuenta.
As pues, las pruebas concluyen que:

59

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

El tiempo de carga, a medida que aumenta el nmero de usuarios, se hace ms tardo,


pues el bando de ancha disponible no es el mismo y por cada usuario que entra, se
dispondr de menos. Para 10 clientes, se emplean 4.76 segundos para cargar la pgina,
y para 50, son 6.47, un incremento de casi 2 segundos.

El tiempo acumulado muestra una grfica del tiempo que tuvieron que esperar los
usuarios para visualizar la pgina
Hay que tener en cuenta que no es lo mismo el tiempo que se tarda en generar la pgina
(fue el tiempo que enviaron los jugadores), al tiempo acumulado, que sera el tiempo real
que tardaron en visualizar la pgina.

60

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

ste tambin se ve aumentado a medida que se eleva el nmero de usuarios.


Finalmente, el bando de ancha consumido:

61

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Es curioso, pero parece ser que a los 40 clientes, el bando de ancha empieza a disminuir
y no sigue la tendencia de subida. Cuanto menos bando de ancha consuma la
herramienta Web, mejor ser.
La explicacin a esta trayectoria es que probablemente la carga de la pgina Web se
haya saturado a medida que aumentaba el nmero de clientes y cuando finalmente se ha
podido cargar por completo, las conexiones que iban entrando ya no consuman ancho de
banda porque ya eran inferiores a las anteriores conexiones, es decir, que si han entrado
30 personas a la vez, es probable que para servir la herramienta Web haya sido ms
complejo pero una vez servida, al entrar las otras 20, se encontraron con que las 30 ya no
estn y por tanto tenan ms bando de ancha disponible.
Para 40 clientes el bando de ancha consumido es el valor ms elevado, de 324 kilo bits
por segundo.

62

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 6: Manuales

63

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

14 Manual Usuario
Por favor, antes de utilizar la herramienta Web, lea con detenimiento las instrucciones que
se le muestran a continuacin.

Primer acceso
La herramienta Web se presenta de esta forma:

En el panel de la izquierda, dispone de una serie de opciones. En el marco central de la


pgina Web, leer unas indicaciones de bienvenida.

Registro
Si es la primera vez que accede a la Web, deber de crear una cuenta. Para ello, en el
panel de la izquierda, haga clic sobre No tens compte?:

64

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

De esta forma, se inicializar el proceso de creacin de cuenta. Una vez echo clic, ser
redireccionado a una nueva pgina:

En el marco central de la pgina, observar que se le pide un cdigo y una contrasea


(Codi del centre y Paraula de pas). El cdigo deber corresponder al cdigo del centro al
que usted pertenece.
Una vez introducidos los datos solicitados, se crear la cuenta. Para validar la correcta
creacin, se deber visualizar lo siguiente:

Si ha habido un error durante el proceso de creacin de cuenta, le ser debidamente


notificado.

65

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Al crear la cuenta, el sistema le redirigir directamente a un formulario Web para iniciar el


registro a las charlas:

Deber cumplimentar los datos que refleja el formulario. Todos son obligatorios excepto el
telfono mvil. El telfono de contacto puede ser un mvil o un fijo.
Adems, se pueden registrar de 1 a 4 grupos por centro. Para aadir el grupo 2, 3 4,
deber hacer clic sobre Afegir grup :

66

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Para cumplimentar los datos asociados a los grupos, se le solicitar el nmero de


alumnos, la charla que usted desea acudir, el curso actual del grupo y la modalidad.
Al elegir una charla, se cargarn unos horarios. Esto indica que existen diferentes horarios
para la charla. Usted deber definir el nivel de preferencia por cada horario reflejado.
Opci 1 ser la mxima preferencia y opci 4 la menor. Puede indicar No puc venir si no
le es posible acudir:

Una vez cumplimentados los datos solicitados por el sistema, haga clic en
el botn Enviar.
Acto seguido, se reflejarn los datos que se registrarn en el sistema:

67

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Y se le pedir confirmacin de datos:

68

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Si observa que algn dato no es correcto, deber pulsar Tornar enrere. En caso de ser
correcto, pulsar Correcte.
En caso de que el sistema detecte que algn dato introducido no es correcto, se lo
notificar.

69

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

En caso de que el sistema valide correctamente los datos, visualizar por pantalla la
confirmacin del registro y, adems, recibir en un correo electrnico otra confirmacin.

Y acto seguido ser redirigido al men principal:

Panel de control
Al disponer de cuenta, usted tendr acceso al Panel de Control en el cual podr gestionar
su cuenta. El panel de control se presenta de esta manera:

70

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Nota: Si el sistema detecta que no hay datos asociados a su cuenta, le redirigir directamente al formulario.

Las gestiones que puede realizar en Panel de Control, son las siguientes:






Contactar con administracin


Modificar datos
Cambiar contrasea
Ver datos registrados e imprimirlos
Salir

Contactar con la administracin


Para contactar con la administracin, haga clic sobre Contactar via email amb
ladministraci:

Una vez dentro, nicamente deber rellenar el texto que desea enviar y hacer clic en
enviar:
71

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

En cualquier momento puede retornar al men principal pulsando sobre la flecha:

Modificar datos
En algunas ocasiones, puede pasar que algn/algunos datos que usted registr
inicialmente hayan cambiado, por ejemplo, el nmero de telfono de contacto, o la
persona de contacto. Para actualizar/cambiar los datos de su cuenta, haga clic sobre
Modificar les meves dades:

Se visualizar por pantalla los datos asociados a su cuenta. Puede modificar


absolutamente todos los datos: Datos del centro y modificar jornadas y turnos.

72

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Modificando datos del centro

Observar tres columnas, en la columna Atribut, se le indica el parmetro que se est


visualizando/modificando. En la columna Valor actual visualizar el dato que tiene el
sistema registrado. En la columna Modificaci observar unos recuadros en blanco.
Para actualizar/modificar cualquier dato, nicamente deber cumplimentar el recuadro
que presente cambios. Vase en el ejemplo que el usuario no ha registrado un telfono
mvil, en caso de disponer ya de uno, nicamente cumplimentar este recuadro, dejando
los dems intactos:

73

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Modificando jornadas y turnos


Para modificar los datos asociados a un grupo, podr realizarlo en el apartado Modificar
jornades i torns:

Dentro de este apartado, deber nicamente cumplimentar el recuadro en blanco o


escoger la opcin aplicable (despliegue canviar, canviar xerrada). Adems, puede
actualizar una preferencia o cambiar a otra charla.
Cualquier recuadro que se deje en blanco significar que se mantendr el valor actual.

74

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Una vez rellenados los campos que usted ha deseado actualizar/cambiar, deber hacer
clic en el botn enviar. Una vez echo clic, se le redirigir a una pgina en la que se
visualizarn los datos que ha decidido cambiar:

Si el sistema detecta un error en los datos que ha actualizado, se lo notificar obligndole


a retroceder para subsanar el error.
En caso de que el sistema no detecte un error, podr confirmar la
actualizacin pulsando Correcte o no confirmarla pulsando Tornar
75

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

enrere.
Una vez confirmados los datos, ya no se podr volver atrs. Pero puede volver a
cambiar/actualizar los datos siempre que lo desee.

Cambio de contrasea
Para cambiar la contrasea, en el panel de control, pulse la siguiente opcin:

El sistema le pedir introducir la nueva contrasea 2 veces, para evitar errores en la


transcripcin:

Una vez rellenados los campos Nou password y Un altre cop (nuevo password y otra
vez), haga clic en actualizar para aplicar el cambio.
Puede volver al men principal pulsando en la flecha.

Ver datos registrados o/e imprimirlos


Para visualizar los datos que hay registrados y/o imprimirlos, deber hacer clic en la
siguiente opcin:

76

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Al hacer clic, visualizar los datos asociados a usted:

Haciendo clic a la imagen, podr imprimir los datos

77

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Salir de la herramienta
Por razones de seguridad, le recomendamos que siempre que deje de utilizar la
herramienta Web, cierre la misma mediante la opcin que se refleja en el panel de control:

Al hacer clic, ser redirigido a la pgina principal:

Recordar contrasea
Si usted ha olvidado su contrasea y no puede acceder, dispone de una utilizad para
recordar la misma. En la pgina principal, observar que en el panel de la izquierda se lee
la opcin Recordar contrasenya:

Una vez echo clic, el sistema le pedir el cdigo del centro y se enviar en un correo
electrnico la contraseilla. Tenga en cuenta que la contrasea es enviada a la direccin
de correo electrnico que se registr en su momento.

78

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

79

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

15 Manual Administrador
Antes de utilizar la pgina Web, le recomendamos que lea con detenimiento las
instrucciones que se le muestran a continuacin.

Pgina de inicio
La pgina de inicio es la pgina en la que deber autentificarse para entrar al Panel de
Control de administrador

Al ser usted el administrador, por razones de seguridad, no podr crear una cuenta
mediante el sistema que ofrece la pgina de inicio. De esta forma, se evita que un usuario
pueda acceder de alguna forma con el rol administrador.

Crear cuenta administrador


Para poder entrar a la pgina Web, deber crear una cuenta con el rol de administrador,
de esta manera, los mens que se le visualizarn correspondern a los del administrador.
Para ello, deber solicitar al administrador de la base de datos que introduzca la siguiente
sentencia para el esquema de esta pgina Web:
insert into COMPTE values(codigo,nombre,admin);

Donde cdigo es el cdigo del centro (puede ser un nombre de usuario) y password es la
contrasea escogida por usted. admin debe escribirse como tal, de esta forma estamos
indicando que el rol es el del administrador.
80

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Login

Introduzca en la pgina de inicio el usuario y la contrasea, cuando el sistema detecte que


usted es administrador, le redirigir hacia el Panel de Control del administrador.

Panel de Control
En el Panel de Control del administrador, podr:









Ver todos los datos de los centros inscritos


Cambiar la contrasea
Modificar parmetros Web
Modificar datos de un grupo
Generar un documento XLS
Realizar una consulta SQL
Realizar backup
Salir de forma segura de la aplicacin

Estas gestiones son mostradas en el men administrador, de tal forma que para acceder
a una de ellas nicamente deber hacer clic sobre la opcin deseada.
Las opciones disponibles se muestran de esta forma:

81

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Ver todas las inscripciones de un centro


Para ver todas las inscripciones de un centro, deber pulsar sobre Veure totes les
inscripcions:

82

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

El azul, se activa cuando se posiciona sobre la opcin. Dentro de la opcin usted


visualizar todos los datos que se han registrado en el sistema.

Cambiar contrasea

Al hacer clic en la imagen que se le muestra arriba, usted acceder a una pgina en la
que se le indica introducir el nuevo password dos veces:

83

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Pulsando actualizar, se actualizar el nuevo password:

Modificar parmetros Web


sta es una de las opciones ms importantes. La opcin Modificar parmetros Web es
accesible pulsando:

Hay datos que son dinmicos y que se encuentran en la pgina Web, datos tales como
los avisos, los enlaces de las charlas, el nmero de charlas, etc. Se pueden cambiar
perfectamente va Web:

84

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Los parmetros Web, son todos aquellos datos que varan de un curso a otro: Curso
(20xx-20x(x+1)), nombre de charlas (charla 1, charla 2, charla3, charla 4), total de charlas
(de 2 a 4), avisos, links de las charlas (link1,, link4); etc.
En total, hay 35 datos configurables en la pgina Web:





































Nmero de xerrades
Curs
Dia
Mes
Any
Xerrada 1
Xerrada 2
Xerrada 3
Xerrada 4
Dia 1 - Horari 1
Dia 1 - Horari 2
Dia 1 - Horari 3
Dia 1 - Horari 4
Dia 2 - Horari 1
Dia 2 - Horari 2
Dia 2 - Horari 3
Dia 2 - Horari 4
Dia 3 - Horari 1
Dia 3 - Horari 2
Dia 3 - Horari 3
Dia 3 - Horari 4
Dia 4 - Horari 1
Dia 4 - Horari 2
Dia 4 - Horari 3
Dia 4 - Horari 4
Host base de dades
Usuari base de dades
Password base de dades
Nom base de dades
email
administracio
Link xerrada 1
Link xerrada 2
Link xerrada 3
Link xerrada 4
Avis

85

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

nicamente deber rellenar los parmetros que desea actualizar.


Los recuadros que queden en blanco, no se les aplicar ningn cambio, y se quedarn
con el valor actual.

Generar documento XLS


Para generar un documento XLS compatible, deber nicamente pulsar sobre el botn
Generar document XLS.

Una vez pulsado, se le pedir que introduzca un nombre de documento y al hacer clic, se
generar el documento:

86

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Realizar consulta SQL


Usted puede realizar cualquier consulta SQL contra la base de datos a travs de la
interfaz Web que la herramienta le provee, para ello, pulse Realitzar una consulta SQL:

Recuerde que las tablas disponibles son las siguientes:


CREATE TABLE CENTRE (
codi varchar(20) PRIMARY KEY,
centre varchar(60),
localitat varchar(50),
responsable varchar(50),
telcon int(9),
mobil int(9),
email varchar(50),
comentari text
);
CREATE TABLE GRUP(
id_grup int NOT NULL,
codi varchar(20),
n_alumnes int,

87

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

xerrada varchar(50),
curs varchar(5),
modalitat varchar(10),
PRIMARY KEY (codi,id_grup),
FOREIGN KEY (codi) REFERENCES CENTRE(codi) ON DELETE CASCADE
);
CREATE TABLE OPCIO(
id_grup int NOT NULL,
codi varchar(20) NOT NULL,
FOREIGN KEY(codi,id_grup) REFERENCES GRUP(codi,id_grup),
op1 int,
op2 int,
op3 int,
op4 int,
assignacio char(1) DEFAULT ' ',
PRIMARY KEY (codi,id_grup,assignacio)
);
CREATE TABLE COMPTE(
codi varchar(20) PRIMARY KEY,
password varchar(60),
rol varchar(5) check (rol='admin' or rol='user')
);

Un ejemplo de consulta sera:


SELECT codi FROM CENTRE;
El resultado sera:

88

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Realizar backup de la base de datos


La herramienta le ofrece un sistema bastante sencillo para realizar backup. Se entiende
por backup el guardado de todos los datos de la base de datos en un archivo.
El archivo en el que se guardan los datos contiene todas las sentencias SQL de creacin
de tablas y rellenado de las mismas.
Por lo que nicamente deber importar el archivo SQL que le generar la Web al a base
de datos o esquema.
Usted puede borrar los datos y hacer backup, o slo realizar backup dejando intactos los
datos.
Recuerde que si borra los datos, todos los centros registrados debern volver a
registrarse ya que no existen datos en la base de datos.
Es importante realizar backup cada periodo de tiempo.

Al pulsar fer backup, se crear el archivo SQL, por lo que usted no tiene por qu conocer
de SQL:

89

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Salir de la aplicacin
Para salir de la aplicacin, nicamente pulse sobre Sortir:

El sistema le indicar que se ha relizado correctamente:

Y volver a la pgina principal.

90

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

16 Gua de instalacin
A continuacin, le informaremos sobre cmo instalar los diferentes elementos de los
cuales depende la pgina Web.
El software que requiere la pgina Web se puede configurar en los sistemas UNIX (como
por ejemplo, LINUX), Windows y MAC.
Nos centraremos en Linux. (Distribucin UBUNTU).
Las tecnologas que requiere la pgina Web son las siguientes:





Linux
Apache
MySQL
PHP

El conjunto de estas tecnologas recibe el acrnimo de LAMP.


El procedimiento se divide en tres partes: Instalar y probar Apache, despus PHP y
finalmente MySQL.

16.1.

Configuracin APACHE

Accede con el usuario root.


En tu terminal (Aplicaciones Accesorios Terminal) teclee:
sudo apt-get install apache2

Por lo que tendrs instalado Apache 2 en tu mquina.


Por lo regular despus de la instalacin el servidor Web ser iniciado automticamente,
pero si necesitas iniciarlo de manera manual teclea esto en tu terminal:
sudo /etc/init.d/apache2 start

Si por alguna razn necesitas detener el servicio, escribe en tu terminal:


sudo /etc/init.d/apache2 stop

El directorio donde se almacenan tus documentos web es: /var/www


Esto quiere decir que la pgina Web deber ir bajo este directorio.
Aunque es posible configurar otro directorio si por algn motivo no se os concede el root.
91

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Para validar que se ha instalado correctamente el Apache, abra un navegador Web y


escriba: http://localhost Vers un aviso similar a It runs!
Para validar una pgina Web:
Imagina que tenemos:
/var/www/web/pagina1.html
Para ver pagina1.html, teclee en su navegador: http://localhost/web/pagina1.html

16.2.

Configuracin PHP

Accede con root y escribe en tu terminal:


sudo apt-get install php5 libapache2-mod-php5 php5-cli php5-mysql

De esta forma se instala PHP y los mdulos necesarios para compatibilizarlo con Apache.
Reinicia Apache con:
sudo /etc/init.d/apache2 restart

Para validar PHP con Apache, haz lo siguiente:


vi /var/www/test.php

Ponga esto en el contenido de test.php:


<?php
phpinfo();
?>

Sal con :wq y escriba en su navegador Web http://localhost/test.php


Debers ver una pgina con confirmacin sobre la instalacin PHP.

16.3.

Instalar MySQL

De nuevo, accede con root y escriba en su terminal:


sudo apt-get install mysql-server

E instala las siguientes libreras:


92

Proyecto Final de Carrera

sudo
apt-get
install
libmysqlclient15-dev

Formularios Web para inscripciones a un evento

mysql-client

mysql-admin

mysql-query-browser

Probemos si todo funciona correctamente:


mysql -uroot -pxxx

Donde xxx es la contrasea que ingresaste durante la instalacin de MySQL.


Si deseas cambiar la contrasea de la cuenta root, ejecuta el siguiente comando despus
de ingresar a MySQL:
SET PASSWORD FOR 'root'@'localhost' = PASSWORD('yyy');

Sustituye yyy por tu nueva contrasea.

16.4.

Tratamiento de grficos

Para visualizar contenido de un CAPTCHA, instale:


sudo apt-get install php5-gd

16.5.

Seguridad

Para activar el mdulo SSL (Secure Socket Layer) en Apache 2, ingresa en tu terminal:
sudo a2enmod ssl
sudo /etc/init.d/apache2 restart

16.6.

phpMyAdmin

phpMyAdmin es un administrador grfico para MySQL, yo lo uso con frecuencia. Para


instalarlo teclea en tu terminal:
sudo apt-get install phpmyadmin

93

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Para acceder a l visita: http://localhost/phpmyadmin


No olvides presionar la barra espaciadora en la pantalla de configuracin para seleccionar
a Apache2 como el servidor Web que deseamos configurar automticamente.

16.7.

Instalar la pgina Web

Para instalar la pgina Web, nicamente deber mover la carpeta donde se hallan los
binarios de la pgina hacia la ruta /var/www
Para acceder a la pgina de inicio, introduzca:
http://localhost/carpeta_donde_estan_los_binarios/paginalogin.php
Donde paginalogin.php es la Puerta de la Web.
A nivel de base de datos, en la carpeta donde estn los binarios, ver un archivo llamado
taules.sql, nicamente importe desde MySQL este archivo para que se creen las tablas
que forman la Web. No olvide meter los datos del servidor de Bases de Datos en el men
administrador (Opcin Modificar parmetres Web).
En donde deber especificar el usuario de base de datos que tiene acceso a esas tablas,
la IP del servidor (localhost u otra), y la contrasea. De esta forma se aplicar la
configuracin y se trabajar sobre esa BBDD.
Finalmente, y muy importante, deber de dar permisos de escritura a la clase otros
usuarios a la carpeta /var/tmp/carpeta_donde_estan_los_binarios:
Como root:
$ chmod 777 /var/tmp/carpeta_donde_estan_los_binarios
Si no lo hace, no podr modificar ningn parmetro Web, dado a que no tendr los
privilegios.

94

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Captulo 7: Valoracin personal

95

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

17 Valoracin personal
Este proyecto ha sido todo un reto en lo que se refiere a mi trayectoria profesional y
personal.
Desde la perspectiva profesional, ha sido atractivo tener que pensar en las soluciones
tecnolgicas que suponen este tipo de proyectos ya que actualmente disponemos de
muchas herramientas que pueden llegar a solucionar una serie de problemas, el hecho de
decidir qu soluciones escoger, analizar el porqu y para qu, si es lo adecuado o no, si
se puede implementar y si es, por qu no, econmicamente viable, hace que realmente
cojamos un rol que creo que es el que finalmente es el que importa.
Hay muchos aspectos que vienen como consecuencia de este mbito, he sentido como
que he simulado todo el proceso de creacin de algo que tiene que ser
rentable/viable/eficaz y estoy seguro que hay ms complementos que pueden acompaar
a este campo ya que por lo que he podido ver es un no parar.
Una vez dentro quieres hacerlo mejor porque empiezas a enfocarlo desde muchos
ngulos. No siempre es posible contentar todos los ngulos pero si buscar un punto que
se aproxime a lo deseado y que sea tolerado por todos. Por supuesto, hay que ser
realista, y el tiempo es un factor muy vital, uno no puede gastar mucho tiempo en un
ngulo, hay fechas y stas deben ser respetadas lo mximo posible, pues el cliente es al
que hay que satisfacer y hay que ser fieles a esta satisfaccin.
En cuanto a lo personal, ha sido muy agradable poder materializar lo que en un momento
era slo una idea. Desde que nacemos, vamos cogiendo ideas que, al fin y al cabo, son
indicativos de lo que queremos ser. Desafortunadamente, debemos aceptar que hay ideas
que no sern nunca reales y que se quedan en lo profundo de nuestra consciencia y lo
que es ms triste es que estas ideas caducan en lo ms hondo de nuestro interior porque
simplemente no hemos tenido el valor de hacerlas reales. Porque simplemente no hemos
movido ni un dedo y porque hemos abusado de trminos tales como algn da, etc. Ver
una idea echa realidad, es decir, mi proyecto, lo que tena en mente y cmo lo he creado,
hace que realmente sienta como que he ganado una victoria y lo que es ms importante,
he formado parte de mi yo.

96

Proyecto Final de Carrera

Formularios Web para inscripciones a un evento

Bibliografa


Documentacin Apache disponible en http://www.apache.org/

Portal y comunidad GNU/Linux disponible en www.espaciolinux.com/

Comunidad Hispana de PHP disponible en www.php-hispano.net

Soporte MySQL disponible en http://dev.mysql.com

La Web del programador disponible en http://www.lawebdelprogramador.com

Pruebas de stress en http://loadimpact.com

PHP and MySQL Web Development (Autor: Luke Welling, Laura Thomson)

Professional JavaScript for Web Developers, Nicholas C. Zakas (ISBN: 978-07645-7908-0)

97

ENGINYERIA TCNICA EN INFORMTICA DE SISTEMES


UNIVERSITAT DE BARCELONA

Treball fi de carrera presentat el dia


de
de 200
a la Facultat de Matemtiques de la Universitat de Barcelona,
amb el segent tribunal:

Dr.

President

Dr.

Vocal 1

Dr.

Secretari

Amb la qualificaci de: