Tutorial Codeigniter 4 – Part 12 – Membuat Fitur Upload dan Download File di Codeigniter 4

Selamat datang di tutorial warung belajar, dalam tutorial kali ini saya akan melanjutkan tutorial codeigniter 4 part 12, kita akan belajar untuk membuat fitur upload dan download di Codeigniter 4.

Fitur ini saya rasa cukup penting jika anda membuat sebuah fitur didalam aplikasi untuk upload dan download berkas, didalam codeigniter 4 anda dipermudah untuk membuat fitur upload dan download berkas, telah difasilitasi untuk validasi form disertai rules seperti tipe data apa yang diperbolehkan, pembatasan ukuran berkas dll.

Dalam contoh ini kita akan coba untuk membuat fitur upload dan download berkas di codeigniter 4, dan untuk kebutuhan tampilan kita menggunakan bootstrap 5, beberapa step yang harus kita lakukan antara lain :

  1. Install codeigniter 4
  2. Membuat tabel dengan migration
  3. Membuat fitur upload berkas
  4. Menampilkan data yang diupload
  5. Membuat fitur download berkas

Baik kita akan mulai proses pembuatan fitur upload dan download di Codeigniter 4


 

 

Video Tutorial Codeigniter 4 – Part 12 – Membuat Fitur Upload dan Download di Codeigniter 4

Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial membuat fitur upload dan download di Codeigniter 4, bisa diakses melalui video dibawah


Menginstall Codeigniter 4

Untuk langkah awal kita perlu menginstall codeigniter 4 terlebih dahulu, dalam contoh ini kita install codeigniter 4 dalam folder dengan nama uploaddownload

karena pada contoh ini kita gunakan xampp, maka secara default untuk web direktori xampp berada di C:/xampp/htdocs, jadi silahkan masuk kedalam folder tersebut, melalui terminal, lalu berikutnya ketikkan perintah seperti gambar dibawah ini :

lalu tekan enter, tunggu hingga proses instalasi selesai.. untuk mempelajari lebih lanjut terkait dengan cara menginstall Codeigniter 4 silahkan buka tutorial kita sebelumnya : Cara Menginstall Codeigniter 4


 

 

Membuat Migration

Berikutnya kita akan membuat bagian migration, karena nantinya kita akan buat tabel di database untuk menyimpan data berkas yang diupload, kita akan buat tabel didatabase dengan nama db_berkas

baik langkah – langkah untuk proses pembuatan migration adalah sebagai berikut :

Silahkan buka terminal dan masuk kedalam direktori : C:\Xampp\htdocs\uploaddownload, lalu tuliskan perintah :

Lalu tekan enter, akan terbuat sebuah file didalam folder app/Database/Migrations, nama file tersebut akan diakhiri dengan nama Berkas

buka file tersebut, dan isi dengan code seperti berikut ini :

Keterangan :

kita akan buat tabel dengan nama berkas

dengan kolomnya adalah sebagai berikut :

  • id_berkas (primary key – integer – auto increment)
  • berkas (varchar – 100)
  • keterangan (varchar – 255)
  • created_at (datetime)
  • updated_at (datetime)

Lalu berikutnya kita simpan file migration tersebut.

Tutorial lebih lengkap terkait dengan migration bisa dibaca tutorial kita sebelumnya Mengenal Fitur Migration, Seeding, dan Library Faker di Codeigniter 4


 

 

Buat database di PHPMYADMIN

Berikutnya kita buat database dengan menggunakan PHPMYADMIN, silahkan buka alamat localhost/phpmyadmin

Lalu buat database baru, semisal kita beri nama db_berkas, lalu klik tombol create..


 

 

Konfigurasi File Env

Berikutnya kita akan koneksikan codeigniter 4 dengan database, silahkan rename file dengan nama env menjadi .env

berikutnya buka file .env tersebut dan edit code didalamnya, untuk konfigurasi database berada pada line 52 – 56, hilangkan tanda # untuk mengaktifkan konfigurasi tersebut

Keterangan

  • Line 1 kita gunakan hostname localhost karena kita gunakan database lokal
  • Line 2 untuk database kita berikan value db_berkas
  • Line 3 untuk username kita berikan nilai root sebagai username default dari MySQL di Xampp
  • Line 4 password kita biarkan kosong karena default password itu kosong di MySQL di Xampp

 

Berikutnya silahkan jalankan file migration untuk generate tabel di database, dengan menggunakan perintah :

lalu tekan enter

Lalu coba buka database db_berkas akan terbuat 2 tabel baru :

  1. migrations
  2. berkas


 

 

Membuat Model Untuk Kebutuhan Akses Ke Tabel Berkas

Berikutnya kita akan buat model dengan nama BerkasModel, anda bisa membuat file model dengan nama BerkasModel.php dan simpan didalam folder app/Models

Untuk teman – teman yang menggunakan Codeigniter versi 4.1.1 keatas sudah bisa membuat model dengan perintah Terminal, anda bisa menggunakan perintah

