Tutorial Cara Membuat Upload File Dengan Codeigniter PHP (Insert and Update) – Kali ini saya akan membahas mengenai tutorial pemrograman php dengan menggunakan framework codeigniter. Bagi anda yang ingin membaca tutorial sebelumnya yaitu membuat CRUD dengan codeigniter.
Karena saya akan melakukan percobaan Tutorial Membuat Upload File Dengan Codeigniter Php ( And Update) ini di project CI-inponow yang sebelumnya telah saya buat. Jadi saya melanjutkan dari tutorial yang pernah ada sebelumnya.
Tutorial Membuat Upload File Dengan Codeigniter PHP (Insert and Update)
Disini yang diperhatikan ada dua komponen yaitu, yang pertama dengan menambahkan script atribut ( enctype="multipart/form-data" ) di form. Atribut enctype yang berfungsi untuk memberikan intruksi pada php bahwa form ini berupa form untuk mengupload file.
Dan kedua adalah input bertype file itu sendiri. Untuk melakukan inputan berupa file baik bertipe jpg, png, pdf dan dll, tapi kali ini saya akan menggunakan file bertipe png. Dan anda dapat menyesuaikan sesuaikan kebutuhan anda.
Baiklah saya akan jelaskan sedikit mengenai script upload file di atas. Pertama pada konfigurasi “ upload_path ” berguna sebagai folder tempat dimana file yang di upload diletakakan. Kemudian “ allowed_types ” berguna untuk menentukan jenis file apa saya yang dibolehkan untuk di upload. “ file_name ” berguna untuk menamai file yang akan di upload.
Baca Juga : Tutorial Cara Mengirim Email Dengan Codeigniter
Disana saya menambahkan variabel now sebagai format tanggal bulan hari jam menit detik yang terbaru. Jadi saat melakukan upload file. File akan secara otomatis mengubah nama file tsb menjadi urutan tanggal contohnya ( 2019-08-13-20-28-43.png ).
Kemudian terdapat variable pet berfungsi untuk menggabungkan file location folder dan nama file itusendiri contohnya ( ./assets/upload_img/2019-08-13-20-28-43.png ).
Pada bagian ( $config['max_size'] = 0; ) saya setting 0 karena saya tidak membatasi file yang akan di upload. Jadi jika kalian ingin membatasi file yang akan di upload anda dapat mensettingnya dari script tersebut.
Ada juga script yang saya noaktifkan yaitu ( $config['max_width'] = 1024; ) dan ($config['max_height'] = 768; ). Kedua script berguna untuk menbatasi lebar maksimal dan panjang maksimal pada file yang akan di upload.
Sebelum itu kita perlu tambahkan kolom baru di database dengan nama path. Yang nantinya kolom tersebut akan digunakan sebagai tempat penyimpanan nama file location yang telah di upload. Berikut contohnya :
Untuk menampilkan file di view application\views\section\data.php kita cukup tambahkan th untuk judul dan td untuk mengisi bagian file tersebut (jika file bertype png atau jpg). Untuk memanggilnya cukup memanggil colom path di database. Berikut ini contoh lengkapnya :
Jangan lupa untuk menambahkan atribut enctype="multipart/form-data" pada form update anda okee. Kemudian kita pindah ke file controller ( C_inponow ). Saya akan gunakan function controller yang pernah saya buat sebelumnya yaitu updatedata().
Dalam function controller tersebut saya cukup menambahkan script untuk update form yang bertipe file. Perlu diperhatikan, dalam melakukan update data bertipe file saya membuat dua kondisi yaitu, pertama ketika file ada akan melakukan update file yang lama ke file baru.
Karena saya akan melakukan percobaan Tutorial Membuat Upload File Dengan Codeigniter Php ( And Update) ini di project CI-inponow yang sebelumnya telah saya buat. Jadi saya melanjutkan dari tutorial yang pernah ada sebelumnya.
Pembuatan Tampilan di View tambahdata.php Codeigniter
Saya akan membuat tampilan untuk melakukan upload file di view application\views\section\tambahdata.php dan saya menggunakan framework bootstrap untuk mempercepat proses pembuatan viewnya. Berikut source codenya :<div class="card-body">
<form class="" action="" method="post" enctype="multipart/form-data">
<div class="form-group"> <label for="nama">Nama</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Your Name" name="nama">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!-- upload file area -->
<div class="form-group">
<label for="image">File Photo Upload</label>
<input class="form-control" style="padding:3px;" type="file" name="userfile" size="20" />
</div>
<!-- end upload file area -->
<div class="form-group">
<label for="no_induk">No Induk</label>
<input type="text" class="form-control" id="ininumber" placeholder="f23xxx" name="no_induk" onchange="ubahaja()">
</div>
<div class="form-group">
<label for="seksi">Jurusan</label>
<select class="form-control" id="seksi" name="seksi">
<option>Teknik Mesin</option>
<option>Teknik Komputer</option>
<option>Akutansi</option>
<option>Teknik Gambar Bangunan</option>
</select>
</div>
<button type="submit" name="add" class="btn btn-primary"> Add Data</button>
</form>
</div>
Tutorial Membuat Upload File Dengan Codeigniter PHP (Insert and Update)
Disini yang diperhatikan ada dua komponen yaitu, yang pertama dengan menambahkan script atribut ( enctype="multipart/form-data" ) di form. Atribut enctype yang berfungsi untuk memberikan intruksi pada php bahwa form ini berupa form untuk mengupload file.
Dan kedua adalah input bertype file itu sendiri. Untuk melakukan inputan berupa file baik bertipe jpg, png, pdf dan dll, tapi kali ini saya akan menggunakan file bertipe png. Dan anda dapat menyesuaikan sesuaikan kebutuhan anda.
Pembuatan Script Upload File di Controller C_inponow Codeigniter
Sekarang kita pindah ke folder application\controllers\C_inponow.php dan kita tambahkan script upload file pada function tambahdata() di controller yang pernah saya buat sebelumnya. Dan berikut merupakan scriptnya :public function tambahdata() {
$data['judul'] ='Form Tambah Data Siswa';
$this->form_validation->set_rules('nama', 'Nama', 'required');
$this->form_validation->set_rules('no_induk', 'No Induk', 'required');
if ($this->form_validation->run() == FALSE ) {
$this->load->view('template/header', $data);
$this->load->view('section/tambahdata');
$this->load->view('template/footer');
} else {
// upload area
$config['upload_path'] = './assets/upload_img/';
$config['allowed_types'] = 'gif|jpg|png';
$now = date('Y-m-d-H-i-s');
$config['file_name'] = $now.'.png';
$config['max_size'] = 0;
// $config['max_width'] = 1024;
// $config['max_height'] = 768;
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ( ! $this->upload->do_upload('userfile')) {
$error = array('error' => $this->upload->display_errors());
print_r($error);
} else {
$data = array('upload_data' => $this->upload->data());
}
$pet = $config['upload_path'].$config['file_name'];
// print_r($pet);
// exit;
//end upload file area
$data = [
"nama" => $this->input->post('nama', true),
"no_induk" => $this->input->post('no_induk', true),
"jurusan" => $this->input->post('seksi', true),
"path" => $pet
];
$this->M_inponow->tambahData($data);
$this->session->set_flashdata('flash', 'Ditambah');
redirect('tampildata');
}
}
Baiklah saya akan jelaskan sedikit mengenai script upload file di atas. Pertama pada konfigurasi “ upload_path ” berguna sebagai folder tempat dimana file yang di upload diletakakan. Kemudian “ allowed_types ” berguna untuk menentukan jenis file apa saya yang dibolehkan untuk di upload. “ file_name ” berguna untuk menamai file yang akan di upload.
Baca Juga : Tutorial Cara Mengirim Email Dengan Codeigniter
Disana saya menambahkan variabel now sebagai format tanggal bulan hari jam menit detik yang terbaru. Jadi saat melakukan upload file. File akan secara otomatis mengubah nama file tsb menjadi urutan tanggal contohnya ( 2019-08-13-20-28-43.png ).
Kemudian terdapat variable pet berfungsi untuk menggabungkan file location folder dan nama file itusendiri contohnya ( ./assets/upload_img/2019-08-13-20-28-43.png ).
Pada bagian ( $config['max_size'] = 0; ) saya setting 0 karena saya tidak membatasi file yang akan di upload. Jadi jika kalian ingin membatasi file yang akan di upload anda dapat mensettingnya dari script tersebut.
Ada juga script yang saya noaktifkan yaitu ( $config['max_width'] = 1024; ) dan ($config['max_height'] = 768; ). Kedua script berguna untuk menbatasi lebar maksimal dan panjang maksimal pada file yang akan di upload.
Pembuatan Query Upload File ( insert ) di Model M_inponow Codeigniter
Ok karena ini merupakan query insert jadi kita akan menggunakan query yang telah ada sebelumnya yaitu : public function tambahData($data) {
$this->db->insert('tabel_inponow', $data);
}
Sebelum itu kita perlu tambahkan kolom baru di database dengan nama path. Yang nantinya kolom tersebut akan digunakan sebagai tempat penyimpanan nama file location yang telah di upload. Berikut contohnya :
<table class="table" style="text-align:center;">
<tr>
<th>Poto</th>
<th>Nama</th>
<th>No induk</th>
<th>Jurusan</th>
</tr>
<tr> <?php foreach ($siswa as $s) :?>
<!-- this is files area -->
<td> <img style="width:50%;" src="<?php echo $s['path'] ?>" alt=""> </td> <!-- end files area -->
<td><?= $s['nama']; ?></td>
<td> <?= $s['no_induk']; ?> </td>
<td><?= $s['jurusan']; ?></td>
<td style="width:30%;">
<input type="hidden" data="" name="id" id="id" value="<?= $s['id'] ?>">
<a class="btn btn-danger" onclick="return confirm('yakin data dihapus pak?')" href="<?php echo base_url('hapusData/').$s['id'] ?>">Hapus</a> <a
class="btn btn-primary" href="<?php echo base_url('updateData/').$s['id'] ?>">Edit</a>
</td>
</tr> <?php endforeach; ?>
</table>
Membuat Fitur Update Input Type File di Framework Codeigniter
Ok sebelumnya saya telah membuat fitur update dari data bertype text dan option. Pada kasus kali ini kita akan melakukan update dengan type file. Prinsipnya hampir sama dengan yang sebelum-sebelumnya. Kita mulai dengan membuat view di editdata.php yang scriptnya hampir mirip seperti di view ( tambahdata.php ). Dan berikut merupakan contoh script untuk form update file :<div class="form-group">
<div class="col-md-3">
<img style="width:100%;" src="<?php echo base_url($datanya['path']) ?>" alt="">
</div>
<label for="image">Update Photo</label>
<input class="form-control" style="padding:3px;" type="file" name="userfile" size="20" />
<input type="hidden" name="before_path" value="<?php echo $datanya['path'] ?>">
</div>
Jangan lupa untuk menambahkan atribut enctype="multipart/form-data" pada form update anda okee. Kemudian kita pindah ke file controller ( C_inponow ). Saya akan gunakan function controller yang pernah saya buat sebelumnya yaitu updatedata().
Dalam function controller tersebut saya cukup menambahkan script untuk update form yang bertipe file. Perlu diperhatikan, dalam melakukan update data bertipe file saya membuat dua kondisi yaitu, pertama ketika file ada akan melakukan update file yang lama ke file baru.
Kedua yaitu ketika file tidak ada ( atau file tidak di inputkan ) pada kondisi ini saya melakukan update data tapi dengan file yang telah ada sebelumnya. Dengan membuat 2 kondisi tersebut, ketika kita hanya perlu mengupdate form inputan nama (atau inputan selain file). Maka file akan tetap ada, dan berikut merupakan script updatenya.
public function updateData($id) {
$data['judul'] ='Form Edit Data';
$data['datanya'] = $this->M_inponow->getDataById($id);
$data['seksi'] = ['Teknik Mesin', 'Teknik Komputer', 'Akutansi', 'Teknik Gambar Bangunan'];
$this->form_validation->set_rules('no_induk', 'No Induk', 'required');
$this->form_validation->set_rules('nama', 'Nama', 'required');
if ($this->form_validation->run() == FALSE ) {
$this->load->view('template/header', $data);
$this->load->view('section/editdata', $data);
$this->load->view('template/footer');
} else {
//kondisi upload file
if ($_FILES["userfile"]["name"] !== '') {
$config['upload_path'] = './assets/upload_img/';
$config['allowed_types'] = 'gif|jpg|png';
$now = date('Y-m-d-H-i-s'); $config['file_name'] =
$now.'.png'; $config['max_size'] = 0;
// $config['max_width'] = 1024;
// $config['max_height'] = 768;
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ( ! $this->upload->do_upload('userfile')) {
$error = array('error' => $this->upload->display_errors());
print_r($error);
} else{
$data = array('upload_data' => $this->upload->data());
}
$pet = $config['upload_path'].$config['file_name'];
$data = [
"nama" => $this->input->post('nama', true),
"no_induk" => $this->input->post('no_induk', true),
"jurusan" => $this->input->post('seksi', true),
"path" => $pet ]; $this->M_inponow->setUpdatedata($id, $data);
$this->session->set_flashdata('flash','Diubah');
redirect('tampildata');
}else{
$data = [
"nama" => $this->input->post('nama', true),
"no_induk" => $this->input->post('no_induk', true), "
jurusan" => $this->input->post('seksi', true),
"path" => $this->input->post('before_path', true)
];
$this->M_inponow->setUpdatedata($id, $data);
$this->session->set_flashdata('flash', 'Diubah');
redirect('tampildata');
}
//end kondisi
}
}
Membuat Query Update Pada Input Tipe File di Framework Codeigniter
Saya gunakan juga update query yang telah saya buat sebelumnya. Yang terpenting adalah penamaan dalam kolom database jangan sampai keliru. Berikut merupakan contoh script query update.public function setUpdatedata($id, $data) {
$this->db->where('id', $id);
$this->db->update('tabel_inponow', $data);
}
Sebelumnya mohon maaf jika dalam penamaan variabel saya agak ngawur. Dan sekarang uji coba hasil codingan kalian. Jangan sungkan untuk bertanya di kolom komentar. Jika anda ingin mendapatkan hasil lengkap proyek saya diatas silahkan request di kolom komentar. Berikut ini merupakan hasil dari coding diatas :
Hiraukan kotak input kecil di bawah jurusan, lupa hapus wkwk. Ok jika anda ingin mendapatkan file source code lengkap anda dapat clone repositori saya di github yakni https://github.com/aldipraddana/CI-Inponow. Ok sekian untuk Tutorial Membuat Upload File Dengan Codeigniter PHP (Insert and Update) hari ini, kurang lebihnya saya mohon maaf dan semoga bermanfaat.
 |
| Hasil Akhir Coding |
Hiraukan kotak input kecil di bawah jurusan, lupa hapus wkwk. Ok jika anda ingin mendapatkan file source code lengkap anda dapat clone repositori saya di github yakni https://github.com/aldipraddana/CI-Inponow. Ok sekian untuk Tutorial Membuat Upload File Dengan Codeigniter PHP (Insert and Update) hari ini, kurang lebihnya saya mohon maaf dan semoga bermanfaat.