Curso de Programación Web

Tarea 4

Versión: C240122

[C240122]
Queda prohibido cualquier tipo de explotación y, en particular, la reproducción, distribución, comunicación
pública y/o transformación, total o parcial, por cualquier medio, de este documento sin el previo
consentimiento expreso y por escrito del Ing. Luis Daniel Lepe Rodríguez.
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

Organismo Facultad de Ingeniería Mecánica y Eléctrica (FIME)

Curso Programación Web
Entregable Tarea 4
Autor Ing. Luis Daniel Lepe Rodríguez
N.º Total de Páginas 17

ÍNDICE
1 ACERCA DE LA TAREA .................................................................................................. 3
1.1 Objetivos..................................................................................................................... 3
1.2 Modo de entrega ......................................................................................................... 3
1.3 Actividades ................................................................................................................. 4
1.3.1 Actividad 1. Síntesis sobre la teoría y conceptos de JQuery. ............................. 4
1.3.2 Actividad 2. Seguir la guía de solución. ............................................................. 4
1.3.3 Actividad 3. Agregar funcionalidad al botón modificar. .................................... 5
1.3.4 Actividad 4. Crear una página con funciones de JQuery. ................................... 8
1.4 Evaluación .................................................................................................................. 9
2 GUÍA DE SOLUCIÓN ..................................................................................................... 10
3 REFERENCIAS ............................................................................................................... 17

Página 2 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

1 ACERCA DE LA TAREA
En esta tarea reforzaremos los conceptos básicos de JQuery y haremos uso de la librería para crear una
página web con la funcionalidad de rastrear los problemas de una empresa ficticia. Aunque se pueda
utilizar cualquier editor de texto recomendamos utilizar un IDE especializado como Visual Studio Code,
Sublime o Atom.

1.1 Objetivos
Aprender a utilizar la librería de JQuery en las páginas web e introducir los conceptos básicos mostrando
funcionalidades de la tecnología, además se pretende que el alumno note las diferencias que hay entre
programar funcionalidades JavaScript puro y JQuery para formar su propio criterio y experiencia.
• Conozcan la sintaxis básica de JQuery.
• Sepan manipular objetos del DOM a través de JQuery.
• Generen sus propias funciones y las apliquen en su página.
• Comprendan las ventajas de utilizar un API y como utilizarlo a través de AJAX.

1.2 Modo de entrega

Generarás un reporte en formato PDF bajo el siguiente patrón de nombre "matricula – grupo – TAREA4
– PWEB – CLASE" en ese reporte realizarás y documentarás todas las actividades definidas más
adelante, asegúrate de adjuntar tus datos personales como nombre, matrícula, nombre del profesor, grupo
y el # de tarea que entregas. Al final del reporte recuerda escribir tus conclusiones, lo que aprendiste del
laboratorio, tu experiencia y cual fue tu dificultad más grande.
La entrega será de un solo archivo con extensión “.zip” bajo el mismo patrón de nombre que el reporte,
en este archivo se incluirá el reporte en PDF mencionado anteriormente y los archivos con código que
resuelven los ejercicios en sus respectivas carpetas. El reporte estará en la raíz del ZIP y tendrá carpetas
correspondientes a cada actividad (solo aquellas que requieran adjuntar archivos) estas carpetas deberán
ser llamadas con el número del título a la que corresponda esa actividad. Ejemplo:

Ilustración 1- Ejemplo de estructura del archivo final listo para entregar.

Asegúrate de que los archivos HTML, CSS y JavaScript funcionen y se visualicen correctamente al
descomprimir tu archivo ZIP final, si estos no lo hacen cuando el profesor los revise serán calificados
con cero.

Página 3 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

1.3 Actividades
1.3.1 Actividad 1. Síntesis sobre la teoría y conceptos de JQuery.
Leer el libro “Fundamentos de JQuery” hacer una síntesis de lo leído de los capítulos 3 al 7. Al menos
3 cuartillas.

Fundamentos de JQuery

