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

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