Tienda Online
Tienda Online
Tienda Online
CONTENIDO
INTRODUCCIÓN ............................................................................................................ 1
OBJETIVO .................................................................................................................. 1
JUSTIFICACIÓN .......................................................................................................... 1
METODOLOGÍA EMPLEADA ....................................................................................... 1
SERVICIOS UTILIZADOS.................................................................................................. 3
NGINX ....................................................................................................................... 3
PHP 7.3 ...................................................................................................................... 4
Maria DB ................................................................................................................... 5
PHPMYADMIN ........................................................................................................... 7
FTP ............................................................................................................................ 9
ESTRUCTURA DE BASE DE DATOS ................................................................................ 11
ESTRUCTURA DE LA TIENDA ONLINE ........................................................................... 14
PAGINA PRINCIPAL .................................................................................................. 14
PIE DE PÁGINA......................................................................................................... 14
MENÚ CATEGORÍAS ................................................................................................. 15
MENÚ SESIÓN ......................................................................................................... 15
SIN SESIÓN ........................................................................................................... 15
SESIÓN USUARIO ................................................................................................. 16
SESIÓN ADMINISTRADOR ..................................................................................... 16
BARRA DE BÚSQUEDA ............................................................................................. 16
CARRITO DE LA COMPRA ......................................................................................... 17
PROCESO DE COMPRA Y DEVOLUCIÓN .................................................................... 19
CONSULTA DE PEDIDOS REALIZADOS ................................................................... 21
CRONOLOGÍA DEL PROCESO ....................................................................................... 24
CONCLUSIONES ........................................................................................................... 26
BIBLIOGRAFÍA ............................................................................................................. 27
Proyecto – Tienda online (tiRRas)
INTRODUCCIÓN
OBJETIVO
El objetivo de este proyecto es elaborar una página web de venta online de todo tipo
de productos, y que cuente con todos los elementos de un proceso de compra de este
tipo por parte del cliente: selección de producto, descripción e imágenes, precio,
carrito de la compra, formulario de datos del comprador, pago online e incluso opción
de devolución de productos.
JUSTIFICACIÓN
La necesidad de contar con una tienda online, complementaria o no, a la tienda física,
parece una opción obligatoria en un futuro próximo.
Por esos motivos, entre otros, he decidido basar mi proyecto en la creación de una
tienda online que ofrezca una gran variedad de productos de distintas categorías, que
pueda abarcar a distintos sectores comerciales.
METODOLOGÍA EMPLEADA
Como primer paso para la elaboración de este proyecto dediqué un tiempo antes y
durante la realización de este en comprobar cómo estaban diseñadas páginas
similares. Para eso fui analizando la estructura de dichas webs, prestando atención a
los siguientes aspectos:
A continuación, de entre todas las páginas visualizadas tomé ideas y, con todas ellas,
elaboré un esquema general de lo que sería mi proyecto final. Entre otras páginas,
tomé como referencia:
▪ Aliexpress (es.aliexpress.com)
▪ Amazon (www.amazon.es)
▪ Ebay (www.ebay.es)
▪ Mediamarkt (www.mediamarkt.es)
▪ El Corte Inglés (www.elcorteingles.es)
▪ Pc Componentes (www.pccomponentes.com)
▪ Asos (www.asos.com)
▪ Zalando (www.zalando.es)
▪ Leroy Merlin (www.leroymerlin.es)
Con todo eso, mi objetivo era diseñar una página donde se vieran todos los productos,
organizados por categorías mediante menús desplegables que facilitaran la visita al
cliente.
Tras analizar, entre otras, las páginas web anteriormente mencionadas, decidí utilizar
para el diseño de la página las siguientes características:
▪ Botones: los elegí color rojo porque todos ellos se encuentran sobre fondos
claros y destacan más. Al colocar el cursor sobre ellos, su forma y color cambian
ligeramente para que el usuario sepa que son botones interactivos.
▪ Barra de búsqueda: creada para los usuarios que busquen un producto
específico. Cuenta con un botón en forma de lupa para hacerlo más vistoso.
▪ Logo página: colocada en la cabecera de las diferentes páginas que existen en
la tienda.
▪ Tipo de letra: Segoe UI por ser una fuente de fácil lectura y que destaca en
fondos claros.
SERVICIOS UTILIZADOS
NGINX
He seleccionado esta herramienta como servidor web dado que, además de ser
software libre y de código abierto, es decir, que su uso es gratuito, funciona más
rápido que los servidores web más utilizados, como puede ser Apache.
Además, NGINX permite que Google posicione más alto el sitio web en las búsquedas
al ser más rápido el acceso y la navegación en el mismo.
Una vez instalado NGINX en la Raspberry, tenemos que empezar a configurarlo para
que funcionen los archivos PHP (todo ello, lógicamente, una vez instalado PHP 7.3), ya
que por defecto solo funcionan con HTML. Dentro del archivo de configuración
/etc/nginx/sites-enabled/default deberemos especificar en la siguiente
línea que abra archivos index.php, pero también se puede especificar que abra un
archivo PHP con un nombre en concreto. En mi caso, abrirá tirras.php.
Dentro de este mismo archivo debemos dejar las siguientes líneas tal y como se
muestran en la imagen.
PHP 7.3
He usado una de las últimas versiones de PHP, concretamente la 7.3, para poder cargar
mis archivos PHP ya que la ejecución de la página se lleva a cabo de manera más ligera
y discreta, afectando menos al funcionamiento general de la página y se ahorra
espacio en los archivos ya que se requiere menos código para ejecutar algunas
acciones.
file_uploads = On
allow_url_fopen = On
memory_limit = 256M
upload_max_filesize = 100M
cgi.fix_pathinfo=0
max_execution_time = 360
MARIA DB
He elegido el gestor de base de datos MARIA DB dado que, aunque es muy similar a
MYSQL, ofrece un mayor nivel de seguridad en cuanto a la codificación de los datos,
cuenta con más motores de bases de datos y tiene soporte para más tipos de lenguajes
de programación.
Su uso es muy similar a MYSQL y, en caso de caída del propio servidor, se puede
sustituir MARIA DB por MYSQL por su compatibilidad.
Cuando instalamos MARIA DB nos instala por defecto una funcionalidad para hacerlo
más seguro. La cual se pone en funcionamiento con el siguiente comando:
Nos pregunta si queremos quitar la opción de que el usuario root se pueda conectar
remotamente.
Nos da la opción de eliminar las bases de datos que vienen de prueba, por defecto.
Nos pregunta si queremos actualizar las tablas para que se apliquen los cambios
realizados.
Debido a que hemos quitado permisos de inicio de sesión desde remoto al usuario
administrador por defecto, root, debemos crear otro usuario diferente para poder
acceder desde PHPMYADMIN, que analizaremos más adelante.
PHPMYADMIN
Una vez instalado, para poder visualizarlo desde nuestro navegador haciendo uso de la
dirección IP del servidor, tenemos que crear un enlace directo a la carpeta que
contiene los archivos de la página con el siguiente comando:
Una vez dentro de la herramienta podemos gestionar todas las bases de datos y
también nos aparece información sobre el servidor de base de datos que tenemos,
versión, tipo de servidor, usuario, etc., y también del servidor web como versión,
nombre, versión PHP, etc.
FTP
La funcionalidad de instalar FTP es para pasar los archivos editados de la página desde
un equipo remoto hacia la carpeta correspondiente de nuestro servidor, lo que nos
permitirá quitarle carga de trabajo a nuestro servidor, ya que no lo estaremos usando
para la programación de la página.
Para pasar los archivos de nuestro ordenador al servidor utilizaremos una de las
aplicaciones más conocidas, como es Filezilla.
La base de datos se llama tirras y aquí se ven las tablas incluidas en la misma.
• Tabla clientes: aquí se almacenan los datos de inicio de sesión de los diferentes
clientes registrados.
• Tabla vendedores: aquí se almacenan los datos de los clientes que quieren
convertirse en vendedores, para lo cual será necesario que estén previamente
dados de alta como clientes.
• Tabla carrito: en esta tabla se almacenan los productos que el cliente haya
seleccionado para su posterior compra.
• Tabla pedidos: aquí constan los datos que proporcionan los clientes en los
formularios de la propia página y los datos de los productos que quieren comprar.
• Tabla devoluciones: aquí constan los productos que el cliente ha decidido devolver,
recogiéndose los datos del pedido y los motivos de la devolución, entre otros.
PAGINA PRINCIPAL
PIE DE PÁGINA
MENÚ CATEGORÍAS
MENÚ SESIÓN
Según el perfil del visitante de la página, se pueden distinguir tres tipos de menú de
sesión: sin sesión iniciada, sesión iniciada por el cliente y sesión iniciada por el
administrador de la página.
SIN SESIÓN
Cuando no se ha iniciado sesión, aparece el menú correspondiente para hacerlo, o
bien, para registrarse por primera vez en la tienda.
SESIÓN USUARIO
Una vez iniciada sesión por parte del usuario de la página se puede acceder a través de
este menú a las opciones de consulta de los pedidos realizados, así como para cerrar la
sesión vigente.
SESIÓN ADMINISTRADOR
El administrador tiene acceso a un enlace en el menú para gestionar la página de la
tienda, o para cerrar la sesión.
BARRA DE BÚSQUEDA
CARRITO DE LA COMPRA
Para acceder al carrito es necesario iniciar sesión. En caso de no hacerlo, la página web
nos lo recordará.
Otra característica del carrito de la compra es que, al realizar una búsqueda, aparece el
contenido de este en la parte izquierda de la pantalla, tenga o no algún producto
añadido, para recordar al usuario, en su caso, lo que ya ha incluido en su carrito.
Así mismo, se pueden eliminar todos los artículos del carrito de la compra pulsando el
botón “Borrar”.
La pantalla mostrara el carrito actualizado con los productos que se mantengan en él.
El proceso final de compra se debe realizar desde el propio carrito de la compra. Una
vez que se confirma el precio del producto, se procede a pulsar el botón de compra,
iniciándose así el proceso de pago y envío.
Una vez cumplimentados todos los campos, la web nos lleva a una página donde se
mostrarán los principales datos introducidos, y dará opción de elegir el tipo de entrega
preferida (estándar, o exprés).
Así mismo, aparecen las casillas para cumplimentar los datos de la tarjeta de crédito
con la que realizar el pago.
Una vez introducidos todos los datos necesarios, al pulsar Continuar Pedido nos llevará
a una última página donde se muestra la información resumida del pedido para que el
cliente pueda confirmar que todo es correcto y confirmar la compra.
Tras confirmar la compra, la página nos dará la opción de ver nuestros pedidos o seguir
comprando en la tienda.
Al acceder a la consulta de pedidos, bien a través del menú Sesión—Mis Pedidos, bien
al pulsar el botón Ver Pedidos tras finalizar una compra, se muestra información de los
pedidos realizados, indicando la fecha y hora de su realización, y se ofrece la opción de
devolución de estos.
Para ello, se ha colocado un botón, “Devolver pedidos” al lado del respectivo pedido.
Al pulsarlo, nos lleva a una pantalla en la que aparece el resumen del pedido, se
indican las condiciones aplicables a la devolución y se ofrece la posibilidad de indicar el
motivo de esta, bien mediante un menú desplegable con 4 opciones o, en su lugar,
indicando el motivo en la casilla de texto libre ubicada a continuación.
▪ Una vez diseñada la estructura, definí cómo iba a ser visualmente la página.
Seleccioné el fondo, tipografía, colores y el logotipo que iba a utilizar para toda
la web, dando con ello una harmonía estética al conjunto del proyecto.
▪ Creé una plantilla inicial con los elementos básicos, como son la cabecera, el
espacio para el contenido y el pie de la página.
▪ Una vez añadidos los productos, decidí hacer las páginas en las cuales se
mostrarían estos, tanto por categorías como de forma global, así como la
página para visualizar un producto en concreto.
▪ Una vez hecho esto, creé en la base de datos la tabla carrito, para asociar un
carrito de compra a cada cliente y después diseñé la página carrito y añadí
funcionalidad al botón Carrito.
▪ Creé la tabla pedidos para que desde el carrito se pudieran comprar productos
con los datos que introdujera el cliente.
▪ Después confeccioné una página donde el cliente pudiera ver sus pedidos y las
devoluciones, por lo que posteriormente creé una tabla de devoluciones y
▪ A medida que iba creando los campos de formulario les iba añadiendo control
de errores para que el usuario no introdujera datos que no correspondiera en
los campos de la base de datos.
CONCLUSIONES
Aparte de eso, creo que implica un mayor control de todo el proceso, por lo que se
tiene mayor seguridad de los datos y servicios ofrecidos.
BIBLIOGRAFÍA
▪ https://www.pedropablomoral.com/raspberrypi/proyectos/servidor-casero/
▪ https://foratdot.info/como-instalar-mariadb-server-y-phpmyadmin/
▪ https://www.w3schools.com
▪ https://www.php.net/
▪ https://www.aprenderaprogramar.com/
▪ https://es.stackoverflow.com/