Murphey, R. (2011). Fundamentos de jQuery. https://openlibra.com/es/book/fundamentos-de-jquery

1.3.2 Actividad 2. Seguir la guía de solución.

Seguir la Guía de solución creando sus propios archivos y razonando a consciencia lo que se realiza.
Toma capturas de pantalla de la actividad finalizada. Analiza el código y los pasos proporcionados en la
guía, si hay alguna función o propiedad en la guía que no conozcas o no entiendes algo de lo que se
realiza investígalos y adjúntalo en la sección de dificultades y conclusiones.
Para realizar y entender en su totalidad la guía de solución deberás consultar la documentación del API
con el que te conectarás para consultar, agregar, modificar y borrar registros.

Documentación del API

Documentación del API - http://rastreador.fime.uanl.mx/swagger/index.html

* La URL de la API puede cambiar sin previo aviso, si deja de funcionar comunicar al profesor.

Adjunta también los archivos resueltos en el ZIP final que entregarás en su sección correspondiente.

Página 4 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

1.3.3 Actividad 3. Agregar funcionalidad al botón modificar.

Utiliza el ejercicio de la Guía de solución y añade funcionalidad al botón de “modificar” en las tarjetas
de cada problema. Al dar clic se debe poder visualizar en un “modal” de Bootstrap la información del
problema seleccionado. Si modificamos los datos del problema y hacemos clic en “Guardar cambios”
se deben modificar los datos del registro de problema.
1. Primer paso – Crear el modal en tu HTML, solo el diseño sin funcionalidad.

Ilustración 2- Ejemplo de diseño estándar de un modal utilizando Bootstrap 5

2. Segundo paso – Crear una función que traiga por AJAX la información de un registro de
problema específico. (Leer documentación del API)

Ilustración 3 – Petición HTTP GET que permite obtener un registro especifico del API.
3. Tercer paso – Hacer que el botón “modificar” mande llamar la función AJAX creada en el paso
anterior pasando como parámetro el id del problema al que corresponde el botón.

Página 5 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

4. Cuarto paso – Al recibir la respuesta del AJAX sustituir la información en el Modal y luego
mostrar el Modal que por defecto está escondido.

Ilustración 4- Ejemplo de modal con información reemplazada.

5. Quinto paso – Crear una función que a través de AJAX pueda modificar un registro (Leer
documentación del API)

Ilustración 5 - Petición HTTP PUT que permite modificar un registro.

Página 6 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

6. Sexto paso – Hacer que al dar clic en el botón “Guardar cambios” del modal se mande llamar
la función creada en el paso anterior y actualice (solo si la petición es satisfactoria) los datos de
la tarjeta sin actualizar la página para ver los datos modificados reflejados en la lista de
problemas.

Ilustración 6 - Referencia al botón que debe mandar llamar la función de modificar registro.

Adjunta también los archivos resueltos en el ZIP final que entregarás en su sección correspondiente.

Página 7 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

1.3.4 Actividad 4. Crear una página con funciones de JQuery.

Se debe crear una página que utilice los siguientes temas en JQuery:
• Modificación del DOM – debes implementar un ejemplo de cada una de las funciones siguientes
“append”, “prepend”, “after”, “before” y “remove”.

Modificación del DOM – w3school

https://www.w3schools.com/jquery/jquery_dom_add.asp

• Manipulación de CSS – Implementar un ejemplo usando de cada una de las funciones siguientes
“addClass”, “removeClass”, “toggleClass”, “css”.

Modificación de CSS – w3school

https://www.w3schools.com/jquery/jquery_css_classes.asp

• JQuery traversing – Hacer varios ejemplos utilizando al menos 5 funciones de traversing.

Traversing – w3school

https://www.w3schools.com/jquery/jquery_traversing.asp

• Eventos – Hacer ejemplos de al menos 5 tipos diferentes de eventos.

Modificación del DOM – w3school

https://www.w3schools.com/jquery/jquery_events.asp

