{"id":11001,"date":"2022-03-30T13:27:38","date_gmt":"2022-03-30T13:27:38","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=11001"},"modified":"2022-07-13T08:59:13","modified_gmt":"2022-07-13T08:59:13","slug":"laravel-pagination","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/laravel-pagination\/","title":{"rendered":"Effortless Pagination With Laravel!"},"content":{"rendered":"\n

Manual pagination is a very tedious job for any developer. But with Laravel, there is no need to write any extra code for paginating your data! At UI-Lib<\/a>, we believe Laravel is always there to save our day from writing complex codes. And as always, Laravel has never underestimated us. When it came to data pagination, Laravel took the responsibility to take care of the pagination side. And doing so, helped us focus more on handling our data and effortlessly paginate them. <\/p>\n\n\n\n

We all know what pagination is. It basically means separating our contents both in print or in digital form into discreet pages. But like Laravel we at UI-Lib<\/a> try our best to make you understand anything we write, effortlessly. So for the newbies, by saying pagination we mean the thing shown in the image below,<\/p>\n\n\n\n

\"pagination<\/figure>\n\n\n\n

Now let us understand how we can easily paginate our data. For this, we need to perform the following steps<\/p>\n\n\n\n

  1. Creating Project with Laravel<\/li>
  2. Database Configuration<\/li>
  3. Defining and Migrating Model<\/li>
  4. Fake Data Generation<\/li>
  5. Controller and Route Creation<\/li>
  6. Create View File<\/li>
  7. Use Pagination<\/li>
  8. Run Laravel Application<\/li><\/ol>\n\n\n\n

    Let’s dive into the process where we can see how easily we can use pagination in our project with Laravel,<\/p>\n\n\n\n

    Creating Project Laravel-Pagination With Laravel<\/h2>\n\n\n\n

    To practically understand how pagination is made easy with Laravel we first need to create a project with Laravel. Creating a project with Laravel is achieved with just one command, <\/p>\n\n\n

    \ncomposer create-project laravel\/laravel laravel-pagination\n<\/pre><\/div>\n\n\n
    Now our project folder is created. To work on our project we need to go inside the project directory,<\/p>\n\n\n
    \ncd laravel-pagination\n<\/pre><\/div>\n\n\n
    Database Configuration<\/h2>\n\n\n\n
    Next, we need to configure our .env<\/code> file inside the project folder. We need to start a local server on our local development system. For that, we are using XAMPP. Now we need to add the database configuration in our .env<\/code> file to establish a connection between Laravel and MySQL. <\/p>\n\n\n
    \nDB_CONNECTION=mysql\nDB_HOST=localhost\nDB_PORT=3306\nDB_DATABASE=laravel_db\nDB_USERNAME=root\nDB_PASSWORD=password\n<\/pre><\/div>\n\n\n
    As a reminder, you need to create a database named “laravel_db” to work with the above code.<\/p>\n\n\n\n
    Defining and Migrating Model<\/h2>\n\n\n\n
    We are at the stage now where we should start building our model. A model basically means the logical structure of a table in our database. By the following command, Laravel will automatically generate a Model named Student.<\/p>\n\n\n
    \nphp artisan make:model Student -m\n<\/pre><\/div>\n\n\n
    -m<\/code> means Laravel will also create a migration file where we can define the columns of the Student table. In the database\/migrations\/timestamp_create_students_table.php<\/code> file let us define the following columns in the up<\/code> method,<\/p>\n\n\n
    \npublic function up()\n{\n    Schema::create('students', function (Blueprint $table) {\n        $table->id();\n        $table->string('firstname');\n        $table->string('lastname');\n        $table->string('email')->unique();\n    });\n}\n<\/pre><\/div>\n\n\n
    Now in the app\/Models\/Student.php<\/code> file, we should add the fillable array so that we can add values to the columns.<\/p>\n\n\n
    \nnamespace App\\Models;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass Student extends Model\n{\n    use HasFactory;\n    protected $fillable = [\n        'firstname',\n        'lastname',\n        'email',\n    ];\n}\n<\/pre><\/div>\n\n\n
    Now we are ready to migrate,<\/p>\n\n\n
    \nphp artisan migrate\n<\/pre><\/div>\n\n\n
    Fake Data Generation For Laravel Pagination<\/h2>\n\n\n\n
    Pagination is a process where we can display a large amount of data in groups. For that, we need to generate a load of data.  Faker a built-in package provided by Laravel can come in handy now. Faker helps to create a specific amount of fake data to start working on our project. <\/p>\n\n\n\n
    In the database\/seed\/DatabaseSeeder.php<\/code> file let us write the following code,<\/p>\n\n\n
    \nuse Illuminate\\Database\\Seeder;\nuse Illuminate\\Support\\Facades\\DB;\nuse Faker\\Factory as Faker;\nclass DatabaseSeeder extends Seeder\n{\n    \/**\n     * Seed the application's database.\n     *\n     * @return void\n     *\/\n    public function run()\n    {\n        $faker = Faker::create();\n    \tforeach (range(1,1000) as $index) {\n            DB::table('students')->insert([\n                'firstname' => $faker->firstname,\n                'lastname' => $faker->lastname,\n                'email' => $faker->email,\n            ]);\n        }\n    }\n}\n<\/pre><\/div>\n\n\n
    The above code will generate 1000 fake data in the Student model. For that, we need to run the command below,<\/p>\n\n\n
    \nphp artisan db:seed\n<\/pre><\/div>\n\n\n
    Controller and Route Creation<\/h2>\n\n\n\n
    We are ready to create our controller file by the following command,<\/p>\n\n\n
    \nphp artisan make:controller StudentsController\n<\/pre><\/div>\n\n\n
    Now we should  start building the logic inside the controller file we created,<\/p>\n\n\n
    \nnamespace App\\Http\\Controllers;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Student;\nclass StudentsController extends Controller\n{\n    public function getStudentData(){\n      $students = Student::all();\n      return view('home', compact('students'));\n    }\n}\n<\/pre><\/div>\n\n\n
    Lastly, we define the route that will help us render the view file. In the routes\/web.php<\/code> file,<\/p>\n\n\n
    \nuse App\\Http\\Controllers\\ StudentsController;\n\nRoute::get('\/', [StudentsController::class, 'getStudentData']);\n<\/pre><\/div>\n\n\n
    The above code will display the home.blade.php<\/code> file in the browser.<\/p>\n\n\n\n
    Create View File To Display Laravel Pagination<\/h2>\n\n\n\n
    We now create a home.blade.php<\/code> file and show the data from our Student model.<\/p>\n\n\n
    \n&lt;!DOCTYPE html>\n    &lt;html>\n    &lt;head>\n        &lt;title>Laravel Pagination&lt;\/title>\n    &lt;\/head>\n    &lt;body>\n        &lt;div>\n            &lt;table>\n                &lt;thead>\n                    &lt;tr>\n                        &lt;th">#&lt;\/th>\n                        &lt;th>First name&lt;\/th>\n                        &lt;th>Last name&lt;\/th>\n                        &lt;th>Email&lt;\/th>\n                    &lt;\/tr>\n                &lt;\/thead>\n                &lt;tbody>\n                    @foreach($students as $student)\n                    &lt;tr>\n                        &lt;th>{{ $student->id }}&lt;\/th>\n                        &lt;td>{{ $student->firstname }}&lt;\/td>\n                        &lt;td>{{ $student->lastname }}&lt;\/td>\n                        &lt;td>{{ $student->email }}&lt;\/td>\n                    &lt;\/tr>\n                    @endforeach\n                &lt;\/tbody>\n            &lt;\/table>\n        &lt;\/div>\n    &lt;\/body>\n&lt;\/html>\n<\/pre><\/div>\n\n\n
     Use Laravel Pagination <\/h2>\n\n\n\n
    In this step, the interesting and the most effortless thing begins. Previously for creating pagination we needed to manually write a code for paginating data. Now you will be amazed to know that we just need to do a simple thing for pagination. In the StudentsController.php<\/code> file where we defined all()<\/code> method we just need to change that and call the paginate()<\/code> method. paginate()<\/code> takes a simple integer value which will indicate how much data to show on a single page.<\/p>\n\n\n
    \nnamespace App\\Http\\Controllers;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Student;\nclass StudentsController extends Controller\n{\n    public function getStudentData(){\n      $students = Student::paginate(25);\n      return view('home', compact('students'));\n    }\n}\n<\/pre><\/div>\n\n\n
    The above code will show the first 25 student’s data in the view file and add a pagination bar that will link the other student’s data. But to do that in the home.blade.php<\/code> we should add the following code,<\/p>\n\n\n
    \n {!! $students->links() !!}\n<\/pre><\/div>\n\n\n
    The entire home.blade.php<\/code> the file will look like below,<\/p>\n\n\n
    \n&lt;!DOCTYPE html>\n    &lt;html>\n    &lt;head>\n        &lt;title>Laravel Pagination&lt;\/title>\n    &lt;\/head>\n    &lt;body>\n        &lt;div>\n            &lt;table>\n                &lt;thead>\n                    &lt;tr>\n                        &lt;th">#&lt;\/th>\n                        &lt;th>First name&lt;\/th>\n                        &lt;th>Last name&lt;\/th>\n                        &lt;th>Email&lt;\/th>\n                    &lt;\/tr>\n                &lt;\/thead>\n                &lt;tbody>\n                    @foreach($students as $student)\n                    &lt;tr>\n                        &lt;th>{{ $student->id }}&lt;\/th>\n                        &lt;td>{{ $student->firstname }}&lt;\/td>\n                        &lt;td>{{ $student->lastname }}&lt;\/td>\n                        &lt;td>{{ $student->email }}&lt;\/td>\n                    &lt;\/tr>\n                    @endforeach\n                &lt;\/tbody>\n            &lt;\/table>\n          {!! $students->links() !!}\n        &lt;\/div>\n    &lt;\/body>\n&lt;\/html>\n<\/pre><\/div>\n\n\n
    Thus, just like that, we can add pagination to our Laravel project.<\/p>\n\n\n\n
    Run Laravel Application<\/h2>\n\n\n\n
    Finally, to see what we created we should run the Laravel application with the following command and check the result on the URL http:\/\/127.0.0.1:8000<\/a>,<\/p>\n\n\n
    \nphp artisan serve\n<\/pre><\/div>\n\n\n
    Conclusion<\/h2>\n\n\n\n
    Laravel, for us, is an amazing web framework. For this reason, we are always eager to explore what features we can achieve from it. As a result, we stumble upon many exciting functionalities. And, that is why we can bring you new blogs and products every day.<\/p>\n\n\n\n
    Pagination was a nightmare for us previously, running a loop for a certain number of times and then decorating the pagination style. However, Laravel thought about us and tried its best to solve this issue. And, we can say with certainty, that it has completely made pagination effortless for us.    <\/p>\n\n\n\n
    Our Products Based on Laravel<\/span><\/h2>\n\n\n\n
    \n
    Aatrox – Tailwind HTML + Laravel Dashboard<\/a><\/blockquote>