Kategori Random

Upload Image (Rename) CodeIgniter+Bootstrap dan Menyimpan ke Database

Posted : 11 Maret 2015 | 11:32:00 , Dibaca 34771 kali

Pada sebuah form input php, pasti kita tidak lepas dari input file atau input gambar untuk mendukung sebuah artikel kita. Maka dari itu saya akan share skrip upload files pada codeigniter.

Pada codeigniter librari upload sendiri sudah tersedia tanpa kita harus membuat librari baru lagi. Pada codeigniter kita tinggal memanggil $this->load->library('upload') untuk mempersingkat waktu mari kita mulai implementasinya

Langkah 1 : Buat database

CREATE TABLE `tb_uploadimage` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nm_gbr` varchar(35) DEFAULT NULL,
  `tipe_gbr` varchar(10) DEFAULT NULL,
  `ket_gbr` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

Langkah 2 : Views

pertama buat view untuk tampilan awalnya dimana semua data yang ada didatabase ditampilkan beri nama vupload.php simpan di folder application/views

<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>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><?=$rowdata->ket_gbr?></td>
      <td><?=$rowdata->tipe_gbr?></td>
      <td><img src="assets/uploads/<?=$rowdata->nm_gbr?>"></td>
    </tr>
    <? }}?>
  </table>

</div>
</div>
</div>

Kemudian untuk view form nya simpan dengan nama fupload.php dan simpan juga di application/views

<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>Form Upload Image</b></div>
  <div class="panel-body">
  <?=$this->session->flashdata('pesan')?>
     <form action="<?=base_url()?>upload/insert" method="post" enctype="multipart/form-data">
       <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">
            </div>
            </td>
         </tr>
         <tr>
          <td style="width:15%;">Keterangan Foto</td>
          <td>
            <div class="col-sm-10">
                <textarea name="textket" class="form-control"></textarea>
            </div>
            </td>
         </tr>
         <tr>
          <td colspan="2">
            <input type="submit" class="btn btn-success" value="Simpan">
            <button type="reset" class="btn btn-default">Batal</button>
          </td>
         </tr>
       </table>
     </form>
    </div>
   </div>    <!-- /panel -->
 </div> <!-- /container -->

Langkah 3 : Controllers

buat file controller beri nama upload.php dan simpan difolder application/controllers

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

class Upload extends CI_Controller
{
    var $limit=10;
	var $offset=10;

    public function __construct() {
        parent::__construct();
        $this->load->model('mupload'); //load model mupload yang berada di folder model
        $this->load->helper(array('url')); //load helper url 

    }

	public function index($page=NULL,$offset='',$key=NULL)
	{
        $data['titel']='Upload CodeIgniter'; //varibel title
        
        $data['query'] = $this->mupload->get_allimage(); //query dari model
        
        $this->load->view('vupload',$data); //tampilan awal ketika controller upload di akses
	}
    public function add() {
	    
        $data['titel']='Form Upload CodeIgniter'; //varibel title
        
        //view yang tampil jika fungsi add diakses pada url
        $this->load->view('fupload',$data);
       
    }
    public function insert(){
        $this->load->library('upload');
        $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time
        $config['upload_path'] = './assets/uploads/'; //path folder
        $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);
        
        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')
                  
                );

                $this->mupload->get_insert($data); //akses model untuk menyimpan ke database
                //pesan yang muncul jika berhasil diupload pada session flashdata
                $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-success\" id=\"alert\">Upload gambar berhasil !!</div></div>");
                redirect('upload'); //jika berhasil maka akan ditampilkan view vupload
            }else{
                //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 upload gambar !!</div></div>");
                redirect('upload/add'); //jika gagal maka akan ditampilkan form upload
            }
        }
    }
}

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

Pada skrip saya sudah buatkan keterangannya agar lebih mudah dipahami, kemudian saya juga include bootstrap js agar tampilan form lebih rapi. Jadi dengan kata lain bisa juga kita bilang upload image dengan tempalate bootstrap :D :D

Langkah 4 : Model

Kemudian selanjutnya kita buat skrip untuk modelnya, beri nama mupload.php simpan di folder application/models

<?php
class Mupload extends CI_Model {
    var $tabel = 'tb_uploadimage'; //buat variabel tabel 

    function __construct() {
        parent::__construct();
    }
    
    //fungsi untuk menampilkan semua data dari tabel database
	function get_allimage() {
        $this->db->from($this->tabel);
		$query = $this->db->get();

        //cek apakah ada data
        if ($query->num_rows() > 0) {
            return $query->result();
        }
	}

    //fungsi insert ke database
    function get_insert($data){
       $this->db->insert($this->tabel, $data);
       return TRUE;
    }
}
?>

Langkah 5 : Setting

  1. Agar file berhasil disimpan buat folder assets/uploads karna path folder uploadnya saya buat seperti itu agan bisa ubah sesuai dengan selera agan
  2. Setting pada config/database.php setting agar konek ke database kita
  3. Setting pada config/routes.php agar langsung otomatis mengakses controller upload
    $route['default_controller'] = "upload";
  4. Setting pada config/autoload.php agar terload otomatis
    $autoload['libraries'] = array('database','session','form_validation');
  5. Kemudian pada config/config.php  buat seperti berikut pada base_url dan index_page
    $config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
    $config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/'; 
    
    $config['index_page'] = 'index.php';
  6. Kemudian buat sebuah file htaccess agar index.php pada url hilang buat seperti berikut dan simpan pada root folder proyek kita
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    
    RewriteRule ^(.*)$ index.php/$1 [L]

 

Output

 

Sekian tutorial kali ini semoga bermanfaat.

Update 30 Juni 2016

Untuk source code nya dapat didownload pada link dibawah ini

 

Update 9 September 2016

Settingan di php.ini cari baris short_open_tag, jika isi seperti ini

short_open_tag = Off

maka ganti nilai valuenya menjadi seperti ini 

short_open_tag = On

mungkin ini bisa menjawab beberapa error yang muncul ketika skrip dijalankan
jika baris nilai on maka berguna untuk penulisan tag php tanpa tulisan php pada code script seperti berikut contohnya

<?
-----
-----
?>

jika baris nilai off maka penulisan harus menggunakan tag php standar

<?php
-----
-----
?>

 

 

Postingan Terkait
» Cetak Laporan Format Excel di Codeigniter ( 25 Jan 2017 | 06:39:12 , 648 hits )
» Membuat Laporan PDF dengan DomPDF di CodeIgniter ( 04 Nov 2016 | 07:42:55 , 1184 hits )
» Edit dan Hapus Foto Upload Codeigniter ( 31 Okt 2016 | 08:25:06 , 3949 hits )
» Membuat Paging dan Search Bootstrap CodeIgniter ( 11 Okt 2016 | 16:26:41 , 7550 hits )
» Menambah Web File Menager pada CKEditor di CodeIgniter ( 15 Sep 2016 | 09:10:43 , 2066 hits )