Kamis, 25 Juli 2013

[CodeIgniter] Upload dan Resize Gambar Secara Otomatis


Saya sering mondar-mandir membaca pertanyaan-pertanyaan member di group CodeIgniter Indonesia dan tak jarang ada yang bertanya atau mempertanyakan bagaimana cara mengupload gambar dan meresize gamber tersebut secara otomatis. Nah, maka dari itu kali ini saya akan memberikan sedikit bahkan secuil contoh penggunaannya.

Buat project baru dengan codeigniter, kemudian buka controller welcome.php, kemudian isi seperti berikut.

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

class Welcome extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url', 'html'));
        $this->load->library(array('upload','image_lib'));
    }
   
    public function index()
    {
        $data = array();
        $data['error'] = '';
        $data['output'] = '';
        
        if(isset($_FILES['userfile']))
        {
            $this->upload->initialize(array(
                'upload_path' => './assets/',
                'allowed_types' => 'png|jpg|gif',
                'max_size' => '5000',
                'max_width' => '3000',
                'max_height' => '3000'
            )); 
        
            if($this->upload->do_upload())
            {
                $data_upload = $this->upload->data();
                $this->image_lib->initialize(array(
                    'image_library' => 'gd2',
                    'source_image' => './assets/'. $data_upload['file_name'],
                    'maintain_ratio' => false,
                    'create_thumb' => true,
                    'quality' => '20%',
                    'width' => 240,
                    'height' => 172
                ));
                
                if($this->image_lib->resize())
                {
                    $output = '<h4>Thumb - hasil Resize</h4>';
                    $output .= img('./assets/'.$data_upload['raw_name'].'_thumb'.$data_upload['file_ext']);
                    $output .= '<h4 style="margin-top: 30px">Gambar Original</h4>';
                    $output .= img('./assets/'.$data_upload['file_name']);
                    
                    $data['output'] = $output;
                }
                else
                {
                    $data['error'] = $this->image_lib->display_errors();
                }
                
            }
            else
            {
                $data['error'] = $this->upload->display_errors();
            }
        }
        
        $this->load->view('welcome_message', $data);
    }
}

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

Kemudian buka folder views/welcome_message.php dan isi seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

    ::selection{ background-color: #E13300; color: white; }
    ::moz-selection{ background-color: #E13300; color: white; }
    ::webkit-selection{ background-color: #E13300; color: white; }

    body {
        background-color: #fff;
        margin: 40px;
        font: 13px/20px normal Helvetica, Arial, sans-serif;
        color: #4F5155;
    }

    a {
        color: #003399;
        background-color: transparent;
        font-weight: normal;
    }

    h1 {
        color: #444;
        background-color: transparent;
        border-bottom: 1px solid #D0D0D0;
        font-size: 19px;
        font-weight: normal;
        margin: 0 0 14px 0;
        padding: 14px 15px 10px 15px;
    }

    code {
        font-family: Consolas, Monaco, Courier New, Courier, monospace;
        font-size: 12px;
        background-color: #f9f9f9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
    }

    #body{
        margin: 0 15px 0 15px;
    }
    
    p.footer{
        text-align: right;
        font-size: 11px;
        border-top: 1px solid #D0D0D0;
        line-height: 32px;
        padding: 0 10px 0 10px;
        margin: 20px 0 0 0;
    }
    
    #container{
        margin: 10px;
        border: 1px solid #D0D0D0;
        -webkit-box-shadow: 0 0 8px #D0D0D0;
    }
    </style>
</head>
<body>

<div id="container">
    <h1>Upload dan Resize Gambar Otomatis <span style="float: right">Dida Nurwanda</span></h1>

    <div id="body">
        <form method="post" enctype="multipart/form-data">        
            
            <?php echo $error; ?>
            
            <div>
                <label for="userfile">Pilih gambar yang akan di upload : </label>
                <br />
                <input type="file" name="userfile" />
            </div>
            
            <div style="margin-top:20px">
                <input type="submit" value="Upload" />
            </div>
        
        </form>
        
        <div>
            <?php echo $output; ?>
        </div>
    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>

Selesai deh, kodenya berantakan tapi mudah di pahami. Kalo bingung mau nambah-nambahin silahkan bertanya :D
 
Berikut penampakannya.

Download
Password : didanurwanda.blogspot.com

[Android] Contoh Penggunaan JavaScript Interface


Bagi Anda yang baru belajar pemrograman Java khususnya Android, mungkin pembahasan kali ini akan terkesan menarik, kenapa... Sebab saya akan memberikan sedikit contoh pembuatan  aplikasi Android menggunakan javascript tetapi javascript tersebut dapat mengakses java library yang terdapat pada android itu sendiri. Sebagai contoh pada artikel ini saya memakai Toast dan AlertDialog.

Silahkan anda membuat project terlebih dahulu, disini saya menamakannya "JavaScriptInterfaceDemo" dengan peckage "com.didanurwanda.javascriptinterfacedemo"
kemudian buka res\layout\main.xml (Mungkin namanya akan berbeda) dan isi seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Kemudian buka src/nama/peckage/anda dan buat class dengan nama MyJsInterface.java dan isi dengan script berikut.

package com.didanurwanda.javascriptinterfacedemo;

import android.content.Context;
import android.widget.Toast;
import android.app.AlertDialog;
import android.content.DialogInterface;

public class MyJsInterface
{
    Context context;
    
    MyJsInterface(Context context)
    {
        this.context = context;
    }
    
    public void toast(String toast, String length)
    {
        int toast_length;
        if(length.toString().equalsIgnoreCase("LONG"))
            toast_length = Toast.LENGTH_LONG;
        else
            toast_length = Toast.LENGTH_SHORT;
            
        Toast.makeText(context, toast, toast_length).show();
    }
    
    public void dialog(String message)
    {
        AlertDialog.Builder alert = new AlertDialog.Builder(context);
        alert.setMessage(message);
        alert.setCancelable(false);
        alert.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
            @Override
            public void onClick(DialogInterface intface, int id)
            {
                toast("Anda menekan tombol pada dialog", "LONG");
            }
        });
        alert.show();
    }
}

