Ejemplo DULCERIA

<!
—HTML de DulceriaRegistro-->
<!DOCTYPE html>
<html>
<head><title>Registro de usuarios</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Dulceria.css"
media="screen" />
</head>
<body>
<div class="Titulo">
<h1>Alta del Cliente</h1>

</div>
</div>
<form method="post" action="DulceriaAgregar.php">

<fieldset>
<legend> Ingrese los datos</legend>
<p>
<label> Nombre:<input type="text" name="nombre"
placeholder="Nombre Completo"/></label>
</p>
<p>
<label>Escribe un nombre de usuario:<input type="text"
name="usuario"/></label>
</p>
<p>
<label>Escriba una contraseña:<input type="password"
name="contra" size="35" placeholder="Maximo 10 letras y/o
numeros" maxlength="10"/></label>
</p>
<p>
<label>Escriba el correo electrónico:<input type="email"
size="35" name="correo"/></label>
</p>
<input type="submit" value="Registar"/>
<input type="reset" value="Borrar"/>
</p>
</fieldset>
</form>
</body>
</html>
<!—DulceriaAgregar.php-->
<?php
//Llamada a la conexión
require 'ConexionDulceria.php';
//Declaración de variables que recibe del formulario

$nombre =$_POST['nombre'];
$usuario =$_POST['usuario'];
$contra=$_POST['contra'];
$email=$_POST['correo'];
//Variable para guardar la inserción dentro de la tabla

$insertar = "INSERT INTO cliente values ('$nombre',
'$usuario', '$contra','$email')";
//Instrucción para insertar dentro de la tabla

$consulta = mysqli_query($conectar, $insertar);
//Estructura para verificar si se realizo la

conexión if ($consulta){
echo "<script> alert ('Usuario registrado');
location.href = 'AccesoDulceria.html';
</script>";
}
else{
echo "<script> alert ('Incorrecto');
location.href = 'DulceriaRegistro.html';
</script>";
}
?>

