Para esta última parte del proyecto he completado las secciones de mi página; la he pasado a formato php; y, por último, he realizado una base de datos consistente en un formulario de pruebas al club.
Respecto a la página de index, he actualizado el plugin de fotos inicial para que tenga secciones más recientes. Por otro lado, he modificado el formulario para que pueda adaptarse a las necesidades de mi base de datos, y he eliminado el icono del patrocinador puesto que no encajaba a la perfección con el resto de elementos:
Para la plantilla, me he inspirado en webs profesionales como la plantilla del Real Madrid, adaptando el diseño y efectos a mis necesidades y a concordancia de la página, que dispone de efectos al navegar sobre ellas:
La sección de resultados consta de un enlace que te redirecciona a la página oficial de la FFMadrid, específicamente a la sección que corresponde con la liga de La Mancha detallada.
Por otro lado, atendiendo a la sección de galería, he adaptado el plugin Jquery que venía por defecto con la plantilla añadiendo nuevas interacciones y agrupando las fotos en grupos según las jornadas:
Que dispone de efectos al navegar y se pueden agrandar.
Como última sección, las cronicas deportivas ha sido la más costosa de realizar en tanto que era menos dinámica, pues consta de los resúmenes de todas las jornadas añadidas en la web, jugando mucho con el diseño de la página y los esquemas de las crónicas:
Recursos empleados:
Css: De entre los recursos css empleados tanto en esta parte como en la anterior no especificados, se encuentran los degradados de las cabezeras, las interacciones con hipervínculos, la personalización de elementos html como el salto de línea, los inputs del formulario, los botones de cambio de páginas y hojas de las crónicas (entre otros), efectos en imágenes de galería, esquemas de encuadramiento y fondos. Un resumen de algunos de los nuevos efectos incorporados son:
BS3: De entre los recursos bs3 resalta el <iframe> utilizado para añadir el mapa de google maps, adaptado en dimensiones al conjunto de la página de index, la adaptación del contenido a dispositivos móviles mediantes el empleo reiterado del col-md, col-sm.. juntos con rows; los glyphicons empleados, la adaptación del favicon a las dimensiones de diferentes dispositivos, filtros empleados para buscar cada jornada en galería, otras etiquetas típicas de bs3...
Ejemplo iframe
Ejemplo de filtros
Jquery: Entre los recursos jquery están los plugins adaptados de la plantilla a la página inicial y a la galería para la disposición, visualización e interacción de imágenes, según lo buscado en mi página, como los iconos de apertura en la galería y las transición de texto en la página index.
Migración a PHP:
La migración de la web a la extensión de php se ha realizado con la finalidad de manejar mejor el tema de la base de datos, y para facilitar la escritura de la misma de modo que cada página las dividamos en varias secciones php comunes a todas las demás. En mi caso, solo algunas secciones coinciden entre todas, debido a que a lo mejor cambia el boton a active del header, cambia el titular... Es por ello, que la división realizada es la siguiente:
Un ejemplo de una parte sería:
Que se añaden a cada página mediante:
<?php include "template/<PARTEQUEQUERAMOS>.php"; ?>
Base de datos:
Para realizar mi base de datos he tomado como ejemplo los formularios de pruebas/inscripción de los equipos: rellenas el formulario, se guarda en la base de datos del club de modo que ellos observen que quieres realizar las pruebas, y contactan con cada uno para informarles de los horarios de entrenamiento.
Lo primero que he hecho ha sido crear una tabla con unos primeros valores en mysql, para ello entramos en hostinger y en la pestaña de base de datos, nos creamos nuestra base. Posteriormente, vamos a phpmyadmin y modificamos nuestros campos:
En la primera imagen podemos ver la pagina de creación de tabla, donde se deben rellenar los tres primeros campos, aunque puedes poner valores autoincrementables como la fecha, clave primarias u otros. La segunda, es mi tabla realizada.
Para establecer contacto con el servidor de la base de datos, creamos:
El primer archivo sirve para establecer conexión con la base de datos que tenemos en hostinger:
Donde entre medias situamos $dbpass con nuestra contraseña.
El segundo archivo actúa sobre la base de datos una vez establecida conexión:
En la cabecera del formulario, se cambia el get por el post y se llama en primera instancia a la clase pruebas.php, para así que al rellenar el formulario se introduzcan nuestros datos en la base de datos.
El último paso es crear la página de respuesta del formulario imprimiendo todos los valores que hasta el momento se hayan en la base de datos:
