capÍtulo 3: diseÑo y desarrollorepositorio.upsin.edu.mx/fragmentos/capitulo... · 2019. 12....

44
50 CAPÍTULO 3: DISEÑO Y DESARROLLO

Upload: others

Post on 15-Aug-2021

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

50

CAPÍTULO 3: DISEÑO Y DESARROLLO

Page 2: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

51

14. DISEÑO

Para el desarrollo de un proyecto, no importa qué tan grande sea, es

importante tener una buena coordinación y comunicación con el equipo de trabajo, de

esta manera las actividades y los objetivos serán claros y coherentes, por lo tanto se

cumplirán.

Dado a eso, la planeación y la organización de un proyecto es

fundamental para el desarrollo del mismo. Esto se facilita gracias a las metodologías

ágiles, las cuáles se enfocan en la constante comunicación en los miembros del equipo

de trabajo, como del cliente hacia el líder del proyecto.

Unas de las metodologías ágiles, entre las muchas que existen, es

SCRUM, la cual está especializada en reuniones diarias para fomentar la

comunicación entre el SCRUM máster (líder del equipo) y el equipo, en donde el

SCRUM master llega a conocer las limitaciones del equipo y lo que este puede llegar

a lograr en un período de tiempo.

También, SCRUM, optimiza el tiempo de entrega al dar periodos de 2 a

4 semanas (Sprint), en donde se generará una versión ejecutable del desarrollo, así

manteniendo un ritmo constante de trabajo y una constante comunicación hacia el

cliente.

Durante el Sprint, las actividades son evaluadas dependiendo de la

prioridad y su complejidad, dando así un peso al desarrollo y con la posibilidad de

poder alargar el tiempo de duración del Sprint. Dichas evaluaciones las hace el mismo

equipo de trabajo en donde se toma en cuenta la opinión de todos sin importar la

experiencia de cada uno.

SCRUM también te permite hacer iteraciones, la cual se refiere a poder

regresar a un Sprint y modificar actividades y procesos ya realizados, para mejorarlas

o corregirlas después de la evaluación por parte del cliente.

Dado a lo anterior, SCRUM es una metodología que permite trabajar a

un ritmo constante, sin perder la comunicación en ningún momento, ordenando el

proyecto y desglosándolo de una manera que todos los miembros del equipo sean

capaces de poder realizar las actividades en un periodo de tiempo establecido.

Page 3: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

52

15. DESARROLLO

El uso de las herramientas adecuadas para un desarrollo de comercio

electrónico, pueden ser fundamental para el comportamiento de este, es por eso por

lo que existen diferentes tecnologías que se logran adaptar a las necesidades que un

e-commerce necesita.

En este proceso es fundamental la comunicación que el cliente mantiene

con la página al momento que este añade objetos a su carrito de compras para así

pasar a finalizar el pedido y poder efectuar un pago de manera exitosa y sin ningún

inconveniente. De esta manera, se puede considerar que el módulo principal de un e-

commerce es su carrito, ya que sin él, no se podría efectuar ningún proceso.

Existen tecnologías que ya suelen integrar un carrito de compras dentro

de su desarrollo como es el caso de CodeIgniter, al contrario que Laravel que se

necesita instalar una librería para obtener esta funcionalidad. Es por eso por lo que en

esta sección se verá a detalle los pasos a seguir para la implementación de un carrito

de compras en ambos frameworks.

15.1. HERRAMIENTAS DE DESARROLLO

Para poder implementar un carrito de compras, se realizará un proyecto

en diferentes plataformas de desarrollo basadas en PHP (CodeIgniter y Laravel). Así

como también se necesitarán la creación de interfaces con las que los usuarios

interactuarán, estas realizadas en conjunto de HTML (Lenguaje de etiquetas) y CSS

(Lenguaje de diseño). También se agregará el framework de Bootstrap, ya que son

archivos que proporcionan un diseño establecido de objetos y colores a la interfaz, la

cual ahorra tiempo de diseño cuando el desarrollador no es experto en CSS o los

