Laravel Settings: Kelola Pengaturan Aplikasi Laravel Dengan Mudah

RUANGDEVELOPER.com - Halo Talenta Digital, gimana kabarnya hari ini? Pasti masih semangat ya? Pada kesempatan ini kita akan membahas tentang pengelolaan pengaturan aplikasi laravel menggunakan sebuah package bernama Laravel Settings.

Apa itu Laravel Settings?

Beberapa waktu yang lalu saya membuat sebuah laravel package bernama Laravel Settings. Package ini berfungsi untuk mengelola pengaturan aplikasi laravel dengan mudah dan cepat. Package ini menggunakan database untuk menyimpan pengaturan dan menyediakan fitur cache yang dapat diaktifkan agar pengambilan data pengaturan dapat dilakukan lebih cepat tanpa membebani database. Untuk lebih lengkapnya kamu bisa baca dokumentasinya melalui link berikut:

GitHub Repository: https://github.com/ruangdeveloper/laravel-settings
Packagist: https://packagist.org/packages/ruangdeveloper/laravel-settings

OK, langsung saja kita mulai ya!

Menyiapkan Project Laravel

Untuk mengikuti tutorial ini, tentu kita perlu menyiapkan project Laravel terlebih dahulu. Mari kita buat project kosong lengkap dengan databasenya ya.

Buat Project

composer create-project laravel/laravel laravel-settings-tutorial

Konfigurasi Environment Variable

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

Saya menggunakan database sqlite, tentu kamu juga bisa menggunakan database lain ya.

Jalankan Migrasi

php artisan migrate

   WARN  The SQLite database does not exist: database/database.sqlite.

 ┌ Would you like to create it? ────────────────────────────────┐
 │ Yes                                                          │
 └──────────────────────────────────────────────────────────────┘

   INFO  Preparing database.

  Creating migration table ............................................................................................................... 18ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table .................................................................................................... 6ms DONE
  2014_10_12_100000_create_password_reset_tokens_table .................................................................................... 3ms DONE
  2019_08_19_000000_create_failed_jobs_table .............................................................................................. 6ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ................................................................................... 9ms DONE

Buat Halaman Untuk Percobaan

Untuk mencoba pengaturan kita juga siapkan sebuah halaman untuk mencoba pengaturan aplikasi. Mari kita buat file index.blade.php.

Ohiya biar keren sedikit, kita minta bantuan bootstrap ya :D.

Sementara kodenya akan seperti berikut ini:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Settings Tutorial</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
    <main class="py-5">
        <h1 class="text-center mb-5">Laravel Settings Tutorial</h1>
        <div class="container">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            Pengaturan Web
                        </div>
                        <div class="card-body">
                            <form action="" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="site_name" class="form-label">GitHub Profile URL</label>
                                    <input type="text" name="site_name" id="site_name" class="form-control">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header">Hasil Pengaturan Aplikasi</div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <tr>
                                    <th>GitHub Profile URL</th>
                                    <td>Hasilnya nanti di sini</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
</body>

</html>

Dan hasilnya akan seperti berikut

OK, cukup! Sementara biarkan seperti itu dan kita akan pindah dulu ke bagian Laravel Settings

Install dan Konfigurasi Laravel Settings

Install Laravel Settings

composer require ruangdeveloper/laravel-settings

Publish Config

php artisan vendor:publish --provider="RuangDeveloper\LaravelSettings\LaravelSettingsServiceProvider" --tag="config"

Sekarang kita akan punya file config bernama laravel-settings.php dalam folder config. Berikut ini isinya:

<?php

return [
    'with_cache' => false,
    'cache_prefix' => 'laravel-settings',
    'cache_lifetime' => 60 * 60 * 24 * 7, // 7 days
    'model' => \RuangDeveloper\LaravelSettings\Models\Setting::class,
    'key_name' => 'key',
    'value_name' => 'value',
    'morph_name' => 'model',
    'morph_type' => 'model_type',
    'morph_id' => 'model_id',
    'morph_owner_key' => 'id',
    'defaults' => [],
    'model_defaults' => [
        // App\Models\User::class => [
        //     'your_setting_key' => 'your_setting_value',
        // ],
    ],
];

Note: saya menghapus komentar agar kodenya tidak terlalu panjang, kamu bisa melihat detailnya langsung pada file konfigurasi

Publish & Run Migration File

