DEV Community: Arman Hasan

Install free TLS/SSL certificate on Ubuntu 20.04

Arman Hasan — Mon, 24 Jan 2022 19:02:56 +0000

Introduction
Prerequisites
Server Login
Installing Certbot
Auto-Renewal Certbot

Introduction

TLS/SSL is the standard security technology that works behind the scenes invisibly to the end-user devices to make a secure connection. It creates a protected connection between the user-end and the server-end and authenticates the user’s information to legitimate website owners.

In this guide, we’ll enable encrypted HTTPS on web servers to simplify the process by providing a secure connection. The entire process we’ll use Certbot to install a free SSL certificate for NGINX on Ubuntu 20.04 with an auto-renewal process.

Prerequisites

To stick with this guide, you need:

Ubuntu 20.04 server setup, for setting up the server from scratch Step-By-Step Guide to Deploying Laravel Applications on Virtual Private Servers follow this amazing deploying guide in Digital Ocean.
Registered domain

Server Login

To get a free SSL certificate we need to install Certbot on the server to configure HTTPS with the domain name. Firstly log into the domain IP Address with ssh keys if you don’t know how to configure the SSH key setup then you can follow this
How To Set Up SSH Keys might help you to understand the secure shell connection. Open the terminal and write the following command

ssh -i ‘here put your ssh key location’ host_name@vlaue

example

ssh -i ‘/home/.ssh/’ cheems@199.180.130.80

Assume my server name: cheems and value is 199.180.130.80

Installing Certbot

To get an SSL certificate on the domain we’ll need to install the Certbot by hitting a simple command on the terminal to make sure you are logged in the server. Then run this command

sudo snap install --classic certbot

This command will install the certbot program in the server now need to execute this command

sudo certbot --nginx

After hitting this you will see those outputs

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: cheems
2: www.cheems
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):

You can select multiple domain by adding a space between numbers like 1 2 and then hit enter
Then you’ll see outputs like this

Obtaining a new certificate
Performing the following challenges:
http-01 challenge for cheems
http-01 challenge for www.cheems
Enabled Apache rewrite module
Waiting for verification...
Cleaning up challenges
Created an SSL vhost at /etc/apache2/sites-available/cheems-le-ssl.conf
Enabled Apache socache_shmcb module
Enabled Apache ssl module
Deploying Certificate to VirtualHost /etc/apache2/sites-available/cheems-le-ssl.conf
Enabling available site: /etc/apache2/sites-available/cheems-le-ssl.conf
Deploying Certificate to VirtualHost /etc/apache2/sites-available/cheems-le-ssl.conf

Now next part is the redirection setup. When a request comes into your domain will automatically redirect to the HTTPS address of your domain address. So Always select 2 to enable this redirection setup

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

After this, the installation and the setup configuration is done and it’ll show an output like this

Congratulations! You have successfully enabled https://cheems and
https://www.cheems

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=cheems
https://www.ssllabs.com/ssltest/analyze.html?d=www.cheems
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/cheems/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/cheems/privkey.pem
   Your cert will expire on 2022-01-25. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

Congratulations if you are still up and running to install and configure but this free version of SSL is only valid for three months so it’s a huge pain to remember when will the HTTPS certificate expire. No worries there’s a way to make this automatic procedure to reinstall the certificate and renew it before the expiry date.

Auto-Renewal Certbot

To make the process in an automatic manner just write down this command

sudo systemctl status certbot.timer

This command will run the certbot scripts twice a day and will automatically renew any SSL certificate. You will see this kind of output

● certbot.timer - Run certbot twice daily
     Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
     Active: active (waiting) since Tue 2022-01-25 17:57:48 UTC; 17h ago
    Trigger: Wed 2022-01-25 23:50:31 UTC; 12h left
   Triggers: ● certbot.service

Mar 25 17:57:48 fine-turtle systemd[1]: Started Run certbot twice daily.

Now to test the renewal process simply just hit this line

sudo certbot renew --dry-run

If theres no error then all set and ready to go.

Laravel 8 Passport OAuth 2.0

Arman Hasan — Mon, 22 Nov 2021 04:11:43 +0000

Hello* Amigos how's this going? For every application authentication system to controls the potentials of the application. Laravel applications are quite secure through but to handle the authentication part normally we use the basic Scaffolding authenticate system of Laravel. When we need to handle the authenticate system with API's there's some security layer issue that occurs. Because API uses tokens to authenticate between request-ends but it does not maintain session states. In laravel to make the authentication system more secure in cross-application, a better option is using OAuth 2.0.
Let's learn about the OAuth2.0 and implement it via using Laravel package Passport

Reasons To Use Passport & OAuth2.0

Overview

OAuth Workflow

Installation

Setup Client

Conclusion

Reasons To Use Passport & OAuth2.0

While setting up the authentication system in our Laravel application the first question will rise that When and why should we need to use the Laravel Passport package and OAuth2.0 server. right? Valid question...
It depends on your Laravel application ground state. If your application needs cross-application authorization support then using OAuth2.0 via Laravel Passport is the best option. However, if an application requires only attempting to authenticate a single-page application, mobile application, or issue API tokens then don't need to use OAuth 2.0.

Overview

Laravel Passport provides a full OAuth2 server implementation for your applications. Is registers own database migration directory and create the tables your application needs to store OAuth2 clients and access tokens so you should migrate your database. With passport using OAuth2.0 provides secure delegated access over HTTP and authorizes Devices, APIs, Servers with access tokens instead of sharing credentials.

OAuth Workflow

Mainly OAuth 2.0 has three main roles

Users (Resource Server)

Applications

API's (Authorize Server)

To get a better understanding of the OAuth workflow lets to assume some examples to think the end-points first. The application sends the request to the resources server to provide the grant code then the resources server sends back the grand code to the application via API's authorized server this is how OAuth workflow works.

Installation

To use the Laravel passport package we need to open the terminal and create a laravel application with the composer command



composer create-project laravel/laravel PassportTest

This command creates a fresh laravel app.

For Basic Authenticate we will use Laravel Breeze to automatically scaffold the application with the routes, controllers, and views you need to register and authenticate.

To install Breeze run this command



composer require laravel/breeze --dev

php artisan breeze: install

npm install && npm run dev

Now we need to run the composer command to install passport in the application



composer require laravel/passport

After running this command need to migrate to get the passport package migration files



php artisan migrate

We have all the required migrations files in our database now need to install passport via this command



php artisan passport:install

Now need to modify the User Model file in app/Models/Users.php and add this trait



namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Now need to add in the app\Providers\AppServiceProvider.php
to call the routes in the boot method



namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Laravel\Passport\Passport;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        //
    }

    public function boot()
    {
        Passport::routes();
    }
}

Now let's configure the default guards from the config/auth.php file by setting up the API driver to the passport




    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],

Installation complete into the app.

Setup Client

In Register, File lets get to register a user

Now add client add form in dashboard.blade.php file



