Kategori Random

Edit dan Hapus Foto Upload Codeigniter

Posted : 31 Oktober 2016 | 08:25:06 , Dibaca 1853 kali

Jumpa kembali dengan tutorial saya, kali ini saya akan membagikan tutorial mengenai edit foto dan hapus foto di codeigniter. Ini merupakan lanjutan dari tutorial mengenai upload foto, karna tingginya permintaan pembaca untuk membuat tutorial edit nya maka akan saya kabulkan pada tutorial ini :D. Jika belum baca artikel sebelumnya silakan dibaca pada Upload Image (Rename) CodeIgniter+Bootstrap dan Menyimpan ke Database, dan saya asumsikan untuk insert nya sudah dipahami dan kita lanjut untuk editnya.

1. Controller

Sisipkan code berikut pada controller upload.php setelah tag penutup ( } ) public function insert()

 /* untuk menangani edit gambar */
    public function edit(){
        $data['titel']='Form Edit Upload Codeigniter';
        $idgbr=$this->input->get('idgbr'); //mengambil variabel get idgbr dari url
        $where=array('id'=>$idgbr); //array where query untuk menampilkan gambar per id
        $data['row'] = $this->mupload->get_byimage($where);   //query dari model ambil per id

        //utk form edit nya, saya tambahkan sebuah view bernama feupload.php
        $this->load->view('feupload',$data);
    }

    //untuk menangani proses upload gambar yang di edit
    public function update(){

        $this->load->library('upload');// library dapat di load di fungsi , di autoload atau di construc nya tinggal pilih salah satunya
        $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time
        $path   = './assets/uploads/'; //path folder
        $config['upload_path'] = $path; //variabel path untuk config upload
        $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
        $config['max_size'] = '2048'; //maksimum besar file 2M
        $config['max_width']  = '1288'; //lebar maksimum 1288 px
        $config['max_height']  = '768'; //tinggi maksimu 768 px
        $config['file_name'] = $nmfile; //nama yang terupload nantinya

        $this->upload->initialize($config);

        $idgbr      = $this->input->post('kode'); /* variabel id gambar */
        $filelama   = $this->input->post('filelama'); /* variabel file gambar lama */

        if($_FILES['filefoto']['name'])
        {
            if ($this->upload->do_upload('filefoto'))
            {
                $gbr = $this->upload->data();
                $data = array(
                  'nm_gbr' =>$gbr['file_name'],
                  'tipe_gbr' =>$gbr['file_type'],
                  'ket_gbr' =>$this->input->post('textket')

                );

                @unlink($path.$filelama);//menghapus gambar lama, variabel dibawa dari form

                $where =array('id'=>$idgbr); //array where query sebagai identitas pada saat query dijalankan
                $this->mupload->get_update($data,$where); //akses model untuk menyimpan ke database

                $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-success\" id=\"alert\">Edit dan Upload gambar berhasil !!</div></div>"); //pesan yang muncul jika berhasil diupload pada session flashdata
                redirect('upload'); //jika berhasil maka akan ditampilkan view vupload

            }else{  /* jika upload gambar gagal maka akan menjalankan skrip ini */
                $er_upload=$this->upload->display_errors(); /* untuk melihat error uploadnya apa */
                //pesan yang muncul jika terdapat error dimasukkan pada session flashdata
                $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Gagal edit dan upload gambar !! ".$er_upload."</div></div>");
                redirect('upload/edit'); //jika gagal maka akan ditampilkan form upload
            }
        }else{ /* jika file foto tidak ada maka query yg dijalankan adalah skrip ini  */

            $data = array(
                'ket_gbr' =>$this->input->post('textket')
            );

            $where =array('id'=>$idgbr); //array where query sebagai identitas pada saat query dijalankan
            $this->mupload->get_update($data,$where); //akses model untuk menyimpan ke database

            $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Berhasil edit, Gambar tidak ada diupload !!</div></div>");
            redirect('upload'); /* jika berhasil maka akan kembali ke home upload */
        }
    }

    /* fungsi untuk menangani proses hapus */
    public function hapus(){
        /* variabel di deklarasikan */
        $idgbr  = $this->input->post('kode'); /* variabel id gambar */

        /* query menampilkan gambar dibuat dulu agar gambarnya dihapus sebelum dihapus dari database */
        $path= './assets/uploads/';
        $ardel  = array('id'=>$idgbr);
        $rowdel = $this->mupload->get_byimage($ardel);

        /* file gambar dihapus dari folder */
        @unlink($path.$rowdel->nm_gbr);

        /* query hapus dilanjutkan ke model get_delete */
        $this->mupload->get_delete($ardel); //karna array where querynya sama, maka saya langsung include saja $ardel

        $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Berhasil hapus data Gambar dan file gambar dari folder !!</div></div>");
        redirect('upload'); /* jika berhasil maka akan kembali ke home upload */
    }

pada skrip diatas fungsi edit, prosesupdate dan hapus telah saya buat.

2. Views

pada views vupload.php ganti dengan skrip berikut

<head>
    <title><?=$titel?></title> <!-- variabel diambil dari controller -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>
    body{
        margin:20px 10%;
    }
</style>
</head>
<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
<div class="panel panel-default">
  <div class="panel-heading"><b> Daftar File IMage</b></div>
  <div class="panel-body">
    
    <?=$this->session->flashdata('pesan')?>
    <p>
        <a href="<?=base_url()?>upload/add" class="btn btn-success">Tambah</a>
    </p>
  <table class="table table-bordered table-striped">
    <tr>
      <th style="width: 16%">Aksi</th>
      <th style="width: 20%">Keterangan File</th>
      <th>Tipe File</th>
      <th>Gambar File</th>
    </tr>
    <? if(empty($query)){ ?> <!-- jika data kosong kita tampilkan pesan -->
    <tr>
        <td colspan="3">Data tidak ada</td>
    </tr>
    <? }else{
    foreach($query as $rowdata){ ?> <!-- menampilkan data dari query dengan looping -->
    <tr>
      <td>
        <a href="<?=base_url()?>upload/edit/?idgbr=<?=$rowdata->id?>" class="btn btn-info"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
        <a href="<?=base_url()?>upload/hapus/?idgbr=<?=$rowdata->id?>" class="btn btn-danger"><i class="glyphicon glyphicon-trash"></i> Hapus</a>
      </td>
      <td><?=$rowdata->ket_gbr?></td>
      <td><?=$rowdata->tipe_gbr?></td>
      <td><img src="assets/uploads/<?=$rowdata->nm_gbr?>" style="width: 50%; height: auto;"></td>
    </tr>
    <? }}?>
  </table>
</div>
</div>
</div>

saya menambahkan kolom aksi untuk edit dan hapus silakan dilihat perbedaan skrip ini dengan skrip sebelumnya.

kemudian tambah sebuah views beri nama feupload.php yang berfungsi untuk form edit gambarnya skrip nya buat seperti dibawah :

<head>
    <title><?=$titel?></title> <!-- variabel diambil dari controller -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>
    body{
        margin:20px 10%;
    }
</style>
</head>
<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
<div class="panel panel-default">
  <div class="panel-heading"><b><?=$titel?></b></div>
  <div class="panel-body">
  <?=$this->session->flashdata('pesan')?>
     <form action="<?=base_url()?>upload/update" method="post" enctype="multipart/form-data"><!-- form action mengarah ke fungsi update pada controller -->
       <table class="table table-striped">
         <tr>
          <td style="width:15%;">File Foto</td>
          <td>
            <div class="col-sm-6">
                <input type="file" name="filefoto" class="form-control">
                <!-- file gambar kita buat pada field hidden -->
                <input type="hidden" name="filelama" class="form-control" value="<?php echo $row->nm_gbr;?>">
                <!-- Id gambar kita hidden pada input field dimana berfungsi sebagai identitas yang dibawa untuk update -->
                <input type="hidden" name="kode" class="form-control" value="<?php echo $row->id;?>">
            </div>
            <div class="col-sm-6 align-right">
                <img src="<?=base_url()?>assets/uploads/<?=$row->nm_gbr?>" alt="" style="width:50%"></div>
            </td>
         </tr>
         <tr>
          <td style="width:15%;">Keterangan Foto</td>
          <td>
            <div class="col-sm-10">
                <textarea name="textket" class="form-control"><?=$row->ket_gbr?></textarea>
            </div>
            </td>
         </tr>
         <tr>
          <td colspan="2">
            <input type="submit" class="btn btn-success" value="Update">
            <button type="reset" class="btn btn-default" onclick="history.back()">Batal</button>
          </td>
         </tr>
       </table>
     </form>
        </div>
    </div>    <!-- /panel -->
    </div> <!-- /container -->

$row diambil dari controller edit yang mana $row telah di deklarasikan mengambil query dari model

 

3. Models

sisipkan skrip berikut pada bagian bawah model

//fungsi update ke database
     function get_update($data,$where){
       $this->db->where($where);
       $this->db->update($this->tabel, $data);
       return TRUE;
    }

  //fungsi delete ke database
  function get_delete($where){
       $this->db->where($where);
       $this->db->delete($this->tabel);
       return TRUE;
    }

//fungsi untuk menampilkan data per satuan dari tabel database
	function get_byimage($where) {
        $this->db->from($this->tabel);
        $this->db->where($where);
		$query = $this->db->get();

        //cek apakah ada data
        if ($query->num_rows() == 1) {
            return $query->row();
        }
	}

 

 

 

Postingan Terkait
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 4642 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 1421 hits )
» WYSIWYG editor menggunakan CKEditor di CodeIgniter ( 15 Sep 2016 | 03:07:03 , 1576 hits )
» Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery Part II ( 24 Agu 2016 | 08:59:38 , 4122 hits )
» Notifikasi navbar seperti di facebook dengan CodeIgniter, Bootstrap dan JQuery ( 24 Agu 2016 | 08:43:02 , 2840 hits )