
Upload Image Menggunakan Laravel Media Library by Spatie di Laravel 8

Laravel Media Library - Package ini dapat mengaitkan semua format atau jenis file dengan eloquent. Laravel Media Library Package menyediakan API yang sederhana dan mudah untuk digunakan. Laravel media library terdapat dua versi yaitu free (open source) dan versi pro. Laravel Media Library package versi pro menawarkan komponen blade, vue dan react untuk menghandle uploads ke media library dan untuk mengelola konen media library collection.
Oke, langsung saja kita ke kode untuk mencoba menggunakan laravel media library package di laravel versi 8. 🚀
Steps to Use Laravel Media Library Package in Laravel 8
- Step 1: Install Laravel 8
- Step 2: Install Laravel Media Library
- Step 3: Buat Database & Setup .ENV
- Step 4: Buat File Post Model & Migration
- Step 5: Menyiapkan File Model
- Step 6: Edit File Migration
- Step 7: Migrate
- Step 8: Buat PostController
- Step 9: Define Route
- Step 10: Setup Blade View
- Step 11: Pengujian
Step 1: Install Laravel 8
laravel new laravel-media-library
Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk implementasi menggunakan laravel media library by Spatie. Untuk installasi laravel bisa menggunakan laravel installer seperti contoh di atas atau install laravel menggunakan composer seperti di bawah ini.
composer create-project laravel/laravel laravel-media-library
Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-media-library.
Tunggu hingga proses installasi selesai dan jika sudah selesai, jangan lupa untuk masuk ke direktori project menggunakan perintah cd laravel-media-library.
Step 2: Install Laravel Media Library
composer require spatie/laravel-medialibrary
Setelah di langkah pertama kita sudah selesai install laravel, jadi pada langkah yang kedua ini kita akan menginstall laravel media library. Jalankan perintah di atas untuk mulai menginstall laravel media library via composer.
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
Kemudian publish file migration dari laravel media library menggunakan perintah seperti di atas.
Step 3: Buat Database & Setup .ENV
APP_URL=http://127.0.0.1:8090
LOG_CHANNEL=stack
LOG_LEVEL=debug
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_media_library
DB_USERNAME=root
DB_PASSWORD=
Kemudian di langkah nomor tiga, kita perlu membuat database yang akan kita gunakan untuk menyimpan data-data post dan data media yang kita tambahkan. Setelah membuat database, jangan lupa untuk menyesuaikan DB_DATABASE di file .ENV seperti contoh di atas.
Sesuaikan APP_URL dengan URL yang digunakan untuk menjalankan laravel project ini di browser. Sebagai contoh, disini saya akan menjalankan project percobaan laravel media library ini pada port 8090, sehingga di APP_URL saya isikan dengan http://127.0.0.1:8090
Step 4: Buat File Post Model & Migration
php artisan make:model Post -m
Karena pada tutorial kali ini kita akan menggunakan laravel media library package untuk menambahkan cover pada data post, jadi kita perlu membuat tabel post terlebih dahulu untuk menyimpan data post seperti title dan description atau post body. Jalankan perintah di atas untuk generate file post model dan post migration.
Step 5: Menyiapkan File Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\HasMedia;
class Post extends Model implements HasMedia
{
use HasFactory, InteractsWithMedia;
protected $fillable = [
'title','desc'
];
}
Untuk mengimplementasikan laravel media library dengan post model, kita perlu mengubah atau menambahkan kode laravel media library seperti di atas.
Step 6: Edit File Migration
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->longText('desc');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Kemudian buka file {timestamp}_create_posts_table.php yang telah kita generate pada langkah sebelumnya. Di file migration ini, kita tambahkan field title dan dec, sehingga secara keseluruhan file create_posts_table.php menjadi seperti contoh kode di atas.
Step 7: Migrate
php artisan migrate
Jalankan php artisan migrate untuk memigrasi file-file migration termasuk juga file migration bawaan dari laravel media library ke database yang telah kita buat di langkah sebelumnya.
Step 8: Buat PostController
php artisan make:controller PostController
Langkah ke delapan, buat file PostController menggunakan perintah artisan seperti di atas.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
$posts = Post::latest()->get();
return view('index', compact('posts'));
}
public function create()
{
return view('create');
}
public function store(Request $request)
{
$input = $request->all();
$post = Post::create($input);
if($request->hasFile('cover') && $request->file('cover')->isValid()){
$post->addMediaFromRequest('cover')->toMediaCollection('cover');
}
return redirect()->route('post');
}
}
Setelah file PostController berhasil tergenerate, sesuaikan kodenya dengan kode seperti di atas. Dengan kode tersebut, kita membuat method index untuk menampilkan data dari tabel posts yang dilempar atau ditampilkan di file index.blade.php, method create, untuk menampilkan tampilan form tambah post dan method store untuk menangkap nilai request dan menambahkan request tersebut ke database. Di method store, kita juga menyisipkan kode laravel media library.
Step 9: Define Route
Route::get('posts',[App\Http\Controllers\PostController::class,'index'])->name('post');
Route::get('posts/create',[App\Http\Controllers\PostController::class,'create'])->name('post.create');
Route::post('posts/store',[App\Http\Controllers\PostController::class,'store'])->name('post.store');
Setelah membuat file PostController, selanjutnya kita perlu membuat route baru untuk memanggil method-method yang ada di file PostController.php. Tambahkan kode di atas di file routes/web.php.
Step 10: Setup Blade View
Langkah terakhir yaitu setup blade view, di langkah ini kita perlu membuat file view baru yaitu index.blade.php dan create.blade.php.
Index.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">
<title>Upload Image in Laravel 8 using Laravel Media Library by Spatie</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="d-flex p-2 bd-highlight mb-3">
<a href="{{ route('post.create') }}" class="btn btn-dark">Add Post</a>
</div>
<table class="table">
<thead>
<tr>
<th width="5%">#</th>
<th width="35%">Title</th>
<th width="40%">Desc</th>
<th width="20%">Cover</th>
</tr>
</thead>
<tbody>
@foreach($posts as $key=>$item)
<tr>
<td>{{ ++$key }}</td>
<td>{{ $item->title }}</td>
<td>{{ $item->desc }}</td>
<td><img src="{{$item->getFirstMediaUrl('cover', 'thumb')}}" / width="220px"></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
Silahkan buat file baru di dalam direktori resources/views dengan nama index.blade.php, kemudian copy semua kode di atas dan paste di file index.blade.php tersebut. Di file view ini kita hanya membuat kode untuk menampilkan data-data dari table posts dan menampilkan data cover dari laravel media library.
Create.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">
<title>Upload Image in Laravel 8 using Laravel Media Library by Spatie</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="d-flex p-2 bd-highlight mb-3">
<a href="{{ route('post') }}" class="btn btn-outline-danger btn-sm">Go Back</a>
<h2 class="ms-auto fs-5">Upload Image in Laravel 8 using Laravel Media Library by Spatie</h2>
</div>
<div class="card">
<div class="card-body">
<form action="{{ route('post.store') }}" enctype="multipart/form-data" method="post">
@csrf
<div class="mb-3">
<label>Title</label>
<input type="text" name="title" class="form-control">
</div>
<div class="mb-3">
<label>Desc</label>
<textarea class="form-control" name="desc"></textarea>
</div>
<div class="mb-3">
<label>Cover:</label>
<input type="file" name="cover" class="form-control">
</div>
<div class="d-grid">
<button class="btn btn-primary">Store</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Kemudian buat file view baru lagi dengan nama create.blade.php, kemudian copy semua kode di atas dan paste di file yang baru saja dibuat tersebut. Dengan kode seperti di atas, kita hanya membuat form dengan input field untuk title, desc dan cover.
Step 11: Pengujian
Oke, setelah melewati langkah-langkah untuk menggunakan laravel media library di laravel 8 yang dimulai dari langkah install laravel versi terbaru (saat ini versi 8), install laravel media library sampai dengan langkah setup blade view, sekarang waktunya pengujian. Silahkan jalankan laravel project dengan perintah php artisan serve, kemudian buka laravel project di browser dengan URL 127.0.0.1:8000 atau laravel-media-library.test.
Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. 🚀 🚀 🚀
Full Documentation: Laravel Media Library Package by Spatie
Credit: Data illustrations by Storyset
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 67047 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32220 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31779 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28528 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27860 views