Balmestenda amb bootstrap. Formulari

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Bootstrap és una llibreria de maquetació web molt utilitzada actualment. El principal avantatge és que pots dissenyar ràpidament una web i que estigui ben maquetada en els diferens tipus de pantalla que trobem avui dia: ordinadors de sobre taula amb diferents resolucions 4:3 o 16:9; taulestes de 10 i 7; smartphones de diferents tamanys de pantalla.

Anem a fer els primers passos en la construcció d'una tenda electròncia (balmestenda). Dissenyarem una pàgina de presentació de la tenda, i un formulari ben maquetat.

En les pràctiques posteriors farem que aquest formulari compleixi unes regles de validació (amb Javascript), i que les dades del formulari omplin una base de dades MySQL (amb PHP).

Desenvolupament

Creació del domini balmestenda.org

El primer que hauràs de fer és crear el domini balmestenda.org (o un altre domini de la teva elecció). És el mateix que vas fer en el seu dia per crear el domini www.iaw.org. Per ex, el professor associa el domini www.balmestenda.org a la carpeta física /home/joan/balmestenda.

Instal.lació Bootstrap

download:

Ens descarreguem el fitxer bootstrap-4.2.1-dist (gener 2019), i descomprimim en la carpeta de la teva elecció, en el recurs web:

Per ex, el professor copia l'arxiu a /home/joan/balmestenda. Quan descomprimim, tenim les carpetes css/,' i js/.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js

A getbootstrap.com, anem a l'apartat d'Examples:

Escollim una plantilla que ens agradi i que s'ajusti a les nostres necessitats (volem fer un formulari). Per exemple, podem escollir Jumbotron:

Hem d'aconseguir que www.balmestenda.org carregui la plantilla de Jumbotron

Plantilla Jumbotron

Copiem el codi font al nostre projecte, i obrim la pàgina. Per ex:

Veiem que no es carrega correctament el full d'estils. Si ens fixem en el codi, el full d'estils apunta a:

<link href="/docs/4.2/dist/css/bootstrap.min.css" ... >

i hem de ficar la nostra ruta correcta. Per ex:

    <link href="./css/bootstrap.min.css" rel="stylesheet">

i així ho hem de fer si hi ha d'altres links.

Hem d'aconseguir veure la plantilla correctament

En l'arxiu index.html canviem Hello World per Tenda del Balmes.

Formulari de contacte. Creació del script contacte.html

Anem a treballar el formulari de contacte. Per fer-ho, anem a crear una nova pàgina, contacte.html, i copiarem el contingut de jumbotron.html a contacte.html.

La plantilla de jumbotron té tres caixes que ocupen 1/3 de l'amplada de la pantalla. Anem a deixar-ne només dues: la primera ocuparà 2/3 i és on ficarem el nostre formulari. L'altra ocuparà 1/3 de la dreta de la pantalla. L'amplada queda definit per:

<div class="col-md-4">

Per fer-la el doble d'ampla té certa lògica fer:

<div class="col-md-8">

Així és com funciona Bootstrap. Tots aquests temes estan explicats en els tutorials de Bootstrap, però tampoc volem aprofundir. Així doncs, la primera columna serà col-md-8, la segona columna col-md-4; i per fer desaparèixer la tercera columna hem d'eliminar tot el div.

A contacte.html fiquem les dades que tindrà el nostre formulari. Quedarà de la següent manera:

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

  <div class="form-group row">
    <label for="nom" class="col-sm-2 col-form-label">Nom</label>
    <div class="col-sm-6">
      <input type="text" name="nom" class="form-control" placeholder="nom">
    </div>
  </div>

  <div class="form-group row">
    <label for="cognoms" class="col-sm-2 col-form-label">Cognoms</label>
    <div class="col-sm-6">
      <input type="text" name="cognoms"  class="form-control" placeholder="cognoms">
    </div>
  </div>

  <div class="form-group row">
    <label for="login" class="col-sm-2 col-form-label">Login</label>
    <div class="col-sm-6">
      <input type="text" name="login"  class="form-control" placeholder="login">
    </div>
  </div>

  <div class="form-group row">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-6">
      <input type="password" name="password"  class="form-control" placeholder="password">
    </div>
  </div>

  <div class="form-group row">
    <label for="Direcció" class="col-sm-2 col-form-label">Direcció</label>
    <div class="col-sm-6">
      <input type="text" name="direccio"  class="form-control" placeholder="Direcció">
    </div>
  </div>

  <div class="form-group row">
    <label for="CP" class="col-sm-2 col-form-label">CP</label>
    <div class="col-sm-6">
      <input type="text" name="cp"  class="form-control" placeholder="CP">
    </div>
  </div>

  <div class="form-group row">
    <label for="Població" class="col-sm-2 col-form-label">Població</label>
    <div class="col-sm-6">
      <input type="text" name="poblacio"  class="form-control" placeholder="Població">
    </div>
  </div>

  <div class="form-group row">
    <label for="Mòbil" class="col-sm-2 col-form-label">Mòbil</label>
    <div class="col-sm-6">
      <input type="text" name="mobil"  class="form-control" placeholder="Mòbil">
    </div>
  </div>

  <div class="form-group row">
    <label for="Mail" class="col-sm-2 col-form-label">Mail</label>
    <div class="col-sm-6">
      <input type="email" name="mail"  class="form-control" placeholder="Mail">
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" name="submit" class="btn btn-primary">Enviar</button>
    </div>
  </div>

</form>

Processar el formulari

Fins ara ens hem centrat en el front-end, un formulari ben dissenyat segons els estàndars actuals, i responsiveness.

Ara anem a processar el formular. Si t'has fixat, el action del formulari és el script: processar_contacte.php.

Hem de programar amb php aquest script, igual que havíem fet amb l'exemple de la Protectora d'Animals. Hem de recollir les dades del formulari, i fer un insert a la taula CONTACTE, que hauràs creat prèviament.

Si en comptes del formulari de CONTACTE vols fer un altre exemple, per exemple treballar amb la Protectora d'Animals que veiem l'altre dia, també ho pots fer.

DROP TABLE contacte;

CREATE TABLE contacte (
id_contacte smallint primary key,
nom varchar(30) not null,
cognoms varchar(30) not null,
login varchar(10) not null,
clau varchar(50) not null,
direccio varchar(30),
cp char(5),
poblacio varchar(30),
mobil varchar(30),
mail varchar(30)
);

Més coses per a fer

Després de processar el formulari, has de tornar a la pàgina d'inici de l'aplicació (per exemple, el formulari). En el script php pots fer al final de tot:

header('Location: contacte.html');

En un enllaç de la capçalera (per exemple Link), renombra'l a llista contactes, i programa el script 'llista_contaces.php per visualitzar tota la llista de contactes que hi ha a la base de dades.

Solució

(TBD)

Entrega

Entrega aquesta pràctica al Classroom dins del termini especificat. Mostra els resultats al professor, i fés captures de pantalla per certificar el bon funcionament.


creat per Joan Quintana Compte, gener 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