php artisan vendor:publish --provider="RuangDeveloper\LaravelSettings\LaravelSettingsServiceProvider" --tag="migrations"

php artisan migrate

Menggunakan Laravel Settings

Untuk mengelola pengaturan, kita bisa menggunakan facade class yang sudah disediakan seperti berikut.

<?php

use Illuminate\Support\Facades\Route;
use RuangDeveloper\LaravelSettings\Facades\Settings;

Route::get('/', function () {
    // Menyimpan nilai pengaturan
    Settings::set('github_url', 'https://github.com/ruangdeveloper');

    // Mengambil nilai pengaturan
    $githubUrl = Settings::get('github_url');

    return view('index', [
        'githubUrl' => $githubUrl,
    ]);
});

OK, mari kita tampilkan di halamann, edit file index.blade.php

... kode lainnya

<table class="table table-bordered">
  <tr>
    <th>GitHub Profile URL</th>
    <td>{{ $githubUrl }}</td>
  </tr>
</table>

... kode lainnya

Hasilnya seperti ini:

Set Pengaturan Melalui Form

Biasanya, pengaturan aplikasi dapat diubah-ubah sesuai kebutuhan melalui suatu halaman. Sebelumnya kita sudah menyiapkan sebuah form untuk mengatur github url. Mari kita buat itu menjadi berfungsi!

Buat route baru untuk handle form

Route::post('/update', function () {
    // Menyimpan nilai pengaturan
    Settings::set('github_url', request('github_url'));

    return redirect('/');
})->name('update');

Jangan lupa hapus bagian set setting di route sebelumnya

Route::get('/', function () {
    // Menyimpan nilai pengaturan
    // Settings::set('github_url', 'https://github.com/ruangdeveloper'); Hapus atau komentari bagian ini

    // Mengambil nilai pengaturan
    $githubUrl = Settings::get('github_url');

    return view('index', [
        'githubUrl' => $githubUrl,
    ]);
});

Update form

<form action="{{route('update')}}" method="POST">
  @csrf
  <div class="mb-3">
    <label for="github_url" class="form-label">GitHub Profile URL</label>
    <input type="text" name="github_url" id="github_url" class="form-control">
  </div>
  <div class="text-end">
    <button type="submit" class="btn btn-primary">Simpan</button>
  </div>
</form>

Hasilnya bisa kamu lihat di sini

Pengaturan Berbeda Tiap Model

Terkadang pengaturan aplikasi tidak hanya diterapkan secara global (secara keseluruhan aplikasi) tetapi kita juga perlu memberi kebebasan pengguna untuk menyesuaikan pengaturannya masing-masing, biasanya disebut preferensi pengguna.

Dengan Laravel Settings, kita dapat menyimpan pengaturan khusus untuk tiap-tiap model. Mari kita buat skenario seperti berikut ini:

Aplikasi kita memiliki fitur notifikasi untuk beberapa info dan membolehkan pengguna untuk mengatur sendiri mereka ingin menerima notifikasi apa saja.

Konfigurasi Model

Agar kita dapat menyimpan pengaturan untuk model (dalam hal ini adalah User model), kita perlu modifikasi User model untuk menggunakan trait HasSettings. Contohnya seperrti berikut:


use RuangDeveloper\LaravelSettings\Traits\HasSettings;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable, HasSettings; // Tambahkan trait HasSetting

    // kode lainnya
}

Menyimpan dan mengambil nilai pengaturan

Untuk menyimpan pengaturan, kita bisa memanggil method setSetting() dari objek user seperti berikut:

$user = User::find(1);

$user->setSetting('subscribed_notifications', []);

Dan untuk mengambil pengaturan, kita bisa memanggil method getSetting() dari objek user seperti berikut:

$user = User::find(1);

$subscribedNotifications = $user->getSetting('subscribed_notifications');

Penerapan

Untuk menerapkannya ke project kita, mari kita update routes kita seperti berikut:

Route::get('/', function () {
    // Mengambil nilai pengaturan
    $githubUrl = Settings::get('github_url');

    $users = User::all();

    return view('index', [
        'githubUrl' => $githubUrl,
        'users' => $users,
    ]);
});

Route::post('/update', function () {
    // Menyimpan nilai pengaturan
    Settings::set('github_url', request('github_url'));

    return redirect('/');
})->name('update');

Route::post('/update-model', function () {
    $userId = request('user_id');
    $subscribedNotifications = request('subscribed_notifications', []);

    $user = User::findOrFail($userId);

    $user->setSetting('subscribed_notifications', $subscribedNotifications);

    return redirect('/');
})->name('update-model');

Kemudian update juga file index.blade.php menjadi seperti berikut:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Settings Tutorial</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
    <main class="py-5">
        <h1 class="text-center mb-5">Laravel Settings Tutorial</h1>
        <div class="container">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card mb-3">
                        <div class="card-header">
                            Pengaturan Web
                        </div>
                        <div class="card-body">
                            <form action="{{ route('update') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="github_url" class="form-label">GitHub Profile URL</label>
                                    <input type="text" name="github_url" id="github_url" class="form-control">
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">
                            Pengaturan Notifikasi User
                        </div>
                        <div class="card-body">
                            <form action="{{ route('update-model') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="user_id" class="form-label">Pilih User</label>
                                    <select name="user_id" id="user_id" class="form-select">
                                        <option value="">Pilih User</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="site_title" class="form-label">Notifikasi</label>
                                    <div class="form-check">
                                        <input name="subscribed_notifications[]" class="form-check-input"
                                            type="checkbox" value="newsletter" id="newsletter">
                                        <label class="form-check-label" for="newsletter">
                                            Newsletter Terbaru
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input name="subscribed_notifications[]" class="form-check-input"
                                            type="checkbox" value="promotion" id="promotion">
                                        <label class="form-check-label" for="promotion">
                                            Penawaran Promo
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input name="subscribed_notifications[]" class="form-check-input"
                                            type="checkbox" value="security" id="security">
                                        <label class="form-check-label" for="security">
                                            Keamanan Akun
                                        </label>
                                    </div>

                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">Simpan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card mb-3">
                        <div class="card-header">Hasil Pengaturan Aplikasi</div>
                        <div class="card-body">
                            <table class="table table-bordered">
                                <tr>
                                    <th>GitHub Profile URL</th>
                                    <td>{{ $githubUrl }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="card mb-3">
                        <div class="card-header">Hasil Pengaturan Notifikasi User</div>
                        <div class="card-body">
                            @foreach ($users as $user)
                                <table class="table table-bordered mb-2">
                                    <tr>
                                        <th>Nama User</th>
                                        <td>{{ $user->name }}</td>
                                    </tr>
                                    <tr>
                                        <th>Notifikasi yang Dipilih</th>
                                        <td>
                                            @foreach ($user->getSetting('subscribed_notifications', []) as $notification)
                                                <span class="badge bg-primary">{{ $notification }}</span>
                                            @endforeach
                                        </td>
                                    </tr>
                                </table>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
</body>

</html>

Hasilnya bisa kamu lihat di sini

Terkahir Tapi Tak Kalah Penting: Cache

Secara default Laravel Settings melakukan query ke database untuk mendapatkan nilai pengaturan yang disimpan, hal ini tidak masalah jika aplikasi kita masih kecil, namun akan menjadi sangat membebani jika aplikasi kita sudah mulai besar dan banyak diakses pengguna serta memiliki pengaturan yang banyak. Oleh karena itu, Laravel Settings sudah menyediakan fitur cache untuk menyimpan nilai pengaturan ke dalam cache.

Untuk mengaktifkan cache, kita hanya perlu mengupdate pengaturan cache di dalam file laravel-settings.php.

<?php

return [
    'with_cache' => true, // atur atribut ini menjadi berniali true

    // pengaturan lainnya
];

Dengan begitu, sekarang Laravel Setting hanya akan melakukan query ke database pada akses pertama kali dan seterusnya akan mengambil nilai database melalui penyimpanan cache. Ketika nilai pengaturan diupdate, maka secara otomatis cache akan terhapus dan diganti dengan nilai yang baru

Kamu dapat membandingkannya menggunakan tools Laravel Clockwork.

Tanpa Cache

Dengan Cache

Terakhir

Apa yang telah dijelasakn pada postingan ini adalah penggunaan sederahana Laravel Settings. Untuk melihat dokumentasi yang lebih lengkap, kamu bisa langsung mengunjungi link repositori dan packagist untuk package ini melalui link berikut:

GitHub Repository: https://github.com/ruangdeveloper/laravel-settings
Packagist: https://packagist.org/packages/ruangdeveloper/laravel-settings

Kamu juga bisa berkontribusi untuk mengembangkan package ini jika kamu merasa package ini bermanfaat.

Terima kasih!