SlideShare a Scribd company logo
1 of 44
Download to read offline
MODULAR JAVA
KONSOLE, DESKTOP, WEB DAN ANDROID
TRI SAPTO ADJI
21 April 2014
Ringkasan
Java merupakan salah satu bahasa pemrograman yang paling modular. Sejak awal di-
ciptakan, java telah mengusung konsep modular. Kelas-kelas yang telah dibuat dapat de-
ngan mudah diimplementasikan di berbagai lingkungan antarmuka yang berbeda. Kali ini,
Penulis mencoba berbagi pengalaman penulis saat belajar membuat sebuah aplikasi java
berbasis konsole, yang kemudian salah satu kelas yang digunakan dalam aplikasi tersebut
dapat diterapkan (digunakan kembali) pada program lainnya dalam lingkungan antarmuka
yang berbeda, yakni : desktop, web, dan Android. Kelas yang akan kita gunakan kembali
tersebut, sebelumnya telah dibahas dalam tulisan sebelumnya yakni myJavaNote03.pdf.
Pembahasan masih menggunakan java versi 1.6. Source code ditulis menggunakan text
editor dan dikompilasi melalui terminal, kecuali pembahasan mengenai aplikasi Android
yang sudah menggunakan IDE Eclipse. Tulisan ini hanya membahas masalah pembuatan
aplikasi, tidak membahas masalah bagaimana instalasi dari environment yang diperlukan.
Jadi dianggap pada sistem komputer Anda telah terinstall Java Runtime Environment, Java
Development Kit, modul java untuk Browser, Eclipse IDE, integrasi modul Android dengan
Eclipse. Jika belum, dan Anda ingin mempraktekan apa yang ada pada tulisan ini, maka
Anda harus terlebih dahulu mencari sumber lain mengenai cara instalasi kesemua paket-
paket tersebut.
1 Pembagian Kelas
Salah satu hal terpenting saat merancang sebuah program yang berbasis Object adalah memi-
sahkan antara kelas utama yang mengatur perhitungan dan alur program, dan kelas lainnya yang
mengatur antarmuka (bagaimana program tersebut ditampilkan). Hal ini sudah Penulis tunjukan
di tulisan sebelumnya (file ’myJavaNote03.pdf’), dimana rutin yang mengatur proses perhitungan
dituliskan dalam kelas ’AkarKuadrat.java’ dan yang mengatur tampilan (basis konsole) ditulis-
kan dalam kelas ’HitungAkarKuadrat.java’, yang kemudian masing-masing dikompilasi menjadi
’AkarKuadrat.class’ dan ’HitungAkarKuadrat.class’.
Sekedar untuk mengingatkan kembali, berikut adalah source code kedua kelas tersebut :
(i) Kelas yang merancang proses perhitungan :
//Berkas AkarKuadrat.java
//Author : Tri Sapto Adji
// @Manokwari, Papua Barat
public class AkarKuadrat {//awal blok kelas AkarKuadrat dimulai
private int a;
private int b;
1 PEMBAGIAN KELAS halaman 1 dari 44
private int c;
double x1;
double x2;
double determinan;
public AkarKuadrat(int a, int b, int c) {//awal blok
konstruktor
kelas
AkarKuadrat
this.a = a;
this.b = b;
this.c = c;
double d = Math.pow(this.b, 2) - 4*this.a*this.c;
determinan = d;
double x1 = ((-1*(this.b)) + Math.sqrt(determinan))/
(2*this.a);
this.x1 = x1;
double x2 = ((-1*(this.b)) - Math.sqrt(determinan))/
(2*this.a);
this.x2 = x2;
}//akhir blok konstruktor kelas AkarKuadrat
int nilaiA() {
return this.a;
}
int nilaiB() {
return this.b;
}
int nilaiC() {
return this.c;
}
}//Akhir blok kelas AkarKuadrat, Akhir berkas AkarKuadrat.java
(ii) Kelas yang mengatur tampilan pada lingkungan konsole :
//Berkas HitungAkarKuadrat.java
//program ini membutuhkan berkas AkarKuadrat.class pada direktori
kerja
//Author : Tri Sapto Adji @Manokwari, Papua Barat
public class HitungAkarKuadrat {
public static void main(String[] args) {
//jika pemanggilan kelas tidak disertai 3 buah argumen, maka :
if(args.length != 3){
System.err.println("nOops ... Jumlah argumen yang Anda
masukkan tidak sesuai ....");
System.err.println("Harus ada 3 argumen...");
System.err.println("Sintaks penulisan yang benar adalah
: java HitungAkarKuadrat <a> <b> <c>");
System.err.println("Dimana <a> adalah argumen pertama,
<b> adalah argumen kedua dan <c> adalah argumen ketiga
n");
System.exit(1);//keluar dari program
}
try{
//argumen pertama menjadi nilai variabel a :
1 PEMBAGIAN KELAS halaman 2 dari 44
nt a = Integer.valueOf(args[0]).intValue();
//argumen kedua menjadi nilai variabel b :
int b = Integer.valueOf(args[1]).intValue();
//argumen ketiga menjadi nilai variabel c :
int c = Integer.valueOf(args[2]).intValue();
//Membuat obyek dari kelas AkarKuadrat dan menjadikan
nilai variabel a, b dan c sebagai argumen dari obyek
tersebut :
AkarKuadrat ak = new AkarKuadrat(a,b,c);
//Membuat Keterangan Program, dilarang menghapus
keterangan ini!
System.out.println("n-------------------------------");
System.out.println("| author : Tri Sapto Adji |");
System.out.println("| @Manokwari, Papua Barat |");
System.out.println("-------------------------------");
System.out.println("nMENGHITUNG AKAR PERSAMAAN KUADRAT
(ax^2 + bx + c = 0)");
System.out.println("===================================
==================n");
//Menginformasikan nilai variabel a, b, c yang telah
Anda masukkan :
System.out.println("Anda memasukkan nilai : a = " + ak.
nilaiA() + ", b = " + ak.nilaiB() + ", c = " + ak.nilaiC
());
//Nilai variabel a tidak boleh 0, karenanya :
if(ak.nilaiA() == 0) {
System.out.println("Ada kesalahan, nilai a tidak boleh
0!");
System.out.println("Silahkan coba lagi ... :)n");
System.exit(2);
}
System.out.println("nHasil perhitungan : ");
System.out.println("-------------------");
//jika determinan bernilai negatif(< 0), maka akarnya adalah
imajiner
//atau bilangan khayal (tidak nyata).
//karenanya bilangan tersebut harus ditampilkan dalam
format i
//dimana i adalah akar dari -1
if(ak.determinan < 0) {
System.out.println("Karena Determinan bernilai
negatif (<0), yakni : Determinan D = " + ak.determinan
+" atau D = " + Math.abs(ak.determinan)+"i^2");
System.out.println("Maka akar-akar yang dihasilkan
adalah bilangan imaginer :");
//jika akar imajiner ini memiliki nilai variabel b=0,
maka :
if(ak.nilaiB() == 0) {
System.out.println("Akar pertama x1 = "+
Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA
()));
System.out.println("Akar kedua x2 = "+
-Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA
()));
System.out.println("Keterangan : i adalah akar
dari -1 (bilangan imaginer)");
1 PEMBAGIAN KELAS halaman 3 dari 44
}else {
System.out.println("Akar pertama x1 = ("+ -ak.nilaiB()
+ " + "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" +
(2*ak.nilaiA()));
System.out.println("Akar kedua x2 = ("+ -ak.nilaiB()
+ " - "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" +
(2*ak.nilaiA()));
System.out.println("Keterangan : i adalah akar dari
-1 (bilangan imaginer)");
}
//jika determinan >=0, maka :
}else {
System.out.println("Determinan D = " + ak.determinan);
System.out.println("Akar pertama x1 = " + ak.x1);
System.out.println("Akar kedua x2 = " + ak.x2);
}
//membuat sebuah baris kosong
System.out.println("");
//jika input argumen bukan berupa angka
}catch(NumberFormatException nfe) {
System.err.println("nAnda memasukan argumen yang bukan
berupa angka ..!");
System.err.println("Sintaks penulisan yang benar adalah :
java HitungAkarKuadrat <a> <b> <c> nNilai <a>, <b>, <c>
harus berupa angka!");
System.err.println("Contoh : java HitungAkarKuadrat 1 -12
32n");
System.exit(3);
}
}
}//Akhir Berkas HitungAkarKuadrat.java
Berikut adalah contoh tampilan aplikasi berbasis konsole tersebut :
1 PEMBAGIAN KELAS halaman 4 dari 44
Untuk lebih jelasnya silahkan lihat kembali artikel ’myJavaNote03.pdf’ tersebut di halaman sli-
deshare http://www.slideshare.net/trisaptoadji/my-javanote03.
2 Merancang Antarmuka Basis Desktop
2.1 Mempersiapkan Komponen
Setelah berhasil membuat program berbasis konsol (terminal) untuk menghitung akar persamaan
kuadrat, kita akan meneruskan dengan program basis GUI yang memanfaatkan kelas yang sama
yakni kelas ’AkarKuadrat.class’ yang telah kita buat dan kompilasi pada pembahasan sebelumnya.
Jadi jangan lupa jika Anda bekerja di direktori yang berbeda copy dulu file ’AkarKuadrat.class’
tersebut ke direktori kerja Anda sekarang.
Untuk itu kita perlu membuat desain antarmuka dari program tersebut. Kita akan mem-
beri nama program ini sebagai JKuadrat. Selanjutnya kita harus mempersiapkan beberapa
komponen GUI yang diperlukan, yakni :
(i) Yang pertama adalah Menu yang memiliki item menu yang jika diklik akan menampilkan
kotak dialog keterangan tentang program ini. Ditempatkan paling atas, di bawah title bar.
(ii) Di bawahnya adalah panel yang menampilkan Heading dari program ini.
(iii) Selanjutnya kotak isian untuk menampung input dari user. Kotak isian ini harus memiliki
label untuk memberikan informasi kepada user bahwa kotak tersebut adalah input dari
variabel a, b, dan c pada persamaan kuadrat ax2
+ bx + c = 0.
(iv) Label yang akan menampilkan hasil dari perhitungan.
(v) Tombol yang akan mengeksekusi proses perhitungan nilai determinan dan akar-akar persa-
maan kuadrat.
(vi) Tombol yang akan membersihkan (mengosongkan) kotak input, beserta tampilan nilai hasil
perhitungan sebelumnya agar dapat melakukan perhitungan lainnya.
Berikut adalah sketsa rancangan antarmuka program tersebut.
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 5 dari 44
JKuadrat ¨¨rr
Menu
MENGHITUNG AKAR PERSAMAAN KUADRAT
(ax2
+ bx + c = 0)
Nilai a Nilai b Nilai c
[1] [2] [3]
Determinan : Akar Pertama (x1) : Akar Kedua (x2) :
[4] [5] [6]
[7]
Hitung Bersihkan
Keterangan :
• [1] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel a.
• [2] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel b.
• [3] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel c.
• [4] : Obyek berkelas JLabel sebagai output dari Nilai Determinan.
• [5] : Obyek berkelas JLabel sebagai output dari Nilai Akar Pertama.
• [6] : Obyek berkelas JLabel sebagai output dari Nilai Akar Kedua.
• [7] : Obyek berkelas JLabel untuk menampilkan keterangan apabila Determinan bernilai
negatif.
Langkah-langkah untuk mempersiapkan semua komponen pada gambar adalah sebagai berikut :
(a) Kita mulai dengan mendeklarasikan beberapa variabel yang akan digunakan sebagai variabel
yang dapat diakses di seluruh bagian internal kelas.
private JMenuItem item;
private JFormattedTextField a; //[1]
private JFormattedTextField b; //[2]
private JFormattedTextField c; //[3]
private JLabel determinan; //[4]
private JLabel akar1; //[5]
private JLabel akar2; //[6]
private JLabel ket; //[7]
private JButton hitung;
private JButton bersih;
(b) Mengatur tampilan, mulai dari judul paling atas, yakni menampilkan nama program ’JKua-
drat’. Hal ini dapat kita lakukan dengan pernyataan :
super("JKuadrat");
(c) Menyiapkan tempat untuk meletakkan obyek Menu, kemudian meletakkan Menu pada tempat
tersebut, melalui pernyataan :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 6 dari 44
JMenuBar batangMenu = new JMenuBar();
setJMenuBar(batangMenu);
JMenu menu = new JMenu("Menu");
batangMenu.add(menu);
(d) Pada obyek Menu, kita meletakkan obyek berkelas JMenuItem yang bila diklik akan menam-
pilkan jendela berisi keterangan tentang Program ini.
item = new JMenuItem("Tentang JKuadrat", cekIcon("JKuadrat.png"));
menu.add(item);
item.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
if(ae.getSource() == item) keterangan();
}
});
’keterangan()’ yang terdapat pada kode tersebut adalah nama dari sebuah metode yang kita
buat sendiri dengan kode sebagai berikut :
private void keterangan() {
JOptionPane.showMessageDialog(
null,
"<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar
persamaan kuadrat</h3>" +
"<br>Dibuat oleh Tri Sapto Adji"+
"<br>@Manokwari, Papua Barat Indonesia<br>Oktober 2011"+
"<br><br>JKuadrat by Tri Sapto Adji is is a Freeware."+
"<br>It was created in order to be usefull"+
"<br>but "Without Any Guarantee" for the mistake"+
"<br>or error that’ll happen by using this program." +
"<br>Use it at your own risk!",
"Tentang JKuadrat",
1, cekIcon("JKuadrat2.png")
);
}
Sedangkan ’cekIcon()’ yang terdapat dalam kode-kode tersebut, adalah sebuah metode yang
digunakan untuk menampilkan gambar. Ada dua gambar yang kita gunakan dalam program
ini, yakni :
• gambar logo program JKuadrat.
• gambar keterangan tentang i sebagai symbol dari
√
−1.
Gambar-gambar tersebut dapat Anda unduh di akhir tulisan ini.
Kode dari metode ’cekIcon()’ tersebut adalah sebagai berikut :
private ImageIcon cekIcon(String path) {
URL imgURL = CariAkarKuadrat.class.getResource(path);
if(imgURL != null) {
return new ImageIcon(imgURL);
}else {
System.err.println("Maaf, icon pada " + path + " tidak ada");
return null;
}
}
Perhatikan baris pernyataan :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 7 dari 44
System.err.println("Maaf, icon pada " + path + " tidak ada");
Baris tersebut berguna saat Anda menjalankan program ini melalui konsole (saat kompilasi),
untuk mengecek apakah gambar yang disebutkan namanya sebagai argumen ada pada path
yang disebutkan. Pernyataan ini dapat Anda hilangkan, dan tidak akan berpengaruh jika
kelak program ini dijalankan melalui desktop (dengan meng-klik mouse).
(e) Mengatur tampilan Heading Program :
JLabel heading = new JLabel("<html><h3><center><b>MENGHITUNG AKAR
PERSAMAAN KUADRAT</b></center></h3><hr>"+
"<center><b>ax<sup>2</sup>+ bx + c = 0</b>
</center><br></html>");
JPanel panel0 = new JPanel();
panel0.add(heading);
getContentPane().add(panel0, BorderLayout.NORTH);
(f) Mengatur tampilan untuk input data :
JPanel panel1 = new JPanel(new GridLayout(5,3,5,5));
JLabel labela = new JLabel("nilai a");
JLabel labelb = new JLabel("nilai b");
JLabel labelc = new JLabel("nilai c");
a = new JFormattedTextField(NumberFormat.getNumberInstance());
b = new JFormattedTextField(NumberFormat.getNumberInstance());
c = new JFormattedTextField(NumberFormat.getNumberInstance());
panel1.add(labela);
panel1.add(labelb);
panel1.add(labelc);
panel1.add(a);
panel1.add(b);
panel1.add(c);
(g) Mengatur tampilan untuk output hasil perhitungan :
JLabel labeld = new JLabel("Determinan (D) :");
determinan = new JLabel();
JLabel labelAkar1 = new JLabel("Akar pertama (x1) :");
akar1 = new JLabel();
JLabel laberAkar2 = new JLabel("Akar kedua (x2) :");
akar2 = new JLabel();
panel1.add(labeld);
panel1.add(labelAkar1);
panel1.add(laberAkar2);
panel1.add(determinan);
panel1.add(akar1);
panel1.add(akar2);
ket = new JLabel();
panel1.add(ket);
getContentPane().add(panel1, BorderLayout.CENTER);
(h) Menambahkan tombol perintah untuk melakukan proses perhitungan dan tombol untuk
mengosongkan input/output data :
JPanel panel2 = new JPanel(new FlowLayout(FlowLayout.CENTER));
hitung = new JButton("Hitung!");
bersih = new JButton("Bersihkan!");
panel2.add(hitung);
panel2.add(bersih);
getContentPane().add(panel2, BorderLayout.SOUTH);
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 8 dari 44
2.2 Melakukan proses perhitungan
Setelah selesai membuat komponen dan mengatur tata letaknya pada frame, kita harus mencip-
takan rutin yang akan melakukan proses perhitungan.
hitung.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
try{
int varA = Integer.valueOf(a.getValue().toString()).intValue();
int varB = Integer.valueOf(b.getValue().toString()).intValue();
int varC = Integer.valueOf(c.getValue().toString()).intValue();
AkarKuadrat ak = new AkarKuadrat(varA,varB,varC);
if(ak.nilaiA()==0) {
JOptionPane.showMessageDialog(
null,"Variabel a tidak boleh bernilai 0","Kesalahan : a = 0",0
);
}
if(ak.determinan < 0) {
determinan.setText("<html>"+String.valueOf(ak.determinan)+" atau "
+String.valueOf(Math.abs(ak.determinan))+"i<sup>2</sup></html>");
ket.setIcon(cekIcon("i1.png"));
if(ak.nilaiB()==0) {
akar1.setText(String.valueOf(Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
akar2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
}else {
akar1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.
valueOf(2*ak.nilaiA()));
akar2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.
valueOf(2*ak.nilaiA()));
}
}else {
determinan.setText(String.valueOf(ak.determinan));
akar1.setText(String.valueOf(ak.x1));
akar2.setText(String.valueOf(ak.x2));
ket.setIcon(null);
}
}catch(NumberFormatException nfe) {
JOptionPane.showMessageDialog(
null,nfe.toString(),"Kesalahan : "+ nfe.getMessage(),1
);
}catch(NullPointerException npe) {
JOptionPane.showMessageDialog(
null,npe.toString()+"n(Terdapat variabel bernilai null)",
"Kesalahan : "+ npe.getMessage(),0
;
}
}
});
bersih.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
a.setText("");
b.setText("");
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 9 dari 44
c.setText("");
determinan.setText("");
akar1.setText("");
kar2.setText("");
ket.setIcon(null);
}
});
Berikut adalah hasil dari program yang kita buat :
(i) Hasil dari pengaturan tata letak komponen :
(ii) Menu ’Menu’ jika diklik akan menampilkan sebuah item menu ’Tentang JKuadrat’ beserta
icon gambar yang disertakan melalui metode ’cekIcon()’ :
(iii) Item menu tersebut jika diklik akan menghasilkan keterangan program sesuai dengan metode
’keterangan()’ yang kita buat :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 10 dari 44
(iv) Berikut adalah tampilan dari beberapa operasi perhitungan yang dilakukan oleh program
ini, mulai dari yang hitungan sederhana dengan hasil bilangan bulat, bilangan pecahan,
akar kembar, hingga bilangan imaginer yang dinyatakan dalam i (i =
√
−1) :
• Perhitungan sederhana dengan hasil bilangan bulat :
• Hasil berupa akar kembar :
• Hasil berupa bilangan pecahan :
• Hasil berupa bilangan imaginer :
2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 11 dari 44
Perhatikan bahwa apabila hasil berupa bilangan imaginer, maka di bawah nilai Determinan akan
muncul tulisan (penjelasan) Ket: i =
√
−1 (bilangan imaginer), sebab tidak mungkin menuliskan
angka dari akar bilangan negatif, karenanya nilainya dinyatakan dengan i. Misalnya
√
−4 dapat
dinyatakan sebagai 4 · (−1) =
√
4·
√
−1 = 2·
√
−1 = 2i. Dengan demikian -4 dapat dinyatakan
sebagai 4 · (−1) = 4 · (
√
−1)2
= 4i2
, sehingga
√
−4 =
√
4i2 = 2i.
3 Memodifikasi Aplikasi Desktop Menjadi Aplikasi Web
Antar Muka desktop yang barusan kita buat, dapat dengan mudah digunakan untuk ditampilkan
di halaman web sehingga dapat dibuka dengan Web Browser seperti Mozilla Firefox ataupun
Google Chrome. Syaratnya di sistem komputer Anda telah terinstall Java Web Start yang me-
mungkinkan Web Browser di sistem komputer Anda menjalankan aplikasi java. Di berbagai dis-
tribusi linux biasanya Anda dapat menggunakan modul IcedTea-Web yang diintegrasikan dengan
browser Anda.
Kita hanya perlu sedikit merubah source code di bagian awal dari source code sebelumnya
(file ’CariAkarKuadrat.java’). Yakni :
(i) menghapus atau menonaktifkan baris pernyataan :
import javax.swing.text.*
karena tidak kita gunakan.
(ii) Kemudian mengganti kelas induk (super class) yang tadinya menggunakan JFrame, sekarang
kita menggunakan JApplet.
public class CariAkarKuadrat extends JFrame {
menjadi
public class AppletCariAkarKuadrat extends JApplet {
Perhatikan bahwa sebaiknya nama kelas juga diganti menjadi ’AppletCariAkarKuadrat’,
agar tidak menimpa kelas untuk antarmuka desktop sebelumnya (kelas ’CariAkarKuadrat’).
(iii) Menghapus blok metode main. Jadi blok berikut harus Anda hapus :
public static void main(String[] args) {
CariAkarKuadrat cak = new CariAkarKuadrat();
cak.setSize(640,300);
PosisiFrame.center(cak);
cak.setVisible(true);
}
(iv) Mengganti deklarasi konstruktor
public CariAkarKuadrat() {
menjadi
public void init() {
(v) Menghapus dua baris berikut :
super("JKuadrat");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 12 dari 44
(vi) Menambahkan kata ’(Web Interface)’ di belakang ’JKuadrat’ dalam blok metode ’keterang-
an()’ :
...
"<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar persamaan
kuadrat</h3>" +
...
menjadi
...
"<html><h1>JKuadrat (Web Interface)</h1><hr> <h3>Program untuk menghitung
akar persamaan kuadrat</h3>" +
...
(vii) Menyimpan source code hasil modifikasi dengan nama ’AppletCariAkarKuadrat.java’ sesuai
nama kelas yang dideklarasikan, kemudian mengkompilasinya menjadi file ’AppletCariAkar-
Kuadrat.class’.
(viii) Membuat sebuah file html (misalnya ’HitungAkarKuadrat.html’), yang isinya sebagai beri-
kut :
<html>
<head>
<title>JKuadrat (Web Interface) - Hitung Akar Kuadrat</title>
</head>
<body>
<p align="center">
<applet code="AppletCariAkarKuadrat.class" width=640 height=320 border=2>
</applet>
</p>
</body>
</html>
File HTML inilah yang harus Anda eksekusi untuk dijalankan melalui Web Browser di
sistem komputer Anda, dimana dua file sebelumnya yakni ’AppletCariAkarKuadrat.class’
dan ’AkarKuadrat.class’ harus berada pada direktori yang sama.
Berikut adalah hasil dari aplikasi tersebut yang dijalankan melalui beberapa Web Browser pada
sistem operasi Ubuntu 12.04 dengan modul IcedTea-Web yang telah terinstall.
• Mozilla firefox 27.0.1 :
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 13 dari 44
• Opera 12.16 :
• Chromium 30.0.1599.114 :
• Google Chrome 33.0.1750.117 :
3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 14 dari 44
• Rekonq 2.3.2 :
4 Merancang Antarmuka untuk Android
Saat awal merancang suatu aplikasi untuk platform Android, pemrogram sudah dihadapkan pa-
da kewajiban untuk memisahkan antara inti program yang mengatur alur logika aplikasi dengan
tampilan dari aplikasi tersebut. Source code inti program tersebut biasanya disimpan dalam file
berekstensi java yang disimpan dalam folder ’src’ dengan hirarki subfolder sesuai nama paket (pac-
kage) yang disebutkan pada awal baris program. Sedangkan source code yang mengatur tampilan
biasanya (dan sebaiknya) disimpan dalam file berekstensi xml dalam folder ’res/layout’ (untuk
orientasi portrait) dan folder ’res/layout-land’ (untuk orientasi landscape). Variabel yang digu-
nakan mengatur tampilan dan nilainya disimpan dalam folder ’res/values’ pada file ’strings.xml’.
Namun demikian, jika Anda menggunakan IDE Eclipse yang menjalankan plugin Android maka
penempatan pada subfolder-subfolder tersebut otomatis akan dilakukan oleh Eclipse tanpa perlu
Anda lakukan secara manual, seperti yang akan kita lakukan berikut ini.
4.1 Memulai Project Baru
Sekarang saatnya kita memulai rancangan program sederhana kita. Kita akan memberinya nama
’AndKuadrat’. Penulis menggunakan IDE Eclipse version 3.7.2 (Indigo).
(i) Pilih File > New > Project... untuk membuka jendela Wizard.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 15 dari 44
(ii) Kemudian pilih Android > Android Application Project, dan klik Next. Isi informasi beri-
kut :
• Application name : AndKuadrat
• Project name : AndKuadrat-1
• Package name : id.org.sapto.andkuadrat
• Minimum required SDK : Android 2.2 (Froyo)
• Target SDK : Android 4.2 (Jelly Bean)
• Compile with : Google API’s (Google Inc.)(API 8)
• Theme : None
(iii) Selanjut beri tanda centang pada :
• Create custom launcher icon
• Create activity
• Create Project in Workspace
dan klik Next
(iv) Selanjutnya kita harus memilih gambar icon yang akan kita gunakan. Jika belum punya,
biarkan saja apa adanya dan klik Next. Jika sudah ada, pada bagian Image file klik tombol
Browse, pilih pada harddsik Anda file gambar yang akan Anda gunakan. Pada bagian
Scaling pilih center, pada bagian Shape pilih square, dan pada bagian Background color
pilih warna gray (abu-abu).
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 16 dari 44
(v) Kemudian beri tanda centang pada ’Create Activity’ dan pilih ’BlankActivity’, klik Next.
(vi) Terakhir beri nama pada file yang mengatur logika program (pada bagian Activity Name)
dan tampilan program (Layout name). Klik Finish untuk memulai pembuatan proyek baru
kita.
• Activity Name : MainActivity
• Layout Name : activity main
• Navigation Type : None
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 17 dari 44
(vii) Otomatis pada halaman Eclipse Anda akan terbuka file ’activity main.xml’ dengan tampilan
sebagai berikut :
4.2 Mengkonfigurasi Android Virtual Device
Setelah berhasil menciptakan sebuah project baru yakni kita beri nama ’AndKuadrat-1’ dengan
nama aplikasi ’AndKuadrat’, maka langkah selanjutnya adalah mengkonfigurasikan Android Vir-
tual Device yang akan kita gunakan untuk mengetest aplikasi yang akan kita selesaikan nantinya.
Android Virtual Device ini akan menjadi Device Virtual yang berjalan di komputer kita (yang
dapat dijalankan dan diset melalui IDE Eclipse) sebelum nantinya dicoba di device Android
sebenarnya yang Anda miliki.
(i) Klik menu Run > Run Configurations, pilih Android Application, lalu klik icon New di sudut
kiri atas, ganti namanya di kotak isian menjadi ’AndKuadrat’, dan klik tombo Browse di
bawah tab Android.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 18 dari 44
(ii) Pilih AndKuadrat-1, lalu tombol OK.
(iii) Anda akan kembali ke jendela sebelumnya. Pada bagian Launch pilih id.org.sapto.andkuadrat,
lalu klik tombol Apply.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 19 dari 44
(iv) Kemudian klik tab Target, klik tombol Manager
(v) Pada jendela Android Virtual Device Manager, pada tab Android Virtual Device klik tombol
New.
Silahkan isi sesuai kebutuhan, atau ikuti saja sesuai dengan gambar di atas, klik tombol
OK (Jika ada yang tidak sesuai maka tombol OK tidak akan dapat diakses).
(vi) Anda akan kembali ke jendela sebelumnya. Apabila nampak nama dari virtual device yang
barusan Anda buat, klik nama tersebut, lalu klik tombol Start.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 20 dari 44
(vii) Selanjutnya atur ukuran device virtual tersebut agar sesuai dengan layar komputer Anda.
(viii) Klik tombol Launch, tunggu beberapa saat hingga jendela virtual Android berhasil mun-
cul (cepat lambatnya tergantung kepada kemampuan Hardware komputer Anda). Berikut
adalah contoh tampilan Android Virtual Device di komputer Penulis.
(ix) Selanjutnya Anda boleh menutup semua kotak dialog yang tadi terbuka sebelumnya (jendela
Starting Android Emulator, Android Virtual Device Manager dan jendela Run Configura-
tions), dan tetap membiarkan jendela IDE Eclipse dan Android Virtual Device yang barusan
Anda buat terbuka.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 21 dari 44
(x) Untuk mengetes aplikasi pada project yang barusan Anda buat (AndKuadrat-1), klik nama
project tersebut pada jendela panel Project Explorer di sebelah kiri halaman IDE Eclipse
Anda, lalu klik Run > Debug As > Android Application. Jika tampilan berikut muncul
pada jendela Android Virtual Device yang tadi Anda buat, berarti langkah awal Anda telah
sukses.
Perhatikan bahwa tampilan ini sesuai dengan gambaran yang ditampilkan oleh file ’activi-
ty main.xml’ (di subfolder layout) pada tab ’Graphical Layout’ yang ditunjukan oleh IDE
Eclipse pada saat Anda pertama kali selesai mengkonfigurasikan Project ’AndKuadrat-1’.
Tentu saja bukan ini yang kita inginkan, oleh karenanya kita akan mengubahnya kemudian.
4.3 Programming pada Project Android AndKuadrat-1
Setelah melakukan langkah awal pembuatan project AndKuadrat-1 dan mengkonfigurasi Android
Virtual Device yang akan kita gunakan, selanjutnya adalah melakukan coding pada aplikasi yang
akan kita buat pada project tersebut. Sebagaimana langkah pada tahap awal pembuatan project
Android kita, aplikasi yang akan kita buat memiliki nama ’AndKuadrat’.
4.3.1 Menyalin File-file yang Diperlukan
1. Menyalin File AkarKuadrat.java
Aplikasi AndKuadrat yang akan kita buat ini nantinya akan memanfaatkan source code
kelas java yang telah kita buat sebelumnya, yakni ’AkarKuadrat.java’. Oleh karena itu,
langkah selanjutnya adalah meng-copy file tersebut ke direktori yang sama dengan file kelas
utama dari aplikasi AndKuadrat tersebut, yakni file ’MainActivity.java’. Karena package
kita adalah package id.org.sapto.andkuadrat, maka file tersebut oleh Eclipse disimpan
di subfolder dengan path ’id/org/sapto/andkuadrat’ dalam subfolder ’AndKuadrat-1/src’
dalam folder kerja Eclipse (yang diset saat pertama kali Eclipse dijalankan, default-nya
adalah folder Workspace), sehingga file ’AkarKuadrat.java’ tersebut harus kita salin ke
subfolder tersebut. Caranya :
(i) Dari menu File klik Open File, cari dimana sebelumnya Anda menyimpan file ’Akar-
Kuadrat.java’ tersebut.
(ii) Setelah terbuka di halaman Eclipse Anda, klik menu File > Save As, dan simpan di
folder ’[lokasi folder Eclipse]/AndKuadrat-1/src/id/org/sapto/andkuadrat/’.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 22 dari 44
Nampak pada gambar bahwa lokasi kerja Eclipse di komputer Penulis adalah eclipses-
pace, sehingga lokasinya adalah :
’∼/eclipsespace/AndKuadrat-1/src/id/org/sapto/andkuadrat’.
Jika Anda menggunakan pengaturan default dari Eclipse biasanya direktori kerjanya
adalah Workspace sehingga Anda harus menyimpannya di :
’∼/Workspace/AndKuadrat-1/src/id/org/sapto/andkuadrat’.
(iii) Kemudian file tersebut kita modifikasi dengan menambahkan satu pernyataan di baris
pertama yaitu :
package id.org.sapto.andkuadrat;
Selebihnya tidak ada perubahan lain.
2. Menyalin File Gambar
Aplikasi kita memerlukan dua gambar lainnya yang diperlukan untuk menampilkan Kete-
rangan i =
√
−1 apabila hasilnya berupa bilangan imaginer dan file gambar kosong apabila
nilainya bukan bilangan imaginer. Penulis telah mempersiapkannya yakni file ’i1.png’ yang
berisi gambar keterangan tersebut dan file ’i none,png’ yang berisi gambar kosong. Salin
kedua gambar tersebut ke dalam subfolder :
’AndKuadrat-1/res/drawable-hdpi’.
dalam direktori kerja Eclipse Anda.
4.3.2 Menyiapkan Variabel Komponen
Di bawah Project AndKuadrat-1, klik pembuka folder (>atau +) res kemudian value. Double
klik file ’strings.xml’, hapus semua isinya dan isikan kode berikut :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">AndKuadrat</string>
<string name="heading1">AndKuadrat</string>
<string name="heading2">Menghitung Akar Persamaan Kuadrat</string>
<string name="heading3"><html>ax<sup><small>2</small></sup> + bx + c = 0
</html></string>
<string name="subhead1">Input Data :</string>
<string name="var_a">Variabel a</string>
<string name="var_b">Variabel b</string>
<string name="var_c">Variabel c</string>
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 23 dari 44
<string name="subhead2">Output (Hasil) :</string>
<string name="determinan">Determinan (D)</string>
<string name="x1"><html>Akar Pertama (x<sub><small>1</small></sub>)</html>
</string>
<string name="x2"><html>Akar Kedua (x<sub><small>2</small></sub>)</html>
</string>
<string name="hitung">Hitung</string>
<string name="clear">Bersihkan</string>
<string name="keterangan"><html>copyright owned by <b>Tri Sapto Adji</b>,
Manokwari Papua Barat</html></string>
<string name="ket_i">i adalah simbol dari bilangan imaginer (akar kuadrat
dari -1)</string>
</resources>
Simpan perubahan. Jika ada pesan kesalahan pada konsole biarkan saja, karena ini berhubungan
dengan file lain yang belum kita ubah.
4.3.3 Menyiapkan Tampilan
Buka file ’activity main.xml’ di folder res > layout, hapus semua isinya lalu masukkan kode
berikut :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/heading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading1"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="@+id/heading2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/heading1"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading2" />
<TextView
android:id="@+id/heading3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/heading2"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:text="@string/heading3" />
<EditText
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 24 dari 44
android:id="@+id/nilaiVar_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/var_a"
android:layout_alignRight="@+id/var_a"
android:layout_below="@+id/var_a"
android:ems="10"
android:inputType="numberSigned" />
<EditText
android:id="@+id/nilaiVar_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/nilaiVar_a"
android:layout_alignBottom="@+id/nilaiVar_a"
android:layout_alignLeft="@+id/var_b"
android:layout_alignRight="@+id/var_b"
android:ems="10"
android:inputType="numberSigned" />
<EditText
android:id="@+id/nilaiVar_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/nilaiVar_b"
android:layout_alignBottom="@+id/nilaiVar_b"
android:layout_alignLeft="@+id/var_c"
android:layout_alignRight="@+id/var_c"
android:ems="10"
android:inputType="numberSigned" />
<TextView
android:id="@+id/subhead1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/heading3"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:text="@string/subhead1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/subhead2"
android:orientation="vertical" >
<TextView
android:id="@+id/determinan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="9dp"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 25 dari 44
android:text="@string/determinan" />
<TextView
android:id="@+id/nilaiD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textStyle="bold" />
<TextView
android:id="@+id/x1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="@string/x1" />
<TextView
android:id="@+id/nilai_x1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textStyle="bold" />
<TextView
android:id="@+id/x2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="@string/x2" />
<TextView
android:id="@+id/nilai_x2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textStyle="bold" />
<ImageView
android:id="@+id/ket_i"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:contentDescription="@string/ket_i"
android:gravity="center_horizontal" >
</ImageView>
</LinearLayout>
<TextView
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 26 dari 44
android:id="@+id/subhead2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/nilaiVar_b"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:text="@string/subhead2"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/var_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/subhead1"
android:layout_marginLeft="16dp"
android:layout_marginTop="9dp"
android:text="@string/var_a" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/keterangan"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/hitung"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hitung" />
<Button
android:id="@+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/clear" />
</LinearLayout>
<TextView
android:id="@+id/var_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/nilaiVar_b"
android:layout_centerHorizontal="true"
android:text="@string/var_b" />
<TextView
android:id="@+id/var_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/nilaiVar_c"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@+id/subhead2"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 27 dari 44
android:text="@string/var_c" />
<TextView
android:id="@+id/keterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="@string/keterangan"
android:textSize="10sp" />
</RelativeLayout>
Simpan perubahan. Jika masih ada pesan kesalahan, lihat apa pesannya. Kemungkinan isi dari
file ’activity main.xml’ yang ada di folder res > menu tidak sesuai dengan kode dalam file tersebut
di atas (file ’activity main.xml’ di folder res > layout). Karenanya buka file ’activity main.xml’
di folder res > menu, kosong semua variabel yang ada, sehingga tingga dua baris pernyataan
berikut :
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
</menu>
Setelah itu, coba Anda klik kanan pada konsole dan pilih clear. Lalu save kembali ketiga file
tersebut di atas (jika tombol save tidak bisa diakses, tambahkan satu spasi kosong pada baris
kosong di masing-masing file untuk memunculkan tombol save tersebut). Jika tidak ada pesan
kesalahan berarti Anda siap ke langkah berikutnya.
4.3.4 Menyiapkan File Utama (MainActivity.java)
Buka file ’MainActivity.java’ di bawah src > id.org.sapto.andkuadrat. Hapus semua isinya dan
tambahkan kode berikut :
package id.org.sapto.andkuadrat;
import android.os.Bundle;
import android.app.Activity;
import android.widget.Button;
import android.widget.TextView;
import android.widget.EditText;
import android.widget.ImageView;
import android.view.View.OnClickListener;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.app.AlertDialog;
import android.content.DialogInterface;
public class MainActivity extends Activity implements OnClickListener {
EditText nilaiVar_a;
EditText nilaiVar_b;
EditText nilaiVar_c;
TextView nilaiD;
TextView nilai_x1;
TextView nilai_x2;
ImageView ket_i;
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 28 dari 44
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button hitung=(Button)this.findViewById(R.id.hitung);
hitung.setOnClickListener(this);
Button clear=(Button)this.findViewById(R.id.clear);
clear.setOnClickListener(this);
nilaiVar_a = (EditText)this.findViewById(R.id.nilaiVar_a);
nilaiVar_b = (EditText)this.findViewById(R.id.nilaiVar_b);
nilaiVar_c = (EditText)this.findViewById(R.id.nilaiVar_c);
nilaiD = (TextView)this.findViewById(R.id.nilaiD);
nilai_x1 = (TextView)this.findViewById(R.id.nilai_x1);
nilai_x2 = (TextView)this.findViewById(R.id.nilai_x2);
ket_i.setImageResource(R.drawable.i_none);
}
public boolean onCreateOptionsMenu(Menu menu){
super.onCreateOptionsMenu(menu);
menu.add("Keterangan");
return true;
}
public boolean onOptionsItemSelected(MenuItem item){
if(item.getItemId()==0){
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("AndKuadrat");
alertbox.setMessage("Program Untuk Menghitung Determinan dannAkar-Akar
Persamaan Kuadratnnby : Tri Sapto Adjin@Manokwari, Papua Barat");
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface arg0, int arg1) {
// TODO Auto-generated method stub
}
} );
alertbox.show();
}
return true;
}
public void onClick(View view){
if(view==findViewById(R.id.clear)){
nilaiVar_a.setText(null);
nilaiVar_b.setText(null);
nilaiVar_c.setText(null);
nilaiD.setText("");
nilai_x1.setText("");
nilai_x2.setText("");
ket_i.setImageResource(R.drawable.i_none);
}
if(view==findViewById(R.id.hitung)){
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 29 dari 44
try{
int varA = Integer.valueOf(nilaiVar_a.getText().toString()).intValue();
int varB = Integer.valueOf(nilaiVar_b.getText().toString()).intValue();
int varC = Integer.valueOf(nilaiVar_c.getText().toString()).intValue();
AkarKuadrat ak = new AkarKuadrat(varA,varB,varC);
if(ak.nilaiA()==0) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Kesalahan a=0");
alertbox.setMessage("nilai Variabel a tidak boleh 0!nSilahkan Ulangi
...");
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
// TODO Auto-generated method stub
}
} );
}
if(ak.determinan < 0) {
nilaiD.setText(String.valueOf(ak.determinan));
ket_i.setImageResource(R.drawable.i1);
if(ak.nilaiB()==0) {
nilai_x1.setText(String.valueOf(Math. sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
nilai_x2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+
"i/" + String.valueOf(2*ak.nilaiA()));
}else {
nilai_x1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+ String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf
(2*ak.nilaiA()));
nilai_x2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String.
valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf
(2*ak.nilaiA()));
}
}else {
nilaiD.setText(String.valueOf(ak.determinan));
nilai_x1.setText(String.valueOf(ak.x1));
nilai_x2.setText(String.valueOf(ak.x2));
ket_i.setImageResource(R.drawable.i_none);
}
}catch(NullPointerException npe) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Problem, Variabel kosong!");
alertbox.setMessage("Kesalahan : "+ npe.getMessage());
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
//TODO Auto-generated method stub
}
} );
alertbox.show();
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 30 dari 44
}catch(NumberFormatException nfe) {
AlertDialog.Builder alertbox=new AlertDialog.Builder(this);
alertbox.setTitle("Problem, Kesalahan Tipe Data!");
alertbox.setMessage("Kesalahan : "+ nfe.getMessage());
alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface arg0,
int arg1) {
//TODO Auto-generated method stub
}
} );
alertbox.show();
}
}
}
}
Klik icon Debug As pada Main Toolbar (di bawah Menu Bar, berupa gambar Bug/Kutu) la-
lu pilih AndKuadrat. Otomatis pada Android Virtual Device Anda sekarang terbuka aplikasi
AndKuadrat yang berarti Anda telah berhasil membuat aplikasi tersebut.
Coba Anda klik icon Home yang bergambar rumah, lalu klik icon Launcher, nampak bahwa icon
AndKuadrat sudah ada dalam menu aplikasi.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 31 dari 44
Klik icon tersebut untuk membuka aplikasi. Lakukan uji coba perhitungan dengan memasukkan
nilai Variabel a, Variabel b, dan Variabel C. Otomatis keyboard virtual pada aplikasi Android
tersebut akan muncul. Bila telah selesai mengisi nilai klik Tombol Kembali di sebelah kanan
tombol Menu untuk menghilangkan tampilan keyboard virtual tersebut.
Klik tombol Hitung untuk menampilkan hasil perhitungan.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 32 dari 44
Sekarang klik tombol Menu untuk menampilkan menu Keterangan.
Klik menu Keterangan tersebut untuk menampilkan Keterangan mengenai program AndKuadrat
ini.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 33 dari 44
Sampai disini kita telah berhasil membuat sebuah aplikasi Android sederhana. Dengan demikian
tujuan kita untuk memanfaatkan sebuah file AkarKuadrat.java di tiga lingkungan yang berbeda
(Terminal/Konsole/Command Prompt, Desktop, Web dan Android Smartphone) berhasil kita
lakukan.
4.3.5 Tampilan Orientasi Landscape
Ada satu hal yang kita tinggalkan, yakni bahwa sebuah aplikasi Android biasanya dapat ditam-
pilkan dalam orientasi portrait maupun landscape. Saat kita memutar Smartphone Android kita,
maka aplikasi akan secara otomatis berubah tampilannya sesuai dengan orientasi Smartphone
tersebut. Hal ini terjadi jika setting auto rotation diaktifkan pada Smartphone. Agar aplikasi
kita juga dapat berubah ubah tampilannya sesuai orientasi tersebut, maka kita perlu membuat
satu lagi file ’activity main.xml’ dalam folder ’layout-land’ di folder ’res’. Untuk itu lakukan
langkah-langkah berikut :
(i) Klik kanan folder res tersebut di panel kiri program Eclipse Anda, pilih New > Folder. Pada
kotak isian Folder name, ketik ’layout-land’, dan klik tombol Finish untuk mengakhiri.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 34 dari 44
(ii) Selanjutnya kita akan membuat sebuah file dalam folder tersebut yang akan mengatur an-
tarmuka aplikasi AndKuadrat tersebut dalam orientasi landscape. Caranya klik menu File
> New > Other. Lalu di bawah folder Android pilih Android XML Layout File dan klik
tombol Next.
(iii) Ketikan nama ’activity main.xml’ pada kotak isian File. Jika ada peringatan bahwa File
already exist, biarkan saja (karena kita akan mensetting letak foldernya kemudian), klik
Next.
(iv) Pada kotak dialog selanjutnya ketikan pada kotak isian Folder : ’/res/layout-land’. Oto-
matis pada panel Chosen Qualifiers akan muncul ’Landscape’ (karena kita menyimpannya
di folder tersebut yang merupakan folder default untuk menyimpan file layout beroirentasi
landscape), klik tombol finish.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 35 dari 44
(v) Maka otomatis akan terbuka file baru dengan nama yang tertera pada tab l’and/activity main.xml’.
(vi) Klik tab ’activity main.xml’ di sebelah kanan tab ’Graphical Layout’ (tab ini posisinya di
bawah file sedang ditampilkan). Untuk menampilkan source code file tersebut.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 36 dari 44
(vii) Hapus semua isi file tersebut, dan isikan dengan kode berikut :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/heading1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading1"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/heading2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading2" />
<TextView
android:id="@+id/heading3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:text="@string/heading3" />
<LinearLayout android:id="@+id/linearLayout1"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 37 dari 44
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout android:id="@+id/linearLayout1_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/subhead1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:text="@string/subhead1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout android:id="@+id/linearLayout1_1_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/var_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/var_a" />
<EditText
android:id="@+id/nilaiVar_a"
android:layout_width="97dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:ems="8"
android:inputType="numberSigned" />
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout1_1_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/var_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/var_b" />
<EditText
android:id="@+id/nilaiVar_b"
android:layout_width="97dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:ems="8"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 38 dari 44
android:inputType="numberSigned" />
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout1_1_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/var_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/var_c" />
<EditText
android:id="@+id/nilaiVar_c"
android:layout_width="97dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:ems="8"
android:inputType="numberSigned" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout1_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal|left"
android:layout_marginLeft="15dp"
android:gravity="left|right"
android:orientation="vertical" >
<TextView
android:id="@+id/subhead2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:text="@string/subhead2"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:id="@+id/linearLayout1_2_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/determinan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 39 dari 44
android:text="@string/determinan" />
<TextView
android:id="@+id/nilaiD"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout1_2_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/x1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/x1" />
<TextView
android:id="@+id/nilai_x1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout1_2_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/x2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="3dp"
android:text="@string/x2" />
<TextView
android:id="@+id/nilai_x2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="27dp"
android:layout_marginTop="3dp"
android:textStyle="bold" />
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 40 dari 44
</LinearLayout>
<ImageView
android:id="@+id/ket_i"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:contentDescription="@string/ket_i"
>
</ImageView>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/hitung"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hitung" />
<Button
android:id="@+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/clear" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/keterangan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="1dp"
android:gravity="center_horizontal"
android:text="@string/keterangan"
android:textSize="8sp" />
</LinearLayout>
(viii) Simpan perubahan. Kemudian klik kembali tab ’Graphical Layout’ untuk melihat gambaran
hasil dari pengaturan tata letak landscape oleh file tersebut.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 41 dari 44
(ix) Disebabkan aplikasi Android Virtual Device di komputer kita tersebut tidak dapat kita pu-
tar atau diubah orientasinya, maka untuk mencoba hasilnya, kita perlu membuat sebuah
Android Virtual Device Manager yang baru (masih menggunakan konfigurasi Android Apli-
cation AndKuadrat) yang memiliki tampilan widescreen (landscape). Misalnya kita beri
nama ’AndKuadrat-Landscape’ dengan konfigurasi sebagaimana gambar berikut :
Tentu saja ini tidak dapat mewakili perangkat sesungguhnya karena kedua Android Virtual
Device yang kita buat tersebut memiliki settingan device yang berbeda.
(x) Kemudian jalankan Virtual Device tersebut dengan mengklik tombol Start pada jendela
Android Virtual Device Manager. Jangan lupa untuk menutup terlebih dahulu Android
Virtual Device sebelumnya yang beroirentasi portrait untuk menghemat memori komputer
Anda.
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 42 dari 44
Berikut tampilan yang akan Anda dapatkan.
(xi) Lakukan Debug As > AndKuadrat untuk menampilkan hasil tampilan orientasi landscape.
Selanjutnya, untuk menjalankan aplikasi ini di perangkat Smartphone Android sebenarnya, Anda
tinggal mengkopi file ’AndKuadrat-1.apk’ di folder ’bin’ ke perangkat Anda tersebut dan mengklik
untuk menginstallnya.
Demikian, semoga bermanfaat :-) .
4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 43 dari 44
LAMPIRAN
1. Download semua aplikasi yang dibahas disini di https://db.tt/Kie0bKTc
2. Download icon yang digunakan di https://db.tt/9bZcBM4i

More Related Content

What's hot

Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015Saprudin Eskom
 
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)Debby Ummul
 
Modul prak2 constructor dan overloading
Modul prak2   constructor dan overloadingModul prak2   constructor dan overloading
Modul prak2 constructor dan overloadingwahyuniwulan
 
Romi oop-02-javafundamentals-29agustus2010
Romi oop-02-javafundamentals-29agustus2010Romi oop-02-javafundamentals-29agustus2010
Romi oop-02-javafundamentals-29agustus2010SabilaAulia
 
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Saprudin Eskom
 
contoh Program sederhana Java dan penjelasan programnya
contoh Program sederhana Java dan penjelasan programnyacontoh Program sederhana Java dan penjelasan programnya
contoh Program sederhana Java dan penjelasan programnyastephan EL'wiin Shaarawy
 
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)Melina Krisnawati
 
Soal UKK pbo smk kelas 11 esmester genap
Soal UKK pbo smk kelas 11 esmester genapSoal UKK pbo smk kelas 11 esmester genap
Soal UKK pbo smk kelas 11 esmester genapSaprudin Eskom
 
[PUBLIC] quiz-01-midterm-solutions.pdf
[PUBLIC] quiz-01-midterm-solutions.pdf[PUBLIC] quiz-01-midterm-solutions.pdf
[PUBLIC] quiz-01-midterm-solutions.pdfFariz Darari
 
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015Saprudin Eskom
 
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Saprudin Eskom
 
