Create Laravel 8 Auto Load More Data on Page Scroll with AJAX

In this tutorial you will learn about the Create Laravel 8 Auto Load More Data on Page Scroll with AJAX and its application with practical example.

In this Create Laravel 8 Auto Load More Data on Page Scroll with AJAX tutorial I’ll show you how to create infinity scroll or ajax auto load more data pagination on page scroll in laravel using ajax. In this tutorial you will learn to create dynamic auto load more data pagination in laravel using ajax in laravel. In this step by step guide I’ll share example of ajax load more or infinity scroll in laravel using ajax.

Table Of Contents−

Create Laravel 8 Auto Load More Data on Page Scroll with AJAX
Create Laravel Project

Make Database Connection
Create Mode and Run Migration
Add Test Data

Generate and Set Up Controller
Create Route
Set up Blade View Template

Start server and Run Project

In this step by step tutorial I will demonstrate you how to create infinity scroll or ajax auto load more data pagination on page scroll in laravel. Please follow the instruction given below:

Step: 1 Create Laravel Project

Step: 2 Make Database Connection
Step: 3 Create Mode and Run Migration
Step: 4 Generate Dummy Data with Tinker Factory

Step: 5 Generate and Set Up Controller
Step: 6 Create Routes
Step: 7 Set Up View

Step: 8 Start server and Run Project

Create Laravel Project

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project laravel/laravel laravel-auto-load-more --prefer-dist

1	composer create-project laravel/laravel laravel-auto-load-more --prefer-dist

Make Database Connection

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db

DB_USERNAME=root

DB_PASSWORD=

Create Mode and Run Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Blog -m

1	php artisan make:model Blog -m

Next, update the below code in database/migrations/create_blogs_table.php file:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('post_name');
            $table->string('post_description');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('blogs');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateBlogsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('blogs', function (Blueprint $table) {

$table->id();

$table->string('post_name');

$table->string('post_description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('blogs');

}

Add following code in app/Models/Blog.php file:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Blog extends Model
{
    use HasFactory;
    protected $fillable = [
        'post_name',
        'post_description'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model

{

use HasFactory;

protected $fillable = [

'post_name',

'post_description'

];

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Add Test Data

In this step we will add some test data. Please run the following command:

php artisan make:factory BlogFactory --model=Blog

1	php artisan make:factory BlogFactory --model=Blog

Further, put the below code in database\factories\BlogFactory.php:

<?php

namespace Database\Factories;

use App\Models\Blog;
use Illuminate\Database\Eloquent\Factories\Factory;

class BlogFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Blog::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'post_name' => $this->faker->name,
            'post_description' => $this->faker->text
        ];
    }
}

<?php

namespace Database\Factories;

use App\Models\Blog;

use Illuminate\Database\Eloquent\Factories\Factory;

class BlogFactory extends Factory

{

/**

* The name of the factory's corresponding model.

* @var string

protected $model = Blog::class;

/**

* Define the model's default state.

* @return array

public function definition()

{

return [

'post_name' => $this->faker->name,

'post_description' => $this->faker->text

];

}

Open terminal, execute the below commands to generate the test data:

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Create Laravel 8 Auto Load More Data on Page Scroll with AJAX