Sep 022016
 

Asalamu’alaikum wr wb

Kita awali pembahasan kali ini dengan materi ringan tentang angularjs saya sudah pernah berbagi tentang angularjs (http://sugik.do-event.com/2013/10/angularjs-bagian-1-basics/) tapi tidak ada salahnya jika sedikit review dan ulas balik tentang framework javascript yang satu ini.

Mengapa Harus AngularJs

HTML ada lah static document yang sering kita gunakan dalam pembuatan website, tetapi dengan adanya AngularJs sebuah halaman website akan dengan mudahnya kita dapat mengulah dan mengembangkannya menjadi sebuah halaman dinamik.

Alternatif

Kenapa tidak yang lain, inilah salah satu kelebihan dan AngularJs dia sangat mudah dan simple dalam pengolahan halaman HTML.

Pengembangan dan perkembangan 

Tidak dapat dipungkiri bahwa sebuah tools digunakan sedangkan pengembang dan perkembangannnya tidak bagus maka kita akan merasa kurang yakin menggunakan nnya. Berbeda dengan AngularJs yang memang sudah dikembangkan oleh google yang kita tau siapa google ? dan didukung oleh komunitas yang pasti tidaklah sedikit.

Dari beberapa alasan diatas maka tidak ada salahnya jika kita mengembangkan aplikasi dengan kerangka dasar menggunakan AngularJs.

Untuk lebih detailnya maka silakan buka halaman websitenya di https://angularjs.org/

Semoga dapat menjadi salah satu pilihan yang membantu. terimakasih

Wassalamu’ alaikum wr wb

Oct 282013
 

AngularJS bagian 1 (Basics)

Assalamu’ alaikum wr wb

Saya kutip dari websit resminya  http://angularjs.org/

<!doctype html>
<html ng-app>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 </head>
 <body>
 <div>
 <label>Name:</label>
 <input type="text" ng-model="yourName" placeholder="Enter a name here">
 <hr>
 <h1>Hello {{yourName}}!</h1>
 </div>
 </body>
</html>

Vidionya : http://www.youtube.com/watch?v=uFTFsKmkQnQ&feature=player_embedded#t=0

wassalamu’ alaikum wr wb

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

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

May 272010
 

Assalamu’ alaikum wr wb

Bagi yang sedang belajar ExtJs ini adalah tutorial dasar untuk pembuatan Panel dan Form dengan ExtJs dan php. semoga bermanfaat .

Download

Wassalamu’ alaikum wr wb

Dec 172009
 
No Images

ExtJS

Lama tidak membuka http://www.extjs.com/ tadi barusan buka eh ternyata ada berita baru ExtJs 3.1 telah release apa saja ya kira – kira tambahan pada versi ini.

Wah akan asik lagi nih untuk explorasi lagi kira – kira ada tambahan apa pada versi ini. untuk dapat mendownloadnya silakan masuk ke sini http://www.extjs.com/products/extjs/download.php .

Sudah siap untuk explorasi lagi …….ok mari kita explor lagi.

Sep 172009
 

PopUp Menu

PopUp Menu

Pada tutorial kali ini saya akan menunjukkan bagaimana membuat popup menu pada halaman html yang kita buat, dengan adanya popup menu ini kita akan dapat membuat menu klik kana sesuai dengan keinginan kita, ada beberapa hal yang kita butuhkan dalam pembuatan popup menu ini.

  1. Library ExtJs.
  2. yang jelas ya sebuah halaman html

Untuk mematikan event clik kanan pada halaman html anda dapat menambahkan scrip pada body html kamu

<body oncontextmenu="return false;">

ok diatas telah kita buat sebuah source untuk mematikan event klik kana pada halaman html kita. selanjutnya kita akan membuat popup menunya dengan memanfaatkan library dari ExtJs. ok silakan tulis coding di bawah ini

Ext.onReady(function(){
  Ext.QuickTips.init();
  Ext.getBody().on('contextmenu', function(e){
    taskContextMenu.showAt(e.getXY());
  });
  var taskContextMenu = new Ext.menu.Menu();
  taskContextMenu.add(
    new Ext.menu.Item({text: 'HOME', id:'1',handler:  loadNewPages}),
    new Ext.menu.Separator(),
    new Ext.menu.Item({text: 'ABOUT', id:'2',handler:  loadNewPages})
  );

  function loadNewPages(node){
    if(node.id=='1'){
      window.location="#";
    }else if(node.id=='2'){
      Ext.Msg.alert('ABOUT', '<b>WELCOME<b><br>ANDA BERADA PADA EVENT ABOUT');
    }
  }

});

ok mudah kan sekarang coba klik kanan pada halaman html kamu pasti bisa deh 😀