Multiple Image Upload dengan Preview - Belajar Laravel Part 7

Multiple Image Upload dengan Preview – Belajar Laravel Part 7, Pada kesempatan kali ini admin akan membahas tentang bagaimana cara membuat fitur galeri pada aplikasi Laravel kalian nih.

Artikel Menarik Lainnya :

Nah jadi kalian dapat melanjutkan projekan kalian yang sudah ada atau dapat membuat sebuah projek baru untuk Latihan membuat fitur multiple file upload.

Nah jadi secara singkat Multiple Image Upload adalah sebuah fitur yang mengijinkan user dapat melakukan upload beberapa image/gambar secara bersamaan.

Tutorial ini selain dapat membantu kalian membuat sebuah fitur galeri, kalian juga sebenarnya dapat membuat fitur folder file loh.

Jadi sebenarnya fitur yang satu ini memang sangat bersifat Multi-Purpose uses yah ! Nah lalu bagaimana cara membuatnya ? Silahkan simak terus artikel ini yah sampai akhir.

Cara Membuat Multiple Image Upload dengan Preview

Nah sekarang admin akan langsung saja membahas bagaimana cara pembuatan dari fitur Multiple Image Upload menggunakan Laravel 8+Livewire. Silahkan simak Langkah-langkahnya berikut ini:

Silahkan buat sebuah projekan Laravel baru dengan memasukkan sintak seperti berikut ini:
```
composer create-project Laravel/laravel=8.* NamaProject
```
Setelah itu silahkan kalian buka folder project kalian pada Code Editor yang kalian gunakan, Pada tutorial kali ini admin menggunakan Microsoft Visual Studio Code jadi cukup memasukkan perintah: code . pada terminal yang dibuka di dalam folder projekan yang telah dibuat
Setelah selesai membuat projek silahkan atur file .env kalian dan gunakan database yang sesuai dengan database yang ingin kalian gunakan, contohnya sebagai berikut ini:
```
DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=teknoclarity

DB_USERNAME=root

DB_PASSWORD=
```
Setelah berhasil menghubungkan database, selanjutnya silahkan buat sebuah migration dan model yang akan digunakan dengan sintaks seperti berikut:
```
php artisan make:model Image -m
```

Pada file migration Image kalian silahkan buat sebuah kolom image dan title yah sehingga sintaknya terlihat seperti berikut ini:

<?php

use Illuminate\Database\Migrations\Migration; 

use Illuminate\Database\Schema\Blueprint; 

use Illuminate\Support\Facades\Schema; 

class CreateImagesTable extends Migration {

public function up() { 

Schema::create('images', function (Blueprint $table) { 

$table->id(); 

$table->string(title); 

$table->string('image');

$table->timestamps(); 

}); } 

public function down() { Schema::dropIfExists('images'); } }

Nah setelah berhasil membuat file migration maka selanjutnya kita akan melakukan sedikit penambahan pada model Image yang juga telah kita buat sebelumnya. Tambahkan variable $fillable sehingga kodingan model akan terlihat seperti berikut ini:
```
<?php 

namespace App; 

use Illuminate\Database\Eloquent\Model; 

class Image extends Model { 

protected $fillable = [‘title’,'image'];

}
```
Setelah itu silahkan jalankan perintah php artisan migrate dan sebuah table image akan dibuat pada database yang kalian gunakan dimana table tersebut berisikan dua kolom table yakni title dan image
Berikutnya kita akan membuat komponen livewirenya, pertama kita instal livewire terlebih dahulu yah dengan memasukkan perintah composer require livewire/livewire pada terminal projek kalian
Setelah itu silahkan buat komponen livewirenya dengan sintak seperti berikut ini: php artisan make:livewire Gallery dan akan terbuat dua file yakni file backend livewire (Gallery.php) dan view pada folder public/livewire (gallery.blade.php) nih.

Pada file livewire php silahkan kalian gunakan kodingan berikut ini:

<?php namespace App\Http\Livewire; 

use App\Models\Image as ModelsGallery; 

use Livewire\Component; 

use Livewire\WithFileUploads; 