Konsep Inheritance
Konsep InheritanceKonsep Inheritance
Konsep InheritanceRiski_kiki
 
Class dan object
Class dan objectClass dan object
Class dan objectHardini_HD
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 11
Laporan praktikum Algoritma dan Pemrograman pertemuan 11Laporan praktikum Algoritma dan Pemrograman pertemuan 11
Laporan praktikum Algoritma dan Pemrograman pertemuan 11Ekha Cahya Nugraha
 
Jeni Intro2 Bab01 Review Konsep Dasar Dalam Java
Jeni Intro2 Bab01 Review Konsep Dasar Dalam JavaJeni Intro2 Bab01 Review Konsep Dasar Dalam Java
Jeni Intro2 Bab01 Review Konsep Dasar Dalam JavaIndividual Consultants
 
Materi java merancang aplikasi teks dan dekstop berbasis obyek
Materi java merancang aplikasi teks dan dekstop berbasis obyekMateri java merancang aplikasi teks dan dekstop berbasis obyek
Materi java merancang aplikasi teks dan dekstop berbasis obyekOmen Nayto
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 12
Laporan praktikum Algoritma dan Pemrograman pertemuan 12Laporan praktikum Algoritma dan Pemrograman pertemuan 12
Laporan praktikum Algoritma dan Pemrograman pertemuan 12Ekha Cahya Nugraha
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10Ekha Cahya Nugraha
 