<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>{{- <div class="container mx-auto"> -}}<div class="flex">
            <div class="w-1/2">
                <div class="p-6">
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6 bg-white border-b border-gray-200">
                            <form method="POST" action="/oauth/clients">
                                @csrf

                                <!-- Name  -->
                                <div>
                                    <x-label for="name" :value="__('name')" />
                                    <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')"  placeholder="Client name" required autofocus />
                                </div>

                                <!-- url  -->
                                <div class="py-4">
                                    <x-label for="redirect" :value="__('Redirect Link')" />
                                    <x-input id="redirect" class="block mt-1 w-full" type="text" name="redirect" placeholder="https://facebook.com" required autofocus />
                                </div>


                                <div class="flex  justify-start">
                                    <x-button >
                                        {{ __('Create Client') }}
                                    </x-button>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-1/2">{{- mx-auto sm:px-6 lg:px-8 -}}<div class="p-6">
                    <div class=" overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="bg-white p-6 border-b border-gray-200">
                            <h2>Clients</h2>
                            @foreach ($clients as $client)
                            <div class="bg-gradient-to-r from-yellow-100 to-yellow-100 p-2 my-4">
                                <div class="max-w-6 mx-auto">
                                  <h2 class="text tracking-tight text-gray-900 ">
                                    <span class="block"><b>ID: </b>{{ $client->id }}</span>
                                    <span class="block"><b>Name: </b>{{ $client->name }}</span>
                                    <span class="block"><b>Secret: </b>{{ $client->secret }}</span>
                                    <span class="block"><b>Provider: </b>
                                        @if($client->provider == null )
                                            Null
                                        @else
                                            {{ $client->provider }})
                                        @endif
                                    </span>
                                    <span class="block"><b>Redirect: </b>{{ $client->redirect }}</span>
                                    <span class="block"><b>Access: </b>{{ $client->personal_access_client }}</span>
                                    <span class="block"><b>CLient Password: </b>{{ $client->password_client }}</span>
                                    <span class="block"><b>Revoked: </b>{{ $client->revoked }}</span>
                                  </h2>
                                </div>
                              </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>{{- </div> -}}</x-app-layout>

Here we are adding a form for creating a client credential and redirect callbacks then we also show the inputs on one page. After inserting two data the page will look like this. that's a successful workable passport with OAuth.

Now to test the system we need to go in the POSTMAN for API request checking

The postman needs to add a new request with the GET method and paste the URL in the URL field and all the specified fields like redirect_url, client_id, secret_code, and a 40 random number in the state for a random token type password. the send the request and we can see a login page where we can log in and this request will redirect into a new page authorization page.

Conclusion

Laravel Passport makes it super easy to install and use for API authentication and authorization into another site from our laravel site without registering from the very beginning and sharing the same credentials manually.
Thank you for reading.

Laravel Accessors And Mutators

Arman Hasan — Tue, 02 Nov 2021 08:12:55 +0000

Hello artisans how's everything going? Working with Laravel Eloquent ORM we often need to change or format the behavior of data. Accessors and Mutators simply changed the format or the behavior of the data while retrieving and storing. We'll see simple examples to understand these concepts easily

Setup Project & Model

Accessors

Mutators

Database Seeder

Route & Controller

Overview

Setup Project & Model

To start the example we need to install and set up the model and database connection first. I'm using phpMyAdmin (MySQL database).

To create a fresh Laravel application run this command in terminal



composer create-project laravel/laravel demoapp

now we have a fresh Laravel application. I already created a database in PHPMyAdmin now go in the .env file to set the database connection



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=demoapp
DB_USERNAME=root
DB_PASSWORD=

Accessors

Accessors is a get attribute in Laravel when getting data in a changed or dummy formatted attribute we use an accessor. Suppose we have User model with data table columns with first_name & last_name.



<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('phone_code');
            $table->string('phone_number');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Now we want a full_name attribute to concatenate both first_name and last_name to get full_name. let's see an example for a clear understanding

Go to the app\Models\Users.phpfile and write the Assessor method

Syntext For Accessors



protected $fillable = [
        'name',
        'phone_code',
        'phone_number',
        'email',
        'password',
    ];

// Accessor Method
public function getPhoneAttribute() {
     return $this->phone_code . "-" . $this->phone_number;
}

Mutators

Mutator is a setter value attribute that transforms an Eloquent attribute value when it is set into the database. To get an example lets again go back to app\Models\Users.php to write a mutator method

Syntext For Mutators



// Mutator Method
public function setNameAttribute($value)
{
   return $this->attributes['name'] = ucfirst($value);
}

We are trying to convert the first character of a name string to uppercase that's why using the ucfirst() function to transform the data while storing.

Database Seeder

To test our methods we need to have some data in our database. Using seeder to create data for example

In the database/factories/UserFactory.php file write this factory seeder



