Tutorial Laravel Livewire - #6 - Memanfaatkan Salah Satu Magic Laravel Yaitu Eloquent Accessor

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan mengenal salah satu magic laravel yang sangat powerfull yaitu laravel accessor.

Rafi Taufiqurrahman
Dipublish 09/07/2024

Pendahuluan

Saat ini kita akan mengenal salah satu magic yang disediakan oleh laravel, yaitu Accessor. Accesor itu sendiri digunakan untuk mengubah nilai atribut ketika data diambil dari model. Artinya, accessor memungkinkan kita untuk memodifikasi nilai atribut sebelum nilai tersebut ditampilkan, cara penulisan sebuah accessor diwajibkan menggunakan camel case. contohnya sebagai berikut :

User.php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Casts\Attribute;
use Illuminate\Database\Eloquent\Model;
 
class User extends Model
{
    /**
     * Get the user's first name.
     */
    protected function firstName(): Attribute
    {
        return Attribute::make(
            get: fn (string $value) => ucfirst($value),
        );
    }
}

Pada kode diatas kita mendefinisikan sebuah accessor dengan nama firstName, Misalkan kita memiliki attribute di database dengan nama first_name bernilai john, ketika kita mengakses attribut first_name dari model User, accessor akan mengubah value john menjadi John.

Setelah mengenal tentang accessor kita akan memanfaatkannya untuk menampilkan gambar dari tabel categories dan products.

Menambahkan Accessor Model Category

Silahkan teman - teman buka file app/Models/Category, kemudian tambahkan kode berikut ini :

Category.php
<?php

namespace App\Models;

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

class Category extends Model
{
    use HasFactory;

    /**
     * fillable
     */
    protected $fillable = ['name', 'slug', 'image'];

    /**
     * accessor image category
     */
    protected function image(): Attribute
    {
        return Attribute::make(
            get: fn ($image) => asset('/storage/categories/' . $image),
        );
    }
}

Dari perubahan kode di atas, pertama kita import Eloquent Attribute terlebih dahulu

Category.php
use Illuminate\Database\Eloquent\Casts\Attribute;

Setelah itu, kita buat sebuah accessor baru dengan nama image, yang di dalamnya kita melakukan return menggunakan asset ke dalam folder /storage/app/public/categories.

Jadi saat kita memanggil attribute image, makan akan otomatis menghasilkan output seperti berikut ini :

domain.com/storage/categories/nama_file_image.png

Tapi, jika kita tidak menggunakan accessor, maka hasilnya akan seperti berikut ini :

nama_file_image.png

Menambahkan Accessor Model Product

Pada tahap ini kita juga akan menambahkan accessor image sama seperti yang telah kita buat di model category, silahkan teman - teman buka file app/Models/Product.php, kemudian tambahkan kode berikut ini :

Product.php
<?php

namespace App\Models;

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

class Product extends Model
{
    use HasFactory;

    /**
     * fillable
     */
    protected $fillable = ['name', 'slug', 'category_id', 'image', 'quantity', 'price'];

    /**
     * accessor image product
     */
    protected function image(): Attribute
    {
        return Attribute::make(
            get: fn ($image) => asset('/storage/products/' . $image),
        );
    }

    /**
     * relation to categories table
     */
    public function category()
    {
        return $this->belongsTo(Product::class);
    }
}

Pada kode diatas, pertama - tama kita import terlebih dahulu Eloquent Attribute.

Product.php
use Illuminate\Database\Eloquent\Casts\Attribute;

Kemudian, kita membuat sebuah accessor dengan nama image, yang di dalamnya kita melakukan return menggunakan asset ke dalam folder /storage/app/public/products.

Product.php
/**
 * accessor image product
 */
protected function image(): Attribute
{
    return Attribute::make(
        get: fn ($image) => asset('/storage/products/' . $image),
    );
}

Penutup

Pada artikel kali ini kita telah berhasil menyelesaikan pembuatan accessor untuk menampilkan gambar, berikutnya kita akan lanjutkan untuk membuat beberapa reusable component yang akan kita gunakan nantinya.

Artikel Lainnya

Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.

1
Tutorial Laravel Livewire - #4 - Membuat Schema Database Dengan Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah schema database yang nantinya akan kita gunakan pada study case kali ini dan kita akan memanfaatkan model dan migration dari laravel.
2
Tutorial Laravel Livewire - #5 - Membuat Relasi Antar Table Dengan Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat relasi antar tabel menggunakan eloquent relationship yang telah disedikan oleh laravel.
3
Tutorial Laravel Livewire - #11 - Membuat Module Dashboard Dengan Livewire
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah module dashboard dengan livewire.
4
Tutorial Inertia Roles & Permissions - #13 - Membuat Module Role Dengan Inertia React
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan membuat sebuah module role dengan inertia react.
5
Tutorial Inertia Roles & Permissions - #4 - Installasi Laravel Spatie
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan melakukan installasi laravel spatie untuk menghandle roles & permissions.
6
Tutorial Inertia Roles & Permissions - #7 - Membuat Share Data Global Inertia
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan belajar membuat sebuah data yang dapat diakses di semua halaman menggunakan inertia.

JurnalKoding

Mulai asah skill dengan berbagai macam teknologi - teknologi terbaru seperti Laravel, React, Vue, Inertia, Tailwind CSS, dan masih banyak lagi.

© 2025 JurnalKoding, Inc. All rights reserved.