Usuario:ManuelRomero/php/ejemploTienda

De WikiEducator
Saltar a: navegación, buscar


DWES TituloPracticaTienda.png

DESCRIPCIÓN DE LA PRÁCTICA DE LA TIENDA ON LINE

  • Vamos a hacer un ejemplo práctico en el que vamos a usar sesiones
  • Consiste en implementar una tienda on line con los datos siguientes
Diagrama de entidades

DiagramaEntidadesTienda.png 


que venimos trabajando
  • El siguiente diagrama muestra el escenario que queremos representar
  • El programa debe de ser en la medida de lo posible orientado a objetos (Ver en sección más abajo clases que se recomienda utilizar)

Tienda1.png

  • Explicación funcional de las páginas
Login (login.php).
Su función es autentificar al usuario de la aplicación web.
Todos los usuarios de la aplicación deberán autentificarse utilizando esta página antes de poder acceder al resto de páginas.
Listado de productos (productos.php).
Presenta un listado de los productos de la tienda, y permite al usuario seleccionar aquellos que va a comprar.
Cesta de compra (cesta.php).
Muestra un resumen de los productos escogidos por el usuario para su compra y da acceso a la página de pago.
Pagar (pagar.php).
Una vez confirmada la compra, la última página debería ser la que permitiera al usuario escoger el método de pago y la forma de envío.
En esta aplicación simplemente mostrará un mensaje de tipo "Gracias por su compra" y ofrecerá un enlace para comenzar una nueva compra.
Logoff (logoff.php).
Esta página desconecta al usuario de la aplicación y redirige al usuario de forma automática a la pantalla de autentificación.
No muestra ninguna información en pantalla, por lo que no es visible para el usuario.
  • Para realizar esta práctiva vamos a utilizar la siguiente hoja de estilo, disponible en un fichero puesto en el moodle
  • Observa los diferentes div definidos para poderlos utilizar como es el caso de error
  • Podemos ver el ejercicio funcionando en esta url 
http://www.manuel.infenlaces.com/tienda/loginW.php

Clases a utilizar

  • Se recomienda usar las siguientes clases, se aportan ejemplos de los métodos
BD.php

Clase con los métodos necesarios para acceder/consultar/validar en la base de datos. Por ejemplo 

