Servidor web

 2 de setiembre de 2022

Detalle de cambios

1. Se hace una corrección de tipos de datos (de VARCHAR a NCHAR) en el script que genera el stored procedure de la inserción para evitar incompatibilidades.
1. Modify data types from VARCHAR to NCHAR · psluk/BD1TP1@a7086ff (github.com)
2. Se inició el servidor web con dos páginas diferentes: index.html (para la mayoría de las acciones) y login.html (para el inicio de sesión)
• Add basic server and HTML files · psluk/BD1TP1@c4eba7d (github.com)
• Fuentes:
1. Installation — Flask Documentation (2.2.x) (palletsprojects.com): Para la instalación de la biblioteca que permite iniciar el servidor web local (Flask).
2. Quickstart — Flask Documentation (2.2.x) (palletsprojects.com): Guía rápida sobre la librería, que permite hacer la mayoría de las cosas que se necesitan para esta tarea.
3. Se empiezan a diseñar la página principal (donde se muestra la tabla de productos junto con los filtros) y la página de inicio de sesión a través del archivo index.html y un archivo CSS.
• Add basic HTML for LOGIN and INDEX files · psluk/BD1TP1@7d78ef0 (github.com)
1. A continuación, se listan las fuentes consultadas para la estructura del archivo HTML y para el archivo CSS.
1. Adding CSS styling to your website (pythonhow.com): Guía para referenciar a un archivo CSS (de estilo) en un servidor web local de Python (con la biblioteca Flask).
2. Declaring language in HTML (w3.org): Para saber dónde se declara el idioma de la página en un archivo HTML.
3. How To Center an Element Vertically (w3schools.com): Para centrar verticalmente el título (solo se estaba centrando horizontalmente, pero quedaba muy arriba).
4. Se quería hacer que, para los filtros, se mostrara el nombre del filtro (por ejemplo, «Nombre») arriba del cuadro de texto, y el botón a la derecha del cuadro de texto, como se muestra en la imagen adjunta.
5. Conceptos Básicos de flexbox - CSS | MDN (mozilla.org): Se utilizó el concepto de flexbox, que permite distribuir más fácilmente los elementos en la interfaz. Además, esta guía ayudó con aspectos como el flujo de los datos (hacia la derecha o hacia abajo) y a definir cuánto espacio abarcaba cada elemento (para que el cuadro de texto abarque más que el botón del filtro).
6. css - Flexbox: Have item expand to fill row - Stack Overflow: Para saber cómo hacer que el nombre del filtro se mostrara arriba del cuadro de texto y del botón (se estaban mostrando todos en la misma línea).
7. CSS flex-wrap property (w3schools.com): Más información sobre esta propiedad de CSS, que se mencionó en la fuente anterior.
8. html - Make a div fill the height of the remaining screen space - Stack Overflow: No se sabía cómo hacer que la tabla de artículos no se saliera de la página (es decir, que al hacer scroll solo se desplazara dentro de la tabla, no toda la página). Esta guía usó el concepto de flexbox nuevamente, así que también se volvieron a revisar las fuentes anteriormente mencionadas.
9. Selectores de hijo - CSS | MDN (mozilla.org): Guía sobre cómo aplicar estilo a los hijos de un elemento HTML (se usa el selector ">").
10. HTML input Tag - GeeksforGeeks: Guía sobre los distintos tipos de cuadros de texto, para saber cómo agregar áreas para solicitar la información para los filtros (más que todo para el tipo numérico).
11. HTML input type="number" (w3schools.com): Información sobre un cuadro de entrada numérico (para que no deje ingresar texto, además de que permite indicar un máximo y un mínimo).
12. HTML select tag (w3schools.com): Se estaba buscando cómo se implementaban en HTML las listas de selección (de estilo drop-down).
13. CSS Is it possible to center table column? - Stack Overflow: Para saber cómo centrar los datos de las celdas de una sola columna.
14. CSS: even and odd rules (w3.org): Para cambiar el color de solo columnas pares (o impares), para mejorar la legibilidad.
15. W3Schools Tryit Editor: Para centrar elementos (la solución era simple: margin: auto;).
4. Se empiezan a programar las funciones internas en el servidor de Python para procesar las solicitudes hechas desde un navegador. En este caso, para el inicio de sesión
1. Fuentes:
1. How to Process Requests in Flask – Predictive Hacks: Cómo procesar requests en Flask (la biblioteca de servidor web para Python).
2. XMLHttpRequest - Referencia de la API Web | MDN (mozilla.org): Cómo hacer requests en Javascript (desde el navegador).
3. javascript - Want HTML form submit to do nothing - Stack Overflow: Para que el form del HTML no hiciera la acción por defecto (enviar la información automáticamente al hacer clic en Iniciar sesión), sino que se activara una función de Javascript, para que dicha función trate de iniciar sesión y, si no, muestre un mensaje de que hubo un error.
2. Con esas dos fuentes ya fue posible hacer la verificación del inicio de sesión.
1. Add Login Feature · psluk/BD1TP1@a9f9571 (github.com)
5. Se añade la lógica que permite recuperar la lista de todos los artículos (mostrada inicialmente antes de escoger filtros).
• Add main data retrieval · psluk/BD1TP1@13538e2 (github.com)
1. Fue necesario añadir al stored procedure que también retornara el ID, para mostrarlo en la tabla.
2. Además, en la capa de Python se agregó el código para ordenar alfabéticamente los artículos (por nombre).
6. Al ejecutar otra vez el script para cargar los datos del XML, fue notorio un problema: se estaba borrando la tabla de usuarios sin borrar la tabla de EventLog (que contiene un ID de usuario asociado a la tabla borrada), por lo que surgía un error en el borrado.
1. Fix reference error when deleting a referenced key · psluk/BD1TP1@49674e1 (github.com)

Commits relacionados

1. Create server folder · psluk/BD1TP1@434103e (github.com)
2. Modify data types from VARCHAR to NCHAR · psluk/BD1TP1@a7086ff (github.com)
3. Add basic server and HTML files · psluk/BD1TP1@c4eba7d (github.com)
4. Add basic HTML for LOGIN and INDEX files · psluk/BD1TP1@7d78ef0 (github.com)
5. Add Login Feature · psluk/BD1TP1@a9f9571 (github.com)
6. Add main data retrieval · psluk/BD1TP1@13538e2 (github.com)
7. Fix reference error when deleting a referenced key · psluk/BD1TP1@49674e1 (github.com)

Tiempo

• 8 horas, 42 minutos