Portal Web para un establecimiento turístico

UNIVERSITAT POLITÈCNICA DE VALÈNCIA ESCOLA TÈCNICA SUPERIOR D’ENGINYERIA INFORMATICA PORTAL WEB PARA UN ESTABLECIMIENTO TURÍSTICO PROJECTE FI DE CARRERA PROYECTO FINAL DE CARRERA Lorena Momparler Fernández Director: Felix Buendía García JUNIO 2010 2 INDICE Capítulo 1: Introducción Introducción..........................................................................................................................................5 Objetivos...............................................................................................................................................5 Contexto................................................................................................................................................6 Estructura del proyecto ........................................................................................................................6 Capítulo 2: Especificación de requisitos Introducción..........................................................................................................................................7 1.1 Propósito .......................................................................................................................................7 1.2 Ámbito ...........................................................................................................................................7 1.3 Definiciones, siglas y abreviaturas.................................................................................................7 1.4 Referencias ....................................................................................................................................8 1.5 Visión global...................................................................................................................................8 Descripción general ..............................................................................................................................8 2.1 Perspectiva del producto...............................................................................................................8 2.2 Funciones del producto.................................................................................................................8 2.3 Características del usuario.............................................................................................................9 2.4 Restricciones................................................................................................................................10 2.5 Supuestos y dependencias ..........................................................................................................10 Requisitos específicos.........................................................................................................................10 3.1 Requisitos de contenido ..............................................................................................................10 3.2 Requisitos de interfaz..................................................................................................................11 3.3 Requisitos funcionales.................................................................................................................12 Capítulo 3: Análisis Introducción........................................................................................................................................15 Casos de uso .......................................................................................................................................15 Diagrama de clases .............................................................................................................................18 Diagrama de secuencia.......................................................................................................................20 Capítulo 4: Diseño Introducción........................................................................................................................................23 Capa de presentación.........................................................................................................................24 Capa de negocio..................................................................................................................................26 Capa de persistencia...........................................................................................................................26 3 Capítulo 5: Implementación Tecnología...........................................................................................................................................29 Herramientas ......................................................................................................................................31 Descripción de la implementación.....................................................................................................32 Capítulo 6: Evaluación Tamaño de la ventana ....................................................................................................................46 Estándares XHTML y CSS ...................................................................................................................47 Navegadores .......................................................................................................................................47 Capítulo 7: Conclusiones .................................................................................................................48 Capítulo 8: Bibliografía ...................................................................................................................49 Anexos Anexo A: Manual de usuario .........................................................................................................50 Anexo B: Código zona visitante .........................................................................................................52 Anexo C: Código zona cliente ............................................................................................................66 Anexo D: Código zona administrador ................................................................................................92 Anexo E: Foro .....................................................................................................................................98 Anexo F: css ......................................................................................................................................114 Anexo G: Js .......................................................................................................................................119 Anexo H: Otras funciones ................................................................................................................133 4 INDICE DE FIGURAS 1. Camping malvarrosa de corinto................................................................................................ 6 2. Jerarquía de contenido.............................................................................................................. 9 3. Boceto de la página principal.................................................................................................. 11 4. Diagrama de casos de uso actores.......................................................................................... 16 5. Diagrama de casos de uso de usuario..................................................................................... 16 6. Diagrama de casos de uso de usuario visitante ..................................................................... 17 7. Diagrama de casos de uso de usuario cliente......................................................................... 17 8. Diagrama de casos de uso de usuario administrador ............................................................. 18 9. Diagrama de clases.................................................................................................................. 19 10. Escenario 1: dar alta nuevo usuario...................................................................................... 20 11. Escenario 2: identificación de usuario .................................................................................. 21 12. Escenario 3: realizar una reserva ......................................................................................... 21 13 Escenario 4: Eliminar una reserva por administrador............................................................ 22 14. Arquitectura 3 capas ............................................................................................................. 24 15. Página principal..................................................................................................................... 24 16. Diagrama de navegabilidad usuario cliente.......................................................................... 25 17 Diagrama de navegabilidad usuario administrador............................................................... 25 18. Capas de proyecto ................................................................................................................ 25 19.Diagram entidad-relación ...................................................................................................... 28 20. Esquema general................................................................................................................... 34 21. Menú página web.................................................................................................................. 35 22. Ruta ....................................................................................................................................... 35 23. Ejemplo de calendario........................................................................................................... 39 24. Captura del foro .................................................................................................................... 42 25. Tablas de la aplicación camping............................................................................................ 45 26. Resolución 600x480 .............................................................................................................. 46 27. Resolución 800x600 .............................................................................................................. 46 28. Validación w3c ...................................................................................................................... 47 29. Validación css ........................................................................................................................ 47 Capitulo 1: Introducción Proyecto Final de carrera Lorena Momparler Fernandez 5 Capítulo 1 Introducción 1. Introducción Este documento describe el trabajo realizado en el Proyecto Final de Carrera realizado por Lorena Momparler Fernández, cursado en la Escuela Técnica Superior de Informática Aplicada de la Universidad Politécnica de Valencia. El proyecto trata sobre el desarrollo de un sitio web de un establecimiento turístico en este caso un camping ficticio. Se pretende que la aplicación web atraiga al mayor número de usuarios posible. Por ello se ha intentado que la estructura sea clara y sea sencilla, para que los usuarios puedan encontrar toda la información, acceder al entorno, las instalaciones, tarifas y puedan tener la opción de realizar reservas y participar en el foro de clientes. 2. Objetivos El objetivo principal del proyecto será desarrollar un sitio Web para un camping que proporcione: • Información sobre las instalaciones u otros servicios característicos de un camping. • Funcionalidades de reserva. • Acceder a otros servicios como información de excursiones, información sobre el alrededor. En cuanto a los objetivos específicos la aplicación pretende ser una plataforma en la cual el usuario acceda a la información de la manera más rápida posible y que encuentre la información que busca en un vistazo, por lo tanto la información estará ordenada. La funcionalidad de reserva intenta ser una interfaz manejable en la que cualquier usuario sepa cómo utilizarla, por ella la reserva se hará mediante un formulario. También encontramos como objetivo un foro en el que los usuarios podrán comentar su opinión acerca del camping, esperamos que el foro sirva para crear confianza entre los usuarios de la aplicación web. Capitulo 1: Introducción Proyecto Final de carrera Lorena Momparler Fernandez 6 3. Contexto El proyecto trata sobre un camping ficticio, para ver los objetivos que debía cumplir un portal web para un camping, me base en páginas de campings como el de la http://www.malvacorinto.com/. Vi que la mayoría de estas páginas tenían una zona de información sobre el camping, localización, información sobre las tarifas, una zona de reservas y algunas poseían de un foro. No todos los campings disponían de zona de reservas, muchos de ellos eran solo un e-mail de contacto, pero me pareció oportuno realizar una zona de reservas. Como se puede observar en la figura 1 la zona de reservas en sólo un simple contacto en el cual mandas un e-mail con tus datos personales y el comentario a realizar. Por lo tanto una posible mejora sería realizar una reserva más detallada en la cual el usuario pudiera reservar sabiendo que días hay disponibles, que tipo de servicios podría contratar y el coste total de los servicios contratados. Tampoco existe una zona de foro que sería una buena opción para que los usuarios dejaran sus comentarios para otros usuarios acerca de la aplicación web. Figura 1: camping malvarosa de corinto 4. Estructura del proyecto La memoria está dividida en 8 partes. El segundo capítulo consiste en la especificación de requisitos, siguiendo el estándar IEE 830. El cual consiste en la definición de aquellas características que debe cumplir la aplicación web, describiendo los requisitos desde un punto vista compresible para el usuario. El tercer y cuarto capítulos tratan sobre el análisis y el diseño. En el análisis se realizaron los diagramas de clases, diagramas de casos de uso y diagrama de secuencia, basado en el modelo UML. Y en el apartado de diseño seguimos el modelo de arquitectura por capas, en la que encontramos el nivel de presentación, nivel de negocio y nivel de datos. En el quinto capítulo se centra en los detalles de implementación a partir de los diagramas vistos en el anterior apartado. De este modo vemos con más detalle las funcionalidades de la aplicación. Los dos últimos capítulos son las conclusiones finales, la bibliografía y los anexos. Capitulo 2: Especificación de requisitos Proyecto Final de carrera Lorena Momparler Fernandez 7 Capítulo 2 Especificación de requisitos 1. Introducción Este capítulo se ha desarrollado siguiendo las directrices IEEE Std. 830-1998, para la Especificación de Requisitos Software. 1.1 Propósito El propósito de la Especificación de Requisitos es definir cuales son las características, funcionalidades y contenidos que tendrá un sitio Web encargado de gestionar un camping y satisfacer las necesidades o exigencias de un cliente o usuario. También se muestran los requisitos software y equipamiento. 1.2 Ámbito La aplicación Web que se va a desarrollar está orientada a ofrecer la información necesaria sobre los servicios y funcionalidades de la Web, así como a la gestión de reservas y la facilidad de contratar servicios. Por lo tanto el usuario podrá obtener información sobre precios, servicios y disponibilidad. También se podrán realizar reservas anticipadas para usuarios registrados y se podrá consultar sobre otros servicios no relacionados con el camping. Una idea del funcionamiento de dicha aplicación web puede verse reflejada en las distintas páginas sobre camping (ejemplo: http://www.malvacorinto.com/index.html), usadas como ejemplo para abordar dicho trabajo. 1.3 Definiciones, siglas y abreviaturas • Definiciones Password: es una clave secreta que sirve para identificar a un usuario. Loggin: acción que debe hacer un usuario visitante para registrarse. Logout: acción que realiza un usuario registrado para dejar de estarlo. • Acrónimos TB: Temporada baja TA: Temporada alta: pascua, semana santa, julio y agosto Navegador: )es un programa que permite visualizar la información que contiene una página web HTML: siglas de HyperText Markup Language. Es un lenguaje para páginas web que utiliza etiquetas. Capitulo 2: Especificación de requisitos Proyecto Final de carrera Lorena Momparler Fernandez 8 PHP: significa PHP Hypertext Pre-processor.Es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor. AJAX: crónimo de Asynchronous JavaScript And XML. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. JAVASCRIPT: es un lenguaje orientado a las páginas web, basado en Java. APACHE: servidor de páginas web gratuito. MySQL: es un sistema de base de datos relacional. CSS: es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML. FLASH: aplicación multimedia usada para animaciones. 1.4 Referencias Para la realización de este texto se han tenido en cuenta los siguientes documentos: • IEEE Std 830IEEE Guide to Software Requirements Specifications. IEEE-SA Standards Board. • “Una guía para la realización y supervisión de proyectos Web (PFC)”, Félix Buendía, Editorial UPV 2008 • Ejemplos de otros trabajos • Webs de campings: http://www.globo-rojo.com, http://www.campinglesgalets.com, http://www.malvacorinto.com • Apuntes de la asignatura: ingeniería del software 1.5 Visión Global A continuación se realizará una descripción general de la aplicación describiendo sus características, funcionalidades y dependencias. También se expondrá una especificación detallada de las partes principales del proyecto. 2. Descripción general 2.1 Perspectiva del producto La aplicación pretende desarrollar un portal Web de un camping, en el cual se ofrecen servicios de información y reserva específica para cada usuario, destinado a que cualquier usuario pueda ejecutarlo sobre los principales navegadores Web que se ofrecen en el mercado actual, concretamente se ha ejecutado satisfactoriamente en los navegadores Internet Explorer y Mozilla Firefox. 2.2 Funciones del producto Las funciones que se van a realizar se describen a continuación de forma general: • Historia: mostrará la información relativa al camping, describiendo sus alrededores, su clima … • Ubicación: dirección del camping y un mapa para saber como llegar. Capitulo 2: Especificación de requisitos Proyecto Final de carrera Lorena Momparler Fernandez 9 • Enlaces: páginas de información sobre los alrededores. • Tarifas: relación de los precios del camping. • Instalaciones: descripción de los bungalow y otros servicios que están disponibles. • Reservas: formulario de reservas. Figura 2: Jerarquía de contenido del proyecto del camping Un usuario podría realizar:  Navegación por la información de la web. Concretamente podría acceder a la historia del camping, enlaces de interés, tarifas e instalaciones.  Posibilidad de registrarse. Si fuera usuario registrado, podría acceder a la zona de reservas.  Posibilidad de ver la localización del camping, y con la aplicación google maps trazar su mejor camino para llegar. Un usuario administrador tendría:  Las mismas funciones que el usuario descrito anteriormente  Posibilidad de la gestión de la web, incluyendo gestionar usuarios y gestionar reservas. 2.3 Características del usuario Los usuarios que utilizar el sitio Web va a ser cualquier usuario que disponga de una conexión a Internet, normalmente serán personas entre 20-50, habituadas a este tipo de servicios online. Se pueden diferenciar 3 tipos con diferentes derechos y permisos: • Administrador: podrá acceder a la zona de administradores para gestionar el mantenimiento de la web. • Visitante: consulta la información que ofrece la Web. La mayoría de los usuarios serán de este tipo, son usuarios conectados a la página sin necesidad de registro. Podrán navegar por la aplicación, consultar, mirar fotografías. Con la cual es conveniente hacer una interfaz gráfica sencilla y que concrete la información en un primer vistazo. • Cliente: usuario registrado que deberá introducir su password y su nombre de usuario, para poder entrar en la zona específica de usuarios registrados. En esta zona se mostrará contenido para realizar reservas y para participar en el foro. No tendrá privilegio en la zona de administradores. Web Camping Entorno Ubicación Cara cterísticas Reservas Enlaces Tarifa instalaciones Historia Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 16 Figura 4: Diagrama de caso de uso de los actores del sistema. Los actores visitante, cliente y administrador heredan del usuario.En las figuras siguientes se muestran los diagramas de uso para cada usuario. Usuario: la entidad usuario puede realizar funciones de búsqueda dentro de la aplicación. Es el actor que generaliza a todos los demás, que posteriormente se detallarán. El caso de uso se encuentra en la figura 5. Figura 5: Diagrama de caso de uso del usuario. Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 17 Visitante: hereda las funciones del actor usuario. Es un usuario anónimo en la web, es un usuario no registrado. Tiene las funcionalidades de consulta y se caracteriza por poder registrarse en la web del camping. Caso de uso mostrador en la figura 6. Figura 6: Diagrama de caso de uso del usuario visitante Cliente: puede realizar las mismas funciones que el usuario y el visitante, su caso de uso se muestra en la figura 7. Como ha sido registrado previamente puede autentificarse como cliente y realizar acciones las acciones permitidas sólo para este usuario: • Reservar parcelas o bungalows, que permitirá gestionar las reservas realizadas por el cliente. • Gestionar los datos del cliente, permitiendo actualizar cualquier dato. Figura 7: Diagrama de Caso de uso del usuario cliente. Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 18 Administrador: el administrador del sistema es el encargado de realizar el mantenimiento de la web. Tiene todos los derechos posibles en la aplicación, es decir, que puede consultar, insertar, modificar o eliminar usuarios o reservas. Se muestra su caso de uso en la figura87. Figura 8: Diagrama de caso de uso para usuario administrador. 3. Diagrama de clases El diagrama de clases permite representar las principales entidades que intervienen en la aplicación, mostrando sus clases y sus relaciones. Dichas entidades o clases deben hacer referencia a elementos característicos, como métodos, atributos y las relaciones entre clases con su cardinalidad. En el diagrama de clases la entidad principal es el camping. De esta entidad surgen varias entidades. Una de ellas es el menú, esta entidad está dividida en 6 partes (principal, actividades, localización, instalaciones, tarifas y reservas). De la parte de los usuarios, como ya he mencionado anteriormente, hay 3 tipos de usuarios (visitante, cliente y administrador). Todo usuario tendrá acceso a la visita de cualquiera de las secciones del menú. El usuario cliente podrá realizar reservas y el administrador podrá administrarlas. De la entidad reserva, tiene un apartado que es la entidad foro, donde el usuario cliente podrá añadir comentarios en el foro o ver los comentarios de otros clientes. El administrador será quien administrará el foro. De la entidad camping salen las entidades parcela y bungalow, y estas tienen una reserva. Que pertenecerán a la sección de reservas. En la figura 9 se muestra el diagrama de clases de la aplicación web, pero no se han especificado los métodos, ni los atributos para una mayor claridad. Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 19 Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 20 4. Diagrama de secuencia El diagrama de secuencia se describe escenarios y diagramas de secuencia para los casos de uso anteriores, mostrando la interacción a través del tiempo. Los escenarios dan información sobre los pasos a seguir. Los objetos de los escenarios se muestran en la parten superior .De cada uno sale una línea discontinua vertical y los mensajes entre objetos se dibujan con una línea horizontal. Se describen sólo algunos escenarios, porque muchos son prácticamente iguales. Escenario 1, dar de alta nuevo usuario, mostrado en la figura 10. Un usuario visitante, podrá convertirse en usuario cliente dándose de alta. Para ello el usuario debe de introducir sus datos en el sistema. Se debe comprobar en la base de datos que el DNI no esté repetido y el e-mail tampoco ya que éste será el identificador para luego poder loggearse y entrar en la zona de reservas. El password será también comprado con repetir el pasword. Si todos los datos son correctos se registrará adecuadamente y se mostrará la página de reservas. Si los datos no fueran bien introducidos te los marcaria como malos, y no podrías dar de alta un nuevo usuario si no introdujese correctamente los datos. Figura 10: Escenario 1, dar de alta nuevo usuario Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 21 Escenario 2, Identificación de usuarios, figura 11. En el apartado de login el usuario cliente se identificad mediante la inserción de el password y el e-mail. Si el e-mail y el password coinciden en la base de datos, accederá a la sección de reservas y podrá realizar las acciones convenientes en esa sección. Pero si no fueran correctos se mostraría la página de error. Figura 11: Escenario 2, identificación de usuarios. Escenario 3, Realizar una reserva, figura 12. Cuando un usuario registrado, cliente, desea realizar una reserva, deberá introducir los datos de la reserva: 1. Elegir el tipo de emplazamiento, bungalow o parcela, que desee reservar. 2. Introducir los datos de fecha entrada y fecha salida y consultar la disponibilidad. 3. Si hay disponibilidad puede reservar. Y si no hay disponibilidad en las fechas seleccionadas deberá introducir una nueva fecha. 4. La reserva se guarda en la base de datos. Figura 12: Escenario 3, realizar una reserva. Capitulo 3: Análisis Proyecto Final de carrera Lorena Momparler Fernandez 22 Escenario 4: eliminar una reserva por el administrador, figura 13. Damos por hecho que el administrador ya se ha logeado y está en la sección de reservas, la cual para el administrador será la zona de administrador tanto las reservas como el foro. En el escenario concreto lo que queremos es eliminar una reserva. Para ellos debemos seleccionar la clase de emplazamiento que deseamos eliminar y luego la id de la reserva a eliminar si la reserva es correcta se mostrará un mensaje diciendo lo que hemos eliminado y actualizará la página. Figura 13: escenario 4, eliminar reserva por administrador. Capitulo 4: Diseño Proyecto Final de carrera Lorena Momparler Fernandez 23 Capítulo 4 Diseño 1. Introducción El capitulo siguiente es el de diseño, a partir de los modelos obtenidos en el análisis se plantea como llevar a cabo la implementación de la aplicación pero sin entrar en detalles, haciendo una separación de la lógica de negocios de la lógica del diseño. Existen diversos tipos de arquitecturas web aunque yo usaré una de las más utilizadas la arquitectura de las tres capas. La programación por capas es un estilo de programación en el que el objetivo primordial es la separación de la lógica de negocios de la lógica del diseño. La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios niveles y, si ocurre alguna incidencia sólo afectaría al nivel indicado. En cada nivel se le confía una misión simple, lo que permite el diseño de arquitecturas escalables. Figura 14: arquitectura de 3 capas. La arquitectura en 3 capas se divide en: • Capa presentación: presentación de los resultados de computación al usuario y recogida de entradas del usuario del sistema. • Capa de negocio o lógica: proporciona la funcionalidad de la aplicación. • Capa de datos o persistencia: proporciona persistencia a los datos, a través de base de datos, ficheros xml… Capitulo 4: Diseño Proyecto Final de carrera Lorena Momparler Fernandez 24 2. Capa de presentación La capa de presentación, representa la parte visible de la aplicación con la que interacciona el usuario con la capa inferior, la capa de negocio. Por lo tanto se detalla el aspecto visual con el que tratará el usuario. En la figura 15 se muestra la interfaz visual de la página principal, que las demás páginas seguirán. Las partes son: • Logo: muestra el logo del camping, al pincharlo irá a la página principal. • Cabecera: consta de una imagen identificativas del camping, los Alpes franceses. • Menú: situado a la izquierda de la cabecera, permite al usuario navegar por las diferentes secciones de la aplicación web. • Parte central: muestra el contenido principal de la página, donde está situado y la información de contacto. Figura 15: Página principal. LOGO CABECERA MENU CONTENIDO PRNCIPAL Capitulo 4: Diseño Proyecto Final de carrera Lorena Momparler Fernandez 25 A partir del esquema de la página web se pueden representar otros elementos pertenecientes a la interfaz como los enlaces o los menús de opciones como mecanismos de navegación. En las figuras 16 y 17 se muestra un diagrama de navegabilidad, que representa las secciones en las cuales puede acceder un usuario concretamente en la figura 16 un usuario cliente y en la figura 17 un usuario administrador . Figura 16: diagrama navegabilidad del usuario cliente. Figura 17: diagrama navegabilidad del usuario administrador. Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 32 ECLIPSE Eclipse es un entorno de desarrollo integrado de código abierTo multiplataforma para desarrollar lo que el proyecto llama "Aplicaciones de Cliente Enriquecido", opuesto a las aplicaciones "Cliente-liviano" basadas en navegadores. Esta plataforma, típicamente ha sido usada para desarrollar entornos de desarrollo integrados (del inglés IDE), como el IDE de Java llamado Java Development Toolkit (JDT) y el compilador (ECJ) que se entrega como parte de Eclipse (y que son usados también para desarrollar el mismo Eclipse). He usado eclipse debido a la facilidad para detectar errores en html, ya que hay muchos compiladores que detecten errores en html. ADOBE DREAMWEAVER CS3 Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. El dreamweaver lo he usado debido a su ayuda con el diseño de la aplicación web y para la definición de algunas funciones ya definidas. ADOBE PHOTOSHOP CS4 El photoshop lo he usado para darle a la página web un mejor diseño. La mayoría de las imágenes están retocadas con el photoshop y muchas de ellas son combinaciones. Adobe Photoshop (Taller de Fotos) es una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos rasterizados). A medida que ha ido evolucionando el software ha incluido diversas mejoras fundamentales, como la incorporación de un espacio de trabajo multicapa, inclusión de elementos vectoriales, gestión avanzada de color, tratamiento extensivo de tipografías, control y retoque de color, efectos creativos, posibilidad de incorporar plugins de terceras compañías, exportación para web entre otros . 3. Descripción de la implementación En este apartado se detallan las páginas que componen la aplicación web. Para ello, se pretende seguir el mismo esquema empleado en apartados anteriores, empezando por el nivel de presentación, luego nivel de negocio y finalmente el nivel de persistencia con la creación y puesta en marcha de la base de datos. 3.1. Implementación del interfaz El diseño de las páginas se ha realizado mediante la utilización de capas (div) y css para poder estructurarlas. Se encuentra en el archivo index.html. A continuación se muestra como con los div he estructurado las páginas. Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 33 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Inicio</title> <script type="text/javascript" src="comun.js"></script> </head> <body> <div id="wrapper"> <div id="container"> <div id="cabecera"></div> <div id="cuerpo"> <div id="menu"> <div id=”submenu”></div> </div> </div> <div id="content"></div> </div> </div> </body> </html> En el siguiente código voy a mostrar el css común a todas las páginas. #wrapper { width: 100%; text-align: center; margin-top: 10px; } #container { width: 750px; margin-left:auto; margin-right:auto; } #cabecera { width: 100%; background-image:url(Images/hoja.jpg); height: 75px; margin-bottom: 2px; } #cuerpo { width: 100%; height: 205px; background-image:url(Images/montanya.jpg); margin-bottom: 2px; } #menu{ margin-left:auto; width:191px; height:205px; background-image:url(Images/lago.jpg) } #submenu1 { margin-left:auto; margin-right:auto; width:191px; height:40px; } Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 34 Voy a explicar los dos códigos (div, css). En el código anterior podemos diferenciar varios div. El primero será <div wrapper> que dentro de él contiene los demás div. Lo que hace es englobar toda la página creando un envoltorio que va a contener al resto de la estructura para que aparezca centrada. En su estilo css(#wrapper) podemos ver que width: 100%, text-align: center (para que aparezca centrada la página) y margin-top: 10px (es para que si hay otro div entre ellos haya una separación de 10px). El <div container> va dentro del div warapper , su función será definir el ancho de la página. Po lo tanto en el css (#container) simplemente le he indicado el ancho total que va a tener el sitio web (width: 750px;) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Dentro del container encontramos <div cabecera> que será la cabecera de la página donde encontraremos el logo, y le hemos puesto que tengo una imagen de fondo con la propiedad (background-image:url(Images/hoja.jpg) del objeto style. También encontramos el <div cuerpo> donde irá situado el menú y la imagen del camping. Dentro del menú encontramos un div submenú, que pertenece a las distintas secciones que tendrá la página web. Y por último está el <div content> que contendrá el contenido de la página. En la figura 20 se muestra un esquema de cómo está estructuradas la páginas en div. Figura 20: estructura general. Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 35 A partir del código anterior se puede especificar el menú, está comprendido por 5 submenús los cuales comprenden con las 5 secciones de la página web. Dicha área se implementa con las hojas de estilos CSS y a través de unas funciones JavaScript. Esté menú recordemos está dentro de la div cabeceara. Y dentro del div menú hay 5 submenús. Su código se detalla a continuación, sólo detallaré uno submenú los demás tienen el mismo código pero cambia la foto. Las funciones javascript son funciones que tiene predefinidas el dreamweaver (imagen de sustitución), lo que hacen es que cuando pasas el ratón por un submenú pues sale otra imagen. En la figura 21 se puede ver una imagen del menú. <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> </div> </div> //Funcción Java Scritp function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } Figura 21: menú de la página web En las secciones (localización, instalaciones, enlaces, tarifas y reservas) a parte del código anterior dentro de la content existe una barra que indica la ruta en las que estas. El ejemplo es en localización, que puedes acceder al inicio de la página pulsando inicio. El ejemplo se muestra en la figura 22. Figura 22 ruta. Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 36 3.2. Implementación de la funcionalidad En el apartado anterior hemos descrito el diseño de la página, podemos añadir que se ha hablado del contenido que puede visitar un usuario visitante. El usuario visitante tiene acceso a la parte de información de la aplicación web, a las páginas que tendrá acceso son localizcion.html, insservicio.html, ins-parcela.html, ins-bungalow.html, actividades.html, tarifa-parcela.php, tarifabungalow.php, enlaces.html, erro.html, realizado.html todos estos archivos están adjuntos en el anexo. Un usuario visitante tendrá permiso para convertirse en usuario cliente, con la parte de alta de usuario. A esta sección se accede desde el apartado de reservas. La página principal de reservas es reservas-ini.html, que tendrá dos opciones si eres usuario registrado podrás ir a la sección de logearse, que más abajo está detallada, o si eres usuario visitante y deseas acceder a la parte de reservas puedes deberás de darte de alta. Alta nuevo usuario Para darte de alta un nuevo usuario hay que mostrar el contenido de altaNueva.html. Esta página tiene un formulario en el cual el usuario introduce sus datos. Como en todo formulario hay datos que no pueden estar repetidos es el caso del DNI y del e-mail (es el identificador para loegearse). Para comprobar que el DNI o e-mail no están repetidos haré uso de unas funciones en javascritpt que usan ajax, y luego en la parte del servidor habrá un archivo llamado altaNueva.php donde se conectará a la base de datos y devolverá si está el dato. Sólo explicaré el funcionamiento para el DNI ya que se usa un código parecido en buscar si el e-mail está repetido. Primero mostramos la llamada a la función javaScript cuando el valor del input type text con id DNI cambie pues se llamará. También debemos crear una objeto img que estará no visible para que cuando sepamos si el DNI es correcto o incorrecto pues nos muestre la imagen. <label for="dni">Dni: *</label> <input type="text" id="dni" onChange="return autentica();"> <img id="Idni" name="Idni" style="visibility:hidden"/> La función JavaScritp autentica(), lo que hará es primero es recuperar el valor del usuario introducido y comprobará que el DNI introducido sea una secuencia de 8 dígitos sin contener letras. Si no es de 8 dígitos mostrará un alert() mostrando el error. Si ha introducido 8 dígitos pues entonces llama a la función leer_doc y se le pasará la ruta donde queremos que compruebe si está repetido el DNI. La función ler_doc para realizar la llamada al servidor vamos a crear una variable req que será la que el programa JavaScript mantenga la referencia a la petición. Dicha variable será la que dentro de la función leer_doc(url) realice la conexión mediante el objeto XMLHttpRequest. El objeto XMLHttpRequest tiene dos formas de llamarse dependiendo del navegador en el que nos encontremos .Si existe el objeto como objeto del navegador bastará con realizar un new sobre el mismo, sino tendremos que instanciarlo como un ActiveX para los navegadores Internet Explorer (versiones 5 y 6). El objeto XMLHttpRequest se maneja mediante callbacks, es decir, que la respuesta del objeto será manipulada por la función que le indiquemos. Para ello tendremos que informar a la variable .onreadystatechange que llamará a la función procesarRespuesta. En la función procesarRespuesta() la variable respuesta lo que hará es recuperar los datos del atributo .responseXML del objeto XMLHttpRequest. En este caso los datos devueltos por el servidor vienen en formato XML.Como la respuesta viene en XML deberemos utilizar Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 37 funciones del DOM .getElementsByTagName("tag"). Si el valor de la etiqueta existe es false es que el DNI no es encuentra en la base de datos y por lo tanto al objeto img le pasaremos su src diciendo que imagen mostrar y le pondremos su style.visibility a visible para que nos muestre la imagen que le acabamos de decir. En cambio si existe es true pues le diremos que muestre la imagen error. function autentica(){ var dni_pat = /^\d{8}/; t="Idni"; var usuario = document.getElementById("dni").value; if (!dni_pat.test(usuario)){ alert("Error, DNI no válido. Introduzca una secuencia de 8 digitos...") document.getElementById('enviar').disabled = true document.getElementById(t).src = "Images/error.gif" document.getElementById(t).style.visibility = "visible"; }else{ url = "/sitios/Camping/altaNueva.php?tipo=1&usuario=" + usuario; leer_doc(url); } } function leer_doc(url) { req = false; // Llama objeto XMLHttpRequest if (window.XMLHttpRequest) { req = new XMLHttpRequest(); if (req.overrideMimeType) { req.overrideMimeType('text/xml'); } // Si no funciona intenta utiliar el objeto IE/Windows ActiveX } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req!=null){ req.onreadystatechange = procesarRespuesta; req.open('GET', url, true); req.send(null); } } function procesarRespuesta(){ respuesta = req.responseXML; var existe = respuesta.getElementsByTagName('existe').item(0).firstChild.data; if (existe=="true"){ document.getElementById('enviar').disabled = true document.getElementById(t).src = "Images/error.gif" document.getElementById(t).style.visibility = "visible"; } else{ document.getElementById('enviar').disabled = false document.getElementById(t).src = "Images/ok.gif" document.Idni.style.visibility = "visible"; } } Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 38 En el fichero altaNueva.php le hemos pasado desde la función leer_doc una url (url = "/sitios/Camping/altaNueva.php?tipo=1&usuario=" + usuario;) y el DNI introducido por el usuario. Lo que hace la función comprobar_dni() es mediante una consulta SQL devolver un XML rellenado la etiqueta existe con true si el DNI se encuentra en la base de datos o false si no se encuentra. function comprobar_dni(){ header('Content-type: text/xml'); require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT * FROM usuarios WHERE dni='".$_GET["usuario"]."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila if ($foo = mysql_fetch_array($resultado)) { echo("<?xml version=\"1.0\" ?><existe>true</existe>"); } else { echo("<?xml version=\"1.0\" ?><existe>false</existe>"); } //Liberamos los recursos de las consultas mysql_free_result($resultado); } Logear usuario Para logear un usuario, es decir pasar de un usario a ser visitante a un usuario client para accede a la zona de reservas. Debes pinchar dentro reservas-ini.html en loggear. Y nos redirigirá login.html. En esta página tendremos un formulario con dos campos uno para introducir el e-mail y otra para el password. Y un botón Validar. Este botón lo que hace es llamar a la función enviar(). E-mail<input name="mail" type="text" id="mail" size="30" maxlength="30"/> Password<input name="cta" type="password" id="cta" size="30" maxlength="30"/> <div align="center"><button onClick="enviar()">Validar</button></div> La función enviar() recupera el valor del e-mail y del password introducido y luego esos campos los manda al fichero login.php donde comprueba si son correctos en la base de datos. function enviar(){ var m=document.getElementById("mail") var c=document.getElementById("cta") window.location='http://localhost/sitios/Camping/login.php?m='+m.value+'&c='+c.value } En login.php lo primero que hace es comprobar si el e-mail y el password coinciden con un usuario y pues llaman a la función comprobar_tipo() y si no redirigen a la página error.html. La función comprobar_tipo() es la encargada de comprobar que tipo de usuario. Si el tipo es 1 el usuario será administrador y le redirigirá a la página de admin.php. Pero si el tipo de 2 entonces es un usuario normal y le enviara a la página de reservas. require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT mail,contrasenya FROM usuarios WHERE mail='".$_GET['m']."'"; Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 39 $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila if($foo = mysql_fetch_array($resultado)) { //Si coinciden mail y el pass mirar el tipo comprobar_tipo(); mysql_free_result($resultado); } else { header("location:http://localhost/sitios/Camping/error.html"); } function comprobar_tipo(){ $_SESSION["mail"]=$_GET['m']; $_SESSION["cta"]=$_GET['c']; require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT mail,contrasenya,tipo FROM usuarios WHERE mail='".$_GET['m']."' AND contrasenya='".$_GET['c']."' AND tipo='1'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); if ($foo = mysql_fetch_array($resultado)){ header("location:http://localhost/sitios/Camping/admin.php"); }else { header("location:http://localhost/sitios/Camping/formulario.php"); } } Realizar una reserva Una vez que el usuario ya se ha registrado irá a la página de reservas (formulario.php). Primero deberá elegir el establecimiento que desea reservar un bungalow o una parcela. Esto se realiza con un checkbox que el onChange llama a una función. Esta función lo que hace es mostrar el calendario para luego comprobar la fecha. El calendario, figura 23, es de tipo popup. Debemos añadir un su css que es epoch_syle y sus funciones en javascript que están epcoh_classes.js. Luego ponemos un script que cuando cargue la página llame a una función del calendario para que lo muestre Figura 23: calendario <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var bas_cal,dp_cal,ms_cal; window.onload = function () { dp_cal = new Epoch('epoch_popup','popup',document.getElementById ('popup_container')); dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; </script> Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 40 Para saber si hay hueco en la fecha indicada se deben de rellenar la fecha inicio y la fecha fin y conel botón comprobar se llama a una fucion javascript que usa ajax para saber si hay hueco. La función en ajax no la voy a explicar porque es muy similar a la explicada anteriormente con el DNI. Si mostraré como busco el hueco dentro de la base de datos. Para buscar el hueco debemos ir al fichero f.php. Como parámetros se le pasa la fecha inicio, fecha final , y si el bungalow o parcela lo que debemos reservar. La función consiste en una sentencia sql que busca si hay una reserva realiza entre fecha inicio y la final. El único detalle es que para cada parcela y bungalow tengo una tabla en total son 5(puse 5 para comprobar el funcionamiento de la aplicación pero se pueden añadir tantas como parcelas o bungalows haya en el camping). Para saber si hay hueco en una tabla recorro las tablas de las parcelas y cuando hay hueco uso una variable que pone a 1 . Lugo compruebo que si la variable tiene valor de o pues no hay hueco. Y si el valor es 1 pues es que hay un hueco libre y le paso con el xml que parcelo o bungalow esta libre. require('configuracion.php'); $inicio=$_GET['fi']; $fin=$_GET['ff']; $tipo=$_GET['p']; header('Content-type: text/xml'); //Preparación y ejecución de la consulta $corre=0; if($tipo=="parcela"){ $t="parcela"; //$cadena=""; for($i=1;$i<5;$i++){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE (('$inicio' >= fecha_ini && '$inicio' < fecha_fin)||('$fin' > fecha_ini && '$fin' <= fecha_fin))"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); $res=mysql_num_rows($resultado); if($res>0){ $corre=0; }else { $corre=1; $cadena=$x; $_SESSION['empl']=$cadena; break; } } if($corre==1) echo("<?xml version=\"1.0\" ?><existe>$cadena</existe>"); else echo("<?xml version=\"1.0\" ?><existe>false</existe>"); Una vez tenemos hueco se muestra la tabla en la que el usuario debe elegir que opciones desea reservar. Y se le van sumando a su precio total por noche. Cuando ya tiene elegido lo que desea reservar se muestran sus datos personales que si el usuario los cambia pues se actualizan en la base de datos, excepto el dni y el e-mail que no tiene permiso para cambiarlos. A continuación se le muestra el contenido de su reserva, en la que se muestra los días que consiste la reserva. Y si le usuario le da al botón de enviar, pues se enviar su reserva a la base de datos y se inserta. Como contar los días entre dos fecha me parece interesante así que voy a explicar cómo lo he realizado. La función se encuentra dentro del archivo precio.php. A la función días(inicio,final) es llamada cuando el usuario actualiza sus datos porque posteriormente se va a enseñar los datos de la reserva. La función consiste en separar la fecha en año, mes y día e ir restando la diferencia entre una y otra. Capitulo 5: Implementación Proyecto Final de carrera Lorena Momparler Fernandez 41 function dias($i,$f){ $separar = explode('-',$i); $ano1 = $separar[0]; $mes1 = $separar[1]; $dia1 = $separar[2]; $separar2 = explode('-',$f); $ano2 = $separar2[0]; $mes2 = $separar2[1]; $dia2 = $separar2[2]; //calculo timestam de las dos fechas $timestamp1 = mktime(0,0,0,$mes1,$dia1,$ano1); $timestamp2 = mktime(4,12,0,$mes2,$dia2,$ano2); //resto a una fecha la otra $segundos_diferencia = $timestamp1 - $timestamp2; //echo $segundos_diferencia; //convierto segundos en días $dias_diferencia = $segundos_diferencia / (60 * 60 * 24); //obtengo el valor absoulto de los días (quito el posible signo negativo) $dias_diferencia = abs($dias_diferencia); //quito los decimales a los días de diferencia $dias_diferencia = floor($dias_diferencia); echo $dias_diferencia; $_SESSION["dia"]=$dias_diferencia;; } El usuario tiene también la posibilidad de modificar su reserva o eliminarla. Esta modificación es muy parecía a la del administrador por lo que más abajo lo comentaré. Lo que más cambia son las sentencia sql. Foro Dentro de las reservas hay otra pestaña correspondiente a foro. Este es un foro donde el usuario puede añadir comentarios o también podrá ver comentarios de otras personas. Por seguridad no he permitido que los usuarios modifiquen el foro, si no que esto lo realizará un administrador que lo vernos detallado más tarde. Dentro del foro está divido en categorías que son creadas por el administrador. Y el cliente podrá añadir tópicos de esas categorías o también podrá dentro de un tópico de otra persona responderlo. El foro tiene la siguiente estructura tendrá 3 tablas una categoría, tópico, post, estas están enlazadas de la siguiente manera. Un tópico pertenece a una categoría y un post pertenece a un tópico. Para crear el foro he usado varios archivos la forma visible del foro se encuentra en el archivo header.html y la página principal en el archivo foro.php. Luego para las categorías o los tópicos también hay otros archivos que están adjuntados en el anexo. La figura 24 muestra una captura del foro. Capitulo 7: Conclusiones Proyecto Final de carrera Lorena Momparler Fernandez 48 Capítulo 7 Conclusiones La realización de este proyecto me ha permitido aprender a realizar un proyecto de una aplicación web. Durante la carrera no había podido realizar un proyecto como este, ya que he tenido que tomar decisiones de análisis, diseño e implementación que me han ayudado a aprender nuevos conocimientos. Como yo venga de la especialidad multimedia nunca había desarrollado una página web, y este proyecto me ha ayudado a completar mis conocimientos aprendiendo una parte de la informática para mi totalmente nueva. En un principio yo quería realizar una aplicación que mostrase la información del camping y hubiera una parte en la que el usuario pudiera mandar un e-mail con información de contacto. Pero poco a poco he podido conseguir un apartado de reservas en la que el cliente puede reservar directamente el mismo y esta reserva se introdujera en la base de datos. También he añadido un foro en el cual los usuarios podrán comentarios de otra gente, me parece una gran idea porque a todo el mundo le gusta oir opiniones. El problema principal al que me tuve que someter es que no tenia apenas conociemntos de programación en páginas web y tuve que aprender desde cero php, javascript y ajax. Supongo que por ella algunas partes del proyecto se podrían mejorar. Como: • La parte de reservas se podrá en el calendario de reservas directamente que aparecieran los días libres. • Tener mayor seguridad, para que el cliente pudiera reservar mediante su tarjeta bancaria y poder encriptar sus datos. Como conclusión final puedo decir que este proyecto me ha servido para ampliar mis conocimientos, crecer profesionalmente y personalmente, lo que me convertirá en un profesional más completo. Capitulo 8: Bibliografía Proyecto Final de carrera Lorena Momparler Fernandez 49 Capítulo 8 Bibliografía Para las consultas en general use Wikipedia en español: http://es.wikipedia.org Par profundizar en contenidos php http://www.desarrolloweb.com/php/ Ayudas para crear un calendario javascript con ejemplos http://javascripts.astalaweb.com/Calendarios/1_Calendarios.asp Cursos donde encontré información sobre dreamwaver, phoshop, ajax http://www.aulaclic.es/ Asistí a tres cursillos en la universidad politécnica de: php y mysql, dreamwaver y javascript y ajax. Por lo tanto el material de los cursillos me sirvió de ayuda. Como orientación para realizar la memoria me sirvo de ayuda el libro Una guía para la realización y supervisión de proyectos final de carrera en el ámbito de la web, publicaciones universidad politécnica de valencia, autor Felix Buendia Garcia. Anexo Proyecto Final de carrera Lorena Momparler Fernandez 50 Anexos Anexo A: Manual de usaurio La aplicación web tiene diferenciada 3 tipos de usarios: visitante, cliente y administrador. El usuario visitante accederá directamente a la página de index. En la cual en la parte de la derecha arriba enontrará un menú navegacional, con el que podrá acceder a los de mas servicios de la aplicación web como localización, instalaciones, enlaces, tarifas. En la página de localización se abrirá dos mapas de google maps, uno de ellos muestra el recorrido para encontrar el camping y el segundo es un mpa de imagen satélite. Para que un usario se convierta en cliente , para poder realizar reservas o mirar la información del foro deberá regitrarse en la aplicación web. Tendrá que rellenar un formulario con sus datos personales y login lo realizará con el e-mail y el password. Cuando un usurio desee logearse en la aplicación para poder realizar una reserva, deberá logearse introduciéndose su e-mail y password. Anexo Proyecto Final de carrera Lorena Momparler Fernandez 51 Cuando el usario esté registrado podrá elegir entre hacer una nueva reserva o el foro. En el foro podrá ver mensajes de otros usuarios o introducir nuevos mensajes. En la parte de arriba al lado del logo, se encuentra el nombre del usuario que en ese momento está logeado, si el usuario quisiera desconectarse debería apretar al botón rojo. El usuario cuadno rellene los datos de su formulario, se creará una nueva reserva. Las reservas las puede consultar el cliente o se puede borrar una reserva. La parte del administrador podrá consutar las reservas y los usuarios de la aplicación y borrarlas. En la parte del foro podrá eliminar o editar las categorías, tópicos o los posts. Y sólo el adminsitrador podrá crear una categoría. Anexo Proyecto Final de carrera Lorena Momparler Fernandez 52 Anexo B: Código zona visitante Index.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inicio</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> #content { width: 100%; background-image:url(Images/fondo-bajo.jpg); height: auto; text-align:left; } #texto { width: 100%; height: auto; margin-bottom: 10px; } #contacto { width: 100%; height: auto; } .Estilo1 {font-size: medium} .Estilo2 { font-size: large; font-weight: bold; font-family: "Times New Roman", Times, serif; } .Estilo3 { font-size: medium; font-family: "Times New Roman", Times, serif; } .Estilo4 {font-family: "Times New Roman", Times, serif} </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="texto"><br /> <p class="Estilo3" style='margin-left: 1em'> Este camping está situado en el valle del MontBlanc a 5 minutos de Chamonix con vistas al Mont-Blanc.<br /> Situado lejos de la carretera y rodeado de montañas y un lago, se convierte en un precioso lugar perfecto para la salida de rutas de senderismo.<br /> Ofrecemos conexión wi-fi gratuita y organizamos rutas de senderismo y visitas al Aguille de Midi.</p> </div> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 53 <div id="contacto"> <table width="750" border="0"> <tr><td> <p style='margin-left: 1em'><span class="Estilo2">Contacto:</span><span class="Estilo4"><br /> 200, Chemin de la Bagna<br /> 74.400 Chamonix-France<br /> <br /> Número de teléfono: 00 34 695 365 568 563<br /> Fax: 00 34 695 365 568 563<br /> Correo web: [email protected] <br /> </p></td> <td><img src="Images/entrada.jpg" alt="Entrada" /></td> </tr> </table> </div> </div> </div> </div> </div> </body> </html> localizacion.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Localizacion</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/fondo-bajo3.jpg); } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; } #texto{ width: 100%; text-align: center; } #mapa{ width: 100%; text-align: center; } #satelite{ width: 100%; text-align: center; } .Estilo2 { font-size: large; font-weight: bold; } </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 54 <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Localizacion</div> <div id="barra"></div> <div id="parrafo"> <p style='margin-left: 1em'>El camping se encuentra en Les bois. Pasando el golf de chamonix hacia la derecha.<br /> En las siguientes imagenes teneis un mapa de como llegar y una vista con el satélite. Con la aplicación google earth de abajo podeis encontrar vuestra mejor ruta para llegar.</p> <p class="Estilo2" style='margin-left: 1em'>Localización en el mapa:</p> </div> <div id="mapa"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=les+bois+ChamonixMontBlanc,+France&sll=45.945421,6.8995&sspn=0.027752,0.055189&ie=UTF8&hq=&hnear=Les+B ois,+Chamonix-Mont-Blanc,+Alta+Saboya,+R%C3%B3danoAlpes,+Francia&ll=45.945241,6.899242&spn=0.020889,0.036478&z=14&iwloc=A&output=em bed"></iframe><br /><small><a href="http://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=les+bois+ChamonixMontBlanc,+France&sll=45.945421,6.8995&sspn=0.027752,0.055189&ie=UTF8&hq=&hnear=Les+B ois,+Chamonix-Mont-Blanc,+Alta+Saboya,+R%C3%B3danoAlpes,+Francia&ll=45.945241,6.899242&spn=0.020889,0.036478&z=14&iwloc=A" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small> </div> <div id="satelite"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=les+bois+ChamonixMontBlanc,+France&sll=45.945421,6.8995&sspn=0.027752,0.055189&ie=UTF8&hq=&hnear=Les+B ois,+Chamonix-Mont-Blanc,+Alta+Saboya,+R%C3%B3danoAlpes,+Francia&t=h&ll=45.945241,6.899242&spn=0.020889,0.036478&z=14&iwloc=A&o utput=embed"></iframe><br /><small><a href="http://maps.google.es/maps?f=q&source=embed&hl=es&geocode=&q=les+bois+ChamonixMontBlanc,+France&sll=45.945421,6.8995&sspn=0.027752,0.055189&ie=UTF8&hq=&hnear=Les+B ois,+Chamonix-Mont-Blanc,+Alta+Saboya,+R%C3%B3danoAlpes,+Francia&t=h&ll=45.945241,6.899242&spn=0.020889,0.036478&z=14&iwloc=A" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small> </div> </div> </div> </div> </body> </html> enlaces.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 55 <title>Enlaces</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; background-image:url(Images/barrasUb.jpg) } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/flor.jpg) } #barra{ background-color:#663300; width:100%; height:20px; } </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Enlaces</div> <div id="barra"></div> <div id="texto"><p class="Estilo3" style='margin-left: 1em'>El valle de Chamonix permite mucha variedad de actividades a realizar. Si le gusta el esquí podrá realizarlo tanto este como el esquí a fondo. También podrá ver el Mont-Blanc y sus glaciares desde la cumbre del Aguile du Midi, o realizar senderismo en rutas señalizadas</p></div> <div id="fotos"> <table width="725" border="0" align="center" > <tr><td colspan="2"><span class="Estilo1">Teleférico del Aiguille du Midi</span></td></tr> <tr> <td><img src="Images/telefericoMidi.jpg" name="aguile" width="173" height="130" id="aguile" /></td> <td>Telecabina panorámica del Mont-Blanc . Desde el centro de Chamonix , a 1035 mel teleférico del Aiguille du Midi le transportará a las puertas de la alta montaña a 3842m . Un panorama único de 360° en las cumbres del macizo del Mont-Blanc.<br /> <a href="http://www.chamonix.com/page.php?page=80&r=presentation_aiguille_midi&ling=es">Pinche aquí pra más información.</a></td> </tr> <tr><td colspan="2"><span class="Estilo1">Train de Montenvers – Mer de Glace</span></td></tr> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 56 <tr> <td><img src="Images/merGlace.jpg" width="173" height="130" /></td> <td>El famoso tren cremallera parte de Chamonix y le llevará hasta Montenvers, a 1913m de altitud. Un panorama grandioso sobre el glaciar de Mer de Glace, los Drus y los Grandes Jorasses.Donde podrá visitar una cueva de hielo.<br /> <a href="http://www.chamonix.com/page.php?page=81&r=montenvers&ling=es">Pinche aquí para más información.</a></td> </tr> <tr> <tr><td colspan="2"><span class="Estilo1">Teleferico de Bréventi</span></td></tr> <td><img src="Images/brevent.jpg" width="173" height="130" /></td> <td>Salida desde Chmonix a Brévent, a 2525m. Descubrirá la vertiente sur y sus imponentes vistas sobre la cadena del Mont-Blanc.<br /> <a href="http://www.chamonix.com/page.php?page=82&r=brevent&ling=es">Piche aquí para más información.</a></td> </tr> <tr> <tr><td colspan="2"><span class="Estilo1">Senderismo</span></td></tr> <td><img src="Images/senderismoCumbre.jpg" width="173" height="130" /></td> <td>Si le gusta el senderismo no puede dejar de visitar las caminatas por las cordilleras que rodean el Mont-Blanc. Las rutas indispensables son Grand Balcon Sud y el Grand Balcon Nord, Le chalet des Pyramides. En el enlace podrá encontrar la información necesaria.<br /><a href="http://www.chamonix.com/page.php?page=97&r=idees_randonnees&ling=es">Pincha aquí para más información.</a></td> </tr> </table> </div> <div id="textoF"><p class="Estilo3" style='margin-left: 1em'>Si está interesado en obtener más información sobre el lugar o los alrededores en el siguiente <a href="http://www.chamonix.com/page.php?page=0&r=bienvenido&ling=es">enlace</a> se le muestran muchos contenidos de interés o pregúntenos en recepción para información y reservas</p><br /> </div> </div> </div> </div> </body> </html> ins-bungalow.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Instalciones</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <link href="submenu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/fondo-inst1.jpg); } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; background-image:url(Images/barrasUb.jpg); } </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 57 <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - <a href="insservicio.html">Instalaciones </a>- Bungalow</div> <div id="header"> <ul> <!-- CSS Tabs --> <li><a href="ins-servicio.html">Servicios</a></li> <li><a href="ins-parcela.html">Parcelas</a></li> <li id="current"><a href="ins-bungalow.html">Bungalows</a></li> </ul> </div> <table width="710" border="0"align="center" > <tr> <td colspan="3"><span class="Estilo1"><br /> 2 Personas (Tonga hotelero)-17m²</span><br /> <p class="Estilo3" style='margin-left: 1em'>Una habitación con una gran cama. Una cocina equipada con un espacio para comer. Una sala de ducha con servicios. Terraza cubierta</p></td> </tr> <tr> <td width="282"><div align="center"><img src="Images/2Habitaciones1p.jpg" width="180" height="121" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/2Habitaciones1g.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=400 ,height=268')"> </div></td> <td width="206"><img src="Images/2Habitaciones3gp.jpg" width="162" height="121" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/2Habitaciones3g.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=400 ,height=300')"></td> <td width="208"><div align="center"><img src="Images/plan_2Pequenyo.jpg" name="mapa2" width="80" height="121" id="mapa2" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/plan_2Grande.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=505,he ight=896')"> </div></td> </tr> <tr> <td colspan="3"><span class="Estilo1"><strong><br /> 4 Personas (Nemo</strong>)- 20 m²</span> <br /> <p class="Estilo3" style='margin-left: 1em'>Dos habitaciones, 1 con una cama grande de matrimonio y otra habitación para las niños con literas. Una cocina espaciosa. Baño individual y terraza cubierta</p></td> </tr> <tr> <td><div align="center"><img src="Images/4Habitaciones1p.jpg" width="160" height="121" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/4Habitaciones1g.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=955 ,height=717')"> </div></td> <td><div align="center"><img src="Images/4Habitaciones2p.jpg" width="91" height="121" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/4Habitaciones2g.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=614 ,height=819')"> </div></td> <td><div align="center"><img src="Images/plano4p.jpg" width="99" height="121" /> <input type="image" name="imageField" src="Images/lupa.gif" onClick = "window.open('Images/plano4g.jpg','ayuda','resizable=yes,scrollbars=yes,menubar=yes,width=551,height= 672')"> </div></td> </tr> <tr> <td colspan="3"><span class="Estilo1"><strong><br /> 5 Personas (Morea)</strong>- 25 m² </span><br /> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 64 </tr> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT * FROM bungalowPrecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila while($fila = mysql_fetch_array($resultado)){ echo "<tr bgcolor='#9DC131'>"; echo "<td><div align='center'>",$fila['nombre'], "</div></td>"; echo "<td><div align='center'>",$fila['costeb'], " €/noche","</div></td>"; echo "<td><div align='center'>",$fila['costea'] ," €/noche","</div></td>"; echo "</tr>"; } ?> </table> </div> <div id="tarifas"> <p class="Estilo3" style='margin-left: 2em'>Temporada baja: 1 Septiembre – 8 Diciembre; 2 Enero - 7 Abril; 14 Abril - 30 Junio<br /></p> <p class="Estilo3" style='margin-left: 2em'>Temporada alta: 9 Diciembre - 1 Enero; 8 Abril – 13 Abril; 1 Julio - 31 Agosto<br /></p> <p class="Estilo3" style='margin-left: 2em'>Formas de pago: Transfernecia bancaria o giro postal<br /></p><br /> </div> </div> </div> </div> </body> </html> Reservas-ini.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <title>Reservas</title> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/FlorRese.jpg); } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; } #texto{ width: 100%; text-align: center; } Anexo Proyecto Final de carrera Lorena Momparler Fernandez 65 </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Reservas</div> <div id="barra"></div> <div id="texto"> <br /> Para poder realizar una reserva debes primero registrarte pulsando el siguiente enlace:<br /> <a href="altaNueva.html">Pulsa aquí para registrarte</a><br /> Si ya eres usuario registrado pulsa en logear y podrás consultar tus reservas pasadas y hacer nuevas reservas<br /> <a href="login.html">Loggear</a><br /> <br /> </div> </div> </div> </div> </body> </html> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 66 Anexo C: Código zona cliente login.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Login</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/FlorRese.jpg) } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; } #do { width: 100%; height: auto; text-align:center; } #texto{ width: 100%; text-align: center; } </style> <script type="text/javascript"> function enviar(){ var m=document.getElementById("mail") var c=document.getElementById("cta") if(m.value=="" || c.value=="") alert("Debe contener un e-mail y un password") else window.location=linc+'/login.php?m='+m.value+'&c='+c.value } </script> </head> <body onLoad="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 67 <div id="submenu3"><a href="enlaces.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Registro</div> <div id="barra"></div> <div id="do"> <form id="form1" name="form1" method="get"> <table width="200" border="0" align="center"> <tr> <td>E-mail:</td> <td><input name="mail" type="text" id="mail" size="30" maxlength="30"/> </td> </tr> <tr> <td>Password:</td> <td><input name="cta" type="password" id="cta" size="30" maxlength="30"/> </td> </tr> </table> </form> <div align="center"><button onClick="enviar()">Validar</button></div> </div> </div> </div> </div> </body> </html> login.php <?php session_start(); function comprobar_tipo(){ $_SESSION["mail"]=$_GET['m']; $_SESSION["cta"]=$_GET['c']; $_SESSION['user_name']=$_GET['m']; require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT mail,contrasenya,tipo FROM usuarios WHERE mail='".$_GET['m']."' AND contrasenya='".$_GET['c']."' AND tipo='1'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); if ($foo = mysql_fetch_array($resultado)){ $_SESSION['user_level']=1; header($linck."/admin.php"); }else { $_SESSION['user_level']=2; header($linck."/formulario.php"); } } require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT Dni FROM usuarios WHERE mail='".$_GET['m']."' AND contrasenya='".$_GET['c']."' "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $foo = mysql_fetch_array($resultado); if($foo!=0){ //Si coinciden mail y el pass mirar el tipo $_SESSION['user_id']=mysql_result($resultado,0); comprobar_tipo(); mysql_free_result($resultado); } else { header($linck."/error.html"); } ?> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 68 altaNueva.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Nuevo usuario</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> #content { width: 100%; height: auto; text-align:left; background-image:url(Images/flor.jpg); } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } </style> <script type="text/javascript"> var req; var respuesta; var t; function leer_doc(url) { req = false; // Llama objeto XMLHttpRequest if (window.XMLHttpRequest) { req = new XMLHttpRequest(); if (req.overrideMimeType) { req.overrideMimeType('text/xml'); } // Si no funciona intenta utiliar el objeto IE/Windows ActiveX } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req!=null){ req.onreadystatechange = procesarRespuesta; req.open('GET', url, true); req.send(null); } } function autentica(){ var dni_pat = /^\d{8}/; t="Idni"; var usuario = document.getElementById("dni").value; if (!dni_pat.test(usuario)){ alert("Error, DNI no valido. Introduzca una secuencia de 8 dígitos...") document.getElementById('enviar').disabled = true document.getElementById(t).src = "Images/error.gif" document.getElementById(t).style.visibility = "visible"; }else{ url = ajax1+"/altaNueva.php?tipo=1&usuario=" + usuario; leer_doc(url); } } function procesarRespuesta(){ respuesta = req.responseXML; var existe = respuesta.getElementsByTagName('existe').item(0).firstChild.data; if (existe=="true"){ document.getElementById('enviar').disabled = true document.getElementById(t).src = "Images/error.gif" document.getElementById(t).style.visibility = "visible"; } else{ document.getElementById('enviar').disabled = false document.getElementById(t).src = "Images/ok.gif" document.Idni.style.visibility = "visible"; } } Anexo Proyecto Final de carrera Lorena Momparler Fernandez 69 function autentica_mail(){ t="Imail" var cor_pat = /^\w+@\w+\.\w+$/; var usuario = document.getElementById("mail").value; if (!cor_pat.test(usuario)){ alert("Error, e-mail no valido. Introduzca una secuencia de la forma [email protected]"); document.getElementById('enviar').disabled = true document.getElementById(t).src = "Images/error.gif" document.getElementById(t).style.visibility = "visible"; }else{ url = ajax1+"/altaNueva.php?tipo=2&usuario=" + usuario; leer_doc(url); } } function comprobarPass(){ //Comprueba si los passwords son correctos var x=document.getElementById("cta").value var y=document.getElementById("rcta").value if(x==y){ document.getElementById("enviar").disabled = false document.pass.style.visibility = "visible"; document.getElementById("pass").src = "Images/ok.gif" } else{ document.getElementById("enviar").disabled = true document.getElementById("pass").src = "Images/error.gif" document.pass.style.visibility = "visible"; } } function comprobar_dia(){ //compreba que el numero esté entre 1-31 var Dia= document.getElementById("dia").value if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){ alert('Dia invalido') } } function comprobar_anyo(){ var Ano= document.getElementById("anyo").value if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900 || parseFloat(Ano)>1992){ alert('Año invalido') } } function numero(v){ car=v.value largo = car.length; for (i = 0; i < largo; i++) { caracter = car.charAt(i); } if((caracter >= '0' && caracter <= '9')) return true; else alert("Solo puede contener numeros") } function letra(c){ car=c.value largo = car.length; for (i = 0; i < largo; i++) { caracter = car.charAt(i); } if(((caracter >= 'a') && (caracter <='z')) || ((caracter >= 'A') && (caracter <='Z')) ) return true; else alert("Solo debe contener letras") } function enviard(){ var dia = document.getElementById("dia").value; var ano = document.getElementById("anyo").value; var mes = document.getElementById("mes").value; fecha = ano+"-" fecha+=mes+"-" fecha+=dia var nV= document.getElementById('nombre') var aV= document.getElementById('apellido') var dnV= document.getElementById('dni') var tV= document.getElementById('tlf') var eV= document.getElementById('mail') var cV= document.getElementById('cta') var pV= document.getElementById('pais') var prV= document.getElementById('provincia') var diV= document.getElementById('direc') //comprueba si los datos obligatorios estan en blanco Anexo Proyecto Final de carrera Lorena Momparler Fernandez 70 if(nV.value=="" || aV.value=="" || dnV.value=="" || tV.value=="" || eV.value=="" || cV.value=="" ){ alert("Los siguientes campos son obligatorios:\n nombre, apellidos, dni, telefono, e-mail y contraseña") }else{ var src=dnV.value+"&n="+nV.value+"&a="+aV.value+"&e="+eV.value+"&t="+tV.value+"&c="+cV.value+"&f="+fecha+ "&p="+pV.value+"&pr="+prV.value+"&di="+diV.value; window.location=linc+"/altaNueva.php?tipo=3&d="+src } } </script> </head> <body onLoad="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Registro</div> <div id="barra"></div> <div> <p style='margin-left: 1em'>Los campos con *, son obligatorios<br></p> <form name="form1" method="post" action=""> <table width="725" border="0" align="center"> <tr><td><label for="nombre">Nombre: *</label></td> <td><input type="text" name="nombre" id="nombre" onChange="letra(this)"/></td> </tr> <tr><td><label for="apellido">Apellidos: *</label></td> <td><input type="text" name="apellido" id="apellido" onChange="letra(this)"/></td> </tr> <tr><td><label for="dia">Fecha nacimiento: *</label></td> <td><input type=text name="dia" id="dia" value="01" onChange="comprobar_dia()"></td> <td><select name="mes" id="mes"> <option value="01">Enero</option> <option value="02">Febrero</option> <option value="03">Marzo</option> <option value="04">Abril</option> <option value="05">Mayo</option> <option value="06">Junio</option> <option value="07">Julio</option> <option value="08">Agosto</option> <option value="09">Septiembre</option> <option value="10">Octubre</option> <option value="11">Noviembre</option> <option value="12">Diciembre</option> </select></td> <td><input type=text name="anyo" id="anyo" value="1992" onChange="comprobar_anyo()"></td> </tr> <tr> <td> <label for="dni">Dni: *</label> </td> <td><input type="text" id="dni" onChange="return autentica();"> <img id="Idni" name="Idni" style="visibility:hidden"/></td> </tr> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 71 <tr><td><label for="tlf">Telefono: *</label></td> <td><input type="text" name="tlf" id="tlf" onChange="numero(this)"/></td> </tr> <tr> <td> <label for="mail">E-mail: *</label> </td> <td><input type="text" id="mail" onChange="return autentica_mail();"> <img id="Imail" name="Imail" style="visibility:hidden"/></td> </tr> <tr><td><label for="cta">Contraseña *:</label> </td> <td><input type="password" name="cta" id="cta" onChange="comprobarPass(this)"/></td> </tr> <tr><td><label for="rcta">Repita Contraseña *:</label></td> <td><input type="password" name="rcta" id="rcta" onChange="comprobarPass()"/><img id="pass" name="pass" style="visibility:hidden"/></td> </tr> <tr><td><label for="pais">Pais:</label></td> <td><select name="pais" id="pais"> <option value="espanya" >España</option> <option value="francia" >Francia</option> <option value="italia" >Italia</option> <option value="gb" >Gran Bretaña</option> <option value="alemania" >Alemania</option> <option value="otros" >Otros</option> </select></td> </tr> <tr><td><label for="provincia">Provincia:</label></td> <td><input type="text" name="provincia" id="provincia" onChange="letra(this)"/></td> </tr> <tr><td><label for="direc">Direccion:</label></td> <td><input type="text" name="direc" id="direc" /></td> </tr> </table> </form> <p style='margin-left: 1em'> <button id="enviar" onClick="enviard()">Enviar</button> <input type="reset" name="Submit2" value="Borrar"> <br> </p> </div><!--div tabal---> </div> </div> </div> </body> </html> altaNueva.php <?php session_start(); function comprobar_dni(){ header('Content-type: text/xml'); require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT * FROM usuarios WHERE dni='".$_GET["usuario"]."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila if ($foo = mysql_fetch_array($resultado)) { echo("<?xml version=\"1.0\" ?><existe>true</existe>"); } else { echo("<?xml version=\"1.0\" ?><existe>false</existe>"); } mysql_free_result($resultado); } function comprobar_mail(){ header('Content-type: text/xml'); require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT * FROM usuarios WHERE mail='".$_GET['usuario']."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila if ($foo = mysql_fetch_array($resultado)) { echo("<?xml version=\"1.0\" ?><existe>true</existe>"); } else { echo("<?xml version=\"1.0\" ?><existe>false</existe>"); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 72 } mysql_free_result($resultado); } function enviar(){ $_SESSION["mail"]=$_GET['e']; $_SESSION["cta"]=$_GET['c']; require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "INSERT INTO usuarios (`tipo` ,`Dni` ,`Nombre` ,`Apellidos` ,`mail` , `Telefono` ,`contrasenya` ,`Fecha` ,`Pais` ,`Provincia`,`Direccion`) VALUES ('2', '".$_GET['d']."','".$_GET['n']."', '".$_GET['a']."', '".$_GET['e']."','".$_GET['t']."', '".$_GET['c']."', '".$_GET['f']."', '".$_GET['p']."', '".$_GET['pr']."', '".$_GET['di']."')"; $resultado = mysql_query($consulta); if ($resultado){ header($linck."/formulario.php"); } else echo "<h2>Error ".mysql_errno($camping) . ": " . mysql_error($camping) . "</h2>"; } //COMPROVAMOS A QUE FUNCION VAMOS A LLAMAR if ($_GET['tipo']==1){ // se trata de un dni comprobar_dni(); } else if($_GET['tipo']==2){ // se trata de un e-mail comprobar_mail(); } else if($_GET['tipo']==3){ // se trata de un e-mail enviar(); } ?> formulario.php <?php //initialize the session if (!isset($_SESSION)) { session_start(); } // ** Logout the current user. ** $logoutAction = $_SERVER['PHP_SELF']."?doLogout=true"; if ((isset($_SERVER['QUERY_STRING'])) && ($_SERVER['QUERY_STRING'] != "")){ $logoutAction .="&". htmlentities($_SERVER['QUERY_STRING']); } if ((isset($_GET['doLogout'])) &&($_GET['doLogout']=="true")){ //to fully log out a visitor we need to clear the session varialbles $_SESSION['MM_Username'] = NULL; $_SESSION['MM_UserGroup'] = NULL; $_SESSION['PrevUrl'] = NULL; unset($_SESSION['MM_Username']); unset($_SESSION['MM_UserGroup']); unset($_SESSION['PrevUrl']); $logoutGoTo = "reservas-ini.html"; if ($logoutGoTo) { header("Location: $logoutGoTo"); exit; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Formulario</title> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <link href="comun.css" rel="stylesheet" type="text/css" /> <link href="submenu.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> /*<![CDATA[*/ /*You can also place this code in a separate file and link to it like epoch_classes.js*/ Anexo Proyecto Final de carrera Lorena Momparler Fernandez 73 var bas_cal,dp_cal,ms_cal; window.onload = function () { dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container')); dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; </script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/florReserva.jpg) } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; margin-bottom: 4px; } #Templazamiento{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } #Tfecha{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } #Treserva{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } #TUsuario{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } #TCompra{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } #Tconsuta{ background-color:#8DAB27; width:100%; height:25px; margin-bottom: 4px; } .Estilo2 { font-size: large; font-weight: bold; } .Estilo3 { font-size: x-large; font-weight: bold; } </style> <script type="text/javascript"> var temporada; var lista; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 80 <body> <div id="wrapper"> <div id="container"> <div id="cabecera"> <table width="750" height="75"> <tr> <td width="185" rowspan="3"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></td> <td width="301"> </td> <td width="248">Usuario: <input type="text" value="<?php echo $_SESSION["mail"]; ?>" readonly="readonly"/> <a href="<?php echo $logoutAction ?>"><img src="Images/logout.png" /></a></td> </tr> </table> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="actividades.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Actividades" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Formulario</div> <div id="header"> <ul> <!-- CSS Tabs --> <li id="current"><a href="formulario.php">Reservas</a></li> <li > <a href="foro.php">Foro</a></li> </ul> </div> <div class="Estilo2" id="Tconsuta">Consultar reservas</div> <div> <p style='margin-left: 1em'>Para consultar sus reservas haga click aqui: <button onclick="consultar()">Consultar</button></p></div> <div id="nuevo" style="visibility:hidden"> <form id="fborrar"> <table id="tabla_cons" align="center" style=" visibility:hidden"> <tr bgcolor="#4A8B8E"> <td>Tipo emplazamiento</td> <td>Fecha inicio</td> <td>Fecha final</td> <td>coste</td> </tr> <?php $m=$_SESSION["mail"]; $c=$_SESSION["cta"]; $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); $con="SELECT Dni FROM usuarios WHERE mail='$m'"; $res = mysql_query($con, $camping) or die(mysql_error()); $r=mysql_fetch_array($res); $h=$r['Dni']; //if($res){ //mostrar las parcelas reservadas $t="parcela"; for($i=1;$i<5;$i++){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE Dni='$h'"; //Preparación y ejecución de la consulta $resultado = mysql_query($consulta, $camping) or die(mysql_error()); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 81 //Recorrido del cursor de fila en fil while($fila = mysql_fetch_array($resultado)){ $nid=$fila['id_parcela']; $p=$nid.'-'.$x; echo "<tr bgcolor='#9DC131'>"; echo "<td><div align='center'>",'Parcela', "</div></td>"; echo "<td><div align='center'>",$fila['fecha_ini'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_fin'], "</div></td>"; echo "<td><div align='center'>",$fila['coste'], "</div></td>"; //echo "<td><input id='$x' name='$x' type='radio' value='$nid'/></td>"; echo "<td><input name='checkbox' id='$p' type='checkbox'/></td>"; } } $c="bungalow"; for($i=1;$i<5;$i++){ $x=$c.$i; $consulta = "SELECT * FROM $x WHERE Dni='$h'"; //Preparación y ejecución de la consulta $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fil while($fila = mysql_fetch_array($resultado)){ $n=$fila['id_bungalo']; $ni=$n.'-'.$x; echo "<tr bgcolor='#9DC131'>"; echo "<td><div align='center'>",'Bungalow', "</div></td>"; echo "<td><div align='center'>",$fila['fecha_ini'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_fin'], "</div></td>"; echo "<td><div align='center'>",$fila['coste'], "</div></td>"; //echo "<td><input id='$x' name='$x' type='radio' value='$n'/></td>"; echo "<td><input name='checkbox' id='$ni' type='checkbox'/></td>"; } } ?> </table> <p style='margin-left: 2em'> Para borrar selecione el elemento a borrar <button id="borrar" onclick="eliminarRe()">Eliminar</button></p> <span id="e"></span> </form> </div><!-- div nuvo --> <div class="Estilo2" id="Templazamiento">Tipo de emplazamiento</div> <div id="T1"> <p style='margin-left: 1em'>Seleccione el tipo de emplazamiento: <select name="T_Emplazamiento" id="T_Emplazamiento" onChange="mostrar_Fecha(this)"> <option value=""></option> <option value="parcela">Parcela</option> <option value="bungalow">Bungalow</option> </select></p> </div><!-- div t1--> <div class="Estilo2" id="Tfecha">Fecha de la reserva</div> <!--div Tfecha --> <div id="TF" style="visibility: hidden" > <p style='margin-left: 1em'>Seleccione la fecha de inicio y de fin</p> <p style='margin-left: 2em'>Fecha inicio: <input id="popup_container" type="text"/> Fecha fin: <input id="popup_container2" type="text"/> <button id="comprobar" onClick="comprobar_Fecha()">Comprobar</button></p><br/> </div><!-- div TF--> <span id="eed"></span> <div class="Estilo2" id="Treserva">Concepto de la reserva</div> <!--div Treserva --> <div id="TR" style="visibility:hidden"> <!--tabla PARCELA ALTA--> <table id="tabla_parcela" width="300" align="center" style="display:none"> <tr bgcolor="#4A8B8E"><div align="center"> <td><div align="center"><b>Concepto</b></div></td> <td><div align="center"><b>Cantidad</b></div></td> <td width="50"><div align="center"><b>Precio/noche unidad(TA)</b></div></td> </tr> <tr bgcolor="#F0CE0F"><td>Adulto</td><td><div align="center"> <select id="numeroAdulto" name="numeroAdulto" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 82 <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT costea FROM parcelaprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precio[$i]=$fila['costea']; $i++; } ?> <td><div align="center"><?php echo $precio[0]; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Niño</td><td><div align="center"> <select id="numeroNino" name="numeroNino" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$precio[1]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Perro</td><td><div align="center"> <input id="perro" name="perro" type="checkbox" onclick="totalParcelaA()" /> </div></td> <td><div align="center"><?php echo "$precio[2]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Caravana</td><td><div align="center"> <select id="numeroCara" name="numeroCara" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$precio[3]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>AutoCaravana</td><td><div align="center"> <select id="numeroACara" name="numeroACara" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$precio[4]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Tienda</td><td><div align="center"> <select id="numeroTienda" name="numeroTienda" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 83 <td><div align="center"><?php echo "$precio[5]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Motocicleta</td><td><div align="center"> <select id="numeroMoto" name="numeroMoto" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$precio[6]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Coche Extra</td><td><div align="center"> <select id="numeroCE" name="numeroCE" onchange="totalParcelaA()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$precio[7]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Elecricidad</td><td><div align="center"> <input id="electricidad" name="electricidad" type="checkbox" onclick="totalParcelaA()" value="0" /> </div></td> <td><div align="center"><?php echo "$precio[8]"; ?> €</div></td> </tr> </table><!--tAbla parcela alta--><br> <!--TABLA PARCELA BAJA--> <table id="tabla_parcelaBaja" width="300" align="center" style="display:none"> <tr bgcolor="#4A8B8E"> <tr bgcolor="#4A8B8E"><div align="center"> <td><div align="center"><b>Concepto</b></div></td> <td><div align="center"><b>Cantidad</b></div></td> <td width="50"><div align="center"><b>Precio/noche unidad(TB)</b></div></td> </tr> <tr bgcolor="#F0CE0F"><td>Adulto</td><td><div align="center"> <select id="numeroAdultob" name="numeroAdultob" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT costeb FROM parcelaprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $preciob[$i]=$fila['costeb']; $i++; } ?> <td><div align="center"><?php echo $preciob[0]; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Niño</td><td><div align="center"> <select id="numeroNinob" name="numeroNinob" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 84 <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo $preciob[1]; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Perro</td><td><div align="center"> <input id="perrob" name="perrob" type="checkbox" onclick="totalParcelaB()" /> </div></td> <td><div align="center"><?php echo "$preciob[2]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Caravana</td><td><div align="center"> <select id="numeroCarab" name="numeroCarab" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$preciob[3]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>AutoCaravana</td><td><div align="center"> <select id="numeroACarab" name="numeroACarab" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$preciob[4]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Tienda</td><td><div align="center"> <select id="numeroTiendab" name="numeroTiendab" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$preciob[5]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Motocicleta</td><td><div align="center"> <select id="numeroMotob" name="numeroMotob" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$preciob[6]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Coche Extra</td><td><div align="center"> <select id="numeroCEb" name="numeroCEb" onchange="totalParcelaB()"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div></td> <td><div align="center"><?php echo "$preciob[7]"; ?> €</div></td> </tr> <tr bgcolor="#F0CE0F"><td>Elecricidad</td><td><div align="center"> <input id="electricidadb" name="electricidadb" type="checkbox" onclick="totalParcelaB()" value="0" /> </div></td> <td><div align="center"><?php echo "$preciob[8]"; ?> €</div></td> </tr> </table><BR /> <!--tabla parcela baja--> <!--- PRecio total parcela --> <table id="preciosP" width="350" align="center" style="display:none"> <tr> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 85 <td bgcolor="#428C2F"><b>Precio Total</b></td> <td bgcolor='#9DC131'><span id="precioAd"></span>€/noche</td> <td><button id="botonParcelaA" value="continuar" onclick="mostrar_Datos()">Continuar</button></td> <td><button id="parcelaMod" onclick="modificarP()" style="visibility:hidden">Modificar</button></td> </tr> </table> <!---TABLA BUNGALOW--> <form name="form2"> <table id="tabla_bungalow" width="300" align="center"> <tr bgcolor="#4A8B8E"> <td><div align="center"><b>Concepto</b></div></td> <td><div align="center"><b>Cantidad</b></div></td> <td width="20"><div align="center"><b>Precio/noche unidad(TA)</b></div></td> </tr> <tr name="bunga1" id="bunga1" style="display:none"bgcolor="#F0CE0F"> <td>Bungalow 2 personas</td> <td> <input type=radio id ="bungalob" name="bungalob" value="bungalow1" onclick="PrecioBungalowA()"/></td> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT costea FROM bungalowprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precioBunga[$i]=$fila['costea']; $i++; } ?> <td><?php echo $precioBunga[0]; ?> €</td> </tr> <tr name="bunga2" id="bunga2" style="display:none" bgcolor="#F0CE0F"> <td>Bungalow 4 personas</td> <td><div align="center"><input type=radio id ="bungalob" name="bungalob"value="bungalow2" onclick="PrecioBungalowA()"/></div></td> <td><?php echo $precioBunga[1]; ?> €</td> </tr> <tr name="bunga3" id="bunga3" style="display:none" bgcolor="#F0CE0F"> <td>Bungalow 5 personas</td> <td><div align="center"><input type=radio id ="bungalob" name="bungalob" value="bungalow3" onclick="PrecioBungalowA()"/> </div></td> <td><?php echo $precioBunga[2]; ?> €</td> </tr> <tr name="bunga4" id="bunga4" style="display:none" bgcolor="#F0CE0F"> <td>Bungalow 6 personas</td> <td><div align="center"> <input type=radio id ="bungalob" name="bungalob" value="bungalow4" onclick="PrecioBungalowA()"/> </div></td> <td><?php echo $precioBunga[3]; ?> €</td></tr> </table><!--tabla gungalow alta--> </form> <!--TABLA BUNGALOW BAJA--> <form name="form1"> <table id="tabla_bungalowBaja" width="300" align="center" > <tr bgcolor="#4A8B8E"> <td><div align="center"><b>Concepto</b></div></td> <td><div align="center"><b>Cantidad</b></div></td> <td><div align="center"><b>Precio/noche unidad(TB)</b></div></td> </tr> <tr name="bunga1b" id="bunga1b" style="display:none" bgcolor="#F0CE0F"><td>Bungalow 2 personas</td> <td><input type=radio id ="bungalo" name="bungalo" value="bungalow1" onclick="PrecioBungalowP()"/></td> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 86 //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT costeb FROM bungalowprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precioBungaBajo[$i]=$fila['costeb']; $i++; } ?> <td><?php echo $precioBungaBajo[0]; ?> €/noche</td> </tr> <tr name="bunga2b" id="bunga2b" style="display:none" bgcolor="#F0CE0F"> <td>Bungalow 4 personas</td><td> <input type=radio id ="bungalo"name="bungalo" value="bungalow2" onclick="PrecioBungalowP()"/></td> <td><?php echo $precioBungaBajo[1]; ?> €</td> </tr> <tr name="bunga3b" id="bunga3b" style="display:none"bgcolor="#F0CE0F"> <td>Bungalow 5 personas</td> <td><input type=radio id ="bungalo" name="bungalo" value="bungalow3" onclick="PrecioBungalowP()" /></td> <td><?php echo $precioBungaBajo[2]; ?> €</td> </tr> <tr name="bunga4b" id="bunga4b" style="display:none" bgcolor="#F0CE0F"> <td>Bungalow 6 personas</td><td> <input type=radio id ="bungalo" name="bungalo" value="bungalow4" onclick="PrecioBungalowP()"/> </td> <td><?php echo $precioBungaBajo[3]; ?> €</td> </tr> </table><br /><!--tabla bungalow baja--> </form> <!--tabla PRECIOS BUNGALOW--> <table id="preciosB" width="300" align="center" style="display:none"> <tr> <td bgcolor="#428C2F"><b>Precio Total</b></td> <td bgcolor='#9DC131'><span id="precioB"></span>€</td> <td><button id="botonBungalow" value="continuar" onclick="mostrar_Datos()">Continuar</button></td> <td><button id="bungalowMod" onclick="modificarP()" style="visibility:hidden">Modificar</button></td> </tr> </table> </div><!--div TR --> <div class="Estilo2" id="TUsuario">Datos del usuario</div> <!--div TUsuario --> <div id="DatosU" style="visibility:hidden"> <table id="Tdatos_pesonales" style="visibility:hidden" align="center"> <?php //variables del usuario que ha recibido $m=$_SESSION["mail"]; $c=$_SESSION["cta"]; $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta $consulta = "SELECT * FROM usuarios WHERE mail='$m' AND contrasenya='$c'"; //$consulta = "SELECT * FROM usuarios WHERE mail='[email protected]' AND contrasenya='oscarp'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila while ($fila = mysql_fetch_array($resultado)){ //Proceso de cada una de las filas $nombre= $fila['Nombre']; $apellidos= $fila['Apellidos']; $dni= $fila['Dni']; $tlf= $fila['Telefono']; $mail= $fila['mail']; $cta= $fila['contrasenya']; $pais= $fila['Pais']; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 87 $provincia= $fila['Provincia']; $direccion= $fila['Direccion']; } ?> <tr><td>Nombre:</td> <td><input name="text_nonmbre" type="text" id="text_nonmbre" value="<?php echo $nombre;?>" size="40" maxlength="50"></td> </tr> <tr><td>Apellidos:</td> <td><input name="text_apellido" type="text" id="text_apellido" value="<?php echo $apellidos;?>" size="40" maxlength="50"></td> </tr> <tr><td>Dni:</td> <td><input name="text_dni" type="text" id="text_dni" readonly="readonly" value="<?php echo $dni;?>" size="40" maxlength="50"></td> </tr> <tr><td>Teléfono:</td> <td><input name="text_tlf" type="text" id="text_tlf" value="<?php echo $tlf;?>" size="40" maxlength="50"></td> </tr> <tr><td>E-mail:</td> <td><input name="text_mail" type="text" id="text_mail" value="<?php echo $mail;?>" size="40" maxlength="50"></td> </tr> <tr><td>Contraseña:</td> <td><input name="text_cta" type="text" id="text_cta" value="<?php echo $cta;?>" size="40" maxlength="50"></td> </tr> <tr><td>PaÃ-s:</td> <td><select name="text_pasis" id="text_pais"> <option value="espanya" >España</option> <option value="francia" >Francia</option> <option value="italia" >Italia</option> <option value="gb" >Gran Bretaña</option> <option value="alemania" >Alemania</option> <option value="otros" >Otros</option> </select></td> <!-- <td><input name="text_pais" type="text" id="text_pais" value="<?php echo $pais;?>" size="40" maxlength="50"></td>--> </tr> <tr><td>Provincia:</td> <td><input name="text_pro" type="text" id="text_pro" value="<?php echo $provincia;?>" size="40" maxlength="50"></td> </tr> <tr><td>Dirección:</td> <td><input name="text_direc" type="text" id="text_direc" value="<?php echo $direccion;?>" size="40" maxlength="50"></td> </tr> </table> <div align="right"><button id="datos" name="datos" onclick="datos_Reservas()">Aceptar</button> </div> </div><!--div datos usuarios --> <div class="Estilo2" id="TCompra">Datos de compra</div> <!--div TCompra --> <div id="Reserva" style="display:none"> <p class="Estilo3" style='margin-left: 2em'>Datos de la reserva</p> <span id="coste"></span> <div align="right"><button name="confirmacion" onclick="reserva()">Confirmar</button></div> </div><!--DIV RESRVA--> </div> <!-- div content --> </div> </div> </body> </html> f.php <?php require('configuracion.php'); $inicio=$_GET['fi']; $fin=$_GET['ff']; $tipo=$_GET['p']; header('Content-type: text/xml'); //Preparación y ejecución de la consulta $corre=0; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 88 //FORMA AJAX NUEVO if($tipo=="parcela"){ $t="parcela"; //$cadena=""; for($i=1;$i<5;$i++){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE (('$inicio' >= fecha_ini && '$inicio' < fecha_fin)||('$fin' > fecha_ini && '$fin' <= fecha_fin))"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); $res=mysql_num_rows($resultado); if($res>0){ $corre=0; }else { $corre=1; $cadena=$x; $_SESSION['empl']=$cadena; break; } } }else{ $t="bungalow"; $i=1; $cadena=""; while($i<5){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE (('$inicio' >= fecha_ini && '$inicio' < fecha_fin)||('$fin' > fecha_ini && '$fin' <= fecha_fin))"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); $res=mysql_num_rows($resultado); if($res>0){ $corre=0; }else { $corre=1; if($cadena=="") $cadena=$i; else $cadena=$cadena."-".$i; $_SESSION['empl']=$cadena; } $i++; } } if($corre==1) echo("<?xml version=\"1.0\" ?><existe>$cadena</existe>"); else echo("<?xml version=\"1.0\" ?><existe>false</existe>"); precio.php <?php session_start(); function precioParcelaAlta(){ require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT costea FROM parcelaprecio"; //$resultado = mysql_query($consulta, $camping) or die(mysql_error()); $resultado = mysql_query($consulta); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precio[$i]=$fila['costea']; $i++; } $res=($_GET['pA']*$precio[0])+($_GET['pN']*$precio[1])+($_GET['pC']*$precio[3]) +($_GET['pAC']*$precio[4])+($_GET['pT']*$precio[5])+($_GET['pM']*$precio[6]) +($_GET['pCE']*$precio[7]); if($_GET['pPerro']==1){ $res+=$precio[2]; } if($_GET['pElec']==1){ $res+=$precio[8]; } $_SESSION["coste"]=$res; echo $res; } function precioParcelaBaja(){ require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT costeb FROM parcelaprecio"; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 89 //$resultado = mysql_query($consulta, $camping) or die(mysql_error()); $resultado = mysql_query($consulta); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $preciob[$i]=$fila['costeb']; $i++; } $res=($_GET['pA']*$preciob[0])+($_GET['pN']*$preciob[1])+($_GET['pC']*$preciob[3])+($_GET['p AC']*$preciob[4])+($_GET['pT']*$preciob[5])+($_GET['pM']*$preciob[6])+($_GET['pCE']*$preciob[7]); if($_GET['pPerro']==1){ $res+=$preciob[2]; } if($_GET['pElec']==1){ $res+=$preciob[8]; } $_SESSION["coste"]=$res; echo $res; } function precioBungaAlta(){ require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT costea FROM bungalowprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precio[$i]=$fila['costea']; $i++; } $res=0; if( $_GET['b']=='bungalow1'){ $res=$precio[0]; } if( $_GET['b']=='bungalow2'){ $res=$precio[1]; } if( $_GET['b']=='bungalow3'){ $res=$precio[2]; } if( $_GET['b']=='bungalow4'){ $res=$precio[3]; } $_SESSION["coste"]=$res; echo $res; } function precioBungaBaja(){ require('configuracion.php'); //Preparación y ejecución de la consulta $consulta = "SELECT costeb FROM bungalowprecio "; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila $i=0; while($fila = mysql_fetch_array($resultado)){ $precio[$i]=$fila['costeb']; $i++; } $res=0; if( $_GET['n']=='bungalow1'){ $res=$precio[0]; } if( $_GET['n']=='bungalow2'){ $res=$precio[1]; } if( $_GET['n']=='bungalow3'){ $res=$precio[2]; } if( $_GET['n']=='bungalow4'){ $res=$precio[3]; } $_SESSION["coste"]=$res; echo $res; } function dias($i,$f){ $separar = explode('-',$i); $ano1 = $separar[0]; $mes1 = $separar[1]; $dia1 = $separar[2]; $separar2 = explode('-',$f); $ano2 = $separar2[0]; $mes2 = $separar2[1]; $dia2 = $separar2[2]; //calculo timestam de las dos fechas $timestamp1 = mktime(0,0,0,$mes1,$dia1,$ano1); $timestamp2 = mktime(4,12,0,$mes2,$dia2,$ano2); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 96 <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta //Fecha actual formato aaaa-mm-dd $ano = date('Y'); $mes = date('m'); $dia = date('j'); $fecha=($ano."-").($mes."-").$dia; $t="parcela"; for($i=1;$i<5;$i++){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE '$fecha'<=fecha_ini"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila while($fila = mysql_fetch_array($resultado)){ echo "<tr bgcolor='#9DC131'>"; echo "<td><div align='center'>",$x, "</div></td>"; echo "<td><div align='center'>",$fila['id_parcela'], "</div></td>"; echo "<td><div align='center'>",$fila['dni'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_ini'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_fin'], "</div></td>"; echo "<td><div align='center'>",$fila['coste'], "</div></td>"; echo "</tr>"; } } ?> </table> <table id="tabla_mostrarB" width="600" align="center" style="display:none"> <tr><td><strong>BUNGALOW</strong></td></tr> <tr bgcolor="#428C2F"> <td ><div align="center"><strong>Identificador</strong></div></td> <td ><div align="center"><strong>tipo bungalow</strong></div></td> <td ><div align="center"><strong>Dni</strong></div></td> <td><div align="center"><strong>Fecha inicio</strong></div></td> <td><div align="center"><strong>Fecha fin</strong></div></td> <td><div align="center"><strong>Coste</strong></div></td> </tr> <?php $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); //Preparación y ejecución de la consulta //Fecha actual formato aaaa-mm-dd $ano = date('Y'); $mes = date('m'); $dia = date('j'); $fecha=($ano."-").($mes."-").$dia; $t="bungalow"; for($i=1;$i<5;$i++){ $x=$t.$i; $consulta = "SELECT * FROM $x WHERE '$fecha'<=fecha_ini"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); //Recorrido del cursor de fila en fila while($fila = mysql_fetch_array($resultado)){ echo "<tr bgcolor='#9DC131'>"; echo "<td><div align='center'>",$fila['id_bungalo'], "</div></td>"; echo "<td><div align='center'>",$x, "</div></td>"; echo "<td><div align='center'>",$fila['dni'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_ini'], "</div></td>"; echo "<td><div align='center'>",$fila['fecha_fin'], "</div></td>"; echo "<td><div align='center'>",$fila['coste'], "</div></td>"; echo "</tr>"; } } ?> </table> <div id="id_eliminarR" style="display:none"> <p style='margin-left: 3em'>Escribe el identificador de la parcela que deseas eliminar: <input id="eliPar" type="text" /> <p style='margin-left: 3em'>Selecciona la de la parcela que deseas eliminar: <select name="eliParT" id="eliParT"> <option value=""></option> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 97 <option value="parcela1">parcela1</option> <option value="parcela2">parcela2</option> <option value="parcela3">parcela3</option> <option value="parcela4">parcela4</option> </select> <button id="botonEliminarR" onclick="eliminar_usuarioR()">Eliminar</button></p> </div><!-- DIV ID_ELIMINARU --> <div id="id_eliminarB" style="display:none"> <p style='margin-left: 3em'>Escribe el identificador del bungalow que deseas eliminar: <input id="eliBun" type="text" /></p> <p style='margin-left: 3em'>Seleccione el tipo de bungalow que deseas eliminar: <select name="eliBunB" id="eliBunB"> <option value=""></option> <option value="bungalow1">bungalow1</option> <option value="bungalow2">bungalow2</option> <option value="bungalow3">bungalow3</option> <option value="bungalow4">bungalow4</option> </select> <button id="botonEliminarB" onclick="eliminar_usuarioB()">Eliminar</button></p> </div> </div><!-- div reserva--> </div> </div> </body> </html> Admin2.php <?php function eliminar_usuario(){ require('configuracion.php'); //Preparación y ejecución de la consulta $consulta =" DELETE FROM usuarios WHERE Dni= '".$_GET['d']."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); echo("ok"); } function eliminar_parcela(){ require('configuracion.php'); //Preparación y ejecución de la consulta $tabla=$_GET['t']; $consulta =" DELETE FROM $tabla WHERE id_parcela= '".$_GET['d']."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); echo("ok"); } function eliminar_bungalow(){ require('configuracion.php'); //Preparación y ejecución de la consulta $tabla=$_GET['t']; $consulta =" DELETE FROM $tabla WHERE id_bungalo= '".$_GET['d']."'"; $resultado = mysql_query($consulta, $camping) or die(mysql_error()); echo("ok"); } if ($_GET['tipo']==1){ // se trata de un dni eliminar_usuario(); } if ($_GET['tipo']==2){ // se trata de un dni eliminar_parcela(); } if ($_GET['tipo']==3){ // se trata de un dni eliminar_bungalow(); } ?> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 98 Anexo E: Foro foro.php <?php //create_cat.php include 'configuracion.php'; include 'header.php'; $sql = "SELECT categoria.cat_id, categoria.cat_name, categoria.cat_description, COUNT(topico.topic_id) AS topico FROM categoria LEFT JOIN topico ON topico.topic_id = categoria.cat_id GROUP BY categoria.cat_name, categoria.cat_description, categoria.cat_id"; $result = mysql_query($sql); if(!$result) { echo 'Las categorias no estan disponibles, intentalo mas tarde.'; } else { if(mysql_num_rows($result) == 0) { echo 'Categorias no encontradas.'; } else { //prepare the table echo '<table border="1"> <tr> <th>Categoria</th> <th>Ultimo topico</th> </tr>'; while($row = mysql_fetch_assoc($result)) { echo '<tr>'; echo '<td class="leftpart">'; echo '<h3><a href="category.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . '</a></h3>' . $row['cat_description']; echo '</td>'; echo '<td class="rightpart">'; //fetch last topic for each cat $topicsql = "SELECT topic_id, topic_subject, topic_date, topic_cat FROM topico WHERE topic_cat = " . $row['cat_id'] . " ORDER BY topic_date DESC LIMIT 1"; $topicsresult = mysql_query($topicsql); if(!$topicsresult) { echo 'Ultimo topico no disponible.'; } else { if(mysql_num_rows($topicsresult) == 0) { echo 'no topicos'; } else { while($topicrow = mysql_fetch_assoc($topicsresult)) Anexo Proyecto Final de carrera Lorena Momparler Fernandez 99 echo '<a href="topic.php?id=' . $topicrow['topic_id'] . '">' . $topicrow['topic_subject'] . '</a> at ' . date('d-m-Y', strtotime($topicrow['topic_date'])); } } echo '</td>'; echo '</tr>'; } } } ?> category.php <?php //category.php include 'configuracion.php'; include 'header.php'; //first select the category based on $_GET['cat_id'] $sql = "SELECT cat_id, cat_name, cat_description FROM categoria WHERE cat_id = " . mysql_real_escape_string($_GET['id']); $result = mysql_query($sql); if(!$result) { echo 'The category could not be displayed, please try again later.' . mysql_error(); } else { if(mysql_num_rows($result) == 0) { echo 'This category does not exist.'; } else { //display category data while($row = mysql_fetch_assoc($result)) { echo '<h2>Topicos en la categoria ′' . $row['cat_name'] . '′</h2><br />'; } //do a query for the topics $sql = "SELECT topic_id, topic_subject, topic_date, topic_cat FROM topico WHERE topic_cat = " . mysql_real_escape_string($_GET['id']); $result = mysql_query($sql); if(!$result) { echo 'Los topicos no estan disponibles en este momento'; } else { if(mysql_num_rows($result) == 0) { echo 'No hay topicos en esta categoria.'; } else { //prepare the table echo '<table border="1"> <tr> <th>Topico</th> <th>Creado el</th> </tr>'; while($row = mysql_fetch_assoc($result)) Anexo Proyecto Final de carrera Lorena Momparler Fernandez 100 { echo '<tr>'; echo '<td class="leftpart">'; echo '<h3><a href="topic.php?id=' . $row['topic_id'] . '">' . $row['topic_subject'] . '</a><br /><h3>'; echo '</td>'; echo '<td class="rightpart">'; echo date('d-m-Y', strtotime($row['topic_date'])); echo '</td>'; echo '</tr>'; } } } } } ?> create_cat.php <?php //create_cat.php include 'configuracion.php'; include 'header.php'; echo '<h2>Crear una categoria </h2>'; if($_SESSION['user_level'] != 1 ) { //the user is not an admin echo 'Lo siento, no teines suficientes permisoso para acceder a esta pagina.'; } else { //the user has admin rights if($_SERVER['REQUEST_METHOD'] != 'POST') { //the form hasn't been posted yet, display it echo '<form method="post" action=""> Nombre categoria: <input type="text" name="cat_name" /><br /> Descripcion categoria:<br /> <textarea name="cat_description" /></textarea><br /><br /> <input type="submit" value="Crear categoria" /> </form>'; } else { //the form has been posted, so save it $sql = "INSERT INTO categoria(cat_name, cat_description) VALUES('" . mysql_real_escape_string($_POST['cat_name']) . "', '" . mysql_real_escape_string($_POST['cat_description']) . "')"; $result = mysql_query($sql); if(!$result) { //something went wrong, display the error echo 'Error' . mysql_error(); } else { echo 'Nueva categoria creada.'; } } } ?> create_topic.php <?php //create_topic.php include 'configuracion.php'; include 'header.php'; echo '<h2>Crear un topico</h2>'; //the user is signed in if($_SERVER['REQUEST_METHOD'] != 'POST') { //the form hasn't been posted yet, display it //retrieve the categories from the database for use in the dropdown $sql = "SELECT Anexo Proyecto Final de carrera Lorena Momparler Fernandez 101 cat_id, cat_name, cat_description FROM categoria"; $result = mysql_query($sql); if(!$result) { //the query failed, uh-oh :-( echo 'Error en la base de datos.'; } else { if(mysql_num_rows($result) == 0) { //there are no categories, so a topic can't be posted if($_SESSION['user_level'] == 1) { echo 'No puedes crear mas categorias ahora.'; } else { echo 'Despeus de hacer un topico, debes estperar a un administrador para crear las categorias.'; } } else { echo '<form method="post" action=""> Nombre: <input type="text" name="topic_subject" /><br /> Categoria:'; echo '<select name="topic_cat">'; while($row = mysql_fetch_assoc($result)) { echo '<option value="' . $row['cat_id'] . '">' . $row['cat_name'] . '</option>'; } echo '</select><br />'; echo 'Mensaje: <br /><textarea name="post_content" /></textarea><br /><br /> <input type="submit" value="Crear topico" /> </form>'; } } } else { //start the transaction $query = "BEGIN WORK;"; $result = mysql_query($query); if(!$result) { //Damn! the query failed, quit echo 'Un error ocurrio al crar tu topico, intetelo mas tarde.'; } else { //the form has been posted, so save it //insert the topic into the topics table first, then we'll save the post into the posts table $dni=$_SESSION['user_id']; $sql = "INSERT INTO topico(topic_subject, topic_date, topic_cat, topic_by) VALUES('" . mysql_real_escape_string($_POST['topic_subject']) . "', NOW(), " . mysql_real_escape_string($_POST['topic_cat']) . ", $dni )"; $result = mysql_query($sql); //$resultado = mysql_query($consulta, $camping) or die(mysql_error()); if(!$result) { //something went wrong, display the error echo 'Un error ocurrio al introducir los datos, intenlo mas tarde.<br /><br />' . mysql_error(); $sql = "ROLLBACK;"; $result = mysql_query($sql); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 102 } else { //the first query worked, now start the second, posts query //retrieve the id of the freshly created topic for usage in the posts query $topicid = mysql_insert_id(); $sql = "INSERT INTO post(post_content, post_date, post_topic, post_by) VALUES '" . mysql_real_escape_string($_POST['post_content']) . "', NOW(), " . $topicid . ", $dni )"; $result = mysql_query($sql); if(!$result) { //something went wrong, display the error echo 'Un error ocurio,intenlo mas tarde.<br /><br />' . mysql_error(); $sql = "ROLLBACK;"; $result = mysql_query($sql); } else { $sql = "COMMIT;"; $result = mysql_query($sql); //after a lot of work, the query succeeded! echo 'Ha crado satisfactoriamente <a href="topic.php?id='. $topicid . '">un nuevo topico</a>.'; } } } } ?> header.php <?php session_start(); // ** Logout the current user. ** $logoutAction = $_SERVER['PHP_SELF']."?doLogout=true"; if ((isset($_SERVER['QUERY_STRING'])) && ($_SERVER['QUERY_STRING'] != "")){ $logoutAction .="&". htmlentities($_SERVER['QUERY_STRING']); } if ((isset($_GET['doLogout'])) &&($_GET['doLogout']=="true")){ //to fully log out a visitor we need to clear the session varialbles $_SESSION['MM_Username'] = NULL; $_SESSION['MM_UserGroup'] = NULL; $_SESSION['PrevUrl'] = NULL; unset($_SESSION['MM_Username']); unset($_SESSION['MM_UserGroup']); unset($_SESSION['PrevUrl']); $logoutGoTo = "reservas-ini.html"; if ($logoutGoTo) { header("Location: $logoutGoTo"); exit; } } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Foro</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <link href="submenu.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 103 #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } </style> <script type="text/javascript" src="comun.js"></script> </head> <body onLoad="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <table width="750" height="75"> <tr> <td width="185" rowspan="3"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></td> <td width="301"> </td> <td width="248">Usuario: <input type="text" value="<?php echo $_SESSION["mail"]; ?>" readonly="readonly"/> <a href="<?php echo $logoutAction ?>"><img src="Images/logout.png" /></a></td> </tr> </table> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - <a href="formula.php">Reservas</a> - Foro</div> <div id="header"> <ul> <!-- CSS Tabs --> <li id="current"> <a href="foro.php">Foro</a></li> <?php if($_SESSION['user_level'] == 1 ){ ?> <li><a href="admin.php">Reservas</a></li> <?php }else{ ?> <li><a href="formulario.php">Reservas</a></li> <?php } ?> </ul> </div> <div id="menu2"> <a class="item" href="/sitios/Camping/foro.php">Home</a> - <a class="item" href="/sitios/Camping/create_topic.php">Crear un topico</a> - <a class="item" href="/sitios/Camping/create_cat.php">Crear una categoria</a> - <a class="item" href="/sitios/Camping/modificarForo.php">Modificar foro</a> </div> modificarForo.php <?php Anexo Proyecto Final de carrera Lorena Momparler Fernandez 104 include 'configuracion.php'; include 'header.php'; echo '<h2>Modificar foro </h2>'; if($_SESSION['user_level'] != 1 ) { //the user is not an admin echo 'Lo siento, no tienes suficientes permisoso para acceder a esta pagina.'; } else{ ?> <script type="text/javascript"> function Eliminar(lista){ if (lista[lista.selectedIndex].value=='Ecategoria'){ alert("Si elimina una categoria, eliminará todos sus topicos y sus respuestas") document.getElementById("iActualizaC").style.visibility="hidden" document.getElementById("iActualizaT").style.visibility="hidden" document.getElementById("iEliminarT").style.visibility="hidden" document.getElementById("iEliminarP").style.visibility="hidden" document.getElementById("iActualizaP").style.visibility="hidden" //VISIBLES document.getElementById("tabla_ec").style.display="block" document.getElementById("iEliminarC").style.visibility="visible" } if (lista[lista.selectedIndex].value=='Acategoria'){ document.getElementById("iEliminarC").style.visibility="hidden" document.getElementById("iActualizaT").style.visibility="hidden" document.getElementById("iEliminarT").style.visibility="hidden" document.getElementById("iEliminarP").style.visibility="hidden" document.getElementById("iActualizaP").style.visibility="hidden" //visible document.getElementById("iActualizaC").style.visibility="visible" document.getElementById("tabla_ac").style.display="block" } if (lista[lista.selectedIndex].value=='Atopico'){ document.getElementById("iEliminarC").style.visibility="hidden" document.getElementById("iActualizaC").style.visibility="hidden" document.getElementById("iEliminarT").style.visibility="hidden" document.getElementById("iEliminarP").style.visibility="hidden" document.getElementById("iActualizaP").style.visibility="hidden" // visible document.getElementById("iActualizaT").style.visibility="visible" document.getElementById("tabla_at").style.display="block" } if (lista[lista.selectedIndex].value=='Etopico'){ alert("Si elimina el topico eliminará todoas sus respuestas") document.getElementById("iEliminarC").style.visibility="hidden" document.getElementById("iActualizaC").style.visibility="hidden" document.getElementById("iActualizaT").style.visibility="hidden" document.getElementById("iEliminarP").style.visibility="hidden" document.getElementById("iActualizaP").style.visibility="hidden" //VISIBLES document.getElementById("iEliminarT").style.visibility="visible" document.getElementById("tabla_et").style.display="block" } if (lista[lista.selectedIndex].value=='Epost'){ document.getElementById("iEliminarC").style.visibility="hidden" document.getElementById("iActualizaC").style.visibility="hidden" document.getElementById("iActualizaP").style.visibility="hidden" document.getElementById("iEliminarT").style.visibility="hidden" document.getElementById("iActualizaT").style.visibility="hidden" //visible document.getElementById("iEliminarP").style.visibility="visible" document.getElementById("tabla_ep").style.display="block" } if (lista[lista.selectedIndex].value=='Apost'){ document.getElementById("iEliminarC").style.visibility="hidden" document.getElementById("iEliminarP").style.visibility="hidden" document.getElementById("iEliminarT").style.visibility="hidden" document.getElementById("iActualizaT").style.visibility="hidden" document.getElementById("iActualizaC").style.visibility="hidden" //VISIBLES document.getElementById("iActualizaP").style.visibility="visible" document.getElementById("tabla_ap").style.display="block" } } function eliminarC(){ //Saber que checkbox está seleccionado var checkboxes = document.getElementById("form1").checkbox; var cont =""; for (var x=0; x < checkboxes.length; x++) { if (checkboxes[x].checked) { cont += checkboxes[x].id+"-"; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 105 } } oXml = new XMLHttpRequest() if (oXml.overrideMimeType) { oXml.overrideMimeType('text/xml'); } oXml.onreadystatechange = function () { if (oXml.readyState == 4) { if (oXml.status == 200) { //document.getElementById("e").innerHTML = oXml.responseText var respuesta = oXml.responseText if (respuesta=="ok") { alert("Se ha eliminado la categoria "+cont+" con sus topicos y todas sus respuestas") javascript:history.go(0) } } else { alert("La página no existe") } } } try { oXml.open('GET',linc+"/modificaciones.php?tipo=1&n="+cont,true) } catch (err) { alert('Error al hacer open') } oXml.send(null) } function eliminarT(){ var checkboxes = document.getElementById("form2").checkbox; var cont =""; for (var x=0; x < checkboxes.length; x++) { if (checkboxes[x].checked) { cont += checkboxes[x].id+"-"; } } oXml = new XMLHttpRequest() if (oXml.overrideMimeType) { oXml.overrideMimeType('text/xml'); } oXml.onreadystatechange = function () { if (oXml.readyState == 4) { if (oXml.status == 200) { var respuesta = oXml.responseText if (respuesta=="ok") { alert("Se ha eliminada el topico "+cont+" y todas sus respuestas") javascript:history.go(0) } } else { alert("La página no existe") } } } try { oXml.open('GET',linc+"/modificaciones.php?tipo=2&n="+cont,true) } catch (err) { alert('Error al hacer open') } oXml.send(null) } function ActualizaC(){ document.getElementById("datosc").style.visibility="visible" document.getElementById('act').disabled = true } function Actualizacr(){ //Para averiguar que radio esta seleccionado var i; var n=document.getElementById("formA"); for (i=0;i<n.length;i++){ if (n.rcategoria[i].checked) break; } var n = n.rcategoria[i].value Anexo Proyecto Final de carrera Lorena Momparler Fernandez 112 echo 'Tu respeusta se ha crado, mira <a href="topic.php?id=' . htmlentities($_GET['id']) . '">tu topico</a>.'; } } ?> topic.php <?php //create_cat.php include 'configuracion.php'; include 'header.php'; $sql = "SELECT topic_id, topic_subject FROM topico WHERE topico.topic_id = " . mysql_real_escape_string($_GET['id']); $result = mysql_query($sql); if(!$result) { echo 'El topico no esta disponible.'; } else { if(mysql_num_rows($result) == 0) { echo 'El topico no existe.'; } else { while($row = mysql_fetch_assoc($result)) { //display post data echo '<table class="topic" border="1"> <tr> <th colspan="2">' . $row['topic_subject'] . '</th> </tr>'; //fetch the posts from the database $posts_sql = "SELECT post.post_topic, post.post_content, post.post_date, post.post_by, usuarios.Dni, usuarios.mail FROM post LEFT JOIN usuarios ON post.post_by = usuarios.Dni WHERE post.post_topic = " . mysql_real_escape_string($_GET['id']); $posts_result = mysql_query($posts_sql); if(!$posts_result) { echo '<tr><td>El post no esta disponible, preube mas tarde.</tr></td></table>'; } else { while($posts_row = mysql_fetch_assoc($posts_result)) { echo '<tr class="topic-post"> <td class="user-post">' . $posts_row['mail'] . '<br/>' . date('d-m-Y H:i', strtotime($posts_row['post_date'])) . '</td> <td class="post-content">' . htmlentities(stripslashes($posts_row['post_content'])) . '</td> </tr>'; } } //show reply box Anexo Proyecto Final de carrera Lorena Momparler Fernandez 113 echo '<tr><td colspan="2"><h2>Respuesta:</h2><br /> <form method="post" action="reply.php?id=' . $row['topic_id'] . '"> <textarea name="reply-content"></textarea><br /><br /> <input type="submit" value="Reenviar" /> </form></td></tr>'; //finish the table echo '</table>'; } } } ?> Anexo Proyecto Final de carrera Lorena Momparler Fernandez 114 Anexo F: CSS Comun.css @charset "utf-8"; /* CSS Document */ body { background-image:url(Images/fondo.jpg); } #wrapper { width: 100%; text-align: center; margin-top: 10px; } #container { width: 750px; margin-left:auto; margin-right:auto; } #cabecera { width: 100%; background-image:url(Images/hoja.jpg); height: 75px; margin-bottom: 2px; } #cuerpo { width: 100%; height: 205px; background-image:url(Images/montanya.jpg); margin-bottom: 2px; } #menu{ margin-left:auto; width:191px; height:205px; background-image:url(Images/lago.jpg) } #submenu1 { margin-left:auto; margin-right:auto; width:191px; height:40px; } #submenu2 { margin-left:auto; margin-right:auto; width:191px; height:40px; } #submenu3 { margin-left:auto; margin-right:auto; width:191px; height:40px; } #submenu4{ margin-left:auto; margin-right:auto; width:191px; height:40px; } #submenu5{ margin-left:auto; margin-right:auto; width:191px; height:40px; } @charset "utf-8"; /* CSS Document */ a:link { color: #532900; text-decoration: none; } a:visited { text-decoration: none; color: #532900; } a:hover { Anexo Proyecto Final de carrera Lorena Momparler Fernandez 115 text-decoration: none; color: #FFFFFF; } a:active { text-decoration: none; } .Estilo1 { color: #cc9933; font-size: large; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; } Epoch_styless.css table.calendar { font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; border-collapse: collapse; background-color: white; border: solid #999999 1px; background-color: white; width: 215px; text-align: center; /*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/ -moz-user-select: none; /*-khtml-user-select: none;*/ } table.calendar a { } table.calendar a:hover { } table.calendar input, table.calendar select { font-size: 10px; } table.calendar td, table.calendar th { border: 0; font-size: 10px; text-align: center; } div.mainheading { margin: 2px; } .closeBtn { /*float: right; width: 15px; /*font-size: 1.5em; height: 13px; padding: 0 0 3px 0; margin: 1px 8px 0 0; border: solid black 1px;*/ } /*all styles related to the main calendar grid*/ table.cells { border-collapse: collapse; border: solid #CCCCCC 1px; cursor: pointer; empty-cells: show; margin: 0 6px 0 6px; } /*the day headings*/ table.cells th { border: solid #CCCCCC 1px; text-align: left; font-weight: bold; color: #0054E3; width: 22px; } table.cells th.wkhead { border-right: double #CCCCCC 3px; cursor: default; width: 22px; } /*The date cells*/ table.cells td { border: solid #CCCCCC 1px; vertical-align: top; text-align: left; font-weight: bold; height: 20px; /*IE doesn't like ems*/ } table.cells td.wkhead { Anexo Proyecto Final de carrera Lorena Momparler Fernandez 116 background-color: white; text-align: center; border-right: double #CCCCCC 3px; color: #0054E3; } table.cells td.noselect { background-color: #EEEEEE; color: #BBBBBB; text-decoration: line-through; cursor: default; } table.cells td.hlday { background-color: #99FF99; } table.cells td.wkday { background-color: #DDDDDD; } table.cells td.wkend { background-color: #DDDDDD; } table.cells td.curdate { } table.cells td.cell_selected { background-color: #99CCFF; color: black; } table.cells td.notmnth { background-color: #FFFFFF; color: #CCCCCC; } table.cells td.notallowed { background-color: white; color: #EEEEEE; font-style: italic; } table.cells td.hover { background-color: #999999; } table.cells td div { padding: 1px; margin: 0; } style.css /* BEGIN BASIC FORUM STYLES */ #content { background-color: #fff; width: 100%; height: auto; text-align:left; border: 1px solid #000; float: left; font-family: Arial; } #menu2 { float: left; border: 1px solid #000; border-bottom: none; /* avoid a double border */ clear: both; /* clear:both makes sure the content div doesn't float next to this one but stays under it */ width:94%; height:20px; padding: 0 22px; background-color: #FFF; text-align: left; font-size: 85%; } #menu a:hover { background-color: #009FC1; } /* begin table styles */ table { border-collapse: collapse; width: 100%; } table a { color: #000; Anexo Proyecto Final de carrera Lorena Momparler Fernandez 117 } table a:hover { color:#373737; text-decoration: none; } th { background-color: #B40E1F; color: #F0F0F0; } td { padding: 5px; } /* Begin font styles */ h1{ font-family: Arial; color: #F1F3F1; } h3 {margin: 0; padding: 0;} /* Menu styles */ .item { background-color: #00728B; border: 1px solid #032472; color: #FFF; font-family: Arial; padding: 3px; text-decoration: none; } .leftpart { width: 70%; } .rightpart { width: 30%; } .small { font-size: 75%; color: #373737; } .topic-post { height: 100px; overflow: auto; } .post-content { padding: 30px; } textarea { width: 500px; height: 200px; } submenu.css @charset "utf-8"; /* CSS Document */ BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit; background-image:url(Images/fondo.jpg); } UNKNOWN { FONT-SIZE: small } #header { FONT-SIZE: 93%; BACKGROUND: url(Images/bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal Anexo Proyecto Final de carrera Lorena Momparler Fernandez 118 } #header UL { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none } #header LI { PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(Images/left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #header A { PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(Images/right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDINGTOP: 5px; TEXT-DECORATION: none } #header A { FLOAT: none } #header A:hover { COLOR: #333 } #header #current { BACKGROUND-IMAGE: url(Images/left_on.gif) } #header #current A { BACKGROUND-IMAGE: url(Images/right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333 } Anexo Proyecto Final de carrera Lorena Momparler Fernandez 119 Anexo G: JS comun.js // JavaScript Document //ruta linc='http://localhost/sitios/Camping' ajax1="/sitios/Camping" function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } epoch_classes.js /*!! Epoch DHTML JavaScript Calendar - Version 2.0.2 Edición española Primary JavaScript File (c) 2006-2007 MeanFreePath Free for NON-COMMERCIAL use - see website for details and updates http://www.meanfreepath.com/javascript_calendar/index.html !!*/ /** * The main Epoch class. All publicly-accessible methods and properties are called from this class */ function Epoch(name,mode,targetelement,multiselect) { var self = this; //workaround due to varying definitions of "this" in variable scopes. see http://www.meanfreepath.com/support/epoch/epoch.html#self for details //DEFINE PRIVATE METHODS //----------------------------------------------------------------------------- /** * Declares and initializes the calendar variables. All the variables here can be safely changed * (within reason ;) by the developer */ function calConfig() { miFechaActual = new Date() //extraemos el dÃ-a mes y año dia = miFechaActual.getDate() mes = parseInt(miFechaActual.getMonth()) ano = miFechaActual.getFullYear() self.versionNumber = '2.0.2'; self.displayYearInitial = self.curDate.getFullYear(); //the initial year to display on load self.displayMonthInitial = self.curDate.getMonth(); //the initial month to display on load (0-11) self.displayYear = self.displayYearInitial; self.displayMonth = self.displayMonthInitial; self.minDate = new Date(ano,mes,dia); self.maxDate = new Date(2011,11,31); self.startDay = 1; // the day the week will 'start' on: 0(Sun) to 6(Sat) self.showWeeks = true; //whether the week numbers will be shown self.selCurMonthOnly = true; //allow user to only select dates in the currently displayed month } //----------------------------------------------------------------------------- /** * All language settings for Epoch are made here. * Check Date.dateFormat() for the Date object's language settings */ function setLang() { self.daylist = new Array('Do','Lu','Ma','Mi','Ju','Vi','Sa','Do','Lu','Ma','Mi','Ju','Vi','Sa'); self.months_sh = new Array('Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 120 self.monthup_title = 'Ir al mes siguiente'; self.monthdn_title = 'Ir al mes anterior'; self.clearbtn_caption = 'Limpiar'; self.clearbtn_title = 'Limpiar todas las fechas seleccionadas en el calendario'; self.maxrange_caption = 'Este es el rango máximo'; self.closebtn_caption = 'Cierre'; self.closebtn_title = 'Cierre el calendario'; } //----------------------------------------------------------------------------- /** * Initializes the standard Gregorian Calendar parameters */ function setDays() { self.daynames = new Array(); var j=0; for(var i=self.startDay;i<self.startDay + 7;i++) { self.daynames[j++] = self.daylist[i]; } self.monthDayCount = new Array(31,((self.curDate.getFullYear() - 2000) % 4 ? 28 : 29),31,30,31,30,31,31,30,31,30,31); } //----------------------------------------------------------------------------- /** * Creates the full DOM implementation of the calendar */ function createCalendar() { var tbody, tr, td; self.calendar = document.createElement('table'); self.calendar.setAttribute('id',self.name+'_calendar'); setClass(self.calendar,'calendar'); self.calendar.style.display = 'none'; //default to invisible //to prevent IE from selecting text when clicking on the calendar addEventHandler(self.calendar,'selectstart', function() {return false;}); addEventHandler(self.calendar,'drag', function() {return false;}); tbody = document.createElement('tbody'); //create the Main Calendar Heading tr = document.createElement('tr'); td = document.createElement('td'); td.appendChild(createMainHeading()); tr.appendChild(td); tbody.appendChild(tr); //create the calendar Day Heading & the calendar Day Cells tr = document.createElement('tr'); td = document.createElement('td'); self.calendar.celltable = document.createElement('table'); setClass(self.calendar.celltable,'cells'); self.calendar.celltable.appendChild(createDayHeading()); self.calendar.celltable.appendChild(createCalCells()); td.appendChild(self.calendar.celltable); tr.appendChild(td); tbody.appendChild(tr); //create the calendar footer tr = document.createElement('tr'); td = document.createElement('td'); td.appendChild(createFooter()); tr.appendChild(td); tbody.appendChild(tr); //add the tbody element to the main calendar table self.calendar.appendChild(tbody); //and add the onmouseover events to the calendar table addEventHandler(self.calendar,'mouseover',cal_onmouseover); addEventHandler(self.calendar,'mouseout',cal_onmouseout); } //----------------------------------------------------------------------------- /** * Creates the primary calendar heading, with months & years */ function createMainHeading() { //create the containing <div> element var container = document.createElement('div'); setClass(container,'mainheading'); //create the child elements and other variables self.monthSelect = document.createElement('select'); self.yearSelect = document.createElement('select'); var monthDn = document.createElement('input'), monthUp = document.createElement('input'); var opt, i; //fill the month select box for(i=0;i<12;i++) { opt = document.createElement('option'); opt.setAttribute('value',i); if(self.displayMonth == i) { opt.setAttribute('selected','selected'); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 121 } opt.appendChild(document.createTextNode(self.months_sh[i])); self.monthSelect.appendChild(opt); } //and fill the year select box var yrMax = self.maxDate.getFullYear(), yrMin = self.minDate.getFullYear(); for(i=yrMin;i<=yrMax;i++) { opt = document.createElement('option'); opt.setAttribute('value',i); if(self.displayYear == i) { opt.setAttribute('selected','selected'); } opt.appendChild(document.createTextNode(i)); self.yearSelect.appendChild(opt); } //add the appropriate children for the month buttons monthUp.setAttribute('type','button'); monthUp.setAttribute('value','>'); monthUp.setAttribute('title',self.monthup_title); monthDn.setAttribute('type','button'); monthDn.setAttribute('value','<'); monthDn.setAttribute('title',self.monthdn_title); self.monthSelect.owner = self.yearSelect.owner = monthUp.owner = monthDn.owner = self; //hack to allow us to access self calendar in the events (<fix>??) //assign the event handlers for the controls function selectonchange() { if(self.goToMonth(self.yearSelect.value,self.monthSelect.value)) { self.displayMonth = self.monthSelect.value; self.displayYear = self.yearSelect.value; } else { self.monthSelect.value = self.displayMonth; self.yearSelect.value = self.displayYear; } } addEventHandler(monthUp,'click',function(){self.nextMonth();}); addEventHandler(monthDn,'click',function(){self.prevMonth();}); addEventHandler(self.monthSelect,'change',selectonchange); addEventHandler(self.yearSelect,'change',selectonchange); //and finally add the elements to the containing div container.appendChild(monthDn); container.appendChild(self.monthSelect); container.appendChild(self.yearSelect); container.appendChild(monthUp); return container; } //----------------------------------------------------------------------------- /** * Creates the footer of the calendar - goes under the calendar cells */ function createFooter() { var container = document.createElement('div'); var clearSelected = document.createElement('input'); clearSelected.setAttribute('type','button'); clearSelected.setAttribute('value',self.clearbtn_caption); clearSelected.setAttribute('title',self.clearbtn_title); clearSelected.owner = self; addEventHandler(clearSelected,'click',function() {self.resetSelections(false);}); container.appendChild(clearSelected); if(self.mode == 'popup') { var closeBtn = document.createElement('input'); closeBtn.setAttribute('type','button'); closeBtn.setAttribute('value',self.closebtn_caption); closeBtn.setAttribute('title',self.closebtn_title); addEventHandler(closeBtn,'click',function(){self.hide();}); setClass(closeBtn,'closeBtn'); container.appendChild(closeBtn); } return container; } //----------------------------------------------------------------------------- /** * Creates the heading containing the day names */ function createDayHeading() { //create the table element self.calHeading = document.createElement('thead'); setClass(self.calHeading,'caldayheading'); var tr = document.createElement('tr'), th; self.cols = new Array(false,false,false,false,false,false,false); //if we're showing the week headings, create an empty <td> for filler if(self.showWeeks) { th = document.createElement('th'); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 128 self.selectedDates = new Array(); self.calendar; self.calHeading; self.calCells; self.rows; self.cols; self.cells = new Array(); //The controls self.monthSelect; self.yearSelect; self.mousein = false; //Initialize the calendar and its variables{ calConfig(); setLang(); setDays(); createCalendar(); //create the calendar DOM element and its children, and their related objects targetelement = typeof(targetelement) == 'string' ? document.getElementById(targetelement) : targetelement; setMode(targetelement); self.state = 2; //0: initializing, 1: redrawing, 2: finished! self.visible ? self.show() : self.hide(); } //----------------------------------------------------------------------------- /*****************************************************************************/ /** * Object that contains the methods and properties for the calendar day headings */ function CalHeading(owner,tableCell,dayOfWeek) { //----------------------------------------------------------------------------- function DayHeadingonclick() {//selects/deselects the days for this object's day of week //reduce indirection: var sdates = owner.dates; var cells = owner.cells; var dateArray = new Array(); owner.cols[dayOfWeek] = !owner.cols[dayOfWeek]; for(var i=0;i<cells.length;i++) { //cycle through all the cells in the calendar, selecting all cells with the same dayOfWeek as this heading if(cells[i].dayOfWeek == dayOfWeek && cells[i].date.canSelect && (!owner.selCurMonthOnly || cells[i].date.getMonth() == owner.displayMonth && cells[i].date.getFullYear() == owner.displayYear)) { //if the cell's DoW matches, with other conditions dateArray[dateArray.length] = cells[i].date; } } owner.selectDates(dateArray,owner.cols[dayOfWeek],true); } //----------------------------------------------------------------------------- var self = this; self.dayOfWeek = dayOfWeek; addEventHandler(tableCell,'mouseup',DayHeadingonclick); } /*****************************************************************************/ /** * Object that contains the methods and properties for the calendar week headings */ function WeekHeading(owner,tableCell,week,tableRow) { //----------------------------------------------------------------------------- function weekHeadingonclick() { //reduce indirection: var cells = owner.cells; var sdates = owner.dates; var dateArray = new Array(); owner.rows[tableRow] = !owner.rows[tableRow]; for(var i=0;i<cells.length;i++) { if(cells[i].tableRow == tableRow && cells[i].date.canSelect && (!owner.selCurMonthOnly || cells[i].date.getMonth() == owner.displayMonth && cells[i].date.getFullYear() == owner.displayYear)) { //if the cell's DoW matches, with other conditions) dateArray[dateArray.length] = cells[i].date; } } owner.selectDates(dateArray,owner.rows[tableRow],true); } //----------------------------------------------------------------------------- var self = this; self.week = week; tableCell.setAttribute('class','wkhead'); tableCell.setAttribute('className','wkhead'); //<iehack> addEventHandler(tableCell,'mouseup',weekHeadingonclick); } /*****************************************************************************/ /** * Object that holds all data & code related to a calendar cell */ /** * The CalCell constructor function * @param Epoch owner Anexo Proyecto Final de carrera Lorena Momparler Fernandez 129 * @param HTMLTableCellElement tableCell * @param Date dateObj * @param int row * @param int week */ function CalCell(owner,tableCell,dateObj,row,week) { var self = this; //----------------------------------------------------------------------------- function calCellonclick() { if(self.date.canSelect) { if(owner.selectMultiple == true) { //if we can select multiple cells simultaneously, add the currently selected self's date to the dates array owner.selectDates(new Array(self.date),!self.date.selected,false); self.setClass(); //update the current cell's style to reflect the changes - a full redraw isn't necessary } else { //if we can only select one date at a time owner.selectDates(new Array(self.date),true,false,true); if(owner.mode == 'popup') { //update the target element's value and hide the calendar if in popup mode owner.tgt.value = self.date.dateFormat(); //use the default date format defined in dateFormat owner.tgt.dateObj = new Date(self.date); //add a Date object to the target element for later reference owner.hide(); } owner.reDraw(); //redraw all the calendar cells } } } //----------------------------------------------------------------------------- /** * Replicate the CSS :hover effect for non-supporting browsers <iehack> */ function calCellonmouseover() { if(self.date.canSelect) { tableCell.setAttribute('class',self.cellClass + ' hover'); tableCell.setAttribute('className',self.cellClass + ' hover'); } } //----------------------------------------------------------------------------- /** * Replicate the CSS :hover effect for non-supporting browsers <iehack> */ function calCellonmouseout() { self.setClass(); } //----------------------------------------------------------------------------- /** * Sets the CSS class of the cell based on the specified criteria */ self.setClass = function () { if(self.date.canSelect !== false) { if(self.date.selected) { self.cellClass = 'cell_selected'; } else if(owner.displayMonth != self.date.getMonth() ) { self.cellClass = 'notmnth'; } else if(self.date.type == 'holiday') { self.cellClass = 'hlday'; } else if(self.dayOfWeek > 0 && self.dayOfWeek < 6) { self.cellClass = 'wkday'; } else { self.cellClass = 'wkend'; } } else { self.cellClass = 'noselect'; } //highlight the current date if(self.date.getUeDay() == owner.curDate.getUeDay()) { self.cellClass = self.cellClass + ' curdate'; } tableCell.setAttribute('class',self.cellClass); tableCell.setAttribute('className',self.cellClass); //<iehack> }; //----------------------------------------------------------------------------- /** * Sets the cell's hyperlink, if declared * @param string href * @param string type ('anchor' or 'js' - default 'anchor') */ self.setURL = function(href,type) { Anexo Proyecto Final de carrera Lorena Momparler Fernandez 130 if(href) { if(type == 'js') { //Make the WHOLE cell be a clickable link addEventHandler(self.tableCell,'mousedown',function(){window.location.href = href;}); } else { //make only the date number of the cell a clickable link: var url = document.createElement('a'); url.setAttribute('href',href); url.appendChild(document.createTextNode(self.date.getDate())); self.tableCell.replaceChild(url,self.tableCell.firstChild); //assumes the first child of the cell DOM node is the date text } } }; //----------------------------------------------------------------------------- /** * Sets the title (i.e. tooltip) that appears when a user holds their mouse cursor over a cell * @param string titleStr */ self.setTitle = function(titleStr) { if(titleStr && titleStr.length > 0) { self.title = titleStr; self.tableCell.setAttribute('title',titleStr); } }; //----------------------------------------------------------------------------- /** * Sets the internal html of the cell, using a string containing html markup * @param string html */ self.setHTML = function(html) { if(html && html.length > 0) { if(self.tableCell.childNodes[1]) { self.tableCell.childNodes[1].innerHTML = html; } else { var htmlCont = document.createElement('div'); htmlCont.innerHTML = html; self.tableCell.appendChild(htmlCont); } } }; //----------------------------------------------------------------------------- self.cellClass; //the CSS class of the cell self.tableRow = row; self.tableCell = tableCell; self.date = new Date(dateObj); self.date.canSelect = true; //whether this cell can be selected or not - always true unless set otherwise externally self.date.type = 'normal'; //i.e. normal date, holiday, etc - always true unless set otherwise externally self.date.selected = false; //whether the cell is selected (and is therefore stored in the owner's dates array) self.date.cellHTML = ''; self.dayOfWeek = self.date.getDay(); self.week = week; //assign the event handlers for the table cell element addEventHandler(tableCell,'click', calCellonclick); addEventHandler(tableCell,'mouseover', calCellonmouseover); addEventHandler(tableCell,'mouseout', calCellonmouseout); self.setClass(); } /*****************************************************************************/ Date.prototype.getDayOfYear = function () //returns the day of the year for this date { return parseInt((this.getTime() - new Date(this.getFullYear(),0,1).getTime())/86400000 + 1); }; //----------------------------------------------------------------------------- /** * Returns the week number for this date. dowOffset is the day of week the week * "starts" on for your locale - it can be from 0 to 6. If dowOffset is 1 (Monday), * the week returned is the ISO 8601 week number. * @param int dowOffset * @return int */ Date.prototype.getWeek = function (dowOffset) { dowOffset = typeof(dowOffset) == 'int' ? dowOffset : 0; //default dowOffset to zero var newYear = new Date(this.getFullYear(),0,1); var day = newYear.getDay() - dowOffset; //the day of week the year begins on day = (day >= 0 ? day : day + 7); var weeknum, daynum = Math.floor((this.getTime() - newYear.getTime() - (this.getTimezoneOffset()- newYear.getTimezoneOffset())*60000)/86400000) + 1; //if the year starts before the middle of a week if(day < 4) { weeknum = Math.floor((daynum+day-1)/7) + 1; if(weeknum > 52) { nYear = new Date(this.getFullYear() + 1,0,1); nday = nYear.getDay() - dowOffset; nday = nday >= 0 ? nday : nday + 7; weeknum = nday < 4 ? 1 : 53; //if the next year starts before the middle of the week, it is week #1 of that year Anexo Proyecto Final de carrera Lorena Momparler Fernandez 131 } } else { weeknum = Math.floor((daynum+day-1)/7); } return weeknum; }; //----------------------------------------------------------------------------- Date.prototype.getUeDay = function () //returns the number of DAYS since the UNIX Epoch - good for comparing the date portion { return parseInt(Math.floor((this.getTime() - this.getTimezoneOffset() * 60000)/86400000)); //must take into account the local timezone }; //----------------------------------------------------------------------------- Date.prototype.dateFormat = function(format) { if(!format) { // the default date format to use - can be customized to the current locale format = 'd/m/Y'; } LZ = function(x) {return(x < 0 || x > 9 ? '' : '0') + x}; var MONTH_NAMES = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre','Ene','Feb','Mar','Abr','May','Jun','Jul' ,'Ago','Sep','Oct','Nov','Dic'); var DAY_NAMES = new Array('Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Dom','Lun','Mar','Mie','Jue','Vie','Sab'); var result=""; var i_format=0; var c=""; var token=""; var y=this.getFullYear().toString(); var M=this.getMonth()+1; var d=this.getDate(); var E=this.getDay(); var H=this.getHours(); var m=this.getMinutes(); var s=this.getSeconds(); value = { Y: y.toString(), y: y.substring(2), n: M, m: LZ(M), F: MONTH_NAMES[M-1], M: MONTH_NAMES[M+11], j: d, d: LZ(d), D: DAY_NAMES[E+7], l: DAY_NAMES[E], G: H, H: LZ(H) }; if (H==0) {value['g']=12;} else if (H>12){value['g']=H-12;} else {value['g']=H;} value['h']=LZ(value['g']); if (H > 11) {value['a']='pm'; value['A'] = 'PM';} else { value['a']='am'; value['A'] = 'AM';} value['i']=LZ(m); value['s']=LZ(s); //construct the result string while (i_format < format.length) { c=format.charAt(i_format); token=""; while ((format.charAt(i_format)==c) && (i_format < format.length)) { token += format.charAt(i_format++); } if (value[token] != null) { result=result + value[token]; } else { result=result + token; } } return result; }; /*****************************************************************************/ //----------------------------------------------------------------------------- function addEventHandler(element, type, func) { //unfortunate hack to deal with Internet Explorer's horrible DOM event model <iehack> if(element.addEventListener) { element.addEventListener(type,func,false); } else if (element.attachEvent) { element.attachEvent('on'+type,func); } } //----------------------------------------------------------------------------- function removeEventHandler(element, type, func) { //unfortunate hack to deal with Internet Explorer's horrible DOM event model <iehack> if(element.removeEventListener) { element.removeEventListener(type,func,false); } else if (element.attachEvent) { element.detachEvent('on'+type,func); Anexo Proyecto Final de carrera Lorena Momparler Fernandez 132 } } //----------------------------------------------------------------------------- function getTop(element) {//returns the absolute Top value of element, in pixels var oNode = element; var iTop = 0; while(oNode.tagName != 'HTML') { iTop += oNode.offsetTop || 0; if(oNode.offsetParent) { //i.e. the parent element is not hidden oNode = oNode.offsetParent; } else { break; } } return iTop; } //----------------------------------------------------------------------------- function getLeft(element) { //returns the absolute Left value of element, in pixels var oNode = element; var iLeft = 0; while(oNode.tagName != 'HTML') { iLeft += oNode.offsetLeft || 0; if(oNode.offsetParent) { //i.e. the parent element is not hidden oNode = oNode.offsetParent; } else { break; } } return iLeft; } //----------------------------------------------------------------------------- Anexo Proyecto Final de carrera Lorena Momparler Fernandez 133 Anexo H: Otras funciones Configuracion.php <?php //RUTA $linck="location:http:/sitios/Camping"; $hostname_camping = "localhost"; $database_camping = "camping"; $username_camping = "root"; $password_camping = ""; //Establecimiento de la conexión $camping = mysql_pconnect($hostname_camping, $username_camping, $password_camping) or die("NO se pudo realizar la conexión"); // Selección de la base de datos mysql_select_db($database_camping, $camping); ?> error.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Error</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/FlorRese.jpg) } #submenu { font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; } #do { width: 100%; height: auto; text-align:center; } #texto{ width: 100%; text-align: center; } .Estilo1 {font-size: large} .Estilo2 {color: #FF0000} #include file="menu.html" </style> <script type="text/javascript"> <!-- function enviar(f){ Anexo Proyecto Final de carrera Lorena Momparler Fernandez 134 var cor = f.mail.value var cor_pat = /^\w+@\w+\.\w+$/ if (!cor_pat.test(cor)) { alert("Error, correo electrónico no válido. Introduzca una secuencia de la forma [email protected]") } else{ window.location.href=linc+'/login.php?c='+f.cta.value+'&m='+f.mail.value; } } </script> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Error</div> <div id="barra"></div> <div id="do"><br /> !!Error!! <span class="Estilo2">Usuario-Contraña</span> no válidos<br /> Para volver a intentarlo pulse <a href="login.html">aquí</a><br /> <br /> </div> </div> </div> </body> </html> realizada.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Reserva correcta</title> <link href="comun.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="comun.js"></script> <style type="text/css"> body,td,th { font-family: Times New Roman, Times, serif; font-size: medium; color: #000000; } #content { width: 100%; height: auto; text-align:left; background-image:url(Images/FlorRese.jpg) } #submenu { Anexo Proyecto Final de carrera Lorena Momparler Fernandez 135 font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #552B00; width: 100%; background-image:url(Images/barrasUb.jpg); } #barra{ background-color:#663300; width:100%; height:20px; } #do { width: 100%; height: auto; text-align:center; } </style> </head> <body onload="MM_preloadImages('Images/Logo_on.gif','Images/submenuLo_on.gif','Images/submenuInst_on.gif',' Images/submenuAct_on.gif','Images/submenuTa_on.gif','Images/submenuRe_on.gif')"> <div id="wrapper"> <div id="container"> <div id="cabecera"> <div align="left"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','Images/Logo_on.gif',1)"><img src="Images/Logo.gif" alt="Logo camping" name="Logo" width="156" height="75" border="0" id="Logo" /></a></div> </div> <div id="cuerpo"> <div id="menu"> <div id="submenu1"><a href="localizacion.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sublocalizacion','','Images/submenuLo_on.gif',1)"><img src="Images/submenuLo_off.gif" alt="Localizacion" name="sublocalizacion" width="160" height="40" border="0" id="sublocalizacion" /></a></div> <div id="submenu2"><a href="ins-servicio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subInstalaciones','','Images/submenuInst_on.gif',1)"><img src="Images/submenuInst_off.gif" alt="Instalaciones" name="subInstalaciones" width="160" height="40" border="0" id="subInstalaciones" /></a></div> <div id="submenu3"><a href="enlaces.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subActividad','','Images/submenuAct_on.gif',1)"><img src="Images/submenuAct_off.gif" alt="Enlaces" name="subActividad" width="160" height="40" border="0" id="subActividad" /></a></div> <div id="submenu4"><a href="tarifa-parcela.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subTarifa','','Images/submenuTa_on.gif',1)"><img src="Images/submenuTa_off.gif" alt="Tarifas" name="subTarifa" width="160" height="40" border="0" id="subTarifa" /></a></div> <div id="submenu5"><a href="reservas-ini.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('subReserva','','Images/submenuRe_on.gif',1)"><img src="Images/submenuRe_off.gif" alt="Reservas" name="subReserva" width="160" height="40" border="0" id="subReserva" /></a></div> </div> </div> <div id="content"> <div id="submenu"><a href="index.html">Inicio</a> - Reserva realizada</div> <div id="barra"></div> <div id="do"><br /> Reserva realizada con éxito, si quires volver a reservar o cunsultar tus resrvas <a href="formulario.php">haz click aqui</a><br /> <br /> </div> </div> </div> </div> </body> </html>