public function definition()
    {
       return [
           'name' => $this->faker->name(),
           // this will create 3 digit random numbers
           'phone_code' => $this->faker->numerify('###'),
           // this will create 10 digit random numbers
           'phone_number' => $this->faker->numerify('##########'),
           'email' => $this->faker->unique()->safeEmail(),
           'email_verified_at' => now(),
           'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
           'remember_token' => Str::random(10),
       ];
   }

Now need to add this in database/factories/DatabaseSeeders.php



class DatabaseSeeder extends Seeder
{
    public function run()
    {
        \App\Models\User::factory(10)->create();
    }
}

Route & Controller

In the web.php route file add this route to view the welcome page



<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Controller;


Route::get('/',[Controller::class,'index']);

In app/Http/Controllers/Controller.php write this function



public function index()
    {
        $data = User::all();
        return view('welcome')->with('data',$data);
    }

This function will fetch all the data from the User Model in welcome.blade.php

Blade File



<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo App</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="card shadow p-3 mb-5 mt-5 bg-white rounded mx-auto">
                    <div class="">
                        <table class="table table-striped table-dark">
                            <thead>
                              <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Phone</th>
                              </tr>
                            </thead>
                            <tbody>
                                @foreach ($data as $d)
                              <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $d->name }}</td>
                                <td>{{ $d->phone }}</td>
                              </tr>
                              @endforeach
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Overview

This is our welcome.blade.php file where we can see data formations are changed according to the User.php model Accessors and Mutators methods. we are getting the phone_code and phone_number into phone attribute call. also, we are getting the names in formatted order.

Thats all stay tuned

Server-Side Rendering of DataTables in Laravel

Arman Hasan — Tue, 26 Oct 2021 09:03:20 +0000

Hello artisans how's everything going as a Laravel developer? Hopefully great. Working in Laravel locally or in production we need to work with datatables in many manners. Now We will see the yajra datatable with proper oriented steps to handle small and huge data records. Usually most of the developers render data on the client-side using jQuery Datatables. But when the volume of data is big, server-side rendering can boost performance. In this article, I'll discuss the process of rendering datatables on server-side using one of the most popular packages out there.

Prerequisite

Installation & Configuration

Model and Migrations

Database Connection

Dummy Data With Faker

Controller & Routes

Setup Blade File

Conclusion

Prerequisite

Basically the prerequisite will already filled up with Laravel installation because you have to have composer and installed Laravel project to use yajra as well
To install Laravel demo application latest version use the below command



composer create-project laravel/laravel demoapp

Installation & Configuration

In the Laravel project folder demoapp and open command prompt to execute this command to get the latest updated version of yajra package



composer require yajra/laravel-datatables

Now need to published the vendod files



php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Now in your 'demoapp/composer.json' file you can see this yajra added to your application.



 "require": {
        ...,
        "yajra/laravel-datatables-oracle": "^9.18"
    },

Then you have to add those providers and aliases array's in root/config/app.php file



'providers' => [
    ...,       
    Yajra\DataTables\DataTablesServiceProvider::class, 
    ],

'aliases' => [ 
    ...,
    'DataTables' =>Yajra\DataTables\Facades\DataTables::class,
    ],

after adding the line in provider list
then need to run this command to update and published the vendor files



php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

Now good to go and serve the application, with artisan command



php artisan serve


``` now type this url in the browser to see the welcome page of laravel  `http://127.0.0.1:8000/` 

![Laravel welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnl19slj28sfobqwwmvu.png)


<h3>
  <a name="ModelandMigrations" href="#ModelandMigrations" class="anchor"></a>
  Model and Migrations
</h3>

To set up the database we need to create a model and migration table for the schema. run this command to create a model and migration at the same time. 

```php


php artisan make:model Customer -m

We are creating a customer schema table for our demoapp and the -m is responsible for creating the migration table.
Open up the database/migrations/2021_10_05_100745_create_customers_table file and create the customer table schema.



<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCustomersTable extends Migration
{
    public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('phone')->unique();
            $table->string('email')->unique();
            $table->string('address');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('customers');
    }
}

Open up the app/Models/Customer.php to add the $fillable array in the Customer Model.



<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Customer extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'phone',
        'email',
        'address',
    ];  
}

Database Connection

Create a database to connect with the laravel application. I'm using MySQl database for my demoapp now got to the demoapp/.env file and the database name and connection setup



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=demoapp
DB_USERNAME=root
DB_PASSWORD=

Dummy Data With Faker

we need to create some dummy data to test the yajra-datatables. using faker and DatabaseSeeder.
need to this



php artisan make:factory CustomerFactory --model=Customer

command to create CustomerFactory go to the database/factories/CustomerFactory.php and add those code



<?php

namespace Database\Factories;

use App\Models\Customer;
use Illuminate\Database\Eloquent\Factories\Factory;

class CustomerFactory extends Factory
{
    protected $model = Customer::class;

    public function definition()
    {
        return [
            "name" => $this->faker->name(),
            "phone" => $this->faker->phoneNumber,
            "email" => $this->faker->safeEmail,
            "address" => $this->faker->address
        ];
    }
}

in the database/seeds/DatabaseSeeder.php file add this line



<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        \App\Models\Customer::factory(1000)->create();
    }
}

now run this command to seed data into the database



php artisan migrate --seed

now we got 1000 customer data in the database

Controller & Routes

Need to create a CustomerController for the functions for fetch data and display in the Yajra database.



php artisan make:controller CustomerController

In the app/Http/Controllers/CustomerController.php need to write the method for fetching the data dynamically into the yajra datatables



<?php

namespace App\Http\Controllers;

use DB;
use DataTables;
use App\Models\Customer;
use Illuminate\Http\Request;


class CustomerController extends Controller
{
    public function customer(Request $request)
    {
        if ($request->ajax()) {
            $data = DB::table('customers')->latest()->get();
            return Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actions = 
                    '<a href="#" class="btn btn-sm btn-primary">Edit</a>
                    <a href="#" class="btn btn-sm btn-danger">Delete</a>';
                    return $actions;
                })
                ->rawColumns(['action'])
                ->make(true);
        }
    }
}

Now let's create a route for handling the request responses



<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CustomerController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/customer', [CustomerController::class, 'customer']);

Setup Blade Files

Go to resources/views/welcome.blade.php file and set the blade file to show datatable.



<!DOCTYPE html>
<html>
<head>
    <title>Laravel Yajra Datatable</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"">
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>

<body>

<div class="container">
    <div class="row" style="margin: 1rem;">
        <h2 class="text-center ">Laravel Yajra Datatable</h2>
        <div class="card" style="padding-top:40px; border-radius: 5px;">
            <table class="table table-striped yajra-datatable" style="padding-top:10px;">
                <thead class="">
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script type="text/javascript">
  $(function () {
    var table = $('.yajra-datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('customer') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'phone', name: 'phone'},
            {data: 'address', name: 'address'},
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ]
    });
  });
</script>
</html>

Here's all the data loaded in server-side

Conclusion

Yajra DataTables server-side processing system is much easier to use and render huge datas within a few minutes. Highly recommended to use yajra datatables.

DEV Community: Arman Hasan

Install free TLS/SSL certificate on Ubuntu 20.04

Introduction

Prerequisites

Server Login

Installing Certbot

Auto-Renewal Certbot

Laravel 8 Passport OAuth 2.0

Table Of Contents

Reasons To Use Passport & OAuth2.0

Overview

OAuth Workflow

Installation

Setup Client

Conclusion

Laravel Accessors And Mutators

Table Of Contents

Setup Project & Model

Accessors

Mutators

Database Seeder

Route & Controller

Overview

Server-Side Rendering of DataTables in Laravel

Table Of Contents

Prerequisite

Installation & Configuration

Database Connection

Dummy Data With Faker

Controller & Routes

Setup Blade Files

Conclusion