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

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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:

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

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:

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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines