Mostra la font per a Formulari + full d'estils + Javascript: tenda Balmes

=Desenvolupament=
Com a conclusió de tot el que hem vist fins ara, anem a dissenyar un formulari web, amb els següents requisits:
*es defineix una estructura per a la pàgina web: capçalera, barra esquerra, barra dreta, peu, i zona principal. El formulari estarà en la zona principa. Aquesta estructura es crea amb capes (etiqueta ''div'')
*tindrem un full d'estils que aglutina tota la part de disseny
*el formulari tindrà associat unes funcions Javascript que controlaran el seu funcionament en la part del client (NIF correcte, login i password mínim 6 caràcters, codi postal són números, telèfon són números i caràcters especials, mail vàlid).

Pots trobar la web del Balmes i els fitxers que necessites a:
*http://joanqc.no-ip.biz/iesbalmes/wec/tenda/pr1/registre.php
*fitxers: http://joanqc.no-ip.biz/iesbalmes/wec/tenda/pr1.zip

En la següent pràctica (pr2/) introduirem la informació dins de la base de dades (crearem una base de dades mysql, i una taula ''LOGIN''). Aleshores l'usuari es podrà ''logar'' i consultarem a la base de dades que el login i password siguin correctes, i obrirem una sessió (''Session'') php per a la connexió. (però això serà la següent pràctica).

==Maquetació==
La maquetació fa referència a l'estructura de la web, les diferents zones que definirem. En la nostra web podem distingir:
*capçalera (i subcapçalera)
*barra esquerra (que inclou un menú)
*barra dreta
*zona principal
*peu

La maquetació s'aconsegueix amb capes. De les capes en podem definir les dimensions (altura i amplada), i el posicionament (relatiu, absolut,...). Per defecte, si no diem res, les capes sempre intenten ocupar la posició cap amunt i cap a l'esquerra. Amb les capes podem aconseguir efectes especials, com ara solapaments, transparències.

Si mires el codi font de la pàgina pots distingir les següents parts:
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

	<head>
	...
	</head>

<body>

<!-- ##### Capçalera ########################################################## -->
	<div id="capcalera">
	...
	</div>

<!-- ##### Barra esquerra ########################################################## -->
    <div id="barra_esquerra">				
		<div id="menu_esquerra">
		...
		</div>
	</div>

<!-- ##### Barra dreta ########################################################## -->
	<div id="barra_dreta">
	...
	</div>
	
<!-- ##### Zona principal ########################################################## -->
    <div id="zona_ppal">
    <div id="contingut1">

		<form name="form_registre" method="post" action="registre.php" >
		...
		</form>

    </div> <!-- fi contingut1-->		
    </div> <!-- fi zona_ppal-->

<!-- ##### Peu ########################################################## -->

	<div id="peu">
	...
	</div>
	
  </body>
</html>
</pre>
Per tant, tenim definida l'estructura mitjançant capes. Evidentment, l'ordre seqüencial de dalt a baix és el primer que preval. Després, si volem estudiar altres aspectes de posicionament i dimensions, hem d'estudiar el full d'estils.

la funcionalitat principal de tot el projecte radica en la zona principal. Per tant, és habitual incloure en fitxers externs tot el codi que és comú per a les diferents pàgines del projecte. En aquest projecte considerarem els següent fitxers: ''head.php, cap_esq_dreta.php, peu.php'', i la pàgina ''registre.php'', que és la que inclou el formulari, queda de la següent manera:
<pre>
<!-- #INCLUDE FILE="head.php" -->

<body>

<!-- #INCLUDE FILE="cap_esq_dreta.php" -->

<!-- ##### Zona principal ###### -->
<div id="zona_ppal">
<div id="contingut1">
...
<form name="form_registre" method="post" action="registre.php" >
...
</form>
</div> 		
</div> 

<!-- #INCLUDE FILE="peu.php" -->
</pre>
*A la pàgina head.php està definit l’encapçalament HTML, en el HEAD les funcions de Javascript que utilitzarem.
*A la pàgina cap_esquerra_dreta.php trobem l’estructura de la capçaera, menú esquerra, subcapçalera i barra dreta.
*A la pàgina peu.php trobem el contingut del peu, i finalitza amb l’esperat </html>
Aquests fitxers són comuns a totes les pàgines, de manera que si volem afegir un nou item al menú, només cal editar el fitxer cap_esquerra_dreta.php, i el resultat serà visible a totes les pàgines.

El menú que es presenta (que actualment té 4 items), és de fet un menú que admet desplegament fins a 3 nivells.
==Full d'estils CSS==
Pots accedir al full d'estils que utilitzarem des del següent enllaç:
*http://joanqc.no-ip.biz/iesbalmes/wec/tenda/pr1/css/fulla_estils_tenda.css

Es comentarà a classe aquest full d'estils. Concretament, es localitzarà dins del full d'estils els següents aspectes:
*colors (gradació de marrons)
*Labels del formulari. On està definida l'amplada? On està definit que els camps obligatoris estiguin en negreta, i els camps opcionals en font normal?
*caixes de text del formulari. On està definida la seva amplada?
*Fieldset dins d'un formulari. Per a què serveixen? On està definida la línia horitzontal que separa els fieldsets?
*On està definida la fotografia del '''Jaume Balmes''' a la capçalera?

==Llibreria de Javascript==
Les funcions de Javascript que defineixen la validació del formulari estan definides en un fitxer extern. L'enllaç directe és:
*http://joanqc.no-ip.biz/iesbalmes/wec/tenda/pr1/js/llibreria.js

En aquest codi pots veure, entre d'altres, les següents funcions que utilitzarem per validar el formulari: ''textCounter'' (hi ha camps que tenen un límit per al número de caràcters permesos), checkmaj (al programador no li agrada que la gent introdueixi les dades en majúscules), allowChars (hi ha camps que tenen uns caràcters permesos, com per exemple el telèfon, mòbil, codi postal), validar_nifcif, num_min (el login i password com a mínim han de tenir 6 caràcters), comprovar_pwd (el password i repetir password han de coincidir).

Totes aquestes funcions s'explicaran a classe. Recordem que l'objectiu de totes aquestes funcions és millorar l'experiència de l'usuari que està omplint el formulari, i no enviar les dades al servidor fins que totes les dades estan validades.

=Entrega=
L'alumne disposa de tots els recursos (fitxers php, css, imatges). Per tant, l'única cosa que farà és instal.lar aquests fitxers en el seu servidor web (a l'hora que es mira, entén i estudia el codi).

L'alumne haurà de canviar l'escala de colors. En la web original tenim una gradació de marrons (fins a 4 nivells de marró). L'alumne haurà d'utiltizar un altre color base (taronja, verd, blau,...), i fer una gradació similar de colors.

L'alumne haurà d'afegir quatre camps al formulari:
*gènere: ràdio button (home/dona)
*comarca: llista desplegable (select box) on surtin llistades totes les comarques de Catalunya.
*Textarea: Textarea per ficar comentaris.
*checkbox: Acceptes les condicions? Només es pot enviar el formulari si aquesta casella està marcada.
Aquests quatre camps han d'estar ben integrats en el disseny del formulari.

El professor certificarà el bon funcionament de la pràctica. En l'entrega hauràs d'incloure una captura de pantalla.

Recorda la '''normativa''' per entregar les pràctiques al Google Classroom: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom]]

{{Autor}}, desembre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: ASIX-M09-IAW]]