Crud con Api Fetch

Compartir en

Lo primero que debemos hacer es crear la estructura de nuestro proyecto, luego nuestra base de datos con el nombre, crudfecth y luego nuestra tabla productos, con la siguientes estructura.

CREATE TABLE `productos` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `codigo` varchar(20) COLLATE utf8_spanish_ci NOT NULL,
  `producto` varchar(255) COLLATE utf8_spanish_ci NOT NULL,
  `precio` decimal(10,2) NOT NULL,
  `cantidad` int(11) NOT NULL
);

Posteriormente crearemos un archivo con el nombre index.php,

Ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Productos</title>
    <!--Puedes utilizar el cdn de bootstrap para los estilos-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <form class="col-lg-4" id="form">
                <div class="card border-primary">
                    <div class="card-header bg-primary">
                        <h5 class="card-title text-center">Registro de Productos</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="">Codigo</label>
                            <input type="hidden" class="form-control" name="idp" id="idp" value="">
                            <input type="text" placeholder="codigo" class="form-control" name="codigo" id="codigo" autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <label for="">Producto</label>
                            <input type="text" placeholder="Descripción" class="form-control" name="producto" id="producto" autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <label for="">Precio</label>
                            <input type="text" placeholder="Precio" class="form-control" name="precio" id="precio" autocomplete="off" required>
                        </div>
                        <div class="form-group">
                            <label for="">Cantidad</label>
                            <input type="text" placeholder="Cantidad" class="form-control" name="cantidad" id="cantidad" autocomplete="off" required>
                        </div>
                        <input type="button" class="btn btn-primary btn-block" id="registrar" value="Registrar">
                    </div>
                </div>
            </form>
            <div class="col-lg-8">
                <table class="table table-light table-hover table-responsive">
                    <thead class="thead-dark">
                        <tr>
                            <th>ID</th>
                            <th>PRODUCTO</th>
                            <th>PRECIO</th>
                            <th>CANTIDAD</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody id="resultado">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--Hace referencia a nuestro archivo script-->
    <script src="js/script.js"></script>
    <!--Hace referencia al plugin SweetAlert2-->
    <script src="js/sweetalert2@9.js"></script>
    <!-- Hace referencia a los icono de font Awesome-->
    <script src="js/all.min.js"></script>
</body>

</html>

Ahora crearemos la conexion PDO a nuestra base de datos. en mi caso se llama crudfecth

<?php
    $servidor = "mysql:dbname=crudfecth;host=localhost";
    $usuario = "root";
    $password = "";
    try {
        $pdo = new PDO($servidor, $usuario, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
    } catch (PDOException $e) {
        echo "Conexión fallida:" . $e->getMessage();
    }
?>

Ahora Crearemos nuestro archivo script.js para Listar, Registrar, Modificar y Eliminar. También para las notificaciones comenzaremos a utilizar el plugin Sweetalert2.

ListarProductos();

function ListarProductos() {
    fetch("consulta.php", {
        method: 'POST'
    }).then(response => response.text()).then(response => {
        resultado.innerHTML = response;
    }).catch(error => console.log(error));
}
registrar.addEventListener("click", (e) => {
    e.preventDefault();
    fetch("ajax.php", {
        method: 'POST',
        body: new FormData(form)
    }).then(response => response.text()).then(response => {
        if (response == "ok") {
            Swal.fire({
                icon: 'success',
                title: 'Registrado',
                showConfirmButton: false,
                timer: 1500
            });
            idp.value = "";
            form.reset();
            ListarProductos();
        } else if (response == "modificado") {
            Swal.fire({
                icon: 'success',
                title: 'Modificado',
                showConfirmButton: false,
                timer: 1500
            });
            idp.value = "";
            form.reset();
            ListarProductos();
            registrar.value = "Registrar";
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error al registrar',
                showConfirmButton: false,
                timer: 1500
            });
        }
    }).catch(error => console.log(error));
});

