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

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

Jan 082011
 

Assalamu’ alaikum wr wb

Berikut beberapa tutorial yang bisa di pelajari.

1. Perintah – perintah dalam linux / linux command.
2. Open Office.
3. Setting samba.
4. Setting clearOS.

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

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

May 262010
 

Assalamu’ alaikum wr wb

Tadi pagi buka – buka hardisk lama saya eh saya menemukan sebua folder bertulisan proteksi jar, trus buka deh didalamnya terdapat beberapa folder :

  1. jode-1.0.92
  2. proguard4.4
  3. retroguard-v2.3.1
  4. Dan beberapa file yang masih dalam kondisi rar file.

Mulailah buka – buka satu satu, akhirnya saya mencoba proguard4.4 ternyata bagus tuh aplikasi untuk meprotrksi aplikasi yang sudah menjadi jar. setelah proses encrip selesai, jika di decompiler maka class di dalamnya akan acak. untuk informasi lebih lanjut anda bisa masuk ke http://proguard.sourceforge.net/

Ini sekedar info bagi anda yang ingin jar nya di protek monggo, yang tidak ya monggo 😀

Wassalamu’ alaikum wr wb

Apr 182010
 

Assalamu’ alaikum wr wb

Lama tidak menulis kali ini saya akan membahas tentang membuat multi aplikasi dalam FrameWork CodeIgniter, Sebenarnya tutorial ini sudah ada dalam manual CodeIgniter, tapi mungkin penjelasannya kita kurang paham, semoga dengan adanya tulisan ini kita dapat membuat beberapa aplikasi dalam CodeIgniter kita.

Ada dua cara yang bisa kita gunakan.

  1. Aplikasi masih dalam folder System.
  2. Aplikasi terpisah dengan folder System.

Folder masih dalam System.

Semisal kita akan membuat dua aplikasi, yang pertama bersifat public dan satunya ada yang bersifat khusus untuk admin. pertama buat dua buah folder pada folder : Continue reading »

Feb 232010
 

bagi pengguna java saat menggunakan JTable mungkin anda ingin memasukkan combo ke dalam jtable anda.

Kali ini saya akan menunjukkan bagaimana cara memasukkan sebuah Object JComboBox Kedalam JTabel siap !!!!!.

Yang pertama buat sebuah class dengan nama mComboEditor :


package demoCombo;

import javax.swing.ComboBoxModel;
import javax.swing.DefaultCellEditor;
import javax.swing.JComboBox;
/**
 *
 * @author mbahsomo
 */
public class mComboEditor extends  DefaultCellEditor{
 public mComboEditor(ComboBoxModel item) {
 super(new JComboBox(item));
 }
}

Kemudian buat sebuah JFrame dengan sebuah JTable Di dalamnya :

package demoCombo;

import javax.swing.ComboBoxModel;
import javax.swing.DefaultComboBoxModel;

/**
 *
 * @author mbahsomo
 */
public class LatihanTabel extends javax.swing.JFrame {

 /** Creates new form LatihanTabel */
 public LatihanTabel() {
 initComponents();
 jTable1.getColumnModel().getColumn(1).setCellEditor(new mComboEditor(getIsiCombo()));
 }

 private ComboBoxModel getIsiCombo(){
 DefaultComboBoxModel model = new DefaultComboBoxModel();
 for(int a = 1 ; a <= 10 ; a++){
 model.addElement("Isi Combo Ke " + a );
 }
 return model ;
 }
 /** This method is called from within the constructor to
 * initialize the form.
 * WARNING: Do NOT modify this code. The content of this method is
 * always regenerated by the Form Editor.
 */
 @SuppressWarnings("unchecked")
 // <editor-fold defaultstate="collapsed" desc="Generated Code">
 private void initComponents() {

 jScrollPane1 = new javax.swing.JScrollPane();
 jTable1 = new javax.swing.JTable();

 setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
 setTitle("Latihan Combo");

 jTable1.setModel(new javax.swing.table.DefaultTableModel(
 new Object [][] {
 {null, null},
 {null, null},
 {null, null},
 {null, null}
 },
 new String [] {
 "Text Biasa", "Combo"
 }
 ));
 jScrollPane1.setViewportView(jTable1);

 javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
 getContentPane().setLayout(layout);
 layout.setHorizontalGroup(
 layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
 .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
 .addContainerGap(15, Short.MAX_VALUE)
 .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 398, javax.swing.GroupLayout.PREFERRED_SIZE)
 .addContainerGap())
 );
 layout.setVerticalGroup(
 layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
 .addGroup(layout.createSequentialGroup()
 .addContainerGap()
 .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 256, javax.swing.GroupLayout.PREFERRED_SIZE)
 .addContainerGap(14, Short.MAX_VALUE))
 );

 java.awt.Dimension screenSize = java.awt.Toolkit.getDefaultToolkit().getScreenSize();
 setBounds((screenSize.width-431)/2, (screenSize.height-308)/2, 431, 308);
 }// </editor-fold>

 /**
 * @param args the command line arguments
 */
 public static void main(String args[]) {
 java.awt.EventQueue.invokeLater(new Runnable() {
 public void run() {
 new LatihanTabel().setVisible(true);
 }
 });
 }

 // Variables declaration - do not modify
 private javax.swing.JScrollPane jScrollPane1;
 private javax.swing.JTable jTable1;
 // End of variables declaration

}

Ok Sekarang tinggal jalankan program dan silakan di explorasi sendiri 😀

Feb 122010
 

Saat kita membuat sebuah program terkadang kita ingin mengambil event pada sebuah object. Sekarang kita akan membahas event yang terdapat pada Grid OpenSwing. Karena pada OpenSwing Menggunakan Metode MVC [Model View Controoler], sehingga pada beberapa komponennya pun banyak yang menggunakan metode itu.

Termasuk pada Grid [Bukan Jtable] untuk mengolah sebuah grid kita harus menggunakan class Controller yang akan menghandle semua propses pada Grid tersebut. Sekarang kita akan coba melihat event – event apa saja yang terdapat dan dapat di handle oleh class GridController pada OpenSwing.

  1. LoadData
  2. InserRecord
  3. deleteRecords
  4. dll

Ada banyak event yang bisa di tangani termasuk event enter pda grid. Tetapi ternyata tidak da evnt KeyPress pada grid. saat kita mau mengambil eventKey pada grid ternyata tidak bisa. Nah jalan keluarnya adalah dengan menambahkan event tersebut pada Controller grid.

Berikut langkah – langkahnya :

  1. Download source Openswing di http://opswing.sourceforge.net
  2. Extrack File.
  3. Kemudian edit file Grid.java dan GridController.java

Dua file tersebut terletak pada package org.openswing.swing.table.client.

Edit Grid.java :

public void keyReleased(KeyEvent e) {
 gridController.keyReleased(getSelectedRow(), Grid.this.model.getObjectForRow(getSelectedRow()),e);
 if (Grid.this.grids.getCurrentNestedComponent() != null) {
 if (Grid.this.grids.getCurrentNestedComponent() instanceof Grid
 && e instanceof KeyEvent
 && ((KeyEvent) e).getKeyCode() == e.VK_TAB) {
 return;
 }
 Grid.this.grids.getCurrentNestedComponent().dispatchEvent(e);
 //              e.consume();
 repaint();
 return;
 }

 if (getMode() == Consts.READONLY) {
 controlDown = e.isControlDown();
 } else {
 controlDown = false;
 }
}

lihat script pada baris ke dua.

gridController.keyReleased(getSelectedRow(),  Grid.this.model.getObjectForRow(getSelectedRow()),e);

pada event tersebut saya menambahkan tiga buah parameter pada event keyRelease

  1. Baris grid yang sedang aktif.
  2. Nilai berupa object data.
  3. keyEvent.

kemudian tambahkan method keyReleased pada GridController

public void keyReleased(int rowNumber,  ValueObject persistentObject, java.awt.event.KeyEvent evt) {}

Sekarang tinggal clean and build agar bisa menjadi jar dan masukkan hasil kompilan ke project kamu dan coba munculkan event pada GridController kamu.

Sekian semoga membantu

Forum : http://forum.do-event.com/viewtopic.php?f=31&t=51