Arsip Tag: Laravel

Cara Disable Auto Inject Script dan Style Livewire

Secara bawaan Script dan Style Livewire disisipkan otomatis kedalam Layout *.blade.php bila ingin menyisipkannya secara manual bisa ikuti langkah berikut: Cara Disable Auto Inject Script dan Style Livewire

config/livewire.php
<?php

return [
    ...
    
    'inject_assets' => false, // default true
    
    ...
];

inject_assets di set ke true

Tidak ada yang perlu dilakukan karena kedua aset tersebut disisipkan pada tag head dan body.

resources/views/livewire/component/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

inject_assets di set ke false

Saat di set ke false kita dapat memasukan @livewireStyles dan @livewireScripts kedalam layout sesuai keingin dimana aset tersebut akan di proses namun biasanya @livewireStyles diletakan diantara tag <head></head> sedangkan @livewireScripts diletakan diantara tag <body></body>.

Sehingga terlihat seperti ini.

resources/views/livewire/component/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{{ $title ?? 'Page Title' }}</title>
        
        @livewireStyles 
    </head>
    <body>
        {{ $slot }}
        
        @livewireScripts 
    </body>
</html>

Setelah diuraikan oleh Web Browser kurang lebih seperti ini pratinjau html-nya.

HTML
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>Page Title</title>
        
        <!-- Livewire Styles -->
        <style>
        [wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}
        </style>
    </head>
    <body>
        <div id="slot"></div>
        
        <script src="/livewire/livewire.min.js?id=xxxxxx" data-csrf="xxxxxx" data-update-uri="/livewire/update" data-navigate-once="true" type="text/javascript"></script>
    </body>
</html>

Cara Upload File Livewire Laravel

cara upload file livewire laravel

Untuk melakukan upload file di Livewire Laravel sebenarnya cukup mudah, dengan hanya menambahkan module Livewire\WithFileUploads.

Ketika module tersebut ditambahkan, cukup menyeret file ke dalam input form file, maka secara otomatis berkas tersebut tersimpan dalam folder livewire-tmp.

Folder livewire-tmp dapat kita atur melalui konfigurasi livewire.

config/liwewire.php
<?php

return [
    ...
    
    'temporary_file_upload' => [
        'disk' => null, // Example: 'local', 's3'
        'directory' => null, // Example: 'tmp'
    ],
    
    ...
];

Lokasi 📁 tmp mengikuti jenis disk. Jika disk di set ke 🗄️ ‘local‘ maka lokasinya berada di 📁 ‘storage/app/liwewire-tmp‘ jika di set ke 🗄️ ‘public‘ maka 📁 ‘storage/app/public/livewire-tmp‘ atau 📁 ‘public/livewire-tmp‘.

Mengatur folder tmp ini berguna jika ingin melakukan pratinjau file yang di upload. Dengan menggunakan fungsi ⏳ temporaryUrl() pada html;

Baik kita mulai.

Pertama

Buat Class Component livewire baru. Disini saya membuat class component bernama upload dalam folder Demo.

php artisan make:livewire demo.upload

Dengan perintah di atas, dibuatkan 2 file baru berupa class component dan view.

Kedua

Modifikasi komponen yang tadi dibuat. Tambahkan dukungan upload file.

app/Livewire/Demo/Upload.php
<?php

namespace App\Livewire\Demo;

use Livewire\Component;
use Livewire\WithFileUploads; // 1

class Upload extends Component
{
    use WithFileUploads; // 1.2

    public $file; // 3 model file mixed

    public function render()
    {
        return view('livewire.demo.upload');
    }
}

Ketiga

Buat rute upload.

routes/web.php
<?php

use Illuminate\Support\Facades\Route;

Route::get('demo/upload', \App\Livewire\Demo\Upload::class)->name('demo.upload');

Keempat

Modifikasi view upload.

resources/views/livewire/demo/upload.blade.php
@slot('title')
    Demo Upload File
@endslot

<div>
    <div wire:loading wire:target="file">
        <span>Menyimpan file sementara..</span>
    </div>
    
    <form>
        @csrf
        <div>
            <input type="file" wire:model="file">
        </div>
    </form>
