Apr 022013
 

Tutorial Jquery Bagian 1 (Mini Kalkulator)

Assalamu’ alaikum wr wb

Bagi para programer web pasti sudah tidak asing lagi dengan JQuery, kali ini saya akan sedikti berbagi tentang bagaimana cara menggunakan Jquery untuk menghandle event pada tag Html kita.

Berikut adalah tampilan cupture dari hasil program yang akan kita buat.

kalkulator

Berikut adalah source code yang di gunakan :

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title></title>
 <script type="text/javascript" src="/pweb/js/jquery-1.8.2.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $('#btnHitung').click(function(evt){
 var hasil = $('#txt1').val() + $('#operator').val() + $('#txt2').val()
 alert('Rumus = ' + hasil);
 $('#txt-hasil').val(eval(hasil));
 })
 $('#btnTampil').click(function(){
 if ($('#btnTampil').val()=="Hide"){
 $('table').hide(2000);
 $('#btnTampil').val("Show");
 }else{
 $('table').show(2000);
 $('#btnTampil').val("Hide");
 }
 })
 })
 </script>
 <style type="text/css">
 input[type=number]{
 text-align: right;
 width: 100px;
 background-color: beige;
 }
 input[type=number]:focus{
 background-color: yellowgreen;
 }
 </style>
 </head>
 <body>
 <input type="button" value="Hide" id="btnTampil" />
 <table border="0">
 <tr>
 <td>Angka 1</td>
 <td>:</td>
 <td><input type="number" id="txt1" name="txt1" /></td>
 </tr>
 <tr>
 <td>Angka 2</td>
 <td>:</td>
 <td><input type="number" id="txt2" name="txt2" /></td>
 </tr>
 <tr>
 <td>Operasi</td>
 <td>:</td>
 <td>
 <select name="operator" id="operator">
 <option value="+">Jumlah</option>
 <option value="-">Kurang</option>
 <option value="*">Kali</option>
 <option value="/">Bagi</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Hasil</td>
 <td>:</td>
 <td><input type="number" id="txt-hasil" name="txt-hasil" /></td>
 </tr>
 <tr>
 <td rowspan="3"> <input type="button" value="Hitung" id="btnHitung" /> </td>
 </tr>
 </table>
 </body>
</html>

Selamat ber kreasi untuk tutorials elanjutnya kit akanmembuat kalkulator/Calculator yang lebih komplek. selamat mencoba

Wassalamu’ alaikum wr wb

Nov 022012
 

Assalamu’ alaikum wr wb

Penjumlahan dalam javascript

Beberapa saat ini saya banyak melakukan experimen untuk pembuatan beberapa aplikasi yang memang membutuhkan proses client side.

Setelah melakukan beberapa percobaan saya akan membagi beberapa pengalaman saya dalam hal perhitungan dalam javascript, pada awalnya saat melakukan penjumlahan saya menggunakan rumus yang umum digunakan.

Contoh : var jml = parseFloat(“1000”) + parseFloat(“1000”) ;

Ternyata selain menggunakan rumus di atas ada sebuah function yang bisa kita gunakan untuk  melakukan penjumlahan string, saya kita dengan ini akan memudahkan kita dalam penjumalah dalam javascript kita.

Berikut adalah function yang bisa digunakan.

var jml = eval("1000+1000") ;
//atau
var jml = eval("1000/1000") ;

kode pertama dan kedua akan melakukan penjumalah sesuai dengan operator di sampingnya.

Semoga dapat digunakan dan di manfaatkan sesuai dengan kebutuhan.

Wassalamu’alaikum wr wb

Oct 042011
 

Assalamu’alaikum wr wb

Combo multi colomn with ExtJs 4

ExtJs

ExtJs

