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

 

Contoh page yang memaparkan imej yang telah dimuat-naik ke server

Kerangka tutorial ini;

  1. Menambahkan medan dalam jadual (table) trainings untuk menyimpan nama fail imej yang dimuat-naik ke server.
  2. Mengubahsuai setting storan dalam config/filesystem.php
  3. Menyediakan link (virtual folder dalam public) yang akan mencapai fail imej dalam storan.
  4. Menyediakan borang (form) memilih dan memuat-naik fail imej.
  5. Menambah proses simpan fail imej dalam TrainingController.php function store().
  6. 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.

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.

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.

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"

 

Tambahan enctype dan file-upload input control

Borang yang terhasil dengan muat-naik fail.

Borang yang terhasil dengan muat-naik fail

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

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

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

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;

  1. Android Studio
  2. Pembangunan Web dengan PHP&MySQL
  3. Pembangunan Sistem Web menggunakan kerangka Laravel

Blog peribadi beliau di khirulnizam.com . Beliau boleh dihubungi melalui email khirulnizam@gmail.com , atau Whatsapp: http://wasap.my/60129034614