Menampilkan Data API ke Frontend di Framework PHP Laravel dengan Webserver Apache GNU/Linux

Assalamualaikum Wr.Wb...

dengan diberikan nikmat dan rezeki dari Allah SWT, saya Mr.Gagaltotal666 akan

berbagi kepada anda yaitu tentang cara Menampilkan Data API ke Frontend

di Framework PHP Laravel dengan Webserver Apache GNU/Linux.

untuk menampilkan data json kita membutuhkan library http client

atau bisa di sebut ghuzzle http client, bawaan php tersendiri sudah ada

dan framework laravel pun sudah menyediakan jika si laravel ini

pengen dijadikan sebagai frontend misalnya...

oke langsung saja ke code nya, back to area text editor atau tools anda

pertama install ghuzzle/http client menggunakan composer jika belum ada,

tetapi biasa nya laravel sudah menyediakan package ghuzzle/http client

di versi 8 hingga versi terbaru 12.

Gambaran Arsitektur Alur data yang akan kita buat:

API Publik → Laravel (HTTP Client) → Controller → Blade View → Pagination

Laravel mengambil data dari API eksternal,

lalu menampilkannya di frontend dengan pagination.

Persiapan Environment (Apache + Linux)

Pastikan sudah terpasang:

- PHP ≥ 8.1

- Apache

- Composer

- Laravel

Cek Apache aktif:

$ sudo systemctl status apache2

Membuat Project Laravel

composer create-project laravel/laravel laravel-api-frontend

cd laravel-api-frontend

Set permission (Linux):

$ sudo chown -R www-data:www-data storage bootstrap/cache

Konfigurasi Apache (Virtual Host), Contoh:

<VirtualHost *:80>

    ServerName laravel-api.test

    DocumentRoot /var/www/html/laravel-api-frontend/public

    <Directory /var/www/html/laravel-api-frontend/public>

        AllowOverride All

        Require all granted

    </Directory>

</VirtualHost>

Aktifkan:

$ sudo a2enmod rewrite

$ sudo systemctl restart apache2

contoh ini API yang sudah ada pagination

kita akan buat DataTables Server-Side Mengikuti API

Contoh API

https://reqres.in/api/users?page=1

respon json :

{

  "page": 1,

  "per_page": 6,

  "total": 12,

  "total_pages": 2,

  "data": [

    {

      "id": 1,

      "email": "george.bluth@reqres.in",

      "first_name": "George",

      "last_name": "Bluth",

      "avatar": "https://reqres.in/img/faces/1-image.jpg"

    },

    {

      "id": 2,

      "email": "janet.weaver@reqres.in",

      "first_name": "Janet",

      "last_name": "Weaver",

      "avatar": "https://reqres.in/img/faces/2-image.jpg"

    },

    {

      "id": 3,

      "email": "emma.wong@reqres.in",

      "first_name": "Emma",

      "last_name": "Wong",

      "avatar": "https://reqres.in/img/faces/3-image.jpg"

    },

    {

      "id": 4,

      "email": "eve.holt@reqres.in",

      "first_name": "Eve",

      "last_name": "Holt",

      "avatar": "https://reqres.in/img/faces/4-image.jpg"

    },

    {

      "id": 5,

      "email": "charles.morris@reqres.in",

      "first_name": "Charles",

      "last_name": "Morris",

      "avatar": "https://reqres.in/img/faces/5-image.jpg"

    },

    {

      "id": 6,

      "email": "tracey.ramos@reqres.in",

      "first_name": "Tracey",

      "last_name": "Ramos",

      "avatar": "https://reqres.in/img/faces/6-image.jpg"

    }

  ],

  "support": {

    "url": "https://contentcaddy.io?utm_source=reqres&utm_medium=json&utm_campaign=referral",

    "text": "Tired of writing endless social media content? Let Content Caddy generate it for you."

  },

  "_meta": {

    "powered_by": "ReqRes",

    "docs_url": "https://app.reqres.in/documentation",

    "upgrade_url": "https://app.reqres.in/upgrade",

    "example_url": "https://app.reqres.in/examples/notes-app",

    "variant": "v1_a",

    "message": "Classic ReqRes still works. Projects add persistence, auth, and logs.",

    "cta": {

      "label": "See example app",

      "url": "https://app.reqres.in/examples/notes-app"

    },

    "context": "legacy_success"

  }

}

buat Controller

php artisan make:controller UserDatatableApiController

isi file di app/Http/Controllers/UserDatatableApiController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Http;

class UserDatatableApiController extends Controller

{

    public function index()

    {

        return view('datatable.users');

    }

    public function data(Request $request)

    {

        $page = ($request->start / $request->length) + 1;

        $response = Http::get('https://reqres.in/api/users', [

            'page' => $page

        ]);

        $result = $response->json();

        return response()->json([

            'draw' => intval($request->draw),

            'recordsTotal' => $result['total'],

            'recordsFiltered' => $result['total'],

            'data' => $result['data']

        ]);

    }

}

di bagian Routing/Route di folder /web

use App\Http\Controllers\UserDatatableApiController;

Route::get('/datatable/users', [UserDatatableApiController::class, 'index']);

Route::get('/datatable/users/data', [UserDatatableApiController::class, 'data']);

untuk di Blade View folder resources/views/datatable/users.blade.php

<!DOCTYPE html>

<html>

<head>

    <title>DataTables ServerSide API</title>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

</head>

<body>

<div class="container mt-5">

    <table id="usersTable" class="display" style="width:100%">

        <thead>

        <tr>

            <th>ID</th>

            <th>Nama</th>

            <th>Email</th>

        </tr>

        </thead>

    </table>

</div>

<script>

$(function () {

    $('#usersTable').DataTable({

        processing: true,

        serverSide: true,

        ajax: '/datatable/users/data',

        columns: [

            { data: 'id' },

            {

                data: null,

                render: function (data) {

                    return data.first_name + ' ' + data.last_name;

                }

            },

            { data: 'email' }

        ]

    });

});

</script>

</body>

</html>

Hasil Akhir, Akses buka di browser:

http://laravel-api.test/datatable/users

Yang ditampilkan:

- Data API tampil di tabel

- Pagination otomatis dari api

- 10 data per halaman

- Style Bootstrap

oke mungkin itu saja sekian dan semoga bermanfaat...

Wasalamualaikum Wr.Wb...