CoretanKode – Membuat CMS Blogging (Part 4) – CRUD Gambar dan File Laravel 8, Setelah selesai membuat CRUD sederhana dipart 2 selanjutnya kita melangkah di part 3 yakni membuat tombol upload file dan gambar menggunakan LiveWire di laravel 8.

Manajemen gambar dan juga file konten sangatlah penting untuk sebuah CMS Blog, Apalagi bila menggunakan CMS Custom pastinya. Cara termudah untuk mengatur file upload di laravel 8 yakni tetap menggunakan File System (Storage) laravel itu sendiri.

SERI MEMBUAT CMS SENDIRI DENGAN LARAVEL 8:

Dengan bantuan LiveWire kita bisa membuat tombol upload file dan gambar yang mempunyai autentikasi yang diperiksa secara live. Nah lalu gimana cara mudah membuat tombol serta mengatur fungsi store gambarnya ?

Membuat File Uploads di Laravel 8

Pada postingan ini admin hanya akan memperbaharui Livewire yang dipart 2 telah admin jelaskan. Nah jadi untuk kalian yang suka mengulik secara penuh, mulai dari library serta setting penyimpanan bisa banget membuka Dokumentasi File Upload LiveWire dihalaman resmi-nya.

Nah tanpa basa-basi lagi kita langsung mulai saja menambahkan tombol upload file pada projek kita sebelumnya.

Menambahkan Kolom Thumbnail

Pada part 2 kalian telah berhasil membuat Migration tabel konten tetapi belum mempunyai kolom untuk menyimpan nama atau url dari thumbnail konten kalian kan ? nah oleh karena itu kalian harus menambahkan Kolom photo dengan tipe data longText().

Selanjutnya tambahkan kolom thumbnail juga pada model tabel konten kalian yah, seharusnya bila kalian sudah mengikuti part 2 kalian akan lancar menambahkan kolom dan juga komponen dalam model kalian.

Setelah penambahan selesai silahkan kalian php artisan migrate ulang yah.

Linking Storage ke Folder Public

Sebelum melakukan pembuatan proses file upload dan view-nya ada baiknya bila kalian menyiapkan symlink pada projek laravel kalian terlebih dahulu. Caranya sangatlah mudah dimana kalian hanya perlu mengeksekusi perintah php artisan storage:link.

Setelah itu silahkan kalian cek folder assets kalian apakah link menuju ke folder storage telah terbuat atau belum. Bila kalian mengcopy projekan luar yang menggunakan storage, tetap diwajibkan melakukan linking ulang pada projek copy-an yah agar fungsionalitas File Uploads berhasil setelah dikalian copy.

Menambahkan Header File Upload

LiveWire yang mengguunakan logika file upload diwajibkan menggunakan header File Upload, dimana sebagai pengenal bahwa livewire yang kalian buat ingin menggunakan fungsionalitas file upload.

Cara menggunakannya sangatlah mudah juga, kalian hanya perlu menambahkan kode use Livewire\WithFileUploads;sebelum class livewire kalian di deklarasikan.

Selanjutnya kalian harus menegaskan bahwa class livewire kalian akan menggunakan File Uploads dengan cara menambahkan kode use WithFileUploads;

Jangan lupa menambahkan satu lagi variable publik pada contoh dibawah admin menggunakan variable $photo.

Alhasil kode-nya akan menjadi seperti ini :

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Konten; use Livewire\WithFileUploads;
class Kontens extends Component
{use WithFileUploads;
public $kontens, $photo, $judul, $shortdescription, $isikonten, $kategori, $konten_id;
public $isModal = 0;
//Function Halaman Awal
public function render()
{
$this->kontens = konten::orderBy('created_at', 'DESC')->get();
return view('livewire.kontens');
}
//Function Tombol Create
public function create()
{
$this->resetFields();
$this->openModal();
}
//Function Tutup Modal
public function closeModal()
{
$this->isModal = false;
}
//Function Buka Modoal
public function openModal()
{
$this->isModal = true;
}
//Function Reset Kolom Inputan
public function resetFields()
{
$this->judul = '';
$this->shortdescription = '';
$this->isikonten = '';
$this->kategori = '';
$this->konten_id = '';
}
//Function Store ke Database
public function store()
{
$this->validate([
'judul' => 'required|string',
'shortdescription' => 'required',
'kategori' => 'required',
'isikonten' => 'required'
]);
Konten::updateOrCreate(['id' => $this->konten_id], [
'judul' => $this->judul,
'shortdescription' => $this->shortdescription,
'isikonten' => $this->isikonten,
'kategori' => $this->kategori,
]);
session()->flash('message', $this->konten_id ? $this->judul . ' Diperbaharui': $this->judul . ' Ditambahkan');
$this->closeModal();
$this->resetFields();
}
public function edit($id)
{
$konten = Konten::find($id);
$this->konten_id = $id;
$this->judul = $konten->judul;
$this->isikonten = $konten->isikonten;
$this->shortdescription = $konten->shortdescription;
$this->kategori = $konten->kategori;
$this->openModal();
}
public function delete($id)
{
$konten = Konten::find($id);
$konten->delete();
session()->flash('message', $konten->judul . ' Dihapus');
}
}