</div>

Disana saya menambahkan wire:loading supaya menampilkan indikator sejauh mana file diproses. Juga menambahkan wire:target agar lebih spesifikasi kapan aksi ini dieksekusi.

model="file" yang saya target. Sehigga ketika model tersebut terisi / menerima request. Otomatis indikator ini dijalankan.

Ya, dengan langkah pertama, kedua dan ketiga. Kita sudah berhasil dan dapat melakukan upload file di livewire.

Tetapi, bila ingin sesuatu yang lain ikuti langkah di bawah.

Kelima

Buat fungsi baru pada class component langkah kedua, penamaanya bisa disesuaikan dengan selera.

app/Livewire/Demo/Upload.php
<?php

namespace App\Livewire\Demo;

use Livewire\Component;
use Livewire\WithFileUploads;

class Upload extends Component
{
    use WithFileUploads;

    public $file;
    
    /** fungsi upload.store */
    public function UploadStore()
    {
        $berkas = $this->file;

        /** Untuk mendapatkan nama file orsinil beserta ekstensinya */
        $name = $berkas->getClientOriginalName();

        /** Untuk mendapatkan nama file tanpa ekstensi */
        $filename = pathinfo($name)['filename'];

        /** Untuk mendapatkan extensi file */
        $ext = $berkas->getClientOriginalExtension();

        /** Untuk mendapatkan jenis mime file */
        $mime = $berkas->getMimeType();

        /** Untuk mendapatkan ukuran file dalam byte */
        $size = $berkas->getSize();

        /**
         * Upload file kedalam folder uploads
         * namai file tersebut sesuai nama asli dan ekstensinya
         * disk di set ke 'public' sehingga file akan diunggah
         * kedalam folder 'public/storage/uploads'
        */
        $this->file->storeAs(path: 'uploads', name: $name);

        /**
         * Sesi atau pesan status setelah proses upload
         */
        session()->flash('upload_store', [
            'name' => $name,
            'judul' => $filename,
            'ekstensi' => $ext,
            'mime' => $mime,
            'size' => $size,
            'file' => '/storage/uploads/' . $name
        ]);

        /**
         * Mengarahkan ke halaman saat ini
         */
        return back();
    }

    public function render()
    {
        return view('livewire.demo.upload');
    }
}

Keenam

Perbarui view blade.

resources/views/livewire/demo/upload.blade.php
@slot('title')
    Demo Upload File
@endslot

<div>
    <div wire:loading wire:target="file">
        <span>Menyimpan file sementara..</span>
    </div>

    {{-- sessi setelah upload --}}
    @session('upload_store')
    <div>
        <span>Nama File: {{ session()->get('upload_store')['name'] }}</span>
        <br>
        <span>Judul: {{ session()->get('upload_store')['judul'] }}</span>
        <br>
        <span>Mime: {{ session()->get('upload_store')['mime'] }}</span>
        <br>
        <span>Ekstensi: {{ session()->get('upload_store')['ekstensi'] }}</span>
        <br>
        <span>Ukuran: {{ session()->get('upload_store')['size'] }}</span>
        <br>
        <img src="{{ session()->get('upload_store')['file'] }}">
    </div>
    @endsession

    {{-- form upload --}}
    <form wire:submit.prevent="UploadStore">
        @csrf

        <div>
            <input id="file" type="file" wire:model="file">
        </div>

        <div>
            <button type="submit">Upload</button>
        </div>
    </form>

    {{-- Indikator ketika button upload di klik --}}
    <div wire:loading wire:target="UploadStore">
        <span>Proses upload mohon tunggu...</span>
    </div>
</div>

Hasilnya

screenshot 91 sesi upload file livewire

Semoga bermanfaat 🙏

Default Template layouts.app Livewire

resources/views/component/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

Pada Laravel yang di install tanpa Starter Kits alias polosan. Jika ingin menambahkan Livewire dapat dipasang secara manual dengan perintah:

composer require livewire/livewire

Baca dokumentasi

Template di atas tidak dibuatkan secara otomatis. Harus membuatnya dengan perintah: bisa dibuat manual sesuai selera

php artisan livewire:layout

Pastikan layout livewire di set ke template yang sudah dibuat tadi.

config/livewire.php
<?php

return [
    ...
    
    'layout' => 'components.layouts.app',
    
    ...
];

Konfigurasi S3 Filesystems Laravel

Adakalanya kita ingin menyimpan berkas instalasi Laravel terpisah dengan berkas hasil unggahan baik itu berupa Gambar, Video atau format berkas lainnya.

Selain FTP laravel juga menyediakan jenis filesystems S3 (Simple Storage Service) atau lebih dikenal dengan AWS S3 atau Object Storage. Sebelum ke tahap installasi dan konfigurasi, berikut daftar Endpoint S3 di Indonesia:

  1. Neva Object : https://s3.nevaobjects.id
  2. IDCloudHost : https://is3.cloudhost.id
  3. CloudKilat : http://s3-id-jkt-1.kilatstorage.id
  4. Neo Object : https://nos.wjv-1.neo.id
  5. Ada yang lain?

Install aws-sdk-php

Tambahkan paket yang dibutuhkan untuk menghubungkan Laravel dengan S3 object storage.

composer require aws/aws-sdk-php

Modifikasi .env

AWS_ACCESS_KEY_ID = YXXXXXXXXXXN
AWS_SECRET_ACCESS_KEY = LXXXXXXXXXXXXXXXXXXXXXXXXXXXK
AWS_ENDPOINT = https://is3.cloudhost.id
AWS_DEFAULT_REGION = id
AWS_BUCKET = namabucket
AWS_URL = https://is3.cloudhost.id/namabucket
AWS_USE_PATH_STYLE_ENDPOINT = true

Apabalia lokasi endpoint (atau yang disebutkan di atas) berada di wilayah Indonesia AWS_DEFAULT_REGION setel ke id. Sesuaikan dengan dokumentasi penyedia.

Ketika AWS_USE_PATH_STYLE_ENDPOINT disetel ke true maka format url berupa : http://endpoint/namabucket/ sedangkan false http://namabucket.endpoint/.

Disable http => ['verify' => false] supaya dapat menghubungkan ke S3 dengan protokol tidak aman http://. Berguna saat pengembangan dan curl.cainfo pada php.ini tidak diatur.

config/filesystems.php
<?php

return [
    'default' => env('FILESYSTEM_DISK', 'local'),
    
    'disks' => [
        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
            'http' => [
                'verify' => false,
            ],
        ],
    ],
    
    'links' => [
        public_path('storage') => storage_path('app/public'),
    ],
];

Itulah cara konfigurasi Filesystems S3 di Laravel.

Merubah Format Waktu Laravel ke Indonesia

Untuk merubah format waktu bawaan Laravel ke format waktu Indonesia saya lebih suka menggunakan Carbon.

Install Carbon

composer require nesbot/carbon

Tetapi biasanya nesbot/carbon disertakan saat pertama kali menginstall Laravel.

Modifikasi file AppServiceProvider.php yang terletak didalam folder app/Providers. Lalu tambahkan Carbon::setLocale('id') pada function boot(). Sehingga terlihat seperti ini:

<?php

namespace App\Providers;

use Carbon\Carbon;
use Illuminate\Support\ServiceProvider;
...

class AppServiceProvider extends ServiceProvider
{
    ...
    
    public function boot(): void
    {
        Carbon::setLocale('id');
        
        /** atau
        * setlocale(LC_TIME, 'id');
        * untuk penggunaan formatLocalized();
        */
    }
}

Untuk menampilkan format waktu Indonesia pada tampilan .blade.php.

@slot('title)
  Format Waktu Lokal Indonesia
@endslot

...

<div>
  <article>
    {{-- Jumat, 28 Juni 2024 --}}
    {{ \Carbon\Carbon::parse($blog->created_at)->translatedFormat('l, j F Y') }}
    
    {{-- 11 jam yang lalu --}}
    {{ \Carbon\Carbon::parse($blog->created_at)->diffForHumans() }}
  </article>
<div>

Lihat lebih lengkap format date php.