Formulari + full d'estils + Javascript: tenda Balmes

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Desenvolupament

Com a conclusió de tot el que hem vist fins ara, anem a dissenyar un formulari web, amb els següents requisits:

Pots trobar la web del Balmes i els fitxers que necessites a:

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:

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.

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:

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


creat per Joan Quintana Compte, desembre 2018

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