You are on page 1of 39

2014

ndice

Contenido
Introduccin ........................................................................................................................................ 3
Organizacin........................................................................................................................................ 3
Descripcin: ..................................................................................................................................... 3
Antecedentes: ................................................................................................................................. 3
Misin y visin:................................................................................................................................ 3
Objetivos generales:........................................................................................................................ 3
Sistema ................................................................................................................................................ 4
Descripcin y delimitacin del sistema: .......................................................................................... 4
Objetivos generales:........................................................................................................................ 4
Descripcin de usuarios: ................................................................................................................. 5
Especificacin de requerimientos ....................................................................................................... 5
Diagrama de clases:......................................................................................................................... 5
Diagrama de casos de uso: .............................................................................................................. 5
Diagrama de secuencia: ...................................................................................................................... 6
Diseo de la base de datos.................................................................................................................. 6
Diagrama entidad/relacin: ............................................................................................................ 7
Esquema de la base de datos: ......................................................................................................... 8
Diseo de la interfaz de la aplicacin .................................................................................................. 8
Arquitectura del sistema ................................................................................................................... 12
Especificacin de la ayuda del sistema ............................................................................................. 13
Especificacin de los mecanismos de seguridad ............................................................................... 14
Conexin de la aplicacin cliente con el servidor ............................................................................. 14
Acceso a la base de datos desde la aplicacin .................................................................................. 15
Cdigo de la aplicacin...................................................................................................................... 15
Index.php....................................................................................................................................... 15

Inicio.php ....................................................................................................................................... 20
Error.php ....................................................................................................................................... 27
Registro.php .................................................................................................................................. 27
Php_conexion.php ........................................................................................................................ 31
Php_cerrar.php ............................................................................................................................. 32
Validacin.php............................................................................................................................... 32
Cambiar_clave.php........................................................................................................................ 33
Conclusin ........................................................................................................................................ 38
Bibliografa/referencias .................................................................................................................. 38

3|Pgina

Introduccin
Este manual contiene informacin que incluye documentacin detallada del sistema que
fue elaborado como proyecto final para la materia base de datos en el cual se integran
todo los conocimientos adquiridos a lo largo del semestre adems incluye los diagramas
correspondientes y informacin de las herramientas utilizadas para la elaboracin y el
funcionamiento de el proyecto

Organizacin
Descripcin:
istore es una aplicacin web de tipo dinmica para comercio electrnico que puede
ser administrada por cualquier persona que as lo desee ya que se incluye un panel
de administrador para publicar, modificar y eliminar anuncios de productos
mediante una interfaz grfica y almacenarlos en una base de datos tambin se
pueden realizar consultas de usuarios registrados, pedidos de usuarios y desactivar
anuncios sin tener que eliminarlos por completo
Antecedentes:
La comercializacin de productos atravez de la red est creciendo importantemente debido
a las grandes ventajas que ofrece como tener un amplio alcance a lo largo de todo el
mundo en donde un cliente puede encontrar lo que buscaba en lo que tu ofreces
Misin y visin:
Nuestra Misin es ofrecer herramientas que faciliten a cualquier empresa que se dedique a
comercializar productos a un pequeo sector minoritario a que incremente sus nmeros al
tener un mayor alcance de ventas
Nuestra Visin es seguir incrementando nuestros nmeros al igual que los nmeros de las
empresas que utilicen nuestros servicios de ecomerce
Objetivos generales:
Ofrecer un sistema que pueda ser fcilmente adaptado sin necesidad de tener que saber
programar

4|Pgina

Ofrecer aplicaciones dinmicas que sean fciles de usar