Cada tema debe estar en una página distinta, es decir, tener sus propios archivos HTML, CSS y JS. La
página web debe tener un menú de navegación que permita ir a todos los temas de la página. Se debe
implementar Bootstrap, se evaluará también el diseño y creatividad de los ejercicios.
Adjunta los archivos de tu página en el ZIP final que entregarás en su sección correspondiente.

Página 8 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

1.4 Evaluación

Criterio Valor Total

5 pts. – Nombre, matrícula, salón, profesor, indica si

Añade sus datos personales
Síntesis sobre la teoría y conceptos
de JQuery
es clase o laboratorio, nombra y ordena el documento 5 pts.
tal y como se especificó.
2 pts. – Ortografía.
2 pts. – Justificado, Arial 12.
6 pts. – No menos de 3 cuartillas. 15 pts.
10 pts. – Resume y da sus reflexiones personales
sobre lo que leyó.

Seguir la guía de solución 10 pts. – Resolver correctamente la guía. 10 pts.

5 pts. – Mostrar un modal al hacer clic en el botón.

5 pts. – Llenar las listas desplegables del modal.
10 pts. – Desplegar los datos correctos en el modal.
Agregar funcionalidad al botón 10 pts. – Modificar correctamente los datos del
40 pts.
modificar. registro seleccionado usando el API.
10 pts. – Sin refrescar la página modificar el
contenido de la tarjeta si el API manda una respuesta
satisfactoria a la modificación.
5 pts. – Implementa un diseño con Bootstrap y CSS.
Crear una página con funciones de 5 pts. – Tiene un menú de navegación a cada tema.
25 pts.
JQuery. 15 pts. – Realiza ejemplos y ejercicios creativos que
demuestran el dominio y uso de los temas.
5 pts. – Describe sus conclusiones, menciona sus
Reflexiones dificultades al realizar el laboratorio, lo que aprendió 5 pts.
y su experiencia.

* Si no se añaden al ZIP los archivos resueltos de las actividades se calificará con 0 esa sección.
* NO INCLUIR ningún archivo tal cual como se proporcionó de parte del profesor o con
cambios mínimos que NO RESUELVAN el ejercicio, se considerará como deshonestidad
académica y la acción repetida de esto puede provocar la baja de la materia. Si no puede
resolver un ejercicio no adjunte NADA.
* El laboratorio debe ser calificado con 70 o más para considerarse “entregado”.

Página 9 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

2 GUÍA DE SOLUCIÓN
1. Genere un nuevo archivo HTML con la estructura básica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rastreador de problemas v1.0</title>
</head>
<body>
</body>
</html>

2. Importa las librerías de Bootstrap, JQuery y Font Awesome..

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rastreador de problemas v1.0</title>
<!-- Importamos Font Awesome v5.15.4-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- Importamos el CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- Importamos JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Importamos el JS de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

Página 10 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

3. Agrega al inicio del <body> el siguiente formulario con los campos necesarios para crear un
registro de problema y un <div> donde se generarán las tarjetas con los problemas existentes:
<div class="container">

<h1>Rastreador de problemas</h1>

<form id="formProblema" class="border border-dark rounded bg-light m-3 p-3 needs-validation" novalidate>

<h2>Agregar un nuevo problema:</h2>

<!-- Descripcion input -->

<div class="mb-3">

<label for="txtDescripcion" class="form-label">Descripcion del problema:</label>

<input type="text" class="form-control" id="txtDescripcion" name="txtDescripcion"

placeholder="Describe el problema" required>

<div class="invalid-feedback">

Por favor describa su problema.

</div>

</div>

<!-- Lista Severidad -->

<div class="mb-3">

<label for="lstSeveridad">Severidad del problema:</label>

<select id="lstSeveridad" name="lstSeveridad" class="form-select" required>

<option selected value="">Selecciona la severidad...</option>

</select>

<div class="invalid-feedback">

Por favor escoja una opcion.

</div>

</div>

<!-- Lista Usuarios -->

<div class="mb-3">

<label for="lstUsuarios">Usuario encargado:</label>

