Laboratorio 1 – M 3 Perfil imagen y mosaicos

En entradas anteriores de esta serie Laboratorio, hemos creado varias pantallas con Minimax y nos dimos cuenta que tiene sus debilidades, pero gráficamente es brutal.

Estamos usando https://chat.together.ai y se selecciona abajo a la izquierda MINIMAX.

El repositorio del laboratorio esta en https://github.com/AlfonsoOrozcoAguilarnoNDA/lemkotir

En este caso, tenemos un nuevo reto que tiene que ver con el perfil de usuario. La idea es esta:

Muchas personas que hacen sistemas suben sus imágenes de usuario a un directorio. Esto es mala práctica. Primero porque tienes que dar permisos de grabar en una carpeta y segundo porque me tocó un caso de acoso sexual, donde alguien encontró esa ruta y tenía la foto de otro usuario de tapiz en su celular aunque no debería. Sí, hay ocasiones que usas logos de departamento o la foto de tu perro, pero puede haber acoso.

Así que tienes que decidir si la persona puede cambiar su imagen de perfil. ¿Cómo es esto? Imagínate que alguien dice: vamos a hacer un sistema para partidos políticos. Bueno, pues en ese caso no cambian su logo seguido. O… vamos a hacer uno para las preparatorias de la UNAM. A lo mejor le pones el logotipo de cada prepa de la UNAM y tampoco deberías poder cambiarlo.

Leyendo hace años unos libros de diseño de Joel Spolsky, él mencionaba que el usuario debe sentir que está en control de algo de su entorno para sentirse parte del programa. Aunque quizá podemos poner después otras cosas, vamos a considerar estas premisas:

El sistema va a tener una pantalla de perfil que puede ocultarse, del lado izquierdo de la pantalla debajo de la barra.
Debe tener usuario, rol, último acceso y la foto.
Un pequeño botón ya sea para ocultar el perfil por esa sesión (puede resultar útil si tiene un monitor de 800 × 600).
Un pequeño botón para modificar la foto de perfil. Al darle clic, debe llevarnos a una nueva pantalla upload_perfil.php y debe darnos la opción de subir únicamente PNG de máximo 800k, y debe reemplazar al existente en el campo blob de imagen. Si se sube la imagen, automáticamente se pone en null el path.
El perfil debe manejar abajo un espacio para poner un pastel de cumpleaños o un árbol de Navidad. Usa un placeholder de ejemplo y si estamos en el mes 12, escribe abajo “¡Feliz Navidad!”.

¿Qué conseguimos?

Que el usuario sienta que tiene control.
Evitar riesgos de imagen.
Un trato humano con los usuarios.

Vamos a pedirle a Minimax que revise si existe el campo mesdia varchar(5) en la tabla de usuarios y si no existe, agregarlo con default 00:00. La pantalla de subir imagen me debe permitir elegir día de cumpleaños y mes de cumpleaños en formato mm:dd.

Evidentemente, si el mesdia actual es el adecuado, decir “Feliz cumpleaños”.

Como ven, es algo simple.

Requisitos del campo nuevo:

Hacer una función para añadir campo que llame (tabla, nombrecampo, tipo, default).
Los parámetros de la función son strings y el campo siempre puede ser null.

Adicionales:

Incluir config.php y se asume que de ahí viene la conexión mysqli_ a la base de datos.

Paso 1

Inicia Prompt Laboratorio 3 – Perfil, Seguridad y Coherencia Visual

Identificación Obligatoria: Al inicio del archivo upload_pherfil.php y del widget, debes incluir un comentario PHP que identifique claramente tu modelo y la fecha actual (13 de marzo de 2026), reconociendo tu papel como co-programador en este experimento de vibecodingmexico.com.

Consistencia Visual Crítica: Debes mantener la misma estética de las pantallas anteriores:

Usa las “cards” blancas con sombras suaves y bordes redondeados para los formularios.
Todo debe ser responsivo (Bootstrap 4.6) y usar Font Awesome 5.0.

Instrucción de Archivo: El archivo se llamará upload_pherfil.php. No es un error, es el nombre técnico definido para este laboratorio.

Objetivo Técnico y Lógica:

Función checkAndAddField: Crear la lógica procedural para añadir el campo mesdia (VARCHAR 5, DEFAULT ’00:00′, NULL) si no existe en cat_users.
Lógica de Imagen (Fallback):
- Mostrar profile_blob (base64) si tiene datos.
- Si está vacío, usar la ruta de profile_image (default: _defaultUser.png).
Pantalla upload_pherfil.php:
- Confirmación: JS/Modal preguntando “¿Está seguro de actualizar su imagen?”.
- Restricción: Solo PNG, máximo 800KB.
- Post-Procesamiento: Al subir, profile_blob se llena, profile_mime_type se actualiza y profile_image pasa a ser NULL.
- Gestión MM:DD: Inputs para el cumpleaños.
Widget de Perfil:
- Lateral izquierdo, colapsable.
- Mostrar Usuario, Rol, Último Acceso.
- Trato Humano: Lógica para Navidad (mes 12) y Cumpleaños (según mesdia).

Estructura de Tabla Referencia:

CREATE TABLE `cat_users` (
`id` int UNSIGNED NOT NULL AUTO_INCREMENT,
`Rol` varchar(200) NOT NULL DEFAULT 'N/A',
`username` varchar(191) NOT NULL,
`profile_image` varchar(255) NOT NULL DEFAULT '_defaultUser.png',
`profile_blob` mediumblob,
`profile_mime_type` varchar(50) DEFAULT NULL,
-- ... (restante de la tabla proporcionada)
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

FIN PROMPT

Excelente la parte grafica. Sin embargo el perfil aparece oculto por default, le dije que lo corrigiera y no lo pudo hacer.

Usé otro sitio para generar una imagen vectorizada. Consejo: si te dedicas a seguridad / contabilidad sistemas mientras menos fotos tuyas haya mejor.

Prompt a https://opensourcegen.com/ o grok Imagine

generame una imagen cuadrada vectorizada de un admin, para poner en un perfil. Debe ser png y no mayor a 800k, es para una plantllla moderna de bootstrap maximo 400 * 400 pixeles

Yo use el de grok imagine, la opción mejor para mi .

Dato importante, tuve que corregir el BLOB, ya que el bind estaba como bi y debía ser SI. YO lo pude detectar a ojo sin problemas, gemini no y claude lo arregló en un momento diciéndome que debia cambiar y donde.

También tuve que poner include_once.php del config.php

Hay que hacer pruebasdesde celular pero eso lo dejo para el final.

Vamos al siguiente paso.

PASO DOS : MOSAICOS

Queremos detectar si hay archivos no detectados en el servidor. Asi que lo que vamosahacer es pedirle a minimax que genere usando las mismas cuestiones graficas, un mosaico que pueda usarse en transporte publico desde el celular. Debe mostrar en secuencia con los colores standard de bootstrap los archivos existentes *.php

La idea es poner al centro un icono de font awesome que tu decidas, abajo nombre del archivo php y y en un badge el numero de lineas.

Debe haber un array que diga que archivos no se consideran por ejemplo, index.php. En ese caso usa un fondo negro, y un icon de base de datos de font awesome, que yo pueda cambiar. Si no es de esos archivos, pasa por la secuencia de colores de primary,secondary,sucess, warning, danger. Debe ser una función, porque a lo mejor quiero ver de otro directorio. Que espero yo ?

Que llames dentro de la misma interface que ya vimos a echo muestra_mosaicos_php($directorio) donde directorio es una cadena y puede ser que hayan dos llamadas: ejemplo:

echo muestra_mosaicos_php(“.”);

echo muestra_mosaicos_php(“..”);

Como primer mosaico debes poner uno de color blanco, que muestre nombre del directorio y un icono de directorio o indice, sin badge, texto e imagen negro sobre blanco. Si es archivo y no directorio, al dar click en el boton debe abrir el archivo en una pantalla nueva.

Y que me muestre en color rojo si se modifico las ultimas x horas, en mi caso prefiero 72 horas configurable.

INICIAPROMPT

PROMPT PARA LA IA (PASO 2: MOSAICOS DE AUDITORÍA DINÁMICOS)

Contexto: Desarrollo de ” Lemkotir”. PHP 8.x Procedural, Bootstrap 4.6, Font Awesome 5.0.

Objetivo: Crea un archivo conservando la estetica anterior, que se llame muestra_mosaicosphp.php , incluyendo barra de navegacion superior y footer pero sin perfil.

La idea es una función PHP llamada muestra_mosaicos_php($directorio) que genere una rejilla de mosaicos (tiles) para auditar archivos en un entorno móvil (transporte público) y de escritorio.

Especificaciones de Diseño e Iconografía:

Libertad Creativa: Tú decides los iconos de Font Awesome más adecuados para representar los archivos, directorios y bases de datos. Busca una estética profesional y limpia.
Mosaico de Directorio (El Índice):
- El primer mosaico debe ser blanco (bg-white), texto negro.
- Debe mostrar el nombre del directorio actual y un icono representativo de “Carpeta” o “Home”. Sin badge y sin enlace.
Mosaicos de Archivos PHP:
- Filtra solo archivos .php.
- Lógica de Colores: Usa un array de excepciones $excepciones = ['index.php', 'config.php']. Si el archivo está ahí, el fondo debe ser negro (bg-dark) con un icono de base de datos.
- Para los demás archivos, alterna secuencialmente entre los colores: primary, secondary, success, warning y danger.
Interactividad y Target:
- Cada mosaico de archivo (incluyendo las excepciones) debe ser un enlace que abra el archivo en una ventana nueva (target="_blank").
- El área de clic debe ser todo el mosaico o, al menos, el icono central.
Información Adicional:
- Muestra el nombre del archivo en la parte inferior.
- Incluye un badge de Bootstrap que indique el número de líneas del archivo (calculado con count(file())).

Estructura Técnica:

Usa columnas de Bootstrap (col-6 col-md-3 col-lg-2) para que se vean 2 por fila en móvil.
Define una altura fija para los mosaicos para mantener la simetría de la rejilla.
Proporciona la función y las llamadas: echo muestra_mosaicos_php("."); y echo muestra_mosaicos_php("..");.

Deseable considerar poner un aviso si se modifico en el numero de horas estipulado $x = 72 de base.

Gracias !

TERMINA PROMPT

Funcionó bien pero pequeños errores. Primero que consideró Brands (fas) en lugar de fab y segundo el color del icono en blanco para los casos negros. (directorios)

la version que se subió del archivo al repositorio ya está corregida.

Paso tres

Queremos conservando la estetica anterior, que llemesa dos funciones dentro del archivo diagnostico.php

la primerafuncion se llamará muestra_tablas() y de la base de datos actual mostrar lasdiezde mayor tamaño, en mb, si es isam o inno, y numero de registros. quiero ordenar las de mayor tamaño y que pongas en color rojo las queestan sinfilas , si las hay, excpresa el tamaño en mb

la segunda funcion será random13

Quiero que me muestres cinco cadenas de caracteres random, de 13 caracteresde largo, que no tengan 1, 0, letra o, letra l, y puede ser mayusuculas o minsuculas. Por favor recuerda en un mensaje abajo de lo generado que se recomienda no usar $ o , en contraseñas, pero que si se recomienda añadir * : . al gusto, usa tus propias palabras.

que espero ? un archivo llamado diagostico.php que tenga el aaprienciaanterior, barra superior fija, footer fijo, y que en el contenido se llamen essdosfuncionescon echo.

Gracias.

PROMPT PARA LA IA (PASO 3: DIAGNÓSTICO DE DATOS Y SEGURIDAD)

Contexto: Proyecto ” Lemkotir”. PHP 8.x Procedural, MariaDB, Bootstrap 4.6, Font Awesome 5.0. Objetivo: Crear un archivo llamado diagnostico.php que conserve la estética de los pasos anteriores (Navbar superior fija y Footer, sin widget de perfil). El contenido debe ejecutar dos funciones específicas.

Especificaciones Técnicas:

1. Función muestra_tablas():

Consulta SQL: Debe consultar information_schema.TABLES de la base de datos actual (usa la conexión $link de config.php).
Datos a mostrar: Nombre de la tabla, Motor (Engine: MyISAM/InnoDB), Número de registros (TABLE_ROWS) y Tamaño total en MB (Data + Index).
Lógica visual:
- Mostrar solo las 10 tablas de mayor tamaño.
- Ordenar de mayor a menor MB.
- Alerta: Si una tabla tiene 0 registros, la fila o el texto debe aparecer en color rojo (text-danger o table-danger).
- Usa una tabla de Bootstrap (table-dark o table-striped) con iconos de Font Awesome para los encabezados.

2. Función random13():

Lógica de generación: Generar 5 cadenas aleatorias de 13 caracteres cada una.
Restricciones de seguridad: NO deben incluir el número 1, el número 0, la letra o/O ni la letra l/L (para evitar confusiones visuales en sistemas críticos).
Formato: Mezcla de mayúsculas y minúsculas.
Presentación: Muéstralas en una lista limpia o dentro de pequeños <code> blocks.

3. Mensaje de Recomendación de Seguridad:

Después de poner los resultados generados por la función random13, añade un mensaje (en un alert de Bootstrap o similar) con tus propias palabras sobre buenas prácticas de contraseñas.
Puntos clave: Desaconsejar el uso de caracteres como $ o , (que pueden romper algunos scripts o CSVs), y recomendar el uso de caracteres más estables como *, :, o . al gusto.

Estructura del Archivo:

Incluir session_start() y include_once 'config.php'.
Cuerpo del HTML con el Navbar y Footer ya definidos en los pasos anteriores.

Llamada directa a las funciones:

PHP

echo muestra_tablas();
echo random13();

Fin Prompt

El resultado se ve bien, y es normal que si son pocos elementos en inno te diga que son cero. Tendría quizá que hacer ajustes cuando hayan mas de 11 tablas. Hago elcomentario que puse en el archivo que es un nivel de entropia 76. A partir de 70 se consideran seguras.