tiempos cortos y apresurados.

Ambos frameworks solicitan una conexión constante con la base de

datos a través del modelo y en donde cada uno, a su manera, protege procesos

delicados al usuario en la parte de sus controladores, en donde CodeIgniter le

corresponde la arquitectura MVC (Modelo-Vista-Controlador), más sin embargo, a

pesar de que Laravel cuenta con la misma estructura, este no es un framework de

MVC.

Page 4: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

53

Gracias a que son frameworks bastantes conocidos, ambos cuentan con

la suficiente documentación y casos de ayuda por parte de otros desarrolladores en

diferentes webs de preguntas como lo son foros.

La información será almacenada en una base de datos, como ya se

mencionó en los párrafos anteriores, ambos frameworks solicitan una conexión

constante para consultar, almacenar, actualizar y eliminar los datos guardados. Una

base de datos es MySQL, el cuál es el que se estará utilizando en esta demostración.

Para poder tener los servicios de MySQL y PHP se tendrá instalado un

servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

y te permiten trabajar desde una computadora con bajos recursos.

El carrito de compras contará con una actualización de información de

manera dinámica, esto quiere decir que no se necesitará recargar la página para que

la información sea visible por el usuario, de esta manera se busca agilizar procesos y

evitar pérdidas de tiempo al usuario. Para eso se utilizará AJAX en conjunto de la

librería de jQuery, la cual nos permite la manipulación rápida de elementos de HTML.

Existirá dos librerías llamada cart-page y shop la cuales contendrán todos

los llamados al servidor con todas las funcionalidades del carrito que incluirán agregar

un producto, modificar la cantidad de un producto, eliminar dicho producto y consultar

el carrito de compras en cualquier dispositivo siempre y cuando este haya iniciado

sesión con su usuario y contraseña correspondiente.

Para el desarrollo de este proyecto se utilizará Atom, que es un editor de

código fuente el cual cuenta con contenido personalizado que ayuda que la

programación se convierta en una tarea más rápida y eficiente.

15.2. PROPUESTA DE EJEMPLO

Se demostrará en los dos diferentes frameworks (CodeIgniter y Laravel)

la implementación de un carrito de compras, en el cual se podrá demostrar la hipótesis

planteada desde el inicio de la investigación: El Framework que será una mejor

herramienta en la elaboración de una aplicación web para un e-commerce es

CodeIgniter debido a las herramientas y a la facilidad del entendimiento del mismo.

Page 5: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

54

Se tomará en cuenta que el lector tiene conocimientos previos en

CodeIgniter y Laravel, así como el manejo de base de datos, Javascript, jQuery,

Bootstrap, CSS y HTML.

El ejemplo del carrito de compras costa de un CRUD (Create, Read,

Update and Delete) que traducido al español es crear, leer, actualizar y eliminar, en

este caso, un producto del carrito de compras, sin tener que actualizar la página y de

manera rápida a través del frameworks y el uso de Ajax.

15.3. PREPARACIÓN DE LA PÁGINA

Para que pueda funcionar correctamente se deben de añadir el archivo

global.js que contendrá funciones globales de peticiones Ajax para la realización de

las acciones del carrito y la función global de una librería Bootstrap Dialog en donde

se mostrarán mensajes al usuario sobre las acciones.

Archivo global.js parte 1

Fuente: del autor

Imagen 3.1

Page 6: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

55

Archivo global.js parte 2

Fuente: del autor

Imagen 3.2

También se tendrá un archivo llamado shop.js en donde se cargará

automáticamente los productos de la base de datos hacia la vista haciendo una

petición a la base de datos a través de Ajax.

En él se tendrá una función llamada cargarProductos que ayudará a

cargar los productos en la vista dinámicamente a través de una consulta a la base de

datos, la cuál será diferente para ambos frameworks.

Page 7: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

56

Archivo shop.js parte 1

Fuente: del autor

Imagen 3.3

Page 8: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

57

Archivo shop.js parte 2

Fuente: del autor

Imagen 3.4

Archivo shop.js parte 3

Fuente: del autor

Imagen 3.5

15.4. CODEIGNITER

A continuación, se presentará paso por paso las indicaciones a seguir

para poder realizar un carrito en el framework de CodeIgniter.

Page 9: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

58

15.4.1. Preparación de Framework

Primeramente, CodeIgniter no necesita de ninguna instalación previa,

más que tener un servidor instalado en nuestra computadora como lo es XAMPP o

WAMP, así que solamente se tiene que ingresar a la página oficial para poder

descargar el conjunto de carpetas.

Página CodeIgniter

Imagen 3.6

https://codeigniter.com/

Ya descargado, se debe de descomprimir el archivo y copiar la carpeta a

nuestro servidor local, en caso de ser XAMPP la dirección es C:\xampp\htdocs y en

WAMP C:\wamp64\www. Se le puede poner cualquier nombre, siempre y cuando no

lleve espacios y ningún carácter especial para evitar conflictos con la url, en este caso:

carritoCodeIgniter.

g

Fuente: del autor

Imagen 3.7

Page 10: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

59

A continuación, se tienen que modificar ciertos archivos para terminar

con la configuración de nuestro framework.

Config.php

El archivo Config.php se encuentra ubicado en

C:\wamp64\www\carritoCodeIgniter\application\config\config.php

Este archivo contiene las configuraciones básicas de CodeIgniter, entre

ellas la ruta base de nuestra página web que se encuentra en la variable

$config[‘base_url’], por la cual se le asignará el valor de:

http://localhost/carritoCodeIgniter/ ya que se encuentra localizado en nuestro servidor

local.

URL del proyecto

Fuente: del autor

Imagen 3.8

Database.php

El archivo database.php se encuentra ubicado en

C:\wamp64\www\carritoCodeIgniter\application\config\database.php

Este archivo tiene las configuraciones incluyendo la conexión con la base

de datos que utilizaremos en el sistema, así que se sustituirán las siguientes variables:

• Hostname: ruta en donde se encentra guardada nuestra base de

datos, en nuestro caso es localhost ya que contamos con un

servidor local.

• Username: es el usuario que tiene acceso a nuestra base de

datos, en nuestro caso es root.

• Password: es la contraseña del usuario a ingresar.

• Database: es el nombre de nuestra base de datos del proyecto,

en nuestro caso: carritoBD

Page 11: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

60

Configuraciones de la base de datos

Fuente: del autor

Imagen 3.9

Routes.php

Este archivo se encuentra ubicado en

C:\wamp64\www\carritoCodeIgniter\application\config\routes.php

Contiene el controlador básico a cargar cuando se llama a la ruta base,

en nuestro caso será Inicio, así que a la variable $route['default_controller'] será

resplazado su valor por Inicio.

Controlador Inicial

Fuente: del autor

Imagen 3.10

Page 12: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

61

15.4.2. Base de datos

Utilizando un gestor de base de datos, como lo es HeidiSQL, se creará

una base de datos llamada carritoBD la cual contendrá una tabla llamada usuarios y

una tabla llamada carrito, ambas tablas se encontrarán relacionadas en donde se

podrá almacenar la información del carrito de compras dependiendo del usuario.

Estructura de la base de datos (Usuario)

Fuente: del autor

Imagen 3.11

Estructura de la base de datos (Carrito)

Page 13: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

62

Fuente: del autor

Imagen 3.12

15.4.3. Desarrollo

Shop.js

Una vez cargado los archivos mencionados con anterioridad, se tendrán

que cargar los productos de la base de datos a través de la siguiente petición, que se

encontrará en el archivo shop.js. Cabe recalcar que dicha función será diferente tanto

en CodeIgniter como el Laravel ya que el url será diferente para ambos casos.

Archivo shop.js parte 4

Fuente: del autor

Imagen 3.13

Una vez cargado los productos, se tendrá que construir la función que

ayudará a cargar los productos al carrito. Esta se encontrará en el mismo archivo:

shop.js

Page 14: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

63

Esta función será de un evento de clic en un enlace, que cuando este sea

accionado, se buscará en los productos el producto seleccionado y creará un

formulario para así poder mandarlo por el método POST. De esta manera el

controlador recibirá esta petición y es ahí en donde se realizará la función de añadir al

carrito.

Archivo shop.js parte 5

Fuente: del autor

Imagen 3.14

Cart-page.js

En otro archivo, cart-page.js se encontrarán las demás funcionalidades

del carrito: modificar cantidad, eliminar y consultar carrito. Estas funciones se

encuentran separadas al resto ya que estas funcionalidades se encuentran en la

página del carrito donde se pueden visualizar todos los productos añadidos y así

proceder a finalizar el pedido.

Page 15: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

64

En este archivo se agregarán las siguientes funciones:

Archivo cart.js parte 1

Fuente: del autor

Imagen 3.15

En esta primera parte se muestra la función set_carrito(), la cuál se

encarga de hacer una petición a la base de datos para poder cargar los productos del

carrito en nuestra interfaz y el usuario pueda interactuar con ellos.

La siguiente función callback_set_carrito(), es la que “dibuja” en la vista

los productos y la que pone funcionalidad en los íconos y en los botones para que se

puedan redirigir a la función que le corresponde con los datos que se necesitan.

Page 16: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

65

Archivo cart.js parte 2

Fuente: del autor

Imagen 3.16

En esta segunda parte se termina de formar el código HTML para poder

incluirlo en la vista.

Archivo cart.js parte 3

Page 17: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

66

Fuente: del autor

Imagen 3.17

La función anterior es utilizada para hacer una petición al servidor y

extraer rápidamente el costo total y la cantidad de productos.

Archivo cart.js parte 4

Fuente: del autor

Imagen 3.18

Esta función, remove_item, es para eliminar un producto del carrito de

compras a través del id que la misma librería le da.

Archivo cart.js parte 5

Fuente: del autor

Imagen 3.19

La función update_item tiene como objetivo modificar la cantidad del

producto metiendo la cantidad directamente en el cuadro de texto, accionando la

función al dar click al botón de editar. Acto seguido, haace una modificación a la base

de datos para guardar la actualización.

Page 18: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

67

Archivo cart.js parte 6

Fuente: del autor

Imagen 3.20

Y por último, estas dos funciones actualizan el producto por medio de

botones en donde se puede aumentar una unidad a la cantidad o restarla, y al igual

que la anterior, guardan la actualización en la base de datos y recarga el carrito para

comprobar la acción.

Shop.php (Controlador)

A continuación, se construirá el controlador para poder tener las

interacciones con la base de datos, representada en el modelo, el cuál será explicado

junto con su estructura en el siguiente paso y se incluirá la librería del carrito de

compras.

Page 19: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

68

Archivo shop.php parte 1

Fuente: del autor

Imagen 3.21

La primera parte del código representa la estructura básica de un

controlador de CodeIgniter, el cual recibe el nombre de Shop y carga el modelo con el

nombre de M_Shop.

Archivo shop.php parte 2

Fuente: del autor

Imagen 3.22

Esta función hace la consulta al modelo para traer todos los productos de

la base de datos.

Page 20: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

69

Archivo shop.php parte 3

Fuente: del autor

Imagen 3.23

La función add_cart() agrega un producto al carrito y a la base de datos

para poder relacionar el carrito con la sesión.

Archivo shop.php parte 4

Fuente: del autor

Imagen 3.24

Page 21: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

70

Las funciones anteriores ayudan a consultar información de los

productos. La primera (get_cart()) es sobre el contenido del carrito y la segunda

(getBagInfo ()) es sobre el total del precio a través de una función especial y la cantidad

total de productos.

Archivo shop.php parte 5

Fuente: del autor

Imagen 3.25

La función anterior remueve un producto del carrito y de la base de datos.

Archivo shop.php parte 6

Fuente: del autor

Imagen 3.26

Esta función edita un producto tanto en el carito como en la base de

datos.

Page 22: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

71

M_Shop.php (Modelo)