<?php
//Declaración de variables
$nomserver = "localhost";
$BaseDatos = "dulceria";
$usuario = "root";
$password = "";
// Crear la conexión por medio de la función mysqli_connect
$conectar = mysqli_connect($nomserver, $usuario, $password, $BaseDatos);
?>
<!—AccesoDulceria.html-->
<html>
<style>
table
{
border: 2px solid #0d42bd;
background-color:
#b2cdd8;
}
input [type=text], input[type=password]
{
width: 100%;
padding: 8px 20px;
border: 2px solid rgb(88, 140, 182);
box-sizing: border-box;
}
im
g
{ width: 100px;
height: 100px;
}
label
{
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
input [type=submit]
{
background-color: #bbd4df;
color: white;
padding: 8px 10px;
border: solid;
cursor: progress;
width: 40%;
}
</style>
<center>
<form method="post" action="AccesoDulceria.php">
<table>
<tr><td colspan="2" style="background-color: #01eb0d;
padding-bottom: 5px; padding: top
5px;"><label>Login</label></td></tr>

<tr><td align="center" rowspan="5"><img
src="candado.png"</td><td><label>Usuario</label></td></tr>
<tr><td><input type="text" placeholder="🔐Usuario"
name="usuario"/></td></tr>
<tr><td><label>Password</label></td></tr>
<tr><td><input type="password"
placeholder="🔐Contraseña" name="contra"/></td></tr>
<tr><th><input type="submit" value="Accesar"/></th></tr>
</table>
</form>
</center>
</html>
<!—AccesoDulceria.php-->
<?php
require 'ConexionDulceria.php';
//Declaración de variables que recibe del formulario

$usuario =$_POST['usuario'];
$contra=$_POST['contra'];
//Variable para crear la consulta

//mysqli_query funcion para ejecutar la consulta
$consulta=mysqli_query($conectar,"SELECT * FROM cliente WHERE usuario
= '$usuario' and contra = '$contra'");
//nr es una variable para verificar el numero de filas que

tengan coincidencia con la tabla de la BD
//mysqli_num_rows función para obtener el numero de filas
$nr=mysqli_num_rows($consulta);
//Estructura de control para verificar la coincidencia de los datos de
la tabla
if ($nr == 1)
{
echo "<script> alert ('Correcto');
location.href =
'indexDulceria.php';
</script>";
}
else if ($nr == 0)
{
echo "<script> alert ('Usuario no registrado');
location.href = 'AccesoDulceria.html';
</script>";
}
//mysqli_free_result función para liberar los resultados y no
consumir memoria
mysqli_free_result($consulta);
//mysqli_close función para cerrar la conexión
//Ambas funciones permiten asegurar que se libera la memoria
//mysqli_close($conn);
?>
<!—Codigo para generar el carrito de compras el cual debe tener también una definición de clase la
cual se llama claseDulceria.php-->
<!—indexDulceria.php-->
<?php
/* session_start crea una sesión o reanuda la actual basada en
un identificador
de sesión pasado mediante una petición GET o
POST*/ session_start();
/* la función require_once incluye y evalua el archivo especificado durante

la
ejecución del script. Se comporta de manera similar a require(), con la
única
diferencia que si el código ha sido ya incluido, no se volverá a incluir */
require_once("claseDulceria.php");
$usar_db = new
DBControl(); if(!
empty($_GET["accion"]))
{
//Estructura para validar los posibles casos (menu) que el usuario
decida switch($_GET["accion"])
{
//Opción agregar
case "agregar":
//Estrucutra para agregar cada campo dentro de la tabla

//empty — Determina si una variable está vacía
if(!empty($_POST["txtcantidad"]))
{
$codproducto = $usar_db->vaiQuery("SELECT * FROM productos WHERE
cod='" . $_GET["cod"] . "'");
$items_array = array($codproducto[0]
["cod"]=>array( 'vai_nom' =>$codproducto[0]
["nom"],
'vai_cod' =>$codproducto[0]["cod"],
'txtcantidad' =>$_POST["txtcantidad"],
'vai_pre' =>$codproducto[0]["pre"],
'vai_img' =>$codproducto[0]["img"]
));
if(!empty($_SESSION["items_carrito"]))
{
if(in_array($codproducto[0]["cod"],
array_keys($_SESSION["items_carrito"])))
{
/*foreach es un bucle que permite recorrer estructuras
que contienen varios elementos (como matrices, recursos
u objetos)
sin necesidad de preocuparse por el número de
elementos.*/
foreach($_SESSION["items_carrito"] as $i => $j)
{
if($codproducto[0]["cod"] == $i)
{
if(empty($_SESSION["items_carrito"][$i]["txt
cantidad"]))
{
$_SESSION["items_carrito"][$i]["txtcanti
dad"] = 0;
}
$_SESSION["items_carrito"][$i]["txtcantidad"
] += $_POST["txtcantidad"];
}
}
} else
{
$_SESSION["items_carrito"] =
array_merge($_SESSION["items_carrito"],$items_array);
}
}
else
{
$_SESSION["items_carrito"] = $items_array;
}
}
break;
case "eliminar": if(!
empty($_SESSION["items_carrito"]))
{
foreach($_SESSION["items_carrito"] as $i => $j)
{
if($_GET["eliminarcode"] == $i)
{
unset($_SESSION["items_carrito"][$i]);
}
if(empty($_SESSION["items_carrito"]))
{
unset($_SESSION["items_carrito"]);
}
}
}
break;
case "vacio":
break;
case "pagar":
echo "<script> alert('Gracias por su compra - Dulceria El mercadito
'); window.location= 'indexCarrusel.html' </script>";
break;
}
}
?>
<html>
<meta charset="UTF-8">
<head>
<title>Dulceria</title>
</head>
<body>
<div align="center"><h1> <br>Dulceria El Mercadito <br> <br> Carrito
de compras</h1></div>
<div>
<div><h2>Lista de productos a comprar.</h2></div>
<?php
if(isset($_SESSION["items_carrito"]))
{
$totcantidad = 0;
$totprecio = 0;
?>
<table>
<tr>
<th style="width:30%">Descripción</th>
<th style="width:10%">Código</th>
<th style="width:10%">Cantidad</th>
<th style="width:10%">Precio x unidad</th>
<th style="width:10%">Precio</th>
<th style="width:10%"><a href="indexDulceria.php?
accion=vacio">Limpiar</a></th>
</tr>
<?php
foreach ($_SESSION["items_carrito"] as $item){
$item_price = $item["txtcantidad"]*$item["vai_pre"];
?>
<tr>
<td><img src="<?php echo $item["vai_img"]; ?>"
class="imagen_peque" /><?php echo $item["vai_nom"]; ?></td>
<td><?php echo $item["vai_cod"]; ?></td>
<td><?php echo $item["txtcantidad"]; ?></td>
<td><?php echo "$ ".$item["vai_pre"]; ?></td>
<td><?php echo "$ ". number_format($item_price,2); ?></td>
<td><a href="indexDulceria.php?
accion=eliminar&eliminarcode=<?php echo
$item["vai_cod"]; ?>">Eliminar</a></td>
</tr>
<?php
$totcantidad += $item["txtcantidad"];
$totprecio += ($item["vai_pre"]*$item["txtcantidad"]);
}
?>
<tr style="background-color:#f3f3f3">
<td colspan="2"><b>Total de productos:</b></td>
<td><b><?php echo $totcantidad; ?></b></td>
<td colspan="2"><strong><?php echo "$ ".number_format($totprecio, 2);
?></strong></td>
<td><a href="indexDulceria.php?accion=pagar">Pagar</a></td>
</tr>
</table>
<?php
} else {
?>
<div align="center"><h3>¡El carrito esta vacío!</h3></div>
<?php
}
?>
</div>
<div>
<div><h2>Productos</h2></div>
<div class="contenedor_general">
<?php
$productos_array = $usar_db->vaiquery("SELECT * FROM productos ORDER BY
id ASC");
if (!empty($productos_array))
{
foreach($productos_array as $i=>$k)
{
?>
<div class="contenedor_productos">
<form method="POST"
action="indexDulceria.php?accion=agregar&cod=
<?php echo $productos_array[$i]["cod"]; ?>">
<div><img src="<?php echo $productos_array[$i]["img"];
?>"></div>
<div>
<div style="padding-top:20px;font-size:18px;"><?php echo
$productos_array[$i]["nom"]; ?></div>
<div style="padding-top:10px;font-size:20px;"><?php
echo "$".$productos_array[$i]["pre"]; ?></div>
<div><input type="text" name="txtcantidad" value="1" size="2"
/><input type="submit" value="Agregar" />
</div>
</div>
</form>
</div>
<?php
}
}
?>
</div>
</body>
</html>
<!—ClaseDulceria.php-->
<?php
class DBControl
{
private $conn;
function construct()
{
$this->conn = $this->conectarDB();
}
function conectarDB() {
$conn = mysqli_connect("localhost","root","","carritodulceria");
return $conn;
}
function vaiquery($query)
{
$resultado = mysqli_query($this->conn,$query);
while($fila=mysqli_fetch_assoc($resultado))
{
$obtener_resultado[] = $fila;
}
if(!empty($obtener_resultado))
{
return $obtener_resultado;
}
}
function nfilas($query)
{
$resultado = mysqli_query($this->conn,$query);
$totalfilas = mysqli_num_rows($resultado);
return $totalfilas;
}
}
?>
La BD del carro de compras se llama carritodulceria y la tabla se llama productos y tiene los
siguientes campos:
CREATE TABLE `productos` (

ìd` int(11) NOT NULL,
ìmg` text NOT NULL,
`cod` varchar(50) NOT NULL,
`nom` varchar(50) NOT NULL,
`pre` double(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Y los datos que debes ingresar a la tabla son los siguientes:

INSERT INTO `productos` (ìd`, ìmg`, `cod`, `nom`, `pre`) VALUES
(1, 'imagenes/Ate.jpg', 'KDFI1', 'Ate', 20.00),
(2, imagenes /tamarindo.jpg', 'P4KU1L', 'Tamarindo', 5.00),
(3, imagenes /Alegría.jpg', 'KFJD31', 'Alegría', 10.00),
(4, imagenes /palanqueta.jpg', 'ASDKQ1', 'Palanqueta', 8.00),
(5, imagenes /muegano.jpg', 'OQMKEM4', 'Muegano', 12.00),
(6, imagenes /cocada.jpg', 'AAS2DGE', 'Cocada', 6.00);
//Se comparten los códigos CSS del ejemplo de la Dulceria//
<!—Dulceria.css-->
body {
background-image: linear-gradient(80deg, #a9df17 0, #ce59d5 25%, #87e7a4
50%, #ac52db 75%, #17f710 100%);
.Titulo{
text-align: left;
font-family: Comic Sans MS;
font-weight:bold;
font-size: 30px;
color: #eb589d;
text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px
#414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px
#414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px
#414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}
<!—CSS de las cards
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-
serif;
}
body {
display: flex;
flex-wrap:
wrap;
align-items: center;
justify-content:
center; min-height:
100vh;
background: rgb(74, 156, 161);
}
.card {
position: relative;
width: 350px;
height: 400px;
margin: 100px;
}
.card .face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
overflow: hidden;
transition: .5s;
}
.card .front {
transform: perspective(600px) rotateY(0deg);
box-shadow: 0 5px 10px #000;
}
.card .front img {

position:absolute;
width: 100%;
height: 100%;
object-fit:
cover;
}
.card .front h3 {
position: absolute;
bottom: 0;
width: 100%;
height: 45px;
line-height:
45px; color:
#fff;
background:
rgba(0,0,0,.4); text-
align: center;
}
.card .back {
background: rgb(3, 35, 54);
padding: 15px;
color: #f3f3f3;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
box-shadow: 0 5px 10px #000;
}
.card .back .link {

border-top: solid 1px #f395d7;
height: 50px;
line-height: 50px;
}
.card .back .link a {

color: #0cf3e7;
}
.card .back h3 {
font-size:
30px;
margin-top: 20px;
letter-spacing:
2px;
}
.card .back p {
letter-spacing: 1px;
}
.card:hover .front {
}
.card:hover .back {
}
<!—Sytle CSS-->
*
{
font-family: sans-serif;
}
body {
background: linear-gradient(to bottom, #3380B5, white) no-repeat center
top;
margin:0;
padding:0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
table
{
text-align:center;
width: 80%;
border-collapse: collapse;
border: 1px solid black;
margin:50px auto;
background: white;
}
th
{
background: steelblue;
height: 40px;
font-weight: lighter;
text-shadow: 0 1px 0 #38678f;
color: white;
border: 1px solid #38678f;
box-shadow: inset 0px 1px 2px
#568ebd; transition: all 0.2s;
font-size: 18px;
}
tr
{
border-bottom: 1px solid
#cccccc; width:100%;
}
td
{
border: 1px solid #cccccc;
padding: 10px;
transition: all
0.2s; font-size:
14px; text-
} align:center;
h2
{
} margin-left:30px;
im
g
{
width:150px;
height:150px;
a,input[type="submit"],button
{
font-size: 14px;
text-align:center;
width: 100px;
display: inline-block;
background-color:#FABD44;
padding: 6px 10px;
border-radius:5px;
text-decoration: none;
color:black;
border:1px solid
black; cursor:pointer;
}
hr
{
width:96%;
}
.contenedor_productos {
float: left;
background: white;
position: relative;
margin:1%;
border: 4px solid
black; border-
radius:5px;
text-align:center;
padding:20px
40px; margin-
bottom:4%;
.contenedor_general
{
width:80%;
text-align:center;
margin:0 auto;
}
.imagen_peque {
width: 50px;
height: 50px;
border-radius: 30%;
border: #E0E0E0 1px solid;
padding: 5px;
vertical-align:
middle; margin-right:
14px;
}
input[type="text"]
{
width: 50px;
height: 30px;
font-size:18px;
margin-right:10px;
margin-top:5px;
}

Ejemplo DULCERIA

Cargado por

Copyright:

Formatos disponibles

Ejemplo DULCERIA

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejemplo DULCERIA

Cargado por

Copyright:

Formatos disponibles

<!

<h1>Alta del Cliente</h1>

<form method="post" action="DulceriaAgregar.php">

//Declaración de variables que recibe del formulario

//Variable para guardar la inserción dentro de la tabla

//Instrucción para insertar dentro de la tabla

//Estructura para verificar si se realizo la

// Crear la conexión por medio de la función mysqli_connect

$conectar = mysqli_connect($nomserver, $usuario, $password, $BaseDatos);

//Declaración de variables que recibe del formulario

//Variable para crear la consulta

//nr es una variable para verificar el numero de filas que

/* la función require_once incluye y evalua el archivo especificado durante

//Estrucutra para agregar cada campo dentro de la tabla

CREATE TABLE `productos` (

Y los datos que debes ingresar a la tabla son los siguientes:

//Se comparten los códigos CSS del ejemplo de la Dulceria//

<!—CSS de las cards

.card .front img {

.card .back .link {

.card .back .link a {

También podría gustarte