Silabus
Materi 1
Materi 2
Materi 3
Materi 4
Materi 5
Materi 6
Materi 7
Materi 8

Materi 1, Materi 2, Materi 3, Materi 4, Materi 5, Materi 6, Materi 7

Pada tutorial sebelumnya kita sudah mencoba bagaimana membuat sebuah “Hello World” dengan ExtJS. Pada tutorial kali ini kita masih akan membuat “Hello World” hanya saja sekarang kita akan melakukan say hello kepada server secara asinkron.
Sebelum mulai pastikan web server anda berjalan dengan baik dan siapkan semua peralatan yang diperlukan (jangan lupa kopi dan snack).

Secara default ExtJS melakukan komunikasi dengan server (request & response) secara asinkron atau biasa disebut dengan AJAX, sehingga dalam membuat aplikasi web berbasis AJAX tidaklah sulit.

Kita akan mencoba membuat sebuah form dengan sebuah textfield dan button didalamnya, yang akan mengirimkan data dalam form saat tombol di klik, lalu server menerima request dan melakukan response.

Buat sebuah file helloclient.html dengan editor anda dan ketik kode berikut didalam head dibawah link ke file-file ExtJS.

<script>
	Ext.onReady(function() {
		var formbaru = new Ext.FormPanel({
			labelWidth: 80,
			url: 'helloserver.php',
			title: 'Say Hello to Server',
			width: 250,
			renderTo: document.body,
			items: [{
				xtype: 'textfield',
				name: 'txtNama',
				fieldLabel: 'Nama'
			}, {
				buttons: [{
					text: 'Hello Server',
					handler: function() {
						formbaru.getForm().submit({
							waitMsg: 'Tunggu ya...',
							success: function(form, action) {
								Ext.Msg.alert('Hello',action.result.nama);
								formbaru.getForm().clear;
							},
							failure: function(form,action) {
								Ext.Msg.alert('salah', action.result.error);
							}
						});
					}
				}]
			}]
		});
	});
</script>

Berikutnya kita buat file helloserver.php dan ketikkan kode berikut ini

<?php
	$nama = trim($_POST['txtNama']);
	if(!empty($nama)) {
		echo '{"success":"true", "nama":"'.$nama.'"}';
	} else {
    	echo '{"error":"nama belum diisi"}';
	}
?>

Jika anda menggunakan JSP sebagai server side scripting maka kita tinggal ubah dibagian url: ‘helloserver.php’ menjadi url: ‘helloserver.jsp’ lalu ketikkan kode berikut kedalam file helloserver,jsp

<%
	String nama = request.getParameter("txtNama");
	if (!nama.trim().equals("")) {
		out.print("{'success':'true', 'nama':'" + nama + "'}");
	} else {
		out.print("{'error':'nama tidak boleh kosong'}");
	}
%>

Setelah selesai silahkan dicoba di web browser anda dengan mengetikkan http://localhost/belajarextjs/helloclient.html

Jika nama tidak diisi maka akan tampil seperti berikut

Oke sekian dulu untuk tutorial kali ini, tunggu tutorial bagian berikutnya …

Teman saya seorang web developer pernah menyarankan saya untuk belajar tentang ExtJS, karena banyak kesibukkan, baru beberapa hari belakangan ini saya sempet belajar tentang ExtJS. Begitu mulai mengenal tentang ExtJS saya mulai menyadari bahwa apa yang disarankan teman saya itu ternyata benar (thanks om). Setelah membaca beberapa tutorial dan mencobanya secara langsung, saya mulai menikmati membuat aplikasi web dengan ExtJS, karena hanya dengan sedikit usaha, saya bisa membuat sesuatu yang hebat.

Oke cukup curhatnya sekarang saya ingin membagikan sedikit dari apa yang sudah saya pelajari tentang ExtJS.

“Apa itu ExtJS?” pertanyaan itu mungkin yang pertama kali muncul saat membaca judul artikel ini. Pertanyaan yang sama juga saya tanyakan kepada teman saya saat dia memberitahu tentang ExtJS.
ExtJS adalah sebuah library (framework) Javascript yang powerfull yang dapat menyederhanakan pembuatan aplikasi web berbasis AJAX. Selain mempermudah proses request dan response secara asynchronous, ExtJS juga menyediakan komponen-komponen yang bisa kita gunakan untuk membangun antarmuka aplikasi web. Komponen-komponen yang disediakan juga sangat banyak seperti tombol, grid, tab, tree, menu dan lainnya.

ExtJS dapat dijalankan pada semua web browser yang populer saat ini dengan tampilan yang sama antar browser (cross browser). Beberapa web browser yang mendukung ExtJS diantaranya adalah:

• Internet Explorer versi 6 keatas
• Mozilla Firefox versi 1.5 keatas
• Apple Safari versi 2 keatas
• Opera versi 9 keatas

Saat ini ExtJS sudah sampai versi 2.2.1 yang dapat didownload di extjs.com

Seperti kebiasaan sebelumnya, saat orang yang baru mempelajari sebuah bahasa pemrograman, maka akan membuat sebuah program “Hello World”, maka kita juga akan mencoba membuat sebuah “Hello World” dengan ExtJS.

Sebelum mulai, beberapa hal yang harus kita siapkan sebelum mempelajari ExtJS adalah:

• ExtJS
• Web Server, contohnya apache. Untuk mempermudah dapat menggunakan XAMPP
• Editor, saya menggunakan Netbeans 6.5
• Web browser
• Kopi & snack

Setelah peralatan lengkap, saatnya kita beraksi
Pertama buatlah sebuah folder di htdocs, kita beri nama belajarextjs saja biar mudah mengingatnya. Setelah itu ekstraklah ExtJS ke dalam folder yang baru kita buat, lalu ubah nama foldernya menjadi extjs.
Buat sebuah file dengan nama hello.html dengan editor anda. Untuk bisa bekerja dengan ExtJS kita harus melakukan link kebeberapa file seperti berikut

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/adapter/ext/ext-base.js"></script>
<script src="extjs/ext-all-debug.js"></script>

Link ke file ext-all-debug.js hanya dilakukan pada saat pengembangan, jika aplikasi sudah selesai dan siap online, link tersebut harus diganti ke file ext-all.js
Berikutnya kita akan membuat skrip untuk menampilkan pesan “Hello World”.
Tambahkan kode berikut ini dibawah link ke ExtJS

<script>
Ext.onReady(function() {
   Ext.Msg.alert('Pesan', 'Hello World');
});
</script>

Secara lengkap file hello.html akan berisi seperti ini

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script src="extjs/adapter/ext/ext-base.js"></script>
        <script src="extjs/ext-all-debug.js"></script>
        <script>
            Ext.onReady(function() {
                Ext.Msg.alert('Pesan', 'Hello World');
            });
        </script>
    </head>
    <body>

    </body>
</html>

Setelah selesai simpan file dan coba jalankan di browser anda dengan mengetikkan http://localhost/belajarextjs/hello.html

Oke sekian dulu tutorial ExtJS bagian 1 ini, selamat belajar

Kecerdasan Buatan
Kelas G : Kamis 26 Februari 2009, Jam 7.30 – 9.00, GX.204
Kelas F : Kamis 26 Februari 2009, Jam 10.00 – 11.30, GX.203
Kelas E : Jumat 27 Februari 2009, Jam 16.00 – 17.30, GX.101

Sistem Pakar
Kelas B : Jumat 27 Februari 2009, Jam 13.00 – 14.30, GX.203

Mohon hadir tepat waktu

Teman-teman JUG-Joglosemar semuanya, JaMU bulan Januari 2009 akan diadakan di

Tempat : Auditorium Universitas Janabadra
Alamat : Jl Tentara Rakyat Mataram No. 55-57 Yogyakarta
Tanggal : 17 Januari 2009
Jam : 09.00 – selesai

Untuk materi kali ini, kita akan membahas tentang web dan web service

Acara ini bersifat GRATIS, jadi silahkan langsung datang dan ajak teman yang banyak, karena kapasitas ruang mencapai 400 orang

Untuk informasi lebih lengkap bisa menghubungi
Yudi – 08568598739 atau Deny – 02747884821

Ditunggu kedatangannya

Untuk menuju ke Universitas Janabadra, teman-teman dapat naik bus Trans Jogja dan turun di Samsat Kota lalu jalan menuju kearah barat sekitar 400 meter atau naik bis jalur 15 turun di pertigaan toko Atakrib pingit lalu jalan kearah selatan sekitar 20 meter