Ofrecer una aplicacin que solo requiera de acceso a internet para ser administrada sin
tener la necesidad de instalar nada en tu equipo
Ofrecer la seguridad de que la informacin que manejes solo pueda ser vista y utilizada
por ti cada vez que inicias sesin
Sistema
Descripcin y delimitacin del sistema:
La aplicacin web para administrar una tienda en lnea istore ofrece la posibilidad
de publicar anuncios en internet con imgenes y descripcin de los productos que
adems pueden ser modificados y eliminados cuando as se deseen por el
administrador los anuncios pueden ser vistos por otros usuarios en internet que se
registren en nuestra tienda en lnea cuenta con un carrito de compras que muestra
el total de la compra y puede modificarse mientras el usuario no de click en el
botn de pagar ya que al hacerlo el status del pedido cambia a en espera de pago
y el administrador recibe una notificacin para proporcionar informacin al usuario
del proceso de pago el administrador tiene la posibilidad de marcar el status del
pedido como concretado en caso de recibir pago o cancelada en caso contrario en
el perfil de cada usuario se muestra el historial de pedidos el status de cada uno de
los movimientos que haya realizado especficamente el usuario que inicia sesin ya
que se realiza una consulta nicamente de la informacin registrada con tu
identificador de usuario haci como el nmero de compras concretadas y canceladas
toda la informacin est debidamente almacenada en una base de datos por lo
cual podr ser vista cada vez que se inicie sesin.

Objetivos generales:
Ofrecer herramientas para que nuestros clientes puedan brindar un mejor servicio.
Poner al alcance no solo un servicio y si una alianza que nos permita crecer junto
con nuestros clientes ya que ellos nos ayudan al utilizar nuestro producto a que
ms aliados decidan utilizarlo de la misma manera nosotros les brindamos la
posibilidad de crecer y de que ms gente los vea a ellos.

5|Pgina

Descripcin de usuarios:
Est enfocado a personas jvenes y de entre unos 18 a 40 aos que encuentren en
lo que tu ofertas lo que l estaba buscando ya que el internet nos proporciona la
facilidad de encontrarlos.
Especificacin de requerimientos
Diagrama de clases:

Diagrama de casos de uso:

6|Pgina

Diagrama de secuencia:

Diseo de la base de datos

7|Pgina

Diagrama entidad/relacin:

8|Pgina

Esquema de la base de datos:

Diseo de la interfaz de la aplicacin


Para el diseo de la interfaz grfica se utiliz el framework desarrollado por twitter de
nombre bootstrap
ltimamente muchos sitios web estn basando su diseo en Bootstrap, Qu es
Bootstrap? Pues en pocas palabras es el framework de Twitter que permite crear
interfaces web con CSS y Javascript que adaptan la interfaz dependiendo del tamao del
dispositivo en el que se visualice de forma nativa, es decir, automticamente se adapta al
tamao de un ordenador o de una Tablet sin que el usuario tenga que hacer nada, esto se
denomina diseo adaptativo o Responsive Design en la siguientes imgenes se muestra

9|Pgina

una comparacin entre el diseo de la pgina index desde una pc y otra desde un
dispositivo mvil

10 | P g i n a

11 | P g i n a

12 | P g i n a

Arquitectura del sistema


Se utiliz php que es un lenguaje de programacin web para paginas dinmicas es adems un
lenguaje interpretado que se ejecuta del lado del servidor el cliente o navegador enva una
peticin al servidor web apache que fue el utilizado para montar nuestro proyecto y en apache se
encuentra el archivo de php al que se le manda llamar mientras que HTML y JavaScript se ejecutan
desde el lado del cliente el motor de base de datos utilizado es el que viene con wamp server de
nombre phpmyadmin en ella se guardan todos los registros que se enven desde el lado del cliente
mientras que las imgenes se guardan en una carpeta dentro del servidor

13 | P g i n a

Especificacin de la ayuda del sistema


Para poder acceder a la aplicacin se requiere de una conexin a internet
En caso de que no se cargue la pgina hay que verificar que se encuentre encendido el
servidor
La base de datos debe de estar previamente instalada en phpmyadmin con cada una de
las tablas como se muestra en el esquema de base de datos en caso contrario mostrara
mensajes de error en la conexin
El carpeta contenedora del proyecto se debe de localizar dentro de la carpeta
wamp/www/1carrito para poder ser vista en la direccin localhost en el navegador

14 | P g i n a

