Upload Image Menggunakan Laravel Media Library by Spatie di Laravel 8

Upload Image Menggunakan Laravel Media Library by Spatie di Laravel 8

Admin
Admin・ 17 Agustus 2021
10 min read ・ 171 views

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. 🚀

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/[email protected]/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/[email protected]/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

Tinggalkan Komentar
Loading Comments