CodeIgniter : Upload Image dan Cara membuatnya

Selamat pagi semuanya, pada kesempatan kali ini saya akan share tentang cara membuat upload image dan menyimpan namanya di dalam database sehingga nanti proses pengambilan datanya mudah.
Buat kalian yang masih bingung, kita akan buat apa silakan lihat screen shoot dibawah ini:
CodeIgniter Image Upload

CodeIgniter Image Upload

oke langsung saja silakan kalian ikuti tutorialnya:
1# Siapkan file codeigniternya dan silakan copy ke folder htdocs kalian masing-masing.

2# Di dalam folder codeigniter tersebut (root folder) buatlah folder bernama "uploads". contohnya seperti screenshoot dibawah ini.

3# Sekarang kalian silakan masukkan framework css nya, pada tutorial ini saya menggunakan materialize. Tidak harus terpaku dengan punya kalian, bagi kalian yang ingin memakai CSS sendiri enggak apa-apa.

4# Setting CodeIgniternya seperti autoload, config, dan database. Saya anggap kalian sudah mengerti karena tutorial ini sudah tingkat lanjut bukan di tingkat dasar. Kalau kalian belum paham silakan pelajari cara instalasi CodeIgniter.

5# Buat database bebas, pada tutorial ini nama database saya balidev dan nama tabelnya upload. Untuk setting fieldnya silakan lihan di gambar bawah ini.
CodeIgniter Image Upoad

6# Langkah selanjutnya buka folder controllers dan buatlah file dengan nama upload.php, sintaksnya seperti dibawah ini:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class upload extends CI_Controller {

 public function __construct()
 {
  parent::__construct();
  $this->load->model('mupload');
  $this->load->library('form_validation');
 }

 public function index()
 {
  $this->load->view('vupload');
 }
 public function list(){
  $result['gambar'] = $this->mupload->tampil();
  $this->load->view('vimage', $result);
 }

 public function upload(){
  //berfungsi saat submit ditekan namun file kosong supaya tidak masuk ke database
  if (empty($_FILES['imgName']['name']))
   {
       $this->form_validation->set_rules('imgName', 'Document', 'required');
       redirect(base_url());
   }
  else{
  $this->load->library('upload');
  $namafile = "file_".time();
  //konfigurasi ukuran dan type yang bisa di upload
  $config = array(
  'upload_path' => "./uploads/", //mengatur lokasi penyimpanan gambar
  'allowed_types' => "gif|jpg|png|jpeg|pdf", // mengatur type yang boleh disimpan
  'overwrite' => TRUE,
  'max_size' => "2048000",//maksimal ukuran file yang bisa diupload, disini menggunankan 2MB
  'max_height' => "768",
  'max_width' => "1024",
  'file_name' => $namafile //nama file yang akan terimpan nanti 
  );

  $this->upload->initialize($config);
  if($_FILES['imgName']['name']){
   if($this->upload->do_upload('imgName')){
    $gambar =  $this->upload->data();
    //data yang akan di insert ke database
    $data = array(
     'nama' => $gambar['file_name'],
     'type' => $gambar['file_type']
     );
    $result = $this->mupload->insert($data);
    if($result != FALSE){
     $pesan['pesan'] = "Gambar Berhasil di upload";
     $this->load->view('vupload', $pesan);
    }
   }
  }

 }
}
}


/* End of file upload.php */
/* Location: ./application/controllers/upload.php */

Sudah saya kasi komentar pada code-codenya silakan baca pelan-pelan.

7# Pada langkah ini buka folder models dan buatlah file dengan nama mupload.php dan sintaksnya seperti dibawah ini :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mupload extends CI_Model {

 public $variable;

 public function __construct()
 {
  parent::__construct();
  
 }
 public function insert($data){
  //memasukkan data gambar ke database
  $this->db->insert('upload', $data);
  if ($this->db->affected_rows() > 0) {
   return true;
  }else{
   return false;
  }  
 }

 public function tampil(){
  //mengambil data gambar di database, nanti kita cuma mengambil namanya saja
  $this->db->select('*');
  $this->db->from('upload');
  $query = $this->db->get();
  if($query->num_rows()>0){
   return $query->result();
  }else{
   $pesan = "Tidak ditemukan gambar";
   return $pesan;
  }
 }

}

/* End of file mupload.php */
/* Location: ./application/models/mupload.php */

8# Langkah selanjutnya kita akan buatkan form untuk upload filenya pada views. Silakan buka folder views dan buatlah file dengan nama vupload.php. Sintaksnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
 <title>Upload Image by BaliDev</title>
 <!--Materialize css dan javascript -->
 <link href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css" rel="stylesheet">
 <link href="<?php echo base_url();?>/assets/materialize/css/materialize.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

</head>
<body> 
<!--Navbar Materialize -->
 <nav>
     <div class="nav-wrapper">
       <a href="#" class="brand-logo">BaliDev</a>
       <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li><a href="<?php echo site_url('upload/list')?>">Lihat</a></li>
       </ul>
     </div>
   </nav>
 <div class="container">

  <div class="row" style="margin-top: 120px">
   <div class="col s12 m8 offset-m2 l6 offset-l3">
    <div class="card-panel">
    <?php if(isset($pesan)){
      echo "<h5>$pesan</h5>";
     }?>
      <div class="row valign-wrapper">
               <div class="col s12">
                <?php
                 echo form_open_multipart('upload/upload');?>
                 <div class='file-field input-field'>
                  <div class="btn orange">
                <span>FILE</span>
                <input type="file" name="imgName">
             </div>
                   <div class="file-path-wrapper">
                <input class="file-path validate" type="text" name="imgName">
             </div>
             </br>
           </div>
           <div class="row center-align">
              <input type="submit" value="submit" class="btn orange">
         </div>
         <?php form_close(); ?>
               </div>
              </div>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Disini yang perlu kalian perhatikan adalah type dan name nya supaya mudah nanti kita mengambilnya pada controller.

9# Jika proses inputnya sudah selesai, sekarang kita akan membuat tampilan semua gambar yang sudah kita input. Masih di folder views dan buatlah file dengan nama vimage.php. Sintaksnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>

 <title>List Gambar</title>
 <!--Materialize css dan javascript -->
 <link href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css" rel="stylesheet">
 <link href="<?php echo base_url();?>/assets/materialize/css/materialize.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
</head>
<body>
 <!--Navbar Materialize -->
 <nav>
     <div class="nav-wrapper">
       <a href="#" class="brand-logo">BaliDev</a>
       <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li><a href="<?php echo site_url()?>">Upload Gambar</a></li>
       </ul>
     </div>
   </nav>

   <!-- semua thumbnail gambar dari database ditampilkan -->
   <div class="container">
     <div class="row">
     
      <?php 
              foreach ($gambar as $gmbr) {
           echo "<div class='col s3'>";
           echo "<div class='card'>";
             echo "<div class='card-image'>";
            echo img('http://localhost/uploadImage/uploads/'.$gmbr->nama);
             echo "</div>"; 
         echo "</div>";
             echo "</div>";  
              }
             ?>
           
       </div>
      </div>
</body>
</html>

Pada sintaks diatas yang perlu kalian pahami adalah pada sintaks foreach dan img nya. Silakan liha bagaimana saya menampilkan gambar tersebut pada url img nya. Untuk tampilannya bisa kalian custom sendiri.
Bagi kalian yang ingin mencoba langsung silakan download dibawah ini:
Download      Download Download

Sekian tutorialnya, semoga bermanfaat buat kalian semua.
Jangan lupa, baca artikel lainnya:

Artikel Terkait

15 komentar

Kok saya baru tau, ya ada yang namanya BaliDev ini?

Komentar ini telah dihapus oleh pengarang.

nice gan ..
terus berkarya .. :v

do_uploadnya ndak bisa baca variable bro... mohon pencerahan

Sudah load library upload bro?

img('localhost/...../'.$gmbr->nama)
ketika saya coba muncul pesan "Call undefined function img()"
bagaimana ya mengatasi tsb? terimakasih

Terimakasih Infonya Bosku

Mau Tanya "imgName" itu dapat darimana iya ?

Aktifkan dulu autoload helper untuk html tag

Bebas itu mas asalkan nanti manggilnya di controller dengan nama yg sama. Sama seperti tag input biasa, harus kita kasi name terlebih dahulu

Terimakasih infonya gan
sangat membantu

apakah ada settingan di folder System/libraries/upload.php pada codeigniternya

terimakasih

Ngggak ada mas, itu file bawaan sebaiknya jangan di ubek2, yang penting dalam upload file yakni tipe form harus multipart sama load library upload di controller


EmoticonEmoticon