Embed Size (px)
Citation preview
UNIVERSIDAD CATÓLICA DE CUENCA
SEDE SAN PABLO DE LA TRONCAL
UNIDAD ACADÉMICA DE INGENIERÍA DE SISTEMAS
CARRERA DE INGENIERÍA DE SISTEMAS
TEMA: DESARROLLO E IMPLEMENTACIÓN DE UNA TIENDA
VIRTUAL PARA UNA EMPRESA DE DISTRIBUCIÓN DE PRODUCTOS
TECNOLÓGICOS
AUTOR:
PALACIOS BUSTAMANTE ROSA ELISABETH
TRABAJO FINAL PRESENTADO COMO REQUISITO
PREVIO A LA OBTENCIÓN DEL TÍTULO DE
INGENIERO DE SISTEMAS
TUTOR:
ING. STALÍN JARA
LA TRONCAL - ECUADOR
AÑO: 2015
I
UNIVERSIDAD CATÓLICA DE CUENCA
SEDE SAN PABLO DE LA TRONCAL
CARRERA DE INGENIERÍA DE SISTEMAS
DECLARACIÓN DE RESPONSABILIDAD
YO, PALACIOS BUSTAMANTE ROSA ELISABETH
DECLARO QUE:
El Trabajo Final “DESARROLLO E IMPLEMENTACIÓN DE UNA TIENDA
VIRTUAL PARA UNA EMPRESA DE DISTRIBUCIÓN DE PRODUCTOS
TECNOLÓGICOS”, ha sido desarrollada e implementada en base de una investigación
exhaustiva, respetando derechos intelectuales de terceros, conforme las citas que constan al
pie de páginas correspondientes cuyas fuentes se incorpora en la bibliografía.
Consecuente este trabajo es de mi propia autoría.
En virtud de esta declaración, me responsabilizo del contenido veracidad y alcance
científico del Trabajo Final en mención
La Troncal, Enero de 2015
PALACIOS BUSTAMANTE ROSA ELISABETH
II
ING.
LUIS STALÍN JARA OBREGÓN
DIRECTOR DEL TRABAJO FINAL
C E R T I F I C A:
Que el presente Trabajo Final: “DESARROLLO E
IMPLEMENTACIÓN DE UNA TIENDA VIRTUAL PARA UNA
EMPRESA DE DISTRIBUCIÓN DE PRODUCTOS
TECNOLÓGICOS”, desarrollado por: PALACIOS BUSTAMANTE
ROSA ELISABETH ha sido revisada y autorizo su presentación.
La Troncal, Enero 2015
________________________
ING. LUIS STALÍN JARA OBREGÓN
DIRECTOR DEL TRABAJO FINAL
III
A U T O R Í A
Los conceptos, ideas y opiniones expuestas en el presente
Trabajo Final son de exclusiva responsabilidad del autor.
___________________________________
PALACIOS BUSTAMANTE ROSA ELISABETH
IV
DEDICATORIA
Dedico este proyecto primeramente a Diosito por permitirme haber llegado hasta este
momento tan importante de mi formación profesional, por ser mi guía perenne en cada paso
académico, a mis padres Vicente Palacios y Rosa Bustamante a mis hermanos Marco
Palacios, Wilmer Palacios, Robinson Palacios, Patricio Palacios que con su amor han
sido respaldo indiscutible, que en momento de impaciencia y soledad han sabido ser mi
cruz, fortaleza y apoyo constante, con sus cultos consejos me han permitido afrontar las
dificultades con perfección y acertar soluciones prácticas y eficaces a los problemas y esto
me ha concedido culminar con éxito mi carrera profesional, también dedico mi trabajo de
manera especial a mi novio Fabián Toledo quien ha sido y es mi motivación, inspiración y
felicidad.
V
AGRADECIMIENTO
Considero que al final de este transcurso de gran eficacia en mi vida es preciso dar mis
francos agradecimientos a Dios fuente de ciencia y sabiduría que es mi mejor maestro, a
mis amorosos y buenos padres Vicente Palacios y Rosa Bustamante que con su ejemplo de
firmeza me han enseñado que el mejor éxito del hombre es aquel que se consigue a través
de la lucha y el esfuerzo constante, a mis maestros que con su profesionalismo me han
encaminado y han forjado mi espíritu investigativo y no puedo dejar de dar un
agradecimiento a todas aquellas personas que de una u otra manera colaboraron en especial
al Propietario de la Empresa SellComp S.A por poner su confianza en mi trabajo y brindar
todas las facilidades para llevar a cabo este proceso investigativo.
VI
ÍNDICE
CERTIFICACIÓN DE TUTOR:...................................................................................... II
AUTORÍA ......................................................................................................................... III
DEDICATORIA ............................................................................................................... IV
AGRADECIMIENTO ........................................................................................................ V
ÍNDICE ............................................................................................................................. VI
ÍNDICE DE TABLAS ................................................................................................... XIV
ÍNDICE DE FIGURAS ................................................................................................... XV
1 TEMA ................................................................................................................................1
2 RESUMEN EJECUTIVO ................................................................................................1
3 ANTECEDENTES Y JUSTIFICACIÓN ........................................................................2
3.1 ANTECEDENTES .....................................................................................................2
3.2 JUSTIFICACIÓN ......................................................................................................2
3.3 ORGANIZACIONES PARTICIPANTES ...............................................................3
4 DESCRIPCIÓN DEL PROYECTO ................................................................................3
4.1 PROPÓSITO ..............................................................................................................3
4.1.1 OBJETIVO GENERAL .....................................................................................3
4.1.2 OBJETIVOS ESPECIFICOS ............................................................................4
4.2 METODOLOGÍA ......................................................................................................4
4.2.1 METODOLOGÍA DE TRABAJO .....................................................................4
VII
4.2.2 METODOLOGÍA DE PROGRAMACIÓN......................................................6
4.3 PERSONAL ............................................................................................................. 10
4.3.1 DIRECTOR ....................................................................................................... 10
4.3.2 EJECUTORA .................................................................................................... 10
4.4 SUPUESTOS CLAVES ........................................................................................... 11
5 ELEMENTOS ESTRATÉGICOS ................................................................................. 11
5.1 PARTICIPACIÓN ................................................................................................... 11
5.2 SOSTENIBILIDAD ................................................................................................. 12
5.3 GÉNERO .................................................................................................................. 12
CAPÍTULO I ..................................................................................................................... 13
6 HERRAMIENTAS DE DISEÑO Y PROGRAMACIÓN ............................................ 14
6.1 PHP ........................................................................................................................... 14
6.1.1 ¿POR QUÉ UTILIZAR PHP? ......................................................................... 14
6.1.2 COSTO .............................................................................................................. 14
6.1.3 SENCILLEZ Y VERSATILIDAD .................................................................. 14
6.1.4 SEGURIDAD .................................................................................................... 15
6.2 ¿QUÉ ES MYSQL? ................................................................................................. 15
6.2.1 HISTORIA DE MYSQL .................................................................................. 15
6.2.3 CARACTERÍSTICAS PRINCIPALES .......................................................... 16
6.2.4 VENTAJAS ....................................................................................................... 17
6.2.5 DESVENTAJAS ............................................................................................... 17
VIII
6.3 XAMPP .................................................................................................................... 18
6.4 JAVASCRIPT .......................................................................................................... 20
6.5 HTML ....................................................................................................................... 21
6.6 ADOBE DREAMWEAVER ................................................................................... 22
CAPÍTULO II .................................................................................................................... 26
7 ANÁLISIS Y DISEÑO DEL SISTEMA ....................................................................... 27
7.1 PLAN DE DESARROLLO DE SOFTWARE ....................................................... 27
7.1.1 INTRODUCCIÓN ............................................................................................ 27
7.1.2 ALCANCE ........................................................................................................ 27
7.2 CASOS DE USO ...................................................................................................... 27
7.2.1 CASO DE USO: GESTIONAR PRODUCTOS .............................................. 27
7.2.2 CASO DE USO: ELIMINAR PRODUCTO ................................................... 29
7.2.3 CASO DE USO: MODIFICAR DATOS DEL PRODUCTO......................... 29
7.2.4 CASO DE USO: MODIFICAR STOCK DE PRODUCTOS ......................... 31
7.2.5 CASO DE USO: GESTIONAR CLIENTE ..................................................... 31
7.2.6 CASO DE USO: REGISTRAR NUEVO CLIENTE ...................................... 33
7.2.7 CASO DE USO: MODIFICAR DATOS DEL CLIENTE ............................. 34
7.2.8 CASO DE USO: CAMBIAR CONTRASEÑA ............................................... 35
7.2.9 CASO DE USO: RECUPERAR CLAVE OLVIDADA ................................. 36
7.2.10 CASO DE USO: MOSTRAR DATOS DE UN CLIENTE ........................... 37
7.2.11 CASO DE USO: GESTIONAR CATÁLOGO .............................................. 38
IX
7.2.12 CASO DE USO: AGREGAR PRODUCTO AL CARRO DE COMPRAS. 38
7.2.13 CASOS DE USO: ELIMINAR PRODUCTOS DEL CARRO DE
COMPRAS ............................................................................................................................. 39
7.2.14 CASO DE USO: GESTIONAR PEDIDO ..................................................... 40
7.2.15 CASO DE USO: CAMBIAR ESTADO A UN PEDIDO .............................. 41
7.2.16 CASO DE USO: MOSTRAR DETALLE DE UN PEDIDO ........................ 42
7.2.17 CASOS DE USO: REVISAR PEDIDOS ....................................................... 42
7.2.18 CASO DE USO: VER DETALLE DE FACTURAS .................................... 43
7.2.19 DIAGRAMA DE SECUENCIA ..................................................................... 44
7.3 DETALLE DE LAS TABLAS DEL SISTEMA .................................................... 44
7.3.1 TABLA: CARRITO ......................................................................................... 45
7.3.2 TABLA: CATEGORÍA .................................................................................... 46
7.3.3 TABLA: CIUDAD ............................................................................................ 46
7.3.4 TABLA: CONFIG_ENVÍO ............................................................................. 47
7.3.5 TABLA: CONTENIDO .................................................................................... 47
7.3.6 TABLA: DETALLE_ORDEN_FINAL ........................................................... 47
7.3.7 TABLA: DIECCIÓN_ENVIO ......................................................................... 48
7.3.8 TABLA: ORDEN_FINAL ................................................................................ 49
7.3.9 TABLA: PAÍS ................................................................................................... 49
7.3.10 TABLA: PRODUCTOS ................................................................................. 49
7.3.11 TABLA: PRODUCTO_COLOR ................................................................... 50
X
7.3.12 TABLA: PRODUCTO_SIZE ......................................................................... 51
7.3.13 TABLA: PROVINCIA ................................................................................... 51
7.3.14 TABLA: SUBCATEGORÍA .......................................................................... 51
7.3.15 TABLA: TBL_PRODUCTO_COMENT ...................................................... 52
7.3.16 TABLA: USER................................................................................................ 52
7.3.17 TABLA: USERS ............................................................................................. 54
7.4 MODELO ENTIDAD – RELACIÓN ..................................................................... 55
CAPÍTULO III .................................................................................................................. 56
8 MANUAL DE USUARIO .............................................................................................. 57
8.1 INTRODUCCIÓN ................................................................................................... 57
8.2 INSTALACIÓN DE LA TIENDA VIRTUAL ....................................................... 57
8.3 INICIAR SESIÓN DE ADMINISTRADOR......................................................... 73
8.4 MENÚ INICIO ........................................................................................................ 75
8.5 MENÚ USUARIOS ................................................................................................. 75
8.5.1 AGREGAR NUEVO USUARIO ..................................................................... 76
8.5.2 EDITAR USUARIO ......................................................................................... 78
8.5.3 INACTIVAR USUARIO .................................................................................. 79
8.6 CATEGORÍAS ........................................................................................................ 81
8.6.1 AGREGAR UNA CATEGORÍA ..................................................................... 82
8.6.2 EDITAR CATEGORÍAS ................................................................................. 85
8.6.3 ELIMINAR CATEGORÍAS ............................................................................ 86
XI
8.7 SUBCATEGORÍA ............................................................................................... 87
8.7.1 EDITAR SUBCATEGORÍA ............................................................................ 90
8.7.2 ELIMINAR SUBCATEGORÍAS ................................................................... 90
8.8 PRODUCTOS .......................................................................................................... 91
8.8.1 AGREGAR PRODUCTO ................................................................................ 91
8.8.2 LIMPIAR CAMPO PRODUCTO ................................................................... 98
8.8.3 EDITAR PRODUCTO .................................................................................... 99
8.8.4 ELIMINAR PRODUCTO ............................................................................. 100
8.8.5 COMENTARIOS DE USUARIOS ................................................................ 102
8.9 CÓDIGO QR ......................................................................................................... 102
8.9.1 ¿CÓMO FUNCIONA ESTO EL CÓDIGO QR? ......................................... 103
8.10 PEDIDOS ............................................................................................................. 105
8.10.1 ACCIONES DE PEDIDO ............................................................................ 106
8.11 GENERAR FACTURA ....................................................................................... 107
8.12 FACTURAS ......................................................................................................... 109
8.12.1 ACCIONES DE FACTURA......................................................................... 109
8.12.1.1 VER FACTURA & CAMBIAR ESTADO ............................................... 110
8.13 CIUDADES .......................................................................................................... 110
8.13.1 AGREGAR NUEVO PAÍS ........................................................................... 111
8.13.2 EDITAR PAÍS ............................................................................................... 112
8.13.3 ELIMINAR PAÍS ......................................................................................... 113
XII
8.13.4 AGREGAR PROVINCIA ............................................................................ 114
8.13.5 EDITAR PROVINCIAS ............................................................................... 116
8.13.6 ELIMINAR PROVINCIAS ......................................................................... 117
8.13.7 AGREGAR CIUDAD ................................................................................... 118
8.13.8 EDITAR CIUDAD ....................................................................................... 119
8.13.9 ELIMINAR CIUDAD ................................................................................... 120
8.14 CONFIGURACIONES DE TIENDA VIRTUAL .............................................. 122
8.15 ENVÍO .................................................................................................................. 124
8.15.1 AGREGAR FILA DE ENVÍO ..................................................................... 126
8.15.2 ELIMINAR FILA DE ENVÍO .................................................................... 127
8.16 CERRAR SESIÓN ADMINISTRADOR ........................................................... 127
8.17 INGRESAR A LA TIENDA VIRTUAL ............................................................ 128
8.18 BUSCAR PRODUCTOS ..................................................................................... 128
8.18.1 BUSCADOR ................................................................................................. 128
8.18.2 BUSCAR POR CATEGORÍAS ................................................................... 130
8.18.3 BUSCAR POR SUBCATEGORÍAS. .......................................................... 130
8.19 REGISTRARSE ................................................................................................... 132
8.20 COMPRAS ........................................................................................................... 136
8.20.1 OPCIONES DE PAGO ................................................................................. 144
8.21 OPCIONES DENTRO DE LA CUENTA SELLCOMP ................................... 148
8.21.1 MIS FACTURAS .......................................................................................... 148
XIII
8.21.2 MIS PEDIDOS .............................................................................................. 149
8.22 REDES SOCIALES ............................................................................................. 151
8.23 INFORMACIÓN DE LA EMPRESA. ............................................................... 152
8.23.1 ACERCA DE SELLCOMP .......................................................................... 152
8.23.2 PROTECCIÓN AL COMPRADOR. .......................................................... 153
8.23.3 POLÍTICAS DE PRIVACIDAD.................................................................. 153
8.23.4 TÉRMINOS Y CONDICIONES.................................................................. 154
8.24 CERRAR SESIÓN CUENTA SHELLCOMP ................................................... 155
9 CONCLUSIONES ........................................................................................................ 156
10 RECOMENDACIONES ............................................................................................ 157
11 CRONOGRAMA DE ACTIVIDADES .................................................................... 158
12 PRESUPUESTO ......................................................................................................... 159
13 GLOSARIO ................................................................................................................ 160
14 BIBLIOGRAFÍA ........................................................................................................ 162
XIV
ÍNDICE DE TABLAS
Tabla 1 Casos de Uso: Gestionar Productos ......................................................................... 28
Tabla 2 Casos de Uso: Eliminar producto ............................................................................ 29
Tabla 3 Caso de Uso: Modificar datos del producto ............................................................ 30
Tabla 4 Caso de Uso: Modificar stock de productos ............................................................ 31
Tabla 5 Caso de uso: Gestionar Cliente ............................................................................... 32
Tabla 6 Caso de Uso: Registrar nuevo cliente ...................................................................... 33
Tabla 7 Caso de Uso: Modificar datos del cliente ................................................................ 35
Tabla 8 Caso de Uso: Cambiar contraseña ........................................................................... 36
Tabla 9 Caso de Uso: Recuperar clave olvidada .................................................................. 37
Tabla 10 Casos de Uso: Mostrar datos de un cliente ............................................................ 37
Tabla 11 Caso de Uso: Gestionar Catálogo .......................................................................... 38
Tabla 12 Agregar producto al carro de compras .................................................................. 39
Tabla 13 Casos de Uso: Eliminar productos del carro de compras ...................................... 40
Tabla 14 Caso de Uso: Gestionar pedido ............................................................................. 41
Tabla 15 Caso de uso: Cambiar estado a un pedido ............................................................. 42
Tabla 16 Caso de Uso: Mostrar detalle de un pedido ........................................................... 42
Tabla 17 Casos de Uso: Revisar pedidos ............................................................................. 43
Tabla 18 Caso de Uso: Ver detalle de facturas ..................................................................... 44
Tabla 19 Cronograma ......................................................................................................... 158
Tabla 20 Presupuesto .......................................................................................................... 159
XV
ÍNDICE DE FIGURAS
Figura 1 Modelo de 3 Capas ....................................................................................... 6
Figura 2 Diseño de la Tienda Virtual ......................................................................... 7
Figura 3 Menú Principal de la Tienda Virtual ............................................................ 8
Figura 4 Diagrama de Secuencia .............................................................................. 44
Figura 5 Tabla Carrito .............................................................................................. 46
Figura 6 Tabla Categoría .......................................................................................... 46
Figura 7 Tabla Ciudad .............................................................................................. 47
Figura 8 Tabla Configuración Envío ........................................................................ 47
Figura 9 Tabla Contenido ......................................................................................... 47
Figura 10 Tabla Detalle de Orden Final ................................................................... 48
Figura 11 Tabla Orden Final..................................................................................... 49
Figura 12 Tabla País ................................................................................................. 49
Figura 13 Tabla Productos ........................................................................................ 50
Figura 14 Tabla Producto Color ............................................................................... 50
Figura 15 Tabla Producto Talla ................................................................................ 51
Figura 16 Tabla Provincia ........................................................................................ 51
Figura 17 Tabla Subcategoría ................................................................................... 52
Figura 18 Tabla Producto Comentarios .................................................................... 52
Figura 19 Tabla Usuario ........................................................................................... 53
Figura 20 Tabla Usuarios.......................................................................................... 54
Figura 21 Modelo Entidad - Relación ...................................................................... 55
XVI
Figura 22 Ingreso al dominio .................................................................................... 57
Figura 23 Inicio de Sesión de cPanel ........................................................................ 58
Figura 24 Crear Base de Datos ................................................................................. 58
Figura 25 Definición de nombre de base de datos .................................................... 59
Figura 26 Base de Datos Creada ............................................................................... 59
Figura 27 Crear Usuario de la Base de Datos ........................................................... 60
Figura 28 Usuario Creado Correctamente ................................................................ 61
Figura 29 Asignar el usuario a la base de datos........................................................ 61
Figura 30 Seleccionar Privilegios para la base de datos ........................................... 62
Figura 31 Usuario agregado a la base de datos......................................................... 62
Figura 32 Ingreso a phpMy Admin .......................................................................... 63
Figura 33 Base de datos sin tablas ............................................................................ 63
Figura 34 Subir archivo de tablas a la base de datos ................................................ 64
Figura 35 Importar Base de Datos ............................................................................ 64
Figura 36 Tablas Importadas .................................................................................... 65
Figura 37 Ingresar a Administrador de Archivos ..................................................... 65
Figura 38 Selección de directorio ............................................................................. 66
Figura 39 Cargar directorio ...................................................................................... 66
Figura 40 Activación de Permisos ............................................................................ 67
Figura 41 Selección de Archivo php ........................................................................ 67
Figura 42 Cargar código php .................................................................................... 68
Figura 43 Ventana Administrador de Archivos- Actualizar ..................................... 68
Figura 44 Archivo php cargado al servidor .............................................................. 69
XVII
Figura 45 Extraer Archivos php ............................................................................... 70
Figura 46 Aceptar Extraer Archivos ........................................................................ 70
Figura 47 Proceso de Extracción Archivo ................................................................ 70
Figura 48 Proceso de Extracción de Resultados ....................................................... 71
Figura 49 Archivo php cargado correctamente ........................................................ 71
Figura 50 Pantalla Tienda Virtual-Usuario .............................................................. 72
Figura 51 Pantalla Tienda Virtual-Administrador ................................................... 72
Figura 52 Escritorio de PC ....................................................................................... 73
Figura 53 Navegador Mozilla ................................................................................... 73
Figura 54 Inicio de Sesión ........................................................................................ 74
Figura 55 Menú Administrador ................................................................................ 74
Figura 56 Menú Inicio .............................................................................................. 75
Figura 57 Menú Usuarios ......................................................................................... 75
Figura 58 Agregar Nuevo Usuario .......................................................................... 76
Figura 59 Agregar Usuario ....................................................................................... 76
Figura 60 Ingreso de Datos de Usuario .................................................................... 77
Figura 61 Editar Usuario .......................................................................................... 78
Figura 62 Editar Usuario .......................................................................................... 79
Figura 63 Inactivar Usuario ...................................................................................... 80
Figura 64 Mensaje Confirmación Inactivar Usuario ............................................... 80
Figura 65 Menú Categorías ...................................................................................... 81
Figura 66 Pantalla Principal Ver Menús Categorías................................................. 82
Figura 67 Agregar Nueva Categoría ......................................................................... 82
XVIII
Figura 68 Agregar Categoría .................................................................................... 83
Figura 69 Insertar Categoría ..................................................................................... 83
Figura 70 Ver Categoría Ingresada Menú Administrador ........................................ 84
Figura 71 Ver Categoría Ingresada Menú Usuario ................................................... 84
Figura 72 Editar Categoría ........................................................................................ 85
Figura 73 Editar Categoría ........................................................................................ 85
Figura 74 Guardar Cambios de Categoría ................................................................ 86
Figura 75 Eliminar Categoría ................................................................................... 86
Figura 76 Confirmación mensaje Eliminar Categoría .............................................. 87
Figura 77 Administrar Subcategoría ......................................................................... 88
Figura 78 Agregar Nueva Subcategoría ................................................................... 88
Figura 79 Guardar Cambios de Subcategoría ........................................................... 89
Figura 80 Ver Subcategoría Ingresada Menú Administrador ................................... 89
Figura 81 Ver Subcategoría Ingresada Menú Usuario ............................................. 90
Figura 82 Eliminar Subcategoría .............................................................................. 90
Figura 83 Mensaje de Confirmación Eliminar Subcategoría ................................... 91
Figura 84 Menú Productos........................................................................................ 92
Figura 85 Agregar Nuevo Producto .......................................................................... 92
Figura 86 Campos a Ingresar del Producto ............................................................... 93
Figura 87 Ingreso de Datos de Producto ................................................................... 94
Figuran 88 Datos Ingresados de Producto ................................................................ 94
Figura 89 Datos Ingresados de Producto .................................................................. 95
Figura 90 Ingreso de imágenes de Producto ............................................................. 96
XIX
Figura 91 Ver Producto Ingresado Menú Administrador ......................................... 97
Figura 92 Ver Producto Ingresado Menú Usuario .................................................... 97
Figura 93 Ver Detalles de Producto .......................................................................... 98
Figura 94 Opción Limpiar Campo de Producto ....................................................... 98
Figura 95 Opción Retornar al Menú Principal ......................................................... 99
Figura 96 Editar Producto ......................................................................................... 99
Figura 97 Guardar Cambios de Producto ............................................................... 100
Figura 98 Eliminar Producto .................................................................................. 101
Figura 99 Confirmación de Mensaje Eliminar Producto ........................................ 101
Figura 100 Comentarios de Producto ..................................................................... 102
Figura 101 Generación de Código QR ................................................................... 103
Figura 102 Foto De Código QR.............................................................................. 103
Figura 103 Dirección de la Tienda Virtual ............................................................. 104
Figura 104 Selección de Navegador para Abrir Código QR .................................. 104
Figura 105 Ingreso a la Tienda Virtual con Código QR ......................................... 105
Figura 106 Menú Pedidos ....................................................................................... 106
Figura 107 Ver Detalle de Pedido .......................................................................... 106
Figura 108 Seleccionar Estado de Pedido .............................................................. 107
Figura 109 Generar Factura .................................................................................... 108
Figura 110 Confirmación de Mensaje Generar Factura ......................................... 108
Figura 111 Menú Facturas ...................................................................................... 109
Figura 112 Seleccionar Estados de Factura ............................................................ 110
Figura 113 Menú Ciudades ..................................................................................... 111
XX
Figura 114 Agregar Nuevo País ............................................................................. 111
Figura 115 Ingresar País ......................................................................................... 112
Figura 116 Editar País ............................................................................................ 112
Figura 117 Guardar Cambios -Editar País .............................................................. 113
Figura 118 Eliminar País ........................................................................................ 113
Figura 119 Mensaje de Confirmación - Eliminar País ........................................... 114
Figura 120 Administrar Provincia .......................................................................... 114
Figura 121 Agregar Nueva Provincia ..................................................................... 115
Figura 122 Ingresar Provincia ................................................................................ 115
Figura 123 Editar Provincia .................................................................................... 116
Figura 124 Guardar Cambios - Provincia ............................................................... 117
Figura 125 Eliminar Provincia................................................................................ 117
Figura 126 Mensaje Confirmación - Eliminar Provincia ...................................... 118
Figura 127 Administrar Ciudad .............................................................................. 118
Figura 128 Agregar Nueva Ciudad ......................................................................... 119
Figura 129 Ingreso de Ciudad................................................................................ 119
Figura 130 Editar Ciudad........................................................................................ 120
Figura 131 Guardar Cambio - Ciudad .................................................................... 120
Figura 132 Eliminar Ciudad ................................................................................... 121
Figura 133 Confirmación de Mensaje – Eliminar Ciudad ...................................... 121
Figura 134 Configuración Tienda Virtual .............................................................. 122
Figura 135 Configuración Tienda Virtual .............................................................. 123
Figura 136 Guardar Cambios - Configuración Tienda Virtual ............................... 124
XXI
Figura 137 Menú Envio .......................................................................................... 125
Figura 138 Agregar fila de Intervalo de Valores .................................................... 126
Figura 139 Guardar Intervalo de Valores ............................................................... 126
Figura 140 Eliminar Fila de Intervalo de Envío ..................................................... 127
Figura 141 Cerrar Sesión - Administrador ............................................................. 127
Figura 142 Menú Principal Tienda Virtual ............................................................. 128
Figura 143 Buscar Productos - Buscador ............................................................... 129
Figura 144 Producto Encontrado - Buscador .......................................................... 129
Figura 145 Buscar Producto - Por Categoría .......................................................... 130
Figura 146 Buscar Producto - Subcategoría .......................................................... 131
Figura 147 Detalle de Producto .............................................................................. 131
Figura 148 Inicio de Sesión - Usuario .................................................................... 132
Figura 149 Nuevo Usuario - Registrarse ................................................................ 132
Figura 150 Campos para Registro de Nuevo Usuario ............................................ 133
Figura 151 Ingreso de Datos ................................................................................... 133
Figura 152 Ingreso a la cuenta SellComp ............................................................... 134
Figura 153 Ingreso a Cuenta SellComp .................................................................. 134
Figura 154 Olvidó La Contraseña........................................................................... 135
Figura 155 Solicitud de Contraseña ........................................................................ 135
Figura 156 Mensaje de Confirmación - Envio de Contraseña ................................ 136
Figura 157 Verificar Correo ................................................................................... 136
Figura 158 Seleccionar de Cantidad de Producto ................................................... 137
Figura 159Agregar Ítem ......................................................................................... 138
XXII
Figura 160 Mensaje de Aviso - ítem Agregado ...................................................... 138
Figura 161 Ítem Agregado en el Carrito ................................................................. 139
Figura 162 Ítem Agregado por Cantidad ................................................................ 140
Figura 163 Mi Cesta ............................................................................................... 141
Figura 164 Editar Mi Cesta..................................................................................... 142
Figura 165 Resumen de Valores de Pedido ............................................................ 142
Figura 166 Envio y Dirección de Facturación ........................................................ 143
Figura 167 Generación de Orden de Pago .............................................................. 144
Figura 168 Opción de Pago - PayPal ...................................................................... 144
Figura 169 Pago con Cuenta PayPal ....................................................................... 145
Figura 170 Datos de Cuenta PayPal ....................................................................... 146
Figura 171 Opción de Pago - Transferencia Bancaria ............................................ 147
Figura 172 Imprimir y/o Terminar - Orden de Pago .............................................. 147
Figura 173 Mis Facturas ......................................................................................... 148
Figura 174 Ver Factura ........................................................................................... 149
Figura 175 Mis Pedidos .......................................................................................... 150
Figura 176 Ver Mis Pedidos ................................................................................... 150
Figura 177 Redes Sociales ...................................................................................... 151
Figura 178 Información de la Empresa ................................................................. 152
Figura 179 Acerca de SellComp ............................................................................. 152
Figura 180 Protección al Comprador ...................................................................... 153
Figura 181 Políticas de Privacidad ......................................................................... 154
Figura 182 Términos y Condiciones....................................................................... 154
XXIII
Figura 183 Cerrar Sesión ........................................................................................ 155
Tienda Virtual SellComp
Ingeniería de Sistemas Página 1
1 TEMA
Desarrollo e implementación de una tienda virtual para una empresa de distribución
de productos tecnológicos.
2 RESUMEN EJECUTIVO
En la actualidad el Cantón La Troncal se viene manejando como un referente
comercial en la provincia del Cañar y el tema de comercialización de insumos electrónicos
ha tomado su espacio de manera acelerada en el diario vivir de sus habitantes.
Por esta razón la empresa SellComp como competencia, requiere implementar un
servicio de mecanismo electrónico para mejorar la forma de mostrar los productos de una
tienda física; llegando asi a aumentar el nivel ventas de dicho negocio.
Esta documentación está distribuida de la siguiente forma:
En la parte iniciativa, se hará mención de los antecedentes como empresa, las TIC
como un objeto de soporte indispensable para el beneficio de la empresa, así mismo,
también podemos observar el estudio de los diferentes aspectos necesarios y organizativos
para iniciar el desarrollo la Tienda Virtual.
Capítulo I, las herramientas tecnológicas a ser manipuladas en el diseño y
desarrollo del sistema, tomando en cuenta los aspectos más sobresalientes de todas ellas.
Capítulo II, se formalizará el análisis y diseño del sistema, plan de desarrollo de
software, se analizará el sistema, tomando tablas a utilizarse.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 2
Capítulo III, se definirá el manual de usuario narrando de forma completa el
funcionamiento del sistema.
Al Final de este trabajo se mencionará conclusiones y recomendaciones del
proyecto, el cronograma de actividades, el presupuesto, el glosario y la bibliografía.
3 ANTECEDENTES Y JUSTIFICACIÓN
3.1 ANTECEDENTES
SellComp se dedica a la venta, reparación y mantenimiento de equipos
computacionales.
Actualmente la publicidad de sus servicios e insumos se gestionan por medios
impresos y la modalidad de sus transacciones comerciales implica que el cliente debe
acercarse personalmente a las instalaciones de la empresa para pedir cotizaciones y realizar
su respectiva compra.
Cuando la mercadería ha salido del local, la persona encargada de la parte
administrativa emite manualmente una factura al consumidor y esto conlleva que el proceso
se retrase.
3.2 JUSTIFICACIÓN
La Tienda Virtual perfeccionará los métodos existentes de venta en la empresa
SellComp permitiendo ejecutarlos de manera eficaz, fácil confiable y dinámica.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 3
Con la ejecución de la Tienda Virtual se logrará la satisfacción de las necesidades
y/o requerimientos de los clientes, por ejemplo:
El tener acceso a los productos las 24 horas del día, posicionamiento de la marca
SellComp, entre otra más.
3.3 ORGANIZACIONES PARTICIPANTES
El proceso de este proyecto se generará con la participación total y exhaustiva de la
estudiante de la Carrera de Ingeniería de Sistemas de la Universidad Católica de Cuenca
sede San Pablo de La Troncal, quien se compromete a ejecutar los requerimientos de
SellComp; encargándose el área administrativa a entregar la información y requerimientos
técnicos que la desarrolladora del proyecto requiera.
4 DESCRIPCIÓN DEL PROYECTO
4.1 PROPÓSITO
Implantar una tienda virtual que permita al consumidor realizar una transacción de
compra desde cualquier parte del mundo con un servicio de primera calidad satisfaciendo
sus necesidades y requerimientos.
4.1.1 OBJETIVO GENERAL
Agilizar el sistema de ventas de la empresa con un mejoramiento en cuanto a
publicidad y ejecución de transacción, esto con la finalidad de buscar nuevos mercados o
clientes.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 4
4.1.2 OBJETIVOS ESPECIFICOS
Buscar nuevos clientes
Mejorar la magnitud de ventas de SellComp
Ofrecer al cliente un catálogo electrónico
Fidelizar los clientes que existen
Dar a conocer la empresa en nuevo medio
4.2 METODOLOGÍA
4.2.1 METODOLOGÍA DE TRABAJO
En la creación de este trabajo se ha utilizado técnicas claves de investigación puesto
que este mostrará resultados en base a conocimientos encontrados en el desarrollo,
ejecución e implementación del proyecto y alcanzar con méritos el objetivo.
Se ha aplicado las siguientes metodologías investigativas:
Investigación Aplicada; la investigación científica aplicada se propone
transformar el conocimiento 'puro' en conocimiento útil. Tiene por finalidad la búsqueda y
consolidación del saber y la aplicación de los conocimientos para el enriquecimiento del
acervo cultural y científico, así como la producción de tecnología al servicio del desarrollo
integral de las naciones. La investigación aplicada puede ser Fundamental o Tecnológica.1
Se Busca resolver un problema conocido y hallar respuestas a preguntas específicas.
1 https://abarza.wordpress.com/2012/07/01/investigacion-aplicada-vs-investigacion-pura-
basica/
Tienda Virtual SellComp
Ingeniería de Sistemas Página 5
Investigación de Campo; según el autor (Santa Palella y Feliberto Martins (2010)),
define: La Investigación de campo consiste en la recolección de datos directamente de la
realidad donde ocurren los hechos, sin manipular o controlar las variables. Estudia los
fenómenos sociales en su ambiente natural. El investigador no manipula variables debido a
que esto hace perder el ambiente de naturalidad en el cual se manifiesta. 2
Debido a que se realiza los acontecimientos en reunión con el dueño de la empresa
para poder implementar el proyecto y obtener resultados como beneficio.
Investigación Descriptiva; también conocida como la investigación estadística,
describen los datos y este debe tener un impacto en las vidas de la gente que le rodea. Por
ejemplo, la búsqueda de la enfermedad más frecuente que afecta a los niños de una ciudad.
El lector de la investigación sabrá qué hacer para prevenir esta enfermedad, por lo tanto,
más personas vivirán una vida sana.
El objetivo de la investigación descriptiva consiste en llegar a conocer las
situaciones, costumbres y actitudes predominantes a través de la descripción exacta de las
actividades, objetos, procesos y personas.3
Se examinará e identificará de una manera determinada situaciones que se
presentan en el presente proyecto, como es por ejemplo: los clientes, sus gustos e intereses,
2 http://planificaciondeproyectosemirarismendi.blogspot.com/2013/04/tipos-y-diseno-de-la-
investigacion_21.html
3 http://es.wikipedia.org/wiki/Investigaci%C3%B3n_descriptiva
Tienda Virtual SellComp
Ingeniería de Sistemas Página 6
el comportamiento de la competencia, conocer las preferencias en cuanto a marcas de los
usuarios.
4.2.2 METODOLOGÍA DE PROGRAMACIÓN
El diseño de la Tienda virtual se ha basado en una arquitectura Multicapas de tres
capas lógicas.
4.2.2.1 MODELO DE 3 CAPAS
Figura 1 Modelo de 3 Capas
Tienda Virtual SellComp
Ingeniería de Sistemas Página 7
4.2.2.1.1 CAPA DE PRESENTACIÓN
Aquí se encuentra el código que permite presentar los resultados al usuario
mediante tablas, listas, botones, entre otros que hacen efectiva la exposición de los datos.
También se localiza el código de las hojas de estilo CSS que suministra imagen a la interfaz
de usuarios.
En los escenarios de esta capa están ligadas situaciones tales como usabilidad y
adaptabilidad.
Figura 2 Diseño de la Tienda Virtual
Se encuentra desarrollada por todos los documentos que envía el servidor al
navegador, de esta manera presenta al usuario la información que ha solicitado acerca de
todos los servicios que ofrece la empresa.
Esta capa nos ayuda con:
Tienda Virtual SellComp
Ingeniería de Sistemas Página 8
Obtención e información del usuario.
Acoger los resultados del proceso de los servicios de negocios.
Presentar estos resultados al usuario.
Figura 3 Menú Principal de la Tienda Virtual
La interfaz de cliente ha sido programada de tal manera que resulte grato, intuitivo y
fácil de utilizar. Todas las páginas de la Tienda Virtual están compuestas por:
Una cabecera donde se muestra el logo.
Un menú desde el que se puede acceder a ver los productos por categoría.
Un catálogo electrónico que proporciona una vista organizada.
Una columna izquierda con la ventana de categorías y subcategorías.
Puede acceder y registrarte a la tienda SellComp.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 9
La ventana principal en la que se muestra toda la información al usuario y se
recogen los da datos que este introduzca.
Ventanas de datos, políticas, términos y condiciones de la empresa
SellComp.
Menú de redes sociales.
Una vista detallada de cada producto.
Una vista que confirmación de la compra.
4.2.2.1.2 CAPA DE NEGOCIO
Se llama capa de negocio porque aquí se establecen todos los reglamentos que
deben cumplirse. Esta capa participa con la capa de presentación, para recibir las
solicitudes y demostrar los resultados, y con la capa de datos (persistencia), para solicitar al
gestor de base de datos el almacenaje o la recuperación de estos.
La capa de negocio es responsable de:
• Recibir la entrada del nivel de presentación.
• Interactuar con los servicios de datos para ejecutar las operaciones de almacenaje o
recuperación de estos.
• Enviar el resultado procesado al nivel de presentación.
Ejemplo:
Una vista de la cesta de la compra que deja a los clientes revisar y modificarlos
contenidos de su cesta.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 10
4.2.2.1.3 CAPA DE PERSISTENCIA
En esta capa se desarrolló el registro de conexión a la base de datos con los archivos
de acceso al login de usuario, almacenamiento, modificado y borrado de datos de los ítems:
cliente, categorías, productos, proveedor, facturas y reportes con la extensión (.php).
Todos los documentos obtenidos en esta capa reciben instrucciones y solicitudes de
la capa de negocio.
La capa de persistencia es responsable de:
• Almacenar los datos.
• Recuperar los datos.
• Mantener los datos.
• La integridad de los datos.
4.3 PERSONAL
En el desarrollo del proyecto intervendrán los siguientes:
4.3.1 DIRECTOR
Ing. Stalin Jara, organiza y guía en la elaboración del proyecto, con la intensión de
llegar a cumplir los objetivos planteados.
4.3.2 EJECUTORA
La ejecución del proyecto está a cargo de:
Tienda Virtual SellComp
Ingeniería de Sistemas Página 11
Rosa Elisabeth Palacios Bustamante
Sera la encargada de recopilar, analizar, diseñar, programar datos e implementación
del sistema.
4.4 SUPUESTOS CLAVES
La ejecución del sistema tendrá como objetivo principal adoptarse a las peticiones y
necesidades del cliente.
El proyecto dará la seguridad apropiada al cliente en cuanto a protección de la
información personal que brinde a la empresa.
Se desea que los datos procesados de la Tienda Virtual se den de manera cierta
confiable y a la brevedad posible con la manipulación de las diferentes herramientas
tecnológicas.
La funcionabilidad de la página dará al cliente la seguridad que sus datos serán
tratados por el personal que opera la página (administrador).
5 ELEMENTOS ESTRATÉGICOS
5.1 PARTICIPACIÓN
El proyecto implica la intervención de los siguientes elementos:
Tienda Virtual SellComp
Ingeniería de Sistemas Página 12
Ing. Carlos Orellana Orellana, Decano de la UNIVERSIDAD CATÓLICA DE
CUENCA SEDE SAN PABLO DE LA TRONCAL, que controla las funciones que
realiza el personal que labora en el mismo.
Sr. Pablo Espinoza, Propietario responsable de SellComp, que otorga los proceso de
control de información de la empresa.
Ing. Stalin Jara, Director del Trabajo Final, quien colaborara en el asesoramiento
para el correcto desempeño de la Tienda Virtual.
5.2 SOSTENIBILIDAD
La estructura y composición de la Tienda Virtual permite al usuario la oportunidad
de compensar todas sus demandas puesto que el sitio web dispondrá de una interfaz
estéticamente agradable y a su vez en la parte técnica estará manejando una información
siempre verídica y actualizada dando asi la comodidad y sobre todo la seguridad cuando se
haga uso del mismo.
También mediante este proyecto se pretende agilizar los mercados para el cliente
brindando asi un servicio de calidad.
5.3 GÉNERO
La Tienda Virtual, va enfocada directamente a los usuarios en general, quienes
obtendrán todas las ventajas que estarán en este sitio, en beneficio de la población.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 13
CAPÍTULO I
HERRAMIENTAS
DE DISEÑO
Y PROGRAMACIÓN
Tienda Virtual SellComp
Ingeniería de Sistemas Página 14
6 HERRAMIENTAS DE DISEÑO Y PROGRAMACIÓN
6.1 PHP
(Acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código
abierto muy popular especialmente adecuado para el desarrollo web y que puede ser
incrustado en HTML.4
6.1.1 ¿POR QUÉ UTILIZAR PHP?
Las razones de utilizar este lenguaje se deben a su poder y sencillez.
PHP bien es un software libre, no es necesario pagar para poder utilizarlo (como lo es con
asp) y una de sus grandes cualidades es su versatilidad al momento de escribir código, su
sencillez en la sintaxis, e inclusive su seguridad.
Por lo tanto las razones:
6.1.2 COSTO
Primero que nada es gratuito, y con documentación muy amplia en internet, por lo
general no tardamos en encontrar tutoriales y guías gratuitas acerca de cómo utilizar este
lenguaje.
6.1.3 SENCILLEZ Y VERSATILIDAD
PHP es un lenguaje de una sintaxis muy simple, y fácil de aprender, además posee
una gran variedad de funciones que pueden ser utilizadas para mejorar el rendimiento de
nuestros programas.
4 http://php.net/manual/es/intro-whatis.php
Tienda Virtual SellComp
Ingeniería de Sistemas Página 15
6.1.4 SEGURIDAD
PHP es un lenguaje de uso muy común en la web, además de ser libre, esto significa
que una inmensa comunidad de programadores que utilizan este lenguaje están cooperando
para la mejora del motor de PHP, por lo cual es cada vez más seguro y estable a medida que
pasa el tiempo y aumenta su versión.5
6.2 ¿QUÉ ES MYSQL?
Es un sistema de gestión de bases de datos relacional, fue creada por la empresa
sueca MySQL AB, la cual tiene el copyright del código fuente del servidor SQL, así como
también de la marca.
MySQL es un software de código abierto, licenciado bajo la GPL de la GNU,
aunque MySQL AB distribuye una versión comercial, en lo único que se diferencia de la
versión libre, es en el soporte técnico que se ofrece, y la posibilidad de integrar este gestor
en un software propietario, ya que de otra manera, se vulneraría la licencia GPL.
El lenguaje de programación que utiliza MySQL es Structured Query Language
(SQL) que fue desarrollado por IBM en 1981 y desde entonces es utilizado de forma
generalizada en las bases de datos relacionales.
6.2.1 HISTORIA DE MYSQL
MySQL surgió alrededor de la década del 90, Michael Windenis comenzó a usar
mSQL para conectar tablas usando sus propias rutinas de bajo nivel (ISAM). Tras unas
primeras pruebas, llegó a la conclusión de que mySQL no era lo bastante flexible ni rápido
5 http://codigoprogramacion.com/articulos/programacionweb/ventajas-de-usar-php.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 16
para lo que necesitaba, por lo que tuvo que desarrollar nuevas funciones. Esto resulto en
una interfaz SQL a su base de datos, totalmente compatible a mSQL.
El origen del nombre MySQL no se sabe con certeza de donde proviene, por un lado
se dice que en sus librerías han llevado el prefijo “my” durante los diez últimos años, por
otra parte, la hija de uno de los desarrolladores se llama My. Así que no está claramente
definido cuál de estas dos causas han dado lugar al nombre de este conocido gestor de bases
de datos.
6.2.3 CARACTERÍSTICAS PRINCIPALES
Inicialmente, MySQL carecía de algunos elementos esenciales en las bases de datos
relacionales, tales como integridad referencial y transacciones. A pesar de esto, atrajo a los
desarrolladores de páginas web con contenido dinámico, debido a su simplicidad, de tal
manera que los elementos faltantes fueron complementados por la vía de las aplicaciones
que la utilizan. Poco a poco estos elementos faltantes, están siendo incorporados tanto por
desarrolladores internos, como por desarrolladores de software libre.
En las últimas versiones se pueden destacar las siguientes características
principales:
El principal objetivo de MySQL es velocidad y robustez.
Soporta gran cantidad de tipos de datos para las columnas.
Gran portabilidad entre sistemas, puede trabajar en distintas plataformas y sistemas
operativos.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 17
Cada base de datos cuenta con 3 archivos: Uno de estructura, uno de datos y uno de
índice y soporta hasta 32 índices por tabla.
Aprovecha la potencia de sistemas multiproceso, gracias a su implementación
multihilo.
Flexible sistema de contraseñas (Pasword) y gestión de usuarios, con un muy buen
nivel de seguridad en los datos.
El servidor soporta mensajes de error en distintas lenguas
6.2.4 VENTAJAS
Velocidad al realizar las operaciones, lo que le hace uno de los gestores con mejor
rendimiento.
Bajo costo en requerimientos para la elaboración de bases de datos, ya que debido a
su bajo consumo puede ser ejecutado en una máquina con escasos recursos sin ningún
problema.
Facilidad de configuración e instalación.
Soporta gran variedad de Sistemas Operativos
Baja probabilidad de corromper datos, incluso si los errores no se producen
en el propio gestor, sino en el sistema en el que está.
Conectividad y seguridad
6.2.5 DESVENTAJAS
Un gran porcentaje de las utilidades de MySQL no están documentadas.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 18
No es intuitivo, como otros programas (ACCESS).6
6.3 XAMPP
Es el acrónimo de Cualquier Plataforma (X), Apache (A), MySQL (M), PHP (P) y
Perl (P). Es una distribución de Apache sencilla y ligera que facilita enormemente a los
desarrolladores crear un servidor web local para realizar pruebas. Todo lo que necesita
para configurar un servidor web – la aplicación servidor (Apache), la base de datos
(MySQL), y un lenguaje de script (PHP) – está incluido en un único fichero extraíble.
XAMPP es también multi-plataforma, lo que significa que funciona bien tanto en Linux,
como Mac o Windows. Dado que la mayoría de servidores web actuales usan los mismos
componentes que XAMPP, la transición desde el servidor de prueba local al servidor de
producción es extremadamente fácil también. El desarrollo web utilizando XAMPP es
especialmente amigable para los principiantes, como este popular curso sobre
Dreamweaver, Php y MySQL le demostrará.
6.3.1 ¿QUÉ SE INCLUYE EN XAMPP?
XAMPP tiene cuatro componentes principales. Éstos son:
6.3.1.1 APACHE
Apache es la aplicación de servidor web que procesa y entrega el contenido web a
un ordenador. Apache es el servidor web más popular en internet, haciendo funcionar casi
el 54% de todas las páginas web.
6 http://www.gridmorelos.uaem.mx/~mcruz//cursos/miic/MySQL.pdf
Tienda Virtual SellComp
Ingeniería de Sistemas Página 19
6.3.1.2 MySQL
Cada aplicación web, ya sea simple o compleja, requiere una base de datos para
almacenar los datos que recoge. MySQL, que es de código abierto, es el sistema gestor de
base de datos más popular. Alimenta desde websites de aficionados hasta plataformas
profesionales como WordPress.
6.3.1.3 PHP
PHP son las siglas de Preprocesador de Hipertexto. Es un lenguaje de script del
lado del servidor que hace funcionar algunas de las páginas web más famosas del mundo,
incluyendo WordPress y Facebook. Es de código abierto, relativamente fácil de aprender,
y funciona perfectamente con MySQL, lo que lo ha hecho una opción muy popular para
los desarrolladores web.
6.3.1.4 PERL
Perl es un lenguaje de programación dinámico y de alto nivel que se usa
ampliamente en la programación de redes, la administración de sistemas, etc. Aunque
menos popular para el desarrollo web, Perl tiene un montón de aplicaciones específicas.
Diferentes versiones de XAMPP pueden incluir componentes adicionales como
phpMyAdmin, OpenSSL, etc. para crear servidores web completos.7
7 https://www.udemy.com/blog/tutorial-de-xampp-como-usar-xampp
Tienda Virtual SellComp
Ingeniería de Sistemas Página 20
6.4 JAVASCRIPT
(Abreviado comúnmente "JS") es un lenguaje de programación interpretado,
dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en
prototipos, imperativo, débilmente dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side),
implementado como parte de un navegador web permitiendo mejoras en la interfaz de
usuario y páginas web dinámicas4 aunque existe una forma de JavaScript del lado del
servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por
ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es
también significativo.
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y
convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no están
relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las
páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una
implementación del Document Object Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar
operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones
Tienda Virtual SellComp
Ingeniería de Sistemas Página 21
del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las
sentencias van descargándose junto con el código HTML.8
6.5 HTML
Es el lenguaje que se emplea para el desarrollo de páginas de internet. Está
compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla.
HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a
otras páginas, saltos de línea, listas, tablas, etc.
HTML nació públicamente en un documento llamado HTML Tags (Etiquetas
HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta
publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente
simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han
dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta
manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la
historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el
utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a
prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de
este curso es aprenderlos fundamentos de HTML y entender cómo funciona, no conocer
la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la
versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre
el lenguaje es capaz de adaptarse a las características particulares de una versión sin
8 http://es.wikipedia.org/wiki/JavaScript
Tienda Virtual SellComp
Ingeniería de Sistemas Página 22
problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos
hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los
continuos cambios que tienen lugar en el ámbito de los desarrollos web.9
6.6 ADOBE DREAMWEAVER
Es una aplicación en programa de estudio (basada en la forma de estudio de Adobe
Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones
Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido
por Adobe Systems) es uno de los programas más utilizados en el sector del diseño y la
programación web por sus funcionalidades, su integración con otras herramientas
como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web
Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es
de código abierto) y tiene soporte tanto para edición de imágenes como para animación a
través de su integración con otras. Hasta la versión MX, fue duramente criticado por su
escaso soporte de los estándares de la web, ya que el código que generaba era con
frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se
ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de
Macromedia por parte de Adobe. Las letras CS significan Creative Suite.
9 http://www.aprenderaprogramar.com/index.php?option=com
Tienda Virtual SellComp
Ingeniería de Sistemas Página 23
La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización, puesto que en este programa sus rutinas (como la de insertar un
hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que
le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa
no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy
fluido y todo ello permite que programadores y editores web hagan extensiones para su
programa y lo pongan a su gusto.
Las versiones originales de la aplicación se utilizaban como simples
editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web
como CSS, JavaScript y algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente
mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para
la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas
basadas en UNIX utilizando programas que implementan las API's de Windows, tipoWine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de
cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web
fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML
más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la
ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la
aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 24
desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no
cumplía con los estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar
páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el
exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web
instalados en su ordenador para pre visualizar las páginas web. También dispone de
herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la
habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de
parámetro especificado, hasta el sitio web completo. El panel de comportamientos también
permite crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación
de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML
WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft
Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por
ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de
tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con
extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se
conocen, son pequeños programas, que cualquier desarrollador web puede escribir
(normalmente en HTML y JavaScript) y que cualquiera puede descargar e instalar,
Tienda Virtual SellComp
Ingeniería de Sistemas Página 25
ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de
una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad
de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van
desde simple efectos rollover hasta completas cartas de compra.
También podría decirse que, para un diseño más rápido y a la vez fácil, podría
complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de
imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más
pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así
utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.10
10
http://es.wikipedia.org/wiki/Adobe_Dreamweaver
Tienda Virtual SellComp
Ingeniería de Sistemas Página 26
CAPÍTULO II
ANÁLISIS Y DISEÑO
DEL SISTEMA
Tienda Virtual SellComp
Ingeniería de Sistemas Página 27
7 ANÁLISIS Y DISEÑO DEL SISTEMA
7.1 PLAN DE DESARROLLO DE SOFTWARE
7.1.1 INTRODUCCIÓN
El propósito del desarrollo de la Tienda Virtual es una versión preparada para ser
contenida en la propuesta obtenida como respuesta al propósito planteado para el desarrollo
del trabajo final previo a la obtención del título de Ingeniero de Sistemas.
Este documento proporciona una perspectiva global del enfoque de progreso de la
Tienda Virtual.
DISEÑO DEL SISTEMA
7.1.2 ALCANCE
Para el procedimiento de desarrollo de la Tienda he tomado búsqueda y
requerimientos prestados por el propietario del local.
7.2 CASOS DE USO
Muestran las funciones que la Tienda Virtual realiza. Representan a los
participantes del proceso de la de la misma.
7.2.1 Caso de Uso: Gestionar Productos
· Actor: Administrador
· Propósito: Almacenar los datos de nuevos productos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 28
· Resumen: El sistema muestra al administrador todos los campos correspondientes
a cada producto. El administrador integra los datos del producto que se desea incorporar. Al
terminar, el sistema lo almacena.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso empieza cuando el
administrador ingresa al sistema e indica
que desea registrar un nuevo producto.
2. El administrador ingresa los datos del
producto: nombre, stock, descripción e
imagen del producto.
4. El administrador elige guardar la
información ingresada.
3. El sistema valida los datos del producto
cumplan con el tipo de producto al que
corresponden.
5. Guarda la información.
Tabla 1 Casos de Uso: Gestionar Productos
· Alternativas:
a. Si los datos del producto que se desea ingresar no pertenecen al formato
correspondiente, vuelve al paso 2.
b. Si los datos no han sido ingresados el sistema indicará el error al administrador
por medio de mensajes.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 29
7.2.2 Caso de Uso: Eliminar producto
· Actor: Administrador.
· Propósito: Eliminar los productos que se deseen del sistema.
· Resumen: El administrador elige el producto que desea eliminar desde una lista
Finalmente el sistema elimina los datos del producto.
· Descripción:
Acción del Actor Respuesta del Sistema
1. El administrador ingresa al sistema e
indica que quiere eliminar un producto.
2. El administrador selecciona desde una
lista el producto que desea eliminar.
3. El sistema verifica que el producto que se
desea eliminar existe.
4. El sistema elimina el producto
seleccionado.
Tabla 2 Casos de Uso: Eliminar producto
· Alternativas:
a. En el caso de que el producto no exista se realiza el paso 1.
7.2.3 Caso de Uso: Modificar datos del producto
·Actor: Administrador.
·Propósito: Permitir al administrador corregir los datos de un producto o
actualizarlos.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 30
·Resumen: El sistema muestra los atributos que desee editar al administrador, este
concluye que datos desea cambiar y el sistema guarda los cambios.
· Descripción:
Acción del Actor Respuesta del Sistema
1. El administrador ingresa al sistema e
indica que quiere modificar un producto.
2. El administrador elige el producto a
modificar.
4. El administrador elige las características
del producto que desea cambiar.
Características tales como: descripción,
stock, IVA, precio de venta e imagen del
producto.
3. El sistema valida los datos que se
ingresaron correspondan al del producto.
5. El sistema valida que los datos que se
desean modificar correspondan al formato
establecido y que hayan sido efectivamente
ingresados.
6. El sistema guarda los cambios hechos.
Tabla 3 Caso de Uso: Modificar datos del producto
· Alternativas:
a. Si los datos que se desean ingresar no corresponden al producto se vuelve al
paso1.
b. Si los datos que se desean ingresar no corresponden al formato establecido o no
han sido efectivamente todos ingresados se vuelve al paso 4.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 31
7.2.4 Caso de Uso: Modificar stock de productos
· Actor: Administrador.
· Propósito: Permitir al administrador actualizar el stock actual.
· Resumen: El sistema permite al administrador modificar el stock de productos,
luego que este stock se modifique quedará almacenado en el sistema.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
administrador ingresa al sistema selecciona
un producto e indica que desea modificar su
stock.
2. El administrador modifica el stock del
producto.
3. El sistema valida que el stock se haya
ingresado correctamente.
4. El sistema muestra el stock actual y una
vez ingresado el nuevo stock se actualiza y
se almacena.
Tabla 4 Caso de Uso: Modificar stock de productos
· Alternativas:
Datos ingresados incorrectamente. Se Ejecuta paso 2.
7.2.5 Caso de uso: Gestionar Cliente
· Actor: Cliente.
· Propósito: Permitir al cliente o administrador identificarse en el sistema.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 32
· Resumen: El usuario para identificarse debe ingresar su mail y contraseña. El
sistema valida los datos ingresados y, si los datos son correctos el sistema muestra las
opciones que le corresponden.
· Descripción.
Acción del Actor Respuesta del Sistema
1. Este caso de uso se inicia cuando el
usuario decide identificarse en el sistema.
2. El usuario ingresa su e-mail,
posteriormente el usuario ingresa la
contraseña.
4. El usuario indica que desea identificarse.
3. El sistema valida los datos ingresados.
5. El sistema verifica que la clave
corresponda al mail del usuario.
6. El sistema indica al usuario que está
autenticado y muestra las opciones que le
corresponden.
Tabla 5 Caso de uso: Gestionar Cliente
· Alternativas:
a. Los datos ingresados: e-mail y contraseña no están ingresados correctamente. Se
ejecuta paso 2.
b. Los datos ingresados, e-mail y contraseña, no son válidos. El sistema envía un
mensaje indicando que los datos ingresados no son correctos. Se ejecuta paso 2.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 33
c. Pueden ocurrir 2 situaciones: La contraseña ingresada no corresponde a la
persona indicada o el cliente no está registrado en el sistema. Se notifica lo ocurrido al
cliente. Se ejecuta paso 2.
7.2.6 Caso de Uso: Registrar nuevo cliente
· Actor: Cliente.
· Propósito: Obtener datos del cliente.
· Resumen: El sistema muestra un formulario al cliente que este debe llenar con sus
datos personales si lo desea, posteriormente el cliente ingresa los datos que se piden y el
sistema almacena los datos.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente ingresa al sistema y desea ingresar
sus datos en un formulario.
2. El cliente ingresa los siguientes datos al
sistema: nombre, apellido, dirección,
correo electrónico, celular, entre otros.
4. El cliente acepta el envío.
3. El sistema valida que todos los datos
hayan sido ingresados y que cumplan con
el formato que acepta el sistema.
5. El sistema almacena los datos del
cliente.
Tabla 6 Caso de Uso: Registrar nuevo cliente
Tienda Virtual SellComp
Ingeniería de Sistemas Página 34
· Alternativas:
a. Si los datos ingresados no son válidos, vuelve al paso 2.
b. Si el cliente no acepta el envío de sus datos se vuelve al paso 1.
7.2.7 Caso de Uso: Modificar datos del cliente
· Actor: Cliente.
· Propósito: Modificar los datos que el cliente desee.
· Resumen: El sistema muestra al cliente un formulario con sus datos, el cliente
cambia los datos que desee de ese formulario. Finalmente los datos modificados se
almacenan.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente ingresa al sistema y desea modificar
sus datos.
2. El cliente ingresa los datos que desea
modificar estos pueden ser: nombre,
apellido dirección, correo electrónico y
celular
5. El cliente acepta la modificación de los
3. El sistema valida que los datos tengan el
formato correcto de caracteres.
4. El sistema valida el ingreso de todos los
datos que son obligatorios: datos
personales, contraseña.
6. El sistema almacena los datos
modificados.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 35
datos.
Tabla 7 Caso de Uso: Modificar datos del cliente
· Alternativas:
a. Si los datos no son del formato correcto entonces se ejecuta el paso 2.
b. Si el cliente no ingresa todos los datos requeridos se muestra un mensaje y se
ejecuta el paso 2.
7.2.8 Caso de Uso: Cambiar contraseña
· Actor: Cliente.
· Propósito: Permitir al cliente que cambie su contraseña.
· Resumen: El sistema entrega la posibilidad al cliente de cambiar su contraseña
actual por una nueva, luego que el cliente cambie su contraseña esta quedará almacenada.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente ingresa al sistema y requiere cambiar
su contraseña.
2. El cliente indica que desea cambiar su
actual contraseña.
3. El cliente ingresa la contraseña actual
4. El sistema valida que la contraseña actual
sea la correcta. Además valida que la
contraseña nueva no sea la misma que la
actual y que cumpla con el tamaño mínimo
de caracteres.
5. El sistema almacena la nueva contraseña.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 36
luego ingresa la contraseña nueva, y la
confirmación.
Tabla 8 Caso de Uso: Cambiar contraseña
· Alternativas:
a. Si el cliente no confirma el cambio de contraseña se vuelve al paso 1.
b. Si la contraseña actual no es correcta o la contraseña nueva es la misma que la
contraseña actual se mostrará un mensaje de error y se ejecutara el paso 3.
7.2.9 Caso de Uso: Recuperar clave olvidada
· Actor: Cliente.
· Propósito: Permitir al cliente recuperar su clave.
· Resumen: El sistema entrega la posibilidad al cliente de recuperar la clave por
medio de un mail que el sistema le hará llegar al cliente. Para esto el cliente colocará su
mail y la clave llegará automáticamente.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente ha olvidado su contraseña y desea
recuperarla.
2. El cliente indica que desea recuperar su
4. El sistema valida que el mail sea
correcto.
5. El sistema envía la clave al mail del
cliente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 37
contraseña.
3. El cliente ingresa su e-mail.
Tabla 9 Caso de Uso: Recuperar clave olvidada
· Alternativas.
a. El e-mail ingresado no es correcto por lo que se ejecuta el paso 3.
7.2.10 Caso de Uso: Mostrar datos de un cliente
· Actor: Administrador.
· Propósito: Permitir al administrador obtener los datos del cliente que se desee.
· Resumen: El sistema entrega al administrador la opción de ver todos los datos de
un cliente determinado., el administrador elige al cliente y el sistema muestra los datos del
cliente respectivo.
Descripción:
Acción del Actor Respuesta del Sistema
1. El administrador ingresa al sistema y
desea conocer los datos de un cliente.
2. El administrador busca al cliente.
3. El sistema valida la existencia del cliente.
4. El sistema muestra los datos
correspondientes al cliente.
Tabla 10 Casos de Uso: Mostrar datos de un cliente
· Alternativas:
a. La búsqueda es incorrecta y ejecuta el paso 2.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 38
7.2.11 Caso de Uso: Gestionar Catálogo
· Actor: Cliente.
· Propósito: Mostrar los productos y sus características a los clientes que accedan al
sistema.
· Resumen: El sistema muestra a los clientes todos los productos y las categorías a
las que pertenecen estos productos, además de dar una información detallada de cada
producto.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente desea ver un producto.
2. El Cliente selecciona la categoría que
desea ver.
4. El cliente Selecciona el producto que
desea ver.
3. El sistema muestra las categorías de
productos.
5. El sistema muestra las características del
producto elegido.
Tabla 11 Caso de Uso: Gestionar Catálogo
7.2.12 Caso de Uso: Agregar producto al carro de compras
· Actor: Cliente.
· Propósito: Permitir al cliente incorporar productos a un carro de compra y enviar
los productos incorporados al vendedor.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 39
· Resumen: El sistema entrega al cliente la posibilidad de ir ingresando los
productos que vaya cotizando en un carro de compra.
· Descripción:
Acción del Actor Respuesta del Sistema
1. El cliente desea incorporar productos a
un carro de compra.
2. El Cliente elige incorporar un producto al
carro de compra.
3. El sistema muestra el carro con el
producto incorporado junto con su precio y
la cantidad.
Tabla 12 Agregar producto al carro de compras
· Alternativas:
a. El cliente decide no incorporar productos al carro de compra por lo que vuelve al
catálogo.
7.2.13 Casos de Uso: Eliminar productos del carro de compras
· Actor: Cliente.
· Propósito: Permitir al cliente eliminar productos del carro de compras.
· Resumen: El sistema entrega al cliente la posibilidad de eliminar los productos del
carro de compras que ya no desee cotizar.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 40
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso comienza cuando el
cliente desea un producto del carro de
compras.
2. El Cliente elige eliminar un producto al
carro de compra.
3. El sistema elimina el producto del carro
de compra y muestra al cliente el carro de
compra sin el producto que eliminó.
Tabla 13 Casos de Uso: Eliminar productos del carro de compras
Alternativas:
a. Si no hay productos que eliminar en el carro de compras, se vuelve al paso 1.
7.2.14 Caso de Uso: Gestionar pedido
· Actor: Administrador.
· Propósito: Permitir al administrador ver los pedidos que estén almacenados en el
sistema.
· Resumen: El administrador busca los pedidos por el estado que éstos tengan, es
decir “En Proceso”, “Anulado” y “Enviado”. El administrador indica el parámetro con el
que se buscarán los pedidos. Finalmente el sistema muestra lo solicitado.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 41
·Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso se inicia cuando el
administrador ingresa al sistema y ve los
pedidos.
2. El administrador busca los pedidos.
3. El sistema busca los pedidos que tengan el
estado especificado por el administrador.
4. El sistema muestra todos los Pedidos que
fueron realizados.
Tabla 14 Caso de Uso: Gestionar pedido
7.2.15 Caso de uso: Cambiar estado a un pedido
· Actor: Administrador.
· Propósito: Cambiar el estado del pedido a “En Proceso”, “Enviado” o “Anulado”
dependiendo del estado actual que tenga cada uno.
· Resumen: Si el estado del pedido es “En Proceso”, el administrador podrá
cambiar el estado a “Enviado”. Si el estado de un pedido es “En Proceso” podrá cambiar el
estado a “Anulado”. El administrador cambia el estado del pedido y el sistema guarda los
cambios realizados.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso se inicia cuando el
administrador desea cambiar el estado de un
pedido. Incluye caso de uso “Pedidos”.
3. El sistema cambia el estado del pedido y
lo almacena.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 42
2. El administrador indica que desea
cambiar el estado al pedido.
Tabla 15 Caso de uso: Cambiar estado a un pedido
7.2.16 Caso de Uso: Mostrar detalle de un pedido
· Actor: Administrador.
· Propósito: El sistema permite al administrador conocer los detalles de un pedido
· Resumen: El administrador selecciona un pedido. Luego el sistema muestra un
informe con datos del cliente, dirección de envío, dirección de facturación, información de
los productos que están en el pedido.
· Descripción:
Acción del Actor Respuesta del Sistema
1. El administrador ingresa al sistema y
desea conocer los detalles de un pedido.
2. El administrador selecciona un pedido.
Incluye caso de uso “Ver Pedidos”.
3. El sistema busca el detalle de ese pedido.
4. El sistema muestra el detalle del pedido.
Tabla 16 Caso de Uso: Mostrar detalle de un pedido
7.2.17 Casos de Uso: Revisar pedidos
· Actor: Cliente.
· Propósito: Permitir al cliente revisar en qué estado están los pedidos que ha
realizado.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 43
· Resumen: El cliente ingresa al sistema para ver los pedidos que ha realizado, y el
sistema muestra todos los pedidos que éste ha efectuado, indicando el estado y la fecha en
la que fue realizado el pedido.
· Descripción:
Acción del Actor Respuesta del Sistema
1. Este caso de uso se inicia cuando el
cliente ingresa al sistema e indica que desea
ver los pedidos que ha realizado.
4. El administrador selecciona un pedido
para ver el detalle de éste.
2. El sistema busca todos los pedidos que ha
realizado el cliente.
3. El sistema muestra el estado y la fecha en
la que fue realizado cada uno de los
pedidos.
5. El sistema busca y muestra el detalle del
pedido indicado.
Tabla 17 Casos de Uso: Revisar pedidos
7.2.18 Caso de Uso: Ver detalle de facturas
· Actores: Administrador, Sistema.
· Propósito: Permitir al administrador ver el detalle de una factura.
· Resumen: El administrador indica que desea conocer el detalle de una factura. El
sistema muestra todos los datos referentes a una factura.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 44
·Descripción:
Acción del Actor Respuesta del Sistema
1. El administrador entra al sistema e indica
que desea ver el detalle de una factura.
2. El administrador selecciona la factura.
3. El sistema muestra todos los datos
referentes a una factura.
Tabla 18 Caso de Uso: Ver detalle de facturas
7.2.19 DIAGRAMA DE SECUENCIA
Este tipo de diagramas muestran los atributos o funciones que va a realizar el
sistema. Son de carácter estático y representan a los miembros principales que interactuarán
en el sistema.
Figura 4 Diagrama de Secuencia
7.3 DETALLE DE LAS TABLAS DEL SISTEMA
Para el desarrollo de la Tienda Virtual se ha creado una base de datos y está
formada por las siguientes tablas:
Tienda Virtual SellComp
Ingeniería de Sistemas Página 45
Tabla carrito
Tabla categoría
Tabla ciudad
Tabla config_envío
Tabla contenido
Tabla detalle_orden_final
Tabla dirección_envio
Tabla orden_final
Tabla país
Tabla productos
Tabla producto_color
Tabla producto_size
Tabla provincia
Tabla subcategoría
Tabla tbl_producto_coment
Tabla user
Tabla users
7.3.1 TABLA: CARRITO
a) Definición: Esta tabla almacena todos los ítems de cada producto seleccionado
por el cliente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 46
b) Descripción física de la tabla.
Figura 5 Tabla Carrito
7.3.2 TABLA: CATEGORÍA
a) Definición: Esta tabla almacena las categorías del menú principal.
b) Descripción física de la tabla.
Figura 6 Tabla Categoría
7.3.3 TABLA: CIUDAD
a) Definición: Esta tabla almacena las ciudades de cada provincia.
b) Descripción física de la tabla.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 47
Figura 7 Tabla Ciudad
7.3.4 TABLA: CONFIG_ENVÍO
a) Definición: Esta tabla almacena los datos de envió de los productos solicitados
por el cliente.
b) Descripción física de la tabla.
Figura 8 Tabla Configuración Envío
7.3.5 TABLA: CONTENIDO
a) Definición: Esta tabla almacena información de la tienda virtual.
b) Descripción física de la tabla.
Figura 9 Tabla Contenido
7.3.6 TABLA: DETALLE_ORDEN_FINAL
a) Definición: Esta tabla almacena los detalles de la orden final del cliente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 48
b) Descripción física de la tabla.
Figura 10 Tabla Detalle de Orden Final
7.3.7 TABLA: DIECCIÓN_ENVIO
a) Definición: Esta tabla almacena la dirección de envío del producto.
b) Descripción física de la tabla.
Figura 11 Tabla Dirección de Envío
Tienda Virtual SellComp
Ingeniería de Sistemas Página 49
7.3.8 TABLA: ORDEN_FINAL
a) Definición: Esta tabla almacena la orden final del cliente.
b) Descripción física de la tabla.
Figura 11 Tabla Orden Final
7.3.9 TABLA: PAÍS
a) Definición: Esta tabla almacena todos los países.
b) Descripción física de la tabla.
Figura 12 Tabla País
7.3.10 TABLA: PRODUCTOS
a) Definición: Esta tabla almacena todos los productos que el administrador
ingrese.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 50
b) Descripción física de la tabla.
Figura 13 Tabla Productos
7.3.11 TABLA: PRODUCTO_COLOR
a) Definición: Almacena los colores de productos ingresados.
b) Descripción física de la tabla.
Figura 14 Tabla Producto Color
Tienda Virtual SellComp
Ingeniería de Sistemas Página 51
7.3.12 TABLA: PRODUCTO_SIZE
a) Definición: Almacena los colores de productos ingresados.
b) Descripción física de la tabla.
Figura 15 Tabla Producto Talla
7.3.13 TABLA: PROVINCIA
a) Definición: Almacena todas las provincias.
b) Descripción física de la tabla.
Figura 16 Tabla Provincia
7.3.14 TABLA: SUBCATEGORÍA
a) Definición: Almacena todas las subcategorías.
b) Descripción física de la tabla.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 52
Figura 17 Tabla Subcategoría
7.3.15 TABLA: TBL_PRODUCTO_COMENT
a) Definición: Almacena los comentarios realizados por los clientes.
b) Descripción física de la tabla.
Figura 18 Tabla Producto Comentarios
7.3.16 TABLA: USER
a) Definición: Almacena los datos de los clientes que se registran en la tienda
b) Descripción física de la tabla.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 53
Figura 19 Tabla Usuario
Tienda Virtual SellComp
Ingeniería de Sistemas Página 54
7.3.17 TABLA: USERS
a) Definición: Almacena los datos de los administradores.
b) Descripción física de la tabla.
Figura 20 Tabla Usuarios
Tienda Virtual SellComp
Ingeniería de Sistemas Página 55
7.4 MODELO ENTIDAD – RELACIÓN
El modelo Entidad - Relación nos muestra todas las relaciones entre tablas.
Figura 21 Modelo Entidad - Relación
Tienda Virtual SellComp
Ingeniería de Sistemas Página 56
CAPÍTULO III
MANUAL DE USUARIO
Tienda Virtual SellComp
Ingeniería de Sistemas Página 57
8 MANUAL DE USUARIO
8.1 INTRODUCCIÓN
Este manual proporciona información detallada como guía, destinada al dueño de la
Empresa SellComp. Al estudiar este manual, el usuario comprenderá el funcionamiento de
aplicación que contiene la tienda virtual, conocerá cada detalle en él expuesto, e inclusive
tendrá una mejor administración. La tienda virtual ha sido desarrollada para beneficio con
un entorno sencillo pero agradable para los clientes y propietario del local comercial, de tal
manera que al interactuar no resulte cansado.
8.2 INSTALACIÓN DE LA TIENDA VIRTUAL
1 Ingresamos al dominio
Abrimos un navegar (Mozilla Firefox) y escribimos sysbrafe.com/cpanel para
ingresar al administrador del dominio.
Figura 22 Ingreso al dominio
Tienda Virtual SellComp
Ingeniería de Sistemas Página 58
Surge la siguiente ventana en la que ingresamos el nombre de usuario y la clave y
damos clic en Iniciar sesión.
Figura 23 Inicio de Sesión de cPanel
2 Crear la Base de Datos
Nuestra tienda está realizada en PHP y MySQL, entonces buscamos la
opción Base de Datos MySQL.
Figura 24 Crear Base de Datos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 59
Definimos el nombre de la base de datos sysbrefe_qrshop y damos clic en Crear una
base de datos.
Figura 25 Definición de nombre de base de datos
Nos Indica que la base de datos fue creada correctamente, damos clic en volver para
regresar al menú.
Figura 26 Base de Datos Creada
Tienda Virtual SellComp
Ingeniería de Sistemas Página 60
3 Crear usuario de la base de datos
Encontramos opción Usuarios de MySQL y escribimos el nombre de usuario y
contraseña:
Nombre de Usuario sysbrafe_admin
Contraseña: shellcomp**
Nota: Esta contraseña es la misma que pondremos en el sistema, para la conexión de
base de datos.
Damos clic en Crear usuario
Figura 27 Crear Usuario de la Base de Datos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 61
El usuario fue creado correctamente
Figura 28 Usuario Creado Correctamente
4 Asignar el usuario a la base de datos
En añadir usuario a la base de datos seleccionamos
Usuario: sysbrafe_admin
Base de Datos: sysbrafe_qrshop
Clic en Añadir
Figura 29 Asignar el usuario a la base de datos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 62
Seccionamos los privilegios para la base de datos como: poder crear tablas,
procedimientos almacenados, borrar tablas, insertar, modificar, todos los permisos y clic en
Hacer cambios.
Figura 30 Seleccionar Privilegios para la base de datos
Se agregó el usuario sysbrafe_admin a la base de datos sysbrafe_qrshop
correctamente.
Figura 31 Usuario agregado a la base de datos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 63
5 Importar las tablas a la base de datos creada sysbrafe_qrshop
En el menú de Cpanel Damos clic en phpMy Admin
Figura 32 Ingreso a phpMy Admin
Observamos que tenemos la base de datos sysbrafe_qrshop creada sin ninguna tabla
ingresada.
Figura 33 Base de datos sin tablas
Tienda Virtual SellComp
Ingeniería de Sistemas Página 64
Damos clic en examinar y seleccionar el archivo de tablas para subir a la base de
datos sysbrafe_qr_sql
Figura 34 Subir archivo de tablas a la base de datos
Clic en Continuar
Figura 35 Importar Base de Datos
Muestra las tablas importadas
Tienda Virtual SellComp
Ingeniería de Sistemas Página 65
Figura 36 Tablas Importadas
6. Subir el Sitio Web
En el Menú de Cpanel
Damos clic en Administrador de archivos
Figura 37 Ingresar a Administrador de Archivos
El administrador de archivos nos va a llevar a un directorio public html www de
nuestro dominio. Damos clic en Go para ir a la carpeta.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 66
Figura 38 Selección de directorio
Clic en cargar
Figura 39 Cargar directorio
Aparece una ventana en la que activamos los permisos 775 para que funcione de
una manera correcta el sistema.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 67
Figura 40 Activación de Permisos
En la misma ventana damos clic en Examinar y subimos el archivo php.
Figura 41 Selección de Archivo php
Observamos que el archivo de código fuente php está cargando.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 68
Figura 42 Cargar código php
Vamos a la pestaña de Administrador de Archivos para dar clic en actualizar.
Figura 43 Ventana Administrador de Archivos- Actualizar
Observamos el archivo.zip está cargado.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 69
Figura 44 Archivo php cargado al servidor
Dentro del servidor, en el archivo php extensión zip, damos clic derecho y
seleccionamos extraer.
Figura 45 Selección de Carpeta para Extraer
Clic en extraer Aquí
Tienda Virtual SellComp
Ingeniería de Sistemas Página 70
Figura 46 Extraer Archivos php
Aceptamos.
Figura 47 Aceptar Extraer Archivos
Extrae todo el sitio.
Figura 48 Proceso de Extracción Archivo
Tienda Virtual SellComp
Ingeniería de Sistemas Página 71
Figura 49 Proceso de Extracción de Resultados
Se encuentra el sitio subido correctamente
Figura 50 Archivo php cargado correctamente
Procedemos abrir el link del sitio web www.sysbrafe.com y observamos la tienda
virtual asignada en el hosting.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 72
Figura 51 Pantalla Tienda Virtual-Usuario
El administrador www.sysbrafe.com/admin
Figura 52 Pantalla Tienda Virtual-Administrador
Tienda Virtual SellComp
Ingeniería de Sistemas Página 73
8.3 INICIAR SESIÓN DE ADMINISTRADOR
Es muy fácil acceder al administrador de nuestro sitio, vamos al computador en el
escritorio escogemos un navegador (Google Chrome, Mozilla Firefox, etc.)
Figura 53 Escritorio de PC
Escribimos la dirección de dominio www.sysbrafe/admin
Figura 54 Navegador Mozilla
Aparecerá un panel en el cual procedemos a ingresar el nombre de usuario y la
contraseña.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 74
En este caso hemos asignado:
Nombre de Usuario: admin
Contraseña: admin
Figura 55 Inicio de Sesión
Al ingresar encontraremos un menú superior donde se podrá encontrar diferentes
opciones, las mismas que permiten al usuario tener un control absoluto en cuanto a
manipulación del sistema se refiere.
Figura 56 Menú Administrador
Tienda Virtual SellComp
Ingeniería de Sistemas Página 75
8.4 MENÚ INICIO
Estas opciones son un atajo para poder ingresar a configuraciones y pedidos que a
continuación vamos a indicar su funcionalidad.
Figura 57 Menú Inicio
8.5 MENÚ USUARIOS
La Finalidad de esta opción es llevar un registro completo de todos los usuarios
(clientes) y a la vez nos permite verificar que comprador se ha registrado a nuestro sitio
web.
Figura 58 Menú Usuarios
Tienda Virtual SellComp
Ingeniería de Sistemas Página 76
8.5.1 Agregar Nuevo Usuario
En esta área podemos manipular los ingresos de los nuevos usuarios que pretenden
ser parte del área asignada a los clientes de esta tienda virtual. Seguidamente damos clic al
botón agregar nuevo.
Figura 59 Agregar Nuevo Usuario
Nos aparecerá la ventana que corresponde a la información personal del nuevo
usuario.
Figura 60 Agregar Usuario
Tienda Virtual SellComp
Ingeniería de Sistemas Página 77
Al ingresar los datos de un nuevo cliente nos quedará de la siguiente manera,
tomando en avance aquellos campos marcados con asterisco rojo que son obligatorios al
momento de registrarse y los restante son opcionales, esto quiere decir que usuario no
tendrá obligatoriedad de llenarlos.
Una vez ingresado los datos de la persona podemos observar que el sistema nos da
tres opciones distribuidas al final de la venta, teniendo así de izquierda a derecha lo
siguiente:
Figura 61 Ingreso de Datos de Usuario
El primer botón con la opción Insertar que nos permite Guardar el nuevo registro, y
a la vez también podemos actualizar cambios que se realicen en un registro previo.
El segundo botón con la opción Limpiar nos permite deshacer completamente los
datos ingresados quedando en blanco para ingresar nuevamente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 78
El tercer botón con la opción Retornar que nos permite dirigirnos a la ventana
principal de usuario.
Tomemos como ventaja también que en esta parte del sistema podemos fijar el
estado en el que va estar el usuario sea Activo o Inactivo. (Flechas rojas)
8.5.2 Editar Usuario
Esta parte comprende específicamente en editar algún tipo de información existente
de un cliente, para ello damos clic en el botón editar.
Figura 62 Editar Usuario
En esta ventana podemos editar información como nombres, apellidos, el usuario, la
contraseña, direcciones, provincia, país, código postal, etc. Todos estos campos de un
usuario que anteriormente fue registrado.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 79
Figura 63 Editar Usuario
Al final de cambiar información damos clic en el botón Actualizar, si ocurriera
algún error y pretendemos volver a llenar datos damos clic en Limpiar y si anhelamos
volver a la página anterior damos clic en el botón anterior regresando así al menú
Administrador de Usuario.
8.5.3 Inactivar Usuario
La siguiente acción de nuestro sitio web nos permite de igual manera tener un
control en la presencia virtual de los usuarios dando como resultado el poder de desactivar
registros de usuarios por cual fuesen los motivos, fácilmente con el mouse damos clic en la
ficha Inactivar como se aprecia en la imagen.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 80
Figura 64 Inactivar Usuario
Nos surge un aviso de confirmación para inactivar al usuario, esta opción la
completa según el caso, prefiriendo por aceptar o cancelar.
Figura 65 Mensaje Confirmación Inactivar Usuario
Tienda Virtual SellComp
Ingeniería de Sistemas Página 81
8.6 Categorías
En esta área del sistema corresponde al tema de administración de mercaderías y
servicios del que va a constar nuestra tienda virtual, esto quiere decir que aquí podrá el
administrador distribuir de una manera objetiva las distintas categorías.
Para ello damos clic en el menú categorías, se aprecia todas las categorías
ingresadas.
Figura 66 Menú Categorías
Antes de continuar cabe recalcar que estas categorías crean el menú principal de
nuestro sitio web de una manera dinámica y armónica. (Vamos abrir la ventana principal
del sitio www.sysbrafe.com para apreciar lo mencionado, aquí podemos fijarnos que hay
un espacio sin llenar en el menú, esto quiere decir que al llenar la nueva categoría desde
nuestro administrador y actualizando la página principal el nuevo campo aparecerá en el
menú.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 82
Figura 67 Pantalla Principal Ver Menús Categorías
8.6.1 Agregar una categoría
Simplemente damos clic en Agregar nuevo
Figura 68 Agregar Nueva Categoría
Aparecerá la siguiente ventana, aquí ingresamos el nombre de la nueva categoría
Tienda Virtual SellComp
Ingeniería de Sistemas Página 83
Figura 69 Agregar Categoría
Vamos a tomar como ejemplo el ingreso de una categoría llamada IMPRESORAS
luego damos clic en el botón Insertar.
Figura 70 Insertar Categoría
Adquirimos la nueva categoría ingresada:
Tienda Virtual SellComp
Ingeniería de Sistemas Página 84
Figura 71 Ver Categoría Ingresada Menú Administrador
Nos vamos a nuestro navegador en el que tenemos nuestra página principal abierta,
la actualizamos y la nueva categoría se ve reflejada ya en nuestro menú.
Figura 72 Ver Categoría Ingresada Menú Usuario
Tienda Virtual SellComp
Ingeniería de Sistemas Página 85
8.6.2 Editar Categorías
Con esta opción podremos dar edición a nuestras categorías en lo que respecta a su
descripción.
Figura 73 Editar Categoría
Seguidamente vamos apreciar un caso de un error voluntario como ejemplo. Al
instante de dar clic en editar nos muestra la siguiente ventana, en el cual vemos que hay un
error en este caso de transcripción.
Figura 74 Editar Categoría
Tienda Virtual SellComp
Ingeniería de Sistemas Página 86
Corregimos el error y damos clic en el botón actualizar para guardar cambios.
Figura 75 Guardar Cambios de Categoría
8.6.3 Eliminar Categorías
Como su nombre lo indica en esta parte podremos quitar ciertas categorías que el
administrador desee eliminar.
Figura 76 Eliminar Categoría
Tienda Virtual SellComp
Ingeniería de Sistemas Página 87
Ejemplo
En este caso procedemos a realizar la eliminación de la categoría denominada
IMPRESORAS.
Procedemos a dar clic en el botón eliminar y nos aparecerá un aviso en nuestra
pantalla en el cual nos da la opción de aceptar o cancelar la eliminación.
Figura 77 Confirmación mensaje Eliminar Categoría
8.7 SUBCATEGORÍA
Significa que vamos agregar opciones a nuestras categorías de una manera
dinámica.
Damos clic en administrar subcategoría de la categoría IMPRESORAS
Tienda Virtual SellComp
Ingeniería de Sistemas Página 88
Figura 78 Administrar Subcategoría
Aparece la siguiente ventana, que nos indica la inexistencia de una subcategoría.
Damos clic en el botón Agregar.
Figura 79 Agregar Nueva Subcategoría
Escribo el nombre de la subcategoría, en este clasificaremos a las impresoras por
marcas.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 89
Figura 80 Guardar Cambios de Subcategoría
Luego de estar seguros del ingreso de la subcategoría procedemos a dar clic en el
botón insertar para guardar los cambios y nos refleja el siguiente resultado.
Figura 81 Ver Subcategoría Ingresada Menú Administrador
Para comprobar lo realizado vamos al menú principal actualizamos página y vemos
el resultado.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 90
Figura 82 Ver Subcategoría Ingresada Menú Usuario
8.7.1 EDITAR SUBCATEGORÍA
Damos clic en botón de acción editar y damos clic en insertar para guardar los
cambios.
8.7.2 Eliminar Subcategorías
Al igual que en el caso de las categorías en esta parte podremos suprimir ciertas
subcategorías que el administrador designe por eliminar.
Para ello damos clic en el botón eliminar
Figura 83 Eliminar Subcategoría
Tienda Virtual SellComp
Ingeniería de Sistemas Página 91
Inmediatamente el sistema nos preguntará en un mensaje si deseamos eliminar la
subcategoría, si estamos de acuerdo en eliminar escogemos el botón Aceptar, caso
contrario Cancelar.
Figura 84 Mensaje de Confirmación Eliminar Subcategoría
8.8 PRODUCTOS
Esta opción nos permite el ingreso de atributos de los productos según las marcas
ingresadas dentro de las subcategorías/categorías.
Nota: Al crear una categoría automáticamente se verá reflejada en productos.
8.8.1 Agregar Producto
Nos ubicamos en el menú Productos y continuando con el ejemplo anterior de
categorías, vamos a dar clic en IMPRESORAS para proceder a llenar los datos del
producto de subcategorías/categoría.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 92
Figura 85 Menú Productos
Como podemos apreciar la Lista de Productos de la categoría IMPRESORAS está
vacía.
Para ingresar un nuevo producto damos clic en el botón Agregar nuevo
Figura 86 Agregar Nuevo Producto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 93
Ahora tenemos la ventana con una serie de campos vacíos, los cuales nos van a
permitir llenar todos los datos del nuevo producto.
Figura 87 Campos a Ingresar del Producto
Tomando el Ejemplo anterior de IMPRESORAS vamos a proceder a llenar los
datos del producto a exhibir.
8.8.1.1 Seleccionamos el campo de Subcategoría, esto significa que vamos a ubicar el
nuevo producto dentro su subcategoría respectiva, en este caso como seleccionamos la
categoría IMPRESORAS automáticamente nos muestra su subcategorías.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 94
Figura 88 Ingreso de Datos de Producto
8.8.1.2 Ingresamos el nombre específico del producto.
8.8.1.3 Llenamos la descripción del producto (Características)
Figuran 89 Datos Ingresados de Producto
8.8.1.4 Introducimos el modelo del producto (Serie).
Tienda Virtual SellComp
Ingeniería de Sistemas Página 95
8.8.1.5 Seleccionamos si el producto amerita IVA (SI-NO)
8.8.1.6 La Cantidad, es nuestro stock esto refiriéndose a cuantos productos voy a tener
disponibles en el local.
8.8.1.7 El campo Fuera de stock: en caso de que cierto producto no estuviese disponible.
8.8.1.8 Dimensión: las dimensiones (alto- ancho) del producto empaquetado.
8.8.1.9 El Peso va definido en libras.
8.8.1.10 Clase de peso: En libras.
Figura 90 Datos Ingresados de Producto
Para terminar el ingreso de datos, también el sistema nos da la opción de insertar
dos imágenes, procedimiento detallado a continuación.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 96
Previamente a este paso creamos una carpeta en donde vamos a guardar las
imágenes del producto, de preferencia en una carpeta matriz que contenga todos los datos
de la tienda virtual.
Regresamos al administrador de productos de la Tienda virtual en la opción subir
una imagen, damos clic en el botón examinar y mediante el explorador de archivos que se
despliega en la ventana buscamos la carpeta y escogemos la imagen de acuerdo al producto
ingresado.
Figura 91 Ingreso de imágenes de Producto
Finalmente para guardar los cambios damos clic en Insertar y nos aparecerá el
producto disponible como vemos a continuación.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 97
Figura 92 Ver Producto Ingresado Menú Administrador
Vista desde la página principal
Figura 93 Ver Producto Ingresado Menú Usuario
Si damos clic en la imagen descubrimos las características del producto.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 98
Figura 94 Ver Detalles de Producto
8.8.2 Limpiar Campo Producto
Esta opción nos permite limpiar los datos y así los campos queden en blanco y
poder ingresar nuevamente información.
Figura 95 Opción Limpiar Campo de Producto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 99
8.10 Retornar Página
Nos ayuda a volver a la página anterior,
Figura 96 Opción Retornar al Menú Principal
Acciones de Producto
Con estas opciones el sistema nos admite optar por una edición a un producto
ingresado anteriormente y/o eliminarlo.
8.8.3 Editar Producto
Escogemos el producto que deseamos dar edición y damos clic en el botón Editar.
Figura 97 Editar Producto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 100
Se presenta la ventana del producto en donde podemos realizar cambios y
actualizaciones correspondientes a productos ingresados con anterioridad y para finalizar
los cambios procedemos a dar clic en el botón Actualizar y se guardaran automáticamente
las ediciones.
Figura 98 Guardar Cambios de Producto
8.8.4 Eliminar Producto
Cuando deseamos excluir un registro, sencillamente nos dirigimos al botón eliminar
del producto respectivo y procede a dar clic en el mismo.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 101
Figura 99 Eliminar Producto
Al hacer esta acción el sistema dará un aviso en el que pondrá el usuario decidir si
desea eliminar o no dicho producto.
Figura 100 Confirmación de Mensaje Eliminar Producto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 102
8.8.5 Comentarios de Usuarios
Mediante esta opción el administrador podrá dar seguimiento a los comentarios que
los usuarios dejen acerca del producto y al mismo tiempo podrá activar o inactivarlos con
solo dar clic en los botones de acción.
Figura 101 Comentarios de Producto
8.9 Código QR
El sistema automáticamente genera código QR que sirve para verificar la
información total del producto.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 103
Figura 102 Generación de Código QR
8.9.1 ¿Cómo funciona esto el Código QR?
Con la ayuda de un teléfono inteligente escaneamos el código QR con cualquier
aplicación lector de código QR.
Figura 103 Foto De Código QR
Tienda Virtual SellComp
Ingeniería de Sistemas Página 104
A continuación seleccionamos abrir con un navegador
Figura 104 Dirección de la Tienda Virtual
Escogemos el navegador de preferencia
Figura 105 Selección de Navegador para Abrir Código QR
Tienda Virtual SellComp
Ingeniería de Sistemas Página 105
Automáticamente nos va a llevar a una página en donde estará la información
detallada del producto al que corresponde dicho código y asi el cliente podrá realizar su
compra desde el dispositivo móvil.
Figura 106 Ingreso a la Tienda Virtual con Código QR
8.10 PEDIDOS
En esta opción el administrador podrá llevar un registro de todos los productos que
el usuario ha solicitado, este sistema permite ver si se hizo el pedido desde un PC o
dispositivo móvil.
También el administrador puede observar diferentes campos en el que se encuentra
sus ventas tales como:
Fecha, Pedido Id, Pedido por, Total, Método de pago, Sitio, Estado de Entrega.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 106
Figura 107 Menú Pedidos
8.10.1 Acciones de Pedido
En esta parte del sistema el administrador está en capacidad de realizar un
seguimiento de sus clientes con sus respectivas compras y a su vez también podrá
modificar el estado en el que estarán los pedidos, dependiendo sea el caso.
8.10.1.1 Ver Pedido y/o Cambiar estado
Para realizar esto, damos clic en el botón de acción Ver Pedido & Cambiar Estado
e inmediatamente el sistema nos llevará a otra ventana en la que el administrador podrá
efectuar los cambios que estime conveniente.
Figura 108 Ver Detalle de Pedido
Tienda Virtual SellComp
Ingeniería de Sistemas Página 107
Una que nos encontremos dentro de la siguiente ventana podremos ver detalles de
sus pedidos junto con la información personal de sus clientes, consiguiendo así realizar sea
él envió la cancelación o la anulación de su pedido.
Figura 109 Seleccionar Estado de Pedido
Nota: Al momento que el cliente realiza una compra, automáticamente la orden de
pedido llega al correo del administrador de SellComp.
8.11 Generar Factura
Luego que el cliente haya dado una respuesta en confirmación o no de su compra
aceptando los términos de venta que impone la empresa, se procede a generar la factura
dando clic en el botón de Generar Factura.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 108
Figura 110 Generar Factura
Posteriormente confirmamos si deseamos generar o no dicha factura.
Figura 111 Confirmación de Mensaje Generar Factura
Tienda Virtual SellComp
Ingeniería de Sistemas Página 109
8.12 Facturas
Conseguiremos llevar un registro de todos los productos que el usuario ha
solicitado, esta opción permite ver la factura generada anteriormente. También el
administrador puede observar diferentes estados en el que se encuentra sus ventas tales
como:
Fecha de Factura, Factura ID Factura por, Total, Método de pago, Sitio, Estado de
Entrega.
Figura 112 Menú Facturas
8.12.1 Acciones de Factura
En esta parte del sistema el administrador está en capacidad de realizar un
seguimiento de sus clientes con sus respectivas compras y a su vez también podrá
modificar el estado en el que estarán las facturas, dependiendo sea el caso.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 110
8.12.1.1 Ver Factura & Cambiar Estado
Para realizar esto, damos clic en el botón de acción Ver Factura & Cambiar
Estado e inmediatamente el sistema nos llevará a otra ventana en la que el administrador
podrá efectuar los cambios que estime conveniente.
Una vez el no encontremos dentro de la siguiente ventana podremos ver detalles de
sus pedidos junto con la información personal de sus clientes, consiguiendo así realizar sea
él envió la cancelación o la anulación de la factura.
Figura 113 Seleccionar Estados de Factura
8.13 CIUDADES
Con esta opción lograremos gestionar los países, las provincias con sus
respectivas ciudades.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 111
Figura 114 Menú Ciudades
8.13.1 Agregar Nuevo País
Para esto procedemos a dar clic en el botón Agregar nuevo
Figura 115 Agregar Nuevo País
Nos aparece esta ventana en donde ingresamos la descripción del País en el campo
Nombre del País y damos clic en Insertar.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 112
Figura 116 Ingresar País
8.13.2 Editar País
En esta parte del sistema nos permite dar edición a los países ingresados
anteriormente, alcanzando así corregir errores ortográficos o simplemente realizar cambios
que como administrador deseemos, como observamos a continuación en el gráfico.
Damos clic en el botón editar
Figura 117 Editar País
Tienda Virtual SellComp
Ingeniería de Sistemas Página 113
Aparece la siguiente ventana, en donde podemos realizar los cambios requeridos al
nombre del país y guardar los ajustes dando clic en el botón actualizar y observaremos un
mensaje de color rojo que dirá actualizado correctamente.
Figura 118 Guardar Cambios -Editar País
8.13.3 Eliminar país
Conseguiremos suprimir un país dando clic en el botón Eliminar
Figura 119 Eliminar País
Tienda Virtual SellComp
Ingeniería de Sistemas Página 114
Confirmamos la eliminación del país
Figura 120 Mensaje de Confirmación - Eliminar País
8.13.4 Agregar Provincia
Dentro del nuevo país podemos administrar sus respectivas Provincias y a su vez
las ciudades.
A continuación un ejemplo, en cual vamos a dar clic en la opción Administrar
Provincia dentro de su respectivo país en este caso tomamos al país de Costa Rica.
Figura 121 Administrar Provincia
Tienda Virtual SellComp
Ingeniería de Sistemas Página 115
Nos surge la siguiente ventana, en la cual podemos observar que no existe
Provincia.
Damos clic en el botón Agregar Nuevo, esto nos permitirá agregar la Provincia
respectiva de su país.
Figura 122 Agregar Nueva Provincia
En esta ventana procedemos a describir el nombre de la Provincia, tomamos como
ejemplo al país Costa Rica con su provincia Buena Fe y damos clic en Insertar.
Figura 123 Ingresar Provincia
Tienda Virtual SellComp
Ingeniería de Sistemas Página 116
8.13.5 Editar Provincias
Una vez ingresada la nueva provincia, el sistema dará al igual que en los casos
anteriores la opción de corrección del nombre de las Provincias pudiendo así realizar
cambios.
Para ello damos clic en el botón Editar.
Figura 124 Editar Provincia
Ahora una vez dentro la las opciones de edición de Provincias nos surge una
ventana en la que rectificamos su nombre y para guardar cambios damos clic en el botón
actualizar y observaremos un mensaje con texto rojo confirmando que se ha actualizado
correctamente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 117
Figura 125 Guardar Cambios - Provincia
8.13.6 Eliminar Provincias
Tenemos la potestad de borrar Provincias, para ello simplemente tendremos que dar
clic en el botón eliminar y seguidamente nos aparecerá un mensaje de confirmación.
Figura 126 Eliminar Provincia
Tienda Virtual SellComp
Ingeniería de Sistemas Página 118
Figura 127 Mensaje Confirmación - Eliminar Provincia
8.13.7 Agregar Ciudad
Con el mismo procedimiento de países y Provincias damos clic en administrar
ciudades.
Figura 128 Administrar Ciudad
A continuación damos clic en Agregar Nuevo
Tienda Virtual SellComp
Ingeniería de Sistemas Página 119
Figura 129 Agregar Nueva Ciudad
Procedemos a ingresar el nombre de la ciudad y damos clic en insertar.
Figura 130 Ingreso de Ciudad
8.13.8 Editar Ciudad
Con esta opción podremos editar a las ciudades ingresadas, para ello damos clic en
el botón Editar.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 120
Figura 131 Editar Ciudad
Editamos el nombre de la ciudad y guardamos cambios dando clic en Actualizar
Figura 132 Guardar Cambio - Ciudad
8.13.9 Eliminar Ciudad
Damos clic en la opción eliminar
Tienda Virtual SellComp
Ingeniería de Sistemas Página 121
Figura 133 Eliminar Ciudad
Confirmamos su eliminación caso contrario la cancelamos.
Figura 134 Confirmación de Mensaje – Eliminar Ciudad
Tienda Virtual SellComp
Ingeniería de Sistemas Página 122
8.14 CONFIGURACIONES DE TIENDA VIRTUAL
En este menú podremos configurar varias opciones de la Tienda Virtual.
Figura 135 Configuración Tienda Virtual
Usuario: Con esta opción podremos hacer sin problemas cambios al nombre,
pudiendo así ingresar texto y definir como se desee llamar al administrador.
Pasword: Se utiliza una máscara para proteger el ingreso de caracteres los mismos
que deberán ser numérico/alfanumérico, es decir se obtendremos establecer una
contraseña de números o letras y a su vez también una combinación de estas.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 123
Email: Mediante este correo el administrador da seguimiento a los pedidos que le
hacen llegar sus clientes, el administrador debe estar atento, ya que sería el punto
clave para que la tienda virtual realice sus ventas online.
PayPal e-mail: Correo registrado en la cuenta PayPal de la empresa SellComp.
Nombres/Apellidos: Aquí podremos ubicar un texto como encabezado a la página
del administrador, puede llevar el nombre de la empresa o del propietario. (Ver
flecha roja)
Figura 136 Configuración Tienda Virtual
Compañía: Con este campo rellenamos el nombre de la empresa.
Impuesto: Un valor global que se recarga a los productos.
Datos Bancarios: En esta parte podremos fijar los datos de la empresa para los
métodos de pago.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 124
Términos y Condiciones: Estos rigen el uso de la Tienda Virtual. El cliente tiene
la obligación de leerlos detenidamente dado que afectan sus derechos y
responsabilidades de acuerdo con la ley. Si no está de acuerdo con los Términos y
condiciones, no utilice el sitio de la empresa.
Una vez terminada la configuración de nuestra página de administración
procedemos a dar clic en el botón grabar para así guardar todos los cambios efectuados.
Figura 137 Guardar Cambios - Configuración Tienda Virtual
8.15 ENVÍO
Permite definir una tabla de tarifas de gastos de envío dependiente del destino,
intervalo de pesos, al momento que el usuario finaliza el pedido el sistema
automáticamente sumará todos estos valores.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 125
Ingresaremos el valor de acuerdo al peso del producto X.
Los campos a llenar son:
Descripción: Podremos detallar mediante categorías o ítems, los mismos que serán
acordados de acuerdo al peso del producto.
Desde/Hasta: En estos campos asignaremos valores numéricos los mismos que nos
servirán para indicar un intervalo de peso inicial y final.
Costo: Ingresamos el siguiente valor tomando en cuenta cada rango de pesos.
A continuación verificamos el ingreso de la categoría (A) y observamos que el peso
empieza desde 1 hasta 5 libras, siendo asi el costo a cancelar de $ 3.50 por él envió.
Figura 138 Menú Envio
Tienda Virtual SellComp
Ingeniería de Sistemas Página 126
8.15.1 Agregar Fila de Envío
Podemos crear más campos para una descripción de valores, esto lo hará mediante
un clic en el botón Agregar fila.
Figura 139 Agregar fila de Intervalo de Valores
Ejemplo, llenamos los campos del literal F. Y damos clic en Enviar para guardar
cambios.
Figura 140 Guardar Intervalo de Valores
Tienda Virtual SellComp
Ingeniería de Sistemas Página 127
8.15.2 Eliminar Fila de Envío
Podemos excluir filas de los valores de peso de producto que creamos conveniente,
esto lo haremos mediante un clic en el botón Eliminar fila.
Como ejemplo procedemos a eliminar el literal F que fue creado anteriormente
dando clic en Enviar para guardar los cambios.
Figura 141 Eliminar Fila de Intervalo de Envío
8.16 CERRAR SESIÓN ADMINISTRADOR
Si deseamos cerrar sesión simplemente damos clic en Cerrar sesión
Figura 142 Cerrar Sesión - Administrador
Tienda Virtual SellComp
Ingeniería de Sistemas Página 128
USUARIOS
8.17 INGRESAR A LA TIENDA VIRTUAL
Lograremos visitar nuestra tienda virtual digitando en un navegador la siguiente
dirección www.sysbrafe.com
Figura 143 Menú Principal Tienda Virtual
8.18 BUSCAR PRODUCTOS
8.18.1 Buscador
Podremos divisar varias mercancías que están disponibles en el sitio y a su vez
conseguiremos utilizar un buscador, en el cual podrá digitar el nombre de un producto X.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 129
Figura 144 Buscar Productos - Buscador
Ejemplo
Digitamos las palabras claves acerca del producto que deseamos encontrar, en este
caso vamos a buscar un teléfono celular note 3.
Figura 145 Producto Encontrado - Buscador
Tienda Virtual SellComp
Ingeniería de Sistemas Página 130
8.18.2 Buscar por categorías
Se logra buscar un producto dando clic en la ventana de categorías situada en la
parte derecha de la tienda.
Ejemplo
Situamos el cursor en la categoría que deseemos buscar productos, en este caso
vamos a buscar Tablets, para ello damos clic en la palabra Tablet y aparecerán resultados
todos relacionados con la búsqueda.
Figura 146 Buscar Producto - Por Categoría
8.18.3 Buscar por subcategorías.
También podremos hacer la búsqueda de un producto dando clic en la pestaña
desplegable de subcategorías situada en la parte izquierda de la tienda bajo las categorías.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 131
Ejemplo
Buscamos la subcategoría BlackBerry
Figura 147 Buscar Producto - Subcategoría
Los clientes al encontrar un producto podrán verificar las característica con solo dar
clic en la imagen.
Figura 148 Detalle de Producto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 132
8.19 REGISTRARSE
Para poder realizar un pedido el cliente necesita obligadamente tener una cuenta
SHELLCOMP.
Empezamos con el registro dando clic en el botón Iniciar Sesión.
Figura 149 Inicio de Sesión - Usuario
Clic en Nuevo Usuario? Registrarse Aquí.
Figura 150 Nuevo Usuario - Registrarse
Muestra una ventana de Nuevo registro de usuario, con una serie de campos que van
a contener la información necesaria del cliente.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 133
Procedamos a dar un ejemplo de cómo llenar los datos, cabe mencionar aquí se
aprecian áreas acompañadas de un asterisco rojo los cuales significan ser de carácter
obligatorio a llenar.
Figura 151 Campos para Registro de Nuevo Usuario
Ingresamos Datos
Figura 152 Ingreso de Datos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 134
Culminado el ingreso de la información marcando con un visto para aceptar los
términos y condiciones que rige la empresa y terminamos dando clic en el botón
Registrarse Ahora.
En una nueva ventana nos pedirá el ingreso del nuevo usuario junto con la
contraseña, para comprobar el registro del nuevo usuario veamos el siguiente ejemplo.
Figura 153 Ingreso a la cuenta SellComp
Figura 154 Ingreso a Cuenta SellComp
Tienda Virtual SellComp
Ingeniería de Sistemas Página 135
Nota: Si el cliente olvido su contraseña puede solicitarla dando clic en la opción
Olvidó su contraseña.
Figura 155 Olvidó La Contraseña
Ingresamos el Nombre de Usuario
Figura 156 Solicitud de Contraseña
Nos indica un mensaje de Contraseña enviada correctamente al e-mail
Tienda Virtual SellComp
Ingeniería de Sistemas Página 136
Figura 157 Mensaje de Confirmación - Envio de Contraseña
Verificamos el correo
Figura 158 Verificar Correo
8.20 COMPRAS
Para realizar la compra de cierta mercancía debemos realizar la búsqueda mediante
las opciones antes explicadas.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 137
Cuando el usuario haya encontrado y verificado las características de su producto
procederá a realizar el siguiente paso.
Agregar la cantidad que deseemos adquirir dando clic en los botones o
también se puede ingresar con el teclado una cantidad situando el puntero el en campo en
blanco.
Figura 159 Seleccionar de Cantidad de Producto
Estando seguros de la cantidad de productos, procedemos a dar clic en el botón
agregar ítem.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 138
Figura 160 Agregar Ítem
Aparece un mensaje de ítem agregado
Figura 161 Mensaje de Aviso - ítem Agregado
Tienda Virtual SellComp
Ingeniería de Sistemas Página 139
Verificamos el carrito de pedidos, el cual nos indica el número de productos
seleccionados por el cliente.
Figura 162 Ítem Agregado en el Carrito
Podemos continuar con más compras, agregando ítems de acuerdo a cada producto
que desee.
Esta vez vamos a digitar la cantidad 2 y agregamos ítem.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 140
Figura 163 Ítem Agregado por Cantidad
Observamos el carrito de compras que va cuantificando automáticamente el total de
productos.
Cuando el cliente haya culminado con su lista de compras procederá a dar clic en el
número del carrito , para continuar con la orden de pago.
En esta ventana el cliente encontrara varias opciones con respecto a su compra, con
las cuales podrá ver información detallada de los productos tales como Imagen, Código de
ítem, descripción, cantidad, precio y el subtotal.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 141
Figura 164 Mi Cesta
Los clientes pueden eliminar y aumentar los productos a comprar, escribiendo la
cantidad y se procede a dar clic en el botón actualizar ítems y automáticamente aparecerá
un mensaje con el total de elementos que se pretende adquirir.
Ejemplo: En la siguiente imagen nos muestra como incrementó el valor 2 en el
producto Impresoras y al actualizar vemos el mensaje total de 5 ítems a comprar.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 142
Figura 165 Editar Mi Cesta
Encontramos al final de la ventana MI CESTA dos botones, los cuales nos servirán
para:
Continuar Comprando: Permite regresar a la página principal para poder realizar
más compras antes de generar la orden de pedido, damos clic en el botón . Así
también podemos visualizar en la página principal que tenemos la cantidad de pedidos en el
carrito.
Figura 166 Resumen de Valores de Pedido
Tienda Virtual SellComp
Ingeniería de Sistemas Página 143
Proceder a Pagar: Este botón ayuda a continuar con la compra. Para esto damos
clic en el siguiente botón
A continuación surgirá la siguiente ventana para confirmar los datos de dirección
del cliente para él envió y facturación. Damos clic en el botón Proceder a Pagar o Cancelar
si desea abandonar el proceso.
Figura 167 Envio y Dirección de Facturación
Si damos clic en el botón Proceder a Pagar nos aparece la orden de pago ya
generada con las formas de pago disponibles.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 144
Figura 168 Generación de Orden de Pago
Podemos notar en esta orden de pago los datos emitidos por el sistema de la tienda,
los mismos que están desglosados de acuerdo a cada producto de compra-venta
8.20.1 Opciones de Pago
Figura 169 Opción de Pago - PayPal
Tienda Virtual SellComp
Ingeniería de Sistemas Página 145
Generada la orden de pago el cliente podrá seleccionar la forma de cancelación que
hará a la empresa por su compra.
8.20.1.1 Cuenta PayPal
Para utilizar esta forma de pago el cliente deberá realizar una previa registración
Figura 170 Pago con Cuenta PayPal
Tienda Virtual SellComp
Ingeniería de Sistemas Página 146
Figura 171 Datos de Cuenta PayPal
8.20.1.2 Transferencia Bancaria
Para realizar el pago utilizando los servicios de una entidad bancaria podremos
realizar una transacción seleccionando la opción de Transferencia bancaria, podemos
observar que debajo de la orden de pedido generada se encuentran todos los datos
necesarios para proceder a realizar el pago utilizando este método. Y finalmente damos clic
en el botón Proceder con el pago seguro.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 147
Figura 172 Opción de Pago - Transferencia Bancaria
8.20.1.3 Imprimir Orden de Pedido / Terminar
Al momento que seleccionamos la forma de pago segura podemos proceder a
imprimir la orden de pedido, dando clic en el botón imprimir Pedido, caso contrario
seleccione la opción Terminar.
Figura 173 Imprimir y/o Terminar - Orden de Pago
Tienda Virtual SellComp
Ingeniería de Sistemas Página 148
8.21 OPCIONES DENTRO DE LA CUENTA SELLCOMP
8.21.1 Mis Facturas
Una vez ejecutado el pago de la orden de pedido podemos verificar las facturas
emitidas por SellComp por cada compra.
Ejemplo
Damos clic en Mis Facturas
Figura 174 Mis Facturas
Clic en Ver Factura
Tienda Virtual SellComp
Ingeniería de Sistemas Página 149
Figura 175 Ver Factura
8.21.2 Mis Pedidos
Esta opción nos permite verificar el estado de las órdenes de pedido realizadas en la
tienda SellComp.
Ejemplo
Damos clic en mis Pedidos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 150
Figura 176 Mis Pedidos
Clic en Ver Pedido
Figura 177 Ver Mis Pedidos
Tienda Virtual SellComp
Ingeniería de Sistemas Página 151
8.22 REDES SOCIALES
En la actualidad del uso de las redes sociales en el ámbito de negocios es tan
indispensable para el desarrollo económico de las empresas y con nuestra tienda no podría
ser la excepción, por lo tanto se ha implementado bajo nuestras subcategorías el área social
dando así al cliente la facilidad de poder seguirnos y así conocer acerca de nuestros
servicios como comercio.
Ejemplo
Pueden conocer de nuestros servicios dando clic en cualquiera de nuestros sitios
sociales como son Twitter o Facebook.
Figura 178 Redes Sociales
Tienda Virtual SellComp
Ingeniería de Sistemas Página 152
8.23 INFORMACIÓN DE LA EMPRESA.
Toda entidad económica, financiera, social dispone de información personal, la cual
el cliente podrá disponer cuando lo desee con tan solo observar al pie de la tienda una serie
de elementos relacionados con la misma, este es el caso al igual en nuestra tienda virtual.
Figura 179 Información de la Empresa
8.23.1 Acerca de SellComp
En esta sección el usuario podrá encontrar información detallada de la tienda Virtual
“SHELLCOMP”, damos clic en la opción Acerca de SellComp.
Figura 180 Acerca de SellComp
Tienda Virtual SellComp
Ingeniería de Sistemas Página 153
8.23.2 Protección al Comprador.
El cliente puede ver una política de seguridad que brinda la empresa en donde la
tienda se ve comprometida como parte de su prestigio a la entrega segura de un producto o
la devolución del dinero.
Para esto damos clic en la opción Protección al Comprador.
Figura 181 Protección al Comprador
8.23.3 Políticas de Privacidad.
Utilizamos su información personal a fin de cumplir con nuestro compromiso de
brindarle una incomparable experiencia en servicio al cliente. Como parte de esa tarea,
tenemos el compromiso de proteger la privacidad de la información personal que reunimos.
Para comprobar lo expuesto damos clic en la opción Políticas de Privacidad
Tienda Virtual SellComp
Ingeniería de Sistemas Página 154
Figura 182 Políticas de Privacidad
8.23.4 Términos y Condiciones
Es una indicación de la empresa hacia el cliente, especificando las normas que rigen
en ella.
Damos clic en la opción Términos y Condiciones
Figura 183 Términos y Condiciones
Tienda Virtual SellComp
Ingeniería de Sistemas Página 155
8.24 CERRAR SESIÓN CUENTA SHELLCOMP
Al terminar todas las transacciones en el sistema y estemos por abandonar la tienda
virtual, tenemos la obligación de cerrar sesión de nuestra cuenta, esto con el fin de
salvaguardar sus intereses personales.
Figura 184 Cerrar Sesión
Tienda Virtual SellComp
Ingeniería de Sistemas Página 156
9 CONCLUSIONES
Los locales comerciales que ofrecen servicios informáticos se han forjado desde sus
inicios de una manera física no electrónica, por esta razón se concluye que la
aplicación de un proyecto web para un negocio de esta índole se hace indispensable
para el emprendimiento y posicionamiento de la empresa.
La ejecución de un sitio web en un negocio brinda a la empresa varias fortalezas
permitiendo que los servicios ofrecidos al cliente alcancen el nivel de objetivos
planteados.
Mediante el mercadeo electrónico los comerciantes tienen la potestad de manejar
los inventarios de su mercadería de una manera rápida, ya que se optimiza de una
manera automática los productos que entran y salen de la empresa.
Con la implementación de un sistema de venta electrónica se consigue relacionar de
una manera directa a la empresa con el cliente permitiendo asi obtener sus gustos y
preferencias que disponga para realizar una compra, convirtiéndose asi en un
servicio de atención personalizada.
La innovación de desarrollar un proyecto web es un aspecto fundamental en los
servicios de comercio electrónico, ya que obviamente los usuarios siempre desean
encontrar algo nuevo que les lleve a seguir siendo clientes, tomando en cuenta que
el tiempo es indefinido en que el usuario puede hacer uso de la tienda virtual.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 157
10 RECOMENDACIONES
Innovar el uso del software libre en este caso yo utilice PHP ya que realmente
completo y de fácil manejo.
El comercio electrónico debe ser aprovechado con el fin de encaminar a los
clientes existentes como potenciales que visitan la tienda. Recopilando información
de estos en una base de datos y aprovechar esa información para darle seguimiento a
los mismos, para asi lograr conocer gustos, preferencias y enfocar las ideas a las
expectativas futuras de esta forma ganar un cliente fijo.
La Tienda virtual debe ser Modificada continuamente en cuanto a diseño y servicios
que en ella ofrecen a los clientes de tal manera que éstos sientan que son muy
importantes para la empresa.
La seguridad de la tienda virtual es indispensable por lo que se indica proteger la
privacidad de la información de los clientes, usando las medidas de seguridad como
servidores Proxy, Firewall y no difundir los datos de los clientes a otras empresas.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 158
11 CRONOGRAMA DE ACTIVIDADES
Tabla 19 Cronograma Año 2014
S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4 S1 S2 S3 S4
Recopilación de
información y
requerimientos
Análisis de la
documentación
Aplicación de una
entrevista al usuario
Análisis del sistema a
desarrollar en general
Elaboración del
documento del Trabajo
Final
Diseño de la Base de
Datos
Diseño de las interfaces
Codificación del sistema
Presentación del avance
del sistema al Director
del Trabajo Final
Pruebas del sistema
Corrección de las
interfaces del sistema
Presentación del avance
del documento
Presentación del Trabajo
Final
Implementación del
sistema
OCTUBRE NOVIEMBRE DICIEMBREACTIVIDADES ABRIL JUNIOMAYO JULIO AGOSTO SEPTIEMBRE
Tienda Virtual SellComp
Ingeniería de Sistemas Página 159
12 PRESUPUESTO
El costo para el desarrollado del proyecto es el siguiente:
N. DESCRIPCIÓN CANTIDAD V.UNITARIO TOTAL
1 COMPUTADORA 1 800,00 800,00
2 IMPRESORA CANON 1 160,00 160,00
3 CARTUCHO NEGRO 2 30,00 60,00
4 CARTUCHO COLOR 2 32,00 64,00
5 RESMAS DE HOJAS 2 4,00 8,00
6 ANILLADO 1 2,00 2,00
7 EMPASTADO DEL TRABAJO FINAL 1 18,00 18,00
8 PROGRAMAS 3 5,00 15,00
9 ALQUILER DE INTERNET 6 29,00 174,00
10 HOSTING 0 - -
11 DOMINIO 0 - -
12 CD-ROM 1 0,50 0,50
SUB-TOTAL 1.301,50
IMPORTE
I.V.A 156,18
TOTAL 1.457,68
Tabla 20 Presupuesto
Tienda Virtual SellComp
Ingeniería de Sistemas Página 160
13 GLOSARIO
Definiciones de términos utilizados en el transcurso del desarrollo de la tienda
virtual
Diagrama Entidad Relación: Denominado por sus siglas como: E-R; Este modelo
representa a la realidad a través de entidades, que son objetos que existen y que se
distinguen de otros por sus características.
Usuario: En informática, un usuario es un individuo que utiliza una computadora, sistema
operativo, servicio o cualquier sistema informático. Por lo general es una única persona.
Administrador: la persona responsable de optimizar y controlar los recursos existentes
entre varios usuarios, esto es, gestionar.
Servidor Web: Es aquel cuya tarea es alojar sitios y/o aplicaciones, las cuales son
accedidas por los clientes utilizando un navegador.
Casos de Uso: Es una descripción de los pasos o las actividades que deberán realizarse
para llevar a cabo algún proceso. Los personajes o entidades que participarán en un caso de
uso se denominan actores.
El hipertexto: Es una herramienta de software con estructura no secuencial que permite
crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces
asociativos.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 161
Software libre: Es la denominación del software que respeta la libertad de todos los
usuarios que adquirieron el producto y, por tanto, una vez obtenido el mismo, puede ser
usado, copiado, estudiado, modificado, y redistribuido libremente de varias formas.
Carrito de compras: Término utilizado para la aplicación en donde se colocan los
artículos escogidos por los usuarios ya sea para consultar su existencia o precio o para ir
agregando lo que va a comprar.
Copyright: Derecho de copia o propiedad reservada. El término equivalente en español es
Derechos de autor.
Host: Es un ordenador que funciona como el punto de inicio y final de las transferencias de
datos. Más comúnmente descrito como el lugar donde reside un sitio web.
Usabilidad: es un atributo de calidad que mide lo fáciles de usar que son las interfaces
web.
PhpMy Admin es una interfaz web que nos permite administrar las bases de datos que
tenemos en un hosting
Hosting: El alojamiento web (en inglés web hosting) es el servicio que provee a los
usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o
cualquier contenido accesible vía web.
Dominio: Es una red de identificación asociada a un grupo de dispositivos o equipos
conectados a la red Internet.
Tienda Virtual SellComp
Ingeniería de Sistemas Página 162
14 BIBLIOGRAFÍA
Philip Olson. (2014). PHP. Recuperado el 14 de Octubre del 2014, de
http://php.net/manual/es/intro-whatis.php
Melgoza Jonathan. (19 de Junio 2013). Programación. Recuperado el 14 de Octubre
del 2014, de http://jonathanmelgoza.com/blog/programacion
Holzner Steven. (2009). PHP: Manual de referencia. Mexico: McGRAW-
HILL/INTERAMERICANA.
Neetu Guangwani, Sangeeta Greg, and K.R. Jayanthy. (2011). eCommerce
Development Business to Consumer. USA: Microsoft Mastering.
MEDIAacitve. (2010). Aprender Dreamweaver CS5 EEUU: Marcombo
2010.
Spona Helma. (2010). Programación de base de datos con MySQL y PHP.
EEUU: Marcombo
