Diferència entre revisions de la pàgina «Balmestenda amb bootstrap. Formulari»

De wikijoan
Salta a la navegació Salta a la cerca
 
 
(Hi ha 3 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
 
=Introducció=
 
=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.
+
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.
 
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.
Línia 11: Línia 11:
 
==Instal.lació Bootstrap==
 
==Instal.lació Bootstrap==
 
*http://getbootstrap.com/
 
*http://getbootstrap.com/
−
download:
+
download: Descarreguem la versió actual
−
*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:
+
Ens descarreguem el fitxer ''bootstrap-5.0.0-beta1-dist'' (desembre 2020), i descomprimim en la carpeta de la teva elecció, en el recurs web:
 
*http://www.balmestenda.org
 
*http://www.balmestenda.org
 
Per ex, el professor copia l'arxiu a /home/joan/balmestenda. Quan descomprimim, tenim les carpetes ''css/'',' i ''js/''.
 
Per ex, el professor copia l'arxiu a /home/joan/balmestenda. Quan descomprimim, tenim les carpetes ''css/'',' i ''js/''.
Línia 44: Línia 44:
 
</pre>
 
</pre>
 
A getbootstrap.com, anem a l'apartat d'Examples:
 
A getbootstrap.com, anem a l'apartat d'Examples:
−
*https://getbootstrap.com/docs/4.4/examples/
+
*https://getbootstrap.com/docs/5.0/examples/
−
Escollim una plantilla que ens agradi i que s'ajusti a les nostres necessitats (volem fer un formulari). Per exemple, podem escollir ''Jumbotron'':
+
Escollim una plantilla que ens agradi i que s'ajusti a les nostres necessitats (volem fer un formulari). Per exemple, podem escollir ''checkout'':
−
*https://getbootstrap.com/docs/4.4/examples/jumbotron/
+
*https://getbootstrap.com/docs/5.0/examples/checkout/
  
−
Hem d'aconseguir que ''www.balmestenda.org'' carregui la plantilla de Jumbotron
+
Hem d'aconseguir que ''www.balmestenda.org'' carregui la plantilla de checkout.
  
−
==Plantilla Jumbotron==
+
==Plantilla checkout==
−
*https://getbootstrap.com/docs/4.2/examples/jumbotron/
+
*https://getbootstrap.com/docs/5.0/examples/checkout/
 
Copiem el codi font al nostre projecte, i obrim la pàgina. Per ex:
 
Copiem el codi font al nostre projecte, i obrim la pàgina. Per ex:
−
*http://balmestenda.org/bootstrap-4.2.1-dist/jumbotron.html
+
*http://balmestenda.org/checkout.html
 
Veiem que no es carrega correctament el full d'estils. Si ens fixem en el codi, el full d'estils apunta a:
 
Veiem que no es carrega correctament el full d'estils. Si ens fixem en el codi, el full d'estils apunta a:
 
<pre>
 
<pre>
−
<link href="/docs/4.4/dist/css/bootstrap.min.css" ... >
+
<link href="/docs/5.0/dist/css/bootstrap.min.css" ... >
 
</pre>
 
</pre>
 
i hem de ficar la nostra ruta correcta. Per ex:
 
i hem de ficar la nostra ruta correcta. Per ex:
 
<pre>
 
<pre>
−
     <link href="./css/bootstrap.min.css" rel="stylesheet">
+
     <link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
</pre>
 
</pre>
 
i així ho hem de fer si hi ha d'altres links.
 
i així ho hem de fer si hi ha d'altres links.
Línia 66: Línia 66:
 
Concrement: ''bootstrap.bundle.min.js''
 
Concrement: ''bootstrap.bundle.min.js''
 
<pre>
 
<pre>
−
<script src="./js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous">
+
      <script src="./js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 
</pre>
 
</pre>
 
Hem d'aconseguir veure la plantilla correctament
 
Hem d'aconseguir veure la plantilla correctament
  
−
En l'arxiu ''index.html'' canviem ''Hello World'' per ''Tenda del Balmes''.
+
Ara que ja tenim el script ''checkout.html'' funcionant, podem copiar-lo a ''contacte.html'', que serà el nostre formulari de la Tenda del Balmes. Canviem ''checkout form'' per ''Tenda del Balmes''.
  
 
En aquests moments el resultat és:
 
En aquests moments el resultat és:
−
*[[Fitxer:Bootstrap v1.zip]] (pots utilitzar aquesta versió si no te n'en surts)
+
*[[Fitxer:Balmestenda des 2020.zip]] (pots utilitzar aquesta versió si no te n'en surts)
  
−
==Formulari de contacte. Creació del script ''contacte.html==
+
==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''.
+
Anem a treballar el formulari de contacte.
  
−
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.
+
D'una banda, hem d'eliminar tot allò que considerem superflu (per exemple, el carret de la compra). D'altra banda, el formulari s'ha d'adaptar a les nostres necessitats. Les dades són:
−
L'amplada queda definit per:
 
 
<pre>
 
<pre>
−
<div class="col-md-4">
+
nom
 +
cognoms
 +
login
 +
password
 +
direccio
 +
cp
 +
poblacio
 +
mobil
 +
mail
 +
enviar
 
</pre>
 
</pre>
−
Per fer-la el doble d'ampla té certa lògica fer:
+
''contacte.html'' queda de la següent forma:
 
<pre>
 
<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:
+
<!doctype html>
−
<pre>
+
<html lang="en">
−
<form name="form_registre" method="post" action="processar_contacte.php" >
+
  <head>
 +
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <meta name="description" content="">
 +
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 +
    <meta name="generator" content="Hugo 0.79.0">
 +
    <title>Checkout example · Bootstrap v5.0</title>
 +
 
 +
    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">
 +
 
 +
   
 +
 
 +
    <!-- Bootstrap core CSS -->
 +
<link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 +
 
 +
    <style>
 +
      .bd-placeholder-img {
 +
        font-size: 1.125rem;
 +
        text-anchor: middle;
 +
        -webkit-user-select: none;
 +
        -moz-user-select: none;
 +
        user-select: none;
 +
      }
 +
 
 +
      @media (min-width: 768px) {
 +
        .bd-placeholder-img-lg {
 +
          font-size: 3.5rem;
 +
        }
 +
      }
 +
    </style>
  
−
  <div class="form-group row">
+
    <!-- Custom styles for this template -->
−
    <label for="nom" class="col-sm-2 col-form-label">Nom</label>
+
    <link href="form-validation.css" rel="stylesheet">
−
     <div class="col-sm-6">
+
  </head>
−
       <input type="text" name="nom" class="form-control" placeholder="nom">
+
  <body class="bg-light">
 +
   
 +
<div class="container">
 +
  <main>
 +
     <div class="py-5 text-center">
 +
       <img class="d-block mx-auto mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
 +
      <h2>Tenda del Balmes</h2>
 +
      <p class="lead">Formulari de la tenda del Balmes</p>
 
     </div>
 
     </div>
−
  </div>
 
  
−
  <div class="form-group row">
+
    <div class="row g-3">
−
    <label for="cognoms" class="col-sm-2 col-form-label">Cognoms</label>
+
      <div class="col-md-5 col-lg-4 order-md-last">
−
    <div class="col-sm-6">
+
        <h4 class="d-flex justify-content-between align-items-center mb-3">
−
      <input type="text" name="cognoms" class="form-control" placeholder="cognoms">
+
          <span class="text-muted">Info dreta</span>
−
    </div>
+
        </h4>
−
  </div>
+
      </div>
 +
 
 +
      <div class="col-md-7 col-lg-8">
 +
        <h4 class="mb-3">Billing address</h4>
 +
        <form class="needs-validation" novalidate method="post" action="processar_contacte.php">
 +
          <div class="row g-3">
 +
            <div class="col-sm-6">
 +
              <label for="nom" class="form-label">Nom</label>
 +
              <input type="text" class="form-control" id="nom" name="nom" placeholder="" value="" required>
 +
              <div class="invalid-feedback">
 +
                Valid first name is required.
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="col-sm-6">
 +
              <label for="cognoms" class="form-label">Cognoms</label>
 +
              <input type="text" class="form-control" id="cognoms" name="cognoms" placeholder="" value="" required>
 +
              <div class="invalid-feedback">
 +
                Valid last name is required.
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="col-12">
 +
              <label for="login" class="form-label">Login</label>
 +
              <div class="input-group">
 +
                <span class="input-group-text">@</span>
 +
                <input type="text" class="form-control" id="login" name="login" placeholder="" required>
 +
              <div class="invalid-feedback">
 +
                  Your login is required.
 +
                </div>
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="col-12">
 +
              <label for="password" class="form-label">Password</label>
 +
              <div class="input-group">
 +
                <span class="input-group-text"></span>
 +
                <input type="password" class="form-control" id="password" name="password" placeholder="" required>
 +
              <div class="invalid-feedback">
 +
                  Your password is required.
 +
                </div>
 +
              </div>
 +
            </div>
 +
 
 +
            <div class="col-12">
 +
              <label for="direccio" class="form-label">Direcció</label>
 +
              <div class="input-group">
 +
                <span class="input-group-text"></span>
 +
                <input type="text" class="form-control" id="direccio" name="direccio" placeholder="direccio" required>
 +
              <div class="invalid-feedback">
 +
                  Your direccio is required.
 +
                </div>
 +
              </div>
 +
            </div>
  
−
  <div class="form-group row">
+
            <div class="col-sm-6">
−
    <label for="login" class="col-sm-2 col-form-label">Login</label>
+
              <label for="cp" class="form-label">CP</label>
−
    <div class="col-sm-6">
+
              <input type="text" class="form-control" id="cp" name="cp" placeholder="" value="" required>
−
      <input type="text" name="login" class="form-control" placeholder="login">
+
              <div class="invalid-feedback">
−
    </div>
+
                Valid cp is required.
−
  </div>
+
              </div>
 +
            </div>
  
−
  <div class="form-group row">
+
            <div class="col-sm-6">
−
    <label for="password" class="col-sm-2 col-form-label">Password</label>
+
              <label for="poblacio" class="form-label">Població</label>
−
    <div class="col-sm-6">
+
              <input type="text" class="form-control" id="poblacio" name="poblacio" placeholder="" value="" required>
−
      <input type="password" name="password" class="form-control" placeholder="password">
+
              <div class="invalid-feedback">
−
    </div>
+
                Valid poblacio is required.
−
  </div>
+
              </div>
 +
            </div>
  
−
  <div class="form-group row">
+
            <div class="col-12">
−
    <label for="Direcció" class="col-sm-2 col-form-label">Direcció</label>
+
              <label for="mobil" class="form-label">Mòbil <span class="text-muted">(Optional)</span></label>
−
    <div class="col-sm-6">
+
              <input type="email" class="form-control" id="mobil" name="mobil" placeholder="mobil">
−
      <input type="text" name="direccio"  class="form-control" placeholder="Direcció">
+
              <div class="invalid-feedback">
−
    </div>
+
                Please enter a valid mobil.
−
  </div>
+
              </div>
 +
            </div>
  
−
  <div class="form-group row">
+
            <div class="col-12">
−
    <label for="CP" class="col-sm-2 col-form-label">CP</label>
+
              <label for="mail" class="form-label">Email <span class="text-muted">(Optional)</span></label>
−
    <div class="col-sm-6">
+
              <input type="email" class="form-control" id="mail" name="mail" placeholder="you@example.com">
−
      <input type="text" name="cp" class="form-control" placeholder="CP">
+
              <div class="invalid-feedback">
−
    </div>
+
                Please enter a valid email address for shipping updates.
−
  </div>
+
              </div>
 +
            </div>
  
−
  <div class="form-group row">
+
          <hr class="my-4">
−
    <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">
+
          <button class="w-100 btn btn-primary btn-lg" name="submit" type="submit">Enviar</button>
−
    <label for="Mòbil" class="col-sm-2 col-form-label">Mòbil</label>
+
        </form>
−
    <div class="col-sm-6">
+
       </div>
−
       <input type="text" name="mobil"  class="form-control" placeholder="Mòbil">
 
 
     </div>
 
     </div>
−
   </div>
+
   </main>
  
−
  <div class="form-group row">
+
</div>
−
    <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">
+
    <script src="./js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
−
    <div class="col-sm-10">
 
−
      <button type="submit" name="submit" class="btn btn-primary">Enviar</button>
 
−
    </div>
 
−
  </div>
 
  
−
</form>
+
      <script src="form-validation.js"></script>
 +
  </body>
 +
</html>
 
</pre>
 
</pre>
−
En aquests moments el resultat és:
 
−
*[[Fitxer:Bootstrap v2.zip]] (pots utilitzar aquesta versió si no te n'en surts)
 
  
 
=Processar el formulari=
 
=Processar el formulari=
Línia 183: Línia 265:
 
cognoms varchar(30) not null,
 
cognoms varchar(30) not null,
 
login varchar(10) not null,
 
login varchar(10) not null,
−
clau varchar(50) not null,
+
password varchar(50) not null,
 
direccio varchar(30),
 
direccio varchar(30),
 
cp char(5),
 
cp char(5),
Línia 192: Línia 274:
 
</pre>
 
</pre>
  
−
=Més coses per a fer=
+
El script ''processar_contacte.php'' queda de la següent manera:
−
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>
 
<pre>
 +
<?php
 +
if (isset($_POST['submit'])) {
 +
  $nom =  str_replace("'","''",$_POST['nom']);
 +
  $cognoms =  str_replace("'","''",$_POST['cognoms']);
 +
  $login = $_POST['login'];
 +
  $password = $_POST['password'];
 +
  $direccio = str_replace("'","''",$_POST['direccio']);
 +
  $cp = $_POST['cp'];
 +
  $poblacio = str_replace("'","''",$_POST['poblacio']);
 +
  $mobil = $_POST['mobil'];
 +
  $mail = $_POST['mail'];
 +
 +
  echo "<br />";
 +
  echo "Nom: ".$nom."<br />";
 +
  echo "Cogoms: ".$cognoms."<br />";
 +
  echo "Login: ".$login."<br />";
 +
  echo "Password: ".$password."<br />";
 +
  echo "Direcció: ".$direccio."<br />";
 +
  echo "CP: ".$cp."<br />";
 +
  echo "Població: ".$poblacio."<br />";
 +
  echo "Mòbil: ".$mobil."<br />";
 +
  echo "Mail: ".$mail."<br />";
 +
}
 +
 +
/*
 +
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)
 +
);
 +
*/
 +
 +
$servername = "localhost";
 +
$username = "alumne";
 +
$bdpassword = "keiL2lai";
 +
$dbname = "jbalmes";
 +
 +
// Create connection
 +
$conn = mysqli_connect($servername, $username, $bdpassword, $dbname);
 +
// Check connection
 +
if (!$conn) {
 +
    die("Connection failed: " . mysqli_connect_error());
 +
}
 +
 +
mysqli_query($conn, "SET NAMES 'utf8'");
 +
 +
//TODO
 +
$sql = "INSERT INTO contacte (nom, cognoms, login, password, direccio, cp, poblacio, mobil, mail) VALUES ('".$nom."','".$cognoms."','".$login."','".$password."','".$direccio."','".$cp."','".$poblacio."','".$mobil."','".$mail."')";
 +
//echo $sql;
 +
 +
 +
if (mysqli_query($conn, $sql)) {
 +
    echo "New record created successfully";
 +
} else {
 +
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
 +
}
 +
 +
mysqli_close($conn);
 +
 +
sleep(3);
 
header('Location: contacte.html');
 
header('Location: contacte.html');
 +
 +
?>
 
</pre>
 
</pre>
−
 
+
=Més coses per a fer=
−
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.
+
*registrar a la base de dades la data de la inserció
−
=Solució=
+
*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.
−
[[Fitxer:Bootstrap v3.zip]] (pots utilitzar aquesta versió si no te n'en surts)
 
  
 
=Entrega=
 
=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.
 
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
+
{{Autor}}, desembre 2020

Revisió de 15:43, 21 gen 2021

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

download: Descarreguem la versió actual

Ens descarreguem el fitxer bootstrap-5.0.0-beta1-dist (desembre 2020), 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/
/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

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 checkout:

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

Plantilla checkout

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/5.0/dist/css/bootstrap.min.css" ... >

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

    <link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

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

Concrement: bootstrap.bundle.min.js 

      <script src="./js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Hem d'aconseguir veure la plantilla correctament

Ara que ja tenim el script checkout.html funcionant, podem copiar-lo a contacte.html, que serà el nostre formulari de la Tenda del Balmes. Canviem checkout form per Tenda del Balmes.

En aquests moments el resultat és:

Formulari de contacte. Creació del script contacte.html

Anem a treballar el formulari de contacte.

D'una banda, hem d'eliminar tot allò que considerem superflu (per exemple, el carret de la compra). D'altra banda, el formulari s'ha d'adaptar a les nostres necessitats. Les dades són: 

nom
cognoms
login
password
direccio
cp
poblacio
mobil
mail
enviar

contacte.html queda de la següent forma: 


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.79.0">
    <title>Checkout example · Bootstrap v5.0</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/checkout/">

    

    <!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    <!-- Custom styles for this template -->
    <link href="form-validation.css" rel="stylesheet">
  </head>
  <body class="bg-light">
    
<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
      <h2>Tenda del Balmes</h2>
      <p class="lead">Formulari de la tenda del Balmes</p>
    </div>

    <div class="row g-3">
      <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-muted">Info dreta</span>
        </h4>
      </div>

      <div class="col-md-7 col-lg-8">
        <h4 class="mb-3">Billing address</h4>
        <form class="needs-validation" novalidate method="post" action="processar_contacte.php">
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="nom" class="form-label">Nom</label>
              <input type="text" class="form-control" id="nom" name="nom" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid first name is required.
              </div>
            </div>

            <div class="col-sm-6">
              <label for="cognoms" class="form-label">Cognoms</label>
              <input type="text" class="form-control" id="cognoms" name="cognoms" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid last name is required.
              </div>
            </div>

            <div class="col-12">
              <label for="login" class="form-label">Login</label>
              <div class="input-group">
                <span class="input-group-text">@</span>
                <input type="text" class="form-control" id="login" name="login" placeholder="" required>
              <div class="invalid-feedback">
                  Your login is required.
                </div>
              </div>
            </div>

            <div class="col-12">
              <label for="password" class="form-label">Password</label>
              <div class="input-group">
                <span class="input-group-text"></span>
                <input type="password" class="form-control" id="password" name="password" placeholder="" required>
              <div class="invalid-feedback">
                  Your password is required.
                </div>
              </div>
            </div>

            <div class="col-12">
              <label for="direccio" class="form-label">Direcció</label>
              <div class="input-group">
                <span class="input-group-text"></span>
                <input type="text" class="form-control" id="direccio" name="direccio" placeholder="direccio" required>
              <div class="invalid-feedback">
                  Your direccio is required.
                </div>
              </div>
            </div>

            <div class="col-sm-6">
              <label for="cp" class="form-label">CP</label>
              <input type="text" class="form-control" id="cp" name="cp" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid cp is required.
              </div>
            </div>

            <div class="col-sm-6">
              <label for="poblacio" class="form-label">Població</label>
              <input type="text" class="form-control" id="poblacio" name="poblacio" placeholder="" value="" required>
              <div class="invalid-feedback">
                Valid poblacio is required.
              </div>
            </div>

            <div class="col-12">
              <label for="mobil" class="form-label">Mòbil <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" id="mobil" name="mobil" placeholder="mobil">
              <div class="invalid-feedback">
                Please enter a valid mobil.
              </div>
            </div>

            <div class="col-12">
              <label for="mail" class="form-label">Email <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" id="mail" name="mail" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

          <hr class="my-4">

          <button class="w-100 btn btn-primary btn-lg" name="submit" type="submit">Enviar</button>
        </form>
      </div>
    </div>
  </main>

</div>

    <script src="./js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

      <script src="form-validation.js"></script>
  </body>
</html>

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 AUTO_INCREMENT,
nom varchar(30) not null,
cognoms varchar(30) not null,
login varchar(10) not null,
password varchar(50) not null,
direccio varchar(30),
cp char(5),
poblacio varchar(30),
mobil varchar(30),
mail varchar(30)
);

El script processar_contacte.php queda de la següent manera: 

<?php
if (isset($_POST['submit'])) {
  $nom =  str_replace("'","''",$_POST['nom']);
  $cognoms =  str_replace("'","''",$_POST['cognoms']);
  $login = $_POST['login'];
  $password = $_POST['password'];
  $direccio = str_replace("'","''",$_POST['direccio']);
  $cp = $_POST['cp'];
  $poblacio = str_replace("'","''",$_POST['poblacio']);
  $mobil = $_POST['mobil'];
  $mail = $_POST['mail'];

  echo "<br />";
  echo "Nom: ".$nom."<br />";
  echo "Cogoms: ".$cognoms."<br />";
  echo "Login: ".$login."<br />";
  echo "Password: ".$password."<br />";
  echo "Direcció: ".$direccio."<br />";
  echo "CP: ".$cp."<br />";
  echo "Població: ".$poblacio."<br />";
  echo "Mòbil: ".$mobil."<br />";
  echo "Mail: ".$mail."<br />";
}

/*
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)
);
*/

$servername = "localhost";
$username = "alumne";
$bdpassword = "keiL2lai";
$dbname = "jbalmes";

// Create connection
$conn = mysqli_connect($servername, $username, $bdpassword, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

mysqli_query($conn, "SET NAMES 'utf8'");

//TODO
$sql = "INSERT INTO contacte (nom, cognoms, login, password, direccio, cp, poblacio, mobil, mail) VALUES ('".$nom."','".$cognoms."','".$login."','".$password."','".$direccio."','".$cp."','".$poblacio."','".$mobil."','".$mail."')";
//echo $sql;


if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);

sleep(3);
header('Location: contacte.html');

?>

Més coses per a fer

  • registrar a la base de dades la data de la inserció
  • 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.

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, desembre 2020

Obtingut de «http://wiki.joanillo.org/index.php?title=Balmestenda_amb_bootstrap._Formulari&oldid=297186»