Load more data on scroll in Laravel

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.

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.

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

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

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.

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

Now, run the seeder by using command:

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.

Create Controller

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

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

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.

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!!!