Create Data

Seperti pada namanya, fungsi ini bertujuan untuk mengalihkan pengguna kedalam halaman create, dimana pada halaman ini bertujuan sebagai form input data. Silakan teman-teman buka file ImageController.php yang terletak didalam folder app/Http/Controller/ kemudian pada function create, masukan kode berikut ini:

public function create()
    {
        return view('images.create');
    }

Ketika fungsi ini dipanggil didalam rute, maka otomatis akan memanggil view yang terletak didalam folder resources/views/images/create.blade.php.

Create View

Silakan tambahkan file baru didlam folder resources/views/images/, buat dengan nama create.blade.php.

resources/
│── views/
│   │── images/
│   │   │── create.blade.php

Buka file create.blade.php kemudian masukkan kode berikut ini:

@extends('layouts.app')

@section('content')
<div class="max-w-lg mx-auto bg-white p-6 shadow rounded">
    <h2 class="text-2xl font-bold mb-4">Upload Image</h2>

    <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-4">
            <label class="block text-gray-700">Title</label>
            <input type="text" name="title" class="w-full border rounded p-2">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700">Image</label>
            <input type="file" name="image" class="w-full border rounded p-2">
        </div>

        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Upload</button>
    </form>
</div>
@endsection

script diatas merupakan contoh kecil halaman untuk mengunggah gambar dengan Laravel, mencakup input untuk judul dan gambar, serta pengamanan menggunakan CSRF.

Store Data

Seperti pada namanya, fungsi ini bertujuan untuk menyimpan data yang diinput dari form create sebelumnya yang sudah kita buat. Silakan teman-teman buka file ImageController.php yang terletak didalam folder app/Http/Controller/ kemudian pada function store, masukan kode berikut ini:

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

        $imagePath = $request->file('image')->store('images', 'public');

        Image::create([
            'title' => $request->title,
            'image' => $imagePath,
        ]);

        return redirect()->route('images.index')->with('success', 'Image uploaded successfully');
    }

Fungsi diatas menangani penyimpanan gambar yang diunggah dengan validasi input, memastikan bahwa title wajib diisi dan file yang diunggah harus berupa gambar dengan format jpg,png,jpeg serta ukuran maksimal 2MB. Gambar yang diunggah akan disimpan dalam direktori images di dalam penyimpanan publik. Setelah berhasil, akan dialihkan ke halaman daftar gambar dengan pesan sukses Image uploaded successfully

Start the app

Pastikan apache dan mysql didalam XAMPP sudah dijalankan, kemudian jalankan aplikasi dengan cara menjalankan perintah

php artisan serve

Kemudian akses rute images yang sudah kita konfigurasi melalui url berikut ini:

http://127.0.0.1:8000/images/create

Maka akan terlihat seperti berikut ini:

Terlihat kita sudah berhasil membuat halaman create data dan fungsi store dengan laravel 12, pada materi berikutnya, kita akan membuat fitur update data terhadap image dan title yang berhasil kita upload berdasarkan id nya masing-masing.