Tutorial Cara Membuat Upload File Dengan Codeigniter PHP (Insert and Update)

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.

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 :

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 :

<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); 
}

Rekomendasi Artikel : Cara Upload File Dengan Ajax (Upload file tertanpa reload)

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 :

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.

Obeedh Ashoy

May 4, 2020 at 11:12 PM

maaf gan mau tanya,, saya udah ngikutin langkah2 diatas. untuk nama file nya udah masuk di database nya, tapi kenapa filenya tidak masuk ke folder tujuannya ya?
Pradana

May 5, 2020 at 7:31 AM

1. Cek apakah folder tujuan yang anda buat sudah memiliki permission RWX, klo di Linux biasanya foldernya diberi permission dulu. Ex : CHMOD -R 777 nama/directory anda.

2. Pastikan pada atribut form terdapat enctype="multipart/form-data".
Obeedh Ashoy

May 5, 2020 at 7:56 PM

maaf gan,, yang nomer 2 udah dicoba masih sama hasilnya... kalo yang nomer 1 ndak paham maksudnya, terlebih saya juga bukan pengguna Linux
minions

May 5, 2020 at 10:26 PM

Coba anda cek terlebih dahulu apakah file benar benar terbaca dengan menjalankan perintah print_r($_FILES["userfile"]["name"]);die; dan anda dapat melihat lagi repository di github agar mudah dlm mengatasi masalah. link : https://github.com/aldipraddana/CI-Inponow/blob/master/application/controllers/C_inponow.php

jika tidak kontak kami di gibranaldi912@gmail.com
Terimakasih.
Dhandy

June 8, 2020 at 9:30 PM

permisi gan mau tanya disitu kan ada pemanggilan function getDataById, itu diambil di model, untuk code nya gimana ya?
1. minions
  
  June 10, 2020 at 5:14 AM
  
  hello Dhandy, ini berada di model :
  public function getDataById($id)
  {
  return $this->db->get_where('tabel_inponow', ['id' => $id])->row_array();
  }
  
  untuk lebih lengkap mengenai source code tuturial ini, anda dapat melihat di repositori di github saya.
  
  https://github.com/aldipraddana/CI-Inponow/blob/master/application/models/M_inponow.php
F3

November 1, 2020 at 1:52 AM

kalau saya mau datanya yang dicatat bukan path nya tapi nama filenya ganti dimananya ya mas ?
1. TMv
  
  December 30, 2020 at 5:45 AM
  
  pada script $pet = $config['upload_path'].$config['file_name']; anda cukup mengganti $config['upload_path'] menjadi nama file yang anda inginkan. contoh $pet = 'custom_nama_file_anda'.$config['file_name'];
reonaldi

December 25, 2020 at 9:25 PM

bagaimana caranya agar gambar di edit...di foldernya juga bisa terganti ya kak?
1. TMv
  
  December 30, 2020 at 5:42 AM
  
  bagaimana caranya agar gambar di edit => jawaban ini berada di function updateData. di foldernya juga bisa terganti ya kak? => jika menginginkan menimpafile anda perlu menambahkan $config['overwrite'] = true; pada function updateData.
Berbakat

February 9, 2022 at 5:56 PM

terimakasih untuk tutorilnya, bisa buat belajar ngoding bagi pemula

Jasa Pengiriman Barang
yuslan

October 3, 2022 at 1:16 AM

bagimana untuk menampilkan ukuran file gambar ?

Tutorial Membuat Upload File Dengan Codeigniter PHP (Insert and Update)

Pembuatan Tampilan di View tambahdata.php Codeigniter

Pembuatan Script Upload File di Controller C_inponow Codeigniter

Pembuatan Query Upload File ( insert ) di Model M_inponow Codeigniter

Membuat Fitur Update Input Type File di Framework Codeigniter

Membuat Query Update Pada Input Tipe File di Framework Codeigniter

12 comments