Formulari I: Javascript, CSS (maquetació i disseny)

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Volem fer un formulari de registre complet. D'una banda, que estigui ben dissenyat i maquetat, i que els camps estiguin validats en el cantó del client (Javascript). D'altra banda, que aquest formulari ataqui a una base de dades. Per tancar el cercle, la mini-aplicació tindrà un formulari d'accés (login/password) per tal de comprovar que l'usuari està registrat a la base de dades. També hi haurà variables de sessió per mantenir la identitat de l'usuari mentre es navega per l'aplicatiu, i cookies per mantenir la identitat entre sessions.

En aquesta primera part ens preocuparem de la maquetació, disseny i Javascript, és a dir, només treballarem en el cantó del client.

nota: la part de CSS (maquetació i disseny), i la part de PHP que tractarem en la següent pràctica no són temes de l'assignatura. Per tant es veurà per sobre... però és important fer un tractament global de les pràctiques que realitzem.

nota: no utilitzarem frameworks externs, com ara bootstrap (per als estils) o JQuery (per al Javascript).

El formulari de referència que farem servir el pots veure a:

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:

<!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>

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:

<!-- #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" -->
  • 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ç:

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?
  • On estan definides les fonts? Fer canvis de font en les capçaleres h1, h2.

Llibreria de Javascript

Les funcions de Javascript que defineixen la validació del formulari estan definides en un fitxer extern. L'enllaç directe és:

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.

Referències

exemples de formulari de contacte:


creat per Joan Quintana Compte, gener 2019