Apr 052013
 

Tutorial Jquery Bagian 2 (Mini Calculator/Kalkulator)

Assalamu’ alaikum wr wb

Pada Tutorial sebelumnya Tutorial Jquery Bagian 1 (Mini Kalkulator) , Kita sudah belajar bagaimana membuat perhitungan sederhana dengan memanfaatkan JQuery dan javascript. Kita akan membuat kalkulator/Calculator seperti pada gambar di bawah ini:

kalkulator-1

Yang pertama kita lakukan adalah membuat desain tampilan seperti diatas. tulis script di bawah dalam tag body.

<div align="center">
 <table border="1">
 <tr>
 <td colspan="4"><input readOnly type="text" class="txtHasil" id="txtHasil" value="" /></td>
 </tr>
 <tr>
 <td> <input type="button" value="0" /> </td>
 <td> <input type="button" value="1" /> </td>
 <td> <input type="button" value="2" /> </td>
 <td> <input type="button" value="+" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="3" /> </td>
 <td> <input type="button" value="4" /> </td>
 <td> <input type="button" value="5" /> </td>
 <td> <input type="button" value="-" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="6" /> </td>
 <td> <input type="button" value="7" /> </td>
 <td> <input type="button" value="8" /> </td>
 <td> <input type="button" value="*" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="9" /> </td>
 <td> <input type="button" value="C" /> </td>
 <td> <input type="button" value="=" /> </td>
 <td> <input type="button" value="/" /> </td>
 </tr>
 </table>
</div>

Kode di atas akan menghasilkan tampilan untuk kalkulator kita, sekarang tinggal kita buat script jquery dan css nya, berikut adalah css desainnya. tulis script di blok tag head.

<style type="text/css">
 input.txtHasil{
 height: 40px;
 width: 100%;
 text-align: right;
 background-color: black;
 font-style: bold;
 color: white;
 font-size: 15px;
 }
 input[type=button]{
 height: 40px;
 width: 40px;
 font-size: 20px;
 }
</style>

Jangan lupa masukkan jquery dalam program kita.

<script type="text/javascript" src="jquery-1.8.2.js"></script>

Yang terakhir adalah source code untuk melakukan proses perhitungan , tulis di bawah load jQuery nya.

<script type="text/javascript">
 $(document).ready(function(){
 $('input[type=button]').click(function(){
 if($(this).val()=='='){
$('#txtHasil').val(eval($('#txtHasil').val()));
 }else if( $(this).val()=='C'){
 $('#txtHasil').val('');
 }else{
$('#txtHasil').val($('#txtHasil').val() + $(this).val());
 }
 });
 });
</script>

Oke selesai sudah program kita semoga dapat membantu.

Akirnya jadi sudah kalkulator kita

Wassalamu’ alaikum wr wb

Jun 212012
 

Assalamu’ alaikum wr wb

Kali  ini kita akan mebuat sebuah script untuk mengeksekusi command dalam source java.

/*
*
* Desain by t-team
* email   : mbahsomo@do-event.com
* website : http://www.do-event.com
* ===============================================================
*     Semua sorce dalam program ini dibawah license [GPL]
*     Silakan Untuk mengembangkan dan memperbanyak source ini
*     Dengan tidak menghilangkan nama pembuat
* ===============================================================
*/
package tproject.util;
import java.io.BufferedReader;
import java.io.InputStreamReader;
/**
*
* @author sugik
*/
public class execToString {
public execToString(String cmdline) {
try {
Runtime rt = Runtime.getRuntime();
Process pr = rt.exec(cmdline);
BufferedReader input = new BufferedReader(new InputStreamReader(pr.getInputStream()));
String line = null;
while ((line = input.readLine()) != null) {
System.out.println(line);
}
int exitVal = pr.waitFor();
System.out.println(&quot;Exited with error code &quot; + exitVal);
} catch (Exception e) {
System.out.println(e.toString());
e.printStackTrace();
}
}
public static void main(String[] arg) {
new execToString(&quot;ping google.com&quot;);
}
}

Wassalamu’ alaikum wr wb

Oct 092010
 

Dinamis TreePanel ExtJs

Assalamu’ alaikum wr wb

Bebearapa saat yang lalu ada beberapa teman bertanya tentang bagaimana menggunakan TreePanel di ExtJs. Beberapa hari ini saya membuka – buka coding ExtJs dan php saya yang jadul dengan menggunakan ExtJs v 2. Tapi disitu saya menemukan sesuatu yang bagus untuk di bahas dalam tulisan saya kali ini.

Langsung pada tujuan kadang kita ingin membuat atau load tree dari sebuah query database. Saya yakin semua pasti bisa untuk membuatnya. Tapi disini bagaimana cara kita membuat aplikasi kita tidak terlalu berat saat load data.

Semisal ada kasus seperti ini.

1. saya mempunyai sebuah table dengan nama tbl_admin_menu dengan sis sebagai berikut :

setelah itu kita buat scrip phpnya dengan frame work CodeIgniter (CI).

Controller :

class menu_admin extends Controller {

    //put your code here
    function __construct() {
        parent::Controller();
        $this->load->model('menu_admin_model');
    }

    function getTreeMenu() {
        $arr_value = Array();
        if ($_POST['node'] == 'root') {
            $result = $this->menu_admin_model->getTreeMenu(0);

            foreach ($result->result_array() as $row) {
                if($row['TYPE']==0)
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON']
                    );
                else
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON'],
                        'leaf'          => true
                    );
            }
        }else{
            $result = $this->menu_admin_model->getTreeMenu($_POST['node']);

            foreach ($result->result_array() as $row) {
                if($row['TYPE']==0)
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON']
                    );
                else
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON'],
                        'leaf'          => true
                    );
            }
        }
        $this->jsonci->sendJSONNew($arr_value);
    }
}

Buat Sctip untuk Model

class menu_admin_model extends Model{
    //put your code here
    function __construct() {
        parent::Model();
    }

    /**
     *
     * @param <type> $PARENT
     */
    function getTreeMenu($PARENT){
        $this->db->select('*');
        $this->db->from('tbl_menu_admin');
        $this->db->where('PARENT',$PARENT);
        $query = $this->db->get();
        return $query;
    }
}

Lalu yang terakhir adalah mebuat scrip ExtJs nya

var treePanel = new Ext.tree.TreePanel({
    renderTo	: 'divID',
    loader:new Ext.tree.TreeLoader({
        dataUrl:'<?php echo base_url(); ?>index.php/menu_admin/getTreeMenu'
    }),
    root: new Ext.tree.AsyncTreeNode({
        text    : 'Main Menu',
        id      : 'root',
        expanded: true,
        iconCls : 'home'
    })
})

Hasil : Selamat mencoba semoga membantu.

Wassalamu’ alaikum wr wb