validarCliente($usuario,$password)
obtenerProducto($codigo)
obtenerProductos ()
Producto.php
  • Clase para interactuar con un producto concreto
  • Deberrá de tener todos los atributos que tenga la tabla producto (Al menos todos los que necesitemos en nuestra aplicación.
CestaCompra.php

Acciones relacionadas con la cesta de la compra 

nuevoArticulo()
getProductos()
getCoste()
vaciar()

<html> <head> 

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>Ejemplo Tema 4: Login Tienda Web</title>
 <link href="tienda.css" rel="stylesheet" type="text/css">

</head>

<body> 

   <form action='login.php' method='post'>
   <fieldset >
       <legend>Login</legend>
<?php echo $error; ?>
           <label for='usuario' >Usuario:</label>

           <input type='text' name='usuario' id='usuario' maxlength="50" />


           <label for='password' >Contraseña:</label>

           <input type='password' name='password' id='password' maxlength="50" />


           <input type='submit' name='enviar' value='Enviar' />

   </fieldset>
   </form>

</body> </html> </html> </source>

producto.php

  • Esta es la página principal
  • En este caso se deben listar todos los productos con la opción de poder incorporarlos a la cesta de la compra
  • Además en ella vamos ir llenando la cesta de la compra, con la opción de comprar o vaciar la cesta en un momento dado
  • La página se divide en varias zonas, cada una definida por una etiqueta < div> en el código HTML:
  1. encabezado. Contiene únicamente el título de la página.
  2. productos. Contiene el listado de todos los productos tal y como figuran en la base de datos. Cada producto figura en una línea (nombre y precio).
  • Se crea un formulario por cada producto, con un botón "Añadir" que envía a esta misma página los datos código, nombre y precio del producto.
  • Cuando se abre la página, se comprueba si se ha enviado este formulario, y si fuera así se añade un elemento al array asociativo $_SESSION['cesta'] con los datos del nuevo producto.
  • De cada producto se incluye el precio y el nombre 
// Comprobamos si se ha enviado el formulario de añadir
    if (isset($_POST['enviar'])) {
        // Creamos un array con los datos del nuevo producto
        $producto['nombre'] = $_POST['nombre'];
        $producto['precio'] = $_POST['precio'];
        //  y lo añadimos
        $_SESSION['cesta'][$_POST['producto']] = $producto;
   }
  • En la cabecera a la parte de la derecha tendremos información de la compra actual de la cesta, con la opción de comrar o vaciar nuestra cesta 
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Ejemplo Tema 4: Listado de Productos</title>
  <link href="tienda.css" rel="stylesheet" type="text/css">
</head>
 
<body class="pagproductos">
 
<div id="contenedor">
  <div id="encabezado">
    <h1>Listado de productos</h1>
  </div>
  <div id="cesta">
    <h3><img src="cesta.png" alt="Cesta" width="24" height="21"> Cesta</h3>
    <hr />
  • En la parte inferior mantenemos la opción de desconectar 
 <br class="divisor" />
  <div id="pie">
    <form action='logoffW.php' method='post'>
        <input type='submit' name='desconectar' value='Desconectar usuario <?php echo $_SESSION['usuario']; ?>'/>
    </form>        
<?php
    if (isset($error)) {
        print "<p class='error'>Error $error: $mensaje</p>";
    }
?>
  </div>
Importante
  • En cada página debemos verificar que el usuario está conectado 
<?php
    // Recuperamos la información de la sesión
    session_start();
 
    // Y comprobamos que el usuario se haya autentificado
    if (!isset($_SESSION['usuario'])) {
        die("Error - debe <a href='login.php'>identificarse</a>.<br />");
    }
?>

cesta.php

  • En esta página vamos a ver un resumen de todo lo que hemos comprado, así como del total de la compra 
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Ejemplo Tema 4: Cesta de la Compra</title>
  <link href="tienda.css" rel="stylesheet" type="text/css">
</head>
 
<body class="pagcesta">
 
<div id="contenedor">
  <div id="encabezado">
    <h1>Cesta de la compra</h1>
  </div>
  <div id="productos">
<?php
    $total = 0;
    foreach($_SESSION['cesta'] as $codigo => $producto) {
  // ....... etc etc ....
 
?> //Fin del código php
      <hr />
      <p><span class='pagar'>Precio total: <?php print $total; ?> €</span></p>
      <form action='pagarW' method='post'>
          <p>
              <span class='pagar'>
                    <input type='submit' name='pagar' value='Pagar'/>
              </span>
          </p>
      </form>                  
  </div>
  <br class="divisor" />
  <div id="pie">
    <form action='logoffW' method='post'>
        <input type='submit' name='desconectar' value='Desconectar usuario <?php echo $_SESSION['usuario']; ?>'/>
    </form>        
  </div>
</div>
</body>
</html>
  • De esta página como se ha comentado anteriormente tenemos la opción de pagar y de desconectar que anulará la cesta

pagar.php

  • Simplemente informa de que se ha pagado correctamente.
  • Deberá de mostrar una página con la información de los pagos que se van a realizar y el total del importe
  • Nos mostrará dos opciones:
  1. La opción de pagar (En este caso directamente implica que termina la compra y volvemos a la página de productos para volver a comprar)
  2. La opción de cancelar Volvemos a la página anterior con la cesta vacía
  • En realidad estas dos opciones hacen lo mismo, pero claro en un caso real pagar nos redirigiría a una página de pagos ...
  • Nos volverá a llevar a poder realizar otra compra

logoff.php

  • Desconecta la página y vuelve a login.php

-->

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/php/ejemploTienda&oldid=21861»