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 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

Dec 142012
 

Assalamu’ alaikum wr wb

CSS3 Animations

Saat membuka beberapa tutorial tentang css3 di http://www.w3schools.com/ saya menemukan sebuah totorial yang menarik dan mungkin akan dapat dikembangkan, sesuai dengan imajinasi teman – teman semua, langsung saja untuk lihat script di bawah dan silakan di coba juga semoga dapat bermanfaat.

</p>
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
</body>
</html>

Sumber : http://www.w3schools.com/css3/css3_animations.asp

Wassalamu’ alaikum wr wb