30 julio, 2019
Para hacer un scroll infinito debemos tener una tabla llena de registros, además usaremos la API de Javascript para realizar las peticiones asíncronas
Suscríbete a nuestro canal en Youtube
SuscríbirseScrol Infinito es una técnica que puede ser muy interesante a la hora de desarrollar una aplicación web que muestra datos de forma asíncrona donde la principal funcionalidad es mostrar más datos cuando el usuario desplaze el cursor hacia la parte inferior de la página web.
Normalmente se emplea librerías de Javascript como Jquery, Vue.js, Axios.js, etc... para dicho efecto en este caso usaremos solo Javascript , si puro, donde usaremos la API por default que ahora nos honra como es fetch con sus métodos de peticiones asincronas para programar dicha funcionalidad.
Básicamente es reponder a la pregunta ¿Cómo crear un Scroll Infinito en Laravel?. Entonces, vamos a desarrollar un pequeño aplicativo web que filtre nombres por cantidades de 20 en 20 de una lista de 1000 conforme el usuario se desplaze hacia la parte inferior de la página web. Esta funcionalidad se aprecia mucho mejor cual la página web es visualizada y manipulada por un usuario que ingrese desde su dispositivo móvil, eso no quiere decir que no se pueda emplear en la versión de escritorio.
Consideraciones a tener en cuenta:
Para poner en contexto las actividades de la aplicación web, pues ya debemos tener lista la instalación y configuración básica de Laravel, luego de ello procedemos con las siguientes actividades:
Ubicamos el Archivo routes/web.php y modificamos el código de la siguiente manera:
<?php
Auth::routes();
Route::get('nombres', 'ScrollController@index');
Route::get('nombres/paginacion', 'ScrollController@paginacion');
La primera línea Auth::routes(); no la toquemos, por default ha sido generada para el login. La segunda línea es para gestionar la url /nombres con el método index del controllador ScrollController
La tercera línea realizar una petición al método paginación del controllador, éste método es usado por Fetch de Javascript para extraer los datos paginados de forma asíncrona.
Creación del modelo para migrar a la Base de datos llamada scrollinfinito, tenga en cuenta que debe agregar la migración para la creación de los respectivos archivos.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Nombres extends Model
{
protected $fillable =['slug','nombre','visitas'];
}
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateNombresTable extends Migration{
public function up(){
Schema::create('nombres', function (Blueprint $table) {
$table->increments('id');
$table->string('slug',50);
$table->string('nombre',50);
$table->integer('visitas')->default(1);
});
}
public function down() {
Schema::dropIfExists('nombres');
}
}
Para llenar la tabla de nombres con datos dejamos un link del repositorio Github para que puedan descargar 1000 registros con el script de la tabla y las consultas de inserción de los mismos. Lista de 1000 nombres en MYSQL
Este controllador se llamará NombresController y dispondrá dos métodos para realizar las consultas a la base de datos, en el encabezado invocaremos al modelo Nombres para usarlo en los métodos,
Método index que gestionará la petición get para extraer y devolver una cantidad de registros con paginate() de Laravel enlazado a la vista welcome
Y el Método paginacion muy parecido al método anterior, solo que éste devolverá datos una vista diferente, la vista es nombres.paginas
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Nombres;
class ScrollController extends Controller
{
public function index(){
$nombres = Nombres::paginate(50);
return view("welcome",compact("nombres"));
}
public function paginacion(){
$nombres = Nombres::paginate(50);
return view("nombres.paginas",compact("nombres"));
}
}
La cual deberá llamarse welcome.blade.php y permitirá mostrar los 50 primeros registros y los siguientes 50 (esta cantidad puede ser modificada de acuerdo al diseño de la aplicación) y así sucesivamente, hasta que el usuario deje de realizar peticiones o se termine de listar todos los registros de la tabla "nombres".
Por defecto Laravel genera una vista con el nombre de welcome lo que vamos a hacer es modificar y debe verse de la siguiente manera, notamos que realiza un include a la vista paginas que esta dentro del directorio nombre. Además agregamos un div identificado con el id cargando y el atributo hidden, esto para mostrar un mensaje cuando se esté procesando la petición get al servidor.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="col-8" id="contenedor">
@include('nombres.paginas')
</div>
<div id="cargando" hidden><h1>CARGANDO...</h1></div>
</div>
@endsection
Para crear esta vista primero creamos un directorio llamado nombres y dentro creamos la vista con el nombre de paginas.blade.php. El directorio de la vistas se encuentra en resource/views. La principal funcionalidad es que verifica si el objeto recibido "$nombres" del controlador tiene elementos si es asi, lo recorremos con foreach, este bucle mostrará en cada vuelta el valor del campo id y nombre de la tabla nombres. aqui hacemos uso extensivo de Blade.
@if (count($nombres))
@foreach ($nombres as $item)
<p>{{$item->id .' - '. $item->nombre}}</p>
@endforeach
@endif
Hasta este momento solo se muestran en la vista welcome los primeros 10 registros o cincuenta si fuere el caso, entonces recién vamos a proceder a crear esta funcionalidad; para ello necesitamos modificar agregando el script de Javascript en la Vista Blade de welcome. Y debe de quedar de la siguiente manera:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="col-8" id="contenedor">
@include('nombres.paginas')
</div>
<div id="cargando" hidden><h1>CARGANDO...</h1></div>
</div>
<script>
let pagina = 2
const cargando = document.getElementById("cargando")
window.onscroll = () =>{
cargando.removeAttribute('hidden')
if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight ){
fetch(`/nombres/paginacion?page=${pagina}`,{
method:'get'
})
.then(response => response.text() )
.then(html => {
cargando.setAttribute('hidden','')
document.getElementById("contenedor").innerHTML += html
pagina++;
})
.catch(error => console.log(error))
}
}
</script>
@endsection
El principal objeto que usamos es control el scroll de la ventana del navegador a través de window, para lograr ello realizamos la siguiente verificación if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight ), cómo vemos pregunta si la altura de la ventana más la coordenada Y de la página es mayor o igual a la altura del contenedor de la página web, si esto se cumple recién se procede a llamar API de conexiones asíncronas de Javascript.
La variable pagina controlará el número de página, esta se concatenará a la url que usa el método fetch de la API nativa de Javascript para peticiones asincronas, dentro de sus párametros usamos el métod get.
En la repuesta tomamos el texto y lo retornamos para tomarlo como html , este html con nuevos elementos es agregado al que ya existe con los antiguos elementos.
Incrementamos la variable página y asi termina cuando existe un scroll hacia abajo.
Si se vuelve a hacer otro scroll se repite toda la operación, hasta extraer el último registro de la tabla nombres.
Entonces llegamos a resumir que crear una aplicación básica y sencilla cómo ésta con la funcionalidad de scroll infinito, resulta sencillo y no tenemos porque cargar de líbrerías adicionales como: Jquery, Vue.js, Axios.js, etc.. ¿Por qué? simplemente porque mientras menos líneas de código o al menos solo las necesarias da una gran perfomance en cuanto a velocidad, obtenemos código mucho más legible y ordenado. Bueno es una apreciación personal que muchos pueden compartir, hasta un proximo vídeo.
Leido 7846 veces | 1 usuarios
20 descargas
Para descargar el código crea una cuenta
Crear cuenta© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024