Laravel: Fast Grid & Pagination – Part 2

It's about how development develops

Laravel: Fast Grid & Pagination – Part 2

Grid & Pagination

Creating the Grid

Part 1 of this series has shown us a real app with a grid holding more than 124,000 records with pagination using only Laravel features. Now it’s time to create our own version of it.

For this example, let’s use the User table once it is created by default when you first installed Laravel. We want to show the following fields on the grid:

id, name, email, and created_at

First of all, let’s create a controller to get the data.

Go to the directory of your project — click here to learn how to install and create a new Laravel project — and type:

php artisan make:controller UserController

It will create a file named UserController.php under app/Html/Controllers. Edit the file so it will be like this:

 

<?php
namespace App\Http\Controllers;
use App\User;

class UserController extends Controller
   {
        public function index()
        {
              $users = User::all();
               return view('users', [
               'users' => $users
          ]);
     }
 }

Now let’s make a page to show the users by creating a page named users.blade.php under /resource/views/

Inside the page, insert the following:
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Users</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
 <body>
     <h1>Users</h1>
 </body>
 </html>

Now let’s create a route to make the users.blade.php file available to the browsers:
1) Open the file /routes/web.php
2) add the following to the end of the file:

Route::get('/users', [
    'uses'=>'UserController@index'
]);

Now navigate to your local URL and access the “users” route. It should be something like http://localhost:8000/user. You should have a page not very interesting (yet!).

Just the Title - No Grid or Pagination yet

Just the Title – No Grid or Pagination yet

So far we created a controller that gets all the users, a page to show them and a route to make it public but we didn’t tell the page where or how to show the users.

BTW, which users?

That is a good question! In the app directory, type:

php artisan tinker

and then

 App\User::all()

If there is any user, it should be just a couple of them, what does not help us to test the grid. Therefore, let’s add some users taking advantage of the out-of-the-box factory Laravel offers to us (/database/factories/UserFactory.php).

 

Still under the tinker command line interface, type:

factory(App\User::class, 10)->create();

Now type

 App\User::count()

you should see 10 as result like:

 >>> App\User::count();
 => 10

if you want to see the records,

App\User::all();

Now that we have records, let see them on the users.blade.php page. Open that file and after the </h1> tag insert:

 @foreach($users as $user)
     {{$user->id}}
     {{$user->name}}
     {{$user->email}}
     {{$user->created_at}}
 @endforeach

Now visit the page (http://localhost:8000/users) and you will have all of the users, though not very readable, yet.

Grid - All the records but no grid or pagination yet.

Grid – All the records but no grid or pagination yet.

Where is the Pagination?

 In the next article, we will see how to show the records in a grid and add pagination to it.

Subscribe to our newsletter…

and we will let you know when the next part is available.

Leave a Reply

Your email address will not be published. Required fields are marked *