A continuación, se construirá el modelo, el cual se llamará M_Shop, en

donde se podrá la siguiente estructura básica de CodeIgniter, además de exportar

unas librerías para poder desencriptar el token el cual contiene información del usuario.

Archivo M_Shop.php parte 1

Fuente: del autor

Imagen 3.27

Archivo M_Shop.php parte 2

Fuente: del autor

Imagen 3.28

Este método ayuda a extraer todos los productos de tienda en línea que

se encuentren activos para así poder ser visualizados en la página y poder ser

comprados.

Page 23: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

72

Archivo M_Shop.php parte 3

Fuente: del autor

Imagen 3.29

Esta función añade a la base de datos un producto añadido en el carrito

para poder relacionarlo con la sesión y de esta manera, al iniciar, aparezca el producto

desde cualquier dispositivo.

Page 24: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

73

Archivo M_Shop.php parte 4

Fuente: del autor

Imagen 3.30

Con esta función se obtiene todos los productos de la base de datos y se

adapta a la estructura que maneja la librería del carrito para así poder cargarlos de

una manera más rápida.

Page 25: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

74

Archivo M_Shop.php parte 5

Fuente: del autor

Imagen 3.31

Y por último, la función anterior actualiza el carrito en la base de datos.

Todas las funciones anteriores son solamente para la funcionalidad de

conectar el carrito de compras con el inicio de sesión, es por eso que se deben de

guardar en la base de datos. En caso de no querer hacer esta relación, simplemente

no se tomaría en cuenta las funciones del modelo.

15.5. LARAVEL

Ahora pasaremos con las indicaciones a seguir para desarrollar el carrito de compras

en el framework de Laravel.

15.5.1. Preparación de Framework

En comparación de CodeIgniter, este framework se necesita instalar y

crear a través de Composer, que es un sistema de gestión de paquetes para programar

en PHP el cual provee los formatos estándar necesarios para manejar dependencias

y librerías de PHP. [17]

Es por eso por lo que primeramente se tiene que descargar Composer

antes de crear nuestro proyecto en Laravel.

Page 26: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

75

Página de descarga de Composer

Imagen 3.32

https://getcomposer.org/download/

Una vez descargado se instalará seleccionando la opción de

desarrollador y se seleccionará la ubicación en donde se encuentra la carpeta de PHP.

Pantalla de Instalación 1

Fuente: del autor

Imagen 3.33

Pantalla de Instalación 2

Page 27: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

76

Fuente: del autor

Imagen 3.34

Una vez instalado, se abre la ubicación en donde se tendrá el proyecto

en Laravel en la consola de Windows o en la consola del sistema operativo en donde

se encuentre, en nuestro caso será en C:\wamp64\www

Consola de Windows

Fuente: del autor

Imagen 3.35

Se debe de ingresar la siguiente instrucción para poder crear el proyecto

composer create-project --prefer-dist laravel/laravel carritoLaravel y esperar a que se

genere y descarguen documentos para que nuestro proyecto quede listo para usar. En

la instrucción, el último parámetro es el nombre del proyecto, en dado caso que se

quiera manejar un nombre diferente al del ejemplo.

Comando de creación de proyecto en Laravel

Fuente: del autor

Imagen 3.36

Una vez acabado el proceso de instalación se creará una carpeta con el

nombre del proyecto en la ubicación donde se instaló el proyecto. La carpeta se

encuentra de la siguiente manera.

Page 28: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

77

Estructura de Laravel

Fuente: del autor

Imagen 3.37

A continuación, se debe de modificar el siguiente archivo para concluir

con la preparación del proyecto:

.env

El archivo se encuentra en la raíz del proyecto y en el se encuentran las

configuraciones de la base de datos y otras como las de un servidor de correo.

Se deben de modificar las siguientes variables:

• DB_HOST: es la dirección de la ubicación del servidor de la base

de datos.

• DB_PORT: es el puerto por el cual se conectará a la base de datos

• DB_DATABASE: es el nombre de la base de datos

• DB_USERNAME: es el nombre del usuario para conectarse a la

base de datos

Page 29: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

78

• DB_PASSWORD: es la contraseña del usuario de la base de

datos

Configuraciones de la base de datos (Laravel)

Fuente: del autor

Imagen 3.38

15.5.2. Base de datos

La base de datos será con las mismas configuraciones y propiedades de

la base de datos anterior, solamente se harán unas pequeñas modificaciones en las

tablas ya que Laravel pide un formato específico por cada tabla, los cuales son los

siguientes campos:

• Updated_at: de tipo DATETIME

• Created_at: de tipo TIMESTAMP con un valor predeterminado de

CURRENT_TIMESTAMP

Por lo tanto, la tabla de usuarios y de carrito se modificarán de la

siguiente manera.

Estructura de la base de datos en Laravel(Usuario)

Page 30: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

79

Fuente: del autor

Imagen 3.39

Estructura de la base de datos en Laravel(Carrito)

Fuente: del autor

Imagen 3.40

15.5.3. Desarrollo

Antes de empezar a crear todos los elementos y modificaciones, en la

consola del sistema operativo debe estar abierta la carpeta del proyecto, en este caso

es: C:\wamp64\www\carritoLaravel

Laravel tiene la regla de que, por cada tabla creada, cada uno tendrá su

controlador y su modelo. En la consola de comandos, se tendrá que ingresar el

siguiente comando: php artisan make:controller Carritos –resource, la cuál creará el

controlador con el nombre de Carritos. Se hará lo mismo para el controlador de

Productos.

Comando de creación de controlador

Fuente: del autor

Imagen 3.41

Page 31: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

80

Dicho controlador creado se encuentra dentro de la carpeta

app\Http\Controller y cuenta con la siguiente estructura:

Estructura de controlador parte 1 (Laravel)

Fuente: del autor

Imagen 3.42

Page 32: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

81

Estructura de controlador parte 2 (Laravel)

Fuente: del autor

Imagen 3.43

Estructura de controlador parte 3 (Laravel)

Page 33: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

82

Fuente: del autor

Imagen 3.44

Las funciones que se encuentran ahí son creadas por Laravel para tener

una estructura en el código respecto a las funciones. Estas funciones se pueden utilizar

e inclusive se pueden crear nuevas.

Para la creación de los modelos se necesita ejecutar la siguiente

instrucción en la consola: php artisan make:model Carrito, se creará un modelo con el

nombre de Carrito. Se hará lo mismo para el modelo de Producto.

Comando de creación de modelo

Fuente: del autor

Imagen 3.45

Dicho archivo se encuentra guardado en la carpeta \app y su estructura

es la siguiente:

Estructura de modelo (Laravel)

Fuente: del autor

Imagen 3.46

Una vez generado los controladores y los modelos necesarios, se tiene

que instalar la librería del carrito de compras, como existen muchas librerías creadas

por los usuarios de Laravel, utilizaremos la siguiente librería que contiene las funciones

básicas que ocuparemos del carrito: LaravelShoppingcart de Crinsane.

Page 34: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

83

Página de librería de carrito

Imagen 3.47

https://github.com/Crinsane/LaravelShoppingcart

Una nota importante sobre esta librería es que funciona en la versión 5.5

hacia abajo. Si se usa alguna versión de Laravel superior, la instalación no se podrá

realizar y no se podrá utilizar.

Se instalará con el siguiente comando: composer require

gloudemans/shoppingcart

Comando de instalación de la librería

Fuente: del autor

Imagen 3.48

Antes de empezar a estructurar nuestro carrito, primeramente, se tiene

que levantar nuestro servidor de nuestro proyecto para poder ver nuestra página, se

levantará con el siguiente comando: php artisan serve.

Comando de inicialización del servidor

Fuente: del autor

Imagen 3.49

Page 35: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

84

Shop.js

Las funciones anteriores enseñadas en la forma de hacer el carrito en el

famework de CodeIgniter son absolutamente igual, solamente se modificará las

siguientes funciones que cambiarán la ruta la cuál están dirigidas los métodos AJAX.