function eliminar(id) {
    Swal.fire({
        title: 'Esta seguro de eliminar?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Si!',
        cancelButtonText: 'No'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch("eliminar.php", {
                method: "POST",
                body: JSON.stringify({
                id: id
                })
            }).then(response => response.text()).then(response => {
                ListarProductos();
                Swal.fire({
                    icon: 'success',
                    title: 'Eliminado',
                    showConfirmButton: false,
                    timer: 1500
                })
            }).catch(error => console.log(error));
            
        }
    });
}

function editar(id) {
    fetch("editar.php", {
        method: "POST",
        body: JSON.stringify({
            id: id
        })
    }).then(response => response.json()).then(response => {
        idp.value = response.id;
        codigo.value = response.codigo;
        producto.value = response.producto;
        precio.value = response.precio;
        cantidad.value = response.cantidad;
        registrar.value = "Actualizar";
    }).catch(error => console.log(error));
}

Posteriormente código del lado del servidor.

  • Método listar
<?php
    require_once "conexion.php";
    $consulta = $pdo->prepare("SELECT * FROM productos ORDER BY id DESC");
    $consulta->execute();
    $result = $consulta->fetchAll(PDO::FETCH_ASSOC);
    foreach ($result as $data) {
        echo "
            <tr>
                <td>" . $data['id'] . "</td>
                <td>" . $data['producto'] . "</td>
                <td>" . $data['precio'] . "</td>
                <td>" . $data['cantidad'] . "</td>
                <td>
                    <button type='button' id='editar' class='btn btn-success' onclick=editar('" . $data['id'] . "')><i class='fas fa-edit'></i></button>
                    <button type='button' id='eliminar' class='btn btn-danger'><i class='fas fa-trash-alt' onclick=eliminar('" . $data['id'] . "')></i></button>
                </td>
            </tr>
        ";
    }
    
?>
  • Método registrar y modificar
<?php
    if (isset($_POST)) {
        if ($_POST['idp'] == "") {
            require "conexion.php";
            $codigo = $_POST['codigo'];
            $producto = $_POST['producto'];
            $precio = $_POST['precio'];
            $cantidad = $_POST['cantidad'];
            $query = $pdo->prepare("INSERT INTO productos (codigo, producto, precio, cantidad) VALUES (:codigo, :producto, :precio, :cantidad)");
            $query->bindParam(":codigo", $codigo);
            $query->bindParam(":producto", $producto);
            $query->bindParam(":precio", $precio);
            $query->bindParam(":cantidad", $cantidad);
            $query->execute();
            echo "ok";
            $pdo = null;
        }else{
            require "conexion.php";
            $codigo = $_POST['codigo'];
            $producto = $_POST['producto'];
            $precio = $_POST['precio'];
            $cantidad = $_POST['cantidad'];
            $id = $_POST['idp'];
            $query = $pdo->prepare("UPDATE productos SET codigo=:codigo, producto=:producto, precio=:precio, cantidad=:cantidad WHERE id = :id");
            $query->bindParam(":codigo", $codigo);
            $query->bindParam(":producto", $producto);
            $query->bindParam(":precio", $precio);
            $query->bindParam(":cantidad", $cantidad);
            $query->bindParam(":id", $id);
            $query->execute();
            echo "modificado";
            $pdo = null;
        }
    }
?>
  • Método Editar
<?php
        $data = json_decode(file_get_contents("php://input"));
        require "conexion.php";
        $id = $data->id;
        $query = $pdo->prepare("SELECT * FROM productos WHERE id = :id");
        $query->bindParam(":id", $id, PDO::PARAM_INT);
        $query->execute();
        $result = $query->fetch(PDO::FETCH_ASSOC);
        echo json_encode($result);
        $pdo = null;
?>
  • Método Eliminar
<?php
$data = json_decode(file_get_contents("php://input"));
$id = $data->id;
    require "conexion.php";
    $eliminar = $pdo->prepare("DELETE FROM productos WHERE id = $id");
    $eliminar->execute();
    if ($eliminar) {
        echo "ok";
    }
?>
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments