Todas las entradas de: admin

S-010 – Upload de ficheros en Svelte

En la revisión de temas necesarios para hacer una aplicación siempre existe la necesidad de cargar (upload) ficheros desde el Navegador.

Existen varias estrategias para enviar archivos desde el navegador al servidor, cada una con sus ventajas y desafíos. Las más comunes son:

1. Envío tradicional con formularios HTML (multipart/form-data)
  • El navegador gestiona automáticamente la codificación del archivo.
  • El servidor (como PHP) recibe los datos en $_FILES, lo que facilita la validación y almacenamiento.
  • Sin embargo, este método puede ser menos flexible en aplicaciones SPA (Single Page Application) como las que se construyen con Svelte.
2. Envío mediante JavaScript usando FormData
  • Permite una integración más dinámica con el frontend.
  • Se puede combinar con fetch o XMLHttpRequest para enviar los datos sin recargar la página.
  • Ideal para validar y preprocesar los archivos en el cliente antes de enviarlos.
3. Codificación en base64 y envío como JSON
  • El archivo se convierte en una cadena base64 y se envía como parte de un objeto JSON.
  • Útil cuando se quiere incrustar la imagen directamente en el HTML o en una base de datos.
  • Aunque aumenta el tamaño del archivo (~33%), permite una visualización inmediata sin necesidad de rutas físicas

Objetivo

Codificar un ejemplo simple, donde se pueda revisar el funcionamiento de los campos de tipo «file» y cómo se accede a la estructura de datos del fichero/s y cómo se accede al contenido del mismo.

También, cómo se pueden tratar esos ficheros en el server (PHP SLIM 4.0)

DEMO: https://fhumanes.com/my-upload-app/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace

Actualización plugin de Telegramia

Acabo de actualizar el plugin de Telegramia (cuenta caracteres o palabras en un campo de entrada).

Este plugin lo creo MIB.

El problema se presenta si se desea borrar un registro que tenga algún campo que utilice este plugin. Sale una ventana de confirmación de borrado, que no funciona y nunca permite borrar el registro.

El problema se presenta porque el plugin utiliza la librería de Sweetalert muy antigua , con lo que se carga esta versión en vez de la que incorpora PHPRunner, creo, que desde la versión 10.8.
La solución es eliminar esta librería del plugin y dejar la de PHPRunner.

He hecho pruebas y funciona perfectamente.

La nueva versión está en formato de los plugines de versión 11 y está en este enlace: https://fhumanes.com/blog/download-adjuntos/4416.

 

S-009 – Gestor de Stores y menú de App, aplicación SPA en Svelte

Al igual que hice en React, tengo intención de hacer una aplicación que contemple páginas publicas, páginas privadas, gestión de acceso, etc.

Soy consciente, que una solución completa conlleva bastante código y que esos ejemplos, para los que se inician no son prácticos, pues con tanto código no se sabe por dónde empezar, pero si que es un buen ejercicio para aquellos que desean realizar un aplicativo completo.

En este artículo se va a utilizar 2 soluciones que se requieren para ese tipo de desarrollo y así, en estos ejemplos espero que sean más sencillos para el aprendizaje de estos concepto.

Objetivo

  1. Utilización de Stores y Memoria local, para guardar datos de sesión. En esta solución nos basaremos para almacenar el TOKEN que acreditará la autorización de acceso de los usuarios. El concepto de Store es mucho más amplio que la autenticación y se puede utilizar en muchos otros aspectos.
    DEMO: https://fhumanes.com/my-store-app/
    Podéis probar con admin/admin o con fernando/1234

  2. Disponer de una solución de menú de aplicación para aplicaciones SPA (sólo una página), que sea muy simple para poderlo adaptar a nuestras necesidades.
    DEMO:     https://fhumanes.com/my-nav-app/

Si te interesa este tema, sigue leyendo el artículo en este enlace.

S-008 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -versión3 y Final-

Cuando estás empezando con unos nuevos componentes, tan amplios como los de SVAR , puedes estar aprendiendo nuevas cosas más de un mes, y modificando cualquier ejercicio que hayas iniciado en ese proceso de aprendizaje.

Este artículo es la última modificación que voy a presentaros y es la solución recomendada, para que la utilicéis de modelo. Esto no significa que las versiones anteriores no sirvan, que yo creo que para aprender , al ser más simples, son más sencillas para aprender cómo se utilizan los componentes de SVAR. Pero esta versión es la mejor si la tabla de datos que estás utilizando tiene algún aspecto de complejidad, además que explica nuevas funcionalidades de estos componentes.

Objetivo

Utilizar los componentes de SVAR para el ejemplo de la gestión de las Películas, pero mejorando las validaciones de las opciones ADD y EDIT, así como cambiar los botones al pie de la ventana de actualización de los datos.

Otro aspecto importante, para mejorar la lectura del código, es separar la gestión del GRID y la de FORMS de registros, para que sea muy sencillo hacer formularios todo lo complejos que se requieran.

DEMO: https://fhumanes.com/my-svar-app5/

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

S-007 – Ejemplo de CRUD con Svelte 5 y componentes de SVAR -Actualización-

He publicado la versión APP4, que no tenía prevista pero al revisar el código para cambiar interfaz de la solución he visto que el ejemplo tenía:

  • Estilos que me había dado la IA y que no se utilizaban (App.svelte).
  • El código de MovieGrid.svelte, que es el modelo, estaba desordenado, no teniendo perfectamente delimitado las secciones de: DataGrid, Editor, Filtros, Eliminación, etc. Así que lo he ordenado.
  • En principio creí que la parte de Editor era muy simple y que estaba limitado a pocas funcionalidades.
    No es así, el problema es que la IA (Copilot) conoce muy poco el componente y de ahí en código que tenía. Ahora lo he mejorado, incluyendo mensajes de Notificaciones en caso de error y controlando perfectamente las validaciones y acciones (botones). En la documentación de los componentes «está la sabiduría«.
  • He mejorado la estética del ejemplo, solamente con modificaciones de CSS. Está en App.svelte.

DEMO: https://fhumanes.com/my-svar-app4/

Si estás interesado en esto, acceder al artículo de este enlace.