Jumpa lagi dengan mbahsomo, Kali ini saya akan melanjutkan, tutorial saya tentang Combo Multi column dengan ExtJs yang masih menggunakan ExtJs 3 ke bawah, kali ini saya akan sedikit berbagi dengan teman – teman bagaimana membuat pada ExtJs 4, Baiklah seperti biasanya langsung saja pada Pokok permasalahannya, yaitu scriptnya silakan di kopas, Semoga bermanfaat.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Combo Multi Kolom</title>
<link rel="stylesheet" type="text/css" href="http://latihan.lokal.com/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://latihan.lokal.com/ext-4.0.0/bootstrap.js"></script>
<script type="text/javascript">
	Ext.require([
		'Ext.form.*'
		,'Ext.form.field.ComboBox'
		,'Ext.data.*'
		,'Ext.menu.Menu'
		,'Ext.grid.*'
		,'Ext.util.*'
		,'Ext.state.*'
		,'Ext.selection.CheckboxModel'
		,'Ext.window.*'
	]);

	var storeGrid = Ext.create('Ext.data.Store',{
		model: 'treeMenu'
		,proxy: {
			type: 'ajax'
			,url : 'http://lokal.com/'
			,noCache    : false
			,params     : Ext.encode({
				start   : 0
				,limit  : 20
			})
			,actionMethods  : 'POST'
			,reader: {
				type: 'json'
				,root: 'response'
				,totalProperty: 'jumlah'
				,idProperty: 'MN_ID'
			}
		}
		,autoLoad: true
		,sorters: [{
			property    : 'MN_ID',
			direction   : 'ASC'
		}]
	});

	var smGrid = Ext.create('Ext.selection.CheckboxModel');
	// create the Grid
	var grid = Ext.create('Ext.grid.Panel', {
		store: storeGrid
		,columns: [
			{ header: 'NAMA',width: 200,sortable: true,dataIndex: 'MN_NAME'}
			,{ header: 'LINK',width: 100,sortable: true,dataIndex: 'MN_LINK'}
			,{ header: 'PARENT',width: 100,sortable: true,dataIndex: 'MN_PARENT'}
			,{ header: 'GROUP',width: 100,sortable: true,dataIndex: 'MN_GRP'}
			,{ header: 'URUTAN',width: 100,sortable: true,dataIndex: 'MN_SORT'}
			,{ header: 'STATUS',width: 100,sortable: true,dataIndex: 'MN_STATUS'}
			,{ header: 'ICON',width: 100,sortable: true,dataIndex: 'MN_ICON'}
			,{ header: 'TYPE',width: 100,sortable: true,dataIndex: 'MN_TYPE'}
		]
		,height: 350
		,selModel : smGrid
		,width: 600
		,title: 'CRUD'
		,viewConfig: {
			stripeRows: true
		}
		,bbar: new Ext.PagingToolbar({
			pageSize    : 20
			,store      : storeGrid
			,displayInfo: true
			,displayMsg : 'Data yang ada {0} - {1} Dari {2}'
			,emptyMsg   : "Tidak ada data"
		})
	});

	var helpGrid = new Ext.menu.Menu();
	helpGrid.add(grid);

	Ext.define('Ext.ux.form.SearchField', {
	    extend: 'Ext.form.field.Trigger',
	    alias: 'widget.searchfield',
	    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
	    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
	    hasSearch : false,
	    paramName : 'query',
	    initComponent: function(){
	        this.callParent(arguments);
	        this.on('specialkey', function(f, e){
	            if(e.getKey() == e.ENTER){
	                this.onTrigger2Click();
	            }
	        }, this);
	    },
	    afterRender: function(){
	        this.callParent();
	        this.triggerEl.item(0).setDisplayed('none');
	    },
	    onTrigger1Click : Ext.form.field.Trigger.prototype.onTriggerClick,
	    onTrigger2Click : function(){
	    	helpGrid.showAt([this.getPosition()[0],this.getPosition()[1]+this.getHeight()]);
	    }
	});

	Ext.onReady(function() {
		Ext.QuickTips.init();
		var formPanel = Ext.widget('form', {
			renderTo	: 'induk'
			,title		: 'Form'
			,width		: 300
			,height		: 300
			,items		: {
                width: 250
                ,fieldLabel: 'Search'
                ,abelWidth: 50
                ,xtype: 'searchfield'
            }
		});
	});
</script>
</head>
<body>
Body
<div id='induk'></div>
</body>
</html>

Selamat berexplorasi.

Wassalamu’ alaikum wr wb

Aug 302011
 

Assalamu’ alaikum wr wb

CRUD ExtJs 4 With CodeIgniter

ExtJS

ExtJS

Selamat Berpuasa bagi yang masih berpuasa dan Mohon maaf lahir batin buat teman – teman yang sudah merayakan Idul Fitri. Untuk menepati beberapa janji saya kepada teman – teman, yang menginginkan tutorial dan controh scrip CRUD dengan ExtJS maka akan saya bagikan sedikit tutorial tentang CRUD pada ExtJS.4 dengan menggunakan framework CodeIgniter 1.7.2.

Langsung pada permasalahan, tutorial ini masih berhubungan dengan tutorial saya yang kemaren, yang membahas tentang tree ExtJs karena databasenya masih menggunakan yang ada. yaitu treemenu.

Create table :