Kadang kita memerlukan nilai yang didapat dari ComboBox berbeda dari yang ditampilkan, misalnya jika kita memilih kota Yogyakarta, maka data yang kita peroleh bukan String “Yogyakarta” melainkan kode area telepon “0274″.

Bagi programmer web yang biasa menggunak HTML hal ini sangat mudah dilakukan, karena kita bisa set value berbeda dari apa yang ditampilkan, tetapi bagaimana caranya jika di Java Swing?

Ada beberapa cara untuk dapat melakukan hal tersebut, bisa membuat model sendiri (saya masih belum ngerti) atau menggunakan library glazedlists (belum coba). Tetapi sebenarnya tanpa kedua cara tersebut kita masih dapat membuatnya.

Oke misalkan kita punya sebuah tabel yang berisi data kota yang kita beri nama kota

+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| kode  | varchar(4)  | NO   | PRI |         |       |
| nama  | varchar(20) | NO   |     |         |       |
+-------+-------------+------+-----+---------+-------+

lalu kita isikan beberapa data

+------+------------+
| kode | nama       |
+------+------------+
| 021  | Jakarta    |
| 022  | Bandung    |
| 0274 | Yogyakarta |
| 0271 | Surakarta  |
+------+------------+

Langkah selanjutnya kita akan membuat class POJO dari tabel kota tersebut

public class Kota {
    private String kode;
    private String nama;

    public Kota(String kode, String nama) {
        this.kode = kode;
        this.nama = nama;
    }
    public String getKode() {
        return kode;
    }
    public void setKode(String kode) {
        this.kode = kode;
    }
    public String getNama() {
        return nama;
    }
    public void setNama(String nama) {
        this.nama = nama;
    }
}

Berikutnya kita membuat JFrame yang didalamnya terdapat komponen JComboBox dan JTextField seperti gambar diatas. Selanjutnya kita membuat sebuah List untuk menampung objek kota.

private List<Kota> lstKota = new ArrayList<Kota>();

lalu di dalam konstruktor frame kita akan membuat kode untuk mengambil data kota dari tabel dan dimasukkan ke dalam JComboBox.

Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/latihan", "root", "root");
Statement st = conn.createStatement();
String sql = "select * from kota";
ResultSet rs = st.executeQuery(sql);
while(rs.next()) {
    Kota kt = new Kota(rs.getString("kode"),rs.getString("nama"));
    lstKota.add(kt);
    jComboBox1.addItem(kt.getNama());
}

selanjutnya di dalam event ActionPerformed JComboBox masukkan kode berikut untuk mengambil “kode” kota

jTextField1.setText(lstKota.get(jComboBox1.getSelectedIndex()).getKode());

Jika sudah selesai silahkan coba dijalankan.

Kode diatas saya coba dan berhasil menggunakan JDK 1.5 dan Netbeans 6.5

Terima Kasih untuk temen-temen di JUG-Joglosemar yang sudah membantu saya belajar Java

Selamat belajar

JaMU JUG-Joglosemar bulan September 2008 akan diadakan di:
Tempat: STMIK Pelita Nusantara, Jl. C. Simanjuntak No. 99, utara mirota kampus
Hari, tanggal: Sabtu, 13 September 2008
Waktu: 09.00 – selesai

Informasi: yudi, 08568598739

STMIK Pelita Nusantara bekerja sama dengan JUG-Joglosemar akan mengadakan pelatihan Java yang akan diadakan di Lab STMIK Pelita Nusantara selama 5 hari, 6 jam/hari, mulai dari jam 9 sampai 16. 
Pelatihan ini dibagi menjadi dua materi yaitu Java Fundamental dan Java Advance.
Biaya untuk Fundamental adalah Rp.300.000 sedangkan untuk Advance adalah Rp.360.000, apabila mengambil 2 materi (fundamental & advance) sekaligus akan mendapat diskon sebesar Rp.60.000, sehingga cukup membayar Rp.600.000
Adapun fasilitas yang didapat oleh peserta adalah: modul, cd, sertifikat dan makan siang

Bagi yang berminat silahkan datang langsung ke STMIK Pelita Nusantara Yogyakarta, Jl. C. Simanjuntak No 99 Yogyakarta, hari senin-sabtu pada jam kerja

untuk informasi lebih lanjut dapat menghubungi Yudi di 08568598739 atau yudianto.sujana@gmail.com