====== Fites DAW MP07 UF1 ======
====== Programació web entorn servidor ======

Els exercicis/fites tenen els següents objectius:
  - Generar pàgines HTML utilitzant estructures de dades i control de flux bàsic de PHP.
  - Enviar i processar dades amb els mètodes POST i GET.
  - Accedir a fitxers per a lectura i per a escriptura.
  - Utilitzar //sessions// per emmagatzemar informació.

L'enunciat de les [[fites]] intenten ser independents del llenguatge de programació. Disposeu igualment d'[[PHP|apunts per a iniciar-vos en PHP]] i on s'expliquen els fonaments per a resoldre les [[fites]].

{{tag> #Daw #DawMp07 #DawMp07Uf1 #DawMp07Uf01 PHP GET POST HTTP_METHODS php_sessions cookies sessions methods fita fites}}


===== Fita 1: Generació HTML =====

==== Exercici 1.1 ====
<WRAP todo>

Fes els següents exercicis en PHP.

Cal que a tots els exercicis hi hagi variables per als límits (N,M).

{{ exercicis_taules_php.png }}

</WRAP>


==== Exercici 1.2 ====
<WRAP todo>
=== Batalla Naval ===
Anem a fer una aproximació a un joc de batalla naval. Els típics elements de joc son:
  * vaixell d'una posició: fragata
  * vaixell de 2 posicions: submarí
  * vaixell de 3 posicions: destructor
  * vaixell de 4 posicions: portaavions

Realitza els següents exercicis:
  - Utilitza l'exercici 4 dels taulells de jocs amb el nom de les files (lletres) i columnes (números).
  - Crea un array amb un submarí i mostra-ho al taulell.
    * Raona quines opcions tens per definir aquest element i quina té més avantatges.
    * Comprova que funciona en horitzontal i vertical.
    * L'algorisme ha de funcionar amb qualsevol tipus de longitud de vaixell.
  - Crea un array amb un vaixell de cada tipus (fixe) i mostra-ho al taulell.
  - Crea un array amb tota una **partida amb valors aleatoris**: 4 fragates, 3 submarins, 2 destructors i 1 portaavions.
    * Els vaixells han de tenir col·locació aleatòria, incloent que puguin estar en vertical o en horitzontal.
    * Comprova que cada cop que recarregueu el tauler et surt una partida diferent.
    * No importa si els vaixells es solapen o si surten dels límits.
  - Ajusta el generador de partida anterior aplicant aquestes millores:
    * Evitar que cap vaixell surti dels límits del taulell.
    * Evitar que es solapin els vaixells.
    * Evitar que els vaixells es "toquin" (cel·les adjacents).
</WRAP>

\\

----

\\

===== Fita 2: Ús formularis amb GET i POST =====

Aquí teniu un bon exemple essencial per a la [[https://www.w3schools.com/php/php_forms.asp|gestió de les dades de formularis amb PHP]].


==== Exercici 2.1 ====
<WRAP todo>
Crea un **formulari de //login//**:
  * Fes un ''form'' que demani usuari i contrasenya. La contrasenya ha d'estar oculta (no s'ha de veure quan s'escriu).
  * Ha de tenir un diccionari //hardcoded// que contingui un conjunt de valors usuari/contrasenya vàlids.
  * Si el usuari/contrasenya que entri l'usuari al formulari coincideix amb algun dels continguts al diccionari, ens ha de contestar "Login correcte!". Si no coincideix amb cap, ha de dir "Login incorrecte".
  * Ha de ser segur: la contrasenya no s'ha de veure ni quan l'escrivim al formulari ni quan enviem les dades.
  * Quina creus que ha de ser la resposta si el //login// és incorrecte? Li informem si l'error està al nom d'usuari o a la password?
</WRAP>


==== Exercici 2.2 ====
<WRAP todo>
Generador de links. L'exercici consta de 3 pàgines.

  * ''ex22pagina1.php'': conté
    * El text QUANTITAT
    * Un formulari que envii per POST amb un sol camp: un nombre sencer amb el nom “quantitat”.

  * ''ex22pagina2.php'': mostrarà tants links (un per línia) com el nombre “quantitat” introduit al formulari anterior. Text dels links: “Comanda <n>”, on <n> seran els nombres de l’1 fins el nombre “quantitat” indicat al formulari. Per tant, tindrem els links: Comanda 1, Comanda 2, Comanda 3, … fins a Comanda n. Quan cliquem algun d’aquests links, se’ns obrirà la següent pàgina:

  * ''ex22pagina3.php'': pàgina on simplement ens sortirà un <H1> on es llegirà “Iniciar Comanda <i>” on <i> serà el nombre que apareixia al link que hem clicat prèviament.
</WRAP>

==== Exercici 2.3 ====
<WRAP todo>
Crea un **selector de skins**, amb un //dropdown menu// o ''SELECT'' que canvii els colors de la pàgina web.

''ex23pagina1.php'' :
  * Disposa d’una pàgina amb un menú desplegable amb 3 opcions de color de la teva elecció.
  * Quan s’envia, apareix la mateixa pàgina amb el fons del color sel·leccionat.

{{ menu_desplegable.png }}

La resolució la tens en aquesta pàgina [[https://cacauet.org/wiki/index.php/PHP_Forms|PHP forms: selector de skins]].

</WRAP>
==== Exercici 2.4 ====

<WRAP todo>
Formulari per comprovar la correcció d'una contrasenya repetida en 2 camps.

''ex24pagina1.php'' : conté
  * Un formulari que envii per POST amb dos camps amb els noms: “contrasenya1” i “contrasenya2”.
  * Un botó d’enviament (submit).

''ex24pagina2.php'' : realitzarà 2 tests (i cap més) per assegurar la contrasenya:
  - Comprovar que els 2 camps continguin la mateixa contrasenya. Si no es compleix, donarà el missatge “ERROR: les contrasenyes han de coincidir”.
  - Ha de comprovar que la contrasenya tingui al menys 1 número. Si no es compleix, donarà el missatge “ERROR: la contrasenya ha de tenir al menys un número”.

La pàgina no realitzarà cap altra comprovació.
</WRAP>

\\

----

\\

===== Fita 3: Ús de FITXERS =====

==== Exercici 3.1 ====
<WRAP todo>
Consta d’1 pàgina PHP i 2 arxius TXT.

  * ''contactes31.txt'' :
    * Crea el fitxer de dades manualment amb dades de 4 contactes inventats, un per línia. 
    * Les dades van seaparades per comes:
      * nom, cognom1, cognom2, telèfon

  * ''ex31.php'':
    * Mostra el text PROCESSA CONTACTES
    * Obre el fitxer ''contactes31.txt'' i el llegeix
    * Mostra els contactes del fitxer en una taula.
    * Genera un fitxer ''contactes31b.txt'' on has de traspassar tots els contactes de ''contactes31.txt'', però enlloc de separats per comes, separats pel símbol #
</WRAP>

==== Exercici 3.2 ====
<WRAP todo>
Consta d’1 sola pàgina PHP i 1 arxiu TXT.

  * ''comentaris.txt'' : el crearà la pàgina PHP

  * ''ex32.php'' (ull, només 1 pàgina):
    * Mostra un formulari enviat amb POST amb:
      * El text INTRODUEIX DADES
      * Un textarea amb name = “comentari”
      * Un camp de text amb el label “separador:” i amb name = “separador” 
      * Botó d’enviar.
    * Si es reben dades:
      * Si no existís el fitxer ''comentaris.txt'' , el creem.
      * Afegim al fitxer ''comentaris.txt'' el contingut del camp “comentari” però substituint els espais pel text introduït a “separador”.
</WRAP>

==== Exercici 3.3 ====

<WRAP todo>

''ex33.txt'' : crea un arxiu de text i dona-li els permisos adequats per tal que Apache hi pugui escriure. Posa algun text d'exemple tipus //lorem ipsum//.

''ex33pagina1.php'' : la pàgina ha de mostrar
  * El contingut de l’arxiu “text.txt”
  * Un formulari amb un camp de text (textarea) i un botó de //submit//. Quan s’envia el text, s’afegeix a l’arxiu ''ex33.txt'' i es torna a mostrar tot.
  * Després de cada missatge enregistrat afegirem una línia horitzontal per separar cadascun dels comentaris transmesos.

</WRAP>


==== Exercici 3.4 ====

<WRAP todo>
Ens demanen un conversor per a una wiki similar a Markdown. A partir d’un arxiu de text, caldrà mostrar una pàgina web HTML amb seccions. Les seccions es marcaran amb el símbol ''##'' a l’inici de la línia, que s’ha de mostrar amb el tag ''<H1>''.

^ Arxiu de text:          ^ Codi generat ^ Visualitzem: |
| ## La 1a Guerra Mundial | <h1>La 1a Guerra Mundial</h1> | <html><h1>La 1a Guerra Mundial</h1></html> |


Caldrà crear 2 arxius:

''ex34.txt'':
  * Contindrà el text de l’article de la wiki que volem mostrar, amb al menys 2 títols.
  * Els salts de línia del .txt no es mostraran al renderitzar HTML, així que si en volem crear-los a l'arxiu de text caldrà indicar-los amb un <BR>.

''ex34pagina1.php'' :
  * Carregarà el text del l’arxiu “article.txt”.
  * Substituirà les marques de títol ''##'' per ''<H1>'' i les mostrarà.

</WRAP>

==== Exercici 3.5 ====
NOTA: aquest exercici combina formularis i arxius.

<WRAP todo>
L'exercici consta de 3 arxius:
  - ''productes.txt'' : contindrà una llista de productes, un per línia.
  - ''botiga.php'' : llegirà el contingut de ''productes.txt'' i crearà un formulari amb:
    * Un checkbox per cada producte amb el nom del producte.
    * Un input text per al nom de l'usuari.
    * Un submit button.
  - ''comandes.txt'' : quan s'envii el formulari es guardarà la comanda en aquest arxiu de text, de la forma:<code>nom_d'usuari,prod1,prod2,etc.</code>
</WRAP>

\\

----

\\

===== Fita 4: Ús de PHP SESSIONS ======

==== Exercici 4.1 ====
<WRAP todo>
Farem un joc de "endevina el número" en 3 pàgines.

  * ''ex41pagina1.php'': mostrarà
    * El text ENREGISTRA NOMBRE
    * Un formulari per introduir un camp per un número sencer, amb el nom “ocult”. El formulari s’envia a la pàgina ''ex41pagina2.php''

  * ''ex41pagina2.php'': mostrarà
    * El text NOMBRE ENREGISTRAT
    * Guardarem el nombre “ocult” a la variable de sessió amb la clau “ocult”. 
    * Un enllaç amb el text “Endevinar” per accedir a ''ex41pagina3.php''

  * ''ex41pagina3.php'': mostrarà
    * El text ENDEVINA EL NOMBRE
    * Si no s’ha enviat la dada “endevina”:
      * Un formulari amb un camp per introduir un número sencer, amb nom “endevina”. El formulari s’envia a la mateixa pàgina.
    * Si s’ha enviat la dada “endevina”:
      * Compararà el nombre “ocult” amb “endevina” i ens dirà si és menor, major o igual.
      * Si és igual ens felicitarà, i ens mostrarà un link a ''ex41pagina1.php''
      * Si no és igual ens torna a mostrar el formulari per a introduir el número sencer amb nom “endevina”.
</WRAP>

==== Exercici 4.2 ====
<WRAP todo>
Consta de 3 pàgines.

  * ''ex42pagina1.php'': mostrarà
    * El text ENREGISTRA FRASE
    * Un formulari per introduir un camp de text, amb el name del camp del formuari = “frase1”. El formulari s’envia a la pàgina ''ex42pagina2.php''

  * ''ex42pagina2.php'': mostrarà
    * El text ENREGISTRA FRASE 2
    * Guardarem el text “frase1” a la variable de sessió amb la clau “frase1”.
    * Un formulari per introduir un camp de text, amb el name del formuari=“frase2”. El formulari s’envia a la pàgina ''ex42pagina3.php''

  * ''ex42pagina3.php'': mostrarà
    * El text COINCIDÈNCIES
    * Un enllaç per tornar a ''ex42pagina1.php''
    * Desmuntarem les paraules de frase1 i frase2 i les compararem:
      * Si al menys 1 paraula coincideix, es mostrarà el text:
        * “la paraula XXXX està a les dues frases”.
      * Si no hi ha cap paraula que coincideixi, es mostrarà el text:
        * “No hi ha cap coincidència.”
</WRAP>


==== Exercici 4.3 ====

<WRAP todo>
Farem una “màquina d’escriure” o un “teclat en pantalla” que anirà enregistrant i mostrant els caràcters que anem clicant.

''ex43pagina1.php'' : mostrarà
  * Un mínim de 10 enllaços amb 10 lletres diferents (millor si fas tot l’abecedari).
  * Cada enllaç tindrà associada una lletra i l’enviarà amb mètode GET a la mateixa pàgina actual.
  * En una variable de sessió anirem acumulant les lletres que l’usuari vagi marcant, i les mostrarem en un quadre de text a dalt de la pàgina, sobre el "teclat virtual".

</WRAP>
    

==== Exercici 4.4 ====

<WRAP todo>
Prendre notes de text. Consta d’una sola pàgina PHP.

''ex44pagina1.php'' :
  * Disposa d’un formulari amb un camp de text (textarea) i un botó de submit. Quan s’envia el text, aquest s’afegeix al contingut d’una variable de sessió i es mostrarà a l’usuari.
  * Al final del text emmagatzemat s’afegiran 2 salts de línia per visualitzar i distingir cadascun dels enviaments.
  * El text s’acumularà cada cop que s’envii la pàgina.

</WRAP>