Senin, 30 April 2018

Membuat Input Data Codeigniter + Form Upload Gambar


Pada tutorial sebelumnya, kita sudah membuat view untuk membuat tampilan website seperti header, content, dan footer. Pada langkah kali ini kita akan membuat sebuah form untuk input data kedalam database, form yang akan kita buat akan kita tambahkan dengan form upload gambar sehingga kita tidak hanya belajar input data saja tetapi juga upload file kedalam project kita. Jika anda ingin belajar versi native dari tutorial ini bisa anda baca di :

Membuat Input Data Menggunakan Codeigniter

Sebelumnya kita masuk ke folder root project kita yakni di C:\xampp\htdocs\karyawan\, buatlah sebuah folder baru dengan nama gambar. Folder ini akan kita gunakan untuk menyimpan file gambar yang akan kita terima dari inputan file pada form yang akan kita buat nantinya. Setelah anda membuat folder tersebut, langkah selanjutnya adalah membuat function baru untuk membuat form tambah data.

Untuk membuatnya bukalah file controller Karyawan.php kemudian tambahkan beberapa baris kode didalam function construct. Anda bisa menambahkan kode berikut kedalam file Karyawan.php : 


Penjelasan sintaks diatas : 
  • $this->load->model('m_data') : kode ini berguna untuk meload model m_data yang akan kita buat setelah ini.
  • $this->load->helper('url') : kode ini berguna untuk meload helper url pada codeigniter
  • $this->load->library('form_validation') : salah satu function bawaan ci yang sangat berguna, kode tersebut berguna untuk meload library form_validation dimana library tersebut berfungsi untuk memvalidasi form sebelum diproses
Setelah anda menambahkan kode diatas, langkah selanjutnya yaitu membuat model untuk memproses inputan kedalam database. Untuk melakukannya sangat mudah, buat file baru bernama m_data.php didalam folder models, anda bisa menemukan folder models pada application/models. Setelah itu buka file m_data.php dan isikan sintaks dibawah ini kedalam file tersebut : 

m_data.php

Penjelasan sintaks diatas : 
  • M_data extends CI_Model : kita membuat model baru dengan nama M_data yang merupakan turunan dari kelas CI_Model
  • input_data($data,$table) : function untuk memasukan data kedalam database
  • jumlah_data($table) : function untuk menghitung total data dalam sebuah tabel yang ada di database
  • tampil_data($table, $number,$offset) : function untuk menampilkan data dengan membatasi jumlah data yang akan kita tampilkan
  • hapus_data($where,$table) : function untuk menghapus data dengan syarat tertentu, semisal where id_karyawan = n
  • single_data($where,$table) : function untuk menampilkan data berdasarkan syarat tertentu, semisal select * from karyawan where id_karyawan = n
  • update_data($where,$data,$table) : function untuk memperbarui data berdasarkan syarat tertentu, misanya update karyawan set nama='supardi' where id_karyawan = n
Setelah kita membuat model m_data, langkah selanjutnya adalah membuat form untuk menambahkan data karyawan. Sebelum membuat form, buka kembali controller Karyawan.php kita lalu tambahkan sintaks dibawah ini : 


function diatas adalah function untuk memanggil file header, tambah_karyawan, dan file footer yang akan kita jalankan melaui url nantinya. Setelah anda membuat function diatas, langkah berikutnya adalah membuat form tambah_karyawan. Caranya adalah, masuk kedalam folder application/views/karyawan kemudian buatlah sebuah file bernama tambah_karyawan.php. Setelah itu masukan sintaks dibawah kedalam file tersebut : 

tambah_karyawan.php

Penjelasan sintaks diatas : 
  • form_open_multipart('karyawan/inputKaryawan') : kode ini berguna untuk membuat form baru dengan inputan file didalamnya, selain itu form akan diproses melalui function bernama inputKaryawan
  • form_error() : fungsi untuk menampilkan error, dalam hal ini apabila form kosong akan muncul peringatan jika form tidak boleh kosong
Setelah membuat form untuk menambah karyawan, selanjutnya kita membuat function untuk memproses inputan data. Untuk membuatnya, pertama buka kembali file controller Karyawan.php, kemudian dibawah function tambahKaryawan isikan sintaks dibawah : 

inputKaryawan()

Untuk penjelasan sintaks sudah saya berikan komentar di setiap prosesnya sehingga tidak perlu saya tulis ulang disini ea mhanx.

Menguji Form Input Data

Setelah langkah-langkah diatas anda selesaikan, kini saatnya untuk menguji apakah form yang kita buat sudah bisa untuk menginput data. Cara untuk melakukannya adalah dengan mengakses url tambah karyawan di http://localhost/karyawan/index.php/karyawan/tambahKaryawan. Jika berhasil maka akan tampil seperti screenshot dibawah ini :


Saya isikan form seperti pada gambar diatas, ketika saya klik button tambah maka secara otomatis data akan masuk kedalam database dan file foto karyawan akan masuk kedalam folder gambar. Berikut screenshotnya : 


Sedangkan pada folder gambar di project kita bisa anda lihat pada screenshot dibawah : 


Untuk tutorial selanjutnya adalah cara untuk menampilkan data dari database ditambah fitur pagination. Semoga tutorial berjudul Membuat Input Data Codeigniter + Form Upload Gambar ini bisa bermanfaat bagi anda.

Related Posts

Membuat Input Data Codeigniter + Form Upload Gambar
4/ 5
Oleh