Selanjutnya buka MainActivity.java dan isi juga seperti berikut.

package com.didanurwanda.javascriptinterfacedemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity
{
    WebView webview;
    WebSettings websettings;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        webview = (WebView) findViewById(R.id.webview);
        websettings = webview.getSettings();
        websettings.setJavaScriptEnabled(true);
        webview.setWebViewClient(new WebViewClient());
        webview.addJavascriptInterface(new MyJsInterface(this), "didanurwanda");
        webview.loadUrl("file:///android_asset/www/index.html");
    }
    
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack())
        {
            webview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

Setelah itu buka folder assets kemudian buat folder www, ini digunakan untuk menyimpan file html dan javascript. setelah itu buka folder www tadi dan tambahkan atau buat file index.html dan isi seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript Interface Demo</title>
    <style type="text/css">
        body { text-align: center }
    </style>
    
    <script type="text/javascript">
        function tampil_toast()
        {
            didanurwanda.toast('Anda sedang menampilkan toast menggunakan javascript', 'LONG');
        }
        
        function tampil_dialog()
        {
            didanurwanda.dialog('Anda menampilkan dialog menggunakan javascript');
        }        
    </script>
</head>
<body>
    <h2>Demo JavaScript Interface pada Android</h2>
    <a href="http://didanurwanda.blogspot.com">http://didanurwanda.blogspot.com</a>
    <br />
    <button onClick="tampil_toast()">Tampilkan Toast</button>
    <br />
    <button onClick="tampil_dialog()">Tampilkan Dialog</button>
</body>
</html>

dan buka juga AndroidManifest.xml kemudian tambahkan

<uses-permission android:name="android.permission.INTERNET" /> 

Mudah bukan, hhehe. Untuk penjelasan sepertinya tidak perlu, sebab dengan melihat kodenya pasti anda sudah mengerti.

Berikut Penampakannya



Download
Password : didanurwanda.blogspot.com

Selasa, 02 Juli 2013

[Tools] Konversi Html ke Markdown menggunakan Redactor Html Editor


Bingung belajar menulis dokumen dengan format markdown, jangan nyerah. Sebab kali ini saya akan memberikan tools yang akan sedikit banyak membantu Anda dalam menulis dokumen. Tools ini sebenarnya berasal dari jQuery to-markdown yang di buat Dom Christie, tetapi saya kombonasikan dengan WYSIWYG Redactor sehingga akan sangan mempermudah anda karena Anda tidak perlu menulis dengan format HTML, Anda cukup membuat dokumen seperti di Microsoft Office Word saja.