<select class="form-select" id="lstUsuarios" name="lstUsuarios" required>

<option selected value="">Selecciona el usuario...</option>

</select>

<div class="invalid-feedback">

Por favor escoja una opcion.

</div>

</div>

<!-- Submit button -->

<input type="submit" class="btn btn-primary btn-block mb-4" value="Agregar" />

</form>

<div id="divProblemas" class="list-group">

</div>

</div>

Página 11 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

4. Genera una etiqueta <script> al final del <body> justo después de donde importaste las librerías
de JQuery y Bootstrap, genera una variable con tu matricula y la usarás en las funciones para
traer y crear registros de problemas:
<script>
var matriculaGlobal = "tu matricula";
</script>

5. Agrega en la etiqueta <script> recién creada las funciones para llenar las listas desplegables.
/* Llena la lista desplegable #lstSeveridad con las opciones del API. */
function traerSeveridad() {
$.ajax({
url: "http://rastreador.fime.uanl.mx/api/ProblemaEstatus",
type: 'GET',
dataType: 'json',
crossDomain: true
}).done(function (result) {
$(result).each(function (index) {
$("#lstSeveridad").append(`<option value="${this.idProblemaEstatus}">${this.descripcion}</option>`)
});
console.log(result);
}).fail(function (xhr, status, error) {
alert(error)
});
}

/* Llena la lista desplegable #lstUsuarios con las opciones del API. */

function traerUsuarios() {
$.ajax({
url: "http://rastreador.fime.uanl.mx/api/Usuarios",
type: 'GET',
dataType: 'json',
crossDomain: true
}).done(function (result) {
$(result).each(function (index) {
$("#lstUsuarios").append(`<option value="${this.idUsuario}">${this.nombre}</option>`)
});
console.log(result);
}).fail(function (xhr, status, error) {
alert(error)
});
}

Página 12 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

6. Añada también la función para traer los problemas existentes y desplegarlos en pantalla,
cambiando a su vez el diseño de cada tarjeta dependiendo de su estado de urgencia.
/*
Función para consultar todos los problemas existentes ligados a una matricula
especifica y además imprime en pantalla todos los problemas en forma de tarjeta.
*/
function traerProblemas(matricula) {
$.ajax({
url: "http://rastreador.fime.uanl.mx/api/Problemas/all/" + matricula,
type: 'GET',
dataType: 'json',
crossDomain: true
}).done(function (result) {
$(result).each(function (index) {
$("#divProblemas").append(generarTarjetaProblemaHTML(this));
})
console.log(result);
}).fail(function (xhr, status, error) {
alert(error)
});
}

/*
Esta función devuelve el código HTML de una tarjeta de problema.
*/
function generarTarjetaProblemaHTML(problema) {
let bgColor = ""; // Color del fondo de la tarjeta
let textoProblemaEstatus = ""; // Texto con el nombre del estatus
switch (problema.idProblemaEstatus) {
case 1:
bgColor = "info";
textoProblemaEstatus = "BAJO";
break;
case 2:
bgColor = "primary";
textoProblemaEstatus = "MEDIO";
break;
case 3:
bgColor = "warning";
textoProblemaEstatus = "ALTO";
break;
case 4:
bgColor = "danger";
textoProblemaEstatus = "URGENTE";
break;
}
var tarjetaProblema = `
<a href="#" class="list-group-item list-group-item-action list-group-item-${bgColor}">
<div class="d-flex w-100 justify-content-between align-items-center">
<h5 class="mb-1">Problema
<span class="badge rounded-pill bg-secondary me-1">${problema.idProblema}</span>
</h5>
<span class="badge bg-${bgColor}">${textoProblemaEstatus}</span>
</div>
<p class="mb-1">${problema.descripcion}</p>
<div class="d-flex w-100 justify-content-between align-items-center">
<small>
<span class="me-1"><i class="fa fa-user"></i>${problema.idUsuarioAsignado}</span>
<span class="me-1"><i class="fas fa-calendar-alt"></i> 2021.01.01.</span>
</small>
<div>
<input type="button" value="Modificar" class="btn btn-warning" />
<input type="button" value="Eliminar" class="btn btn-danger" />
</div>
</div>
</a>
`;
return tarjetaProblema;
}

