1

SECCIÓN TEC. DEL DEPARTAMENTO DE ELECTRONICA

CARRERA DE COMPUTACION

NRC:

4085

ASIGNATURA:

DESARROLLO DE APLICACIONES WEB

LABORATORIO Nro.6

TEMA:

DESARROLLO DE PRUEBAS PARA APLICATIVO WEB

INTEGRANTES:

GENESIS ROBAYO

JEFFERSON TENESACA

DOCENTE: Ing. Raúl Panchi Herrera, Mgs.

FECHA:

18/08/2020
 2

INFORME DE LABORATORIO 4

1. TEMA:

Desarrollo de pruebas para aplicativo web

2. OBJETIVOS:

2.1. Objetivo General.

• Documentar el desarrollo de pruebas para aplicativo we

2.2. Objetivos Específicos.

• Conceptualizar las herramientas a utilizar

• Redactar el proceso de desarrollo de pruebas establecidas en clase

3. MARCO TEÓRICO:

• Sublime Text es uno de los editores de código más populares, usados y con más
contribuciones de la comunidad en forma de plugins que potencian y mejoran nuestro flujo de
trabajo.(MUÑOZ, 2019)

XAMPP es un servidor independiente de plataforma de código libre. Te permite instalar

de forma sencilla Apache en tu propio ordenador, sin importar tu sistema operativo (Linux,
Windows, MAC o Solaris). Y lo mejor de todo es que su uso es gratuito.(SINTES, 2020)

phpMyAdmin es una herramienta gratuita, que permite de una manera muy completa
acceder a todas las funciones de la base de datos MySQL, mediante una interfaz web muy
intuitiva. Esta aplicación consta de un conjunto de archivos escritos en PHP que podemos copiar
en un directorio de nuestro servidor web y así cuando accedamos a esos archivos nos mostrara
unas páginas donde estarán las base de datos a las que tenemos acceso en nuestro servidor de
base de datos con sus tablas.(VERGARA, 2016)

4. INSTRUMENTOS Y DISPOSITIVOS UTILIZADOS

- Internet

- Computador
 3

5. DESARROLLO DE LA PRÁCTICA

Se crea el perfil de usuario y poder editarlo para eso vamos a la dirección , para ello se

debe acceder al navegador y acceder al proyecto en la ruta (localhost/proyecto/vistas/) , y encender

el xaamp

Figura 1: Inicio de sesión

Fuente: Elaboración propia – localhost/proyecto/vistas

Lo que se va a efectuar es que al dar clic en el perfil del usuario de muestre una ventana

modal en la que se puede editar los datos.

 4

Figura 2: Pantalla de inicio

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

Figura 3:Pantalla de inicio

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

Se va a crear un módulo de perfil, mediante una petición via Ajax que haga una consulta a

la base de datos y lego que se edite, para ello acceda a Sublime Text y dentro de la carpeta modelos

cree el archivo Perfil.php

Figura 4: Creación del perfil.php

Fuente: Elaboración propia – sublime text
 5

Dentro del archivo creado, se debe llamara a la conexión a la base de datos, luego crear la

clase de perfil y finalmente hacer la extensión de la clase conectar para llamar a la conexión de la

base de datos.

Figura 5: Código de Conexión a la base de datos

Fuente: Elaboración propia – sublime text

Luego se crea un método, en el cual se hace una validación que si el usuario existe en la

base de datos

Figura 6: Código de Validación de usuario en la base de datos

Fuente: Elaboración propia – sublime text
 6

Luego se crea otro método que valida si existe el correo y el usuario, de existir se ejecuta

la edición:

Figura 7:Código de Validación de correo de usuario

Fuente: Elaboración propia – sublime text

Luego se crea un método, en el cual se hace una validación que si el usuario existe en la

base de datos

Figura 8: Código de Validación dentro la interfaz del usuario

Fuente: Elaboración propia – sublime text
 7

Y se crea el método de la edición misma, con los parámetros excepto cargo y estado que

únicamente podrá modificarlos el administrador, por ello no se colocan dentro de los parámetros

Figura 9: Código de creación de los parámetros del administrador

Fuente: Elaboración propia – sublime text

Figura 10: Código de creación de los parámetros del administrador

Fuente: Elaboración propia – sublime text