Especificacin de los mecanismos de seguridad


La base de datos no permite la duplicidad de usuarios lo que garantiza su buen
funcionamiento
Toda la informacin que se ingrese este resguardada y solo el usuario que la ingreso
puede acceder a ella al iniciar sesin
Todas las paginas requieren de sesin por lo cual si se intenta acceder una pgina sin
haber iniciado sesin se redireccionar a la pgina error.php
Consejos a seguir
cuentas
de Administrador user: admin contrasea: root en el caso del panel de administrador
para ello se recomienda cambiarla inmediatamente en cambiar contrasea
con nadie la contrasea. Si se hace, cambiarla inmediatamente.
no debe identificarse al propietario en el mismo lugar.

Conexin de la aplicacin cliente con el servidor


Es necesario contar con un servidor ya se de manera local o uno de pago para poder alojar nuestra
aplicacin, el cdigo php se ejecuta exclusivamente del lado del servidor por cual si no se cuenta
con el no funcionara correctamente los archivos .php haci como los imgenes y plugins que
componen a nuestro proyecto se deben de alojar dentro de la carpeta www dependiendo del
servidor que tengamos instalado en nuestro equipo, se debe de configurar el router y abrir los
puertos si queremos acceder a nuestra aplicacin web desde otra red y utilizando nuestro equipo
como servidor para que pueda ser visualizada por otros usuarios que conozcan nuestra direccin
ip publica o en su defecto mediante un nombre de dominio que re direccione hacia nuestra ip

15 | P g i n a

Acceso a la base de datos desde la aplicacin


La aplicacin se conecta a una base de datos hecha en mysql que se guarda previamente
en phpmyadmin de lado del servidor, es necesario crear una clase conexin.php como se
muestra a continuacin para poder acceder a ella
<?php
$conexion = mysql_connect("localhost","root","");
Y en mysql_select_db incluir el nombre de la BD en la cual alojamos las tablas que en el
caso de nosotros la BD la llamamos carrito
mysql_select_db("carrito",$conexion); ?
Se debe de incluir la clase en cada uno de las paginas donde se realice una consulta a la
base de datos mediante
include_once('conexion.php');

