7 DE NOVIEMBRE DE 2018

Programación Web
Prof. Estela Romero Fuentes

Guillermo Guzmán Espinosa

Fernando Ortiz Briseño PIZZA DELIGHT
David Abundis Cerda SITIO WEB
Maria Magdalena Lugo Donosa
Índice
Introducción a las Aplicaciones Web .................................................................................................. 4
Maquetación del proyecto .............................................................................................................. 6
HTML Y CSS.......................................................................................................................................... 9
Código HTML ................................................................................................................................. 12
Barra de Navegación ................................................................................................................. 12
Footer ....................................................................................................................................... 12
Index Contenido ........................................................................................................................ 1
Combos Contenido ...................................................................................................................... 2
Adicionales Contenido................................................................................................................. 1
Pizzas Contenido ......................................................................................................................... 1
Código CSS ....................................................................................................................................... 1
Estilo Carrito ................................................................................................................................ 1
Estilo Footer ................................................................................................................................ 1
Estilo Menu ................................................................................................................................. 1
Estilo SlideShow .......................................................................................................................... 1
Programación del lado del Cliente ...................................................................................................... 1
JavaScript......................................................................................................................................... 1
Uso de Javascript y DOM en el Proyecto ........................................................................................ 3
Programación Footer .................................................................................................................. 3
Programación Registro Validación .............................................................................................. 3
Utilización de Librerías JQuery .................................................................................................... 3
Programación de Envio id productos .......................................................................................... 3
Programación Slider .................................................................................................................... 1
Programación del lado del Servidor .................................................................................................... 1
PHP .................................................................................................................................................. 1
Modelo Relacional de la BD ............................................................................................................ 2
Uso de PHP en el Proyecto .............................................................................................................. 2
Registro de Usuario ..................................................................................................................... 2
Login ............................................................................................................................................ 1
Eliminar del Carrito...................................................................................................................... 1
Cerrar Sesión ............................................................................................................................... 1
Agregar en el Carrito ................................................................................................................... 1

1
Conclusión ........................................................................................................................................... 1
Anexo 1................................................................................................................................................ 1

2
Introducción

Pizza Delight es un sitio complemente orientado al mejor servicio de nuestros

clientes, ofrecieno una nueva alternativa de compra, ahora en línea, esto, para que
nuestro usuario pueda comprar nuestros productos desde la comodidad de su
hogar, a través de este documentse busca que el lector entienda el diseño de
nuestra pagina y el funcionamiento de mismo. Debemos de tener en ccuenta a la
ora de describir nuestrp sitios dos aspectos fundamentales o que podemos
subdividir en citas como lo son nuestro back-end y nuestro frot-end.

Por consiguente, describimos en la parte principal se encuentra nuestro html,

o pudiese llamarse nuestro texto plano sin interactividad con el usuario, a lo cual,
podemos dividir en este caso en particular de nuestro proyecto tres tipos de archivos
que fueron implementados: HTML, CSS, JS y PHP, los cuales se describen mas
adelante pero como introducción, podemos decir que nuestras etiquetas HTML son
lo que utilizamos como estructura o cuerpo de nuestro documento, el CSS es todo
el diseño estético que tendrá nuestra pagina, el JS es la programación que
utilizaremos para cierta interactividad del usuario con la pagina y por ultimo nuestros
documentos o codificación PHP el cual esta en su maypria directamente orientado
a realizar la conexión a la base de datos, el necesario para hacer las consultas u
operaciones dentro de la Base de Datos.

A continuación, se mostrara todo el contenido de nuestra página, la

codificación, estructura y principalmente todo lo que la conforma.

3
Introducción a las Aplicaciones Web
Las aplicaciones Web han revolucionado la forma de utilizar internet, aumentando
el contenido de las páginas con texto estático (texto que no evoluciona, sino que
permanecen como es) a un contenido rico e interactivo, por lo tanto, escalable.

Aplicación Web: Son aplicaciones que pueden utilizar accediendo a un servidor

web a través de internet mediante un navegador web.

Aplicación Web en Presentación: Genera página web interactiva que contienen

varios tipos de lenguaje de marca (HTML, XML, etc.) y contenido dinámico en
respuesta a peticiones

Las aplicaciones orientadas a la presentación frecuentemente son clientes de las

app web orientadas a servicios.

Aplicación Web en Servicio: Estas páginas implementan el punto final del servicio
web.

Cliente: El cliente principal son los browsers o navegadores que solicitan

información al servidor.

Servidor: Son los servidores web que proporcionan documentos y contenidos

multimedia a los clientes a través de la red.

Arquitectura de dos capas: Consiste básicamente en un cliente que realiza

peticiones a otro programa (El servidor que le da respuesta).

Cliente – Servidor: Es aquella red de comunicaciones en la que todos los clientes

están conectaos a un servidor en el que se centraliza diversos recursos y
aplicaciones y que los pone a disposición de los clientes cada vez que son
solicitados.

Arquitectura de 3 capas:

 Capa de Datos (Información en BD)

 Capa de negocio (Envío de Información)
 Capa de presentación (Formulario Web)

4
Arquitectura Orientada a Servicios (SOA): Esta basado en el diseño de servicios
de que reflejan las actividades del negocio en le mundo real, estas actividades
hacen parte de los procesos del negocio de la compañía.

o Representar los servicios utilizados en descripciones de negocio para

asignarte un contexto de negocio.
o Tener requerimientos de infraestructura específicos y únicos para este tipo
de arquitectura en general.
o Estar implementada de acuerdo con las condiciones específicas de la
arquitectura de TI en cada compañía.

Arquitectura Orientada a Recursos (ROA): Es más un paradigma de un

acercamiento de arquitectura que considera que los recursos son elementos de la
web. La parte clave, de todas las formas, e que pueden ser descubiertos y una vez
que son descubiertos pueden representarse así mismo.

El ROA esta completamente basado en rest y aprueba su simplicidad,

conocimientos técnicos mínimo y URI para cada recurso.

Ingeniería Web: Es el proceso usado para crear, implantar y mantener aplicaciones

y sistemas web de alta calidad.

Estándares Web: IETF: Internet Engeniering TaskForce. RFC. W3C: Consorcio de

la World Wide Web

Accesibilidad:

Iniciativa de Accesibilidad de la Web WCAG Guía y herramientas para la

accesibilidad.

