2-fetch api y php-SweetAlert

-

 En la primera parte de nuestro viaje de aprendizaje, exploramos cómo enviar y recibir datos entre un formulario web y un servidor utilizando Fetch API y PHP. Ahora, damos un paso más allá al mejorar la experiencia del usuario mediante la integración de SweetAlert2, una librería JavaScript que proporciona alertas más atractivas y personalizables.

1. Integrando SweetAlert2:

¿Qué tal ser capaces de proporcionar a los usuarios una experiencia más agradable y visualmente atractiva cuando sus datos se guardan con éxito? Hemos incorporado SweetAlert2 a nuestro formulario para lograr exactamente eso. Observa cómo lo hemos hecho:

<!-- Agrega la referencia a SweetAlert2 -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>


2. Mostrando Alertas Visuales:

Ahora, cada vez que los datos se guardan con éxito en el servidor, en lugar de una simple confirmación en la consola, utilizamos SweetAlert2 para presentar una alerta visual:

// Fragmento de código JavaScript

.then(data => {

    console.log(data.status);

    if (data.status === 'Correcto') {

        // Mostrar una alerta SweetAlert2

        Swal.fire({

            icon: 'success',

            title: 'Éxito',

            text: 'Datos guardados exitosamente',

            confirmButtonColor: '#3085d6',

        });


        // Deshabilitar el botón después de guardar los datos

        document.getElementById('guardarBtn').disabled = true;

    }

});



¡Excelente! Veo que has integrado SweetAlert2 para mostrar una alerta visual cuando los datos se guardan exitosamente. Ahora, para la segunda parte de tu post, podrías considerar resaltar la incorporación de SweetAlert2 y explicar cómo mejora la experiencia del usuario. Aquí te proporciono una redacción sugerida para la segunda parte del post:


Título: Despierta tu Curiosidad: Mejorando la Experiencia con SweetAlert2 y PHP


En la primera parte de nuestro viaje de aprendizaje, exploramos cómo enviar y recibir datos entre un formulario web y un servidor utilizando Fetch API y PHP. Ahora, damos un paso más allá al mejorar la experiencia del usuario mediante la integración de SweetAlert2, una librería JavaScript que proporciona alertas más atractivas y personalizables.


1. Integrando SweetAlert2:


¿Qué tal ser capaces de proporcionar a los usuarios una experiencia más agradable y visualmente atractiva cuando sus datos se guardan con éxito? Hemos incorporado SweetAlert2 a nuestro formulario para lograr exactamente eso. Observa cómo lo hemos hecho:


html

Copy code

<!-- Agrega la referencia a SweetAlert2 -->

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

2. Mostrando Alertas Visuales:


Ahora, cada vez que los datos se guardan con éxito en el servidor, en lugar de una simple confirmación en la consola, utilizamos SweetAlert2 para presentar una alerta visual:


javascript

Copy code

// Fragmento de código JavaScript

.then(data => {

    console.log(data.status);

    if (data.status === 'Correcto') {

        // Mostrar una alerta SweetAlert2

        Swal.fire({

            icon: 'success',

            title: 'Éxito',

            text: 'Datos guardados exitosamente',

            confirmButtonColor: '#3085d6',

        });


        // Deshabilitar el botón después de guardar los datos

        document.getElementById('guardarBtn').disabled = true;

    }

});

3. Mejorando la Experiencia del Usuario:

SweetAlert2 nos permite personalizar completamente el aspecto de nuestras alertas. Puedes cambiar los iconos, colores y mensajes según tus preferencias, brindando así una experiencia de usuario más intuitiva y atractiva.

4. ¿Por qué es Importante?

La mejora de la experiencia del usuario no solo se trata de estética; también influye en cómo los usuarios interactúan con tu aplicación. SweetAlert2 es solo uno de los muchos recursos disponibles para hacer que tu aplicación sea más atractiva y fácil de usar.

5. ¡Explora y Experimenta!

Este es solo el comienzo de tu viaje en el desarrollo web. Anímate a experimentar con diferentes herramientas y técnicas para llevar tus habilidades al siguiente nivel. ¿Tienes ideas para mejorar aún más este formulario? ¡Compártelas en los comentarios!

¡Despierta tu Curiosidad y Sigue Aprendiendo!