Página 13 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

7. Agregue las funciones para detectar el clic en el botón de borrar y que mande a eliminar los
problemas pertenecientes al botón en el que se realizó el clic:
/*
Esta función detecta el clic en el botón de borrar de una
tarjeta de problema cualquiera, obtiene el id de la tarjeta
origen donde se dio clic y se manda eliminar.
*/
$("#divProblemas").on("click", ".btn-danger", function () {
borrarProblema($(this).closest("a").find("h5 span").text(), this)
});

/*
Esta función borra un problema especifico y lo elimina de la
pantalla sin actualizar la página.
*/
function borrarProblema(id, btnBorrar) {
$.ajax({
url: "http://rastreador.fime.uanl.mx/api/Problemas/" + id,
type: 'DELETE',
dataType: 'json',
crossDomain: true
}).done(function (result) {
$(btnBorrar).closest("a").remove();
console.log("Se borro exitosamente el problema con id:" + id);
}).fail(function (xhr, status, error) {
alert(error)
});
}

8. Mandamos llamar las 3 funciones principales al cargar la página, estas funciones son las dos
funciones que llenan las listas desplegables y la función que trae los problemas y los despliega
en pantalla:
/*
Se ejecutan las funciones necesarias para:
- Llenar las listas desplegables con las opciones del API
- Imprimir en pantalla las tarjetas de los problemas existentes.
*/
$(document).ready(function () {
traerSeveridad();
traerUsuarios();
traerProblemas(matriculaGlobal);
});

Página 14 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

9. Añada la función que permita crear un registro de problema en el API:

/*
Esta función crea un nuevo problema ligado a la matricula
proporcionada y la imprime en pantalla sin actualizar.
*/
function crearProblema(matricula) {
$.ajax({
url: "http://rastreador.fime.uanl.mx/api/Problemas",
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({
"idProblema": 0,
"descripcion": $("#txtDescripcion").val(),
"idProblemaEstatus": $("#lstSeveridad").val(),
"idUsuarioAsignado": $("#lstUsuarios").val(),
"identificadorAlumno": matricula
}),
crossDomain: true
}).done(function (result) {
$("#divProblemas").append(generarTarjetaProblemaHTML(result));
console.log(result);
}).fail(function (xhr, status, error) {
alert(error)
});
}

10. De la funcionalidad a la forma para que al recibir el evento “submit” se mande llamar la función
que permite crear un problema:
/*
Esta función sirve para validar la información escrita en los inputs
de un <form>, si la información es válida los campos se ponen de co-
lor verde y se mandará ejecutar la función crearProblema, de lo con-
trario no se ejecutará nada y los campos se tornarán rojos.

Esta función fue adaptada de la documentación de Bootstrap 5:

-- https://getbootstrap.com/docs/5.0/forms/validation/#custom-styles
*/
$("#formProblema").submit(function (event) {
if (!this.checkValidity()) {
event.preventDefault()
event.stopPropagation()
} else {
crearProblema(matriculaGlobal);
event.preventDefault()
}
this.classList.add('was-validated')
});

Página 15 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

11. Una vez terminado, pruebe la aplicación web generando problemas con distintas severidades y
usuarios, que los problemas se visualicen en pantalla y que se puedan eliminar. La página
debería verse al final algo así:

Página 16 de 17
 Curso de Programación Web
Impartido por:
Tarea 4 Ing. Luis Daniel Lepe Rodríguez

3 REFERENCIAS
Murphey, R. (2011). Fundamentos de jQuery. https://openlibra.com/es/book/fundamentos-de-
jquery
Comesaña, J. (2013). Manual básico de jQuery. https://www.sitiolibre.com/curso/pdf/Ma-
nual_jQuery.pdf

Página 17 de 17