Gigih kawan-kawan kita dari UMP, dari KUIS yang buat projek akhir datang cuti Deepavali sedut ilmu Laravel. Semangat peserta berjangkit ke trainer untuk menggigihkan diri menambah koleksi modul Laravel seterusnya. Macam-macam kisah cabaran programmer2 nak sampai ke KUIS – kami kagum dengan anda semua. Kali ini nak sambung dengan cara-cara upload imej dalam sistem web berasaskan Laravel.
Cuma sebelum itu admin harap tuan-puan dah pernah buat tutorial yang terdahulu sebelum harung tutorial ini. Kalau belum sila ke Tutorial CRUD Pengenalan Laravel
Kod lengkap tutorial ini ada di github.com/khirulnizam/larafstm_imageupload
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/display-image-upload-on-Laravel.png)
Contoh page yang memaparkan imej yang telah dimuat-naik ke server
Kerangka tutorial ini;
- Menambahkan medan dalam jadual (table) trainings untuk menyimpan nama fail imej yang dimuat-naik ke server.
- Mengubahsuai setting storan dalam config/filesystem.php
- Menyediakan link (virtual folder dalam public) yang akan mencapai fail imej dalam storan.
- Menyediakan borang (form) memilih dan memuat-naik fail imej.
- Menambah proses simpan fail imej dalam TrainingController.php function store().
- Membuat paparan imej yang telah dimuat-naik.
Menambahkan medan dalam jadual (table) trainings
Medan tambahan ini diperlukan untuk menyimpan nama fail imej yang dimuat-naik ke server. Kita telah menyediakan jadual trainings dalam tutorial lepas. Pengubah-suaian struktur jadual dalam projek Laravel mesti dilakukan dalam migration file. Buat satu migration-file tambahan dengan arahan berikut;
php artisan make:migration add_file_to_trainings
Ini akan menghasilkan migration-file dalam folder database/migrations. Masukkan kod berikut untuk menambah lajur pada table trainings yang sedia ada.
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/migration-add-file-to-trainings-laravel-1024x490.png)
Klik untuk besarkan kod menambah lajur
Medan filename menyimpan nama fail imej, mime menyimpan jenis file , original_filename menyimpan nama fail imej yang asal.
Schema::table( 'trainings' , function (Blueprint $table ) { $table ->string( 'filename' )->nullable(); $table ->string( 'mime' )->nullable(); $table ->string( 'original_filename' )->nullable(); }); |
Seterusnya laksanakan migration untuk menambah medan-medan (field) tambahan ke pangkalan data;
php artisan migrate
Mengubahsuai setting storan dalam config/filesystem.php
Sekiranya ada keperluan ubah setting dalam fail ini. Settings ini merujuk kepada di mana fail imej yang user muat-naik akan disimpan.
Dalam tutorial ini kita akan menambah folder uploads kepada folder storage/app/public . Jadi local folder untuk simpan fail imej berada dalam storage/app/public/uploads. Secara manual cipta folder uploads dalam lokasi yang ditetapkan.
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/storage-app-public-upload-laravel.png)
Lokasi folder uploads tempat simpan fail imej yang user muat-naik
Menyediakan link (virtual folder dalam public)
Proses seterunya yang akan memberikan capaian public kepada fail imej dalam storage/app/public/uploads. Proses ini perlu dilakukan sebab storan fail imej yang dimuat-naik user berada dalam folder bukan-public, makanya virtual folder (link) perlu diwujudkan supaya imej boleh dipaparkan pada paparan public.
Arahan berikut akan menghasilkan virtual link tersebut;
php artisan storage:link
Hasil daripada arahan php artisan storage:link akan menghasilkan virtual-link yang akan membolehkan storan fail-fail image melalui folder public projek Laravel. Perhatikan pada icon folder terdapat anak panah kecil biru menandakan ia bukan folder fizikal, cuma sekadar virtual link.
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/virtual-link-folder-storage.png)
Virtual-link folder storage untuk simpan fail-fail imej dimuat-naik pengguna
Menyediakan borang (form) memilih dan memuat-naik fail imej.
Sedikit perubahan pada borang cipta rekod perlu ditambah untuk membenarkan pengguna memilih fail imej dan memuatnaik ke server. Jadi buka fail blade di resources/views/trainings/create.blade.php, dan tambah input-control file-upload.
Tambah juga pada form atribut berikut;
enctype="multipart/form-data"
![](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/file-upload-input-control-laravel-1024x559.png)
Tambahan enctype dan file-upload input control
Borang yang terhasil dengan muat-naik fail.
![Borang yang terhasil dengan muat-naik fail](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/create-new-training-record-with-image-upload-1024x695.png)
Borang yang terhasil dengan muat-naik fail
Menambah proses simpan fail imej
Seterusnya dalam TrainingController.php function store(), tambah kod untuk simpan fail imej yang user muat-naik ke server.
![Fungsi store() dalam TrainingController untuk simpan fail imej dimuat-naik](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/function-store-TrainingController-save-uploaded-image-to-server-1024x641.png)
Fungsi store() dalam TrainingController untuk simpan fail imej dimuat-naik
//// TrainingController.php public function store(Request $request ) { //validate insert new record process is here $training = $this ->validate(request(), [ 'trainingname' => 'required' , 'desc' => 'required' , 'trainer' => 'required' ]); //in TrainingController function store() //file upload management if ( $request ->hasFile( 'filename' )){ $filename = $request ->filename->getClientOriginalName(); $request ->filename->storeAs( 'public/uploads' , $filename ); $file = new DB; $file ->filename = $filename ; } $tname = $request ->input( 'trainingname' ); $fname = $filename ; $desc = $request ->input( 'desc' ); $trainer = $request ->input( 'trainer' ); $data = array ( 'trainingname' => $tname , 'filename' => $fname , 'desc' => $desc , 'trainer' => $trainer ); DB::table( 'trainings' ) -> insert( $data ); return back()->with( 'success' , 'Training with poster has been added' ); } //end function store() |
Kod penuh di GITHUB
https://github.com/khirulnizam/larafstm_imageupload/blob/master/app/Http/Controllers/TrainingController.php
Paparan imej yang telah dimuat-naik
Page seterusnya akan memilih rekod yang telah disimpan bersama fail imej – show().
Tambahan butang show-all boleh dibuat dengan menambah lajur pada senarai rekod seperti di bawah. Untuk menambahkan lajur dan butang-butang tersebut gunakan kod berikut;
<td> <a href= "{{action('TrainingController@show',$training['id'])}}" class = "btn btn-info btn-sm" > <i class = "fa fa-file-text-o" ></i> </a> </td> |
![Butang papar semua maklumat dalam rekod](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/add-show-all-button-with-image-laravel-1024x697.png)
Butang papar semua maklumat dalam rekod
Seterusnya pada TrainingController@show function – tambah kod untuk mengaut semua data dari rekod yang dipilih.
public function show($id) { //TrainingController@show //display complete record $training = Training::find($id); return view('trainings.show',compact('training','id')); } |
Function show( ) pada akhir kod akan redirect kepada page trainings/show.blade.php seperti di bawah.
![Paparan imej yang telah dimuat-naik](http://fstm.kuis.edu.my/blog/wp-content/uploads/2018/11/show-all-display-uploaded-image-laravel.png)
Paparan imej yang telah dimuat-naik
Perhatikan paparan imej terhasil daripada kod segmen berikut;
<!-- Sebahagian kod HTML dalam trainings/show.blade.php segment ini memaparkan imej dari virtual folder public/storage/uploads --> < img class = "card-img-top" src="{{url('storage/uploads/'.$training->filename)}}" alt="{{$training->filename}}"> < a href="{{url('storage/uploads/'.$training->filename)}}"> Download poster </ a > |
(Kod lengkap cara memaparkan imej tersebut boleh diperolehi dari
https://github.com/khirulnizam/larafstm_imageupload/blob/master/resources/views/trainings/show.blade.php )
Selamat mencuba dan berjaya!
Modul Laravel bahasa Melayu
Trainer:
KHIRULNIZAM ABD RAHMAN, Pensyarah Jabatan Sains Komputer, FSTM KUIS.
Beliau merupakan seorang trainer dalam bidang pengaturcaraan server dan antaramuka web (web front-end & backend) semenjak tahun 2000. Disamping itu juga amat berminat dalam pembangunan applikasi mobile Android, JSON, LARAVEL dan PHP-MySQL.
Antara kursus yang beliau kendalikan;
Blog peribadi beliau di khirulnizam.com . Beliau boleh dihubungi melalui email khirulnizam@gmail.com , atau Whatsapp: http://wasap.my/60129034614