Web Tasks

En aquesta activitat desenvolupareu una aplicació web per a realiztar qüestionaris.

Pàgines estàtiques

Comença el desenvolupament de l'aplicació creant una versió estàtica. Aquesta versió t'ajudarà a veure què és el que s'ha d'aconseguir. Després desenvoluparàs la versió dinàmica basant-te en aquest prototip estàtic.

L'aplicació tindrà tres pàgines:

crear_pregunta

Crea un arxiu crear.html i desenvolupa el prototip estàtic. Aquest prototip no funcionarà, però et servirà de guia per veure com ha de ser el resultat final.

Aquesta paàgina mostrarà un formulari per introduir una pregunta i les seves quatre respostes possibles (indicant quina és la correcta).

Un cop introduïdes les dades de la pregunta, el professor farà clic al botó. Les dades del formulari s'afegiran a la URL formant una petició com aquesta: http://10.0.0.1/admin.html?pregunta=El+cielo+es&resposta1=verde&resposta2=azul&resposta3=lila&resposta4=rojo&correcta=2

Respondre

La pàgina respondre.html mostrarà les preguntes i permetrà a l'alumne seleccionar les respostes.

Comença escrivint primer el codi HTML. Després posaràs l'estil (colors, tamanys) amb CSS.

El resultat hauria de ser una cosa semblant a aquesta:

Formulari:

Llista:

Queries

El següent pas és comprovar que les accions d'afegir i eliminar posen les dades correctes a la query, ja que aquestes dades després les utilitzarà el servidor. És clar, que de moment aquestes accions no funcionaran, però ho faran quan programis el servidor.

Quan l'usuari prem el botó "Afegir", a la query s'han de posar la descripció i la prioritat de la tasca. La query hauria de quedar semblant a aquesta: ?afegir=Fer exercici&prioritat=ALTA (en lloc de "Fer exercici" i "ALTA", haurien de ser els valors que l'usuari introdueixi al formulari).

Quan l'usuari prem l'enllaç d'eliminar, a la query s'ha d'afegir la tasca que s'ha d'eliminar. És important que a aquesta dada li posis un nom diferent per a distingir-la de la dada que s'utilitza per a afegir. La query per a eliminar una tasca hauria de quedar així: ?eliminar=Fer exercici (en lloc de "Fer exercici", hauria de ser la descripció de la tasca corresponent).

Estil CSS

El següent pas és crear el codi CSS que permeti veure en diferents colors les tasques segons la seva prioritat.

Hauràs de crear dues classes CSS distintes, una per a la prioritat ALTA i una altra per a la BAIXA. Als elements de classe ALTA se'ls posarà un color de fons, i als de classe BAIXA se'ls posarà un altre color diferent.

Exemple:

<style> .classe-exemple-1 { background-color: red; } .classe-exemple-2 { background-color: green; } </style> <p class="classe-exemple-1">Aquest text es veu en fons red</p> <p class="classe-exemple-2">Aquest text es veu en fons green</p>

Per últim pots canviar el tamany de les imatges amb la propietat width i pots donar una mica d'espai als elements de la llista amb les propietats margin i padding .

Exemple:

.icona { width: 1em; } .tasca { margin: 1em; padding: .5em; }

Després d'aplicar el CSS, la pàgina hauria de quedar semblant a aquesta:

Pàgina dinàmica

Per a fer la pàgina dinàmica l'hauràs de desenvolupar amb PHP i utilitzar MySQL per a guardar les tasques.

Base de dades

El primer pas serà crear la base de dades.

Utilitza la comanda mysql -e per a executar les accions sobre la base de dades.

mysql -e "ACCIO_A_REALITZAR"

Les accions bàsiques que es poden realitzar són:

Entrega

Caldrà que publiqueu el codi en un repositori de github amb el nom: smx-m8-a3. Aquest repositori haurà de contenir els següents arxius: