Nathaly Parra Godinez - Entrega - 9

TECNOLÓGICO DE ESTUDIOS SUPERIORES
DE JILOTEPEC
DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES
“IMPLEMENTACIÓN DE UN SISTEMA WEB DE PEDIDOS ONLINE PARA LA

DULCERÍA “CANDY SWEET””
I NFORME FINAL DE
R ESIDENCIA PROFESIONAL
Q U E P R E S E N T A :
NATHALY PARRA GODINE Z
ASESOR: M.T.I. YADIRA ESTHER JIMENEZ PEREZ
JILOTEPEC, EDO, MEX. JULIO DE 2023

ÍNDICE GENERAL
Introducción…………………………………………………………………………………………………………………1
TEMA I. Protoloco ................................................................................................................... 2
1.1. Antecedentes de la empresa ..................................................................... 2
1.2. Caracterización del área ........................................................................... 3
1.3. Problemática ............................................................................................. 4
1.4. Justificación .............................................................................................. 5
1.5. Objetivo..................................................................................................... 6
1.5.1. Objetivos específicos ................................................................................ 6
1.6. Alcances ................................................................................................... 6
1.7. Limites ...................................................................................................... 7
1.8. Estudio de factibilidad ............................................................................... 7
1.8.1. Factibilidad técnica.................................................................................... 7
1.8.2. Factibilidad económica .............................................................................. 9
1.8.3. Factibilidad operativa .............................................................................. 10
1.8.4. Factibilidad legal ..................................................................................... 11
TEMA II. FUNDAMENTO TEÓRICO ......................................................................................... 12
2.1. Hosting.................................................................................................... 13
2.2. Dominio ................................................................................................... 14
2.3. SEO ........................................................................................................ 14
2.4. Base de datos ......................................................................................... 15
2.5. XAMMP................................................................................................... 16
2.6. Laravel .................................................................................................... 17
2.7. UX Design ............................................................................................... 18
2.8. IU Desing ................................................................................................ 19
2.9. HTML ...................................................................................................... 19
2.10. CSS ........................................................................................................ 20
2.11. Colores ................................................................................................... 21
TEMA III. Concepción del proyecto ....................................................................................... 23
3.1. Recolección de información. ................................................................... 23
3.2. Modelado Funcional ................................................................................ 23
3.3. Determinación de requisitos funcionales ................................................. 23
3.4. Determinación de requisitos funcionales ................................................. 26
3.5. Arquitectura de la aplicación ................................................................... 26
3.6. Determinación del modelo de desarrollo y de la tecnología a utilizar....... 27
3.6.1. Determinación del proceso de software .................................................. 27
3.6.2. Elección del Sistema Gestor de Base de Datos ...................................... 27
3.6.3. Elección del lenguaje de programación ................................................... 28
3.6.4. Determinación del dominio y servicio de publicación............................... 28
4. Determinación de las actividades (Gantt) ................................................ 29
TEMA IV. Proceso de desarrollo del software ....................................................................... 30
4.1. Diagramas de caso de uso...................................................................... 30
4.2. Diseño de interfaces, .............................................................................. 35
4.3. Diseño de base de datos......................................................................... 39
4.4. Diagrama de Entidad relación ................................................................. 41
4.5. Diagrama de Navegación ........................................................................ 42
4.6. Diagrama secuencial ............................................................................... 43
4.7. Diccionario de datos................................................................................ 45
TEMA V. Publicación y pruebas ............................................................................................. 54
5.1. Casos prácticos ...................................................................................... 54
5.2. Requisitos para la publicación y contratación .......................................... 58
5.3. Tipos de dominio y contratación .............................................................. 59
5.4. Tipos de dominio ..................................................................................... 60
5.4.1. Registro de dominio ................................................................................ 62
TEMA VI. Implementación y pruebas .................................................................................... 62
6.1. Seguimiento de publicación y pruebas ........................................................ 62
6..2. Pruebas ..................................................................................................... 62
Plan de capacitación.............................................................................................................. 70
Resultados ............................................................................................................................. 71
Conclusiones.......................................................................................................................... 72
Recomendaciones ................................................................................................................. 73
Glosario ................................................................................................................................. 74
Fuentes bibliográficas. .......................................................................................................... 76
Anexos ................................................................................................................................... 79
ÍNDICE DE FIGURAS
Figura 1. Organigrama del área. Fuente: Elaboración propia. ............................................ 3

Figura 2. Ubicación de la empresa. Fuente: Google Maps. ............................................... 4
Figura 3. Emociones y conceptos de cada color. Fuente: García ..................... 21
Figura 4. Saturación de colores. Fuente: García .................................................. 22
Figura 5. Diagrama de casos de uso. Realización propia ................................... 31
Figura 6. Diagrama de casos de uso. Realización propia. .................................. 32
Figura 7. Diagrama de casos de uso. Elaboración propia. ................................. 32
Figura 8. Diagrama de casos de uso. Elaboración propia. .................................. 32
Figura 9. Diagrama de casos de uso. Elaboración propia. .................................. 33
Figura 10. Diagrama caso de uso. Fuente: elaboración propia. ...................................... 34
Figura 11. Diagrama de caso de uso. Fuente: Elaboración propia. ................................. 34
Figura 12. Diseño de interfaces. Elaboración propia. ....................................................... 35
Figura 13. Diseño de pantallas. Elaboración propia. ........................................... 36
Figura 15. Diseño de pantallas. Elaboración propia ............................................ 37
Figura 20. Diseño de pantallas. Elaboración propia. ............................................ 39
Figura 21. Modelo relacional. Elaboración propia. .............................................. 40
Figura 22. Diagrama E-R. Elaboración propia. ...................................................... 41
Figura 23. Diagrama de navegación. Elaboración propia. .................................. 42
Figura 24. Registro de usuario. Fuente: Elaboración propia. ........................................... 43
Figura 25. Registro de administrativo. Fuente: Elaboración propia. ................................. 44
Figura 26. Registro de venta. Fuente: Elaboración propia. .............................................. 44
Figura 27. Registro de usuarios. Fuente: Elaboración propia. .......................................... 63
Figura 28. Login del sistema. Fuente: Elaboración propia. ............................................... 64
Figura 29. Agregar marca. Fuente: Elaboración propia. ................................................... 65
Figura 30. Pantalla de marcas. Fuente: Elaboración propia. ............................................ 66
Figura 31. Agregar Categoría. Fuente: Elaboración propia. ............................................. 67
Figura 32. Visualización de categorías. Fuente: Elaboración propia. ............................... 68
Figura 33. Productos. Fuente: Elaboración propia. .......................................................... 69
ÍNDICE DE TABLAS
Tabla 1. Características técnicas. Fuente: Elaboración propia ......................................... 8

Tabla 2. Características de software. Fuente: Elaboración propia ..................................... 8
Tabla 3. Factibilidad económica. Fuente: Elaboración propia ........................................... 9
Tabla 4. Tipo de licencia de software. Fuente: Elaboración propia. ................................. 11
Tabla 5. Tabla productos. Elaboración propia ....................................................... 45
Tabla 6. Tabla marca. Elaboración propia. ............................................................ 46
Tabla 7. Tabla Categoría. Elaboración propia. ...................................................... 47
Tabla 8. Tabla detalle de categoría. Elaboración propia. .................................... 47
Tabla 9. Tabla detalle categoría detalle. Elaboración propia. ............................ 47
Tabla 10. Tabla Detalle de producto. Elaboración propia. .................................. 48
Tabla 11. Tabla compra. Elaboración propia. ........................................................ 49
Tabla 12. Tabla detalle de compra. Elaboración propia. ..................................... 49
Tabla 13. Tabla venta. Elaboración propia. ............................................................ 50
Tabla 14. Detalle de venta. Elaboración propia. ................................................... 50
Tabla 15. Carrito de compra. Elaboración propia. ................................................ 51
Tabla 16. Tabla usuario. Elaboración propia. ........................................................ 51
Tabla 17. Tabla empleada. Elaboración propia. .................................................... 51
Tabla 18. Tabla Rol. Elaboración propia. ............................................................... 52
Tabla 19. Tabla Clientes. Elaboración propia. ...................................................... 53
Tabla 20. Prueba Registro de usuario. Fuente: Elaboración propia. ................................ 54
Tabla 21. Inicio de sesión. Fuente: Elaboración propia.................................................... 55
Tabla 22. Prueba Registro de producto. Fuente: Elaboración propia. .............................. 55
Tabla 23. Prueba Editar producto. Fuente: Elaboración propia. ....................................... 56
Tabla 24. Prueba Eliminar producto. Fuente: Elaboración propia. ................................... 56
Tabla 25. Prueba Agregar categoría. Fuente: Elaboración propia. .................................. 56
Tabla 26. Prueba Agregar marca. Fuente: Elaboración propia. ....................................... 57
Tabla 27. Prueba Agregar al carrito. Fuente: Elaboración propia..................................... 57
Tabla 28. Prueba Factura. Fuente: Elaboración propia.................................................... 57
Tabla 29. Tipos de Dominios. Fuente: Elaboración propia ............................................... 60
Tabla 30. Plan de capacitación. Fuente: Elaboración propia. .......................................... 70
INTRODUCCIÓN
En la actualidad, el mundo empresarial está experimentando una creciente

demanda de soluciones tecnológicas, que optimicen sus procesos y brinden una
experiencia única a los usuarios. Por lo que la implementación de sistemas web se
ha convertido en una herramienta fundamental para mejorar la gestión, la eficiencia
y la competitividad de las empresas que venden productos.
El presente proyecto tiene como finalidad brindar una solución eficiente para los
procesos internos y ofrecer una experiencia de compra excepcional a los clientes.
El sistema web desarrollado brinda a “Candy Sweet” una plataforma centralizada y
automatizada para la gestión de inventario, pedidos y la facturación por medio de
un archivo pdf.
El desarrollo del sistema web implico una investigación exhaustiva de las

necesidades especificadas de “Candy Sweet” y la identificación de los aspectos
clave que requerían de mejoras. Además, se consideraron las mejores
metodologías durante el diseño y desarrollo del sistema web para garantizar un
producto final de calidad.
Este proyecto se encuentra dividido en capítulos, en el primer capítulo se muestra

la información referente al marco teórico referencial donde se dan a conocer los
datos de la empresa “Candy Sweet”. Además, cuenta con la justificación del
proyecto, con los objetivos específicos y general, alcances y límites de la propuesta.
Durante el segundo capítulo se presentan los fundamentos teóricos que respaldan

la implementación del sistema web. El capítulo tres procede a define los
requerimientos funcionales y no funcionales del sistema, la elección del software
para programar el sistema y el gestor de base de datos. Mientras que el capítulo
cuatro se realizan el diseño de las interfaces. En el capítulo cinco se muestra la
publicación y pruebas de sistema y por último en el capítulo seis se muestra la
implementación y pruebas de dicho sistema.
1
TEMA I. PROTOLOCO
1.1. Antecedentes de la empresa
Todo comenzó en el mes de Julio del 2000 cuando se fundó la Dulcería “Candy
Sweet”, por Graciela García Quintanar y su familia en el estado de Hidalgo. Sus
fundadores contaban ya en ese momento con más de 20 años de experiencia en la
operación de venta de dulces, estado en el negocio desde 1980.
Durante los primeros cinco años de operaciones “Candy Sweet”, se perfeccionaron

y documentaron los procesos de operación y administración del negocio que
posteriormente serían las bases de la expansión de un catálogo de productos con
mayor diversidad, además de comenzar con la venta de dulces típicos de México
donde la principal característica de este dulce es su sabor casero al igual que todos
sus ingredientes.
Uno de los sabores más placenteros y exquisitos es el dulce. En México, con la

llegada de los españoles, la cultura indígena se mezcló con nuevas costumbres,
tradiciones y sabores y la riqueza culinaria de las distintas regiones de nuestro país
ha dado como resultado una gran diversidad de dulces típicos que no
podemos ignorar entre los más destacados en “Candy Sweet” son: las alegrías,
Muéganos, Camotes, palanquetas, cocadas, jalea, cajeta.
Siendo para el 2010 una de las dulcerías con mayor catálogo de productos en el
mercado además de ser muy reconocida a nivel regional. Para los siguientes años
implemento un área donde vendería dulce a granel y es aquí donde hacen aparición
las frutas deshidratas como lo son: la papaya, manzana, plátano, piña, mango,
mango enchilado, almendra, arándano, coco rallado, durazno, fresa, Jamaica,
chabacano, pasa, kiwi, entre algunos más.
En el año 2019 derivado de las propias características de la contingencia de COVID-

19 tuvieron un impacto que fue la disminución de ingresos (73.8%), seguido de una
baja en la demanda (50.2%) y la escasez de insumos (29.2%). Además, la empresa
2
tuvo que acatarse a cierres temporales o paros técnicos en un 16.6% del año, debido
a la situación en la que nos encontramos y el giro tan radical ante todo el mundo.
1.2. Caracterización del área
Nombre de la empresa: Dulcería “Candy Sweet”

Giro: Vender mercancía detallada al cliente por medio del sistema que se pretende
desarrollar, es decir, el cliente agregara a su carrito de compras la mercancía
deseada por unidad o cantidades en grandes y así poder generar un margen de
ganancia mayor al esperado en la venta final al cliente.
Responsable de área: Ing. Nathalie Parra Godínez
Características del área: El área a la que se desea implementar el sistema web es
donde se reciben los pedidos realizados por un cliente, donde el empleado es
encargado de acomodar dicho pedido y este sea recogido en tienda por el cliente.
Organigrama:
Figura 1. Organigrama del área. Fuente: Elaboración propia .

Ubicación: Av. Melchor Ocampo Tepeji del rio, Calle reforma s/n, 42850
3
Figura 2. Ubicación de la empresa. Fuente: Google Maps.
1.3. Problemática
Debido al crecimiento y demanda de ventas en la dulcería “Candy Sweet” se ha

generado una gran problemática con la que ya cuenta, el principal problema es
cuando el cliente tiene pérdida de tiempo excesiva a causa de ir a realizar la compra
de sus productos en la tienda física, ocasionando que los clientes se formen para
hacer filas largas en caja con el fin de realizar la compra.
Debido a lo mencionado anteriormente el servicio de “Candy Sweet” se ve afectado

y por consecuencia lo hacer ser bastante deficiente para muchos clientes. Por lo
tanto, si los clientes no cuentan con un servicio eficiente donde no pierdan tanto
tiempo haciendo sus compras y filas largas, el margen ventas de nuestros productos
se vería afectada en gran manera.
Además, con el margen tan alto de ventas que tiene la dulcería “Candy Sweet”, no
se lleva un control exacto en almacén, ocasionado que rara vez los clientes no
encuentren algún producto deseado y esto es una perdida tanto de venta como de
una buena recomendación del cliente hacia la empresa, ocasionado que mas
personas no asistan a comprar sus productos nuestro establecimiento.
El personal de “Candy Sweet” ya cuenta con un punto de ventas en tienda física que
no está en la nube, donde los productos que el cliente elije son registrados a una
venta por medio de un código de barras, lamentablemente este software no cuenta
con soporte para la tienda en línea que la empresa desea implementar por tal motivo
no permite que el cliente realice sus pedidos.
4
Tomando en cuenta los aspectos mencionados tomaron la decisión de implementar
un sistema web que permita al cliente realizar pedidos de los productos que
seleccione y agregue a el carrito, además, a el administrador y personal de la
empresa tener un mejor control.
1.4. Justificación
La implementación del sistema de pedidos para dar solución a la problemática de

“Candy Sweet” en el que mostrará un catálogo de los productos en existencia dentro
de la sucursal, además el cliente será capaz de realizar sus pedidos virtualmente
evitando pérdida de tiempo amplia, nuestro sistema le permitirá el cliente agregar
una fecha específica de cuando recogerá el pedido con una seguridad máxima.
Las principales justificaciones del sistema web implementado son. Accesibilidad:

un sistema web de pedidos debe ser accesible desde cualquier lugar donde haya
una conexión a internet, lo que facilita el acceso a los clientes y a los proveedores.
Además, un sistema web de pedidos debe ser accesible las 24 horas del día, lo que
permite a los clientes realizar pedidos en cualquier momento que así lo desean.
El sistema debe contener escalabilidad que permitirá ofrecer a el sistema web de

pedidos crecer junto con el negocio a un más. A medida que el negocio crece y se
expande más, el sistema web de pedidos tiene que ser adaptado y actualizado para
satisfacer las necesidades cambiantes del negocio.
La seguridad en nuestro sistema web de pedidos debe estar diseñada con altas
medidas para proteger la información sensible de los clientes y de la empresa. Esto
para evitar el acceso a personal no autorizado a información sensible de los clientes
al igual que proteger la mercancía o productos de la empresa propia.
Nuestro sistema debe estar sujeto a mejorar la eficiencia del proceso de pedidos al
automatizar muchas de las tareas repetitivas. Por ejemplo, el sistema debe manejar
5
la facturación, la gestión de inventario y el seguimiento de los pedidos de manera
automática, lo que reducirá la carga de trabajo para los trabajadores.
Permitirá a los proveedores tomar decisiones informadas sobre cómo mejorar sus
productos y servicios. En resumen, la eficiencia del proceso de pedidos,
proporcionar información valiosa sobre el comportamiento de los clientes al navegar
en nuestro sistema web de pedidos para la dulcería “Candy Sweet”, y mejorar la
seguridad de cada uno de los clientes.
1.5. Objetivo
implementar un sistema web de pedidos online para la Dulcería “Candy Sweet”.
1.5.1. Objetivos específicos
El proyecto que se va a desarrollar tiene como objetivos específicos los siguientes:

• Analizar la problemática con la que cuenta “Candy Sweet”.
• Realizar el análisis y diseño que se utilizara “Casos de uso, diagramas, etc.”,
dando solución a la problemática.
• Desarrollar el modelado de la base de datos que se utilizara.
• Desarrollar el fron-end para la parte administrativa y también para la parte
del cliente.
• Realizar toda la programación necesaria.
• Implementar algunas librerías en nuestra programación para poder obtener
la facturar el pedido.
• Notificara a el administrador sobre los pedidos.
• Alojar el sistema en hosting para que podamos tener un dominio y nuestro
sitio cuente con seguridad y eficiencia al momento de que nuestro cliente
decida visitarlo.
1.6. Alcances
El sistema que se desarrollara está enfocado a el área de ventas de la Dulcería

“Candy Sweet”, con el fin de brindar un servicio más eficiente.
• El sistema contará con una parte para administradores, donde le permitirá
ingresar, editar, actualizar y eliminar de su catálogo los productos.
6
• Permitirá al cliente realizar pedidos de productos agregándolos a un carrito
de compras, donde la facturación y entrega de este será en tienda físicas.
• El sistema del lado del administrador tendrá un apartado donde podrá
visualizar todos los pedidos pendientes.
• Tendrá la opción de eliminar de la lista los pedidos ya surtidos exitosamente.
• Estará diseñado para realizar los pedidos en cualquier hora del día ósea que
estará disponible las 24hrs del día para el cliente.
• Al realizar el pedido el sistema le dará una factura con la descripción de sus
productos, total de pago y la fecha que el mismo agrego para recogerlo.
• Una vez alojado en nuestro hosting contara por parte de nuestros
proveedores con seguridad con la información tanto de la empresa como de
los clientes.
1.7. Limites
El proyecto como limites tendrá:

• El llenado de base de datos estará a cargo del personal correspondiente de
la empresa.
• El catálogo de productos deberá ser llenado por el personal de la empresa.
• no se le aran notificaciones a el usuario de cuando su pedido esté listo para
su entrega.
1.8. Estudio de factibilidad
Un estudio de factibilidad es de suma importancia porque en él se pueden analizar

los distintos factores con los que el proyecto puede ser rentable y no represente una
perdida ante un supuesto que no hallamos analizado, con lo que el estudio de
factibilidad nos permitirá ver si el proyecto es factible para realizarse en los aspectos,
técnicos, operativos y económicos y con el poder tomar una decisión más acertada
para llevar el proyecto acabo o no.
1.8.1. Factibilidad técnica
7
Para realizar nuestro sistema se realizaremos una evaluación a el componente
técnico que posee la empresa, con lo cual se requiere que este ordenador cumpla
con las características adecuadas para su correcto funcionamiento del sistema que
se desea implementar.
Tabla 1 . Características técnicas. Fuente: Elaboración propia
Características del ordenador
1 Pc: Lenovo ThinkPad
2 Sistema operativo: Windows 10 pro
3 Procesador: Intel(R) Core (TM) i5-6300U CPU @ 2.40GHz

2.50 GHz
4 Memoria RAM: 8.00 GB
5 Tipo de sistema: Sistema operativo de 64 bits, procesador

x64
También llevaremos a cabo la evaluación de softwares con los que desarrollaremos

la implementación de nuestro sistema web, esto con el fin de que cada uno de ellos
este actualizado en cuanto a versiones y la empresa nos permita hacer uso de ello
y no tengamos problemas algunos durante la implementación.
Tabla 2 . Características de software. Fuente: Elaboración propia
Características de software
1 Framework de Laravel que está basado en PHP nativo
2 Versión: 4.4.1
3 Editor de código: Visual Studio Code
4 Versión: 1.76.1
5 Herramienta Composer
8
6 Versión: 2.5.4
7 Gestor de base de datos: MySQL
8 Servidor local: XAMPP
9 Versión: 3.3.0
10 Administrador de base de datos: Navicat
11 Versión: 15.0.26
1.8.2. Factibilidad económica
Para el desarrollo de nuestro sistema de pedidos online de la dulcería “Candy

Sweet”, no fue necesario adquirir la adquisición de alguna licencia o software, ya
que la empresa ya lo había adquirido anteriormente. Por lo que no tenemos ningún
problema para el desarrollo de nuestro software.
Tabla 3. Factibilidad económica. Fuente: Elaboración propia

Necesidad Costo Observaciones
Pc Lenovo $10,000 MNX La empresa ya

ThinkPad T460 cuenta con ella.
Navicat $30,000 MNX Es una licencia de

tiempo indefinido
con la cual la
empresa ya cuenta
Composer $0.0 MNX Es un Manejador de

paquetes libre y se
cuenta con él.
XAMPP $0.0 MNX Es una compilación

de software libre y
la empresa ya
cuenta con el
9
Framework $0.0 MNX Es gratuito y de
Laravel código abierto, la
empresa ya cuenta
con él.
Hosting y $1,626.73 Se rentaría un

dominio MXN anuales hosting que más
aproximadamente convenga y los
pagos serian
mayormente
anuales.
Horas de La hora Es el trabajo del

programación actualmente programador a él
programando desarrollar la
tiene un costo de aplicación, durante
$83.00 MXN. el tiempo
determinado.
Visual Studio $0.0 MNX Es gratuito y de

Code código abierto, la
empresa ya cuenta
con el.
MYSQL $0.0 MNX Es gratuito y de

código abierto, la
empresa ya cuenta
con él.
1.8.3. Factibilidad operativa
Nuestro sistema está basado en la UX/U, con el fin de que cualquier usuario según
su rol le sea difícil interactuar con el sistema, es bastante intuitivo el cliente con tan
solo algún clic podrá elegir los productos para agregarlos a el carrito de compras.
Mientras que el administrador de igual manera le será muy fácil familiarizarse con el
sistema por ser tan intuitivo. El personal no requiere de capacitación amplia. Aun
así, el personal contara con el manual de usuario y técnico si por si lo desea utilizar.
10
1.8.4. Factibilidad legal
Para la empresa “Candy Sweet”, el aspecto legal en el desarrollo del sistema de

pedidos es una prioridad por lo que cuenta con las licencias necesarias para no
violar las leyes federales o estatales, por lo que nos facilita en gran manera poder
llevar a cabo el desarrollo de nuestro sistema de pedidos. Además, cabe mencionar
que algunas herramientas utilizadas para completar el desarrollo con libres.
La empresa cuenta con las licencias de nuestros softwares que utilizaremos para la
implementación de nuestro sistema. Navicat se rige bajo distintos tipos de licencias,
como individual, de equipo, sitio y desarrollar. La empresa cuenta con la licencia tipo
desarrollador, por lo que fue pagada por una única tarifa por ende este tiene derecho
a utilizarla de forma perpetua y esto incluye también actualizaciones gratitas por un
año.
Los distintos softwares que utilizamos la mayoría son de código gratuito y libre, con
los que la empresa ya cuenta, en la tabla (4) podemos observar la descripción,
nombre y el tipo de licencia con la que se rigen. de cada uno de estos softwares que
utilizamos.
Tabla 4. Tipo de licencia de software. Fuente: Elaboración propia.

Nombre del Descripción Tipo de licencia con
software
Visual Studio Code es un editor de se rige bajo una
código gratuito y licencia MIT, es
abierto decir, permite a los
Composer es una herramienta usuarios copiar,
de gestión de modificar y distribuir
dependencias para el software con fines
proyectos PHP comerciales y no
Xammp es un paquete de comerciales, todo
software libre esto siempre y
MYSQL Es un sistema de cuando se incluya
gestión de base de una copia de la
datos. misma licencia y se
11
Framework laravel Es Framework respeten las
basado en php condiciones de
nativo dicha licencia.
TEMA II. FUNDAMENTO TEÓRICO
Durante el desarrollo e implementación del sistema web empleamos términos,

conceptos, metodologías, entre otras cosas, que nos son de gran ayuda. Como
sabemos las tecnologías han evolucionado en gran manera, junto a ello los negocios
también y esto ha traído gran impacto en la sociedad, como lo es el comercio
electrónico (e-commerce) que es el negocio de compras y bienes atreves de
internet.
Oracle (2018) afirma que el objetivo de la mayoría de empresas utilizando la

modalidad e-commerce es permitir que el cliente compre lo que desea, cuando
quiera, desde donde sea y con cualquier dispositivo digital. Es por ello que las
tiendas en línea siempre deben estar disponibles para el cliente, además, un estudio
revelo que las personas cuando compran la línea compran más de lo necesario.
Hoy en día las tecnologías para el desarrollo web están en constantes cambios y lo
que hoy se busca es ofrecerles a los clientes paginas interactivas a través de
diseños atractivos para ello existen las metodologías IU Desing y UX Desing se basa
en la experiencia, el diseño y estilos que le ofrecemos a el cliente durante su
navegación en el sistema web, por lo que Krug (2001) nos dicen que una página
web debe tener una jerarquía visual clara para poder retener la atención del cliente
o usuario.
El patrón Modelo Vista Controlador tiene "El propósito de simplificar la

implementación de aplicaciones de acuerdo a las peticiones de los usuarios y los
datos a desplegar" (Harrop, 2005). Por lo que nos permite observar la parte lógica
o back-end, para ello tendremos una base de datos administrada por navicat y como
servidor local xammp que ejecutara nuestras pruebas y como editor de código visual
studio code.
12
Los servidores http son quienes distribuyen el contenido web en redes internas o en
internet, esto se logra mediante algún proveedor que se dedica a el alojamiento web
o bien la renta de hosting por lo que se deben considerar todos los planes de renta
que este proveedor tiene y todas las características de este plan para evaluar cual
es la mejor opción y así tener el sistema en la web.
2.1. Hosting
Para que el sitio pueda ser visualizado en la web por todo público en general es
necesario contar con un hosting que es un servicio digital que tiene como función
almacenar la información y contenido de los sitios web en centros de datos seguros
y veloces. Para poder ello se necesita buscar opciones de proveedores de este
servicio, cada uno de los proveedores cuenta con distintos planes de contratación
buscando que el cliente encuentre el mejor que se acople a sus recursos económico
e infraestructura y soporte que deseen. Quintero (2022), nos afirma que se necesita
tener en cuenta las siguientes características para definir un buen hosting.
• Tiempo de actividad. Se debe considerar que el proveedor brinde casi o un 100%

de tener una página web sin interrupciones y disponibilidad en cualquier
momento que el cliente decida utilizar la web, esto nos asegurara un buen
posicionamiento en buscadores (SEO) y los clientes tengan una buena
experiencia.
• Velocidad y rendimiento. Esta es la caracteriza más importante que se debe

considerar, ya que esto afecta directamente a la experiencia del cliente durante
su navegación. Cada petición debe ser en promedio de 2 segundos si esto tarda
más se corre con el riesgo de que el cliente abandone la web por ser deficiente
en la velocidad.
• Seguridad. La seguridad es un aspecto muy importante en cualquier web en

especial si tenemos necesidad de recolectar información de los clientes. El
hosting por el que optemos adquirir debe ofrecernos medidas de seguridad
solidad, como SSL, protección contra ataques DDos y copias de seguridad
regulares.
13
• Soporte técnico. Es importante tener en cuenta que el sitio web puede tener
problemas, por lo que estes proveedor debe brindarnos soporte técnico las 24hrs
del día para solucionar de inmediatamente nuestro problema sin necesidad de
esperar un horario y que sea de día para poder ser atendidos por los técnicos.
• Costo de renta. Finalmente, el precio del plan que se elija debe ser accesible
para la empresa, ya que será una cuota que se pagara cada mes, por eso debes
elegir el plan correctamente y si conviene ser el pago anual, por cierta cantidad
de años o por meses.
2.2. Dominio
Una vez teniendo el hosting elegido, también debemos considerar el dominio (DNS)
que es el nombre o dirección única con el cual se identifica al sitio web en la red, en
realidad este nombre o dominio está asociado a una dirección ip numérica que
identifica la ubicación del servidor que provee a el sitio. Para elegir el nombre del
dominio se debe considerar que el nombre sea fácil de recordar y teclear por las
personas que acceden a el sitio, como señala Martínez (2022), utilizar una palabra
clave como parte del dominio que se utilice en la web es una poderosa estrategia
de posicionamiento SEO.
Además, existen diferentes tipos de extensiones (TLD) que puede tener el dominio
como lo es .com, org, .net, .edu, entre otras, que nos indican a el tipo de
organización o actividad asociada al sitio web. El registro del dominio debe ser por
medio de un proveedor que remita la solicitud a la autoridad competente, ya que
este debe pasar por NIC México que es quien asigna y administra los dominios
territoriales si la web a si lo necesita. Muchas veces los mismos proveedores de
hosting ofrecen el dominio incluido en los planes de renta y esto facilita y ahorra
tiempo. Si se desea compra un dominio independiente a él hosting el pago es anual
y va de 1 a 10 años con ese dominio adquirido.
2.3. SEO
El posicionamiento SEO es el conjunto de técnicas y estrategias que se emplean

para optimizar forma natural ósea no pagado en los primeros resultados de las
14
búsquedas que se realizan en motores de búsqueda como Google a el sitio web,
generalmente esto se logra con el uso de palabras claves. Empleando las palabras
de Levy (2022), el SEO no es más que un proceso que permite a los buscadores
identificar la mejor información que hay disponible en internet para una búsqueda
determinada. Estas técnicas se clasifican básicamente en dos categorías: SEO on
page y SEO off page.
• El SEO on page son las técnicas que puedes aplicar dentro del propio sitio
web, desde su diseño, optimización de imágenes, indexación de contenido
y texto, hasta los metadatos y otros.
• El SEO off page se refiere, en cambio, a todas las estrategias que puedes
llevar a cabo fuera de la página web para mejorar el posicionamiento, y eso
incluye, enlaces externos, publicaciones en las redes sociales y otros
métodos.
2.4. Base de datos
Las bases de datos son un elemento fundamental en el desarrollo de un sitio web

dinámico, ya que es quien almacena y gestiona la información del sitio. Las bases
de datos utilizadas en un proyecto web en la mayoría de casos en de modalidad
relacional lo que se estructura por medio de tablas que establecen una relación a
través de datos por medio de identificadores (calves primarias y foráneas). Jonhson,
(2000), señala que este modelo utiliza una estructura particularmente sencilla
cuando se compara con sus predecesores de red y jerárquicos.
La gestión y manipulación de datos se realiza por general por medio de lenguaje

para bases de datos SQL, MYSQL, entre otros. Esto nos permite interactuar con la
base de datos para realizar diversas operaciones, como inserción de datos, creación
de tablas, consulta de datos a una tabla, actualización de datos a unas tablas, unión
de tablas, ordenamiento de resultados, entre otros.
Además, también es necesario contar herramientas de administración de base de

datos, como Navicat que proporciona una interfaz gráfica de usuario (GUI) para
trabajar con distintos sistemas de gestión de base de datos como lo son Oracle, MySQL,
15
MariaDB, SQLite, PostgreSQL, SQL Server, entre otros. Lo que permite a los
usuarios poder conectarse y administrar diferentes tipos de bases de datos desde
una única herramienta. Algunas características de esta herramienta son:
• Interfaz gráfica intuitiva: es amigable con los usuarios que apenas

comienzan a utilizar esta herramienta gracias a su interfaz, lo que tiene como
objetivo la administración y manipulación de la base de datos sea muy fácil.
• Importación y exportación de datos: permite importar y exportar datos desde

y hacia diferentes formatos, haciendo más fácil la migración de datos para
distintos sistemas, además, permite realizar los Dump que es importar tu
base de datos una nueva conexión o BD que se utiliza.
• Generación de consultas y consultas visuales: ofrecen una interfaz visual

para construir consultas SQL y ejecutarlas, lo que facilita la creación y
ejecución de consultas complejas, por medio de particiones, aislamiento de
inner joins entre otros.
• Sincronización de datos y estructura: permite sincronizar datos y estructura

entre diferentes bases de datos, facilitando la administración y gestión de
base de datos distribuidas o de desarrollo, como la conexión desde un
hosting y el usuario pueda acceder desde cualquier lugar a esta teniendo los
datos base como contraseña, usuario y puerto.
2.5. XAMMP
Es una herramienta que está diseñada para entornos de prueba y desarrollo local,
lo que permite desarrollar aplicaciones web sin necesidad de tener una conexión a
internet o utilizar un servidor remoto. Xammp por defecto al realizar su instalación
crea un servidor web, un sistema de gestión de base de datos (MySQL), un lenguaje
interprete de código abierto y libre (PHP) y otro lenguaje de programación que no
16
es muy común de estos componentes surge su nombre. Algunas características de
esta herramienta son:
• Configuración rápida: La herramienta proporciona una instalación y

configuración rápida y sencilla de Apache, MySQL y PHP, lo que facilita a
los usuarios la puesta en marcha a el entorno de desarrollo web.
• Gestión de base de datos: Xammp incluye phpMyAdmin, una herramienta

web que permite la gestión y manipulación de bases de dataos MySQL de
forma visual. phpMyAdmin nos permite modificar, crear y eliminar bases de
datos, tablas, registros y ejecutar consultas SQL.
• Servidor local: Xammp permite ejecutar y probar sitios web y aplicaciones

PHP de formal local sin la necesidad de tener conexión a internet, lo que es
de gran ayuda para probar una aplicación antes de ser puesta en producción,
esto se logra poniendo el proyecto en una carpeta del mismo Xammp
llamada htdocs.
2.6. Laravel
Laravel se ha convertido en uno de los frameworks de PHP más populares y

respetados, gracias a su elegante sintaxis, su rica funcionalidad y su activa
comunidad de desarrollo (Cui y otros, 2009). Es un framework para el desarrollo web
de código abierto desarrollado en PHP, laravel proporciona una estructura y
conjunto de herramientas para simplificar y acelerar el proceso de aplicaciones web.
Lavarel cuenta con una estructura como la mayoría de frameworks PHP, estructura
basada en el estándar MVC. Es un patrón de arquitectura que divide la aplicación
en tres capas M de model que representa la capa de la base de datos, V de view
que representa la capa de presentación que es visible para los clientes o usuarios y
C de controller, que representa la regla del negocio.
Laravel cuenta con una comunidad activa y un ecosistema robusto de paquetes y

complementos que amplían sus funcionalidades. Permite integrar paqueterías
17
disponibles que se integran fácilmente en la aplicación web eso añade
características adicionales como laravel Passport, que proporciona una
implementación de servidor de autorización OAuth2, esto facilita la autenticación y
la generación de tokens de acceso para la construcción de Api’s seguras.
Por defecto laravel proporciona la autenticación y autorización de usuarios, es decir,

nos proporciona un inicio de sesión, registro para obtener un usuario y contraseña,
restablecimiento de contraseñas y definir diferentes niveles de acceso y permisos
para los usuarios, estos datos que el usuario ingresa son encriptados en nuestra
BD. Esto se integra con solo algunas configuraciones a el proyecto.
Además, laravel tiene un sistema de migración que permite manejar los cambios en
la estructura de la base de datos de manera controlada y versionada por ello,
simplifica la tarea de mantener actualizada la base de datos en diferentes entornos
y permite colaborar con otros desarrolladores. Esto se logra por medio de un
comando creando cada tabla o por medio de paqueterías.
2.7. UX Design
El diseño de experiencia de usuario se refiere al proceso de diseñar sitios web,

aplicaciones móviles y softwares, centralizándose en la satisfacción del usuario y la
mejora en la experiencia. Su principal objetivo es tener como resultado un sitio
intuitivo, eficiente, accesible y agradable de usar para los usuarios finales. Esta
metodología según Arias, O. (1999), es de tipo analítica, documental, de campo y
cualitativa.
El UX Design requiere comprender las necesidades, metas y características de los

usuarios para así diseñar soluciones centralizadas a ellos. Esto se logra a través de
técnicas como herramientas de recolección de información. Donde se obtengan
requerimientos de una sola idea, claros, generales y verificables para darles un buen
uso y de manera correcta.
Además, el UX Desing organiza y estructura la información de manera clara y

coherente para facilitar la navegación y la compresión. Esto implica la creación de
18
jerarquías de contenido, diagramas de flujo. Con lo anterior se crea el diseño de
interacción lo que implica el diseño de elementos como botones, menús, sistemas
de navegación y campos de entrada.
UX Desing crea estática visual atractiva y coherente que refleje la identidad de la

marca y mejore la experiencia del usuario. Esto incluye la elección de colores según
lo que la empresa represente, tipografías, optimización de imágenes y la creación
de elementos visuales como iconos, alertas, gráficos que ayudan a la jerarquía
visual.
2.8. IU Desing
El diseño de interfaz de usuario (UI) se refiere a la creación visual y estética de la

interfaz de un producto digital como sitios web, aplicaciones móviles o un software.
Se refiere a las interfaces gráficas de usuario y otras formas, por ejemplo, interfaces
controladas por voz. El objetivo principal es crear experiencia visual atractiva y
agradable, así como la interacción y comprensión de la interfaz por el usuario final.
En las interfaces de usuario hay tres formatos. Interfaces gráficas de usuario

(GUI): los usuarios interactúan con representaciones visuales en paneles de control
digitales. El escritorio de una computadora es una GUI. Interfaces controladas por
voz (VUI): los usuarios interactúan con ellas a través de sus voces. La mayoría de
los asistentes inteligentes, por ejemplo, Siri en el iPhone y Alexa en los dispositivos
de Amazon, son VUI. Interfaces basadas en gestos: los usuarios interactúan con
espacios de diseño 3D a través de movimientos corporales: por ejemplo,
en juegos de realidad virtual (VR).
Los usuarios son humanos, con necesidades como la comodidad y un límite en sus
capacidades mentales (interaction-design, 2023). La técnica IU Desing tiene
muchos aspectos claves e importantes para tener un buen diseño de interfaz para
que el usuario final la vea atractiva, agradable y fácil de usar.
2.9. HTML
19
Es un lenguaje de marcas de hipertexto utilizado para para crear la estructura y
contenido de sitios web incluyendo texto, imágenes, enlaces, formularios y otros
elementos interactivos. De acuerdo con Pérez, (2008) HTML y CSS son como los
bloques de construcción de la web. Comprender sus partes buenas es esencial para
crear sitios web efectivos y eficientes.
Las páginas HTML están compuestas por elementos, se definen mediante etiquetas.
Cada etiqueta tiene un nombre y puede tener atributos que proporcionan
información adicional sobre el elemento. Algunas etiquetas tienen una etiqueta de
apertura y una de cierre, mientras que otras solo se escriben como etiquetas auto-
cerradas.
El lenguaje HTML pretende continuamente proporcionar funcionalidades más

avanzadas para crear páginas más ricas en contenido. Etiquetas comunes de html:
<HTML> </HTML>. Definen el comienzo y el final del documento html. Head:
<head> </head>. Contiene la información meta sobre el documento, como título de
la página, enlaces a hojas de estilos CSS. Body: <body></body>. Contiene el
contenido visible de las páginas web.
2.10. CSS
Las Hojas de Estilo en Cascada (CSS), es un lenguaje de hojas de estilos creado

para para describir la presentación y el diseño visual de un documento html u otro
tipo de documento XML. Se utiliza para aplicar estilos a los elementos html y
controlar su apariencia en páginas web. CSS es fundamental en el desarrollo web
moderno, ya que mejora la experiencia del usuario en el sitio web.
Con CSS permite definir propiedades como color, la fuente, el tamaño, el espacio,
el diseño de cajas, la posición y muchas más características de los elementos
HTML. Estas propiedades se aplican a través de regalas de estilos que se escriben
en un archivo CSS o directamente en el HTML para tener un orden más apropiado
durante el desarrollo html lo más coherentes es separar los estilos.
Las propiedades de css definen como se verán los elementos seleccionados. Las
más comunes incluyen color, fuente, tamaño del texto, margen fondo, posición y
relleno. Cada una de estas tienen valores que determinan como se aplicaran, los
20
colores tienen valor con códigos hexadecimales como “#FFOOOO”. Los tamaños
pueden ser definidos por pixeles, porcentajes o unidades relativas.
2.11. Colores
Los colores en una página web al igual que los botones, imágenes, eventos, entre
otros son muy importantes y hacen a las interfaces más intuitiva y atractiva para el
usuario final. Existe la metodología que realiza el análisis comportamental la cual
hace posible gestionar el capital humano de las organizaciones o empresas. Cada
color provoca en las personas sensaciones determinadas y esto asociado a distintas
emociones, por lo que éste influye de manera determinante en cómo se sienten y
comportan los usuarios en la web.
La elección de los colores para el sitio web ayuda a reflejar correctamente quién es
y cuál es la filosofía de la empresa, los valores que se pretenden transmitir y las
sensaciones que se desean provocar al público que tenemos como objetivo
dirigirnos, en la figura (3) se muestran los colores que principalmente trasmiten
emociones.
Figura 3. Emociones y conceptos de cada color. Fuente: García
Un sitio web con muchos colores es confusa, pierde la coherencia y distrae al

usuario evitando que se fije en los elementos más importantes. Es recomendable
utilizar un color que resalte del resto con ello se consigue que la vista del usuario se
ponga ahí irremediablemente. Cada interfaz de la web debe tener un único objetivo
21
principal y por tanto ahí es donde se debe poner el punto diferente. Como norma
general se recomienda usar uno o dos colores neutros que sirvan para separar
espacios y crear divisiones, después se debe elegir uno o dos colores más
llamativos para atraer la atención del usuario final cuando se considere necesario.
Cuanto más saturados y brillantes sean los colores más llamativos serán.
Figura 4. Saturación de colores . Fuente: García
22
TEMA III. CONCEPCIÓN DEL PROYECTO
3.1. Recolección de información.
En nuestro sistema de pedidos a desarrollar para “Candy Sweet” es muy importante

la recolección de información para tener un panorama más amplio sobre cada
departamento, obteniendo de esto mejores resultados para una mejor toma de
decisiones en cuanto a cada necesidad en el sistema para “Candy Sweet”. Para ello
elaboraremos un cuestionario con preguntas abiertas y cerradas que nos permitirá
profundizar en el tema (ver anexo 1). Con esta encuesta desarrollada tendremos
como resultado una efectividad muy alta y buenos resultados reflejados.
3.2. Modelado Funcional
Actualmente la empresa “Candy Sweet” no cuenta con un sistema de pedidos para

el cliente, por tal razón los clientes visitan la tienda física y para realizar la compra
de sus productos se realiza una serie de procesos. Para ello realizamos un diagrama
donde representa cada uno de estos procesos que nos dan a conocer cada acción
que el cliente y el vendedor realizan.
Visitar la tienda, el cliente debe visitar la tienda física. Elije cada uno producto que
desea comprar. Analiza si comprar el producto o no, si no desea comprar el producto
pues regresa a casa. Pero si desea compra el producto debe dirigirse y esperar su
turno caja. El vendedor hace la venta del o los productos. El cliente paga los
productos. El vendedor entrega factura. Termina el proceso (ver anexo 2).
3.3. Determinación de requisitos funcionales
En los requerimientos funcionales detallamos cada función y característica que

nuestro sistema debe cumplir.
• Consulta de categorías
23
Justificación: Búsqueda de productos por clasificación como: Botanas,
caramelos, chicles, chocolates, dulces con juguetes, gomitas, malvaviscos,
paletas, pulpas, mazapanes, dulce típicos y frutas deshidratadas.
• Consultar los detalles producto

Justificación: Información detallada del producto como precio, cantidad de
piezas que trae el empaquetado, sabores si es que lo amerita, peso total del
empaquetado, los ingredientes de dicho producto y una breve descripción
general.
• Añadir productos a el carrito

Justificación: El cliente tendrá oportunidad de añadir la cantidad de
productos de “Candy Sweet” a el carrito que tendrá la página.
• Eliminar productos a el carrito

Justificación: el cliente tendrá la oportunidad de eliminar lo que ya no le sea
útil.
El sistema por defecto inactivara los productos que estén agotados en
almacenamiento, al cliente le mostrara una pequeña venta indicándole que
el producto se encuentra agotado por el momento
• Añadir y eliminar categorías

Justificación: el administrador a través de un formulario podrá introducir
categorías nuevas, eliminar o desactivar las que ya nos estén en disponibles
o agotadas.
• Modificar la cantidad en el carrito

Justificación: El cliente puede cambiar la cantidad de productos que desea
comprar, eliminando o agregando.
• Búsqueda de productos
24
Justificación: El cliente podrá hacer búsqueda de los productos de su
preferencia, mediante una barra de búsqueda que con solo teclear
referencias sobre el producto que desea comprar este le arroje todos los
resultados referentes a lo tecleado.
• Comprobante de sus pedidos

Justificación: se le proporcionara al cliente una hoja con la descripción
completa de su pedido realizado.
• Confirmación de pedido
Justificación: Notificar el estado de un pedido (Realizándose, enviado y
entregado) notificando a través de ele correo electrónico dado por el cliente
en su registro.
• Registro de datos del cliente este debe ser guardado para nuevos
pedidos que desee realizar
Justificación: Se registrará el nombre de usuario, número telefónico,
dirección y correo electrónico, esto permitirá garantizar el proceso de con
éxito de su pedido.
• El sistema controlará el acceso y lo permitirá solamente a usuarios

autorizados
Justificación: Los usuarios deben ingresar al sistema con un nombre de
usuario y contraseña.
Tendrá una parte de administrativos y una de clientes.
• El sistema enviará una alerta

Justificación: Sera enviada una alerta al administrador del sistema cuando
ocurra alguno de los siguientes eventos: Registro de nueva cuenta, ingreso
al sistema por parte del cliente, 2 o más intentos fallidos en el ingreso de la
contraseña de usuario y cambio de contraseña de usuario.
• Acceso a personal autorizado
25
Justificación: El sistema permitirá a los usuarios autorizados el ingresar
planes y cronogramas de proyecto.
• El sistema notificara las órdenes de pedido directamente al almacén

Justificación: el pedido llegará a el sistema por medio de una pantalla de
pedidos pendientes, la cual mostrará los pedidos no realizados aún. Una vez
realizado el pedido se mostrarán en esta lista de pedidos realizados.
3.4. Determinación de requisitos funcionales
Estas son las características de nuestro sistema que no se relacionan directamente

con las funciones de este mismo.
• Toda funcionalidad del sistema debe responder al usuario en menos de 5

segundos.
• La tienda debe ser capaz de procesar N pedidos por segundo
• El sistema debe ser capaz de operar adecuadamente con 100.000 usuarios
con sesiones con concurrentes.
• La tienda virtual de pedidos debe poseer un diseño responsive a fin de
garantiza la adecuada visualización en múltiples computadores, tableta y
teléfonos.
• La tienda virtual debe poseer una interfaz gráfica bien diseñada.
• La tienda de pedidos debe tener seguridad para proteger la información del
usuario teniendo privacidad y encripta miento de datos desde la
autenticación de usuario.
• La tienda virtual debe tener una posibilidad del 99,99% de las veces que el
usuario intente accederlo.
• La probabilidad de faltas del sistema no podrá ser mayor a 0,05.
3.5. Arquitectura de la aplicación
En este sistema de pedidos para “Candy Sweet” utilizaremos la arquitectura cliente-

servidor, donde las tareas serán repartidas entre el servidor y el cliente. El cliente
26
es quien realizará las peticiones como agregar a nuestro carrito, o hacer el pedido
que el cliente desee, o visualizar nuestro catálogo de productos que tenemos en
nuestra base de datos, en cambio el servidor será quien pide los datos a nuestra
base de datos para mostrárnoslo al cliente.
3.6. Determinación del modelo de desarrollo y de la tecnología a

utilizar.
Para empezar a desarrollar cualquier sistema de información se tiene que empezar

por elegir el modelo de desarrollo que se adapte mejor a las necesidades para
estructurar, planear y controlar el proceso de desarrollo en el sistema. Para poder
lograr el objetivo de solucionar el problema en tiempos establecidos y que el sistema
sea funcional. Por tal motivo la tecnología que se utiliza durante este proceso es de
gran importancia, ya que facilita en gran medida el desarrollo del sistema.
3.6.1. Determinación del proceso de software
Para nuestro sistema ah implementar de pedidos para “Candy Sweet”, la mejor

metodología que podemos emplear es la de cascada, esta metodología nos permite
un orden en cada fase y no podemos seguir con otra fase sin antes haber terminado
con la que se está trabajando de ahí el nombre de cascada. L ventaja de utilizar esta
metodología es que nos permite tener un mejor orden, una estructura clara y fácil
de comprendes para el equipo de desarrollo y para el cliente.
Además, esta metodología requiere de pruebas bastante exhaustivas en cada fase
del proyecto y esto nos garantiza que el software este siendo de alta calidad y
cumpla con los requerimientos antes documentados. También nos permite
enfocarnos en el resultado final del proyecto para que cumpla con las expectativas
de nuestro cliente.
3.6.2. Elección del Sistema Gestor de Base de Datos
27
En nuestro sistema de pedido para “Candy Sweet" utilizaremos Navicat como
nuestro sistema gestor de base de datos ya que permite simultanea conectividad
con Oracle, MySQL, MariaDB, SQLite, PostgreSQL, SQL Server y sus
características son lo suficientemente sofisticadas para satisfacer todas nuestras
necesidades en tareas complejas de realiza.
3.6.3. Elección del lenguaje de programación
Para nuestro sistema utilizaremos laravel que es un Fragmework basado en php

nativo, que nos permite una mejor organización y control de todo el código
elaborado, acelerar el proceso de desarrollo de aplicaciones web con un gran gusto
por la simplicidad y está basado en modelo vista controlador, lo que nos permite
trabajar de manera muy sencilla con él, además, por defecto tiene incluido todo para
hacer un login del usuario y ser registrado a nuestra base de datos a la que está
conectada.
Además, integraremos código HTML, para el diseño de las páginas y agregar estilos
con CSS para darle una mejor visualización al sistema y la extensión de los archivos
serán “.php, .blade.php y .ven.” En la extensión “.ven” tendremos la conexión de
nuestra base de datos, el “.php” es para poder escribir php nativo y el “.blade.php”
es para los archivos que vallamos creando nosotros mismos.
3.6.4. Determinación del dominio y servicio de publicación
Para la publicación y administración de servicio de nuestro sistema de pedidos

tendremos en cuenta a el proveedor “HostGator” ya que es una empresa dedicada
a ofrecer estos servicios desde el 2002 por lo que cuenta con todo lo necesario para
ayudar a todo tipo de personas ya sea novatos o profesionales. Sus herramientas
están diseñadas para ayudar a crecer junto con el cliente su negocio. Además,
actualmente cuenta con más de 2 millones de sitios web alojados. Cuenta con todo
tipo de planes para que el cliente elija el que más le convenga económicamente y
tenga soporte de por lo menos el 99.9%.
28
4. Determinación de las actividades (Gantt)
Para el desarrollo e implementación del sistema para “Candy Sweet” es necesario

tener en cuenta bien especificado tosas las actividades que se llevara a cabo, para
poder definir los tiempos que se tomaran en terminarlas y cumplir con las fechas de
entrega, por lo que es de gran ayuda contar con algún cronograma o en este caso
un diagrama de Gantt (ver anexo III) que nos permitirá identificar la relación de
trabajo-tiempo, de esta manera establecer metas de avance a corto y lago tiempo.
29
TEMA IV. PROCESO DE DESARROLLO DEL SOFTWARE
Para el desarrollo de este sistema vamos a emplear la metodología en cascada, por

ser un modelo que ordena las etapas de desarrollo, de tal manera que no se puede
iniciar en una etapa sin haber concluido la anterior, cabe mencionar que al finalizar
cada etapa se revisa la documentación para poder evaluar si el proyecto está listo
para poder avanzar a la siguiente etapa.
El modelo de cascada está dividido en cinco etapas comenzando con el análisis de

requerimientos. Consiste en reunir toda la información necesaria para conocer las
necesidades. Diseño, describe la estructura del producto o software y suele
presentarse con diagramas, especificando lo que se debe realizarse en cada una
de sus partes. Implementación, es la codificación del producto. Pruebas, se verifica
que las partes de codificación funcionen correctamente y debe cumplir los
requerimientos pedidos antes de ser entregado. Mantenimiento, el usuario final
trabaja con el sistema a fin de saber que todo funciona correctamente.
4.1. Diagramas de caso de uso
Una de las maneras de poder ejemplificar de forma entendible la interacción del

usuario con el sistema, es por medio de los diagramas de casos de uso esta es una
herramienta que nos permite identificar los requerimientos funcionales del sistema.
En este diagrama podemos observar que el actor principal es el administrador donde
tiene mayor control del sistema, por los privilegios únicos que se le otorgan y
además ser el único en modifica, agregar, insertar y guardar cambios en el sistema.
Sin embargo, el cliente cuenta con muy poco control en el sistema, solo puede
agregar productos a le carrito de compra y hacer el pedido.
30
Figura 5. Diagrama de casos de uso. Realización propia
Se comienza con un inicio de sección, el actor principal (Administrador) es quien ara

el registro del producto, cuando el cliente pague su pedido o venta el administrador
podrá visualizarlo, si el cliente aun no paga su factura en el sistema estará como
deudor, el administrador podrá visualizar a los clientes que se han registrado en
nuestro sistema, además, el administrador también podrá visualizar en una lista los
pedidos que estén pendientes.
31
Figura 6. Diagrama de casos de uso. Realización propia.
En este diagrama es una descripción general de lo que más hace un administrados

y nuestros clientes solo actúa visualizando el total de su pedido.
Figura 7. Diagrama de casos de uso. Elaboración propia.
El cliente en caso de aun no pagar factura pasa a ser deudor, por lo tanto, nuestro
sistema lo reconocerá como deudor y el administrador podrá visualizarlo de ser así.
El actor cliente podrá agregar los productos elegidos del catálogo a el carrito de
compra para hacer los demás procedimientos.
32
En este Diagrama podemos observar cómo nuestro actor principal (Administrador),
podrá visualizar la una lista los pedidos pendientes por entregarse, consultado la
factura del cliente e insertando la clave, y nuestro actor secundario (el cliente) para
la entrega de sus productos el mismo elegirá la fecha que le sea más conveniente,
el sistema le permitirá hacer esto, según el necesite su pedido.
En este diagrama nuestra como el actor principal (administrador) tiene los privilegios
de agregar marcas a los productos agregados a el catálogo, al igual que tendrá la
oportunidad de modificar la maraca agregada, eliminarla y poderla visualizada en
una tabla, también tendrá un status para saber si esta activa o no en caso de agotar
existencias de los productos que contengan dicha marca.
33
Figura 10. Diagrama caso de uso. Fuente: elaboración propia.
En este diagrama nuestra como el actor principal (administrador) tiene los privilegios
de agregar categorías a los productos agregados a el catálogo, al igual que tendrá
la oportunidad de modificar la categoría agregada, eliminarla y poderla visualizada
en una tabla, también tendrá un status para saber si esta activa o no en caso de
agotar existencias de los productos que contengan dichas categorías.
Figura 11. Diagrama de caso de uso. Fuente: Elaboración propia.
34
4.2. Diseño de interfaces,
La parte del diseño de interfaces se realiza con el fin de que le usuario final
comprendiera más el sistema y que no presente ningún inconveniente al momento
de interactuar con dicho sistema. Teniendo como objetivo que el usuario final realice
las funciones de manera interactiva, y esto nos dé un muy buen resultado en la
interacción de nuestro sistema y los usuarios.
Comenzamos creando un login donde por defecto al registrarse o si ya estas
registrado navegaras por nuestro sistema como un cliente, pero también tendremos
una parte administrativa donde los encargados solo tendrá acceso a muchos otros
privilegios que como cliente no los tendrán o no aparecerán durante su navegación,
como lo dijimos antes le cliente solo cuenta con muy pocos privilegios en el sistema.
Figura 12. Diseño de interfaces. Elaboración propia.
En caso de ser un usuario ya registrado en nuestro sistema podrá acceder por medio
de un login también donde solo le pedirá contraseña y usuario que ellos mismos
asignaron en su registro. Ya sea un administrativo o en todo caso un cliente.
Mediante esto tendremos el inicio de sección activado durante toda su navegación
dependiendo de su rol.
35
Figura 13. Diseño de pantallas. Elaboración propia.
Una vez iniciada la sesión siendo administrativo podremos agregar producto, en la

siguiente pantalla, llenado los campos como, nombre del producto, descripción,
marca, stock mínimo y máximo, contenido, cantidad de piezas, marca, categoría a
la que pertenece este producto, además una imagen refrenté a nuestro producto y
el precio de nuestro producto.
36
Para modificar nuestro producto tendremos la siguiente pantalla, donde nos
parecerán en las cajas de texto que llenamos al agregar el producto, pero ahora nos
dará la opción de cambiar el campo que nosotros deseemos, menos la id del
producto, ya que es la clave principal con la que se reconoce dicho producto. Y
tendremos un botón de guara el cambio.
Figura 15. Diseño de pantallas. Elaboración propia
Si deseamos eliminar algún producto nos aparecerá la lista de la siguiente

manera.
37
Para poder visualizar la lista de nuestros pedidos realizados por nuestros clientes,
tendremos la siguiente pantalla, donde nos mostrara los datos del cliente, pedido, la
descripción, en estatus, si está o no pagado, entre algunos campos más.
Entrado a nuestro sistema del lado del cliente tendremos acceso a nuestro catálogo
de ventas de esta manera.
38
De esta manera podremos observar los detalles bien de nuestros productos una vez
dando clic en la imagen del catálogo.
De esta manera se mostrará nuestro carrito de compras.
4.3. Diseño de base de datos
39
El modelo relacional representa los datos en forma de tablas y sus relaciones, para
la implementación el sistema para “Candy Sweet”, para la elaboración de nuestra
base de datos se tomó en cuenta estructura organizada y eficiente para poder
manejar cuidadosamente los datos de la empresa, tomando en cuenta cada uno de
sus atributos y relaciones entre sí.
Figura 21. Modelo relacional. Elaboración propia.
40
4.4. Diagrama de Entidad relación
Este modelo representa a la realidad a través de un esquema grafico empleado

terminología de entidades, que son objetos que existen y son los elementos
principales que se identifican en el problema a resolver con el diagramado y se
distinguen con otros por sus características particulares denominados atributos.
Entidad: Objeto que existe y se distingue de otros objetos de acuerdo a sus
características llamadas atributos. Atributo: Propiedad que describe a cada entidad
en conjunto de entidades. Relación: Asociación matemática entre varias entidades.
Figura 22. Diagrama E -R. Elaboración propia.
41
4.5. Diagrama de Navegación
Los diagramas de navegación son herramientas para plasmar la estructura de la

navegación del entorno, se crea partir del diseño de interfaces. Nos permite
representar la arquitectura del sistema de pedidos para “Candy Sweet”. Para la
representación de nuestro sistema emos desarrollado el diagrama de navegación.
Con el fin de hacer su navegación para el usuario final más sencilla.
Figura 23. Diagrama de navegación. Elaboración propia.
42
4.6. Diagrama secuencial
Los diagramas de secuencia muestran la secuencia de actividades en un proceso,

se utilizan para visualizar de manera clara y concisa el flujo de un proceso,
mostrando las etapas o acciones en orden secuencial. Para ello como acción
principal realizamos el registro de un nuevo usuario, mostrando cada uno de los
pasos en orden hasta llegar a la base de datos.
Figura 24. Registro de usuario. Fuente: Elaboración propia.
Diagrama donde se muestra el registro de un administrador pasa a paso hasta llegar

a que este registrado en nuestra base de datos.
43
Figura 25. Registro de administrativo. Fuente: Elaboración propia.
En este diagrama secuencial podemos observar como funciona el proceso de venta.
Figura 26. Registro de venta. Fuente: Elaboración propia.
44
4.7. Diccionario de datos
El diccionario de datos elaborado a continuación tiene como objetivo mostrarnos

más que nada para que nos sirve cada campo que nosotros pongamos en nuestro
diagrama de entidad, para ello se elabora una tabla en la que contiene el nombre
del campo, el tipo de dato, si es o primary key o forenkey y una breve descripción
para saber su función.
Tabla Producto. Tenemos todos los atributos de nuestro producto.
Tabla 5. Tabla productos. Elaboración propia
Nombre del campo Tipo/ Indice Descripción

Longitud
clave_producto varchar pk Id para reconocer nuestro

(25) producto
nombre_producto varchar Nombre de nuestro

(250) producto
descripcion_producto longtext Breve descripción de

nuestro producto en
general
precio_actual_producto double Precio de nuestro

producto
existencia_productos int(11) Existencia en almacén de

nuestro producto
stock_min_producto smallint(6) Cuantos productos

mínimos debe haber.
stock_max_producto int Cuantos productos

máximos debe haber.
45
id_marca int fk Nos muestra l marca del
producto
id_categoria tinyint fk Nos muestra la categoría

a la que pertenece el
producto.
imagen longblob Es una imagen referente

el producto.
Tabla Marca. Tenemos los atributos de nuestra marca la que pertenece nuestro
producto siendo esta una llave foránea en la tabla producto.
Tabla 6. Tabla marca. Elaboración propia.
Nombre del Tipo/ Indice Descripción

campo Longitud
id_marca int(11) Clave única con la que
reconocemos a la marca
nombre_marca varchar(100) Nombre de la maraca del

producto
status_marca int(11) Activa o no activa la marca
Tabla Categoría. Tiene los atributos necesarios de categorías a las que perteneces
los productos y es una llave foránea nuestra tabla de productos.

Longitud
id_categoria tinyint(3) pk Numero único de la
categoría.
nombre_categoria varchar(100) Nombre categoría
46
descripcion_categoria longtext Breve descripción de
la categoría.
status_categoria tinyint(1) Activa o no la

categoría.
Tabla 7. Tabla Categoría. Elaboración propia.
Tabla Detalle de categoría. Aquí damos algunas especificaciones de los detalles de

nuestra categoría.
Tabla 8. Tabla detalle de categoría. Elaboración propia.

Longitud
id_detallecategoria int(11) pk Clave única con la
que reconocemos
el detalle de
categoría
nombre_detallecategoria varchar(100) Nombre de la

maraca del
producto
id_categoria Tinyint(11) fk Activa o no activa

la marca
Tabla Detalle categoría detalle. Mostramos los detalles de la categoría, pero ya

siendo llave foránea en nuestro producto.
Tabla 9. Tabla detalle categoría detalle. Elaboración propia.

Longitud
id_caracdetalle_producto tinyint(3) pk Id con el que
identificamos
al detalle.
47
clave_producto varchar(25) fk Clave de
nuestro
producto
siendo clave
foránea en
esta tabla.
id_carcateristicas int(11) Identificador

de nuestras
características.
descripcion_caracteristicas longtext Breve

descripción de
nuestras
características.
Tabla Detalle de producto. Aquí encontraremos todos los detalles de nuestro

producto.
Tabla 10. Tabla Detalle de producto. Elaboración propia.

Longitud
id_detalles_producto int(11) pk Identificador de
manera
incrementable del
detalle de producto
clave_producto varchar(25) fk Clave primaria que

actúa como
foránea de nuestro
producto
nombre_detalleprod varchar(100) Nombre del detalle
descripcion_detalleprod longtext Descripción del

detalle.
48
Tabla Compra. Donde veremos algunos atributos de nuestra compra echa por el
cliente.
Tabla 11. Tabla compra. Elaboración propia.

campo Longitud
folio_pedido varchar(20) pk En la factura va salir este
número que será con el que
se recogerá el pedido del
cliente.
fecha_pedido datetime(6) El cliente pondrá la fecha en

la que recogerá su pedido
total_pedido double Total, de pedido en dinero.
Tabla Detalle de compra. Veremos los detalles de la compra o pedido realizado por
el cliente.
Tabla 12. Tabla detalle de compra. Elaboración propia.

campo Longitud
id_detalle_compra int(11) pk Identificador con el
detalle de compra.
folio_pedido varchar(20) fk Folio de pedido actúa

como llave foránea.
clave_producto varchar(25) fk Clave de nuestro

producto también actúa
como llave foránea.
cantidad_producto double La cantidad exacta de

productos
precio double Precio de productos
49
Tabla Venta. Tenemos los atributos de la venta.
Tabla 13. Tabla venta. Elaboración propia.

campo Longitud
folio_venta varchar(15) pk Identificador de la venta.
fecha_venta datetime(6) La fecha que ten la que se

realiza la venta o
factorización
id_usuario int(11) fk Identificador del usuario

que realizo la venta.
total_venta double Total, de precio de venta.
Tabla Detalle de venta. Tenemos todos los atributos de nuestra venta.
Tabla 14. Detalle de venta. Elaboración propia.

campo Longitud
id_detalleventa Int (11) pk Identificador del detalle
de la venta realizada.
folio_venta Varchar fk Extraemos el folio de

(15) venta de nuestra tabla
venta.
clave_producto Varchar fk El clave identificador de

(25) nuestro producto.
precio_venta double Precio total ve la venta.
cantida_venta Tinyint (3) Cantidad exacta de

productos.
50
Tabla Carrito de compra. Tenemos todos los atributos necesarios para nuestro
carrito de compra donde l cliente agregara sus productos.
Tabla 15. Carrito de compra. Elaboración propia.

campo Longitud
carrito_compra int(11) pk Identificador de nuestro
carrito.
id_usuario int(11) fk Identificador de nuestro

usuario.
clave_producto varchar(25) fk Clave del producto
cantidad tinyint(4) Cantidad de productos.
Tabla Usuario. Atributos de nuestros usuarios dependiendo del rol.
Tabla 16. Tabla usuario. Elaboración propia.

campo Longitud
id_usuario int(11) pk Identificador de
usuario.
usuario varchar(255) El nombre del usuario
pasword1 varchar(255) Su contraseña
id_empleado int(11) fk Identificador de

empleado.
Tabla Empleado. Todos los atributos de nuestros usuarios junto con su rol actuando
como fk.
Tabla 17. Tabla empleada. Elaboración propia.
51
campo Longitud
id_empleado int(11) pk Identificador del
empleado
nombre_empleado varchar(50) Nombre
aplellido_ma varchar(50) Apellido materno del

empleado
apellido_pa varchar(50) Apellido paterno del

empleado.
direccion varchar(200) Dirección del empelado
correo varchar(50) Correo del empleado
telefono varchar(15) Teléfono del empleado
id_rol int(11) fk Identificador del rol con

el que cuenta.
Tabla Rol. Atributos del rol que ocupan en el sistema los empleados, clientes,
administradores.
Tabla 18. Tabla Rol. Elaboración propia.

campo Longitud
id_rol int pk Identificador de
rol.
Rol varchar(100) Nombre del rol
descripcion_rol varchar(255) Descripción del

rol.
Tabla Cliente. Datos del cliente.
52
Tabla 19. Tabla Clientes. Elaboración propia.
Tipo/ Indice Descripción

Nombre del campo Longitud
id_cliente tinyint(3) pk Identificador del
cliente
nombre_cliente varchar(100) Nombre
razon_social_cliente varchar(50) Razón social del

cliente.
direccion_cliente varchar(255) Dirección del cliente.
telefono_cliente varchar(15) Teléfono
correo_cliente varchar(50) Correo del cliente
53
TEMA V. PUBLICACIÓN Y PRUEBAS
El objetivo de dar a conocer las especificaciones de nuestro lugar de publicación es

para asegurarnos de que este proveedor nos dará, seguridad en nuestros datos,
posicionamiento de SEO alto, servicio 24/7 y los 365 días del año, además contar
con soporte técnico y todo sea conveniente para el cliente. En el caso de las pruebas
es corroborar lo que mencionamos capítulos anteriores que hará nuestro sistema.
5.1. Casos prácticos
Se realizarán las descripciones de las pruebas que se llevara a cabo del

funcionamiento de nuestro sistema. Comenzaremos con el caso práctico de
Registro de usuarios, donde le usuario ingresara sus datos en caso de ser cliente
se ocupará para que este realice su pedido y en caso de ser administrador tendrá
la mayoría de privilegios en el sistema. Esto les permitirá navegar con inicio de
sesión a cada uno de ellos.
Tabla 20. Prueba Registro de usuario. Fuente: Elaboración propia.

Nombre de Datos Pasos Resultado
prueba
Registro de Ingresa nombre El usuario ingresara El usuario queda
usuario Email los datos que le pide registrado en
Contraseña nuestro sistema, nuestra base de
Confirmación de dará clic sobre datos y ahora
contraseña. registro y quedara cuenta con usuario y
echo su registro, lo contraseña.
enviara a la página
de inicio de sesión
para entrar a el
sistema.
Caso práctico de inicio de sesión, el usuario una vez realizado su registro, ahora
podrá entrar a el sistema con el usuario y contraseña echo por ellos mismos. Una
ves dentro del sistema en el caso del cliente tendrá acceso a el catálogo de
productos, categorías de nuestro producto, solo tendrá acceso a realizar la selección
de estos y hacer pedido.
54
Tabla 21. Inicio de sesión. Fuente: Elaboración propia
prueba
Inicio se sesión Ingresa nombre o El usuario ingresará El usuario iniciara
usuario los datos que le pide sesión y navegara
Contraseña nuestro sistema, con él durante su
dará clic sobre navegación dentro
entrar del sistema.
Cuando el administrador tenga acceso al sistema, tendrá la ventana de agregar

productos, el sistema le agregara un “id” a el producto como identificador único en
la base de datos, a lo que agregara, nombre del producto, marca, categoría a la que
pertenece el producto, stock mínimo y máximo, precio, status, descripción y una
imagen.
Tabla 22. Prueba Registro de producto. Fuente: Elaboración propia.

prueba
Agregar nuevo Ingresa nombre del El usuario ingresará El producto se vera
producto producto los datos que le pide reflejado en el
marca nuestro sistema catálogo de
descripción para el registro de productos, al igual
stock mínimo nuestro producto y que en nuestra base
stock máximo dará clic sobre de datos.
precio agregar, de
imagen inmediato será
categoría agregado nuestro
status producto.
Los productos muchas veces necesitan cambios de información y para ello también
se crea una ventana de editar producto, donde del registro ya echo se retomarán
los datos y el administrador podrá editar cualquier campo menos el del identificador,
para ello solo necesitas las nuevas actualizaciones y dar en el botón de editar.
55
Tabla 23. Prueba Editar producto. Fuente: Elaboración propia.

prueba
Editar producto Cambia lo que El administrador Los cambios hechos
ocupa del producto. modifica lo que a la información de
desea del producto. nuestro producto.
Para poder eliminar un producto habrá una ventana con una lista de productos por
categorías, cada producto de lado derecho tendrá un icono de eliminar y con ello
podremos hacer dicha acción, en caso de que simplemente quiera deshabilitarse el
producto solo cambiamos status.
Tabla 24 . Prueba Eliminar producto. Fuente: Elaboración propia.

prueba
Eliminar producto El producto es Solo da cloc en el El producto es
eliminado si lo icono de eliminar. eliminado.
desea el
administrador.
También podrá agregar categorías, cada producto pertenece a categorías para ello
es necesario agregar categorías, para ello tendrá una ventana de agregar
categorías únicamente con un id, nombre de la categoría y una pequeña descripción
de la categoría, para que cada producto tenga su categoría a la que pertenece.
Tabla 25. Prueba Agregar categoría. Fuente: Elaboración propia.

prueba
Agregar categoría Insertar nombre de Solo da cloc en el La categoría será
categoría. botón de registrar. agregada.
descripción
56
El administrador podrá agregar marcas, cada producto pertenece a categorías para
ello es necesario agregar marca, para ello tendrá una ventana de agregar marca
únicamente con un id, nombre de la categoría y una pequeña descripción de la
marca, para que cada producto tenga su marca a la que pertenece.
Tabla 26. Prueba Agregar marca. Fuente: Elaboración propia.

prueba
Agregar marca Insertar nombre de Solo da clic en el La marca será
marca. botón de registrar. agregada y
descripción registrada en la BD.
El cliente podrá seleccionar los productos que necesite para ellos tendremos un
catálogo de producto dividido por categorías, al momento de seleccionar un
producto del catálogo, lo llevará a una nueva pestaña donde esta individual el
producto con todas sus características y la opción de poderlo agregar a le carrito de
compras o pedido.
Tabla 27. Prueba Agregar al carrito. Fuente: Elaboración propia.

prueba
Agregar El cliente selecciona Solo da clic en el El cliente realice el
seleccionar los productos que botón de agregar a pedido.
productos desea y los agrega carrito.
a el carrito de
compras.
El cliente al tener todo seleccionado en el carrito, procede a hacer su pedido, como

ya inicio sección ya no es necesario ponga más datos, ya solo dará clic para obtener
su factura y poder realizar el pedido.
Tabla 28. Prueba Factura. Fuente: Elaboración propia.

prueba
57
Obtener factura El cliente tendrá su Solo da clic en el El cliente realice el
factura para realizar botón de agregar a pedido.
su pedido carrito.
5.2. Requisitos para la publicación y contratación
Para la contratación de nuestro proveedor de alojamiento en necesario tener en

cuenta que existe varios tipos de alojamiento. Se cuenta con planes con servidor
privado virtual “vps”, alojamiento dedicado y alojamiento compartido cada uno de
estos tienen sus diferentes planes y características que ofrecen, para ello
describimos cada uno de ellos.
Los requisitos para la publicación, es saber cuál es el mejor plan, la migración de
nuestro proyecto que sea de una manera fácil, eficiente y eficaz.
Un servidor privado virtual (VPS) es su propia sección privada de un servidor físico,

con esa parte de los recursos del servidor dedicada solo a él cliente. Tendrá acceso
raíz y la libertad de instalar características que no se ofrecen en los planes típicos
de alojamiento compartido y de revendedor, por lo que puede realizar más
configuraciones personalizadas que en un plan de alojamiento compartido
estándar.
Sin embargo, no tendrá todos los recursos de todo el servidor físico para usted, lo
que significa que un VPS no es tan rico en recursos ni tan personalizable como un
servidor dedicado. Donde la opción VPS realmente brilla es cuando es hora de
registrarse: un plan VPS de rango medio cuesta alrededor de $ 120 por mes.
Mientras el alojamiento dedicado es un servidor completo que está reservado para

su uso. Obtiene todos los recursos disponibles en esa máquina, y un servidor
dedicado generalmente le brinda muchos recursos.
Con este tipo de plan, obtendrá más espacio en disco y más inodos que con un plan
de alojamiento compartido. Por ejemplo, nuestro plan Power Server incluye 16 GB
de RAM, un disco duro de 2 TB y ancho de banda no medido. Tendrá acceso de
raíz y podrá configurar el entorno de alojamiento de la forma que desee.
Con esta gran libertad viene cierta responsabilidad: necesitará un webmaster
dedicado que pueda controlar sus sitios para asegurarse de que estén seguros,
58
respaldados y actualizados regularmente, y que funcionen correctamente. También
necesitará un presupuesto de servidor dedicado: alrededor de $ 200 por mes.
Mientras también tenemos el alojamiento compartido permite que varios sitios web
utilicen un solo servidor. Por lo general, no tendrá idea de con quién o con qué sitios
web está compartiendo los recursos de un servidor. Cada cliente generalmente
tendrá un límite en la cantidad total de recursos del servidor que puede usar, pero
esto estará definido por su paquete de alojamiento. El alojamiento compartido es
fácilmente la opción más barata y económica para sus necesidades.
Las características de este alojamiento son las siguientes:
• Es, con mucho, la opción de alojamiento más barata que tendrá
disponible. El precio habitual para este estilo de alojamiento oscilará entre $
2,99 y $ 9,99.
• La mayoría de las empresas de hospedaje tienen varios niveles de
hospedaje disponibles, por lo que puede actualizar su paquete de hospedaje
con el tiempo. Esto hace que el alojamiento compartido sea un excelente
lugar para comenzar.
• El alojamiento compartido generalmente viene equipado con un cPanel
incorporado, lo que facilita la administración de su sitio.
• No es necesario realizar ningún mantenimiento técnico por su parte al
servidor, ya que esto generalmente se incluye como parte de su paquete de
alojamiento.
5.3. Tipos de dominio y contratación
Para la contratación de nuestro dominio debemos tener en cuenta las siguientes

características. La simplicidad hace que el dominio sea fácil de recordar y fácil de
visitar nuevamente. Hay que ser único, pero manteniéndonos alejado de la
ortografía alternativa de werdz. Proteja la marca tomando nombres de dominio
similares: .net, .org o incluso. space.
Es la dirección del sitio web. Sin un nombre de dominio, los clientes visitarían el sitio
en una URL basada en IP, como 123.123.123.123/~susitioweb, en lugar de
susitioweb.com. Esto nos ayuda a tener un nivel mayor de profesionalismo, una
marca adecuada y una genialidad general. Además de que aplica el SEO aquí
donde se puede tener un posicionamiento mayor.
59
5.4. Tipos de dominio
Existen diferentes tipos de dominios con los cuales podemos registrar nuestro
sistema.
Tabla 29. Tipos de Dominios. Fuente: Elaboración propia
Tipo de dominio descripción Precio anual
.neto Haga que su marca $12.95/año*

parezca legítima con
este dominio de nivel
superior
ampliamente
reconocido.
.com El dominio de nivel $12.95/año*
superior más común.
.org Muestre su $12.95/año*

organización con
uno de los dominios
de nivel superior
más confiables.
.sitio Único pero $0.95/año*
relevante, .site hace
el trabajo sin ser
común y corriente.
.en línea Manténgase $1.95/año*
relevante .online con
un nombre de
dominio que se
destaque de la
norma.
.tecnología ¿En la industria de la $3.95/año*
tecnología? Hazlo
oficial con este
60
dominio
vanguardista.
.sitio web Reconocible al $0.95/año*

instante, .website es
perfectamente
genérico en todas
las formas correctas.
.a mí Cree una cartera, un $15.00/año*
blog u otro sitio web
personal con usted
en el centro.
.info Comparta $12.95/año*
información sobre su
producto, servicio,
evento o lo que
tenga.
.club Reúna a sus $9.95/año*
visitantes en torno a
un interés común o
una comunidad.
.negocio Breve, moderno y $12.95/año*
relevante, .biz es
perfecto para poner
su negocio en línea.
.anfitrión Desde alojamiento $6.95/mes*
web hasta
planificación de
eventos, .host es
versátil para
cualquier servicio
que brinde.
61
5.4.1. Registro de dominio
Para El registro de nuestro dominio, primero buscamos que el dominio se aceptado

por nuestro proveedor, que no esté siendo utilizado por alguna empresa más una
vez nuestro proveedor lo haya evaluado y sea aceptado vamos a agregarlo a el
carrito de compras, después nos iremos a la parte del pago y por último nos arrogara
un resumen de nuestro pedido, es decir, nuestro dominio aún debe ser aprobado.
TEMA VI. IMPLEMENTACIÓN Y PRUEBAS
Los casos prácticos son útiles para comprender y documentar las interacciones
clave entre los usuarios y el sistema desarrollado, lo que facilita el diseño, desarrollo
y pruebas de software. Estos casos prácticos muestran cómo un sitio web puede
adaptarse a diferentes necesidades y objetivos, resolviendo problemas específicos
y brindando soluciones eficientes.
6.1. Seguimiento de publicación y pruebas
Son actividades importantes dentro del proceso de pruebas del sistema. Aquí se
mostrará como se control el proceso de actividades, con el objetivo de asegurar que
todas las pruebas a realizarse tengan el éxito esperado y adecuado. Además, se
muestra cada una de las pantallas el la que fue realizada cada prueba, col el fin de
conocer el proceso.
6..2. Pruebas
Registro de usuarios, para poder acceder a el sistema es necesario que cada

usuario cuente con su perfil para acceder, para ello se implementó un formulario de
registro, donde le pedirá la el usuario ingresar su nombre, email que será su usuario
62
para acceder y su contraseña, simplemente se dará clic en el botón de registrar y el
usuario será agregado a la base de datos y se encriptaran para más seguridad.
Figura 27. Registro de usuarios. Fuente: Elaboración propia.
Control de acceso, determina el tipo de usuario que ingresa a el sistema, para

identificar que tipo de privilegios tiene. Para poder ingresar es necesario ingresar el
correo del usuario y contraseña, para esto el sistema cuenta con dos tipos de
63
perfiles, Administrador: Tiene control total sobre el sistema, agrega, elimina, edita
productos, Usuario: Su función es elegir productos e sus agrado y realizar el pedido
o compra de este.
Figura 28. Login del sistema. Fuente: Elaboración propia.
Si el usuario que ingreso a el sistema es administrador, tendrá acceso a agregar

marcas de los productos que se mostraran en el catálogo de productos, por lo que
para agregar la marca se le pedirá el nombre la marca que desea agregar y su
64
estatus, ya sea activo o inactivo, los datos serán guardados en la bese de datos y
de igual manera en una tabla, para visualizarlas.
Figura 29. Agregar marca. Fuente: Elaboración propia.
65
Una vez agregada nuestra marca tendremos una tabla donde se podrán visualizar
las marcas agregadas, además, el administrativo podrá eliminar y editar las marcas
si así lo desea, por lo cual tendrá dos botones que le permitirán realizar dichas
acciones en el sistema implementado, además los cambios se verán reflejados la
base de datos.
Figura 30. Pantalla de marcas. Fuente: Elaboración propia.
66
Los privilegios con los que cuenta el administrador, también le permitirán agregara
categorías de las cuales pertenecen los productos, para ello tenemos un formulario
que nos pedirá el nombre de la categoría, descripción de la categoría y status de la
categoría, para ser visualizadas estarán en una tabla que permite eliminar y editar
dicha marca si así lo desea el administrador.
Figura 31. Agregar Categoría. Fuente: Elaboración propia.
67
Las categorías se podrán visualizar en una tabla que donde muestra el id con que
fue registrada de igual manera en nuestra base de datos, le permitirá a el
administrador editarla y eliminarla si así lo desea, además, de que aquí mismo podrá
ir directo a el formulario de agregar categoría, al realizar cualquiera de las
actividades, se verán reflejadas en la base de datos.
Figura 32. Visualización de categorías. Fuente: Elaboración propia.
68
Si el usuario que ingreso el cliente que realizara pedido o compra de productos, le
permitirá visualizar el catálogo de estos productos, al dar clic sobre la tarjeta del
producto, este lo llevara navegando a otra página donde se mostrara la descripción
concreta del producto, además le permitirá hacer la acción de agregar a el carrito
de compra si así lo desea.
Figura 33. Productos. Fuente: Elaboración propia.
69
PLAN DE CAPACITACIÓN
La capacitación es un proceso de estrategias aplicado organizada y

sistemáticamente, por un lado, una sucesión definida de condiciones y etapas
dirigidas a lograr la integración del usuario administrativo y usuarios, el incremento
y mantenimiento de su eficiencia durante su navegación en la web desarrollada, por
otro, un conjunto de metodologías, técnicas y recursos para el desarrollo de planes
y la implantación de acciones específicas de la empresa para su mejora continua.
De esta forma, la capacitación constituye un factor importante para que el usuario

administrativo y usuarios brinde aportes significativos, ya que es un proceso
constante que busca la mayor eficiencia y productividad en su manejo de la web,
mientras que también contribuye a elevar el ingenio creativo del colaborador ya que
es una web intuitiva.
Tabla 30. Plan de capacitación. Fuente: Elaboración propia.
Cronograma
NO. Actividad M Julio Horas

D 1 2
1 Capacitación X 4
usuario
administrativo
2 Capacitación x 4
usuarios
Total, de horas 8
70
RESULTADOS
El sistema implementado a la empresa “Candy Sweet” ayudo en gran medida con

la mejora en la eficiencia operativa, la experiencia de compra mejorada, la gestión
eficiente de inventario y mayor precisión en la facturación. Todo lo mencionado tuvo
como resultado una mayor eficacia y ahorro de tiempo tanto para el personal como
para los clientes.
La manera de interactuar con el sistema no significo ningún tipo de problema ya que

desde el diseño se tuvo en consideración utilizar técnicas y herramientas que
permitieran la realización de interfaces interactivas con una gran eficiencia en las
funciones para poder brindar a el personal y clientes una manera sencilla de manejar
dicho sistema.
71
CONCLUSIONES
En conclusión, la implementación del sistema web para “Candy Sweet” brinda una
serie de beneficios significativos tanto para la gestión interna como la experiencia
de compra de los clientes. Al automatizar y optimizar procesos claves como la
gestión de inventario, pedidos y facturación, el sistema web mejora la eficiencia
operativa, reduciendo los tiempos y los errores asociados a alas tareas manuales.
Además, el sistema web ofrece a los clientes una experiencia de compra en línea
mejorada, permitiéndoles acceder a la información detallada sobre los productos,
realizar pedidos de manera conveniente. Esto atribuye a una mejor satisfacción de
cliente y, potencialmente, a un aumento en las ventas y la fidelidad a la empresa por
parte de cada cliente.
El seguimiento preciso del inventario en tiempo real facilita la gestión eficiente de

las existencias , evitando situaciones de productos caducados o agotados.
Asimismo, la automatización de la factura proporciona información financiera
precisa y oportuna, permitiendo una mejor toma de decisiones basada en datos
concretos.
72
RECOMENDACIONES
Se recomienda que el sistema tenga implementaciones de mejoras y

actualizaciones de manera regular para su optimización como la mejora de
velocidad y rendimiento, chatbot de atención a clientes, funcionalidad de reseñas y
calificaciones, programa de lealtad y descuentos, integración a las redes sociales o
cualquier nueva innovación todo con el fin de brindar una experiencia aún mejor a
los usuarios.
Además, se sugiere a “Candy Sweet”, específicamente a el área donde se utiliza el

sistema, impartir capacitación sobre la utilización y en dado caso actualizaciones o
mejoras, a efecto de que todos los usuarios conozcan completamente las facilidades
y beneficios que proporciona con el fin de que se incremente la utilización del
sistema web.
73
GLOSARIO
-A- ataques cibernético en el cual

múltiples dispositivos se utilizan
API: (Aplication Programming
para inundar un sistema o servidor
Interface). Se refiere a la interfaz
en línea con gran volumen de
que permite la comunicación e
tráfico malicioso.
interacción entre diferentes
componentes del software. Se
-F-
utiliza para exponer
funcionalidades que puedan ser
Frameworks: Conjunto de
consumidas por aplicaciones
herramientas, bibliotecas y
externas.
convenciones de programación
que proporciona una estructura y
-B- un entorno de trabajan para el
desarrollo de aplicaciones. Se
Bases de Datos: Colección
refiere a la proporción de una base
organizada de datos estructurados
sobre la cual se construyen
y relacionados, diseñada para
aplicaciones, sin desarrollar desde
almacenar, gestionar y recuperar
cero.
información de manera eficiente.
-D- -G-
DNS: “Domain Name System” GUI: (Graphical User Interface).

(Sistema de nombres de Dominio). Se refiere a la interfaz gráfica de
Se refiere a el sistema usuario, que es un entono visual
fundamental en internet que se que le permite al usuario
encarga de traducir los nombres interactuar con una aplicación o u
de dominio legibles para los sistema.
usuarios en direcciones IP
numéricas que las computadoras
utilizan para comunicarse entre sí.
DDos: (Distrubuted Denia lof
-M-
Service). Se refiere a el tipo de
74
MySQL: Sistema de gestión de trasportar datos de manera
base de datos relacional. Se legible.
refiere a el lenguaje de consulta
estructurado que proporciona un
entorno seguro y confiable para
almacenar, organizar y administrar
datos.
-X-
XML: (Extensible Markup

Language). Se refiere a el
lenguaje de marcado que es
utilizado para almacenar y
75
FUENTES BIBLIOGRÁFICAS.
Arias, O. F. G. (1999). El Proyecto de investigación: Guía para su elaboración.

Caracas: Episteme.
Benami, O. y Jin, Y. (2002, January). Creative stimulation in conceptual design. In

ASME 2002 International Design Engineering Technical Conferences and
Computers and Information in Engineering Conference (pp. 251-263). American
Society of Mechanical Engineers.
https://pdfs.semanticscholar.org/dcec/a186d4cb51e4467c4fda89ac96b1adaaace5.
pdf
Courage, C. y Baxter, K. (2005). Understanding your users: practical guide to user

requirements methods, tools, and techniques. NY, NY: Morgan Kaufmann.
https://books.google.es/books?hl=es&lr=&id=bZ__HjU20hEC&oi=fnd&pg=PP25&d
q=Understanding+your+users:+practical+guide+
to+user+requirements+methods,+tools,+ and+techniques&ots=Xia9eGV-
ac&sig=jscDl0QNC554CgyQrSZDQxciBq8
Cui, W., Huang, L., Liang, L., y Li, J. (2009). The Research of PHP Development
Framework Based on MVC Pattern. Proceeeding. (Pp. 947-949).
Crescenzi L., Lucrezia y Grané i Oró, Mariona. (2016). Análisis del diseño interactivo
de las mejores apps educativas para niños de cero a ocho años. Comunicar: Revista
científica iberoamericana de comunicación y educación, ISSN 1134-3478, Nº 46,
2016, págs. 77-85. https://dialnet.unirioja.es/servlet/articulo?codigo=5297325
G. (2017, 7 junio). Navicat Premium for Enhancing Your Database Administration

System. Code Geekz. Recuperado 29 de marzo de 2023, de
https://codegeekz.com/navicat-premium-for-enhancing-your-database-
administration-system/
76
Gothelf, J., Seiden, J., & O`Reilly, M. (2019). Lean UX: Designing great products
with Agile teams. Beijing: O´Reilly. Hackos, J. T. y Redish, J. (1998). User and task
analysis for interface design. New York, NY: Willey.
http://library.mpibberlin.mpg.de/toc/z2009_2088.pdf
interaction-design. (2023, 1 enero). What is User Interface (UI) Design? The

Interaction Design Foundation. Recuperado 29 de marzo de 2023, de
https://www.interaction-design.org/literature/topics/ui-design
Jin, Y., y Chusilp, P. (2006). Study of mental iteration in different design situations.
Design studies, 27(1), 25-55. dio: 10.1016/j.destud.2005.06.003
Jonhson, J.L. (2000). Base de datos modelos, lenguajes, diseño. México: Oxford.
Krug, S. & Academia.edu [Gillermo Centeno]. (2001). No me hagas pensar: una

aproximación a la usabilidad en la Web. Libro de dideño de UX.
https://dialnet.unirioja.es/servlet/libro?codigo=183505
Levy, N. (2022, 26 diciembre). ¿Qué es el SEO? Guía para principiantes. Blog de

Wix | Diseño Web, Fotografía y Tips de Negocios. Recuperado 29 de marzo de 2023,
de https://es.wix.com/blog/2020/08/que-es-seo/
Martinez, M. (2022). Qué es un dominio y para qué sirve. NIC México. Recuperado
29 de marzo de 2023, https://www.nicmexico.mx/2022/11/11/que-es-un-dominio-y-
para-que-sirve/
Oracle. (2018, marzo). Comercio electrónico. Recuperado 28 de marzo de 2023, de

https://www.oracle.com/mx/cx/ecommerce/what-is-ecommerce/
Pérez Eguíluz, J. (2008) Introducción a XHTML. 190 p.
77
Quintero, P. (2022, 30 mayo). Tipos de hosting: ¿Cómo elegir el mejor? • NOW
IDEAS. NOW IDEAS. Recuperado 9 de mayo de 2023,
de https://blogs.unsw.edu.au/nowideas/blog/2022/05/tipos-hosting-empresa/
Tatroe, K. y Maclntyre, P. (2013). Programación PHP (3era edición). O´Reilly Media.
78
ANEXOS
Anexo I. Entrevista para personal de la empresa.
1. ¿Tiene experiencia con algún sistema que le permita hacer pedido por línea?
2. ¿Tiene alguna preferencia en cuanto al tipo de plataforma de pedidos en
línea que prefiere utilizar?
3. ¿Cuál es el principal problema atrás la grande demanda de ventas en
tienda?
4. Al desarrollarse un sistema de pedidos para “Candy Sweet” ¿cuáles serían
los requerimientos de este?
5. ¿El cliente tendría una la opción de poner la fecha y hora que el desee para
la entrega de su pedido?,¿Por qué?
6. ¿Qué opina en cuanto a que los pedidos sean recogidos y pagados en
tienda?
7. ¿Cuál sería la mejor manera de avisar a el cliente que su pedido ha sido
despachado con éxito?
8. ¿Tiene alguna otra sugerencia o comentario sobre lo que le gustaría ver en
un sistema de pedidos en línea?
79
Anexo II. Diagrama de procesos.
80
Anexo III. Determinación de actividades.
81

Nathaly Parra Godinez - Entrega - 9

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Nathaly Parra Godinez - Entrega - 9

Cargado por

Copyright:

Formatos disponibles

TECNOLÓGICO DE ESTUDIOS SUPERIORES

DIVISIÓN DE INGENIERÍA EN SISTEMAS COMPUTACIONALES

“IMPLEMENTACIÓN DE UN SISTEMA WEB DE PEDIDOS ONLINE PARA LA

ASESOR: M.T.I. YADIRA ESTHER JIMENEZ PEREZ

JILOTEPEC, EDO, MEX. JULIO DE 2023

Figura 1. Organigrama del área. Fuente: Elaboración propia. ............................................ 3

Tabla 1. Características técnicas. Fuente: Elaboración propia ......................................... 8

En la actualidad, el mundo empresarial está experimentando una creciente

El desarrollo del sistema web implico una investigación exhaustiva de las

Este proyecto se encuentra dividido en capítulos, en el primer capítulo se muestra

Durante el segundo capítulo se presentan los fundamentos teóricos que respaldan

1.1. Antecedentes de la empresa

Durante los primeros cinco años de operaciones “Candy Sweet”, se perfeccionaron

Uno de los sabores más placenteros y exquisitos es el dulce. En México, con la

En el año 2019 derivado de las propias características de la contingencia de COVID-

1.2. Caracterización del área

Nombre de la empresa: Dulcería “Candy Sweet”

Figura 1. Organigrama del área. Fuente: Elaboración propia .

Debido al crecimiento y demanda de ventas en la dulcería “Candy Sweet” se ha

Debido a lo mencionado anteriormente el servicio de “Candy Sweet” se ve afectado

La implementación del sistema de pedidos para dar solución a la problemática de

Las principales justificaciones del sistema web implementado son. Accesibilidad:

El sistema debe contener escalabilidad que permitirá ofrecer a el sistema web de

implementar un sistema web de pedidos online para la Dulcería “Candy Sweet”.

1.5.1. Objetivos específicos

El proyecto que se va a desarrollar tiene como objetivos específicos los siguientes:

El sistema que se desarrollara está enfocado a el área de ventas de la Dulcería

El proyecto como limites tendrá:

1.8. Estudio de factibilidad

Un estudio de factibilidad es de suma importancia porque en él se pueden analizar

1.8.1. Factibilidad técnica

Tabla 1 . Características técnicas. Fuente: Elaboración propia

Características del ordenador

1 Pc: Lenovo ThinkPad

2 Sistema operativo: Windows 10 pro

3 Procesador: Intel(R) Core (TM) i5-6300U CPU @ 2.40GHz

4 Memoria RAM: 8.00 GB

5 Tipo de sistema: Sistema operativo de 64 bits, procesador

También llevaremos a cabo la evaluación de softwares con los que desarrollaremos

Tabla 2 . Características de software. Fuente: Elaboración propia

1 Framework de Laravel que está basado en PHP nativo

3 Editor de código: Visual Studio Code

7 Gestor de base de datos: MySQL

8 Servidor local: XAMPP

10 Administrador de base de datos: Navicat

1.8.2. Factibilidad económica

Para el desarrollo de nuestro sistema de pedidos online de la dulcería “Candy

Tabla 3. Factibilidad económica. Fuente: Elaboración propia

Pc Lenovo $10,000 MNX La empresa ya

Navicat $30,000 MNX Es una licencia de

Composer $0.0 MNX Es un Manejador de

XAMPP $0.0 MNX Es una compilación

Hosting y $1,626.73 Se rentaría un

Horas de La hora Es el trabajo del

Visual Studio $0.0 MNX Es gratuito y de

MYSQL $0.0 MNX Es gratuito y de

1.8.3. Factibilidad operativa

Para la empresa “Candy Sweet”, el aspecto legal en el desarrollo del sistema de

Tabla 4. Tipo de licencia de software. Fuente: Elaboración propia.

TEMA II. FUNDAMENTO TEÓRICO

Durante el desarrollo e implementación del sistema web empleamos términos,

Oracle (2018) afirma que el objetivo de la mayoría de empresas utilizando la