Upload imej ke sistem laravel

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

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.

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.

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.

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"

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.

//// 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>

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.

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

• Kursus Asas Laravel FSTM
• Tutorial Pengenalan Laravel
• Tutorial CRUD Pengenalan Laravel
• Ubah design antaramuka dalam Laravel
• Carian rekod dalam Laravel
• Kemaskini dan padam rekod dalam modul Laravel
• Paparan carian dengan pagination dalam Laravel
• Muat-naik fail imej ke server
• Laravel REST API
• PHPStorm : IDE yang lebih baik untuk pembangunan web/Laravel
• Model-View-Controller dalam Laravel
• Bahan kursus Laravel

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