CREATE TABLE tbl_menu (
MN_ID int(11) NOT NULL AUTO_INCREMENT,
MN_NAME varchar(30) DEFAULT NULL,
MN_LINK varchar(50) DEFAULT NULL,
MN_PARENT int(11) DEFAULT NULL,
MN_GRP int(11) DEFAULT NULL,
MN_SORT int(11) DEFAULT NULL,
MN_STATUS int(11) DEFAULT NULL,
MN_ICON varchar(50) DEFAULT NULL,
MN_TYPE int(11) DEFAULT NULL,
PRIMARY KEY (MN_ID)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1

Continue reading »

Jul 112011
 

Assalamu’ alaikum wr wb

Karena banyak yang meminta contoh file untuk Dinamic tree ExtJS maka akhirnya saya buatkan juga file agar bisa di download.

Silakan Download di sini : http://www.ziddu.com/download/15652230/latihanextjs.tar.gz.html

Karena menggunakan CodeIgniter anda harus terlebih dahulu mendownlaoad CI Versi CodeIgniter_1.7.3 atau CodeIgniter_1.7.2, jangan menggunakan yang Versi 2 karena ada banyak perbedaan pada versi tersebut. Untuk ExtJS saya menggunakan Versi 3.

Wassalamu’ alaikum wr wb

Jul 032011
 

Assalamu’ alaikum wr wb

-

more2buy

Setelah beberapa waktu lamanya akhirnya website mall online yang saya buat bersama teman – teman dapat laounching juga.

Bagi teman – teman yang suka menggunakan jasa toko online atau hanya sekedar untuk mau beli, lihat – lihat product anda bisa masuk ke http://www.more2buy.com. salah satu kelebihan dari toko ini adalah kita menyediakan toko ofline juga. Jadi jangan takut kalo memang dekat dengan toko kami anda dapat langsung melihat di toko ofline kami.

Silakan berkunjung di http://www.more2buy.com [beta]

more2buy

Wassalamu’ alaikum wr wb

Apr 062011
 

Assalamu’ alaikum wr wb

Langsung saja berikut source nya :

Ext.override(Ext.form.TextField, {
  initComponent : function(){
    centsLimit = 2;
    centsSeparator = '.';
    thousandsSeparator = ',';
    limit = false;
    prefix = '';
  }
  ,to_numbers : function (str) {
    var formatted = '';
    var is_number = /[0-9]/;
    for (var i=0;i<(str.length);i++) {
      char = str.charAt(i);
      if (formatted.length==0 && char==0) char = false;
      if (char && char.match(is_number)) {
        if (limit) {
          if (formatted.length < limit) formatted = formatted+char;
        }else{
          formatted = formatted+char;
        }
      }
    }
    return formatted;
  }
  ,fill_with_zeroes : function(str){
    while (str.length<(centsLimit+1)) str = '0'+str;
      return str;
  }
  ,price_format : function (str) {
    var formatted = this.fill_with_zeroes(this.to_numbers(str));
    var thousandsFormatted = '';
    var thousandsCount = 0;
    var centsVal = formatted.substr(formatted.length-centsLimit,centsLimit);
    var integerVal = formatted.substr(0,formatted.length-centsLimit);
    formatted = integerVal+centsSeparator+centsVal;
      if (thousandsSeparator) {
        for (var j=integerVal.length;j>0;j--) {
          char = integerVal.substr(j-1,1);
          thousandsCount++;
          if (thousandsCount%3==0) char = thousandsSeparator+char;
          thousandsFormatted = char+thousandsFormatted;
        }
      if (thousandsFormatted.substr(0,1)==thousandsSeparator)
      thousandsFormatted = thousandsFormatted.substring(1,thousandsFormatted.length);
      formatted = thousandsFormatted+centsSeparator+centsVal;
    }
    if (prefix) formatted = prefix+formatted;
      return formatted;
  }
  ,keydown : function(obj, evt){
     var code = (evt.keyCode ? evt.keyCode : evt.which);
     var typed = String.fromCharCode(code);
     var functional = false;
     var str = this.getValue();
     var newValue = this.price_format(str+typed);
     if(code >= 96 && code <= 105) functional = true;
     if (code ==  8) functional = true;
     if (code ==  9) functional = true;
     if (code == 13) functional = true;
     if (code == 37) functional = true;
     if (code == 39) functional = true;
     if (!functional) {
       if (str!=newValue) this.setValue(newValue);
     }
  }
  ,keyup : function () {
    var str = this.getValue();
    var price = this.price_format(str);
    if (str != price) this.setValue(price);
  }
  ,initEvents : function() {
     this.el.on("keydown", this.keydown, this);
     this.el.on("keyup", this.keyup, this);
  }
})

Jun 222010
 

Assalamu’ alaikum wr wb

Mohon maaf kepada semua cucu – cucu 😀 yang sering berkunjung ke blog saya kemaren sempat blog ini mati, maaf lupa belum perpanjang. Terimakasih kepada saudara/adik saya qu4ck yang telah banyak membantu.

Saya kemaren malam sambil sedikit ngantuk telah membuat vidio kelanjutan dari yang kemaren yaitu tutorial ExtJS dan CodeIgniter.

Download

Semoga tutorial ini dapat mebantu teman – teman semua yang lagi suka dengan ExtJS dan CodeIgniter

Wa’ alaikum wr wb