PLUPLOAD.JS DALAM CODEIGNITER

Siang yang mendung. Udaranya juga sejuk ditambah dengan AC ruangan yang membuat diri semakin kedinginan. Tapi bukan berarti melemahkan sem...

Siang yang mendung. Udaranya juga sejuk ditambah dengan AC ruangan yang membuat diri semakin kedinginan. Tapi bukan berarti melemahkan semangat untuk menulis di blogger tercinta ini.

Eit... hampir lupa salam buat pembaca. Semangat siang bro and sist.

Kali ini saya akan berbagi pengalaman sebagai seorang pemula dalam dunia aplikasi web. Sesuai dengan judulnya, saya akan berbagi pengalaman dalam menggunakan plugin jquery untuk upload data menggunakan PLUPLOAD.JS kedalam framework CODEIGNITER. 

Apa itu PLUPLOAD.JS ?

PLUPLOAD.JS adalah plugin jquery yang digunakan sebagi interface / antar muka aplikasi untuk pengolahan upload data dalam aplikasi yang dibuat nantinya, bisa berupa media dan sebagainya. Kepengen tau lebih banyak bisa langsung kunjungi websitenya : Klik disini.

Apalagi itu CODEIGNITER ?

Codeigniter adalah framework berbasis PHP dengan pengkodean dan module yang ramah untuk para programmer pemula maupun expert. Codeigniter sendiri sudah berbasis MVC dan HMVC. Ingin tau dan berkenalan lebih dengan langsung saja : Klik disini.

Untuk sekarang kita tidak belajar tentang codeigniter. Tulisan saya kali ini ditujukan untuk para programmer yang sudah biasa menggunakan codeigniter. Paling tidak mereka pernah membuat aplikasi menggunakan codeigniter.

Yuk lanjutkan ke materi utama :

Requirements :

1. Codeigniter 2.x atau 3.x
2. JQUERY Core tentunya
3. Plugin PLUPLOAD.JS

Instalasi dan pengerjaannya :

• Extrak file Codeigniter dan PLUpload.js nya.
• 
  
• Copy / salin folder PLUpload.js kedalam root Codeigniter yang telah dimasukan dalam root localhost / server. (Mungkin dilain waktu akan saya posting).
• Buatlah sebuat view file dalam codeigniter contoh : nama_aplikasi/views/upload.php lalu copy / salin kode dibawah ini kedalamnya :

<script type="text/javascript" src="arahkan ke folder plupload yang ada di root codeigniter kamu /plupload.full.min.js"></script>
<script type="text/javascript" src="arahkan ke folder plupload yang ada di root codeigniter kamu /plupload.queue.min.js"></script>

<div id="uploader"></div>

<script type="text/javascript">

        $("#uploader").plupload({
            multipart_params: {},
            runtimes: 'html5,flash,silverlight,html4',
            url: 'http://your/ci/installation/folder/uploader/do_upload',
            ax_file_count: 20,
            max_file_size: '10mb',
            chunks: true,
            chunk_size: '3mb'
        },
        filters: {
            mime_types: [{
                title: "Image files",
                extensions: "jpg,gif,png,bmp,jpeg"
            }, {
                title: "Zip files",
                extensions: "zip"
            }, {
                title: "Documents",
                extensions: "pdf,doc,docx,csv,xls,xlsx"
            }]
        },
            rename: true,
            sortable: false,
            dragdrop: true,
            thumb_width: 180,
            thumb_height: 140,
            unique_names: true,
            views: {
                list: true,
                thumbs: true,
                active: 'thumbs'
            },
            flash_swf_url: 'arahkan ke folder plupload yang ada di root codeigniter kamu /js/Moxie.swf',
            silverlight_xap_url: arahkan ke folder plupload yang ada di root codeigniter kamu /js/Moxie.xap',
            preinit: function (up, info) {
            },
            init: {
                BeforeUpload: function(up, file){ // ini untuk aksi seperti alert sebelum upload data nya

                 },
                UploadComplete: function(){ // ini untuk aksi seperti alert setelah upload data nya
                }
            }
    });

</script>
 

• Kemudian buatlah sebuah controllers dengan nama : uploader.php dan copy code dibawah ini :

<?php

class Uploader extends CI_Controller {
    function __construct()
    {
        parent::__construct();
    }

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

    function upload_aja()
    {

if(empty($_FILES) || $_FILES['file']['error']) {

  die('{"OK": 0, "info": "Gagal Mengupload File."}');

}

$chunk= isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;

$chunks= isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;

$fileName= isset($_REQUEST["name"]) ? $_REQUEST["name"] : $_FILES["file"]["name"];

$filePath= "uploads/$fileName"; 

$out= @fopen("{$filePath}.part", $chunk== 0 ? "wb": "ab");

if($out) {

  $in= @fopen($_FILES['file']['tmp_name'], "rb");

  if($in) {

    while($buff= fread($in, 4096))

      fwrite($out, $buff);

  } else

    die('{"OK": 0, "info": "Gagal menampilkan File"}');

  @fclose($in);

  @fclose($out);

  @unlink($_FILES['file']['tmp_name']);

} else

  die('{"OK": 0, "info": "Gagal Menampilkan Hasil Upload"}');

// Check if file has been uploaded

if(!$chunks|| $chunk== $chunks- 1) {

  // Strip the temp .part suffix off

  rename("{$filePath}.part", $filePath);

}

die('{"OK": 1, "info": "Upload Berhasil"}');

}

}

jika sudah, silahkan uji coba dengan mengakses urlnya di : http:// arahkan ke root instalasi codeigniternya /uploader/index.

Sekian Dulu ya. Silahkan beri komentar atau diskusi

Selamat Siang