• Una vez realizado este proceso se debe crear en la carpeta ajax un archivo llamado
perfil.php, archivo que va a recibir las peticiones de Ajax.
• Dentro del archivo se debe crear la conexión a la base de datos, luego el modelo de perfil
y luego crear un objeto perfil
• Luego se va a crear las variables de los formularios:
• Luego al final se debe crear un switch case el cual de acuerdo al parámetro que se envié a
través de javascriopt por el método GETS entonces se recibe un valor a través de la URL
y esa op va a ser una variable, la cual dependiendo de la variable que reciba pues se
ejecutará una instrucción.
• Luego se va a crear el parámetro editar perfil, que es parecido al de editar usuario
 8

Figura 11: Código del perfil.php

Fuente: Elaboración propia – sublime text

Figura 12: Código del perfil.php

Fuente: Elaboración propia – sublime text
 9

Figura 13: Código del perfil.php

Fuente: Elaboración propia – sublime text

Figura 14: Código del perfil.php

Fuente: Elaboración propia – sublime text

• Esta vez se debe crear el archivo de perfil en javascript, para ello dentro de la carpeta js,
cree el archivo llamado perfil.js.
• En este archivo se debe llamara a la función de mostrar perfil.
• Luego se debe realizar la función de editar perfil
• En la parte superior del archivo se debe ejecutar todo el código a través de jquery, llamando
al id del formulario que se lo hará luego y llama inmediatamete el método editar perfil
 10

Figura 15: Código del perfil.js

Fuente: Elaboración propia – sublime text

Figura 16: Código del perfil.js

Fuente: Elaboración propia – sublime text
 11

Figura 17: Código del perfil.js

Fuente: Elaboración propia – sublime text

Figura 18: Código del perfil.js

Fuente: Elaboración propia – sublime text

Ahora desplácese al archivo header.php para crear el formulario del usuario, para ello vaya

al final del archivo y añada

Finalmente se debe llamar a la librería del perfil js y jquery ya que se va a usar los archivos

de javascrip

Luego añada el div del mensaje personalizado que se muestre una vez que se edite el

formulario, para ello en el archivo header.php añad

 12

En el mismo archivo header.php se procede a validar la sesión, es decir si existe el id de

sesión del usuario que está logeado, entonces se muestre todo el contenido del formulario, ello se

lo hace en la parte inicial del archivo header.ph

Para el caso contrario, al final del archivo header.php se debe añadir

Luego en la parte del botón de perfil y se debe colocar unos atributos importantes que hace

mostrar la ventana modal

Figura 19: Codigo completo del header.php

Fuente: Elaboración propia – sublime text
 13

Figura 20: Codigo completo del header.php

Fuente: Elaboración propia – sublime text

Figura 21: Codigo completo del header.php

Fuente: Elaboración propia – sublime text
 14

Figura 22: Codigo completo del header.php

Fuente: Elaboración propia – sublime text

Figura 23: Codigo completo del header.php

Fuente: Elaboración propia – sublime text
 15

Figura 24: Codigo completo del header.php

Fuente: Elaboración propia – sublime text

Figura 25: Codigo completo del header.php

Fuente: Elaboración propia – sublime text
 16

Figura 26: Codigo completo del header.php

Fuente: Elaboración propia – sublime text

Figura 27: Codigo completo del header.php

Fuente: Elaboración propia – sublime text
 17

Figura 28: Codigo completo del header.php

Fuente: Elaboración propia – sublime text

Finalmente nos dirigimos al navegador y comprobamos

Figura 29: Interfaces de usuario

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php
 18

Figura 30: Editar usuario

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php
 19

Figura 31: interfaz de usuario

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

Figura 32: interfaz de usuario

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php
 20

MÓDULO DE CATEGORÍAS, LISTAR, INSERTAR, EDITAR, CAMBIAR

ESTADO

• En esta sesión se va a crear el modelo de Categoría y dentro del mismo los distintos
métodos como insertar, editar, listar, mostrar, cambiar de estado de categoría, para ello en
la carpeta modelos cree un archivo llamado Categorías.php
• Dentro del archivo creado se debe llamar a la conexión de la base de datos, crear una clase
de Categoría con una extensión a la clase Conecta
• Luego cree un método para listar las categorías esto mediante la función get_categorías,
tomando en consideración los campos de la tabla de la base de datos
• Luego se debe crear un método que permite mostrar la información de los datos de una
categoría por el id de la categoría

