Mostra la font per a Balmestenda amb bootstrap. Formulari

=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 10polz i 7polz; 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==
*http://getbootstrap.com/
download:
*https://getbootstrap.com/docs/4.2/getting-started/download/
Ens descarreguem el fitxer ''bootstrap-4.4.1-dist'' (gener 2020), i descomprimim en la carpeta de la teva elecció, en el recurs web:
*http://www.balmestenda.org
Per ex, el professor copia l'arxiu a /home/joan/balmestenda. Quan descomprimim, tenim les carpetes ''css/'',' i ''js/''.
<pre>
bootstrap/
├── css/
/css/bootstrap.css
/css/bootstrap.css.map
/css/bootstrap.min.css
/css/bootstrap.min.css.map
/css/bootstrap-grid.css
/css/bootstrap-grid.css.map
/css/bootstrap-grid.min.css
/css/bootstrap-grid.min.css.map
/css/bootstrap-reboot.css
/css/bootstrap-reboot.css.map
/css/bootstrap-reboot.min.css
/css/bootstrap-reboot.min.css.map

├── js/
/js/bootstrap.bundle.js
/js/bootstrap.bundle.js.map
/js/bootstrap.bundle.min.js
/js/bootstrap.bundle.min.js.map
/js/bootstrap.js
/js/bootstrap.js.map
/js/bootstrap.min.js
/js/bootstrap.min.js.map

</pre>
A getbootstrap.com, anem a l'apartat d'Examples:
*https://getbootstrap.com/docs/4.4/examples/
Escollim una plantilla que ens agradi i que s'ajusti a les nostres necessitats (volem fer un formulari). Per exemple, podem escollir ''Jumbotron'':
*https://getbootstrap.com/docs/4.4/examples/jumbotron/

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

==Plantilla Jumbotron==
*https://getbootstrap.com/docs/4.2/examples/jumbotron/
Copiem el codi font al nostre projecte, i obrim la pàgina. Per ex:
*http://balmestenda.org/bootstrap-4.2.1-dist/jumbotron.html
Veiem que no es carrega correctament el full d'estils. Si ens fixem en el codi, el full d'estils apunta a:
<pre>
<link href="/docs/4.4/dist/css/bootstrap.min.css" ... >
</pre>
i hem de ficar la nostra ruta correcta. Per ex:
<pre>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
</pre>
i així ho hem de fer si hi ha d'altres links.

Concrement: ''bootstrap.bundle.min.js''
<pre>
<script src="./js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous">
</pre>
Hem d'aconseguir veure la plantilla correctament

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

En aquests moments el resultat és:
*[[Fitxer:Bootstrap v1.zip]] (pots utilitzar aquesta versió si no te n'en surts)

==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 ''index.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:
<pre>
<div class="col-md-4">
</pre>
Per fer-la el doble d'ampla té certa lògica fer:
<pre>
<div class="col-md-8">
</pre>
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:
<pre>
<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>
</pre>
En aquests moments el resultat és:
*[[Fitxer:Bootstrap v2.zip]] (pots utilitzar aquesta versió si no te n'en surts)

=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.
<pre>
DROP TABLE contacte;

CREATE TABLE contacte (
id_contacte smallint primary key AUTO_INCREMENT,
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)
);
</pre>

=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:
<pre>
header('Location: contacte.html');
</pre>

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ó=
[[Fitxer:Bootstrap v3.zip]] (pots utilitzar aquesta versió si no te n'en surts)

=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.

{{Autor}}, gener 2018