Lalu isikan file model dengan nama BerkasModel.php dengan code seperti berikut ini :

Keterangan :

  • Line 10 kita set file model ini terkoneksi dengan tabel berkas
  • Line 11 kita set primaryKey adalah kolom id_berkas
  • Line 12 kita set returnType menggunakan object
  • Line 13 kita set useTimestamps bernilai true agar menyimpan waktu saat data diinsert dan diupdate
  • Line 14 kita tuliskan kolom yang bisa diisi pada abgian allowedFields

 

 

Membuat Controller dengan nama Berkas

Berikutnya kita akan buat controller dengan nama Berkas, untuk teman – teman yang menggunakan Codeigniter 4 versi 4.1.1 keatas bisa generate controller menggunakan terminal, dengan perintah :

Maka akan terbuat controller dengan nama Berkas.php didalam folder app/Controllers


 

 

Membuat Tampilan Form Upload Berkas

Berikutnya kita akan buat tampilan form upload berkas, kita akan buat dulu method create didalam controller Berkas, silahkan buka file dengan nama Berkas.php didalam folder app/Controllers, lalu tambahkan method create didalamnya, dan didalam method create kita mengakses file view dengan nama form_upload.php

Sehingga untuk code didalam file app/Controller/Berkas.php adalah sebagai berikut :

Keterangan :

  • Line 14 kita buat method dengan nama create
  • Didalam method create kita mengakses file view dengan nama form_upload.php

 

 

Membuat File view form_upload.php

Berikutnya kita akan membuat file dengan nama form_upload.php, untuk code dalam file form_upload.php, adalah sebagai berikut :

Untuk menampilkan form upload, teman teman bisa menjalankan local development server dengan menuliskan perintah di terminal

Lalu akses dengan alamat :

Tampilannya kurang lebih seperti berikut ini :

Keterangan :

  • Skrip yang digunakan cukup panjang karena kita menggunakan tampilan Bootstrap 5 jadi ada beberapa perintah yang dibutuhkan untuk kebutuhan tampilan
  • Line 17 – 23 kita gunakan untuk mengecek apakah ada error pada form validation, akan memeriksa session flashdata dengan nama error, session flashdata ini akan dibuat dibagian controller Berkas saat proses pengecekan form validasi di proses upload berkas nanti kita akan bahas.
  • Line 24 kita gunakan tag form untuk membuat form, kita gunakan method post dan untuk attribute action kita arahkan ke url base_url/berkas/save, lalu karena kita akan buat upload file kita gunakan attribute enctype dengan value multipart/form-data
  • Line 25 kita gunakan perintah csrf_field() untuk generate token
  • Line 28 kita gunakan input type file dengan nama berkas
  • Line 32 kita gunakan textarea dengan nama keterangan
  • Line 35 kita gunakan input type submit untuk membuat tombol submit

 

 

Membuat Method Save untuk proses Upload

Berikutnya kita akan buat method save didalam controller Berkas, method ini akan digunakan untuk memproses form upload saat tombol upload di klik…

Silahkan buka file app/Controllers/Berkas.php

Kita tambahkan method save didalam controller Berkas.php sehingga codenya menjadi sebagai berikut :

Keterangan :

  • Line 20 kita buat method dengan nama save
  • Line 22 kita buat pengecekan form validasi dengan aturan sebagai berikut :
    • Keterangan harus diisi (Line 24)
      • Tampilan Saat Keterangan tidak diisi (Line 26)
    • Berkas Harus diupload (Line 30)
    • Berkas harus berupa file jpg,jpeg, gif, png , dan untuk ukuran file maksimal 2048 Kb (Line 30)
      • Pesan error saat tidak ada berkas yang diupload (Line 32)
      • Pesan error saat file yang diupload tipe datanya tidak sesuai (Line 33)
      • Pesan error saat ukuran file melebihi ukuran file maksimal (Line 34)
  • Session flashdata dengan nama error akan digenerate ketika form validasi tidak sesuai, dan akan berisi list error dari validasinya (Line 39)
  • Redirect kembali kebagian form dengan menyertakan inputan form (Line 40)
  • Line 6 kita load model dengan nama BerkasModel.php
  • Line 43 kita buat object baru dengan nama $berkas dengan class BerkasModel
  • Line 44 kita dapatkan informasi dari file berkas, dan kita simpan pada variabel $dataBerkas
  • Line 45 kita generate Random Name dengan menggunakan method getRandomName dan disimpan didalam variabel fileName
  • Line 46 kita insert data dengan menggunakan method insert dan kita buat array associative dengan :
    • key adalah nama kolom
    • value yang berasal dari data form upload
    • untuk key berkas kita berikan nilai dari variabel $fileName yang sudah berisi nama random dari file.
    • untuk key keterangan kita berikan nilai dari inputan form dengan nama keterangan
  • Line 50 setelah proses insert data , berikutnya kita upload berkasnya dengan menggunakan variabel $dataBerkas kita gunakan method move, method move memiliki 2 parameter :
    • Parameter – 1 adalah posisi folder tempat menyimpan file yang diupload
    • Parameter -2 adalah nama file yang akan diupload tersebut
  • Line 51 kita buat session flashdata dengan nama success dengan nilai “Berkas Berhasil diupload” dan kita akan redirect kedalam halaman berkas (Line 52)

 

 

Testing Upload File

Berikutnya kita akan testing untuk upload file, silahkan jalankan dulu local development server dengan perintah

Lalu akses dengan alamat URL :

Isi bagian form dengan file gambar, dan isi juga bagian keterangan, lalu klik tombol Upload, setelah proses upload anda akan dibawah ke dalam halaman localhost:8080/berkas

tampilannya masih kosong karena kita belum mengatur tampilannya sama sekali

Berikutnya kita akan membuat tampilan daftar berkas yang diupload.


 

 

Membuat Daftar Berkas Upload

Berikutnya kita akan membuat halaman daftar upload, silahkan buka file controller Berkas.php di folder app/Controllers

Lalu ubah method index menjadi seperti berikut ini :

Keterangan :

  • Line 3 kita buat object dengan nama $berkas menggunakan class BerkasModel
  • Line 4 kita gunakan method findAll didalam object $berkas untuk mendapatkan seluruh data pada tabel berkas, dan hasilnya kita simpan dalam array $data pada key berkas
  • Line 5 kita mengakses view dengan nama view_berkas, dan kita passing variabel $data yang berisi seluruh data pada tabel berkas

 

Berikutnya kita buat file view dengan nama view_berkas.php dan kita simpan di folder app/views

Untuk codenya adalah sebagai berikut :

Keterangan :

  • Codenya cukup panjang, tidak perlu temen – temen ketahui keseluruhannya karena kita gunakan tampilan dengan Bootstrap 5 beberapa bagian line code saja yang perlu temen – temen pahami.
  • Line 17 – 21 kita buat pengecekan session flashdata dengan nama success, jika session tersebut ada maka akan menampilkan notifikasi “upload berkas berhasil“, session flashdata ini dibuat saat kita upload berkas di controller Berkas
  • Berikutnya kita buat tombol untuk mengakses form upload berkas (Line 22) kita gunakan tag <a> jika tombol di klik akan diarahkan ke url localhost:8080/berkas/create yang artinya akan mengakses controller berkas pada method create
  • Berikutnya kita buat tabel untuk menampilkan datanya Line 24 – 48
  • Untuk header tabel ada pada line 25 – 32
  • Line 36 kita extract variabel $berkas dengan menggunakan perintah perulangan foreach, dan disetiap perulangan akan diwakili variabel $row
  • Line 39 kita tampilkan penomeran untuk datanya
  • Line 40 kita tampilakan gambar dengan menggunakan tag <img> untuk value attribute src kita arahkan pada direktori base_url/uploads dimana direktori ini adalah direktori tempat menyimpan hasil berkas.. dan untuk nama filenya karena disimpan di kolom berkas sehingga kita gunakan perintah $row->berkas
  • Line 41 kita tampilkan data keterangan, kita panggil dengan perintah $row->keterangan
  • Line 42 kita buat tombol download berkas yang mengakses ke url base_url/berkas/download dan mengirimkan parameter berupa data pada kolom id_berkas

 

 

Membuat Method untuk kebutuhan download berkas

Berikutnya kita akan buat method untuk handling kebutuhan download berkas, pada controller Berkas.php kita buat method dengan nama download, buka file app/Controllers/Berkas.php tambahkan codenya seperti berikut ini :

Keterangan :

  • Line 1 kita buat method dengan nama download dengan 1 parameter yaitu variabel $id yang berisi id_berkas yang ingin didownload
  • Line 3 kita buat object dengan nama $berkas menggunakan class BerkasModel
  • Line 4 kita gunakan method find untuk mencari data berkas berdasarkan primary key, dengan parameternya adalah variabel $id, hasil data kita simpan pada variabel $data
  • Line 5 kita gunakan perintah $this->response->download() didalam method download ada 2 paramater :
    • Parameter pertama kita tulis nama file yang ingin didownload sertai direktori tempat menyimpan file tersebut, karena itu kita tuliskan uploads/berkas yang merupakan direktori tempat menyimpan file tersebut, dan kita tuliskan nama file berkasnya, karena nama berkasnya kita simpan pada kolom berkas sehingga perintahnya $data->berkas
    • Parameter kedua kita isikan dengan nilai null

 

Untuk teman – teman yang mau download souce code, silahkan download di Github

 

Jadi kurang lebih seperti itu ya teman – teman tutorial kali ini, kita sudah belajar untuk membuat fitur upload dan download file di Codeigniter 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial Codeigniter 4 selanjutnya

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *