Laravel Livewire Tailwindcss Alpinejs

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
Series Tutorial Laravel Livewire - #6 - Memanfaatkan Salah Satu Magic Laravel Yaitu Eloquent Accessor

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.

Series Artikel

Berikut ini daftar series artikel dari Tutorial Point of Sales Laravel, Livewire, Alpine.js & Tailwind Css

1
Tutorial Laravel Livewire - #1 - Project Overview

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan bahasa teknologi apa saja yang kita gunakan dan scope dari project yang akan kita bangun.
2
Tutorial Laravel Livewire - #2 - Installasi Project Laravel

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan mulai melakukan installasi project laravel kita dari awal menggunakan composer.
3
Tutorial Laravel Livewire - #3 - Installasi Laravel Breeze & Livewire

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan melakukan installasi laravel breeze dan livewire sebagai starter-kit kita.
4
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.
5
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.
6
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.
7
Tutorial Laravel Livewire - #7 - Membuat Reusable Component Dengan Laravel

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita membuat sebuah reusable component menggunakan laravel.
8
Tutorial Laravel Livewire - #8 - Membuat Module Category Dengan Livewire

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah module category dengan livewire.
9
Tutorial Laravel Livewire - #9 - Membuat Module Product Dengan Livewire

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah module product dengan livewire.
10
Tutorial Laravel Livewire - #10 - Membuat Module POS Dengan Livewire

Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah module pos dengan livewire.
11
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.

Rafi Taufiqurrahman

Once you stop learning, you start dying

Follow me on

Series Lainnya

Beberapa series rekomendasi lainnya untuk menambah pengetahuan.

1
Tutorial Laravel Inertia Roles & Permissions
Pada seri ini, kita akan sama-sama belajar mengimplementasikan sebuah roles & permisisons pada project laravel inertia. disini kita akan menggunakan sebuah package yang sangat populer yaitu laravel permissions dari laravel spatie, selain itu kita juga akan menggunakan laravel breeze sebagai authentikasi kita.
2
Tutorial Authentication Dengan Laravel Sanctum dan Unit Testing
Pada seri ini, kita akan belajar membuat sebuah restfull api untuk authentikasi menggunakan laravel sanctum dan juga disini kita akan belajar menuliskan sebuah unit testing menggunakan phpunit.

JurnalKoding

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

© 2024 JurnalKoding, Inc. All rights reserved.