Load more data on scroll in Laravel

4893
load more data with ajax in laravel.jpg

In this post, we will see how we can load more data on page scroll without page refresh with the help of ajax in Laravel. You may have seen this technique in many of the web application including facebook, youtube, twitter, etc. We are going to implement the same in our project.

How does it work?

Well, it works in a pretty simple way. First of all, when the page is first to hit, it loads the specific number of data from the backend. After reaching the bottom, you can either set a button to load more data or automatically fetch more data. This fetching process of data can be done by using Ajax. Ajax helps to load data from backend without loading of the page.

Implementation

We will create a simple web application which stores data about upcoming events. For this, we will use a events table. We will simply store the title of the event, description, organized by and event date in our database. So, let’s get started.

Create Laravel Project

To create a laravel project simply run the following command into your project directory.

composer create-project laravel/laravel kodementor

Note: You can read new features in laravel 5.6 in this article. If you are familiar with laravel, you can also create a CRUD application by following this article

Create Table and Model

We obviously need a table to store our record into database. For this, we will create table with migration. We will also create a model for this table. To create a migration of table simply run the following command.

php artisan make:migration create_events_table --create="events"

we will create a model for this table. Run the command:

php artisan make:model Event

So, we have migration and model, we will migrate our table. Run the command:

php artisan migrate

Note: You can learn about enabling and disabling CSRF for specific routes in laravel in this post

Seeding Database

For the demo purpose, we are seeding our database with fake data. Its a good news that laravel comes with this package. We will use laravel built-in faker package by fzaninotto. Run the command to create a seeder in our project.

php artisan make:seeder EventsTableSeeder

This will create a seeder file inside your database/mseeds directory. Open EventsTableSeeder file and write below codes.

public function run()
    {
        $faker = Faker::create();
        foreach (range(1,10) as $index) {
            DB::table('events')->insert([
                'title'        => $faker->company,
                'description'  => $faker->realText($maxNbChars = 500, $indexSize = 2),
                'event_date'   => $faker->dateTime,
                'organised_by' => $faker->name,
            ]);
        }
    }

Now, run the seeder by using command:

php artisan db:seed

You will seed that your events table in database has been populated.

Create Routes

We have setup our project, lets create our routes for displaying events. Add the following code in your web.php file inside your routes directory.

Route::get('events', 'EventController@getIndex');
Route::post('events', 'EventController@postIndex');

Create Controller

We need to create a controller to write our logic. Simply run the command:

php artisan make:controller EventController

Now, let’s make some changes in our controller. Our final controller looks like below:

     $events]);
        }

        public function postIndex(Request $request)
        {
            $output = '';
            $id = $request->id;

            $events = Event::where('id','>',$id)->orderBy('created_at','DESC')->limit(2)->get();

            if ( ! $events->isEmpty() )
            {
                foreach($events as $event)
                {
                    // $body = substr(strip_tags($event->description),0,500);
                    // $body .= strlen(strip_tags($event->description))>500?"...":"";

                    $output .= '

Event Name: '.$event->title.'

'.$event->description.'


'; } $output .= '
'; echo $output; } } }

Create View

Now, its time to finalize it by creating view for displaying results to user. Create a event.blade.php file inside resource/views directory and paste the below code inside it.

    
    
    
        Laravel Infinite Load Data
        
        
    
    

    

Load Data on Scroll


@foreach($events as $event)

Event Name: {{ $event->title }}

{{ $event->description }}


@endforeach

Now, we are done. We have already set up our project, seeded database, create routes, controller, and view. Let’s test our project by hitting the route localhost/kodementor/public/events, you will see the list of events with load more option. After you hit the load more button, it will fetch more data from the database and display it.
load more with ajax in laravel
Happy Coding!!!

Read More Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.