Basic Code | Pada halaman sebelumnya kita telah membahas tahap demi tahap pembuatan dan penempatan file pendukung dari Framework ExtJS, selanjutnya pada halaman ini adalah Tahap Pengkodingan. Tetapi sebelum itu kita buat folder baru dan diberinama "JS" terlebih dulu pada lokasi "C:\xampp\htdocs\Login-Framework-Ext\JS". Pada folder "JS" inilah nantinya kita akan menempatkan file - file Javascript untuk memuat sebuah tampilan Form Login.
Selanjutnya buka dan jalankan Script Editor yang dimiliki, tapi disini saya menggunakan Notepad ++, alasannya disamping penggunaannya ringan juga sangat simple dan mudah. Ok langsung saja,
Pertama - tama kita buat terlebih dahulu sebuah tampilan Window dan Form Panel-nya. ketikkan kode javascriptnya seperti di bawah ini, kemudian Save-as dengan nama Login.js di lokasi : " C:\xampp\htdocs\Login-Framework-ExtJS\js ".
// JavaScript Document
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.form.FormPanel({
frame: true,
border: false,
labelWidth: 90,
width:347,
autoHeight:true,
bodyStyle:'padding: 10px 15px 15px 15px',
items:[{
xtype: 'fieldset',
title: 'Login',
defaultType: 'textfield',
defaults: {
width: 350,
padding: 5
},
items: [{
fieldLabel:'Username',
id:'txtUsername',name:'txtUsername',
width: 280,
allowBlank:false
},{
fieldLabel:'Password',
id:'txtPassword',name:'txtPassword',
width: 280,
allowBlank:false,
inputType:'password'
}
]
}]
});
var loginWindow = new Ext.Window({
title: 'Please Login',
layout: 'fit',
closable: false,
resizable: false,
draggable: false,
border: false,
modal: true,
widht:325,
height:193,
items:login.show(), /* Memunculkan Form Panel */
buttons:[{
text:'Login',
}]
});
loginWindow.show(); /* Memunculkan Window */
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan</title>
<!-- memanggil script ext-all.css pada lokasi folder
"C:\xampp\htdocs\Login-Framework-ExtJS\ext\resources\css" -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/
ext-all.css" />
<!-- memanggil script ext-all.js pada lokasi folder
"C:\xampp\htdocs\Login-Framework-ExtJS\ext" -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- memanggil script login.js pada lokasi folder
"C:\xampp\htdocs\Login-Framework-ExtJS\js" -->
<script type="text/javascript" src="./js/login.js"></script>
</head>
<body>
</body>
</html>
See the Pen Membuat Tampilan Login Web Layaknya Aplikasi Desktop by Basic Code (@basiccode) on CodePen.
Kurang lebih seperti itulah hasilnya, Sekian dan semoga bermanfaat !!
Casino, Slots, Blackjack, Poker - MapYRO
ReplyDeleteThe following table includes table game 안성 출장마사지 tables with video video poker machines, a 광명 출장안마 game area, video video poker, 김천 출장샵 poker tables 대전광역 출장마사지 and game room information. 상주 출장샵