fetch api y php-enviar el registro - Actualizar

 

¡Hola a todos los apasionados por la programación! En este emocionante post, daremos un paso esencial en nuestro viaje hacia el desarrollo web. ¿Te gustaría aprender a enviar datos a una base de datos desde tu página web? ¡Sigue leyendo y descubre cómo!

1. Configurando el Escenario:

Antes de sumergirnos en el fascinante mundo de la programación, echemos un vistazo al código que prepararemos para enviar nuestros datos a una base de datos. En el lado del cliente, hemos creado un sencillo formulario utilizando HTML y JavaScript. Este formulario captura la "Carpeta de Investigación" y la envía al servidor.

<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>

2. El Baile en el Servidor:

En el servidor, hemos preparado clases y métodos en PHP para gestionar la conexión a la base de datos y guardar los datos enviados desde el formulario. Echa un vistazo al código a continuación:

php

<?php

class Conexion
{
    static public function conectar()
    {
        $link = new PDO("mysql:host=localhost;dbname="", "", "");
        return $link;
    }
}

class CarpetaModel extends Conexion
{
    public function guardarDatos($carpeta, $id)
    {

        try {
            $stmt = Conexion::conectar()->prepare("UPDATE carpetas SET carpeta=:carpeta WHERE id=:id");
            $stmt->bindParam(":carpeta", $carpeta, PDO::PARAM_STR);
            $stmt->bindParam(":id", $id, PDO::PARAM_STR);

            if ($stmt->execute()) {
                // ¡Datos guardados con éxito! Vamos a informar al cliente.
                echo json_encode(array("status" => "Correcto", "carpeta" => $carpeta));
            } else {
                http_response_code(500);
                echo json_encode(array("status" => "error", "message" => "Error al ejecutar la consulta"));
            }
           
        } catch (PDOException $e) {
            // ¡Manejar errores si es necesario! http_response_code(500);
            echo json_encode(array("status" => "error", "message" => $e->getMessage()));
        }
    }

}
if(isset($_POST['carpeta'])){
    $carpeta=$_POST['carpeta'];
    if($carpeta === '' ){
        echo json_encode(['mensaje' => 'Llena todos los campos']);
    }else{
        $carpetaModel = new CarpetaModel();
        $carpetaModel->guardarDatos($_POST['carpeta'], $_POST['id']);
     
    }
}else {
    // La variable es null o no está definida
    // Puedes realizar acciones alternativas aquí
   
    echo json_encode(['mensaje' => 'Llena todos los campos']);
}
?>


o y llamar a 3. ¡La Magia Sucede!


Cuando enviamos nuestros datos, no solo los almacenamos en la base de datos, sino que también brindamos una experiencia de usuario mejorada. Después de guardar exitosamente, deshabilitamos el botón y el campo de entrada, ¡todo mientras mostramos una elegante alerta visual gracias a SweetAlert2!

javascript
<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',
                });

                // Deshabilitar el botón después de guardar los datos
                document.getElementById('guardarBtn').disabled = true;

                // Deshabilitar el campo de entrada después de guardar los datos
                document.getElementById('carpeta').disabled = true;
            }
        });
})
</script>


4. ¿Qué Sigue?

Este es solo el comienzo de nuestra emocionante travesía. En el próximo post, no solo aprenderemos más sobre bases de datos y formularios, ¡sino que también te revelaré cómo puedes llevar tus habilidades al siguiente nivel con un curso exclusivo que estoy preparando! ¿Estás listo para el desafío? ¡Sigue atento y únete a nosotros en este viaje de aprendizaje!


Espero que esta redacción sea de tu agrado y capte la atención de tus lectores. ¡Buena suerte con tu post y tu curso!


Comentarios

Publicar un comentario

Entradas populares de este blog

Normalizar valores

 Para asegurarte de que todos los registros en la columna juez que coinciden con "LIC. ERICK SERRANO" (y sus variantes) se cambien exactamente a "LIC. ERICK SERRANO", puedes utilizar una consulta SQL que normalice esos valores. Esto eliminará las diferencias de formato que puedan estar causando que se cuenten como registros distintos. DELETE FROM carpetas; UPDATE control SET estatus = 'TRÁMITE' ; UPDATE `carpetas` SET `juez` = ' LIC. PATRICIA LOZANO ' WHERE `juez` LIKE '% PATRICIA LOZANO %'; UPDATE `carpetas` SET `juez` = 'LIC. ERICK SERRANO' WHERE `juez` LIKE '%ERICK SERRANO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'CON DETENIDO' WHERE `tipo_solicitud` LIKE '%CON DETENIDO%'; UPDATE `carpetas` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE '%ORDEN DE APRENSION%'; UPDATE `control` SET `tipo_solicitud` = 'ORDEN DE APREHENSION' WHERE `tipo_solicitud` LIKE...
Leer más

NORMALIZAR TABLA-audiencia_intervinientes

 Para normalizar las columnas relacionadas con los intervinientes en la tabla audiencia , puedes seguir un proceso similar al que hicimos con los delitos. Vamos a crear una nueva tabla llamada audiencia_intervinientes , donde cada interviniente estará asociado a una audiencia con un tipo que indica qué rol (asistente, víctima, asesor, etc.) desempeña en esa audiencia. 1. Crear la nueva tabla audiencia_intervinientes Esta tabla contendrá una columna nombre , una columna tipo que identificará el tipo de interviniente, y una clave foránea que haga referencia a la tabla audiencia . CREATE TABLE audiencia_intervinientes (     id_interviniente INT AUTO_INCREMENT PRIMARY KEY,     id_audiencia INT NOT NULL,     nombre VARCHAR(150) NOT NULL,     tipo VARCHAR(50) NOT NULL,     FOREIGN KEY (id_audiencia) REFERENCES audiencia(id_audiencia) ON DELETE CASCADE ); 2. Insertar los intervinientes antiguos en la nueva tabla Ahora, vamos a mover los...
Leer más

Listar audiencias

  <!-- Listar Audiencias -->     <h4> Audiencias </h4>     <table class = "table" >         <thead>             <tr>                 <th> ID </th>                 <th> Folio_S </th>                 <th> Carpeta </th>                 <th> Nombre </th>                 <th> Fecha </th>                 <th> Video </th>             </tr>         </thead>         <tbody>             <?php             $audienciasCtr = new Contr...
Leer más