Nah sampai sini kita sudah berhasil menyiapkan Objek dan Fungsi yang akan kita gunakan untuk memproses aktivitas File Uploads pada projek kita.

Menambahkan Proses Manajemen File Uploads

Setelah berhasil menyiapkan library dan variable publik untuk upload gambar laravel 8 selanjutnya untuk melengkapi upload file laravel 8 kalian kita akan menambahkan proses.

Dan menaruh beberapa line kode pada livewire kita sebelumnya. Kodingan yang akan kita tambahkan dibawah ini adalah sintak kode yang bertugas untuk menyimpan gambar, link gambar dan menghapus gambar.

Dengan cara menambahkan variabel $photo pada proses Edit, Store dan resetFields() pada LiveWire yang telah dibuat. Pada Function Reset kalian cukup menambahkan kode $this->photo = '';.

Selanjutnya tambahkan kode berikut 'photo'=>'image|max:1024', di validasi function store() pada livewire kalian, Untuk masalah validasi kalian bisa kustomisasi sendiri semisal mengatur apa format file yang di ijinkan semisal PNG dan JPEG saja.

Contoh lengkap validasi yang admin biasa gunakan sih seperti ini 'imageslider' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',nah jadi jelas format ekstensi  serta tipe file-nya itu gambar.

Setelah itu masih diproses function store() kita tambahkan satu variabel yang akan menampung url dari storage, hal ini sebenarnya opsional tetapi admin suka aja menggunakan variabel penampung.

Variabelnya seperti ini $storedImage = $this->photo->store('public');nah sehingga pada proses penyimpanan terdapat perintah pengisian kolom dengan sintak 'photo' => $storedImage,nah jadi sudah mulai kompleks yah.

Pada function delete juga kalian tambahkan perintah penghapusan file yah. Cukup menambahkan perintah seperti ini dan akhirnya setiap kali konten dihapus maka file yang berkaitan akan ikut terhapus juga $this->photo = $konten->photo; Storage::delete($this->photo);nah selesai deh

Lengkapnya LiveWire kita akan menjadi seperti dibawah ini :

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Konten; use Livewire\WithFileUploads;
class Kontens extends Component
{use WithFileUploads;
public $kontens, $photo, $judul, $shortdescription, $isikonten, $kategori, $konten_id;
public $isModal = 0;
//Function Halaman Awal
public function render()
{
$this->kontens = konten::orderBy('created_at', 'DESC')->get();
return view('livewire.kontens');
}
//Function Tombol Create
public function create()
{
$this->resetFields();
$this->openModal();
}
//Function Tutup Modal
public function closeModal()
{
$this->isModal = false;
}
//Function Buka Modoal
public function openModal()
{
$this->isModal = true;
}
//Function Reset Kolom Inputan
public function resetFields()
{
$this->judul = '';
$this->shortdescription = '';
$this->isikonten = '';
$this->kategori = '';$this->photo = '';
$this->konten_id = '';
}
//Function Store ke Database
public function store()
{
$this->validate([
'judul' => 'required|string',
'shortdescription' => 'required',
'kategori' => 'required','photo' => 'required|image',
'isikonten' => 'required'
]);$storedImage = $this->photo->store('public');
Konten::updateOrCreate(['id' => $this->konten_id], [
'judul' => $this->judul,
'shortdescription' => $this->shortdescription,
'isikonten' => $this->isikonten,'photo' => $storedImage,
'kategori' => $this->kategori,
]);
session()->flash('message', $this->konten_id ? $this->judul . ' Diperbaharui': $this->judul . ' Ditambahkan');
$this->closeModal();
$this->resetFields();
}
public function edit($id)
{
$konten = Konten::find($id);
$this->konten_id = $id;
$this->judul = $konten->judul;
$this->isikonten = $konten->isikonten;
$this->shortdescription = $konten->shortdescription;
$this->kategori = $konten->kategori;$this->photo = $konten->photo;
$this->openModal();
}
public function delete($id)
{
$konten = Konten::find($id);$this->photo = $konten->photo; Storage::delete($this->photo);
$konten->delete();
session()->flash('message', $konten->judul . ' Dihapus');
}
}

Nah selesai deh untuk sisi back-end, nah selanjutnya gambar kalian akan tersimpan pada folder storage public kalian yah.

Menambahkan Tombol Upload Laravel 8 LiveWire

Upload file dengan livewire itu cukup mudah loh, apalagi bagian front-end nya yang hanya menambahkan inputan dengan type file input lalu mengkoneksikan-nya dengan wire:modelyang terdapat pada livewire yang digunakan maka sudah selesai deh.

Caranya silahkan anda buka kembali file create.blade.php yang telah kalian buat seperti part 2 artikel ini, tambahkanlah sintak <input type="file" wire:model="photo">untuk menambahkan tombol file upload.

Pada tombol file upload tersebut kita melakukan wiring dengan model photo dimana photo ini sendiri merupakan variabel publik yang telah kita deklarasikan sebelumnya.

Nah terakhir adalah pengecekan silahkan kalian save semua file kalian dan coba jalankan php artisan serve pada projek kalian. Bila gagal silahkan chat admin yah, Pasti dibantuin.

Nah jadi itulah cara membuat upload gambar laravel 8 dengan menggunakan LiveWire. Terima kasih telah berkunjung dan Assalamualaikum Warahmatullahi Wabarakatu.