Hello sahabat programmer. Gimana kabar? Semoga sehat selalu agar tetap semangat ngodingnya.

Hehe., pada kesempatan kali ini saya ingin sharing tentang sesuatu yang cukup menarik nich.

Yaitu upload image dengan dropify style menggunakan codeigniter. Dropify merupakan framework yang berisi file css dan javascript untuk memberikan style pada input type file sekaligus mengizinkan user memilih image yang ingin di upload dengan klik drag and drop.

Sehingga interface yang dihasilkan lebih user friendly.

Dropify membutuhkan jquery agar bisa digunakan. Oleh sebab itu kita juga membutuhkan jquery. Selain jquery kita juga membutuhkan bootstrap memang tidak wajib hanya untuk mempercantik tampilan form..ehehe..

Ok langsung saja.!

Pertama-tama download Dropify, Jquery, Bootstrap, dan Codeigniter.

Setelah mendownload file yang diperlukan, sekarang kita masuk ke coding.

 

1. Buat database dan tabel dengan mengeksekusi query berikut:

CREATE DATABASE db_upload;
USE db_upload;

CREATE TABLE tbl_galeri(
id INT PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
gambar VARCHAR(40)
)ENGINE=INNODB; 

2. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_upload.

 

Setelah installasi, buat folder assets di dalam ci_upload. Lalu copykan file dropify, bootstrap, dan jquery kedalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

aplication

assets

      css

          bootstrap.css

      dropify

          dropify.min.css

          dropify.min.js

      fonts

      images

      js

          bootstrap.js

          jquery.js

system

 

3. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_upload/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_upload',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

4. Buat controller dengan nama Upload.php dengan coding sebagai berikut:

<?php
class Upload extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('m_upload');
                $this->load->library('upload');
        }

        function index(){
                $this->load->view('v_upload');    
        }

        function upload_image(){
                $config['upload_path'] = './assets/images/'; //path folder
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
            $config['encrypt_name'] = TRUE; //nama yang terupload nantinya

            $this->upload->initialize($config);
            if(!empty($_FILES['filefoto']['name']))
            {
                if ($this->upload->do_upload('filefoto'))
                    {
                        $gbr = $this->upload->data();
                        $gambar=$gbr['file_name']; //Mengambil file name dari gambar yang diupload
                                        $judul=strip_tags($this->input->post('judul'));
                                        $this->m_upload->simpan_upload($judul,$gambar);
                                        echo "Upload Berhasil";
                                }else{
                        echo "Gambar Gagal Upload. Gambar harus bertipe gif|jpg|png|jpeg|bmp";
                    }
                         
                }else{
                                echo "Gagal, gambar belum di pilih";
                }
                                
        }
        
}

5. Buat model dengan nama M_upload.php dengan coding sebagai berikut:

<?php
class M_upload extends CI_Model{

        function simpan_upload($judul,$gambar){
                $hasil=$this->db->query("INSERT INTO tbl_galeri(judul,gambar) VALUES ('$judul','$gambar')");
                return $hasil;
        }
        
}

6. Buat View dengan nama v_upload.php dengan coding sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
        <meta charset="utf-8">
        <title>Upload dengan Dropify</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/dropify/dropify.min.css'?>">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
        <div class="container">
                <div class="col-sm-4 col-md-offset-4">
                <h4>Upload Image dengan Dropify Master</h4>
                        <form class="form-horizontal" action="<?php echo base_url().'index.php/upload/upload_image'?>" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                        <input type="text" name="judul" class="form-control" placeholder="Judul">
                                </div>
                                <div class="form-group">
                                        <input type="file" name="filefoto" class="dropify" data-height="300">
                                </div>
                                <div class="form-group">
                                        <button class="btn btn-success" type="submit">Simpan</button>
                                </div>
                        </form>   
                </div>
        </div>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/dropify/dropify.min.js'?>"></script>
<script type="text/javascript">
        $(document).ready(function(){
                $('.dropify').dropify({
                        messages: {
                default: 'Drag atau drop untuk memilih gambar',
                replace: 'Ganti',
                remove:  'Hapus',
                error:   'error'
            }
                });
        });
        
</script>
</body>
</html>

Sekian tutorial tentang Upload image dengan dropify menggunakan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!

Download Source