Scrool Untuk Membaca
Teknologi

Tutorial Upload Image di Laravel 11

273
×

Tutorial Upload Image di Laravel 11

Sebarkan artikel ini

Mengunggah gambar merupakan fitur yang hampir selalu ada dalam aplikasi web saat ini. Laravel 11, dengan berbagai fitur dan tools-nya, membuat proses ini menjadi lebih mudah dan efisien. Dalam tutorial ini, kita akan belajar cara mengimplementasikan fitur upload image, mulai dari persiapan awal hingga menampilkan gambar yang telah diunggah.

Persiapan Awal

1. Instalasi Laravel

Sebelum memulai, pastikan Anda sudah memiliki Composer diinstal pada sistem Anda. Setelah itu, instal Laravel 11 dengan menjalankan perintah berikut di terminal:

composer create-project --prefer-dist laravel/laravel nama_project

2. Konfigurasi Database

Langkah selanjutnya adalah mengkonfigurasi database. Buka file .env pada root direktori project Laravel Anda dan sesuaikan konfigurasi database dengan pengaturan server lokal Anda.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=username_database
DB_PASSWORD=password_database

Membuat Model dan Migration

Setelah konfigurasi database selesai, kita perlu membuat model dan migration untuk tabel yang akan menyimpan data gambar. Jalankan perintah berikut:

php artisan make:model Image -m

Buka file migration yang baru dibuat di direktori database/migrations dan tambahkan kolom untuk menyimpan nama file gambar:

Schema::create('images', function (Blueprint $table) {
    $table->id();
    $table->string('filename');
    $table->timestamps();
});

Jangan lupa untuk menjalankan migration dengan perintah:

php artisan migrate

Membuat Controller

Selanjutnya, buat controller yang akan menangani logika upload gambar. Gunakan artisan untuk membuat controller:

php artisan make:controller ImageController

Buka file ImageController.php yang baru dibuat dan tambahkan method untuk menampilkan form dan menangani proses upload:

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
{
    public function form()
    {
        return view('upload');
    }

    public function upload(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $imageName = time().'.'.$request->image->extension();  
 
        $request->image->move(public_path('images'), $imageName);

        $image = new Image();
        $image->filename = $imageName;
        $image->save();

        return back()
            ->with('success','You have successfully uploaded an image.')
            ->with('image', $imageName);
    }
}


Membuat Form Upload Image

Buat view baru dengan nama upload.blade.php di direktori resources/views untuk form upload:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Image Upload Tutorial</title>
</head>
<body>
    @if ($message = Session::get('success'))
    <div>
        <strong>{{ $message }}</strong>
    </div>
    <div>
        <img src="images/{{ Session::get('image') }}">
    </div>
    @endif

    @if ($errors->any())
    <div>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('image.upload') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div>
            <label for="image">Choose image:</label>
            <input type="file" id="image" name="image">
        </div>
        <div>
            <button type="submit">Upload Image</button>
        </div>
    </form>
</body>
</html>

Menangani Upload Image

Pada langkah ini, Anda sudah memiliki semua komponen yang dibutuhkan untuk mengunggah gambar. Namun, jangan lupa untuk mendaftarkan route pada web.php:

use App\Http\Controllers\ImageController;

Route::get('image-upload', [ImageController::class, 'form'])->name('image.upload.form');
Route::post('image-upload', [ImageController::class, 'upload'])->name('image.upload');

Menampilkan Gambar

Setelah gambar berhasil diunggah, Anda dapat menampilkan gambar tersebut di halaman web dengan mengakses direktori public/images.

Kesimpulan

Mengunggah gambar di Laravel 11 tidaklah sulit. Dengan mengikuti langkah-langkah yang telah diuraikan di atas, Anda dapat dengan mudah menambahkan fitur upload gambar pada aplikasi Laravel Anda. Ingatlah untuk selalu mengikuti kaidah SEO yang baik dan benar dalam pembuatan artikel atau tutorial untuk memastikan konten Anda mudah ditemukan dan bermanfaat bagi pembaca.

Dengan mengikuti tutorial ini, Anda tidak hanya belajar cara mengunggah gambar tetapi juga memahami bagaimana Laravel menangani file dan menyimpan informasi tentang file tersebut di database. Ini merupakan skill penting bagi pengembang web yang menggunakan Laravel dalam proyek mereka.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Teknologi

Laravel 11, sebagai versi terbaru dari framework PHP yang terkenal ini, membawa sejumlah perbaikan dan fitur baru yang memudahkan pengembangan aplikasi web. Dengan dukungan komunitas yang luas dan dokumentasi yang…

Teknologi

Dunia teknologi tidak luput dari fenomena yang dikenal sebagai “tech winter”. Istilah ini mengacu pada periode stagnasi atau penurunan dalam industri teknologi, yang sering kali diikuti oleh kebangkitan inovasi baru….