Criterios.

 Perceptible: Provee alternativas de texto para los que no son de texto

 Operable: Debe de cumplir con ciertas características, provee suficiente
tiempo para leer y usar el contenido.
 Entendible: Predictible
 Robusta: Maximiza la compatibilidad con los usuarios actuales y futuro

5
Maquetación del proyecto
(Ver Anexo 1)

Este es el index de nuestra pagina donde mostramos lo que es nuestra barra de menú, en donde
teneos las diferentes opciones de navegabilidad de la página, donde en la parte derecha al final de
la barra de menú, se encuentra nuestro carrito de compras y nuestra sección para cerrar sesión.

Después en ñla parte inferior a nuestra barra de navegación encontramos nuestro Slider, en el cual
mostrar en este caso en particular 4 imágenes que se deslizaran y llavaran al usuario a diferentes
partes de la pagina, donde, además, se muestras los botones de navegación para la interactividad
con el usuario, el botón de play / stop, y paginación siguiente.

Después de nuestro slide, encontramos nuestra sección de registro y por último nuestro pie de
pagina o footer, dodne tenemos nuestras redes sociales, información de la compañía y nuestra
ubicación y contacto.

Ilustración 1 Sección Inicio

Después nuestra segunda pagina es los productos de pizza donde tenenemos como fijo nuestra
barra de navegación y nuestro pie de pagina, lo único diferente que cambia a lo demás es nuestra
muestra de productos, donde tenemos la tabla de muestra y con implementación de php, validamos
si hay un sesión y si la hay mostramos el agregar al carrito o no, y así por consiguiente en las demás
de combos y adicionales.

6
Ilustración 2 Sección Pizzas

Ilustración 3 Sección Combos

7
Ilustración 4 Sección Adicionales

Ilustración 5 Sección Carrito de Compras

En esta sección del carrito de compras tenemos todo lo que es lo que el usuario agrego al carrito,
según la sesión que este inicioada, en donde, tenemos como muestra y fijo, el footer y la barra de
menú, además, ahora mostramos lo que e la imagen de nuestro producto, descripción y precio.

8
HTML Y CSS
HTML: Es un lenguaje de programación que se utiliza para el desarrollo de páginas
de internet. Se trata de las siglas que corresponden a Hyper Text Markup Language,
es decir, Lenguaje de Marcas de Hipertexto.

CSS: (Hojas de Estilo en Cascada) Es una tecnología que nos permite crear páginas
web de una manera más exacta, gracias a las CSS somos mucho más dueños de
los resultados finales de la página, pudiendo hacer muchas cosas que no se podían
hacer utilizando solamente HTML.

Con CSS podemos especificar estilos como tamaño, fuentes color, espacios.

Formas de Estilo

 Directamente a la marca
 En el head de la pagina
 Archivo Externo o independiente

Estructura Básica

<html>

<head><title></title></head>

<body>

</body>

</html>

Etiqueta <br>

Hace un salto de línea y me coloca el cursor en la siguiente.

Etiqueta <p>

Oración o conjunto de oraciones referentes a un mismo tema.

Etiqueta <h1>

Define el tamaño de la cabecera

9
Etiqueta <hr>

Dibuja de manera predeterminada una regla horizontal alineada automáticamente,

con una apariencia de 3D.

Etiqueta Énfasis <strong>

Resalta la importancia de un texto.

Unificación de Celdas

En algunas ocasiones puede ser necesario unificar dos o mas celdas en una sola
que pasará a ocupar el lugar de aquellas afectadas.

 Rowspan (Unificación Vertical)

 Colspan (Unificación Horizontal)

Etiquetas Body

 <center>Se utiliza para centrar el texto o imagen</center>

 <b></b>Negrita
 <u></u> Subrayado
 <i></i> Cursiva

Selectores

Una regla de CSS esta formada por un selector y declarador, una misma regla se
puede declarar a todos y un mismo selector se puede aplicar en varios.

Selector Universal

El * selecciona todos los elementos de la pagina

Selector de tipo etiqueta

Aplica el estilo a los elementos que coinciden con el selector (se aplica en todos los
elementos)

Selector descendente

10
Selecciona los elementos que se encuentran dentro de otros elementos. Un
elemento es descendente de otro cuando se encuentran entre las etiquetas de
apertura y cierre.

Selector de Clase

Para aplicar estilos a un solo elemento de la pagina consiste en utilizar el atributo

class de html, sobre el elemento para indicar directamente la regla css

Selector de ID

Cuando se desea aplicar estilos CS a un único elemento

Contenido (content): Se trata del contenido HTML del elemento

Relleno (padding): Espacio libre opcional existente entre el contenido y el borde

Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno

Color de fondo (background color): Color que se muestra detrás del contenido
en el espacio de relleno.

Margen (margin): Separación opcional existente entre la caja y el resto de las cajas
adyacentes.

Anchura: La propiedad CSS controla la anchura de la caja de los elementos se

denomina width.

Propiedad width no admite valores negativos y los valores en porcentaje se calculan

a partir de la anchura de su elemento padre.

11
Código HTML
Barra de Navegación
<header> inigualables, siempre con la firmeza y
<nav class="menu"> seguridad de que nuestros clientes son lo

<ul> más importante. Por eso mismo brindamos la

<img class="logo2" mayor calidad en nuestros productos 100%
src="imagenes/logo.png" height="70%">
frescos y llenos de amor ♥ </p>
<li class="logo"></li>
<a href="index.php"> </div>
<li>Inicio</li> <div class="columna2">
</a>
<a href="pizzas.php"> <h1>Redes Sociales</h1>
<li>Pizzas</li> <div class="row">
</a>
<img
<a href="combos.php">
<li>Paquetes</li> src="imagenes/iconos/facebook.png">
</a> <label>Siguenos en
<a href="adicional.php">
<li>Adicionales</li> Facebook</label></div>
</a> <div class="row">
<?php
<img
if(isset($_SESSION['id_usuario'])){ ?> <a
class="icono" href="carrito.php"><li src="imagenes/iconos/twitter.png">
class="icon-cart"></li></a> <label>Siguenos en
<a
href="php/cerrarsesion.php"><li>Cerrar Twitter</label></div>
Sesión</li></a><?php } <div class="row">
else{ ?>
<img
<a class="icono2" href="#registro">
<li class="icon-user"></li></a> src="imagenes/iconos/instagram.png">
<a <label>Siguenos en
href="usuario.php"><li>Login</li></a><?php
Instagram</label></div>
} ?>
</ul> </div>
<div class="columna3">
</nav>
</header> <h1>Información de

