bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
fites_daw_mp07_uf1

Fites DAW MP07 UF1

Programació web entorn servidor

Els exercicis/fites tenen els següents objectius:

  1. Generar pàgines HTML utilitzant estructures de dades i control de flux bàsic de PHP.
  2. Enviar i processar dades amb els mètodes POST i GET.
  3. Accedir a fitxers per a lectura i per a escriptura.
  4. Utilitzar sessions per emmagatzemar informació.

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

Fita 1: Generació HTML

Exercici 1.1

Fes els següents exercicis en PHP.

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

Exercici 1.2

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:

  1. Utilitza l'exercici 4 dels taulells de jocs amb el nom de les files (lletres) i columnes (números).
  2. 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.
  3. Crea un array amb un vaixell de cada tipus (fixe) i mostra-ho al taulell.
  4. 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.
  5. 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).




Fita 2: Ús formularis amb GET i POST

Aquí teniu un bon exemple essencial per a la gestió de les dades de formularis amb PHP.

Exercici 2.1

Crea un formulari de login:

  • 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!».
  • 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?

Exercici 2.2

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.

Exercici 2.3

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.

La resolució la tens en aquesta pàgina PHP forms: selector de skins.

Exercici 2.4

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:

  1. Comprovar que els 2 camps continguin la mateixa contrasenya. Si no es compleix, donarà el missatge “ERROR: les contrasenyes han de coincidir”.
  2. 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ó.




Fita 3: Ús de FITXERS

Exercici 3.1

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 #

Exercici 3.2

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”.

Exercici 3.3

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.

Exercici 3.4

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>

La 1a Guerra Mundial

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à.

Exercici 3.5

NOTA: aquest exercici combina formularis i arxius.

L'exercici consta de 3 arxius:

  1. productes.txt : contindrà una llista de productes, un per línia.
  2. 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.
  3. comandes.txt : quan s'envii el formulari es guardarà la comanda en aquest arxiu de text, de la forma:
    nom_d'usuari,prod1,prod2,etc.




Fita 4: Ús de PHP SESSIONS

Exercici 4.1

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”.

Exercici 4.2

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.”

Exercici 4.3

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».

Exercici 4.4

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.
fites_daw_mp07_uf1.txt · Darrera modificació: 2023/10/06 16:02 per enric_mieza_sanchez