Balmestenda amb bootstrap. Formulari

De wikijoan
Salta a la navegació Salta a la cerca

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