Con SweetAlert2, hemos dado un paso importante para hacer que nuestras aplicaciones web sean más interactivas y amigables. ¡Sigue explorando y descubriendo nuevas formas de mejorar tus proyectos! En la siguiente parte, exploraremos más conceptos emocionantes. ¡Estén atentos!

Codigo completo:

<body>

<div class="container">
    <form id="myForm">
        <div class="row">
            <div class="col-3">
                <div class="form-group">
                    <label for="carpeta">Carpeta de investigación:</label>
                    <input type="text" class="form-control inputstl" name="carpeta" id="carpeta" placeholder="Carpeta Judicial" aria-invalid="true">
                </div>
            </div>

            <!-- Campos ocultos para enviar el id al servidor -->
            <input type="hidden" name="id" value="<?php echo "17" ?>">

            <div class="col-2">
                <div class="form-group">
                    <button type="submit" class="btn btn-success" id="guardarBtn" >Guardar</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    var formulario = document.getElementById('myForm');
    formulario.addEventListener('submit', function(e){
    e.preventDefault();
    console.log('me diste un click')
    var datos = new FormData(formulario);
    console.log(datos.get('carpeta'))
    console.log(datos.get('id'))
    fetch('http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/1-carpeta.php', {
            method: 'POST',
            body: datos,
 
    })
        .then(res => res.json())
        .then(data => {
            console.log(data.status);
            if (data.status === 'Correcto') {
                // Mostrar una alerta SweetAlert2
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: 'Datos guardados exitosamente',
                    confirmButtonColor: '#3085d6',
                });

            }
        });
})
</script>


</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Filtrando por fecha

-
Cuando realizamos consultas a la base de datos haciendo uso de Eloquent, generalmente hacemos uso de las “Where Clauses” para de manera sencilla obtener información según ciertos parámetros,    por lo que haremos uso de dicha característica del ORM para ejemplificar el post del día de hoy. Ejemplos: Supongamos que desea filtrar las entradas creadas hoy, o cualquier otro día, podemos hacer lo siguiente: He visto gente haciéndolo con consultas sin procesar , como esta: $q->where(DB::raw("DATE(created_at) = '".date('Ymd')."'")); O sin consultas sin procesar por fecha y hora, así: $q->where('created_at', '>=', date('Ymd').' 00:00:00')); Afortunadamente, Laravel Query Builder ofrece una solución más elocuente : $q->whereDate('created_at', '=', date('Ymd')); En lugar de PHP date() puedes usar Carbon : $q->whereDate('created_at', '=', Carbon::today()-...
Leer más

10 videojuegos gratis para aprender JavaScript en línea

-
Imagen
  JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente para agregar funcionalidades interactivas a las páginas web. Es uno de los lenguajes de programación más populares y ampliamente utilizados en la actualidad, y se ejecuta en el lado del cliente (es decir, en el navegador web del usuario). JavaScript se utiliza para crear efectos dinámicos en las páginas web, como animaciones, formularios interactivos, menús desplegables, y mucho más. Además, también se puede utilizar para crear aplicaciones web completas y para trabajar con bases de datos y servidores web. En resumen, JavaScript es un lenguaje de programación esencial para cualquier desarrollador web que desee crear sitios y aplicaciones interactivas y dinámicas. Es posible aprender JavaScript jugando videojuegos. Existen muchos juegos educativos y plataformas de aprendizaje en línea que utilizan el lenguaje JavaScript para enseñar programación de manera divertida e interactiva. Estos juegos sue...
Leer más

reloj obs---datetime.lua

-
Imagen
  Como agregar un reloj a obs Como colocamos un reloj en obs. Primero descargamos el script datetime.lua del siguiente link:: https://obsproject.com/forum/resources/datetime-digital-clock.882/ Lo situamos en la carpeta de script de obs, la cual se encuentra en la siguiente ruta C:\Program Files\obs-studio\data\obs-plugins\frontend-tools\scripts   Lo siguiente es quitar la extencion .txt y dejar solo la lua en el script. Después de ello ingresamos a obs, creamos una etiqueta texto y la enlazamos con el escript. Para ello vamos a herramientas, script. Seleccionamos el script que descargamos y lo enlazamos con la etiqueta que creamos. Fin. 1-Agregamos una etiqueta texto y la llamamos reloj:: 1-1 1-2 1-3 2-Descargamos el scripts datetime.lua 2-1 2-2 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-3 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-4::Si tu...
Leer más