Figura 33: Código del archivo categorías editar,eliminar, cambiar de estado

Fuente: Elaboración propia – sublime text
 21

Figura 34: Código del archivo categorías editar,eliminar, cambiar de estado

Fuente: Elaboración propia – sublime text

Figura 35: Código del archivo categorías editar,eliminar, cambiar de estado

Fuente: Elaboración propia – sublime text
 22

Figura 36: Código del archivo categorías editar,eliminar, cambiar de estado

Fuente: Elaboración propia – sublime text

FUNCIONES INSERTAR, EDITAR, MOSTRAR, CAMBIAR ESTADO, LISTAR

ENVIO MEDIANTE AJAX

Se debe empezar creando dentro de la carpeta ajax un archivo llamado categoria.php

En este archivo se van a recibir las variables del formulario que son enviadas mediante

ajax. Dentro del archivo, se debe llamara a la conexión a la base de datos, luego el moedlo

categorías y un objeto categoría

Luego se deben declarar las avariables que se envían a través del formulario

A través de JavaScript por vía ajax se van a enviar un parámetro el cual lo va a interpretar

un switch case que va a tener un parámetro op (operador) dependiendo del cual va a ejecutar

determinadas operacione
 23

Dentro de switch case se debe generar los casos, el primero es el de guardar y editar una

categoría

Figura 37:Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text
 24

Figura 38: Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text

Figura 39: Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text
 25

Figura 40: Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text

Figura 41: Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text
 26

Figura 42: Código de funciones insertar, editar, mostrar, cambiar estado, listar envio mediante Ajax
Fuente: Elaboración propia – sublime text

JQUERY - AJAX – FUNCIONES INIT, LIMPIAR, LISTAR, GUARDAR, EDITAR,

CAMBIAR EL ESTADO DE UNA CATEGORÍA.

• Esta vez se va a implementar las funciones dinámicas utilizando las librerias Jquery las
tecnologias Ajax, para lo cual dentro de la carpeta js debe crear un archivo con nombre
categorias.j
• Dentro del archivo creado se debe declarar una variable global en JavaScript, la cual va a
almacenar todos los datos que se vayan actualizando en el DataTable
• Luego se debe crear una función init, la cual llama a una función listar categoría (se la hará
más luego)
• Luego creará la función que permita limpiar los campos cuando se vaya a agregar una
nueva categoría, a la cual se llama al dar clic en el botón de agregar usuario
• Seguidamente se debe crear la función Listar, la que permite mostar los registros de las
categorías:
• Luego se debe crear la función de cambiar estado, que permite activar o desactivar el estado
de una categoría
 27

Figura 43: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text

Figura 44: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text
 28

Figura 45: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text

Figura 46: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text
 29

Figura 47: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text

Figura 48: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text
 30

Figura 49: Código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría
Fuente: Elaboración propia – sublime text

VISTA HTML Y BOOTSTRAP – REGISTROS PAGINADOS CON DATATABLE

Y FORMULARIO.

• Esta vez se va a realizar el listado y paginación de registros con DataTable en categoría.

Comprende la vista de categorías y el elaborar el formulario, para lo cual como ya se tiene
elaborado un método similar, se puede copiar, vaya a la carpeta vistas y abra el archivo
usuarios.php, seleccione todo el contenido con (Control+A), copie con (Control+C) y
pegue con (Control+V), vaya a la carpeta vistas y cree (clic derecho, nuevo archivo) el
archivo categorias.ph
• Pegue todo el contenido (Control+V) y no olvide guaardarlo (Control+S), luego se debe
adaptarlo
• Ya en el código pegado en el archivo categorias.php, adapte en lugar de Lista de usuarios
coloque Lista de categorías y todo los referente a usuarios por categoría
• En el botón sería Nueva Categoría y #categoríaModal
• En categoria_data
• Los campos si se debe modificar acorde a la interacción con categoría.
• En el formulario modal también adaptar “categoriaModal”
• Los campos que están como nombre, cédula, corresponden a la parte de usuario, entonces
se debe modificar o eliminar toto eso, excepto id_usuario ya que mediante el name
id_usuario se conoce qué usuario es quine registra la categoría, quedando:
 31

• Al final en footer también hay que llamar al archivo categorias.js

