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.'
Event Date:'.date('M j, Y', strtotime($event->created_at)).'
Organised By:'.$event->organised_by.'
'; } $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 }}
Event Date: {{ $event->event_date }}
Organised By: {{ $event->organised_by }}
@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.
Happy Coding!!!