UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE INGENIERIA INDUSTRIAL
CARRERA SISTEMAS DE INFORMACIÓN
PROYECTO
PROYECTO DE SEMESTRE:
Librería Online
ASIGNATURA
APLICACIONES WEB
AUTORES:
Grupo #6
APELLIDOS Y NOMBRES DE LOS ESTUDIANTES
Cruz Ramos Dayana
Jorge Adrian Aguayo Casabona
Steven Gavilanes Rodríguez
Angie Maria Cordova Lucin
Alexis Jurado Herrera
2022-2023 CII
PORTADA
2
Índice general
PORTADA.................................................. ¡ERROR! MARCADOR NO DEFINIDO.
Índice general ........................................................... ¡Error! Marcador no definido.
1. Introducción.......................................................... ¡Error! Marcador no definido.
1.1 Objetivo general ................................................. ¡Error! Marcador no definido.
1.2 Objetivos específicos......................................... ¡Error! Marcador no definido.
2. Desarrollo del Proyecto ....................................... ¡Error! Marcador no definido.
2.1.1 Análisis ..................................................... ¡Error! Marcador no definido.
Recolección de datos .......................................... ¡Error! Marcador no definido.
2.1.2 Recursos Tecnológicos........................... ¡Error! Marcador no definido.
2.1.3 Diseño del proyecto ............................................................................. 6
2.1.4 Desarrollo del proyecto ....................................................................... 9
2.1.5 Conclusiones ..................................................................................... 13
2.1.6 Recomendaciones ............................................................................. 13
3. Anexos .................................................................. ¡Error! Marcador no definido.
4. Bibliografía............................................................ ¡Error! Marcador no definido.
3
1. Introducción
Nuestra propuesta es ofrecer un mejor servicio al cliente y conseguir así una
ventaja en el mercado frente a la competencia. De esta manera, también se
ofrecerá al cliente el valor añadido de poder consultar cómodamente las ofertas de
nuestros libros y el stock que manejamos desde cualquier lugar.
1.1 Objetivo general
Vender nuestros libros de manera online, mediante nuestra librería virtual, la
cual le ofrecerá al cliente un excelente servicio, pues incluirá sugerencias y un gran
dinamismo durante el proceso de compra.
1.2 Objetivos específicos
1. Recopilar información y datos acerca del funcionamiento estándar de una
librería online.
2. Diseñar la interfaz y el aspecto que tendrá nuestra librería online.
3. Evaluar el diseño y funcionamiento del trabajo realizado, esto con las
respectivas pruebas en torno al proyecto.
2. Desarrollo del Proyecto
2.1.1 Análisis
El Análisis de datos que nos permitió identificar las variables, se realizó mediante
una eficiente investigación con su respectivo proceso en cuanto a gestión de
información se refiere.
4
Requerimientos funcionales Requerimientos no funcionales
• Consultar los libros. • La librería virtual debe ser capaz
• Consultar los detalles del libro. de procesar N pedidos por
• Consultar por recomendaciones. segundo.
• Ver disponibilidad de stock. • Toda funcionalidad del sistema
• Añadir artículos al carrito. debe responder al usuario en
• Eliminar artículo del carrito. menos de 5 segundos.
• Consultar carrito. • La librería virtual debe tener un
• Realizar compra. diseño Responsive a fin de
• Ver los métodos de pago garantizar la adecuada
visualización en múltiples
computadoras, tabletas y
celulares inteligentes.
• La librería virtual debe tener una
interfaz gráfica bien diseñada.
• La probabilidad de falla del
sistema no podrá ser mayor a
0,005%
• El sistema debe tener una
disponibilidad del 99,99% de las
veces en que un usuario intente
accederlo.
5
Recolección de datos
Se utilizaron las siguientes técnicas y herramientas para recopilar información:
Investigación, entrevistas, encuestas y observación.
Para determinar los datos tales como: Edad del usuario, experiencia en compras
online, popularidad de libros, se realizó encuestas que ayudo a determinar estas
preferencias.
Los resultados de las encuestas arrojaron resultados que impulsan a la
comercialización e implementación del proyecto en el mercado online.
La edad de los entrevistados fue una variedad entre los 17 y 65 años
mayoritariamente, sin embargo, las personas entre los 17 y 40 fue la predominancia
de entrevistados.
2.1.2 Recursos Tecnológicos
PHP, HTML, CSS, Base de datos MySql en phpMyAdmin
Visual Studio Code, Xampp
PHP:
PHP es un lenguaje de programación destinado a desarrollar aplicaciones para
la web y crear páginas web, favoreciendo la conexión entre los servidores y la
interfaz de usuario.
PHP tiene una característica que lo diferencia de los demás lenguajes, y es que
está diseñado para incrustarse en HTML. Esto significa que un documento HTML
puede contener elementos de PHP integrados, siempre y cuando se sigan unas
normas determinadas.
6
HTML:
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de
Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto
CSS:
Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en
cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores,
formas, márgenes, etc...) a uno o varios documentos (generalmente documentos
HTML, páginas webs) de forma automática y masiva.
MySQL:
MySQL es un sistema de gestión de bases de datos relacionales (RDBMS) de
código abierto respaldado por Oracle y basado en el lenguaje de consulta
estructurado (SQL).
2.1.3 Diseño del proyecto
7
Pantalla de Inicio:
Pantalla para el Carrito de compras:
8
Pantalla para ver los detalles del libro:
Pantalla para el método de pago y comprar el producto:
9
2.1.4 Desarrollo del proyecto
Index.php: El index es el archivo de inicio y por defecto que se ejecuta al abrir el
sitio web.
Se utilizó Boostrap
Fetch, mecanismo que permite realizar llamadas simples AJAX, etc.
CSS
MySql en phpMyAdmin
carrito.php para el carrito de compras
details.php para ver los detalles del producto, etc.
La prueba del sitio web se realizó mediante XAMPP
Parte del código:
10
<?php
require 'config/config.php';
require 'config/database.php';
$db = new Database();
$con = $db->conectar();
$sql = $con->prepare("SELECT id, nombre, precio FROM productos WHERE activo=1");
$sql->execute();
$resultado = $sql->fetchALL(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libreria Online</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="css/estilos.css" rel="stylesheet">
</head>
<body>
<!--Barra de navegación-->
<header>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<img src="images/brand.jpg" class="nav-brand">
<a href="#" class="navbar-brand">
<strong>Libreria Online</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
11
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="#" class="nav-link active">Catalogo</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contacto</a>
</li>
</ul>
<a href="checkout.php" class="btn btn-primary">
Carrito<span id="num_cart" class="badge bg-secondary"><?php echo
$num_cart; ?></span>
</a>
</div>
</div>
</div>
</header>
<!--Contenido-->
<main>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<?php foreach($resultado as $row) {?>
<div class="col">
<div class="card shadow-sm" >
<?php
$id = $row['id'];
$imagen = "images/productos/" . $id . "/principal.jpg" ;
if(!file_exists($imagen)) {
$imagen = "images/no-photo.jpg" ;
}
?>
<img src="<?php echo $imagen; ?>" height="350" width="350" >
<div class="card-body">
<h5 class="card-title"><?php echo $row['nombre'];?></h5>
<p class="card-text">$ <?php echo number_format($row['precio'],
2, '.', ',');?></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="details.php?id=<?php echo $row['id'];
?>&token=<?php echo
hash_hmac('sha1', $row['id'], KEY_TOKEN);?>"
12
class="btn btn-primary">Info</a>
</div>
<button class="btn btn-outline-success" types="button"
onclick="addProducto
(<?php echo $row['id']; ?>, '<?php echo hash_hmac('sha1',
$row['id'],KEY_TOKEN); ?>')">Agregar al carrito</button>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</main>
<!-- Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
function addProducto(id, token) {
let url = 'clases/carrito.php'
let formData = new FormData()
formData.append('id', id)
formData.append('token', token)
fetch(url, {
method: 'POST',
body: formData,
mode: 'cors'
}).then(response => response.json())
.then(data => {
if(data.ok){
let elemento = document.getElementById("num_cart")
elemento.innerHTML = data.numero
}
})
}
</script>
</body>
13
2.1.5 Conclusiones
Podemos concluir que el proyecto de la librería online permite visualizar cada
libro con su respectivo título, precio, descripción, etc.
La librería online tiene un diseño Responsive a fin de garantizar la adecuada
visualización en múltiples computadoras, tabletas y celulares inteligentes.
Aparte de ver los detalles, se pueden agregar varios libros al carrito de compras
para posteriormente realizar el pago de estos, ya sea por Paypal, tarjeta de débito
o crédito.
2.1.6 Recomendaciones
Poder sacar mas versiones y mejoras al proyecto en un futuro no muy lejano,
agregar todo tipo de libros para todos los gustos.
14
3. Anexos
15
16
4. Bibliografía
Bibliografía
colaborador. (s.f.). computerweekly. Obtenido de computerweekly:
https://www.computerweekly.com/es/definicion/MySQL
Content, R. R. (12 de Junio de 2019). Rockcontent. Obtenido de Rockcontent:
https://rockcontent.com/es/blog/que-es-
css/#:~:text=Esta%20especificaci%C3%B3n%20es%20un%20lenguaje,con
trol%20de%20los%20resultados%20finales.
manz. (s.f.). lenguajecss. Obtenido de lenguajecss:
https://lenguajecss.com/css/introduccion/que-es-css/
pixabay. (18 de febrero de 2016). Obtenido de pixabay:
https://pixabay.com/es/photos/libros-librer%c3%ada-libro-leyendo-1204029/