• Desplasece al navegador para realizar la prueba de funcionamiento, debiendo mostrarse los
registros de las categorías, logearse con el correo y password contenidos en la base de
datos, tabla usuarios:

Figura 50: código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría.
Fuente: Elaboración propia – sublime text

Figura 51: código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría.
Fuente: Elaboración propia – sublime text
 32

Figura 52: código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría.
Fuente: Elaboración propia – sublime text

Figura 53: código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría.
Fuente: Elaboración propia – sublime text
 33

Figura 54: código jquery - ajax – funciones init, limpiar, listar, guardar, editar, cambiar el esatado de una categoría.
Fuente: Elaboración propia – sublime text

• Desplácese al navegador para realizar la prueba de funcionamiento, debiendo mostrarse los

registros de las categorías, logearse con el correo y password contenidos en la base de
datos, tabla usuarios
• Indica un mensaje “Ningún dato disponible en esta tabla”
• Por lo que se debe dar clic en el botón Nueva Catagoría:
• Debe desplegarse la ventana modal para Agregar Categoría, en la que puede ingresar una
categoría y seleccionar el estado de la misma:
• Una vez guardada la categoría creada, se muestra en el listado la categoría y el mensaje de
“¡Bien hecho! La categoría de regstro correctamente”, también dispone de los botones para
exportar las categorías a Copy, Excel, CSV y PDF, así también puede cambiar de estado
de la categoría, editar y eliminar la categoría (se la realizará posteriormente).
• Confirmación de cambio de estado de categoría:
• Ventana modal de edición de la categoría:
 34

Figura 55: Interfaz login

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

Figura 56: Interfaces del menú de categorías

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php
 35

Figura 57: Interfaz inicio

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

VER Y SOLUCIONAR POSIBLES ERRORES EN LA CONSOLA

• Al momento no muestra error alguno, pero se puede efectuar un error a prpósito para
la práctica, para ello deliveradamente vaya a la carpeta modelos, archivo
Categorias.php, en el método registrar_categoria
• Coloque: categoria2 en el name de categorí
• El proceso que muestra en consola el error se lo encuentra en la función guardaryeditar
del archivo categorias.js de la carpeta vistas

• Entonces grabe el archivo con la modificación, retorne al navegador y actualice, luego

de ello genere una Nueva Categoria
• Otro error que se puede tener es que la consulta está incorrecta o que los datos no se
envían, para ello debe colocar en el archivo Categorias.php de la carpeta modelos,
añada: print_r($_POST);
• Para determinar errores en la consulta puede añadir en el archivo Categorias.php de la
carpeta modelos:
 36

Figura 58: Interfaz sin ningún código de error

Fuente: Elaboración propia – localhost/proyecto/vistas/home.php

6. CONCLUSIONES:

- Mediante el método investigativo se pudo establecer los conceptos de Xampp, Sublime

Text y PhpMyAdmin

- Se pudo ingresar datos en categorías y modificar su estado en la consola

- Mediante el desarrollo de la practica se pudo identificar y solucionar los posibles

errores en la consola

7. RECOMENDACIONES:

- Para evitar errores en un proyecto se de identificarlos y buscar las soluciones de los

mismos.

- Conocer cada función dentro del desarrollo del proyecto para asi poder realizar

modificaciones con exactitud sin fallass.

- Poner en práctica lo aprendido durante la práctica para poder realizar proyectos con

más profesionalismo ya sea en el ámbito laboral o académico.

 37

8. REFERENCIAS:

MUÑOZ, R. (2019). Utilidades de Sublimetext. Mejores Plugins |Codigonexo.

https://www.codigonexo.com/blog/programacion/entornos-de-trabajo/utilidades-de-

sublime-text-para-desarrollo-frontend/

SINTES, B. (2020, abril 21). Qué es XAMPP. PHP. Bartolomé Sintes Marco. Www.mclibre.org.

https://www.mclibre.org/consultar/php/otros/xampp.html

VERGARA, J. M. (2016, junio 28). Qué es y qué nos ofrece la herramienta phpMyAdmin.

Dominios, alojamiento web, hosting y servidores dedicados.

https://www.coriaweb.hosting/nos-ofrece-phpmyadmin/

FIRMAS

JEFFERSON TENESACA GÉNESIS ROBAYO