All4Electro - TopCanciones [HTML5 + PHP + JSONP + MySQL]

Buenas, sin duda alguna esta sección es la que más ha costado no por el contenido que desde luego es sencillo sino porque aquí hemos sintetizado todos los conocimientos adquiridos en la asignatura TEWC. Aquí hemos usado ya el servidor 000webhost.com para subir nuestra página y crear una base de datos a la cual nos hemos debido de conectar desde nuestra página para mostrar la información de la forma mas ordenada y estéticamente hablando "bonita". Para ellos hemos uso de todo lo aprendido hasta ahora.

Esto queda reflejado en la sección TopCanciones donde se muestran las listas de inspiración como son Máxima FM (de nivel nacional) o Digitally Imported (de nivel mundial). A continuación de este pequeño tributo a lo que para mi gusto son las mejores páginas para la música electrónica conectamos a la BBDD para que nos muestre el contenido que hay en ella en una tabla esto se realiza mediante HTML ("table") y mediante JSONP y PHP para la conexión a la BBDD. Para rellenar la BBDD se puede hacer del lado cliente como viene a continuación de la página mediante un formulario el cual se válida mediante PHP para saber si todos los campos están rellenados y a continuación introduce el elemento en la página web como se puede comprobar en el listado de la BBDD. También se pueden añadir elementos del lado servidor mediante PHPMyAdmin y MySQL a través de la página del servidor 000webhost.com que posee una interfaz más sencilla y visual.

• HTML: Solo contiene una única novedad respecto a la anterior y es que para representar la información de la BBDD hemos hecho uso de las etiquetas propias de una tabla ("table"). Una vez más hemos usado un formulario con las etiquetas correspondiente a esto ("form"). Con el HTML y CSS se puede resumir en otorgar estilo y visualización uniforme a toda la página y mostrar la información de forma ordenada. Como podemos ver en la siguiente imagen:

• PHP: Aquí hemos usado bastantes archivos PHP como por ejemplo aquel necesario para conectar con nuestra BBDD alojada en el servidor. También hemos usado para el formulario PHP como podemos ver en la siguientes imágenes:

Este PHP ha sido insertado en el siguiente HTML análogamente como en la sección contáctanos para que muestre al usuario si le falta algún dato del formulario por rellenar o si su sugerencia ha sido correctamente introducida en la BBDD aquí también podemos ver MySQL (muy poquito). El resultado final es obviamente casi idéntico al de enviarMensaje.php:

• JSONP: Esto es lo que hemos usado para mostrar la información de la BBDD gracias a JSONP nos resulta más fácil ordenar la información de la BBDD el código es el siguiente:

• MySQL: Finalmente el manejo de la BBDD como ya dije al principio es a través de la página del servidor lo cual me ha simplificado completamente la tarea de crear la BBDD y definir todos sus campos esto se hace de forma muy sencilla gracias a la interfaz gráfica de servidor. Aunque en un futuro me gustaría profundizar sobre el uso de BBDD.

Conclusión: Ha sido mi último reto en mis siguientes entradas a este BLOG comentaré las demás secciones por encima ya que ninguna incorporá ninguna novedad respecto a las anteriores quería felicitar a Carlos Ángel Iglesias por su trabajo impartiendo esta asignatura y sus transparencias y su infinita paciencia. Doy por concluida la página web.