class Gallery extends Component { 

use WithFileUploads; 

public $tampil=[]; 

public $images=[], $data, $title, $judul; 

public $isModalOpen1=0; 

public function save() { 

$this->validate([ 'images.*' => 'image', 'title' => 'required', ]); 

foreach ($this->images as $photo) { $file_name = $photo->extension(); $file_name = $photo->store('gallery', 'public'); 

ModelsGallery::create([ 'image' => $file_name, 'title' => $this->title]); } 

return redirect()->to('dashboard/galery'); }

private function dataSubmenu($parent){ 

$menu = ModelsGallery::where('title', $parent)->distinct()->get(); 

if(count($menu) > 0 ){ 

$menu = $menu->map(function($data){ $data = [ 'id' => $data->id, 'judul' => $data->judul, 'title' => $data->title, 'image' => $data->image, ]; return $data; }); return $menu; } 

return null; } 

public function openModal1() { $this->isModalOpen1 = true; } private function resetCreateForm(){ $this->judul = ''; $this->title =''; $this->image = ''; } 

public function tambah(){ $this->resetCreateForm(); $this->openmodal1(); } private function dataMenu(){ 

// return Menu::where('tipe','mainmenu')->get(); 

$menu = ModelsGallery::select('title')->distinct()->get()->map(function($data){ $data = [ 'id' => $data->id, 'judul' => $data->judul, 'title' => $data->title, 'image' => $data->image, 'submenu' => $this->dataSubmenu($data->title), ]; return $data; }); return $menu; } public function render() { $this->menus = $this->dataMenu(); return view('livewire.gallery'); } }

Lalu pada bagian view blade.php silahkan kalian gunakan kodingan berikut ini:

@if($isModalOpen1) 
@include('livewire.formgalery') 
@endif 
<div class="body flex-grow-1"> 
<div class="container-lg"> 
<div class="card"> 
<div class="card-body"> 
<button class="form-control btn btn-success" wire:click="tambah()">Tambah Galeri</button> <hr>
<span class="bold">Daftar Galeri</span> 
<div class="accordion accordion-flush" id="accordionFlushExample"> 
@foreach($menus as $data) 
<div class="accordion-item"> <h2 class="accordion-header" id="flush-heading{{$loop->iteration}}"> 
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{$loop->iteration}}" aria-expanded="false" aria-controls="flush-collapse{{$loop->iteration}}"> {{$data['title']}} </button> </h2> <div id="flush-collapse{{$loop->iteration}}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{$loop->iteration}}" data-bs-parent="#accordionFlushExample"> <div class="accordion-body"> @foreach($data['submenu'] as $k) <img style="width: 128px;height: 128px;" src="{{asset('storage/')}}/{{$k['image']}}" alt=""> @endforeach </div> </div> </div> @endforeach </div> </div> </div></div>

Lalu silahkan buat sebuah livewire lagi untuk view form-nya saja, dengan cara lakukan eksekusi perintah php artisan make:livewire formgallery dan kalian tinggal mengedit blade.php saja menjadi seperti berikut ini:

<div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400"> <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="fixed inset-0 transition-opacity"> <div class="absolute inset-0 bg-gray-500 opacity-75"></div> </div> <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline"> <form wire:submit.prevent="save"> <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> @if (session()->has('success')) <div class="alert alert-success"> {{ session('success') }} </div> @endif @if ($images) Gallery: <div class="row"> @foreach ($images as $images) <img style="width: 128px; height: 128px;" src="{{ $images->temporaryUrl() }}"> @endforeach </div> @endif <div class="mb-3"> <label class="form-label">Masukkan Gambar (Boleh lebih dari 1 gambar)</label> <input type="file" class="form-control" wire:model="images" multiple> @error('images.*') <span class="error">{{ $message }}</span> @enderror </div> <div class="row mt-4 mb-4"> <div class="col-sm-6"> <label class="block text-gray-700 text-sm font-bold mb-2">Judul Bahasa Inggris :</label> <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Masukkan Judul B.Inggris" wire:model="title"> </div> </div> <button type="submit" class="btn form-control btn-primary">Simpan</button> </form> </div> <a href="/dashboard/galery"><button class="btn form-control btn-danger">Kembali</button></a><hr> </div> </div> </div>

Setelah itu kalian tinggal membuat rute yang menggunakan livewire yang telah kita buat ini, dengan cara edit pada file php dan tambahkan kode seperti berikut ini:
```
Route::get(/galery', Gallery::class)->name('gallery');
```
Silahkan jalankan perintah php artisan serve dan buka rute yang telah kalian buat, contohnya: localhost:8000/galery
Nah selesai deh, kalian akan melihat tampilan preview seperti berikut ini.

Video Cara Membuat Multiple Image Upload Laravel

Berikut ini admin juga telah membuat sebuah video tutorial yang dapat kalian tonton dan coba, ini dia videonya selamat menonton:

Nah jadi itulah yang dapat admin bagikan pada artikel Cara Membuat Multiple Image Upload dengan Preview. Semoga dapat membantu projekan kalian semua yah agar terlihat lebih kaya fitur, terima kasih telah berkunjung di Tekno Clarity.

Sekian dan Wassalamualaikum Warahmatullahi Wabarakatu.