Oct 202013
 

Angularjs Bagian awal

Assalamu’ alaikum wr wb

AngularJs

AngularJs

Berawal dari mengoprek w2ui akhirnya dengan tidak sengaja saya menemukan AngularJs yang merupakan salah satu produk dari google. Karena salah satu product dari google maka saya berusaha untuk mencari tutorial yang lebih banyak mengenai angularjs ini.

Pada tulisan saya yang pertama ini saya hanya akan memberikan sedikit info tentang angularjs tetapi pada tulisan – tulisan saya selanjutnya kita akan belajar bersama bagaimana cara menggunakan angularjs ini.

Apa perbedaan dengan framework javascript yang lainnya ???

Untuk detailnya bisa anda baca pada website resminya http://www.angularjs.com.

Sekian dulu infonya.

Wassalamu’ alaikum wr wb

Apr 112013
 

Tutorial ExtJs 4 Bagian 1 (Panel and menu)

ExtJs

ExtJs

Assalamu’alaikum wr wb

Lama tidak menggunakan ExtJs sekarang mari kita pelajari kembali penggunaan ExtJs 4 untuk pertama kali mari kita pemanasan dengan memanfaatkan panel dan membuat menu dengan menggunakan ExtJs 4.

Seperti biasa berikut adalah contoh script sederhana yang kita buat. Pertama buatlah file html

<html>
	<head>
		<title>Theme Ext</title>
		<link rel="<a>stylesheet</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/style.css">assets/css/style.css</a>" type="<a>text/css</a>" />
		<link rel="<a>stylesheet</a>" type="<a>text/css</a>" href="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/css/resources/css/ext-all.css">assets/css/resources/css/ext-all.css</a>"/>

		<!-- Load ExtJs -->
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/extjs/bootstrap.js">assets/js/extjs/bootstrap.js</a>"></script>
		<script type="<a>text/javascript</a>" src="<a href="view-source:http://lokal.com/latihan/theme-ext/assets/js/layout.js">assets/js/layout.js</a>"></script>

	</head>
	<body>
		<div class="<a>container</a>">
			<div class="<a>span-24 header</a>">
				Sugik Puja Kusuma
			</div>
			<div class="<a>span-24</a>" id="<a>main-panel</a>">
			</div>
		</div>
	</body>
</html>

Setlah itu buat file css style.css

.container {width:950px;margin:0 auto;}
.span-24 {width:950px;margin-right:0;}
.header{
	background-color :green;
	font: normal 12px Arial, Helvetica, Sans-serif;
	color : white;
	margin-top : 10px;
	height : 50px;
}

#main-content-body{
	margin : 5px 5px  5px 5px;
}

Langkah terakhir adalam membuat file layout.js

Ext.require([
    'Ext.panel.Panel',
    'Ext.menu.*',
    'Ext.data.*'
]);
Ext.onReady(function(){

	Ext.create('Ext.panel.Panel', {
        title: 'Admin Aplikasi',
        layout: 'border',
        anchor: '100%',
		height : 700,
        tbar  : [
			{
				text : 'Home' ,
				listeners: {
					click : function (){
						window.location = 'http://lokal.com/latihan/theme-ext/';
					}
				}
			},'-',
			{
				text : 'Master' ,
				menu: [
                    {
						text: "Menu Item 1" ,
						listeners: {
							click : function (){
								Ext.get('main-content').load({
									url:'terima.php',
									scripts:true,
									nocache: true,
									params:{
										kode:'123'
									}
								});
							}
						}
					}
                ]
			},
			{
				text : 'Transaksi' ,
				menu: [
                    {
						text: "Menu Item 1"
					}
                ]
			},
			{
				text : 'Laporan' ,
				menu: [
                    { text: "Menu Item 1" }
                ]
			}
        ],
        renderTo: 'main-panel',
		items : [
			{
				region: 'west',
				title: 'Menu',
				width: 200,
				split: true,
				collapsible: true,
				floatable: true
			},
			{
				region: 'center',
				xtype: 'tabpanel',
				items: [{
					title: 'Content',
					id : 'main-content',
					html: 'Hello world 1',
					scripts: true
				}]
			}
		]
    });
});

Oke selesai, semoga bermanfaat

Download Source code

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

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);
  }
})

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

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