Footer Contacto</h1>
<footer> <div class="row2">
<div class="contenertodo"> <img
<div class="pie"> src="imagenes/iconos/home.png">
<div class="columna1"> <label>Boulevar Lázaro
<h1>Más Información de la Cárdenas #512, Col. Centro, La Piedad,
compañia</h1> Michoacán, México.</label></div>
<p>Pizza Delight degustando a <div class="row2">
miles de familias con su pizza única y sabor

12
 <img play: {
src="imagenes/iconos/telefono.png"> active: true,
<label>352-103-91-
// [boolean] Generate the play
04</label></div> and stop buttons.
<div class="row2"> // You cannot use your own
<img buttons. Sorry.
src="imagenes/iconos/correo.png"> effect: "slide",
<label>ContactoPizzaAmigo@pizzadelight.co
// [string] Can be either "slide"
m</label></div> or "fade".
</div> interval: 3000,

// [number] Time spent on

</div> each slide in milliseconds.
<div class="pie2">
auto: true,
<div class="derechos">®2018
// [boolean] Start playing the
Todos los Derechos Reservados |<label slideshow on load.
class="tec"> Pizza Delight</label></div>
swap: true,
</div>
// [boolean] show/hide stop
</div>
and play buttons
</footer>
pauseOnHover: false,
Index Contenido // [boolean] pause a playing
<section class="primera">
slideshow on hover
<div class="main">
restartDelay: 2500
<div class="slides">
// [number] restart delay on
<a href="pizzas.html"><img inactive slideshow
src="imagenes/slides/cruji.jpg" alt=""></a>
}
<a href="adicional.html"><img
});
src="imagenes/slides/hawai.jpg" alt=""></a>
});
<a href="combos.html"><img
src="imagenes/slides/original.jpg" alt=""></a> </script>
<a href="pizzas.html"><img <!--Script Slide-->
src="imagenes/slides/orilla.jpg" alt=""></a>
<script src="js/formularios.js"></script>
</div>
</section>
</div>
<hr>
<script type="text/javascript">
<section>
$(function() {
<table width="100%" style="font-size:
$(".slides").slidesjs({ 25px; list-style: none;" class="datos">

1
 <?php
if(isset($_SESSION['id_usuario'])){ ?>
<center><h1>Las Mejores Pizzas
para Degustar</h1></center>
<li><label>Confirme
Correo:</label> <input type="email"
name="valcorreo" id="valcorreo"
required></li>

<center><img class="logot" <li><label>Contraseña:</label><input

width="50%" type="password" name="contra" id="contra"
src="imagenes/logo.png"></center> required></li>
<?php <li><label>Confirme
} else{ Contraseña:</label> <input type="password"
name="valcontra" id="valcontra"
?> required></li>
<form action="php/registro.php" <li><input type="submit"
method="post" onsubmit="return validar()"> name="btn"></li>
<tr> </td>
<td id="registro">Registro</td> <td><img class="logot"
width="50%" align="right"
</tr>
src="imagenes/logo.png"></td>
<tr>
</tr>
<td>
</form>
<li><label>Nombre:</label>
<?php
<input type="text" name="nombre"
id="nombre" required></li> }
<li><label>Apellido:</label> ?>
<input type="text" name="apellido"
id="apellido" required></li> </table>

<li><label>Correo:</label> </section>
<input type="email" name="correo"
id="correo" required></li>

Dentro de nuestra estructuración HTML utilizamos lo que fue nuestras etiquetas de

listado, la cabecera, la barra de navegación y el contenido, de la manera en la cual
seccionamos es conla misma etiqueta section, la barra de navegación y nuestro
footer como tal, incluyendo esto, la estructuración es simple y sencilla.

Combos Contenido
<section> <tr>
<img <td>
src="imagenes/pizza2a9sarten.jpg" <p>CRUJI</p><img
width="90%" height="35%" style="margin-left: width="100%" src="imagenes/cruji.png">
3%;"> <ul>
<input type="hidden"
<table class="listado"> name="idprodu">
<form action="php/agregar.php"
name="formu" method="post">

2
 <li>Nuestra masa estrella
crujiente y deliciosa, al pedirla aquí, llevate
gratis un refresco 1.5L</li>
<p class="precio2">$290</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="combocruji()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Cajeta Bit Gratis + Pizza
Grande</p><img
width="100%"src="imagenes/pizza2a9sarten.
jpg">
<ul>
<li>Cajeta Bit GRATIS en la
compra de pizza Grande</li>
<p class="precio2">$280</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="combocajeta()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr>
<td>
<p>Pizza Grande +
Papotas</p><img width="100%"
src="imagenes/originalpapas.png">
<ul>
<li>La deolicios pizza de
Pepperoni Original + unas papotas, las
ideales para acompañar este manjar POR
SOLO $129 PESOS</li>
<p class="precio2">$129</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
Dentro de los combos, lo único que fue implementado ademas de lo que ya tenemos
o sabmos que el la barra de navgacion y nuestro footer, es la tabla de contenido de
nuestros productos, donde únicamente se muestra fijamente cada uno de ellos con
su descripción, nombre, precio y descriptivo nombre.
onclick="combogrande()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Orilla Rellena de
Queso</p><img width="100%"
src="imagenes/orilla de queso.png">
<ul>
<li>Tu Pizza a tu manera,
prueba esta deliciosa combinación, de la
riquisima orilla de queso acompañado del
mejor sabor, una pizza</li>
<p class="precio2">$180</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="comboOrilla()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr width="100%">
<td colspan="2">
<p>Cajeta Bit gratis + Pizza
Grande</p><img width="70%"
src="imagenes/pizza2a9.jpg" >
<ul>
<li>Cajeta Bit GRATIS en la
compra de Pizza Grande</li>
<p class="precio2">$190</p>
</ul>
<br>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="comboCavara()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
</form>
</table>
</section>
1
Adicionales Contenido
<img src="imagenes/canelabit.jpg"
width="50%" height="35%" style="margin-left:
24%;">
<table class="listado">
<form action="php/agregar.php"
name="formu" method="post">
<tr><td colspan="2" style="font-size:
40px; color:
red;"><strong>ENTRADAS</strong></td></tr
> <?php
<tr>
<td>
<p>Papotas</p><img
width="100%" src="imagenes/papas.jpg">
<ul>
<input type="hidden"
name="idprodu">
<li>Ricos gajos de papa con
un espolvoreado picosito</li>
<p class="precio2">$60</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="papotas()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Alitas</p><img
width="100%"src="imagenes/alitas.jpg">
<ul>
<li>Deliciosas alitas
horneadas con salsa Mango Habanero</li>
<p class="precio2">$100</p>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="alitas()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr><td colspan="2" style="font-size:
40px; color:
red;"><strong>POSTRES</strong></td></tr>
<tr>
<td>
<p>Canela Bit</p><img
width="100%" src="imagenes/canelabit.jpg">
<ul>
<li>Panecitos espolvoreados
con canela y azúcar</li>
<p class="precio2">$90</p>
</ul>
<input type="hidden"
name="cajetabi" />
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="canela()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Cajeta Bit</p><img
width="100%" src="imagenes/cajetabit.jpg">
<ul>
<li>Deliciosos panecitos
cubiertos de cajeta y glass</li>
<p class="precio2">$90</p>
</ul>
<input type="hidden"
name="cajetabit" value="0" />
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="cajeta()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr width="100%">
<td colspan="2">
<p>Bebidas</p><img
width="70%" src="imagenes/chescos.jpg">
<ul>
<li>Pepsi</li>
<li>Manzanita Sol</li>
<li>Mirinda</li>
<li>7up</li>
<li>Liptón</li>
<li>Agua Natural</li>
<li>Be Light Jamaica</li>
<span>Elija Refresco:
</span>
<select name="chescos"
class="listado2">
1
 <option value="Pepsi">Pepsi</option> <br>
<option value="Manzanita Sol">Manzanita <?php
Sol</option> if(isset($_SESSION['id_usuario'])){ ?>
<option value="Mirinda">Mirinda</option> <input type="submit"
<option value="7up">7up</option> class="button" name="agregar"
<option value="Lipton">lipton</option> onclick="refresco()" value="Agregar al
<option value="Agua Natural">Agua Carrito"></input> <?php } ?>
Natural</option> </td>
<option value="Be Light Jamaica">Be Light </tr>
Jamaica</option> </form>
</select> </table>
<p class="precio2">$25</p> </section>
</ul>
Prosiguiendo de esta manera se muestra lo mismo, en nuestra sección de
adicionales, pizzas y combos, tienen como tal la barra de navegación, el respectivo
footer y como tal la muestra de los contenidos, en donde es mostrado que, si tiene
una sesión iniciada, se muestre el botón de agregar carrito y si hay sesión ue omita
el mostrado de los botones de agregar carrito.

1
Pizzas Contenido
<section>
<img src="imagenes/slides/original.jpg"
width="90%" height="35%" style="margin-left:
3%;">
<table class="listado">
<form action="php/agregar.php"
name="formu" method="post">
<tr>
<td>
<p>Pepperoni Special</p><img
src="imagenes/pepperoni.jpg">
<ul>
<li>Pepperoni</li>
<li>Champiñones</li>
<li>Extra Queso</li>
<li class="precio">$130</li>
</ul>
<input type="hidden"
name="idprodu">
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="pepe()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Hawaiana s/Coco</p><img
src="imagenes/Hawaiana.jpg">
<ul>
<li>Jamón</li>
<li>Piña</li>
<li>Extra Queso</li>
<li class="precio">$140</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="hawa()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr>
<td>
<p>Carnes Frias</p><img
src="imagenes/carnesfrias.jpg">
<ul>
<li>Salami</li>
<li>Pepperoni</li>
<li>Jamón</li>
<li>Finas Hierbas</li>
<li class="precio">$230</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="frias()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>4 Quesos Extreme</p><img
src="imagenes/4quesos.jpg">
<ul>
<li>Queso Mozzarrella</li>
<li>Queso Crema</li>
<li>Queso Cheddar</li>
<li>Queso Parmesano</li>
<li class="precio">$290</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="quesos()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr>
<td>
<p>Honolulu</p><img
src="imagenes/Honolulu.jpg">
<ul>
<li>Jamón</li>
<li>Tocino</li>
<li>Piña</li>
<li>Jalapeño</li>
<li class="precio">$270</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="hono()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Mexicana BB</p><img
src="imagenes/mexicana.jpg">
1
 <ul>
<li>Chorizo</li>
<li>Carne Molida</li>
<li>Jalapeño</li>
<li>Cebolla</li>
<li class="precio">$280</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="mexi()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr>
<td>
<p>Veggie friendly</p><img
src="imagenes/vegetales.jpg">
<ul>
<li>Pimiento</li>
<li>Champiñones</li>
<li>Aceitunas</li>
<li>Cebolla</li>
<li class="precio">$240</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="veggie()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Chicken-Little</p><img
src="imagenes/pollopinia.jpg">
<ul>
<li>Pollo</li>
<li>Tocino</li>
<li>Piña</li>
<li>Salsa Mango
Habanero</li>
<li class="precio">$310</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="pollo()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
<tr>
<td colspan="2" style="font-size:
30px;"> Deluxe</td>
</tr>
<tr>
<td>
<p>King's Delight</p><img
src="imagenes/rich.jpg">
<ul>
<li>Pepperoni</li>
<li>Carne Molida</li>
<li>Jamón</li>
<li>Chorizo</li>
<li>Pimiento</li>
<li>Cebolla</li>
<li>Champiñones</li>
<li>Aceitunas</li>
<li>Extra Queso</li>
<li class="precio">$400</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="rey()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
<td>
<p>Delight Deluxe</p><img
src="imagenes/suprema.jpg">
<ul>
<li>Pepperoni</li>
<li>Carne Molida</li>
<li>Champiñones</li>
<li>Pimiento</li>
<li>Cebolla</li>
<li class="precio">$350</li>
</ul>
<?php
if(isset($_SESSION['id_usuario'])){ ?>
<input type="submit"
class="button" name="agregar"
onclick="deli()" value="Agregar al
Carrito"></input> <?php } ?>
</td>
</tr>
</form>
</table>
</section>
1
Código CSS
Estilo Carrito
table tr td{ font-family: "Arial Narrow";
font-size: 23px; color: white;
border-bottom: 1px solid; }
border-right: 1px solid; .button:hover{
} background: white;
.button{ color: black;
padding: 12px; border-bottom-color: red;
background: #5b97ff; border-color: blue;
font-size: 20px; cursor: pointer;
border-radius: 30px; }
De esta manera, aquí se implementa nuestro estilo del carrito, donde le damos
formato a lo que es el botón de eliminar en este caso y el seccionamiento de la tabla,
la función del botón únicamente cuando se hace un posicionaiento del puntero y
cuando el putnero esta fuera de él.

Estilo Footer
footer{ display: flex;
width: 100%; font-size: 16px;
background: #000005;
color: aliceblue; }
} .row img{
.contenertodo { margin-top: 12px;
width: 100%; width: 36px;
max-width: 100%; height: 36px;
margin: auto; }
padding: 40px; .row label{
} margin-top: 10px;
.pie { margin-left: 20px;
display: flex; }
justify-content: space-between; columna3{
} max-width: 20%;
.columna1{ }
max-width: 50%; .row2 {
text-align: justify; margin-top: 20px;
} display: flex;
.contenertodo h1{ }
font-size: 20px; .row2 img{
} width: 36px;
.columna1 p{ height: 36px;
font-size: 16px; }
margin-top: 20px; .row2 label{
max-width: 50%;
} font-size: 16px;
.columna2 { }
max-width: 30%px; .pie2{
} display: flex;
.row{ justify-content: space-between;
margin: 20px 0px 0px 0px; padding: 0px 30px;

1
 font-size: 14px; .pie{
width: 100%; flex-wrap: wrap;
background: #00002d; }
} .columna2, .columna3{
.tec{ margin-top: 40px;
font-weight: bold; }
} }
@media screen and (max-width: 1100px){

Estilo Menu
*{ position: relative; }
margin: 0; width: 100%; .menu ul li ul:before {
padding: 0; height: 54px; content: '';
font-family: "Arial", sans- } width: 0;
serif; .menu ul { height: 0;
box-sizing: border-box; border-right: 10px solid
} display: flex; transparent;
body{ margin: auto; border-left: 10px solid
} #600000;
background-image: border-bottom: 8px solid
url("../imagenes/fondo.png" .menu li { white;
); list-style: none; position: absolute;
font-size: 25px; padding: 15px 20px; margin-top: -8px;
} } margin-left: 20px;
.icono { }
margin-left: auto; .menu li:hover {
} background: #f48200; .menu ul li ul li{
section { margin-bottom: 12px; position: relative;
font-size: 35px; transform: rotateY(0deg)
margin-left: 30px; font-family: fantasy; scale(1);
padding-bottom: 100px; color: white; }
} cursor: pointer; .menu ul li ul li ul li:hover >
a{ transition: all 300ms; ul {
text-decoration: none; } transform: rotateY(0deg)
color: aliceblue; scale(1);
} .menu ul li ul { }
.logo{ *display: none;
margin-top: -6px; flex-direction: column; .menu ul li ul li ul {
margin-right: 45px; position: absolute; left: 8.3em;
} background: #420000; width:220px;
header { margin-top: 15px; top: -15px;
background: #e54800; transform: background: #1f0404;
font-size: 18px; rotateY(240deg) scale(0); }
width: 100%; transition: all 1s;
height: 53px; box-shadow: 1px 1px .menu ul li ul li ul:before {
color: aliceblue; 10px 0px black; position: absolute;
font-family: "Arial Black", } border-bottom: 8px solid;
"sans-serif"; .menu ul li:hover > ul { margin-top: 18px;
} transform: rotateY(0deg) margin-left: -10px;
.menu { scale(1); transform: rotate(-
z-index: 100; transition: all 0.5s; 90deg);

1
} .contenido li:hover{ @media screen and (max-
.contenido a{ transition: 1s; width: 800px){
color: #000000; .icono{
} background:rgba(0,0,0,0); margin-left: 0;
.contenido li { color: #3a7999; }
background: rgba( 5, 59, box-shadow: inset 0 0 0 }
255, 0.300); 1px #3a7999;
color: black; } Estilo Productos
}
.listado { font-family: "Juice ITC"; .button {
border: 1px solid #000; background: #7c1d03; background: red;
margin: 0 auto; font-size: 30px; color: aliceblue;
width: 70%; color: aliceblue; font-size: 23px;
} } font-family: cursive;
.precio{ border-radius: 30px;
float: right; td ul li { width: 50%;
color: #930000; margin-left: 12px; padding: 13px;
font-size: 40px; font-size: 23px; transition: all 0.5s;
margin-top: -80px; list-style: none; }
margin-right: 50px; text-align: left;
} } .button:hover {
.precio2{ span{ cursor: pointer;
font-family:fantasy; font-size: 23px; background: white;
background: #003d8e; color:#007a0e; transition: all 0.5;
} } border-color: blue;
.listado2{ color: black;
td { padding: 2; }
border: 1px solid; font-size: 20px; @media screen and (max-
text-align: center; margin-top: 20px; width: 1100px){
} margin-bottom: 20px; .button{
} font-size: 14px;
td p { }
Estilo SlideShow
.main { background:#e03b text-
width:100%; 00; decoration:none;
max-width: 1000px; list-style:none; }
margin: 20px auto; overflow:hidden;
} } .slidesjs-pagination li
input{ a:hover {
.slides { padding: 5px; background:
} #a80000;
width: 100%; }
} .slidesjs-pagination li {
float:left; .slides .active {
.slides img { } background:
width:100%; #1d00ff;
height: 100%; .slidesjs-pagination li a { }
} display:block;
padding:10px 20px; .slidesjs-navigation{
.slidesjs-pagination { color:#fff; background:#000;
color:#fff;

1
 text- tbody td:before { }
decoration:none; content: attr(data- tr:nth-of-type(2n) {
display:inline-block; th); background-color:
padding:12px 20px; display: block; inherit;
float:right; text-align:center; }
} } tr td:first-child {
.slidesjs-navigation:hover{ background: #f0f0f0;
background: #a80000; @media screen and (max- font-weight:bold;
} width: 450px){ font-size: 20px;
td { td { }
margin: 12px auto; margin: 12px 70; tbody td {
} } display: block;
td label { td label {
}
width: 400%; width: 30%; tbody td:before {
float: left; float: left; content: attr(data-
} } th);
tr td:first-child { table { display: block;
width:100%; text-align:center;
font-weight:bold; } }
font-size: 28px; thead { }
} display: none;

1
Programación del lado del Cliente
JavaScript
Es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas
que luego son insertados en una pagina web y en programas más grandes,
orientados a objetos mucho más complejos.

JavaScript tiene la ventaja de ser incorporado sin necesidad de instalar otro

programa para ser visualizado.

Ciclos condicionales: Denominados estructuras de control y bucles.

 Ciclo condicional if: Es aquella que evalúa las necesidades más simples,
evalúa una condición que determina si esta es verdadera o falsa,
dependiendo de la resultante actuara de una u otra manera
 Condicional if/else: La palabra else que podríamos definir como en caso
contrario, la cual nos permite tener dos bloques de código
 Múltiples Condiciones: Las cuales evalúan y si no cumple, procede a
evaluar otra hasta encontrar lo que corresponda a un bloque de código.

Arreglos

Una estructura típica en todos los lenguajes es el Array, que es como una variable
donde podemos introducir varios valores, en lugar de solamente uno como ocurre
con las variables normales.

Los arrays nos permiten guardar varias variables y acceder a ellas de manera
independiente, es como tener una variable con distintos compartimentos donde
podemos introducir datos distintos. Para ello utilizamos un índice que nos permite
especificar el compartimiento o posición a la que nos estamos refiriendo.

Funciones

Una función es un conjunto de sentencias o procedimientos que realizarán unas

operaciones adecuadas, haciendo uso de determinadas variables y propiedades.

1
Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra
vez las mismas instrucciones. Un script para una tienda de comercio electrónico por
ejemplo, tiene que calcular el precio total de los productos varias veces, para añadir
los impuestos y los gastos de envío.

Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado
el código fuente de la aplicación, ya que:

 El código de la aplicación es mucho más largo porque muchas instrucciones

están repetidas.
 Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer
tantas modificaciones como veces se haya escrito esa instrucción, lo que se
convierte en un trabajo muy pesado y muy propenso a cometer errores.

2
Uso de Javascript y DOM en el Proyecto
Programación Footer
$(document).ready(function()){
if($("body").height() < $(window).height()){
$("footer").css({"position":"absolute","bottom":"0"});
}
}
Estas líneas de código únicamente nos dan la funcioanlidad de al estar listo nuestro
documento, que la posición de nuestro footer este al final.
Programación Registro Validación
function validar(){
var valcorreo, valcontra, correo, contra;
contra = $(“#contra”).val();
valcontra = $(“#valcontra”).val();
correo = $(“#correo”).val();
valcorreo = $(“#valcorreo”).val();

if(valcorreo ¡= correo){
alert(“Los Correos no coinciden”);
return false;
}
if(contra ¡= valcontra){
alert(“Las contraseñas no coinciden”);
return false;
}

}
En estas líneas de código lo único que hacemos es validar que los correos y las
octraseñas coincidan esto para la seguridad de lo que ingresa el usuario y
prevención de errores del mismo.
Utilización de Librerías JQuery

Como tal la funcionalidad de la página implementamos el jquery, para

funcionalidades de js y librerias ya establecidas de los slides para la implementación
de interactividad con el usuario.

Programación de Envio id productos

function pepe(){ function hawa(){ function frias(){
alert("Se agrego al alert("Se agrego al alert("Se agrego al
carrito"); carrito"); carrito");

document.formu.idprodu.va document.formu.idprodu.va document.formu.idprodu.va

lue = 1; lue = 2; lue = 3;
} } }

3
function quesos(){ }
alert("Se agrego al function deli(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 15;
carrito"); }
document.formu.idprodu.va function papotas(){
lue = 4; document.formu.idprodu.va alert("Se agrego al
} lue = 10; carrito");
function hono(){ }
alert("Se agrego al function combocajeta(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 16;
carrito"); }
document.formu.idprodu.va function alitas(){
lue = 5; document.formu.idprodu.va alert("Se agrego al
} lue = 11; carrito");
function mexi(){ }
alert("Se agrego al function combogrande(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 17;
carrito"); }
document.formu.idprodu.va function canela(){
lue = 6; document.formu.idprodu.va alert("Se agrego al
} lue = 12; carrito");
function veggie(){ }
alert("Se agrego al function combocruji(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 18;
carrito"); }
document.formu.idprodu.va function cajeta(){
lue = 7; document.formu.idprodu.va alert("Se agrego al
} lue = 13; carrito");
function pollo(){ }
alert("Se agrego al function comboOrilla(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 19;
carrito"); }
document.formu.idprodu.va function refresco(){
lue = 8; document.formu.idprodu.va alert("Se agrego al
} lue = 14; carrito");
function rey(){ }
alert("Se agrego al function comboCavara(){ document.formu.idprodu.va
carrito"); alert("Se agrego al lue = 20;
carrito"); }
document.formu.idprodu.va
lue = 9;
Dentro dee cada una de las secciones de pizza, combos y adicionales, se agrega
un input escondido, esto para que cuando el usuario accione el botón de agregar
carrito se mande el id de nuestro producto posicionado de manera fija.

1
Programación Slider

var slideshowDuration = 4000; timeout=setTimeout(function(){

var slideshow=$('.main-content .slideshow'); slideshowNext(slideshow,false,true);
},slideshowDuration);
function slideshow.data('timeout',timeout);}}});
slideshowSwitch(slideshow,index,auto){ } else {
if(slideshow.data('wait')) return; if(newSlide.index()>activeSlide.index()){
var newSlideRight=0;
var slides = slideshow.find('.slide'); var newSlideLeft='auto';
var pages = slideshow.find('.pagination'); var newSlideImageRight=-
var activeSlide = slides.filter('.is-active'); slideshow.width()/8;
var activeSlideImage = var newSlideImageLeft='auto';
activeSlide.find('.image-container'); var newSlideImageToRight=0;
var newSlide = slides.eq(index); var newSlideImageToLeft='auto';
var newSlideImage = newSlide.find('.image- var newSlideContentLeft='auto';
container'); var newSlideContentRight=0;
var newSlideContent = newSlide.find('.slide- var activeSlideImageLeft=-
content'); slideshow.width()/4;
var } else {
newSlideElements=newSlide.find('.caption > var newSlideRight='';
*'); var newSlideLeft=0;
if(newSlide.is(activeSlide))return; var newSlideImageRight='auto';
var newSlideImageLeft=-
newSlide.addClass('is-new'); slideshow.width()/8;
var timeout=slideshow.data('timeout'); var newSlideImageToRight='';
clearTimeout(timeout); var newSlideImageToLeft=0;
slideshow.data('wait',true); var newSlideContentLeft=0;
var transition=slideshow.attr('data- var newSlideContentRight='auto';
transition'); var
if(transition=='fade'){ activeSlideImageLeft=slideshow.width()/4;
newSlide.css({ }
display:'block',
zIndex:2 newSlide.css({
}); display:'block',
newSlideImage.css({ width:0,
opacity:0 right:newSlideRight,
}); left:newSlideLeft
,zIndex:2
TweenMax.to(newSlideImage,1,{ });
alpha:1,
onComplete:function(){ newSlideImage.css({
newSlide.addClass('is- width:slideshow.width(),
active').removeClass('is-new'); right:newSlideImageRight,
activeSlide.removeClass('is-active'); left:newSlideImageLeft
newSlide.css({display:'',zIndex:''}); });
newSlideImage.css({opacity:''});
newSlideContent.css({
slideshow.find('.pagination').trigger('check'); width:slideshow.width(),
slideshow.data('wait',false); left:newSlideContentLeft,
if(auto){ right:newSlideContentRight

1
 }); activeSlideImage.css({
left:''
activeSlideImage.css({ });
left:0 slideshow.find('.pagination').trigger('check');
}); slideshow.data('wait',false);
if(auto){
timeout=setTimeout(function(){
TweenMax.set(newSlideElements,{y:20,force slideshowNext(slideshow,false,true);
3D:true}); },slideshowDuration);
TweenMax.to(activeSlideImage,1,{ slideshow.data('timeout',timeout);
left:activeSlideImageLeft, }
ease:Power3.easeInOut }); } }
}); function
slideshowNext(slideshow,previous,auto){
TweenMax.to(newSlide,1,{ var slides=slideshow.find('.slide');
width:slideshow.width(), var activeSlide=slides.filter('.is-active');
ease:Power3.easeInOut var newSlide=null;
}); if(previous){
newSlide=activeSlide.prev('.slide');
TweenMax.to(newSlideImage,1,{ if(newSlide.length === 0) {
right:newSlideImageToRight, newSlide=slides.last();
left:newSlideImageToLeft, }
ease:Power3.easeInOut } else {
}); newSlide=activeSlide.next('.slide');
if(newSlide.length==0)
newSlide=slides.filter('.slide').first();
TweenMax.staggerFromTo(newSlideElement }
s,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3 slideshowSwitch(slideshow,newSlide.index(),
.easeOut,force3D:true,delay:0.6},0.1,function( auto);
){ }
newSlide.addClass('is- function homeSlideshowParallax(){
active').removeClass('is-new'); var scrollTop=$(window).scrollTop();
activeSlide.removeClass('is-active'); if(scrollTop>windowHeight) return;
newSlide.css({ var inner=slideshow.find('.slideshow-inner');
display:'', var newHeight=windowHeight-(scrollTop/2);
width:'', var newTop=scrollTop*0.8;
left:'', inner.css({
zIndex:'' transform:'translateY('+newTop+'px)',height:n
}); ewHeight
newSlideImage.css({ });
width:'', }
right:'',
left:'' $(document).ready(function() {
}); $('.slide').addClass('is-loaded');
newSlideContent.css({
width:'', $('.slideshow .arrows
left:'' .arrow').on('click',function(){
});
newSlideElements.css({ slideshowNext($(this).closest('.slideshow'),$(t
opacity:'', his).hasClass('prev'));
transform:'' });
});

1
 $('.slideshow .pagination
.item').on('click',function(){
slideshowSwitch($(this).closest('.slideshow'),
$(this).index());
});
$('.slideshow
.pagination').on('check',function(){
var slideshow=$(this).closest('.slideshow');
var pages=$(this).find('.item');
var index=slideshow.find('.slides .is-
active').index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');
});
/* Lazyloading
$('.slideshow').each(function(){
var slideshow=$(this);
var images=slideshow.find('.image').not('.is-
loaded');
images.on('loaded',function(){
var image=$(this);
var slide=image.closest('.slide');
slide.addClass('is-loaded');
});
*/
var timeout=setTimeout(function(){
slideshowNext(slideshow,false,true);
},slideshowDuration);
slideshow.data('timeout',timeout);
});
if($('.main-content .slideshow').length > 1) {
$(window).on('scroll',homeSlideshowParallax)
2
Programación del lado del Servidor
PHP
Operadores

Un operador nos permite realizar una operación entre uno más valores. El operador
toma esos valores de entrada y los relaciona entre sí, realizando una operación y
aplicando otro valor como resultado

Funciones

Las funciones son rutinas creadas por el programador para realizar procesos que
se repetirán o se usarán más de una vez. Las funciones pueden ser n-paramétricas
(con n ≥ 0), y estos parámetros pueden ser de entrada, de salida o de entrada y
salida

Sentencias de Control

Las sentencias de control nos permite utilizar sentencias como ,ciclos y

condicionales para llevar un control de nuestras variables en nuestra aplicación.

If & else

Nos permite comparar 2 variables para que se cumpla una condición que ejecuta
un fragmento de código u otro dependiendo si la condición inicial se cumple o no.

While

Es una sentencia que nos permite ejecutar un fragmento de código mientras una
variable se mantenga de la misma forma si esta condición cambia el ciclo dejara de
repetirse.

Do while

Esta sentencia es casi lo omiso que el while solo que en el while puede o no
ejecutarse el fragmento de código y en esta sentencia se ejecuta por lo menos una
vez.

For

1
Esta sentencia nos permite repetir un fragmento de código un numero definido de
veces.

Switch

Esta sentencia nos permite comparar una variable con diferentes resultados así que
dependiendo de el resultado de la condición ejecutara un fragmento de código u
otro.

Modelo Relacional de la BD

Uso de PHP en el Proyecto

Registro de Usuario
<?php }
$mysql=new mysqli("localhost", "root" ,"" $data2= $mysql->query("select idcliente from
,"pizzeria"); cliente order by idcliente desc limit 1");
if($mysql-> connect_error){ $pos =$data2->fetch_array();
die("Error en la conexión"); if($pos['idciente']==$x){
} $mysql->query("insert into cliente
$info = $mysql->query("select idcliente values(null,'$_REQUEST[nombre]','$_REQU
from cliente"); EST[apellido]','$_REQUEST[correo]','$_REQ
$x=1; UEST[contra]')") or die($mysql-> error);
while ($reg = $info->fetch_array()) { }
while($x<=$info->num_rows){ else{
if($reg['idcliente']!=$x){ $mysql->query("insert into cliente
break; values($x,'$_REQUEST[nombre]','$_REQUE
} ST[apellido]','$_REQUEST[correo]','$_REQU
echo $x; EST[contra]')") or die($mysql-> error);
$x++; }
} $mysql-> close();
?>

2
Como es sabido en todas al menos de las que vamos a implementar dentro de PHP
lo que es nuestra conexión a la base de datos, para poder manipular lo que es cada
una de las consultas, inserciones y borrado de la misma, siendo el caso que en
estas líneas de código, ponemos la inserción en cliente o lo que es, nuestros
usuarios.

Login
<?php correo = '$usuario' AND password =
$mysql=new mysqli("localhost", "root" ,"" '$password'";
,"pizzeria"); $result=$mysql->query($sql);
if($mysql-> connect_error){ $rows = $result->num_rows;
die("Error en la conexión");
} if($rows > 0) {
$row = $result-
session_start(); >fetch_assoc();

if(isset($_SESSION["id_usuario"])){ $_SESSION['id_usuario'] =
header("Location: $row['idcliente'];
../index.php"); header("location:
} ../index.php");
} else {
if(!empty($_POST))
{ header("location: ../usuario.php");
$usuario = echo '<script
mysqli_real_escape_string($mysql,$_POST[' type="text/javascript">
usuario']); alert("Usuario
$password = o contraseña incorrectos");
mysqli_real_escape_string($mysql,$_POST[' </script>';
contra']); }
$error = ''; }
?>
$sql = "SELECT idcliente,
correo , password FROM cliente WHERE
Dentro del login lo que hacemos es la validación de que este dentro de la base de
datos el usuario que ingresamos.

Eliminar del Carrito

<?php }
$mysql=new mysqli("localhost", "root" ,"" $mysql->query("delete from ventas where
,"pizzeria"); idventa = $_REQUEST[eli]") or die($mysql->
if($mysql-> connect_error){ error);
die("Error en la conexión"); header("location: ../carrito.php");
?>
Para eliminar en carrito, mandamos después de la muestra de productos en el
carrito por usuario y según el botón o donde este seccionado eliminaremos el
producto por el recorrido del arreglo.

1
Cerrar Sesión
<?php
session_start();
session_unset();
session_destroy();
header("location: ../index.php");
?>
De igual manera cerramos de la forma, en que, recuperamos la sesión, vaciamos la
misma y la destruimos y después de todo esto nos manda al index o pagina de
inicio.
Agregar en el Carrito
<?php if($_REQUEST['idprodu'] >=11 &&
$mysql=new mysqli("localhost", "root" ,"" $_REQUEST['idprodu']<=15){header("locatio
,"pizzeria"); n: ../combos.php");
if($mysql-> connect_error){ }
die("Error en la conexión"); if($_REQUEST['idprodu'] >=16 &&
} $_REQUEST['idprodu']<=20){header("locatio
session_start(); n: ../adicional.php");
$info = $mysql->query("select idventa }
from ventas"); ?>
$x=1; Al hacer la eliminación puede que
while ($reg = $info->fetch_array()) { queden campos vacios debido a que
while($x<=$info->num_rows){
if($reg['idventa']!=$x){
en nuestra base de datos tenemos un
break; auto incremento, debido a esto es
} necesario hacer la comprobación de
echo $x; campos vacios, de ser que haya
$x++; alguno dentro del arreglo, lo
}}
$data2= $mysql->query("select
agregamos en esa posición vacía y de
idventa from ventas order by idventa desc no ser asi, mandamos un dato nulo
limit 1"); para que siga en incremento y
$pos =$data2->fetch_array(); tengamos todo en orden dentro de la
if($pos['idventa']==$x){ Base de Datos.
$mysql->query("insert into ventas
values(null,$_SESSION[id_usuario],$_REQU
EST[idprodu])") or die($mysql-> error);
}
else{
$mysql->query("insert into ventas
values($x,$_SESSION[id_usuario],$_REQUE
ST[idprodu])") or die($mysql-> error);
}
$mysql-> close();
if($_REQUEST['idprodu'] >=1 &&
$_REQUEST['idprodu']<=10){header("locatio
n: ../pizzas.php");
}

1
Conclusión
El desarrollo de páginas web, para una empresa es muy importante, ya que gracias
a esto se hace una proyección de publicidad de su producto, debido al crecimiento
del internet como medio de información es muy importante que una empresa se
adapte a las nuevas tecnologías y en este caso, dar paso a que se implemente un
carrito de compras, sobre todo para la comodidad del usuario.

Se pudiese enfocar de manera tal que lo visualizamos tanto el back-end,

hablando de un lenguaje del servidor, tener como tal las peticiones al servidor y
nuestra base de datos o el manejo de MySQL y todo lo que es la estructuración y
codificación de funcionalidad, como el front-end tenemos nuestro diseño y toda
interactividad que pueda tener con el usuario.

En conclusión, gracias a la implementación de las tecnologías, el ser humano

puede tener más comodidad, en nuestro caso particular de poder pedir algún
producto o tener la certeza de que es lo que quiere comprar y sobre todo, el usuario
puede optimizar sus tiempos, para el usuario llega a ser muy importante tanto la
presentación como el contenido, asi que dentro del desarrollo de front-end debemos
de tener muy en cuenta o dejarlo lo mejor posible ya que en la mayoría de los casos
los usuarios buscan lo ultimo en tendencias de visualización, y como tal en este
caso, el back-end, es importante no dejarlo de lado, ya que van muy de la mano,
tant o la funcioanlidad como el diseño, para esto se tiene en cuenta la colaboración
de todo el equipo, de manera tal que nos podamos orientar al mejor servicio de
nuestros clientes, ya sea lo que ofrezcamos, tanto a nivel producto como servicio.

1
Anexo 1