Latihan Unggah Gambar dengan Laravel

Pada bagian ini, kita akan belajar membuat halaman unggah gambar dengan menggunakan Laravel dan basis data MySQL.

Projek-projek seperti ini sangat penting untuk dipelajari sebab tidak semua dalam sebuah projek itu selalu menggunakan teks dalam pengelolaannya, terkadang perlu menggunakan sebuah gambar.

Seperti untuk web biodata memerlukan foto profil sebagai tempat meletakkan fotonya. Ada juga sebuah web toko, tentunya memerlukan foto barang-barang yang diperlukan sebagai bahan bukti yang terlihat.

Pertama, siapkan projeknya dengan perintah :

composer create-project ...

Tunggu sampai prosesnya selesai

Buka projek yang telah di inisialisasi / dibuat, kemudian buka file welcome.blade.php yang berada di dalam folder /resources/views/welcome.blade.php

Hapus seluruh kode tersebut, ganti dengan form HTML dengen menyertakan atribut enctype yang diatur dengan multipart/form-data dengan tujuan nantinya bisa mengirim sebuah file.

Perhatikan pada bagian form action

Ketika tombol Unggah ditekan, nanti form akan diarahkan menuju route /gambar/simpanGambar.

Ingat! Route ini disimpan dalam file web.php yang berada di dalam folder /resources/routes/web.php

Kemudian kita buka file web.php :

Dan buat route baru /gambar/simpanGambar supaya nanti <form action="/gambar/simpanGambar" method="post"... bisa berjalan. Route yang dibuat menggunakan method post :

Dalam route tersebut nanti akan diarahkan menuju /gambar/simpanGambar yang sekaligus memanggil controller GambarController, kemudian memanggil sebuah method simpanGambar.

Method simpanGambar

Tetapi sebelum melanjutkan, kita perlu membuat controller GambarController. Karena kita belum memilikinya. Jalankan perintah :

php artisan make:controller GambarController

Untuk membuatnya. Perhatikan gambar berikut :

Pastikan ada keterangan 'created successfully'

Sebuah controller bisa dibuat kapan saja. Pastikan sudah membuat controller sebelum menjalankan php artisan serve karena setiap route akan memanggil method yang ada dalam controller.

Kemudian, setelah menjalankan perintah make:controller, akan ada file baru GambarController.php di dalam folder /app/Http/Controllers

Buka file GambarController.php :

Kita tambahkan / buat method baru sesuai dengan nama yang ada di dalam file route, web.php. Masih ingat ? Kalau tidak bisa buka lagi file web.php :

Itu yang terBlok, method simpanGambar.

Penamaan dalam membuat route bebas, yang penting adalah nama method yang ditulis di dalam file web.php dan controller ( kasus ini GambarController.php ) harus sama.

Tambahkan baris kode :

🛈 Ket

public function simpanGambar(Request $request)

Merupakan bagian dari pembuatan method simpanGambar. Ini bertugas merima objek Request yang berisi data formulir atau input dari pengguna ( user ).

if($request->hasFile('gambar'))
Bagian ini cek apakan objek Request memiliki file yang telah dipilih melalui formulir HTML.

$folder = 'path_ke_folder';

Untuk membuat sebuah folder baru dengan nama 'path_ke_folder'

Nama folder bebas, disini bisa menentukan sendiri

$fileName = $request->file('gambar')->hashName();

Memasukkan file yang dipilih dengan form HTML ke dalam objek Request.

$path = Storage::disk('public')->putFileAs($folder, $request->file('gambar'), $fileName);

Pada bagian ini, menentukan letak posisi file akan disimpan. Setelah melakukan form submit ( klik tombol ) pada form HTML, file yang telah dipilih akan di salin ( copy ) ke dalam folder yang telah di tentukan. Penentuan folder ini sesuai dengan nama yang ada dalam variabel $folder.

Jadi file gambar yang telah dipilih nanti akan di salin ke dalam folder path_ke_folder.

Terakhir

return "Gambar berhasil di unggah! <br>Lokasi penyimpanan $path dengan nama file $fileName";

Akan memberikan informasi unggah gambar berhasil disertai dengan menyebutkan lokasi penyimpanan dan nama gambar dalam penyimpanan.

Kemudian di bagian ini kita jalankan dulu perintah

php artisan storage:link

Perintah php artisan storage:link dalam Laravel digunakan untuk membuat symbolic link ( symlink ) dari direktori storage/app/public ke direktori public/storage. Hal ini memungkinkan untuk mengakses file yang disimpan dalam storage/app/public melalui URL yang dapat diakses secara publik.

Setelah menjalankan perintah tersebut, muncul folder baru di dalam /public/storage/path_ke_folder. Lihat isi folder tersebut, masih kosong.