What's hot (20)

Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop kelas 11 semester genap tahun ajaran 2014-2015
 
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)
 
Modul prak2 constructor dan overloading
Modul prak2   constructor dan overloadingModul prak2   constructor dan overloading
Modul prak2 constructor dan overloading
 
Romi oop-02-javafundamentals-29agustus2010
Romi oop-02-javafundamentals-29agustus2010Romi oop-02-javafundamentals-29agustus2010
Romi oop-02-javafundamentals-29agustus2010
 
Algoritma Pemrograman 2
Algoritma Pemrograman 2Algoritma Pemrograman 2
Algoritma Pemrograman 2
 
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Desktop Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
 
contoh Program sederhana Java dan penjelasan programnya
contoh Program sederhana Java dan penjelasan programnyacontoh Program sederhana Java dan penjelasan programnya
contoh Program sederhana Java dan penjelasan programnya
 
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)
Java (Netbeans) - Class, Constructor, Object (Object Oriented Programming)
 
Soal UKK pbo smk kelas 11 esmester genap
Soal UKK pbo smk kelas 11 esmester genapSoal UKK pbo smk kelas 11 esmester genap
Soal UKK pbo smk kelas 11 esmester genap
 
[PUBLIC] quiz-01-midterm-solutions.pdf
[PUBLIC] quiz-01-midterm-solutions.pdf[PUBLIC] quiz-01-midterm-solutions.pdf
[PUBLIC] quiz-01-midterm-solutions.pdf
 
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Basis Data kelas 11 semester genap tahun ajaran 2014-2015
 
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar Kelas 11 SMK semester ganjil tahun ajaran 2014-2015
 
Konsep Inheritance
Konsep InheritanceKonsep Inheritance
Konsep Inheritance
 
Class dan object
Class dan objectClass dan object
Class dan object
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 11
Laporan praktikum Algoritma dan Pemrograman pertemuan 11Laporan praktikum Algoritma dan Pemrograman pertemuan 11
Laporan praktikum Algoritma dan Pemrograman pertemuan 11
 
Jeni Intro2 Bab01 Review Konsep Dasar Dalam Java
Jeni Intro2 Bab01 Review Konsep Dasar Dalam JavaJeni Intro2 Bab01 Review Konsep Dasar Dalam Java
Jeni Intro2 Bab01 Review Konsep Dasar Dalam Java
 
Materi java merancang aplikasi teks dan dekstop berbasis obyek
Materi java merancang aplikasi teks dan dekstop berbasis obyekMateri java merancang aplikasi teks dan dekstop berbasis obyek
Materi java merancang aplikasi teks dan dekstop berbasis obyek
 
Pertemuan V
Pertemuan VPertemuan V
Pertemuan V
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 12
Laporan praktikum Algoritma dan Pemrograman pertemuan 12Laporan praktikum Algoritma dan Pemrograman pertemuan 12
Laporan praktikum Algoritma dan Pemrograman pertemuan 12
 
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10
Laporan praktikum Algoritma dan Pemrograman pertemuan 9&10
 

Similar to My javanote04

Modul praktikum java pemrograman berorientasi objek
Modul praktikum java pemrograman berorientasi objekModul praktikum java pemrograman berorientasi objek
Modul praktikum java pemrograman berorientasi objekimam arifin
 
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016Saprudin Eskom
 
Soal soal pbo java
Soal soal pbo java Soal soal pbo java
Soal soal pbo java Abdullah Beu
 
Pemograman berorientasi objek
Pemograman berorientasi objekPemograman berorientasi objek
Pemograman berorientasi objekAlvin Setiawan
 
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptx
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptxPEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptx
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptxBBXSQUAD
 
Soal try out rpl 2014
Soal try out rpl 2014Soal try out rpl 2014
Soal try out rpl 2014Rose Athy
 
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015Saprudin Eskom
 
Soal + jawaban PAT PBO Kelas XI RPL 2021.docx
Soal + jawaban PAT PBO Kelas XI RPL 2021.docxSoal + jawaban PAT PBO Kelas XI RPL 2021.docx
Soal + jawaban PAT PBO Kelas XI RPL 2021.docxSaprudin Eskom
 
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)Debby Ummul
 
Panduan_Belajar_Mandiri_MATLAB.pdf
Panduan_Belajar_Mandiri_MATLAB.pdfPanduan_Belajar_Mandiri_MATLAB.pdf
Panduan_Belajar_Mandiri_MATLAB.pdfgunturwijaya7
 
Cara membuat fungsi dan prosedur pada java
Cara membuat fungsi dan prosedur pada javaCara membuat fungsi dan prosedur pada java
Cara membuat fungsi dan prosedur pada javaDevandy Enda
 
Modularisasi – function dalam c++
Modularisasi – function dalam c++Modularisasi – function dalam c++
Modularisasi – function dalam c++Akmal Fajar
 
Modul PBO Bab-04 - Hubungan antar Kelas
Modul PBO Bab-04 - Hubungan antar KelasModul PBO Bab-04 - Hubungan antar Kelas
Modul PBO Bab-04 - Hubungan antar KelasRakhmat Dedi Gunawan
 
Laporan Modul 1 Praktikum Pemrograman Berbasis Objek
Laporan Modul 1 Praktikum Pemrograman Berbasis ObjekLaporan Modul 1 Praktikum Pemrograman Berbasis Objek
Laporan Modul 1 Praktikum Pemrograman Berbasis ObjekKuncara Laksana
 
Pertemuan 1
Pertemuan 1Pertemuan 1
Pertemuan 1zisgoo
 

Similar to My javanote04 (20)

Modul praktikum java pemrograman berorientasi objek
Modul praktikum java pemrograman berorientasi objekModul praktikum java pemrograman berorientasi objek
Modul praktikum java pemrograman berorientasi objek
 
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016
Soal UAS Pemrograman Desktop kelas 11 SMK semester ganjil tahun ajaran 2015-2016
 
Soal soal pbo java
Soal soal pbo java Soal soal pbo java
Soal soal pbo java
 
Pemograman berorientasi objek
Pemograman berorientasi objekPemograman berorientasi objek
Pemograman berorientasi objek
 
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptx
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptxPEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptx
PEMORGRAMAN BERORIENTASI OBJEK-02 Teknologi JAVA.pptx
 
Soal try out rpl 2014
Soal try out rpl 2014Soal try out rpl 2014
Soal try out rpl 2014
 
PBO Pratikum 1
PBO Pratikum 1PBO Pratikum 1
PBO Pratikum 1
 
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015
Soal UAS Pemrograman Dasar kelas 11 semester genap tahun ajaran 2014-2015
 
Soal + jawaban PAT PBO Kelas XI RPL 2021.docx
Soal + jawaban PAT PBO Kelas XI RPL 2021.docxSoal + jawaban PAT PBO Kelas XI RPL 2021.docx
Soal + jawaban PAT PBO Kelas XI RPL 2021.docx
 
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)
Modul Praktikum Pemrograman Berorientasi Objek (Chap.1-6)
 
Panduan_Belajar_Mandiri_MATLAB.pdf
Panduan_Belajar_Mandiri_MATLAB.pdfPanduan_Belajar_Mandiri_MATLAB.pdf
Panduan_Belajar_Mandiri_MATLAB.pdf
 
Cara membuat fungsi dan prosedur pada java
Cara membuat fungsi dan prosedur pada javaCara membuat fungsi dan prosedur pada java
Cara membuat fungsi dan prosedur pada java
 
Materi pelatihan java fundamental
Materi pelatihan java fundamentalMateri pelatihan java fundamental
Materi pelatihan java fundamental
 
Modularisasi – function dalam c++
Modularisasi – function dalam c++Modularisasi – function dalam c++
Modularisasi – function dalam c++
 
Modul PBO Bab-04 - Hubungan antar Kelas
Modul PBO Bab-04 - Hubungan antar KelasModul PBO Bab-04 - Hubungan antar Kelas
Modul PBO Bab-04 - Hubungan antar Kelas
 
Laporan Modul 1 Praktikum Pemrograman Berbasis Objek
Laporan Modul 1 Praktikum Pemrograman Berbasis ObjekLaporan Modul 1 Praktikum Pemrograman Berbasis Objek
Laporan Modul 1 Praktikum Pemrograman Berbasis Objek
 
Laporan i
Laporan iLaporan i
Laporan i
 
Pertemuan 1
Pertemuan 1Pertemuan 1
Pertemuan 1
 
Modul pbo baru
Modul pbo baruModul pbo baru
Modul pbo baru
 
Rangkuman soal TI SMK
Rangkuman soal TI SMKRangkuman soal TI SMK
Rangkuman soal TI SMK
 

My javanote04

  • 1. MODULAR JAVA KONSOLE, DESKTOP, WEB DAN ANDROID TRI SAPTO ADJI 21 April 2014 Ringkasan Java merupakan salah satu bahasa pemrograman yang paling modular. Sejak awal di- ciptakan, java telah mengusung konsep modular. Kelas-kelas yang telah dibuat dapat de- ngan mudah diimplementasikan di berbagai lingkungan antarmuka yang berbeda. Kali ini, Penulis mencoba berbagi pengalaman penulis saat belajar membuat sebuah aplikasi java berbasis konsole, yang kemudian salah satu kelas yang digunakan dalam aplikasi tersebut dapat diterapkan (digunakan kembali) pada program lainnya dalam lingkungan antarmuka yang berbeda, yakni : desktop, web, dan Android. Kelas yang akan kita gunakan kembali tersebut, sebelumnya telah dibahas dalam tulisan sebelumnya yakni myJavaNote03.pdf. Pembahasan masih menggunakan java versi 1.6. Source code ditulis menggunakan text editor dan dikompilasi melalui terminal, kecuali pembahasan mengenai aplikasi Android yang sudah menggunakan IDE Eclipse. Tulisan ini hanya membahas masalah pembuatan aplikasi, tidak membahas masalah bagaimana instalasi dari environment yang diperlukan. Jadi dianggap pada sistem komputer Anda telah terinstall Java Runtime Environment, Java Development Kit, modul java untuk Browser, Eclipse IDE, integrasi modul Android dengan Eclipse. Jika belum, dan Anda ingin mempraktekan apa yang ada pada tulisan ini, maka Anda harus terlebih dahulu mencari sumber lain mengenai cara instalasi kesemua paket- paket tersebut. 1 Pembagian Kelas Salah satu hal terpenting saat merancang sebuah program yang berbasis Object adalah memi- sahkan antara kelas utama yang mengatur perhitungan dan alur program, dan kelas lainnya yang mengatur antarmuka (bagaimana program tersebut ditampilkan). Hal ini sudah Penulis tunjukan di tulisan sebelumnya (file ’myJavaNote03.pdf’), dimana rutin yang mengatur proses perhitungan dituliskan dalam kelas ’AkarKuadrat.java’ dan yang mengatur tampilan (basis konsole) ditulis- kan dalam kelas ’HitungAkarKuadrat.java’, yang kemudian masing-masing dikompilasi menjadi ’AkarKuadrat.class’ dan ’HitungAkarKuadrat.class’. Sekedar untuk mengingatkan kembali, berikut adalah source code kedua kelas tersebut : (i) Kelas yang merancang proses perhitungan : //Berkas AkarKuadrat.java //Author : Tri Sapto Adji // @Manokwari, Papua Barat public class AkarKuadrat {//awal blok kelas AkarKuadrat dimulai private int a; private int b; 1 PEMBAGIAN KELAS halaman 1 dari 44
  • 2. private int c; double x1; double x2; double determinan; public AkarKuadrat(int a, int b, int c) {//awal blok konstruktor kelas AkarKuadrat this.a = a; this.b = b; this.c = c; double d = Math.pow(this.b, 2) - 4*this.a*this.c; determinan = d; double x1 = ((-1*(this.b)) + Math.sqrt(determinan))/ (2*this.a); this.x1 = x1; double x2 = ((-1*(this.b)) - Math.sqrt(determinan))/ (2*this.a); this.x2 = x2; }//akhir blok konstruktor kelas AkarKuadrat int nilaiA() { return this.a; } int nilaiB() { return this.b; } int nilaiC() { return this.c; } }//Akhir blok kelas AkarKuadrat, Akhir berkas AkarKuadrat.java (ii) Kelas yang mengatur tampilan pada lingkungan konsole : //Berkas HitungAkarKuadrat.java //program ini membutuhkan berkas AkarKuadrat.class pada direktori kerja //Author : Tri Sapto Adji @Manokwari, Papua Barat public class HitungAkarKuadrat { public static void main(String[] args) { //jika pemanggilan kelas tidak disertai 3 buah argumen, maka : if(args.length != 3){ System.err.println("nOops ... Jumlah argumen yang Anda masukkan tidak sesuai ...."); System.err.println("Harus ada 3 argumen..."); System.err.println("Sintaks penulisan yang benar adalah : java HitungAkarKuadrat <a> <b> <c>"); System.err.println("Dimana <a> adalah argumen pertama, <b> adalah argumen kedua dan <c> adalah argumen ketiga n"); System.exit(1);//keluar dari program } try{ //argumen pertama menjadi nilai variabel a : 1 PEMBAGIAN KELAS halaman 2 dari 44
  • 3. nt a = Integer.valueOf(args[0]).intValue(); //argumen kedua menjadi nilai variabel b : int b = Integer.valueOf(args[1]).intValue(); //argumen ketiga menjadi nilai variabel c : int c = Integer.valueOf(args[2]).intValue(); //Membuat obyek dari kelas AkarKuadrat dan menjadikan nilai variabel a, b dan c sebagai argumen dari obyek tersebut : AkarKuadrat ak = new AkarKuadrat(a,b,c); //Membuat Keterangan Program, dilarang menghapus keterangan ini! System.out.println("n-------------------------------"); System.out.println("| author : Tri Sapto Adji |"); System.out.println("| @Manokwari, Papua Barat |"); System.out.println("-------------------------------"); System.out.println("nMENGHITUNG AKAR PERSAMAAN KUADRAT (ax^2 + bx + c = 0)"); System.out.println("=================================== ==================n"); //Menginformasikan nilai variabel a, b, c yang telah Anda masukkan : System.out.println("Anda memasukkan nilai : a = " + ak. nilaiA() + ", b = " + ak.nilaiB() + ", c = " + ak.nilaiC ()); //Nilai variabel a tidak boleh 0, karenanya : if(ak.nilaiA() == 0) { System.out.println("Ada kesalahan, nilai a tidak boleh 0!"); System.out.println("Silahkan coba lagi ... :)n"); System.exit(2); } System.out.println("nHasil perhitungan : "); System.out.println("-------------------"); //jika determinan bernilai negatif(< 0), maka akarnya adalah imajiner //atau bilangan khayal (tidak nyata). //karenanya bilangan tersebut harus ditampilkan dalam format i //dimana i adalah akar dari -1 if(ak.determinan < 0) { System.out.println("Karena Determinan bernilai negatif (<0), yakni : Determinan D = " + ak.determinan +" atau D = " + Math.abs(ak.determinan)+"i^2"); System.out.println("Maka akar-akar yang dihasilkan adalah bilangan imaginer :"); //jika akar imajiner ini memiliki nilai variabel b=0, maka : if(ak.nilaiB() == 0) { System.out.println("Akar pertama x1 = "+ Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA ())); System.out.println("Akar kedua x2 = "+ -Math.sqrt(Math.abs(ak.determinan))+"i/" + (2*ak.nilaiA ())); System.out.println("Keterangan : i adalah akar dari -1 (bilangan imaginer)"); 1 PEMBAGIAN KELAS halaman 3 dari 44
  • 4. }else { System.out.println("Akar pertama x1 = ("+ -ak.nilaiB() + " + "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" + (2*ak.nilaiA())); System.out.println("Akar kedua x2 = ("+ -ak.nilaiB() + " - "+ Math.sqrt(Math.abs(ak.determinan))+"i)/" + (2*ak.nilaiA())); System.out.println("Keterangan : i adalah akar dari -1 (bilangan imaginer)"); } //jika determinan >=0, maka : }else { System.out.println("Determinan D = " + ak.determinan); System.out.println("Akar pertama x1 = " + ak.x1); System.out.println("Akar kedua x2 = " + ak.x2); } //membuat sebuah baris kosong System.out.println(""); //jika input argumen bukan berupa angka }catch(NumberFormatException nfe) { System.err.println("nAnda memasukan argumen yang bukan berupa angka ..!"); System.err.println("Sintaks penulisan yang benar adalah : java HitungAkarKuadrat <a> <b> <c> nNilai <a>, <b>, <c> harus berupa angka!"); System.err.println("Contoh : java HitungAkarKuadrat 1 -12 32n"); System.exit(3); } } }//Akhir Berkas HitungAkarKuadrat.java Berikut adalah contoh tampilan aplikasi berbasis konsole tersebut : 1 PEMBAGIAN KELAS halaman 4 dari 44
  • 5. Untuk lebih jelasnya silahkan lihat kembali artikel ’myJavaNote03.pdf’ tersebut di halaman sli- deshare http://www.slideshare.net/trisaptoadji/my-javanote03. 2 Merancang Antarmuka Basis Desktop 2.1 Mempersiapkan Komponen Setelah berhasil membuat program berbasis konsol (terminal) untuk menghitung akar persamaan kuadrat, kita akan meneruskan dengan program basis GUI yang memanfaatkan kelas yang sama yakni kelas ’AkarKuadrat.class’ yang telah kita buat dan kompilasi pada pembahasan sebelumnya. Jadi jangan lupa jika Anda bekerja di direktori yang berbeda copy dulu file ’AkarKuadrat.class’ tersebut ke direktori kerja Anda sekarang. Untuk itu kita perlu membuat desain antarmuka dari program tersebut. Kita akan mem- beri nama program ini sebagai JKuadrat. Selanjutnya kita harus mempersiapkan beberapa komponen GUI yang diperlukan, yakni : (i) Yang pertama adalah Menu yang memiliki item menu yang jika diklik akan menampilkan kotak dialog keterangan tentang program ini. Ditempatkan paling atas, di bawah title bar. (ii) Di bawahnya adalah panel yang menampilkan Heading dari program ini. (iii) Selanjutnya kotak isian untuk menampung input dari user. Kotak isian ini harus memiliki label untuk memberikan informasi kepada user bahwa kotak tersebut adalah input dari variabel a, b, dan c pada persamaan kuadrat ax2 + bx + c = 0. (iv) Label yang akan menampilkan hasil dari perhitungan. (v) Tombol yang akan mengeksekusi proses perhitungan nilai determinan dan akar-akar persa- maan kuadrat. (vi) Tombol yang akan membersihkan (mengosongkan) kotak input, beserta tampilan nilai hasil perhitungan sebelumnya agar dapat melakukan perhitungan lainnya. Berikut adalah sketsa rancangan antarmuka program tersebut. 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 5 dari 44
  • 6. JKuadrat ¨¨rr Menu MENGHITUNG AKAR PERSAMAAN KUADRAT (ax2 + bx + c = 0) Nilai a Nilai b Nilai c [1] [2] [3] Determinan : Akar Pertama (x1) : Akar Kedua (x2) : [4] [5] [6] [7] Hitung Bersihkan Keterangan : • [1] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel a. • [2] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel b. • [3] : Obyek berkelas JFormattedTextField sebagai input dari Nilai variabel c. • [4] : Obyek berkelas JLabel sebagai output dari Nilai Determinan. • [5] : Obyek berkelas JLabel sebagai output dari Nilai Akar Pertama. • [6] : Obyek berkelas JLabel sebagai output dari Nilai Akar Kedua. • [7] : Obyek berkelas JLabel untuk menampilkan keterangan apabila Determinan bernilai negatif. Langkah-langkah untuk mempersiapkan semua komponen pada gambar adalah sebagai berikut : (a) Kita mulai dengan mendeklarasikan beberapa variabel yang akan digunakan sebagai variabel yang dapat diakses di seluruh bagian internal kelas. private JMenuItem item; private JFormattedTextField a; //[1] private JFormattedTextField b; //[2] private JFormattedTextField c; //[3] private JLabel determinan; //[4] private JLabel akar1; //[5] private JLabel akar2; //[6] private JLabel ket; //[7] private JButton hitung; private JButton bersih; (b) Mengatur tampilan, mulai dari judul paling atas, yakni menampilkan nama program ’JKua- drat’. Hal ini dapat kita lakukan dengan pernyataan : super("JKuadrat"); (c) Menyiapkan tempat untuk meletakkan obyek Menu, kemudian meletakkan Menu pada tempat tersebut, melalui pernyataan : 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 6 dari 44
  • 7. JMenuBar batangMenu = new JMenuBar(); setJMenuBar(batangMenu); JMenu menu = new JMenu("Menu"); batangMenu.add(menu); (d) Pada obyek Menu, kita meletakkan obyek berkelas JMenuItem yang bila diklik akan menam- pilkan jendela berisi keterangan tentang Program ini. item = new JMenuItem("Tentang JKuadrat", cekIcon("JKuadrat.png")); menu.add(item); item.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent ae){ if(ae.getSource() == item) keterangan(); } }); ’keterangan()’ yang terdapat pada kode tersebut adalah nama dari sebuah metode yang kita buat sendiri dengan kode sebagai berikut : private void keterangan() { JOptionPane.showMessageDialog( null, "<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar persamaan kuadrat</h3>" + "<br>Dibuat oleh Tri Sapto Adji"+ "<br>@Manokwari, Papua Barat Indonesia<br>Oktober 2011"+ "<br><br>JKuadrat by Tri Sapto Adji is is a Freeware."+ "<br>It was created in order to be usefull"+ "<br>but "Without Any Guarantee" for the mistake"+ "<br>or error that’ll happen by using this program." + "<br>Use it at your own risk!", "Tentang JKuadrat", 1, cekIcon("JKuadrat2.png") ); } Sedangkan ’cekIcon()’ yang terdapat dalam kode-kode tersebut, adalah sebuah metode yang digunakan untuk menampilkan gambar. Ada dua gambar yang kita gunakan dalam program ini, yakni : • gambar logo program JKuadrat. • gambar keterangan tentang i sebagai symbol dari √ −1. Gambar-gambar tersebut dapat Anda unduh di akhir tulisan ini. Kode dari metode ’cekIcon()’ tersebut adalah sebagai berikut : private ImageIcon cekIcon(String path) { URL imgURL = CariAkarKuadrat.class.getResource(path); if(imgURL != null) { return new ImageIcon(imgURL); }else { System.err.println("Maaf, icon pada " + path + " tidak ada"); return null; } } Perhatikan baris pernyataan : 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 7 dari 44
  • 8. System.err.println("Maaf, icon pada " + path + " tidak ada"); Baris tersebut berguna saat Anda menjalankan program ini melalui konsole (saat kompilasi), untuk mengecek apakah gambar yang disebutkan namanya sebagai argumen ada pada path yang disebutkan. Pernyataan ini dapat Anda hilangkan, dan tidak akan berpengaruh jika kelak program ini dijalankan melalui desktop (dengan meng-klik mouse). (e) Mengatur tampilan Heading Program : JLabel heading = new JLabel("<html><h3><center><b>MENGHITUNG AKAR PERSAMAAN KUADRAT</b></center></h3><hr>"+ "<center><b>ax<sup>2</sup>+ bx + c = 0</b> </center><br></html>"); JPanel panel0 = new JPanel(); panel0.add(heading); getContentPane().add(panel0, BorderLayout.NORTH); (f) Mengatur tampilan untuk input data : JPanel panel1 = new JPanel(new GridLayout(5,3,5,5)); JLabel labela = new JLabel("nilai a"); JLabel labelb = new JLabel("nilai b"); JLabel labelc = new JLabel("nilai c"); a = new JFormattedTextField(NumberFormat.getNumberInstance()); b = new JFormattedTextField(NumberFormat.getNumberInstance()); c = new JFormattedTextField(NumberFormat.getNumberInstance()); panel1.add(labela); panel1.add(labelb); panel1.add(labelc); panel1.add(a); panel1.add(b); panel1.add(c); (g) Mengatur tampilan untuk output hasil perhitungan : JLabel labeld = new JLabel("Determinan (D) :"); determinan = new JLabel(); JLabel labelAkar1 = new JLabel("Akar pertama (x1) :"); akar1 = new JLabel(); JLabel laberAkar2 = new JLabel("Akar kedua (x2) :"); akar2 = new JLabel(); panel1.add(labeld); panel1.add(labelAkar1); panel1.add(laberAkar2); panel1.add(determinan); panel1.add(akar1); panel1.add(akar2); ket = new JLabel(); panel1.add(ket); getContentPane().add(panel1, BorderLayout.CENTER); (h) Menambahkan tombol perintah untuk melakukan proses perhitungan dan tombol untuk mengosongkan input/output data : JPanel panel2 = new JPanel(new FlowLayout(FlowLayout.CENTER)); hitung = new JButton("Hitung!"); bersih = new JButton("Bersihkan!"); panel2.add(hitung); panel2.add(bersih); getContentPane().add(panel2, BorderLayout.SOUTH); 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 8 dari 44
  • 9. 2.2 Melakukan proses perhitungan Setelah selesai membuat komponen dan mengatur tata letaknya pada frame, kita harus mencip- takan rutin yang akan melakukan proses perhitungan. hitung.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent ae){ try{ int varA = Integer.valueOf(a.getValue().toString()).intValue(); int varB = Integer.valueOf(b.getValue().toString()).intValue(); int varC = Integer.valueOf(c.getValue().toString()).intValue(); AkarKuadrat ak = new AkarKuadrat(varA,varB,varC); if(ak.nilaiA()==0) { JOptionPane.showMessageDialog( null,"Variabel a tidak boleh bernilai 0","Kesalahan : a = 0",0 ); } if(ak.determinan < 0) { determinan.setText("<html>"+String.valueOf(ak.determinan)+" atau " +String.valueOf(Math.abs(ak.determinan))+"i<sup>2</sup></html>"); ket.setIcon(cekIcon("i1.png")); if(ak.nilaiB()==0) { akar1.setText(String.valueOf(Math.sqrt(Math.abs(ak.determinan)))+ "i/" + String.valueOf(2*ak.nilaiA())); akar2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+ "i/" + String.valueOf(2*ak.nilaiA())); }else { akar1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+String. valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String. valueOf(2*ak.nilaiA())); akar2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String. valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String. valueOf(2*ak.nilaiA())); } }else { determinan.setText(String.valueOf(ak.determinan)); akar1.setText(String.valueOf(ak.x1)); akar2.setText(String.valueOf(ak.x2)); ket.setIcon(null); } }catch(NumberFormatException nfe) { JOptionPane.showMessageDialog( null,nfe.toString(),"Kesalahan : "+ nfe.getMessage(),1 ); }catch(NullPointerException npe) { JOptionPane.showMessageDialog( null,npe.toString()+"n(Terdapat variabel bernilai null)", "Kesalahan : "+ npe.getMessage(),0 ; } } }); bersih.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent ae){ a.setText(""); b.setText(""); 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 9 dari 44
  • 10. c.setText(""); determinan.setText(""); akar1.setText(""); kar2.setText(""); ket.setIcon(null); } }); Berikut adalah hasil dari program yang kita buat : (i) Hasil dari pengaturan tata letak komponen : (ii) Menu ’Menu’ jika diklik akan menampilkan sebuah item menu ’Tentang JKuadrat’ beserta icon gambar yang disertakan melalui metode ’cekIcon()’ : (iii) Item menu tersebut jika diklik akan menghasilkan keterangan program sesuai dengan metode ’keterangan()’ yang kita buat : 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 10 dari 44
  • 11. (iv) Berikut adalah tampilan dari beberapa operasi perhitungan yang dilakukan oleh program ini, mulai dari yang hitungan sederhana dengan hasil bilangan bulat, bilangan pecahan, akar kembar, hingga bilangan imaginer yang dinyatakan dalam i (i = √ −1) : • Perhitungan sederhana dengan hasil bilangan bulat : • Hasil berupa akar kembar : • Hasil berupa bilangan pecahan : • Hasil berupa bilangan imaginer : 2 MERANCANG ANTARMUKA BASIS DESKTOP halaman 11 dari 44
  • 12. Perhatikan bahwa apabila hasil berupa bilangan imaginer, maka di bawah nilai Determinan akan muncul tulisan (penjelasan) Ket: i = √ −1 (bilangan imaginer), sebab tidak mungkin menuliskan angka dari akar bilangan negatif, karenanya nilainya dinyatakan dengan i. Misalnya √ −4 dapat dinyatakan sebagai 4 · (−1) = √ 4· √ −1 = 2· √ −1 = 2i. Dengan demikian -4 dapat dinyatakan sebagai 4 · (−1) = 4 · ( √ −1)2 = 4i2 , sehingga √ −4 = √ 4i2 = 2i. 3 Memodifikasi Aplikasi Desktop Menjadi Aplikasi Web Antar Muka desktop yang barusan kita buat, dapat dengan mudah digunakan untuk ditampilkan di halaman web sehingga dapat dibuka dengan Web Browser seperti Mozilla Firefox ataupun Google Chrome. Syaratnya di sistem komputer Anda telah terinstall Java Web Start yang me- mungkinkan Web Browser di sistem komputer Anda menjalankan aplikasi java. Di berbagai dis- tribusi linux biasanya Anda dapat menggunakan modul IcedTea-Web yang diintegrasikan dengan browser Anda. Kita hanya perlu sedikit merubah source code di bagian awal dari source code sebelumnya (file ’CariAkarKuadrat.java’). Yakni : (i) menghapus atau menonaktifkan baris pernyataan : import javax.swing.text.* karena tidak kita gunakan. (ii) Kemudian mengganti kelas induk (super class) yang tadinya menggunakan JFrame, sekarang kita menggunakan JApplet. public class CariAkarKuadrat extends JFrame { menjadi public class AppletCariAkarKuadrat extends JApplet { Perhatikan bahwa sebaiknya nama kelas juga diganti menjadi ’AppletCariAkarKuadrat’, agar tidak menimpa kelas untuk antarmuka desktop sebelumnya (kelas ’CariAkarKuadrat’). (iii) Menghapus blok metode main. Jadi blok berikut harus Anda hapus : public static void main(String[] args) { CariAkarKuadrat cak = new CariAkarKuadrat(); cak.setSize(640,300); PosisiFrame.center(cak); cak.setVisible(true); } (iv) Mengganti deklarasi konstruktor public CariAkarKuadrat() { menjadi public void init() { (v) Menghapus dua baris berikut : super("JKuadrat"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 12 dari 44
  • 13. (vi) Menambahkan kata ’(Web Interface)’ di belakang ’JKuadrat’ dalam blok metode ’keterang- an()’ : ... "<html><h1>JKuadrat</h1><hr> <h3>Program untuk menghitung akar persamaan kuadrat</h3>" + ... menjadi ... "<html><h1>JKuadrat (Web Interface)</h1><hr> <h3>Program untuk menghitung akar persamaan kuadrat</h3>" + ... (vii) Menyimpan source code hasil modifikasi dengan nama ’AppletCariAkarKuadrat.java’ sesuai nama kelas yang dideklarasikan, kemudian mengkompilasinya menjadi file ’AppletCariAkar- Kuadrat.class’. (viii) Membuat sebuah file html (misalnya ’HitungAkarKuadrat.html’), yang isinya sebagai beri- kut : <html> <head> <title>JKuadrat (Web Interface) - Hitung Akar Kuadrat</title> </head> <body> <p align="center"> <applet code="AppletCariAkarKuadrat.class" width=640 height=320 border=2> </applet> </p> </body> </html> File HTML inilah yang harus Anda eksekusi untuk dijalankan melalui Web Browser di sistem komputer Anda, dimana dua file sebelumnya yakni ’AppletCariAkarKuadrat.class’ dan ’AkarKuadrat.class’ harus berada pada direktori yang sama. Berikut adalah hasil dari aplikasi tersebut yang dijalankan melalui beberapa Web Browser pada sistem operasi Ubuntu 12.04 dengan modul IcedTea-Web yang telah terinstall. • Mozilla firefox 27.0.1 : 3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 13 dari 44
  • 14. • Opera 12.16 : • Chromium 30.0.1599.114 : • Google Chrome 33.0.1750.117 : 3 MEMODIFIKASI APLIKASI DESKTOP MENJADI APLIKASI WEB halaman 14 dari 44
  • 15. • Rekonq 2.3.2 : 4 Merancang Antarmuka untuk Android Saat awal merancang suatu aplikasi untuk platform Android, pemrogram sudah dihadapkan pa- da kewajiban untuk memisahkan antara inti program yang mengatur alur logika aplikasi dengan tampilan dari aplikasi tersebut. Source code inti program tersebut biasanya disimpan dalam file berekstensi java yang disimpan dalam folder ’src’ dengan hirarki subfolder sesuai nama paket (pac- kage) yang disebutkan pada awal baris program. Sedangkan source code yang mengatur tampilan biasanya (dan sebaiknya) disimpan dalam file berekstensi xml dalam folder ’res/layout’ (untuk orientasi portrait) dan folder ’res/layout-land’ (untuk orientasi landscape). Variabel yang digu- nakan mengatur tampilan dan nilainya disimpan dalam folder ’res/values’ pada file ’strings.xml’. Namun demikian, jika Anda menggunakan IDE Eclipse yang menjalankan plugin Android maka penempatan pada subfolder-subfolder tersebut otomatis akan dilakukan oleh Eclipse tanpa perlu Anda lakukan secara manual, seperti yang akan kita lakukan berikut ini. 4.1 Memulai Project Baru Sekarang saatnya kita memulai rancangan program sederhana kita. Kita akan memberinya nama ’AndKuadrat’. Penulis menggunakan IDE Eclipse version 3.7.2 (Indigo). (i) Pilih File > New > Project... untuk membuka jendela Wizard. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 15 dari 44
  • 16. (ii) Kemudian pilih Android > Android Application Project, dan klik Next. Isi informasi beri- kut : • Application name : AndKuadrat • Project name : AndKuadrat-1 • Package name : id.org.sapto.andkuadrat • Minimum required SDK : Android 2.2 (Froyo) • Target SDK : Android 4.2 (Jelly Bean) • Compile with : Google API’s (Google Inc.)(API 8) • Theme : None (iii) Selanjut beri tanda centang pada : • Create custom launcher icon • Create activity • Create Project in Workspace dan klik Next (iv) Selanjutnya kita harus memilih gambar icon yang akan kita gunakan. Jika belum punya, biarkan saja apa adanya dan klik Next. Jika sudah ada, pada bagian Image file klik tombol Browse, pilih pada harddsik Anda file gambar yang akan Anda gunakan. Pada bagian Scaling pilih center, pada bagian Shape pilih square, dan pada bagian Background color pilih warna gray (abu-abu). 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 16 dari 44
  • 17. (v) Kemudian beri tanda centang pada ’Create Activity’ dan pilih ’BlankActivity’, klik Next. (vi) Terakhir beri nama pada file yang mengatur logika program (pada bagian Activity Name) dan tampilan program (Layout name). Klik Finish untuk memulai pembuatan proyek baru kita. • Activity Name : MainActivity • Layout Name : activity main • Navigation Type : None 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 17 dari 44
  • 18. (vii) Otomatis pada halaman Eclipse Anda akan terbuka file ’activity main.xml’ dengan tampilan sebagai berikut : 4.2 Mengkonfigurasi Android Virtual Device Setelah berhasil menciptakan sebuah project baru yakni kita beri nama ’AndKuadrat-1’ dengan nama aplikasi ’AndKuadrat’, maka langkah selanjutnya adalah mengkonfigurasikan Android Vir- tual Device yang akan kita gunakan untuk mengetest aplikasi yang akan kita selesaikan nantinya. Android Virtual Device ini akan menjadi Device Virtual yang berjalan di komputer kita (yang dapat dijalankan dan diset melalui IDE Eclipse) sebelum nantinya dicoba di device Android sebenarnya yang Anda miliki. (i) Klik menu Run > Run Configurations, pilih Android Application, lalu klik icon New di sudut kiri atas, ganti namanya di kotak isian menjadi ’AndKuadrat’, dan klik tombo Browse di bawah tab Android. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 18 dari 44
  • 19. (ii) Pilih AndKuadrat-1, lalu tombol OK. (iii) Anda akan kembali ke jendela sebelumnya. Pada bagian Launch pilih id.org.sapto.andkuadrat, lalu klik tombol Apply. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 19 dari 44
  • 20. (iv) Kemudian klik tab Target, klik tombol Manager (v) Pada jendela Android Virtual Device Manager, pada tab Android Virtual Device klik tombol New. Silahkan isi sesuai kebutuhan, atau ikuti saja sesuai dengan gambar di atas, klik tombol OK (Jika ada yang tidak sesuai maka tombol OK tidak akan dapat diakses). (vi) Anda akan kembali ke jendela sebelumnya. Apabila nampak nama dari virtual device yang barusan Anda buat, klik nama tersebut, lalu klik tombol Start. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 20 dari 44
  • 21. (vii) Selanjutnya atur ukuran device virtual tersebut agar sesuai dengan layar komputer Anda. (viii) Klik tombol Launch, tunggu beberapa saat hingga jendela virtual Android berhasil mun- cul (cepat lambatnya tergantung kepada kemampuan Hardware komputer Anda). Berikut adalah contoh tampilan Android Virtual Device di komputer Penulis. (ix) Selanjutnya Anda boleh menutup semua kotak dialog yang tadi terbuka sebelumnya (jendela Starting Android Emulator, Android Virtual Device Manager dan jendela Run Configura- tions), dan tetap membiarkan jendela IDE Eclipse dan Android Virtual Device yang barusan Anda buat terbuka. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 21 dari 44
  • 22. (x) Untuk mengetes aplikasi pada project yang barusan Anda buat (AndKuadrat-1), klik nama project tersebut pada jendela panel Project Explorer di sebelah kiri halaman IDE Eclipse Anda, lalu klik Run > Debug As > Android Application. Jika tampilan berikut muncul pada jendela Android Virtual Device yang tadi Anda buat, berarti langkah awal Anda telah sukses. Perhatikan bahwa tampilan ini sesuai dengan gambaran yang ditampilkan oleh file ’activi- ty main.xml’ (di subfolder layout) pada tab ’Graphical Layout’ yang ditunjukan oleh IDE Eclipse pada saat Anda pertama kali selesai mengkonfigurasikan Project ’AndKuadrat-1’. Tentu saja bukan ini yang kita inginkan, oleh karenanya kita akan mengubahnya kemudian. 4.3 Programming pada Project Android AndKuadrat-1 Setelah melakukan langkah awal pembuatan project AndKuadrat-1 dan mengkonfigurasi Android Virtual Device yang akan kita gunakan, selanjutnya adalah melakukan coding pada aplikasi yang akan kita buat pada project tersebut. Sebagaimana langkah pada tahap awal pembuatan project Android kita, aplikasi yang akan kita buat memiliki nama ’AndKuadrat’. 4.3.1 Menyalin File-file yang Diperlukan 1. Menyalin File AkarKuadrat.java Aplikasi AndKuadrat yang akan kita buat ini nantinya akan memanfaatkan source code kelas java yang telah kita buat sebelumnya, yakni ’AkarKuadrat.java’. Oleh karena itu, langkah selanjutnya adalah meng-copy file tersebut ke direktori yang sama dengan file kelas utama dari aplikasi AndKuadrat tersebut, yakni file ’MainActivity.java’. Karena package kita adalah package id.org.sapto.andkuadrat, maka file tersebut oleh Eclipse disimpan di subfolder dengan path ’id/org/sapto/andkuadrat’ dalam subfolder ’AndKuadrat-1/src’ dalam folder kerja Eclipse (yang diset saat pertama kali Eclipse dijalankan, default-nya adalah folder Workspace), sehingga file ’AkarKuadrat.java’ tersebut harus kita salin ke subfolder tersebut. Caranya : (i) Dari menu File klik Open File, cari dimana sebelumnya Anda menyimpan file ’Akar- Kuadrat.java’ tersebut. (ii) Setelah terbuka di halaman Eclipse Anda, klik menu File > Save As, dan simpan di folder ’[lokasi folder Eclipse]/AndKuadrat-1/src/id/org/sapto/andkuadrat/’. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 22 dari 44
  • 23. Nampak pada gambar bahwa lokasi kerja Eclipse di komputer Penulis adalah eclipses- pace, sehingga lokasinya adalah : ’∼/eclipsespace/AndKuadrat-1/src/id/org/sapto/andkuadrat’. Jika Anda menggunakan pengaturan default dari Eclipse biasanya direktori kerjanya adalah Workspace sehingga Anda harus menyimpannya di : ’∼/Workspace/AndKuadrat-1/src/id/org/sapto/andkuadrat’. (iii) Kemudian file tersebut kita modifikasi dengan menambahkan satu pernyataan di baris pertama yaitu : package id.org.sapto.andkuadrat; Selebihnya tidak ada perubahan lain. 2. Menyalin File Gambar Aplikasi kita memerlukan dua gambar lainnya yang diperlukan untuk menampilkan Kete- rangan i = √ −1 apabila hasilnya berupa bilangan imaginer dan file gambar kosong apabila nilainya bukan bilangan imaginer. Penulis telah mempersiapkannya yakni file ’i1.png’ yang berisi gambar keterangan tersebut dan file ’i none,png’ yang berisi gambar kosong. Salin kedua gambar tersebut ke dalam subfolder : ’AndKuadrat-1/res/drawable-hdpi’. dalam direktori kerja Eclipse Anda. 4.3.2 Menyiapkan Variabel Komponen Di bawah Project AndKuadrat-1, klik pembuka folder (>atau +) res kemudian value. Double klik file ’strings.xml’, hapus semua isinya dan isikan kode berikut : <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">AndKuadrat</string> <string name="heading1">AndKuadrat</string> <string name="heading2">Menghitung Akar Persamaan Kuadrat</string> <string name="heading3"><html>ax<sup><small>2</small></sup> + bx + c = 0 </html></string> <string name="subhead1">Input Data :</string> <string name="var_a">Variabel a</string> <string name="var_b">Variabel b</string> <string name="var_c">Variabel c</string> 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 23 dari 44
  • 24. <string name="subhead2">Output (Hasil) :</string> <string name="determinan">Determinan (D)</string> <string name="x1"><html>Akar Pertama (x<sub><small>1</small></sub>)</html> </string> <string name="x2"><html>Akar Kedua (x<sub><small>2</small></sub>)</html> </string> <string name="hitung">Hitung</string> <string name="clear">Bersihkan</string> <string name="keterangan"><html>copyright owned by <b>Tri Sapto Adji</b>, Manokwari Papua Barat</html></string> <string name="ket_i">i adalah simbol dari bilangan imaginer (akar kuadrat dari -1)</string> </resources> Simpan perubahan. Jika ada pesan kesalahan pada konsole biarkan saja, karena ini berhubungan dengan file lain yang belum kita ubah. 4.3.3 Menyiapkan Tampilan Buka file ’activity main.xml’ di folder res > layout, hapus semua isinya lalu masukkan kode berikut : <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <TextView android:id="@+id/heading1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="false" android:text="@string/heading1" android:textSize="20sp" android:textStyle="bold" /> <TextView android:id="@+id/heading2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/heading1" android:layout_centerHorizontal="true" android:layout_centerVertical="false" android:text="@string/heading2" /> <TextView android:id="@+id/heading3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/heading2" android:layout_centerHorizontal="true" android:layout_centerVertical="false" android:text="@string/heading3" /> <EditText 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 24 dari 44
  • 25. android:id="@+id/nilaiVar_a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/var_a" android:layout_alignRight="@+id/var_a" android:layout_below="@+id/var_a" android:ems="10" android:inputType="numberSigned" /> <EditText android:id="@+id/nilaiVar_b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/nilaiVar_a" android:layout_alignBottom="@+id/nilaiVar_a" android:layout_alignLeft="@+id/var_b" android:layout_alignRight="@+id/var_b" android:ems="10" android:inputType="numberSigned" /> <EditText android:id="@+id/nilaiVar_c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/nilaiVar_b" android:layout_alignBottom="@+id/nilaiVar_b" android:layout_alignLeft="@+id/var_c" android:layout_alignRight="@+id/var_c" android:ems="10" android:inputType="numberSigned" /> <TextView android:id="@+id/subhead1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/heading3" android:layout_centerHorizontal="true" android:layout_marginTop="12dp" android:text="@string/subhead1" android:textAppearance="?android:attr/textAppearanceMedium" /> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/subhead2" android:orientation="vertical" > <TextView android:id="@+id/determinan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="9dp" 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 25 dari 44
  • 26. android:text="@string/determinan" /> <TextView android:id="@+id/nilaiD" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="center_horizontal" android:textStyle="bold" /> <TextView android:id="@+id/x1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:text="@string/x1" /> <TextView android:id="@+id/nilai_x1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="center_horizontal" android:textStyle="bold" /> <TextView android:id="@+id/x2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:text="@string/x2" /> <TextView android:id="@+id/nilai_x2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="center_horizontal" android:textStyle="bold" /> <ImageView android:id="@+id/ket_i" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:contentDescription="@string/ket_i" android:gravity="center_horizontal" > </ImageView> </LinearLayout> <TextView 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 26 dari 44
  • 27. android:id="@+id/subhead2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/nilaiVar_b" android:layout_centerHorizontal="true" android:layout_marginTop="12dp" android:text="@string/subhead2" android:textAppearance="?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/var_a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/subhead1" android:layout_marginLeft="16dp" android:layout_marginTop="9dp" android:text="@string/var_a" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_above="@+id/keterangan" android:layout_alignParentLeft="true" android:layout_marginTop="5dp" android:gravity="center" android:orientation="horizontal" > <Button android:id="@+id/hitung" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hitung" /> <Button android:id="@+id/clear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/clear" /> </LinearLayout> <TextView android:id="@+id/var_b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/nilaiVar_b" android:layout_centerHorizontal="true" android:text="@string/var_b" /> <TextView android:id="@+id/var_c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/nilaiVar_c" android:layout_marginLeft="20dp" android:layout_toRightOf="@+id/subhead2" 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 27 dari 44
  • 28. android:text="@string/var_c" /> <TextView android:id="@+id/keterangan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:gravity="center_horizontal" android:text="@string/keterangan" android:textSize="10sp" /> </RelativeLayout> Simpan perubahan. Jika masih ada pesan kesalahan, lihat apa pesannya. Kemungkinan isi dari file ’activity main.xml’ yang ada di folder res > menu tidak sesuai dengan kode dalam file tersebut di atas (file ’activity main.xml’ di folder res > layout). Karenanya buka file ’activity main.xml’ di folder res > menu, kosong semua variabel yang ada, sehingga tingga dua baris pernyataan berikut : <menu xmlns:android="http://schemas.android.com/apk/res/android" > </menu> Setelah itu, coba Anda klik kanan pada konsole dan pilih clear. Lalu save kembali ketiga file tersebut di atas (jika tombol save tidak bisa diakses, tambahkan satu spasi kosong pada baris kosong di masing-masing file untuk memunculkan tombol save tersebut). Jika tidak ada pesan kesalahan berarti Anda siap ke langkah berikutnya. 4.3.4 Menyiapkan File Utama (MainActivity.java) Buka file ’MainActivity.java’ di bawah src > id.org.sapto.andkuadrat. Hapus semua isinya dan tambahkan kode berikut : package id.org.sapto.andkuadrat; import android.os.Bundle; import android.app.Activity; import android.widget.Button; import android.widget.TextView; import android.widget.EditText; import android.widget.ImageView; import android.view.View.OnClickListener; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.app.AlertDialog; import android.content.DialogInterface; public class MainActivity extends Activity implements OnClickListener { EditText nilaiVar_a; EditText nilaiVar_b; EditText nilaiVar_c; TextView nilaiD; TextView nilai_x1; TextView nilai_x2; ImageView ket_i; 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 28 dari 44
  • 29. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button hitung=(Button)this.findViewById(R.id.hitung); hitung.setOnClickListener(this); Button clear=(Button)this.findViewById(R.id.clear); clear.setOnClickListener(this); nilaiVar_a = (EditText)this.findViewById(R.id.nilaiVar_a); nilaiVar_b = (EditText)this.findViewById(R.id.nilaiVar_b); nilaiVar_c = (EditText)this.findViewById(R.id.nilaiVar_c); nilaiD = (TextView)this.findViewById(R.id.nilaiD); nilai_x1 = (TextView)this.findViewById(R.id.nilai_x1); nilai_x2 = (TextView)this.findViewById(R.id.nilai_x2); ket_i.setImageResource(R.drawable.i_none); } public boolean onCreateOptionsMenu(Menu menu){ super.onCreateOptionsMenu(menu); menu.add("Keterangan"); return true; } public boolean onOptionsItemSelected(MenuItem item){ if(item.getItemId()==0){ AlertDialog.Builder alertbox=new AlertDialog.Builder(this); alertbox.setTitle("AndKuadrat"); alertbox.setMessage("Program Untuk Menghitung Determinan dannAkar-Akar Persamaan Kuadratnnby : Tri Sapto Adjin@Manokwari, Papua Barat"); alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { // TODO Auto-generated method stub } } ); alertbox.show(); } return true; } public void onClick(View view){ if(view==findViewById(R.id.clear)){ nilaiVar_a.setText(null); nilaiVar_b.setText(null); nilaiVar_c.setText(null); nilaiD.setText(""); nilai_x1.setText(""); nilai_x2.setText(""); ket_i.setImageResource(R.drawable.i_none); } if(view==findViewById(R.id.hitung)){ 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 29 dari 44
  • 30. try{ int varA = Integer.valueOf(nilaiVar_a.getText().toString()).intValue(); int varB = Integer.valueOf(nilaiVar_b.getText().toString()).intValue(); int varC = Integer.valueOf(nilaiVar_c.getText().toString()).intValue(); AkarKuadrat ak = new AkarKuadrat(varA,varB,varC); if(ak.nilaiA()==0) { AlertDialog.Builder alertbox=new AlertDialog.Builder(this); alertbox.setTitle("Kesalahan a=0"); alertbox.setMessage("nilai Variabel a tidak boleh 0!nSilahkan Ulangi ..."); alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){ @Override public void onClick(DialogInterface arg0, int arg1) { // TODO Auto-generated method stub } } ); } if(ak.determinan < 0) { nilaiD.setText(String.valueOf(ak.determinan)); ket_i.setImageResource(R.drawable.i1); if(ak.nilaiB()==0) { nilai_x1.setText(String.valueOf(Math. sqrt(Math.abs(ak.determinan)))+ "i/" + String.valueOf(2*ak.nilaiA())); nilai_x2.setText(String.valueOf(-Math.sqrt(Math.abs(ak.determinan)))+ "i/" + String.valueOf(2*ak.nilaiA())); }else { nilai_x1.setText("("+String.valueOf(-1*ak.nilaiB()) + "+"+ String. valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf (2*ak.nilaiA())); nilai_x2.setText("("+String.valueOf(-1*ak.nilaiB()) + "-"+String. valueOf(Math.sqrt(Math.abs(ak.determinan)))+"i)/" + String.valueOf (2*ak.nilaiA())); } }else { nilaiD.setText(String.valueOf(ak.determinan)); nilai_x1.setText(String.valueOf(ak.x1)); nilai_x2.setText(String.valueOf(ak.x2)); ket_i.setImageResource(R.drawable.i_none); } }catch(NullPointerException npe) { AlertDialog.Builder alertbox=new AlertDialog.Builder(this); alertbox.setTitle("Problem, Variabel kosong!"); alertbox.setMessage("Kesalahan : "+ npe.getMessage()); alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){ @Override public void onClick(DialogInterface arg0, int arg1) { //TODO Auto-generated method stub } } ); alertbox.show(); 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 30 dari 44
  • 31. }catch(NumberFormatException nfe) { AlertDialog.Builder alertbox=new AlertDialog.Builder(this); alertbox.setTitle("Problem, Kesalahan Tipe Data!"); alertbox.setMessage("Kesalahan : "+ nfe.getMessage()); alertbox.setNeutralButton("OK",new DialogInterface.OnClickListener(){ @Override public void onClick(DialogInterface arg0, int arg1) { //TODO Auto-generated method stub } } ); alertbox.show(); } } } } Klik icon Debug As pada Main Toolbar (di bawah Menu Bar, berupa gambar Bug/Kutu) la- lu pilih AndKuadrat. Otomatis pada Android Virtual Device Anda sekarang terbuka aplikasi AndKuadrat yang berarti Anda telah berhasil membuat aplikasi tersebut. Coba Anda klik icon Home yang bergambar rumah, lalu klik icon Launcher, nampak bahwa icon AndKuadrat sudah ada dalam menu aplikasi. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 31 dari 44
  • 32. Klik icon tersebut untuk membuka aplikasi. Lakukan uji coba perhitungan dengan memasukkan nilai Variabel a, Variabel b, dan Variabel C. Otomatis keyboard virtual pada aplikasi Android tersebut akan muncul. Bila telah selesai mengisi nilai klik Tombol Kembali di sebelah kanan tombol Menu untuk menghilangkan tampilan keyboard virtual tersebut. Klik tombol Hitung untuk menampilkan hasil perhitungan. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 32 dari 44
  • 33. Sekarang klik tombol Menu untuk menampilkan menu Keterangan. Klik menu Keterangan tersebut untuk menampilkan Keterangan mengenai program AndKuadrat ini. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 33 dari 44
  • 34. Sampai disini kita telah berhasil membuat sebuah aplikasi Android sederhana. Dengan demikian tujuan kita untuk memanfaatkan sebuah file AkarKuadrat.java di tiga lingkungan yang berbeda (Terminal/Konsole/Command Prompt, Desktop, Web dan Android Smartphone) berhasil kita lakukan. 4.3.5 Tampilan Orientasi Landscape Ada satu hal yang kita tinggalkan, yakni bahwa sebuah aplikasi Android biasanya dapat ditam- pilkan dalam orientasi portrait maupun landscape. Saat kita memutar Smartphone Android kita, maka aplikasi akan secara otomatis berubah tampilannya sesuai dengan orientasi Smartphone tersebut. Hal ini terjadi jika setting auto rotation diaktifkan pada Smartphone. Agar aplikasi kita juga dapat berubah ubah tampilannya sesuai orientasi tersebut, maka kita perlu membuat satu lagi file ’activity main.xml’ dalam folder ’layout-land’ di folder ’res’. Untuk itu lakukan langkah-langkah berikut : (i) Klik kanan folder res tersebut di panel kiri program Eclipse Anda, pilih New > Folder. Pada kotak isian Folder name, ketik ’layout-land’, dan klik tombol Finish untuk mengakhiri. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 34 dari 44
  • 35. (ii) Selanjutnya kita akan membuat sebuah file dalam folder tersebut yang akan mengatur an- tarmuka aplikasi AndKuadrat tersebut dalam orientasi landscape. Caranya klik menu File > New > Other. Lalu di bawah folder Android pilih Android XML Layout File dan klik tombol Next. (iii) Ketikan nama ’activity main.xml’ pada kotak isian File. Jika ada peringatan bahwa File already exist, biarkan saja (karena kita akan mensetting letak foldernya kemudian), klik Next. (iv) Pada kotak dialog selanjutnya ketikan pada kotak isian Folder : ’/res/layout-land’. Oto- matis pada panel Chosen Qualifiers akan muncul ’Landscape’ (karena kita menyimpannya di folder tersebut yang merupakan folder default untuk menyimpan file layout beroirentasi landscape), klik tombol finish. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 35 dari 44
  • 36. (v) Maka otomatis akan terbuka file baru dengan nama yang tertera pada tab l’and/activity main.xml’. (vi) Klik tab ’activity main.xml’ di sebelah kanan tab ’Graphical Layout’ (tab ini posisinya di bawah file sedang ditampilkan). Untuk menampilkan source code file tersebut. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 36 dari 44
  • 37. (vii) Hapus semua isi file tersebut, dan isikan dengan kode berikut : <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".MainActivity" > <TextView android:id="@+id/heading1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center_horizontal" android:text="@string/heading1" android:textSize="18sp" android:textStyle="bold" /> <TextView android:id="@+id/heading2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center_horizontal" android:text="@string/heading2" /> <TextView android:id="@+id/heading3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center_horizontal" android:text="@string/heading3" /> <LinearLayout android:id="@+id/linearLayout1" 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 37 dari 44
  • 38. android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <LinearLayout android:id="@+id/linearLayout1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/subhead1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="4dp" android:text="@string/subhead1" android:textAppearance="?android:attr/textAppearanceMedium" /> <LinearLayout android:id="@+id/linearLayout1_1_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/var_a" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/var_a" /> <EditText android:id="@+id/nilaiVar_a" android:layout_width="97dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:ems="8" android:inputType="numberSigned" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1_1_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/var_b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/var_b" /> <EditText android:id="@+id/nilaiVar_b" android:layout_width="97dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:ems="8" 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 38 dari 44
  • 39. android:inputType="numberSigned" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1_1_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/var_c" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/var_c" /> <EditText android:id="@+id/nilaiVar_c" android:layout_width="97dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:ems="8" android:inputType="numberSigned" /> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1_2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="fill_horizontal|left" android:layout_marginLeft="15dp" android:gravity="left|right" android:orientation="vertical" > <TextView android:id="@+id/subhead2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="4dp" android:text="@string/subhead2" android:textAppearance="?android:attr/textAppearanceMedium" /> <LinearLayout android:id="@+id/linearLayout1_2_1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:orientation="horizontal" > <TextView android:id="@+id/determinan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 39 dari 44
  • 40. android:text="@string/determinan" /> <TextView android:id="@+id/nilaiD" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="24dp" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1_2_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:orientation="horizontal" > <TextView android:id="@+id/x1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/x1" /> <TextView android:id="@+id/nilai_x1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="12dp" android:textStyle="bold" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout1_2_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:orientation="horizontal" > <TextView android:id="@+id/x2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="3dp" android:text="@string/x2" /> <TextView android:id="@+id/nilai_x2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="27dp" android:layout_marginTop="3dp" android:textStyle="bold" /> 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 40 dari 44
  • 41. </LinearLayout> <ImageView android:id="@+id/ket_i" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="right" android:gravity="right" android:layout_marginBottom="3dp" android:layout_marginTop="3dp" android:contentDescription="@string/ket_i" > </ImageView> <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:gravity="center" android:orientation="horizontal" > <Button android:id="@+id/hitung" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hitung" /> <Button android:id="@+id/clear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/clear" /> </LinearLayout> </LinearLayout> </LinearLayout> <TextView android:id="@+id/keterangan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="1dp" android:gravity="center_horizontal" android:text="@string/keterangan" android:textSize="8sp" /> </LinearLayout> (viii) Simpan perubahan. Kemudian klik kembali tab ’Graphical Layout’ untuk melihat gambaran hasil dari pengaturan tata letak landscape oleh file tersebut. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 41 dari 44
  • 42. (ix) Disebabkan aplikasi Android Virtual Device di komputer kita tersebut tidak dapat kita pu- tar atau diubah orientasinya, maka untuk mencoba hasilnya, kita perlu membuat sebuah Android Virtual Device Manager yang baru (masih menggunakan konfigurasi Android Apli- cation AndKuadrat) yang memiliki tampilan widescreen (landscape). Misalnya kita beri nama ’AndKuadrat-Landscape’ dengan konfigurasi sebagaimana gambar berikut : Tentu saja ini tidak dapat mewakili perangkat sesungguhnya karena kedua Android Virtual Device yang kita buat tersebut memiliki settingan device yang berbeda. (x) Kemudian jalankan Virtual Device tersebut dengan mengklik tombol Start pada jendela Android Virtual Device Manager. Jangan lupa untuk menutup terlebih dahulu Android Virtual Device sebelumnya yang beroirentasi portrait untuk menghemat memori komputer Anda. 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 42 dari 44
  • 43. Berikut tampilan yang akan Anda dapatkan. (xi) Lakukan Debug As > AndKuadrat untuk menampilkan hasil tampilan orientasi landscape. Selanjutnya, untuk menjalankan aplikasi ini di perangkat Smartphone Android sebenarnya, Anda tinggal mengkopi file ’AndKuadrat-1.apk’ di folder ’bin’ ke perangkat Anda tersebut dan mengklik untuk menginstallnya. Demikian, semoga bermanfaat :-) . 4 MERANCANG ANTARMUKA UNTUK ANDROID halaman 43 dari 44
  • 44. LAMPIRAN 1. Download semua aplikasi yang dibahas disini di https://db.tt/Kie0bKTc 2. Download icon yang digunakan di https://db.tt/9bZcBM4i