Tutorial Codeigniter Part 15, Membuat Fitur Multiple Upload di Codeigniter

Selamat datang di warungbelajar, dalam tutorial ini kita akan melanjutkan pembahasan dari seri tutorial codeigniter, pada part 15 kita akan belajar membut fitur multiple upload di codeigniter.

Tutorial ini memiliki konsep yang hampir sama dengan tutorial kita sebelumnya terkait cara upload dan download tutorial di codeigniter, hanya saja kita akan modifikasi sedikit skripnya agar dapat memproses upload dengan file lebih dari satu.

dalam tutorial ini kita juga akan menyimpan informasi file yang diupload kedalam database, sehingga kita akan membuat databasenya juga, baik langkah – langkahnya adalah sebagai berikut :

 

Persiapan Project

Kita buat project codeigniter terlebih dahulu… dalam contoh ini folder projectnya kita beri nama multiupload, untuk proses instalasi dari codeigniter, bisa anda lihat di tutorial kita sebelumnya : Cara Menginstall Framework Codeigniter

 

Buat Database

Karena nantinya kita akan membuat fitur upload dan download, dimana nama berkasnya akan kita simpan didatabase, sehingga kita perlu membuat databasenya.. dalam contoh ini kita buat databasenya dengan nama multiupload_db.

dalam database itu kita buat sebuah tabel dengan nama tb_berkas, dimana kolomnya adalah sebagai berikut :

  1. kd_berkas (int) – Primary Key – Auto Increment
  2. nama_berkas (varchar 255)
  3. keterangan_berkas (varchar 255)
  4. tipe_berkas (varchar 100)
  5. ukuran_berkas (float)

Untuk memudahkan teman – teman, bisa menggunakan code SQL dibawah ini :

 

Setting Database di Codeigniter

Silahkan buka file application/config/database.php, untuk bagian $db[‘default’] rubah menjadi seperti berikut :

Keterangan :

  • Bagian host menjadi localhost
  • Bagian username kita set menjadi root (setting default dari xampp)
  • Bagian password kita set kosong (setting default dari xampp)
  • Bagian database kita set dengan nama databasenya yaitu multiupload_db
  • Bagian dbdriver kita gunakan mysqli

 

Load Library yang dibutuhkan

Kita akan tuliskan beberapa perintah untuk load library dan helper, silahkan bukan file application/config/autoload.php

tambahkan bagian libraries dengan library database

tambahkan bagian helper dengan helper url dan download

 

Setting bagian base_url

Berikutnya kita harus set bagian base url, buka file application/config/config.php

kita set bagian base_url, dalam contoh ini karena project kita berada pada folder multiupload, sehingga pada bagian base_url kita tuliskan seperti dibawah ini, nanti bisa teman – teman sesuaikan dengan project punya teman – teman ya.

 

Buat Folder dengan nama uploads di project codeigniter

Kita perlu membuat folder yang digunakan untuk menyimpan berkas yang diupload, dalam contoh ini kita buat folder dengan nama uploads didalam folder project codeigniternya, untuk nama folder ini bisa disesuaikan dengan yang teman – teman inginkan, jadi tidak harus uploads.

 

Membuat Controller Upload

Berikutnya kita buat controller dengan nama Upload.php, posisi dari controller berada pada folder application/controllers.

Dalam Controller Upload, kita buat class Upload, dan kita buat function dengan nama create.

pada function create ini kita akan load view, dengan nama form_upload.php yang akan berisi form untuk mengupload berkas.

sehingga kurang lebih seperti berikut ini isi dari file Controller Upload.php :

Keterangan :

dengan perintah diatas, maka ketika function create diakses maka akan menampilkan file view dengan nama form_upload.

 

Buat file view form_upload.php

Berikutnya kita buat file view dengan nama form_upload.php, untuk kodenya adalah sebagai berikut :

untuk mengaksesnya kita menggunakan alamat : localhost/multiupload/index.php/upload/create

Keterangan :

Dalam view ini kita buat form dengan 4 inputan dengan type file, dan 4 textarea

dimana untuk inputan file kita beri value pada attribute name adalah berkas[] , dan untuk textarea value pada attribute name adalah keterangan_berkas[]

dimana kalau kita melihat terdapat tambahan karakter [] pada bagian value name, hal tersebut agar bagian name nantinya akan terbaca sebagai array, karena inputannya lebih dari satu, dan menggunakan 1 nama yang sama yaitu untuk inputan file adalah berkas, dan textarea adalah keterangan_berkas

hal ini akan memudahkan nantinya dalam penangkapan inputan dibagian controller saat form di proses.

 

Membuat Function Proses di Controller Upload

Berikutnya kita buat function proses yang digunakan untuk memproses inputan dari bagian form upload, kurang lebih codenya adalah seperti ini :

 

Keterangan :

Line 11 kita buat method proses, untuk memproses inputan form

Untuk proses upload, kita perlu membuat konfigurasi dari bagian upload, dalam contoh ini kita gunakan variabel $config, beberapa settingannya adalah sebagai berikut :

artinya untuk folder tempat menyimpan file hasil upload adalah folder uploads, folder uploads yang sebelumnya telah kita buat

 

artinya untuk file extention yang di perbolehkan untuk diupload adalah gif, jpg,dan png

 

artinya maksimal ukuran file yang boleh diupload adalah 500 Kb

 

artinya untuk ukuran lebar dari file adalah 2048 px, berlaku jika kita upload file gambar

 

artinya untuk ukuran tinggi dari file adalah 1000 px, berlaku jika kita upload file gambar

 

digunakan untuk memberikan nama file yang diupload, menjadi acak, sehingga membuat nama file 1 dan yang lain tidak mungkin akan sama.

 

Berikutnya kita setting konfigurasi ini kedalam library upload (Line 19).

 

Line 20 kita tuliskan perintah untuk menyimpan data hasil inputan dari bagian textarea dengan name keterangan_berkas, variabel $keterangan_berkas akan berisi array, karena kita memiliki beberapa inputan textarea yang memiliki value name keterangan_berkas.

 

Line 21 kita menyimpan jumlah inputan file, pada variabel $jumlah_berkas.

 

Pada line 22 kita melakukan perulangan menggunakan perintah for, perulangan dilakukan sejumlah nilai yang ada pada variabel $jumlah_berkas, setiap kali perulangan akan dilakukan penambahan pada nilai pada variabel $i

 

Pada Line 24 setiap perulangan kita lakukan pengecekan, apakah berkas pada perulangan tersebut berisi file yang akan diupload, jika berisi file yang akan diupload akan menjalankan perintah pada line 26 – 40, yang secara sederhana akan dilakukan proses upload, ketika bagian inputan type file berisi file.

 

Pada Line 26 – 30 kita generate sebuah variabel dengan nama $_FILES, Variabel ini adalah sebuah array yang menampung data tentang filenya, untuk index dari array ini kita beri nama file.

ada beberapa index antara lain :

  • name adalah nama file yang diupload
  • type adalah jenis file yang diupload;
  • tmp_name adalah nama file yang berada dalam direktori temporary server
  • error akan menyimpan status apakah ada error atau tidak
  • size digunakan untuk menyimpan ukuran file yang diupload

nah setiap kali perulangan, variabel ini akan mendapatkan nilai dari variabel $_FILES[‘berkas’], dan index urutan sesuai nilai dari variabel $i, disini kita menuliskan index berkas karena value attribute name pada inputan file adalah berkas.

variabel $i adalah urutan dari inputan file yang bersifat multiple., sehingga setiap kali perulangan, variabel $_FILES[‘berkas’] akan berisi nilai yang berbeda, sesuai dengan posisi perulangannya disesuaikan dengan posisi inputan file di bagian form.

 

Line 32 berikutnya kita melakukan pengecekan upload file apakah berhasil, disini kita menggunakan name file karena sebelumnya kita sudah set informasinya berada pada variabel $_FILES[‘file’]

 

Line 34 kita buat sebuah variabel dengan nama $uploadData yang digunakan untuk menyimpan informasi file yang diupload

 

Line 35, kita buat variabel $data, variabel ini nantinya akan berisi data yang akan disimpan di tabel tb_berkas, untuk index menyesuaikan nama kolom di tabel tb_berkas, nah untuk nilainya diambil dari variabel $uploadData dengan index file_name, yang berisi nama file yang diupload, index name_berkas akan digunakan untuk mengisi kolom nama_berkas di tabel tb_berkas

 

Line 36 kita buat variabel $data dengan index keterangan_berkas, untuk index ini kita berikan nilai dari array $keterangan_berkas yang berisi inputan textarea dari form, kita menuliskan index  dengan variabel $i, sesuai perulangan, nilai variabel $data dengan index keterangan_berkas ini akan digunakan untuk nilai pada kolom keterangan_berkas di tabel tb_berkas

 

Line 37, kita buat variabel $data, untuk index tipe_berkas kita berikan nilai dari variabel $uploadData dari index file_ext, index tipe_berkas ini digunakan untuk nilai pada kolom tipe_berkas pada tabel tb_berkas

 

Line 38, kita buat variabel $data, untuk index ukuran_berkas kita berikan nilai dari variabel $uploadData dari index file_size, index ukuran_berkas ini digunakan untuk nilai pada kolom ukuran_berkas pada tabel tb_berkas

 

Line 39 kita tuliskan perintah untuk insert data ke dalam tabel tb_berkas, dengan nilai yang ada pada array data.

 

Line 44 kita tuliskan perintah untuk redirect controller upload, ketika proses perulangan dan proses upload file selesai.

 

Menampilkan Data File yang diupload

Berikutnya masih didalam controller Upload, kita menambahkan function index, yang nantinya digunakan untuk menampilkan view dengan nama tampil_berkas, dimana dalam view ini kita akan menampilkan data dari tabel tb_berkas.

Jadi kurang lebih untuk controller Upload seperti gambar diatas, kita menambahkan function index dari line 47 – 51.

Keterangan :

  • Line 3 kita buat array variabel $data, dengan elemen berkas dimana kita akan mengisikan data record dari tabel tb_berkas.
  • Line 4 kita load view dengan nama tampil_berkas dengan passing data variabel $data, yang berisi data dari tabel tb_berkas.

 

Buat View dengan tampil_berkas

Berikutnya kita buat view dengan nama tampil_berkas, untuk codenya adalah seperti berikut :

Keterangan :

Line 8 kita buat link untuk mengakses function create pada controller upload.

 

Line 19 kita buat perulangan untuk extract data dari variabel $berkas yang telah berisi data dari tabel tb_berkas, dan setiap perulangannya diwakili dengan variabel $row.

 

Line 23 kita buat perintah untuk memberikan nomor pada datanya

 

Line 24 kita tampilankan gambar dengan tag <img> di HTML, untuk attribute src kita ambil value dengan menuliskan nama berkas dari nilai kolom nama_berkas pada tabel tb_berkas sebagai nama gambar file gambar didalam folder uploads.

 

Line 25 kita gunakan untuk menampilkan keterangan atas berkas, mengambil nilai dari kolom keterangan_berkas, pada tabel tb_berkas

 

Line 26 kita buat kita tuliskan perintah untuk membuat link untuk mengakses function download didalam controller upload, dengan menyertakan nilai pada kolom kd_berkas dari masing – masing berkas.

Berikutnya kita buat function download yang digunakan untuk membuat fitur download dari berkas.

 

Buat Function Download pada controller Upload

Berikutnya kita buat function download didalam Controller Upload, sehingga untuk controller Upload menjadi seperti berikut ini :

Keterangan :

Kita Menambahkan function download di line 54 – 58

Pada function download kita menyertakan variabel $id sebagai parameter, variabel $id berisi nilai dari kd_berkas, dari berkas yang akan didownload

 

Line 56 kita membuat variabel $data untuk menyimpan record hasil query pada tabel tb_berkas dengan kd_berkas sesuai dengan nilai dari variabel $id

 

Line  57 kita gunakan perintah force_download untuk melakukan proses download, function force_download adalah perintah bawaan dari codeigniter yang diperuntukkan untuk download file, untuk dapat menggunakan function force_download anda diharuskan load helper ‘download

pada function force_download terdapat 2 parameter yang dapat diisi yaitu :

  1. nama file yang akan didownload, nama file disini harus dilengkapi dengan lokasi dari filenya
  2. nama file yang akan diberikan saat proses download dilakukan.

nah dalam contoh ini, kita mengisikan nilai pada paremeter pertama, dengan nama berkas yang akan didownload, nama berkas disini kita ambil dari nilai kolom nama_berkas dari tabel tb_berkas, tidak hanya itu kita juga menyertakan direktori dari tempat menyimpan berkas itu, yaitu pada folder uploads.

Pada parementer 2 kita berikan nilai NULL, karena kita akan memberikan nama pada file ini sesuai nama berkas yang terupload.

 

Testing Proses Upload

Untuk mencoba proses upload, gunakan alamat : http://localhost/multiupload/index.php/upload/create

dalam contoh ini kita upload file pada file 1,2,3 dan juga menyertakan keterangan

contohnya kita isikan berkas 1, 2, dan 3 disertai dengan keterangan, lalu kita klik simpan.

maka otomatis akan di redirect ke method index di controller upload, untuk menampilkan daftar berkas yang terupload.

 

Baik sekian dulu teman – teman pembahasan cara membuat fitur download & upload di framework codeigniter, jika ada yang ingin didiskusikan silahkan di kolom komentar.

Untuk teman teman yang ingin download source hasil belajar bisa klik disini : Source Code

 

 

 

DVD TUTORIAL BELAJAR FRAMEWORK CODEIGNITER