Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la...

10
1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada bajo el marco de la metodología Scrum (Ver Anexo F) que sirva como esquema de pruebas para el funcionamiento del modelo de alta disponibilidad que ofrece la solución del proyecto. Inicialmente se estipula un archivo de conexión hacia una base de datos alojada en MySQL. Figura 105. Clase Db, archivo conexion.php Fuente: Autores Para tener acceso a la aplicación se desarrolló un login; el cual está compuesto por un formulario que pide usuario y password. Figura 106. Vista principal del login.php Fuente: Autores

Transcript of Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la...

Page 1: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

1

Anexo G. Diseño de la página web

Se realiza la construcción de una tienda virtual la cual fue estructurada bajo el marco de la

metodología Scrum (Ver Anexo F) que sirva como esquema de pruebas para el funcionamiento

del modelo de alta disponibilidad que ofrece la solución del proyecto.

Inicialmente se estipula un archivo de conexión hacia una base de datos alojada en MySQL.

Figura 105. Clase Db, archivo conexion.php

Fuente: Autores

Para tener acceso a la aplicación se desarrolló un login; el cual está compuesto por un formulario

que pide usuario y password.

Figura 106. Vista principal del login.php

Fuente: Autores

Page 2: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

2

Figura 107. Código fuente login.php

Fuente: Autores

Al enviar la información del formulario se consulta el documento loginVal.php, el cual

consulta en la base de datos si los datos ingresados son correctos y de serlos redirecciona al

index.php

Figura 108. Código fuente loginVal.php

Fuente: Autores

Page 3: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

3

El index.php está compuesto por un menú que permite consultar, un catálogo el cual

permite agregar productos a una orden, también se pueden consultar los productos agregados al

carrito modificar las cantidades y cerrar la orden; ya por último se puede consultar las órdenes

creadas por el usuario que ha iniciado sesión.

Figura 109. Vista principal index.php

Fuente: Autores

Figura 110. Código fuente index.php

Fuente: Autores

Page 4: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

4

Para poder consultar los productos del catálogo se crean 3 archivos, items.php,

crud_items.php y administrar_items.php.

Figura 111. Vista principal mostar_Items.php

Fuente: Autores

El archivo items.php es una clase que funciona como DTO de la tabla items, el cual se

usará para mostrar luego en pantalla los datos traídos por la consulta correspondiente.

Figura 112. Código fuente items.php

Fuente: Autores

Page 5: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

5

El archivo crud_items.php contiene los métodos básicos de un crud, insertar, consultar,

actualizar y eliminar elementos de la tabla ítems.

Figura 113. Código fuente crud_items.php

Fuente: Autores

Estos métodos se ejecutan dependiendo del archivo administrar_items.php, el cual permite

validar la petición que se hace y así mismo consultar el método indicado.

Page 6: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

6

Figura 114. Código fuente administrar_items.php

Fuente: Autores

Figura 115. Mensaje al agregar producto al carrito

Fuente: Autores

Para poder consultar los productos añadidos al carrito también se crean 3 archivos,

orderItems.php, crud_order_items.php y administrar_order_items.php

Page 7: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

7

Figura 116. Vista principal carrito.php

Fuente: Autores

El archivo orderItems.php es una clase que funciona como DTO de la tabla items, el cual

se usará para mostrar luego en pantalla los datos traídos por la consulta correspondiente.

Page 8: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

8

Figura 117. Código fuente orderItems.php

Fuente: Autores

El archivo crud_order_items.php contiene los métodos básicos de un crud, insertar,

consultar, actualizar y eliminar elementos de la tabla items.

Page 9: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

9

Figura 118. Código fuente crud_order_items.php

Fuente: Autores

Estos métodos se ejecutan dependiendo del archivo administrar_order_items.php, el cual

permite validar la petición que se hace y así mismo consultar el método indicado.

Figura 119. Código fuente administrar_order_items.php

Fuente: Autores

Page 10: Ver Anexo Frepository.udistrital.edu.co/bitstream/11349/22416/... · 1 Anexo G. Diseño de la página web Se realiza la construcción de una tienda virtual la cual fue estructurada

10

Figura 120. Notificación al eliminar producto del carrito

Fuente: Autores