Cdigo de la aplicacin
Index.php
<?php
session_start();
include_once('php_conexion.php');
if(!empty($_POST['usuario']) and !empty($_POST['contra'])){
$usuario=limpiar($_POST['usuario']);
$contra=limpiar($_POST['contra']);
$can=mysql_query("SELECT * FROM usuarios WHERE (usu='".$usuario."' )
and con='".$contra."'");
if($dato=mysql_fetch_array($can)){
$_SESSION['username']=$dato['usu'];
$_SESSION['tipo_usu']=$dato['status'];
///////////////////////////////
if($_SESSION['tipo_usu']=='b'){

16 | P g i n a

header('location:inicio.php');
}
}
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Entrar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #0099FF;
background-image: none;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,

17 | P g i n a

.form-signin .checkbox {
margin-bottom: 10px;
color: #09F;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 118px;
height: 17px;
z-index: 1;
left: 1142px;
top: 3px;
}
</style>
</head>

18 | P g i n a

<body>
<br>
<div class="container">
<form name="form1" method="post" action="" class="form-signin">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div id="apDiv1">
<li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button"
class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>Acceder a</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="loginPanel.php"
target="admin"><i class="icon-flag"></i> Panel Administrador</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="registro.php"
target="admin"><i class="icon-pencil"></i> Registrarme</a></li>
</ul>
</li>
</div>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navcollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="iconbar"></span> </button>
<a class="brand" href="index.php">iStore</a><a class="brand" href="index.php"></a>
<div class="nav-collapse collapse"></div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<h2 class="form-signin-heading">Bienvenido</h2>
<p>Acceso para usuarios.</p>
<img src="img/iconkey.png" width="278" height="225">
<input type="text" name="usuario" class="input-block-level" placeholder="Usuario"
autocomplete="off">
<input type="password" name="contra" class="input-block-level" placeholder="Contrasea"
autocomplete="off">
<button class="btn btn-large btn-primary" type="submit">Entrar</button>
<p>&nbsp;</p>
<?php
$act="1";

19 | P g i n a

if(!empty($_POST['usuario']) and !empty($_POST['contra'])){


$usuario=limpiar($_POST['usuario']);
$contra=limpiar($_POST['contra']);
$can=mysql_query("SELECT * FROM usuarios WHERE (usu='".$usuario."' )
and con='".$contra."'");
if(!$dato=mysql_fetch_array($can)){
if($act=="1"){
echo '<div class="alert alert-error"
align="center"><strong>Usuario y Contrasea Incorrecta</strong></div>';
}else{
$act="0";
}
}else{
if($dato['estado']=='n'){
echo '<div class="alert alert-error"
align="center"><strong>Consulte con el Administrador</strong></div>';
}
}
}else{
}
?>
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>

20 | P g i n a

<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>

Inicio.php
<?php
session_start();
include('php_conexion.php');
if($_SESSION['tipo_usu']=='b'){
}else{
header('location:error.php');
}
$usuario=limpiar($_SESSION['username']);
$sqll=mysql_query("SELECT * FROM usuarios WHERE usu='$usuario'");
if($dato=mysql_fetch_array($sqll)){
$nombre=$dato['nom'];
$palabra=explode(" ", $nombre);
$nomb=$palabra[0];
}
?>
<?php
include_once("php_conexion.php");
if(!empty($_GET['del'])){
$id=$_GET['del'];
mysql_query("DELETE FROM carrito WHERE codigo='$id' and usu='$usuario'");
header('location:inicio.php');
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Carrito de Compras</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->

21 | P g i n a

<link href="css/bootstrap.css" rel="stylesheet">


<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 118px;
height: 17px;
z-index: 1;
left: 1142px;
top: 3px;
}
</style>
</head>
<body>

22 | P g i n a

<div class="navbar navbar-inverse navbar-fixed-top">


<div class="navbar-inner">
<div class="container">
<div id="apDiv1">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" datatoggle="dropdown"><i class="icon-user"></i> Hola! <?php echo $nomb; ?> <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="perfil.php"
target="admin"><i class="icon-user"></i> Ver perfil </a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="cambiar_clave.php"
target="admin"><i class="icon-pencil"></i> Modificar Contrasea </a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="php_cerrar.php"><i
class="icon-off"></i> Cerrar Sesion</a></li>
</ul>
</li>
</div>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navcollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="inicio.php">iStore</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="inicio.php">Principal</a></li>
<li><a href="mis_pedidos.php">Pedidos</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->

23 | P g i n a

<!--<div class="hero-unit" align="center">


<img src="img/icono_producto2.png" width="190" height="190" class="img-polaroid">
</div>-->
<!-- Example row of columns -->
<div class="row">
</div>
<div align="center">
<div class="row-fluid">
<div class="span8">
<?php
$pa=mysql_query("SELECT * FROM producto where estado='s'");
while($row=mysql_fetch_array($pa)){
?>
<table class="table table-bordered">
<tr><td>
<div class="row-fluid">
<div class="span4">
<center><strong><?php echo $row['nombre']; ?></strong></center><br>
<img src="img/producto/<?php echo $row['codigo']; ?>.jpg" class="img-polaroid">
</div>
<div class="span4"><br><br><br><br>
<strong><?php echo $row['nota']; ?></strong><br><br>
<strong>Valor: </strong>$ <?php echo number_format($row['valor'],2,".",","); ?>
</div>
<div class="span4"><br><br><br><br><br>
<form name="form<?php $row['codigo']; ?>" method="post" action="">
<input type="hidden" name="codigo" value="<?php echo $row['codigo']; ?>">
<button type="submit" name="boton" class="btn btn-primary">
</i> <strong>Agregar al carrito</strong>
</button>
</form>
</div>
</div>
</td></tr>
</table>

24 | P g i n a

<?php } ?>
</div>
<div class="span4">
<?php
if(!empty($_POST['codigo'])){
$codigo=$_POST['codigo'];
$pa=mysql_query("SELECT * FROM carrito WHERE
codigo='$codigo' and usu='$usuario' and modelo=1");
if($row=mysql_fetch_array($pa)){
$new_cant=$row['cantidad']+1;
mysql_query("UPDATE carrito SET
cantidad='$new_cant' WHERE codigo='$codigo' and usu='$usuario' ");
}else{
mysql_query("INSERT INTO carrito (usu, codigo,
cantidad, modelo) VALUES ('$usuario','$codigo','1','1') ");
}
echo '<div class="alert alert-success" align="center">
<button type="button" class="close" datadismiss="alert"></button>
<strong>Agregado correctamente puedes seguir
modificando tu carrito, si ya estas seguro y quieres pagar dirigete a pedidos, si deseas conocer el
status de tu pedido entra en la parte superior de este recuadro a tu perfil"</strong>
</div>';
}
?>
<div id="sidebar"><br><br><br>
<h2 align="center">Carrito</h2>
<table class="table table-bordered">
<tr>
<td><table class="table table-bordered"><i class="icon-shopping-cart">
<tr>
<td><table class="table table-bordered table table-hover">
<?php
$neto=0;$tneto=0;
$pa=mysql_query("SELECT * FROM
carrito WHERE usu='$usuario' and modelo=1");
while($row=mysql_fetch_array($pa)){

25 | P g i n a

$oProducto=new
Consultar_Producto($row['codigo']);
$neto=$oProducto>consultar('valor')*$row['cantidad'];
$tneto=$tneto+$neto;
?>
<tr style="font-size:9px">
<td><?php echo $oProducto->consultar('nombre'); ?></td>
<td><?php echo $row['cantidad']; ?></td>
<td>$ <?php echo number_format($neto,2,".",","); ?></td>
<td><a href="inicio.php?del=<?php echo $row['codigo']; ?>"
title="Eliminar de la Lista"> <i class="icon-remove"></i> </a></td>
</tr>
<?php }
?>
<td colspan="4" style="font-size:9px"><div align="right">$<?php echo
number_format($tneto,2,".",","); ?></div></td>
<?php
$pa=mysql_query("SELECT * FROM
carrito WHERE usu='$usuario' and modelo=1");
if(!$row=mysql_fetch_array($pa)){
?>
<tr>
<div class="alert alert-success" align="center"><strong>No hay Productos
en el Carrito</strong></div>
</tr>
<?php } ?>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</div>
</div>
</div>

26 | P g i n a

<hr>
<footer>
<p>&copy;Jose A Lara y Sergio Paz</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($("#sidebar").height() < $(window).height() && $(window).scrollTop() > offset.top) { /*
LINEA MODIFICADA PARA NO ANIMAR SI EL SIDEBAR ES MAYOR AL TAMAO DE PANTALLA */
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};

27 | P g i n a

});
});
</script>
</body>
</html>

Error.php
<html>
<title>Error</title>

<style type="text/css">
#apDiv1 {
position: absolute;
width: 512px;
height: 512px;
z-index: 1;
left: 424px;
top: 75px;
}
</style>
<body>
<h1> Error es necesario iniciar sesion para acceder!</h1>
<p><!--/.nav-collapse --></p>
<p>&nbsp;</p>
<div id="apDiv1"><a href="index.php"><img src="img/User blue.png" width="512"
height="512"></a></div>
</body>
</html>

Registro.php
<!DOCTYPE html>
<html lang="es">

28 | P g i n a

<head>
<meta charset="utf-8">
<title>Registro</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #0099FF;
background-image: none;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
color: #09F;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;

29 | P g i n a

margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 118px;
height: 17px;
z-index: 1;
left: 1142px;
top: 3px;
}
</style>
</head>
<body>
<br>
<div class="container">
<form name="form1" method="post" action="validacion.php" class="form-signin">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">

30 | P g i n a

<div id="apDiv1">
<li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button"
class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i>Acceder a</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php"
target="admin"><i class="icon-on"></i> Iniciar sesion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="loginPanel.php"
target="admin"><i class="icon-flag"></i> Panel Administrador</a></li>
</ul>
</li>
</div>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navcollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="iconbar"></span> </button>
<a class="brand" href="registro.php">iStore</a><a class="brand" href="index.php"></a>
<div class="nav-collapse collapse"></div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<h2 class="form-signin-heading">Registro</h2>
<p>Ingresa tus datos para completar el registro.</p>
<input type="text" name="nom" class="input-block-level" placeholder="Nombre"
autocomplete="off">
<input type="text" name="ape_pat" class="input-block-level" placeholder="Apellido Paterno"
autocomplete="off">
<input type="text" name="ape_mat" class="input-block-level" placeholder="Apellido
Materno" autocomplete="off">
<input type="text" name="email" class="input-block-level" placeholder="correo electronico"
autocomplete="off">
<input type="text" name="usu" class="input-block-level" placeholder="Usuario"
autocomplete="off">
<input type="password" name="con" class="input-block-level" placeholder="Contrasea"
autocomplete="off">
<input type="password" name="con2" class="input-block-level" placeholder="Repetir
Contrasea" autocomplete="off">
<button class="btn btn-large btn-primary" type="submit">Enviar</button>
<p>&nbsp;</p>

31 | P g i n a

<?php
if(isset($_GET['error'])){
if($_GET['error']==1){
echo '<div class="alert alert-error" align="center"><strong>las contraseas
no coinciden</strong></div>';
}
}
?>
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>

Php_conexion.php
<?php
$conexion = mysql_connect("localhost","root","");
mysql_select_db("carrito",$conexion);
date_default_timezone_set("America/Chihuahua");
function limpiar($tags){

32 | P g i n a

$tags = strip_tags($tags);
$tags = stripslashes($tags);
$tags = htmlentities($tags);
$tags = mysql_real_escape_string($tags);
return $tags;
}

class Consultar_Producto{
private $consulta;
private $fetch;
function __construct($codigo){
$this->consulta = mysql_query("SELECT * FROM producto WHERE
codigo='$codigo'");
$this->fetch = mysql_fetch_array($this->consulta);
}
function consultar($campo){
return $this->fetch[$campo];
}
}
?>

Php_cerrar.php
<?php
session_start();
$_SESSION['username']=NULL;
$_SESSION['tipo_usu']=NULL;
header("location:index.php");
?>

Validacin.php
<?php
/*require('php_conexion.php');*/

if($_POST['con'] != $_POST['con2']){

33 | P g i n a

header("Location: registro.php?error=1");
}
$conexion=mysqli_connect("localhost","root","","carrito");
$consulta='insert into usuarios
values("'.$_POST['nom'].'","'.$_POST['ape_pat'].'","'.$_POST['ape_mat'].'","'.$_POST['email'].'","'.$
_POST['usu'].'","'.$_POST['con'].'","b" );';
$validacion = mysqli_query($conexion,$consulta);

if(!$validacion){
echo "Error al ingresar registro";
}
else{
echo "usuario registrado con exito";
}
?>

Cambiar_clave.php
<?php
session_start();
include('php_conexion.php');
if($_SESSION['tipo_usu']=='b'){
}else{
header('location:error.php');
}
$usuario=limpiar($_SESSION['username']);
$sqll=mysql_query("SELECT * FROM usuarios WHERE usu='$usuario'");
if($dato=mysql_fetch_array($sqll)){
$nombre=$dato['nom'];
$palabra=explode(" ", $nombre);
$nomb=$palabra[0];
}
?>
<!DOCTYPE html>
<html lang="en">

34 | P g i n a

<head>
<meta charset="utf-8">
<title>Cambiar Clave</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/bootstrap-affix.js"></script>
<script src="js/holder/holder.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon144-precomposed.png">

35 | P g i n a

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon114-precomposed.png">


<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<style type="text/css">
#apDiv1 {
position: absolute;
width: 118px;
height: 17px;
z-index: 1;
left: 1142px;
top: 3px;
}
</style>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div align="center">
<table width="50%" border="0">
<tr>
<td>
<table border="0" class="table table-bordered">
<tr class="success">
<td>
<center><strong>
<h3><img src="img/30.png" class="img-circle img-polaroid" width="100" height="100">
Cambiar Contrasea</h3>
</strong></center>
</td>
</tr>
<tr>
<td>
<div align="center">
<form name="form1" method="post" action="">
<label><strong>Contrasea Actual: </strong></label><input type="password"
name="contra" id="contra" required>
<label><strong>Nueva Contrasea: </strong></label><input type="password" name="c1"
id="c1" required>

36 | P g i n a

<label><strong>Repita Nueva Contrasea: </strong></label>


<input type="password" name="c2" id="c2" required><br>
<input type="submit" name="button" id="button" class="btn btn-primary" value="Cambiar
Contrasea">
<br>
</form>
<?php
if(!empty($_POST['c1']) and !empty($_POST['c2']) and !empty($_POST['contra'])){
if($_POST['c1']==$_POST['c2']){
$usuario=limpiar($_SESSION['username']);
$contra=limpiar($_POST['contra']);
$can=mysql_query("SELECT * FROM usuarios WHERE usu='".$usuario."'
and con='".$contra."'");
if($dato=mysql_fetch_array($can)){
$cnueva=limpiar($_POST['c2']);
$sql="Update usuarios Set con='$cnueva' Where usu='$usuario'";
mysql_query($sql);
echo '<div class="alert alert-info" align="center">
<button type="button" class="close" datadismiss="alert"></button>
<strong>Contrasea!</strong> Actualizada con exito
</div>';
}else{
echo '<div class="alert alert-error">
<button type="button" class="close" datadismiss="alert"></button>
<strong>Contrasea!</strong> Digitada no corresponde a
la antigua
</div>';
}
}else{
echo '<div class="alert alert-error">
<button type="button" class="close" datadismiss="alert"></button>
<strong>Las dos Contrasea!</strong> Digitadas no soy
iguales
</div>';
}

37 | P g i n a

}
?>
</div>
</td>
</tr>
</table>
</td></tr>
</table>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div id="apDiv1">
<li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdowntoggle" data-toggle="dropdown"><i class="icon-user"></i> Hola! <?php echo $nomb; ?> <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="perfil.php"
target="admin"><i class="icon-user"></i> Ver perfil </a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="cambiar_clave.php"
target="admin"><i class="icon-pencil"></i> Modificar Contrasea </a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="php_cerrar.php"><i
class="icon-off"></i> Cerrar Sesion</a></li>
</ul>
</li>
</div>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navcollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="iconbar"></span> </button>
<a class="brand" href="inicio.php">iStore</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="inicio.php">Principal</a></li>
<li><a href="mis_pedidos.php">Pedidos</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>

38 | P g i n a

</div>
</div>
</div>
</body>
</html>

Conclusin
Las aplicaciones web con base de datos y las aplicaciones mviles estn marcando la
pauta en el mercado es por eso que decidimos realizar una aplicacin web como proyecto
final y utilizando como lenguaje de programacin php y una base de datos relacional con
mysql ya que es el lenguaje que se puede conectar con mucho ms facilidad gracias a
phpmyadmin que viene incluido junto con el servidor wamp, en este proyecto integramos
todo lo aprendido en el curso de base de datos y adems de conocimientos adquiridos de
otras materias.

Bibliografa/referencias
Pgina de Referencia
Nutricin Extrema. Nutricin . Recuperado 10, 2014, de
http://www.nutricionextrema.com/
Bootstrap iconos. Recuperado 10, 2014, de http://getbootstrap.com/components/
Php net. Documentacin. Recuperado 10, 2014, de http://php.net/docs.php
Wamp server. Download. Recuperado 10, 2014, de
http://www.wampserver.com/en/
Visual Paradigm. Download. Recuperado 10, 2014, de http://www.visualparadigm.com/

You might also like