Archivo shop.js parte 1 (Laravel)

Fuente: del autor

Imagen 3.50

Page 36: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

85

Archivo shop.js parte 2 (Laravel)

Fuente: del autor

Imagen 3.51

Cart-page.js

Sucede lo mismo con este archivo, ciertas funciones cambiaron

solamente por la ruta a la cuál está dirigida ya que su funcionamiento sigue siendo el

mismo.

Archivo cart-page.js parte 1 (Laravel)

Fuente: del autor

Imagen 3.52

Page 37: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

86

Archivo cart-page.js parte 2 (Laravel)

Fuente: del autor

Imagen 3.53

Archivo cart-page.js parte 3 (Laravel)

Fuente: del autor

Imagen 3.54

Archivo cart-page.js parte 4 (Laravel)

Page 38: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

87

Fuente: del autor

Imagen 3.55

Archivo cart-page.js parte 5 (Laravel)

Fuente: del autor

Imagen 3.56

Web.php

Este archivo es el archivo de rutas y a diferencia de CodeIgniter, se

necesita para redirigir las páginas a las vistas o a los controladores, dependiendo hacia

donde se dé la orden. Este archivo se encuentra en la carpeta routes de nuestro

proyecto:

Page 39: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

88

Carpeta routes (Laravel)

Fuente: del autor

Imagen 3.57

Dentro del archivo se pondrá lo siguiente:

Archivo web.php

Fuente: del autor

Imagen 3.58

Productos.php (Controlador)

Este archivo es el controlador de productos, en el que se necesitará

solamente una función que haga el llamado a todos los productos activos.

Page 40: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

89

Archivo productos.php parte 1 (Laravel)

Fuente: del autor

Imagen 3.59

Carrito.php (Controlador)

Finalmente, en el controlador del carrito se pondrá la funcionalidad de

cada acción que se necesita del carrito: añadir producto, eliminar producto, modificar

producto y consultar productos.

Archivo carrito.php parte 1 (Laravel)

Fuente: del autor

Imagen 3.60

Page 41: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

90

Primeramente, se mandan a llamar las librerías necesarias, incluyendo

el modelo del carrito, que hace referencia a la tabla de la base de datos.

Archivo carrito.php parte 2 (Laravel)

Fuente: del autor

Imagen 3.61

Estas dos funciones, index() y info(), hacen referencia a la consulta de

los productos, en donde la primera consulta todos los productos del carrito y la segunda

obtiene el monto total de los artículos y la cantidad total.

Archivo carrito.php parte 3 (Laravel)

Page 42: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

91

Fuente: del autor

Imagen 3.62

Archivo carrito.php parte 4 (Laravel)

Fuente: del autor

Imagen 3.63

Esta función añade un producto al carrito y a la base de datos para poder

ligar los productos al inicio de sesión del usuario. En comparación con CodeIgniter,

aquí el modelo sirve para meramente hacer referencia a la tabla, todos los procesos

de consulta, alta, baja y modificación se hace en el controlador, es por eso por lo que

Laravel no tiene la arquitectura Modelo-Vista-Controlador.

Page 43: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

92

Archivo carrito.php parte 5 (Laravel)

Fuente: del autor

Imagen 3.64

Esa función actualiza la información del producto tanto del carrito como

de la base de datos.

Page 44: CAPÍTULO 3: DISEÑO Y DESARROLLOrepositorio.upsin.edu.mx/Fragmentos/Capitulo... · 2019. 12. 12. · servidor local, ya sea XAMPP o WAMP, ambos servidores son gratuitos a los usuarios

93

Archivo carrito.php parte 6 (Laravel)

Fuente: del autor

Imagen 3.65

Y, por último, esta función elimina un articulo del carrito, incluyendo de la

base de datos. La única diferencia con las funciones del carrito es que, a la hora de

buscar un producto en específico, primero se tiene que hacer una consulta general de

los artículos y después mediante una función especial de la librería, se busca el

producto, al contrario, con la librería de CodeIgniter que mediante una función directa

se encontraba el producto.