INFINITO SCROLL PAGINACION FETCH GET API JSON JS PHP MYSQL CHATGPT

 ejemplo de infinito scroll con javascript window.onscroll  con fetch get sql limit offset mysql php tabla articulo id nombre precio foto

ChatGPT

Aquí tienes un ejemplo de cómo implementar la funcionalidad de "infinito scroll" en una página web utilizando JavaScript, window.onscroll, una solicitud fetch, PHP y MySQL para cargar datos de una tabla de artículos en función de la posición de desplazamiento del usuario. En este ejemplo, asumiremos que tienes una tabla llamada "articulos" con columnas "id", "nombre", "precio" y "foto".


HTML:


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Infinito Scroll</title>

    <style>

        #container {

            width: 80%;

            margin: 0 auto;

        }


        .item {

            border: 1px solid #ccc;

            margin: 10px;

            padding: 10px;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="items"></div>

</div>

<script src="script.js"></script>

</body>

</html>

JavaScript (script.js):


javascript

Copy code

let loading = false;

let currentPage = 0;


function fetchArticulos(offset, limit) {

    return fetch(`fetch_articulos.php?offset=${offset}&limit=${limit}`)

        .then(response => response.json());

}


function loadMoreArticulos() {

    if (loading) return;


    loading = true;


    fetchArticulos(currentPage * 10, 10)

        .then(data => {

            loading = false;

            if (data.length > 0) {

                const itemsContainer = document.getElementById("items");

                data.forEach(articulo => {

                    const item = document.createElement("div");

                    item.classList.add("item");

                    item.innerHTML = `

                        <p>ID: ${articulo.id}</p>

                        <p>Nombre: ${articulo.nombre}</p>

                        <p>Precio: $${articulo.precio}</p>

                        <img src="${articulo.foto}" alt="${articulo.nombre}">

                    `;

                    itemsContainer.appendChild(item);

                });

                currentPage++;

            }

        })

        .catch(error => {

            console.error("Error fetching data: ", error);

            loading = false;

        });

}


loadMoreArticulos();


window.onscroll = () => {

    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {

        loadMoreArticulos();

    }

};

PHP (fetch_articulos.php):


php

Copy code

<?php

// Conexión a la base de datos (reemplaza estos valores con los tuyos)

$host = "localhost";

$user = "tu_usuario";

$password = "tu_contraseña";

$database = "tu_base_de_datos";


$conn = new mysqli($host, $user, $password, $database);


if ($conn->connect_error) {

    die("Error de conexión a la base de datos: " . $conn->connect_error);

}


$offset = $_GET['offset'];

$limit = $_GET['limit'];


$query = "SELECT id, nombre, precio, foto FROM articulos LIMIT $limit OFFSET $offset";

$result = $conn->query($query);


$articulos = array();


if ($result->num_rows > 0) {

    while ($row = $result->fetch_assoc()) {

        $articulos[] = $row;

    }

}


$conn->close();


header("Content-Type: application/json");

echo json_encode($articulos);

?>

En este ejemplo, al desplazarse hacia abajo en la página, se cargarán más artículos cuando el usuario llegue al final de la página. La cantidad de artículos cargados por lote (offset) es 10 en este caso, pero puedes ajustarlo según tus necesidades. Asegúrate de reemplazar las credenciales de la base de datos y los nombres de las columnas por los correctos.





User

agregar un mensaje sin mas articulos en el codigo 

ChatGPT

Puedes agregar un mensaje que indique que no hay más artículos disponibles una vez que se hayan cargado todos los artículos. Para hacerlo, modifica el JavaScript de la siguiente manera:


javascript

Copy code

let loading = false;

let currentPage = 0;

let noMoreItems = false;


function fetchArticulos(offset, limit) {

    return fetch(`fetch_articulos.php?offset=${offset}&limit=${limit}`)

        .then(response => response.json());

}


function loadMoreArticulos() {

    if (loading || noMoreItems) return;


    loading = true;


    fetchArticulos(currentPage * 10, 10)

        .then(data => {

            loading = false;

            if (data.length > 0) {

                const itemsContainer = document.getElementById("items");

                data.forEach(articulo => {

                    const item = document.createElement("div");

                    item.classList.add("item");

                    item.innerHTML = `

                        <p>ID: ${articulo.id}</p>

                        <p>Nombre: ${articulo.nombre}</p>

                        <p>Precio: $${articulo.precio}</p>

                        <img src="${articulo.foto}" alt="${articulo.nombre}">

                    `;

                    itemsContainer.appendChild(item);

                });

                currentPage++;

            } else {

                noMoreItems = true;

                const noMoreItemsMessage = document.createElement("div");

                noMoreItemsMessage.classList.add("no-more-items");

                noMoreItemsMessage.textContent = "No hay más artículos disponibles.";

                itemsContainer.appendChild(noMoreItemsMessage);

            }

        })

        .catch(error => {

            console.error("Error fetching data: ", error);

            loading = false;

        });

}


loadMoreArticulos();


window.onscroll = () => {

    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {

        loadMoreArticulos();

    }

};

Con esta modificación, cuando no haya más artículos disponibles para cargar, se mostrará el mensaje "No hay más artículos disponibles." y el evento onscroll dejará de realizar solicitudes de carga adicionales.





User

el codigo para noMoreItemsMessage en index.html

ChatGPT

Puedes agregar el elemento noMoreItemsMessage directamente en tu archivo index.html. A continuación, se muestra cómo puedes hacerlo:


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Infinito Scroll</title>

    <style>

        #container {

            width: 80%;

            margin: 0 auto;

        }


        .item {

            border: 1px solid #ccc;

            margin: 10px;

            padding: 10px;

        }


        .no-more-items {

            text-align: center;

            font-weight: bold;

            color: #888;

            margin: 20px 0;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="items"></div>

    <div class="no-more-items">No hay más artículos disponibles.</div>

</div>

<script src="script.js"></script>

</body>

</html>

En este código HTML, se ha agregado un elemento <div> con la clase no-more-items, que contendrá el mensaje "No hay más artículos disponibles." Cuando no haya más artículos para cargar, este mensaje se mostrará automáticamente en la página gracias a la lógica implementada en el archivo JavaScript (script.js) cuando no hay más elementos para cargar.





User

noMoreItemsMessage que no vea al inciar cargar la pagina al primcipios

ChatGPT

Para evitar que el mensaje "No hay más artículos disponibles" se muestre al cargar la página, puedes ocultarlo inicialmente y mostrarlo solo cuando sea necesario. Para hacerlo, puedes utilizar CSS para ocultar el elemento y JavaScript para mostrarlo cuando sea apropiado. Aquí está cómo puedes lograrlo:


HTML (index.html):


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Infinito Scroll</title>

    <style>

        #container {

            width: 80%;

            margin: 0 auto;

        }


        .item {

            border: 1px solid #ccc;

            margin: 10px;

            padding: 10px;

        }


        .no-more-items {

            display: none; /* Ocultar el mensaje inicialmente */

            text-align: center;

            font-weight: bold;

            color: #888;

            margin: 20px 0;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="items"></div>

</div>

<div class="no-more-items">No hay más artículos disponibles.</div>

<script src="script.js"></script>

</body>

</html>

JavaScript (script.js):


javascript

Copy code

let loading = false;

let currentPage = 0;

let noMoreItems = false;

const noMoreItemsMessage = document.querySelector(".no-more-items");


function fetchArticulos(offset, limit) {

    return fetch(`fetch_articulos.php?offset=${offset}&limit=${limit}`)

        .then(response => response.json());

}


function loadMoreArticulos() {

    if (loading || noMoreItems) return;


    loading = true;


    fetchArticulos(currentPage * 10, 10)

        .then(data => {

            loading = false;

            if (data.length > 0) {

                const itemsContainer = document.getElementById("items");

                data.forEach(articulo => {

                    const item = document.createElement("div");

                    item.classList.add("item");

                    item.innerHTML = `

                        <p>ID: ${articulo.id}</p>

                        <p>Nombre: ${articulo.nombre}</p>

                        <p>Precio: $${articulo.precio}</p>

                        <img src="${articulo.foto}" alt="${articulo.nombre}">

                    `;

                    itemsContainer.appendChild(item);

                });

                currentPage++;

            } else {

                noMoreItems = true;

                noMoreItemsMessage.style.display = "block"; // Mostrar el mensaje

            }

        })

        .catch(error => {

            console.error("Error fetching data: ", error);

            loading = false;

        });

}


loadMoreArticulos();


window.onscroll = () => {

    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {

        loadMoreArticulos();

    }

};

En este código, hemos establecido inicialmente el estilo display del elemento .no-more-items en "none" para ocultarlo al cargar la página. Luego, cuando no haya más artículos para cargar, cambiamos el estilo display a "block" en el JavaScript para mostrar el mensaje. Esto asegura que el mensaje "No hay más artículos disponibles" solo se muestre cuando sea necesario.

Comentarios

Publicar un comentario

Entradas populares de este blog

Como proteger una api json con php al pasar el parametro POST[id] de los ataques sql injection y xss

 Como proteger una api json con php al pasar el parametro POST_[id] de los ataques sql injection y xss ChatGPT Para proteger una API JSON en PHP contra ataques de inyección SQL y XSS al pasar parámetros como POST[id], puedes seguir algunas prácticas de seguridad: Validación de entrada: Antes de usar cualquier dato recibido del usuario, valida y filtra la entrada para asegurarte de que cumple con los requisitos esperados. Puedes utilizar funciones como filter_input() o filter_var() para validar y sanitizar los datos. Preparación de consultas SQL: Si estás realizando consultas SQL directamente en tu base de datos, utiliza sentencias preparadas (prepared statements) y parámetros vinculados (bound parameters) en lugar de construir consultas SQL concatenando cadenas de texto. Las sentencias preparadas ayudan a prevenir la inyección SQL al separar los datos de las instrucciones SQL. Escape de salida: Cuando devuelvas datos a través de la API JSON, asegúrate de escapar apropiadamente los ...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

NUMEROS SERIE DE DISCO RIGIDO Y PENDRIVER USB CON PHP

 Para listar todos los dispositivos USB conectados y obtener su número de serie en PHP usando wmic, necesitas ajustar el comando wmic. El comando que tienes está intentando filtrar las unidades basadas en una letra de unidad, lo cual no funcionará para todos los dispositivos USB. En su lugar, puedes usar el siguiente enfoque:     Usa wmic diskdrive para obtener todos los dispositivos conectados, y luego puedes filtrarlos por MediaType o DeviceID para identificar cuáles son dispositivos USB. Aquí tienes el código corregido: php // Ejecutar el comando para listar todas las unidades de disco, incluyendo USB $output2 = shell_exec('wmic diskdrive where "MediaType=\'Removable Media\'" get DeviceID,SerialNumber,Model'); // Ver la salida completa (para depuración) echo "<pre>$output2</pre>"; Explicación:     wmic diskdrive where "MediaType='Removable Media'" get DeviceID,SerialNumber,Model: Este comando obtiene todas las unidade...
Leer más