Upload image dengan dropify menggunakan codeigniter

Upload image dengan dropify menggunakan codeigniter

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

Share:



Komentar (5)

hisam, 20 February 2018 00:00 - Reply

sourecode m-sekolah pada halaman prestasi siswa hasilnya blank...mohon solusinya gan

M Fikri, 20 February 2018 08:06 - Reply

Itu memang sengaja gan, agar dikembangkan sendiri maksudnya!

Fauzi, 07 March 2018 08:49 - Reply

Gan, kok gk ngaruh apa2 yah, aku uda errorin juga di scriptnya gk ngaruh apa2 ke tampilannya, gk ada error dan gk jalan juga, padahal uda sama semuanya.

M Fikri, 10 March 2018 10:32 - Reply

1. Coba perhatikan class="dropify" pada inout type filenya gan!
2. Pastikan Jquery-nya berjalan dengan baik!

Anwar, 10 July 2018 17:17 - Reply

Tutorial-tutorial nya keren bngt mas Fikri.. sebagai newbie saya sangat terbantu dan banyak belajar dari sini. oya, kalo boleh saya request bagaimana membuat upload gambar dimana ketika gambar diupload langsung otomatis membuat folder sendiri, dan nama folder nya itu berdasarkan tanggal.. di tunggu postingan2 selanjut nya mas fikri.. Terimakasih ^_^

Leave a Comment