March 7, 2017

Membuat Form Upload File dengan Ajax dan Framework Laravel

Share this
  •  
  •  
  •  
  •  
  •  
  •  

Assalamualaikum wr wb, pada kesempatan kali ini saya akan membuat tutorial bagaimana cara membuat form upload file dengan ajax dan Framework Laravel. Pada tutorial yang lain, saya pernah membuat tulisan mengenai upload file juga tetapi di framework Yii  2 (disini). Tulisan kali ini secara teknis tidak akan jauh berbeda, bedanya form akan di munculkan dalam bentuk modal dan akan di tambahkan progress bar untuk menunjukkan status file yang akan di upload. Hal ini akan membuat form terlihat lebih menarik dan interaktif, untuk scriptnya sendiri tidak terlalu sulit tetapi harus lebih menguasai tentang javascript dan Jquery. Untuk lebih lanjutnya kita mulai saja scripting cara membuat form upload file dengan ajax dan framework laravel.

Desain Tabel

Berikut adalah desain tabel yang saya gunakan.

Membuat Form Upload File dengan Ajax dan Framework Laravel

Untuk scripting, pertama-tama kita buat Model dan Controllernya dengan menggunakan artisan.

Model TbFile :

Lengkapi Controller pada TbFileController, method yang akan saya gunakan adalah index, create, store, dan destroy. File dokumen yang terupload akan terletak di folder public/images. Untuk Scriptnya sebagai berikut :

Script Untuk Menampilkan Modal akan sedikit berbeda dengan tutorial saya yang sebelumya. Ini akan sedikit lebih pendek dan simple.

Javascript nya :

view modal Content :

Kemudian view untuk tampilan Index ( view/file/index.blade.php )

Untuk Form upload nya sebagai berikut :

Nah, intinya ada disni 😀 . Javascript yang digunakan untuk mengeksekusi form upload file sebagai berikut :

Jangan lupa untuk Route nya adalah sebagai berikut :

Uji Coba

Setelah semua script di atas di pasang, kita mulai menampilkan halaman awal terlebih dahulu.

Membuat Form Upload File dengan Ajax dan Framework Laravel

Membuat Form Upload File dengan Ajax dan Framework Laravel

Kemudian kita klik tombol upload foto sehingga akan muncul form dalam bentuk modal bootstrap.

Membuat Form Upload File dengan Ajax dan Framework Laravel

Membuat Form Upload File dengan Ajax dan Framework Laravel

Kemudian kita isi form dan file yang ingin di upload, kemudian submit form tersebut.

Membuat Form Upload File dengan Ajax dan Framework Laravel

Membuat Form Upload File dengan Ajax dan Framework Laravel

Foilahh, gambar berhasil terupload 😀 .

Membuat Form Upload File dengan Ajax dan Framework Laravel

Membuat Form Upload File dengan Ajax dan Framework Laravel

Anda juga dapat menambahkan validasi, agar file jenis tertentu saja yang boleh di upload, untuk daftar validasinya anda bisa lihat disini.

Membuat Form Upload File dengan Ajax dan Framework Laravel

Mudah bukan 😀 , sekian tutorial dari saya, semoga dapat bermanfaat, tetap belajar dan berusaha 😀 . Terimakasih.

Agus Wiji Suhariono

Memulai menulis Blog pada bulan November dari Tahun 2015. Penulis merupakan alumni dari Politeknik Negeri Malang angkatan 2011 Program Studi Manajemen Informatika, Jurusan Elektro. Penulis memulai menekuni dunia programming mulai tahun 2014 dan sekarang bekerja di Pemerintahan sebagai IT Staff.

You may also like...