El documento presenta el informe final de un examen grupal sobre el desarrollo de una tienda en línea utilizando Visual Studio Code. El proyecto incluye la creación de una página web con secciones para productos, registro de usuarios, carrito de compras y chat de asistencia. Se implementaron funcionalidades como login, agregar productos al carrito, eliminarlos, y pago utilizando HTML, PHP y base de datos. El sitio web permite navegar entre las diferentes secciones y visualizar información sobre los productos de forma individualizada.
1. INFORME FINAL
Examen Grupal
Integrantes: Jefferson Paúl Cuenca Tenecela
Milton Gonzalo Farinango Morales
SEMESTRE: Tercero
PARALELO: “C”
TEMA:
Tienda en Visual Studio Code (Examen)
OBJETIVO:
Realizar la utilización de operadores lógicos y mejoramiento del uso del lenguaje de programación
“HTML”, “PHP” y “BASE DE DATOS”.
Presentar un programa con todos los conocimientos que se adquirió en este semestre de clase
Reconocer el uso de variables para el desarrollo del programa en “HTML “, “PHP” y BASE DE DATOS”.
Aprender a utilizar el nuevo lenguaje de programación de “HTML”, “PHP” y “BASE DE DATOS”.
RESULTADOS DE APRENDIZAJE
La mejor comprensión del uso de lenguaje HTML, PHP Y Base de datos
Correcto uso de operadores lógicos
Utilización de las sentencias básicas
Manipulación del servidor “XAMPP”
Utilización de los operadores lógicos
Manipulación de base de datos
ACTIVIDADES:
Realizar una página web que contenga información comerciante de una tienda de accesorios de
computadoras, así como también debe contener asistente virtual
Para la página se utilizamos las siguientes líneas de códigos
Realicé un ingreso para usuarios ycontraseñas, enlazando auna base de datos donde tienes la opción de crear en la misma
página las cuestas, estructurar de la página.
<body BACKGROUND="https://i.pinimg.com/originals/8d/0b/88/8d0b883ff3b1abbf1dc7369f6b895443.gif">
<?php
include("conexion.php");
$nombre = $_POST["usuario"];
$pass = $_POST["pass"];
//Login
if(isset($_POST["btningresar"]))
{
UNIVERSIDAD CENTRAL DEL ECUADOR
FACULTAD DE FILOSOFÍA, LETRAS Y CIENCIAS DE LA EDUCACIÓN
CARRERA DE LA PEDAGOGÍA DE LAS CIENCIAS EXPERIMENTALES
DE LA INFORMÁTICA
2. $query = mysqli_query($conn,"SELECT * FROM login WHERE usuario = '$nombre' AND password='$pass'");
$nr = mysqli_num_rows($query);
if($nr==1)
{
echo "<script> alert('Bienvenido $nombre'); window.location='pa1.php' </script>";
}else
{
echo "<script> alert('Usuario no existe'); window.location='index.html' </script>";
}
}
//Registrar
if(isset($_POST["btnregistrar"]))
{
$sqlgrabar = "INSERT INTO login(usuario,password) values ('$nombre','$pass')";
if(mysqli_query($conn,$sqlgrabar))
{
echo "<script> alert('Usuario registrado con exito: $nombre'); window.location='index.html' </script>";
}else
{
echo "Error: ".$sqlgrabar."<br>".mysql_error($conn);
}
}
?>
Ejecución del ingreso de usuarios y contraseñas
Conexión a la base de datos donde está almacenado los usuarios y contraseñas de la cuenta
3. <?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "test2";
$conn = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$conn)
{
die("No hay conexion:" .mysqli_connect_error());
}
?>
Una vez ingresado te ejecuta el mensaje y te arroja a la página principal
Desarrollo de la página, tanto encabezado, imágenes, textos, precios, links o enlaces, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inicio</title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<header>
<div class="wrapp">
<div class="logo">
<a href="#"><img src="https://skin-
us.cdn.prod.wmgecom.com/skin/frontend/wmi/theme1234/images/logo.svg"width="80"
height="50"alt="TOP"></a>
</div>
4. <nav>
<ul>
Links de enlaces a páginas exteriores
<li><a href="index.html">Login</a></li>
<li><a href="https://www.youtube.com/channel/UCBQZwaNPFfJ1gZ1fLZpAEGw">Youtube </a></li>
<li><a href="https://www.instagram.com/twentyonepilots/?hl=es-la">Instagram</a></li>
<li><a href="https://www.facebook.com/twentyonepilots">Facebook </a></li>
</ul>
</nav>
</div>
</header>
<section class="main">
<div class="wrapp">
<div class="mensaje">
Título principal de la pagina
<font face="Courier New"> <h1>Bienvenido a nuestra
Tienda Online </h1> </font>
</div>
<center>
Imágenes insertadas
<div class="container">
<ul class="slider">
<li id="slide1">
<img src="https://i.ytimg.com/vi/iRwXUzHpHIc/maxresdefault.jpg"/>
</li>
<li id="slide2">
<img src="https://1.bp.blogspot.com/-
aHIOHrYhN9c/XSdxhhbRlYI/AAAAAAAAKIY/Fo9RiEMP274qPHJIODc1HJ1d_sXFCvkrACLcBGAs/s1600/lemur-
timelapse-1280.gif"/>
Subtitulo y texto de introducción de la tienda
</li>
<li id="slide3">
<h1>Información sobre Scaled and icy</h1>
<br>
<br>
<br>
<p>La tienda Scaled an Icy es una idea de negocio que surge como respuesta a la
necesidad del consumidor
que demanda una moda extranjera centrada al estilo de una banda de Alternativo
denominada como Twenty One pilos.El punto de este tipo de
negocio es darle al cliente un solo lugar donde pueda adquirir todo lo que
necesite para una moda alterna . Por ello es que el inventario
planea cubrir ropa tanto para hombre como para mujer; así como un estilo único y escensial</p>
<a href="">//</a>
</li>
5. </ul>
Estilo de la pagina
<ul class="menu">
<li>
<a href="#slide1">-</a>
</li>
<li>
<a href="#slide2">-</a>
</li>
<li>
<a href="#slide3">-</a>
</li>
</ul>
</div>
Insertar el diseño de pagina “línea”
<center>
<body bgcolor="#8DD6C0">
<MARQUEE WIDTH=100% BGCOLOR=RED> <font face= TIMESNEWROMAN color= BLACK size=7>
PRODUCTOS
</font>
</MARQUEE>
<br>
<center>
Insertar productos, llamada de variables y parte practica
<?php
session_start();
require_once("clase.php");
$usar_db = new DBControl();
if(!empty($_GET["accion"]))
{
switch($_GET["accion"])
{
case "agregar":
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_DESCRIPCION' =>$codproducto[0]["DESCRIPCION"]
9. <?php
}
?>
</div>
<div>
<div><h2>Productos</h2></div>
<MARQUEE WIDTH=100% BGCOLOR=#8DDEW20> <font face= TIMESNEWROMAN color= white size=13>
PROGRAMA REGISTRO
</font>
</MARQUEE>
<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="index.php?accion=agregar&cod=
<?php echo $productos_array[$i]["cod"]; ?>">
<div><img src="<?php echo $productos_array[$i]["DESCRIPCION"]; ?>"></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>
<html>
</html>
<?php
}
}
?>
</div>
</body>
</html>
10. Código de enlace para el chat box, dialogo que se establecerá en la tienda para los productos
que el cliente establezca
<script src="https://www.gstatic.com/dialogflow-
console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
intent="WELCOME"
chat-title="TY"
agent-id="5d2d7995-5ed6-4284-95a4-a08a5307e35b"
language-code="es"
></df-messenger>
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #F690F3;
--df-messenger-chat-background-color: #90CDF6;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</body>
</html>
Inicio de la página principal, logo, enlaces, diseño, etc.
11. Productos divididos por secciones, precios, botones para comprar o elegir el producto y la visualización del chat
box.
13. Productos con precios, con opción a eliminar y muestra del producto que está adquiriendo.
Vinculo del chat box, información pertinente de la página.
14. Opciones de editar y borrar productos con forme a la imagen
Visualización del producto de forma individual.