Monday, 18 March 2013

PHONE BOOK’S APPLICATION

I.         Dasar Teori
Phone Book’s Application adalah suatu aplikasi sederhana yang didesain sedemikian rupa, dimana memuat data Nama, Mobile, Home, Office, dan E-Mail. Penyimpanan data telepon disimpan disuatu database, sehingga data tersebut akan selalu ada pada saat aplikasi dijalankan.
Dalam hal pembuatan, Kami mengunakan Netbeans dan databasenya menggunakan XAMPP. Untuk menjalankan Phone Book’s Application ini membutuhkan suatu koneksi dari Netbeans ke XAMPP MySQL. Jadi sebelum membuatnya, install dulu aplikasi-aplikasi tersebut.

II.         Alat dan Bahan
1.   Komputer
2.   Netbeans
3.   XAMPP

III.         Pembuatan Aplikasi
Untuk langkah awal, terlebih dahulu kita buka XAMPP Control Panel, lalu klik Start pada Apache dan Mysql, kemudian buka http://localhost/phpmyadmin/ pada web browser Anda. Buatlah Database dengan nama kontak_db. Perhatikan gambar dibawah ini :


Klik Create untuk membuat database.

Selanjutnya buatlah table pada kontak_db dengan nama tb_kontak. Ketikkan code berikut pada SQL query dan perhatikan gambar dibawahnya.
drop table if exists tb_kontak;
/*==============================================================*/
/* Table: tb_kontak                                             */
/*==============================================================*/
create table tb_kontak(
name                 varchar(20) not null,
mobile               varchar(15),
home                varchar(15),
office               varchar(15),
e_mail               varchar(30),
primary key (name));


Gambar saat pembuatan database pada SQL query :


Klik Go untuk membuat table.
Setelah selesai membuat table, tutup web browser Anda.
Langkah selanjutnya adalah pembuatan aplikasinya.

Buka Netbeans, buat project baru dengan nama Aplikasi Buku Telepon.
Buat package dengan nama buku_telepon dan buat jFrame dengan nama Data_Telp.
Desain form kurang lebih seperti dibawah ini :


Berikut komponen dan properti – propertinya :

Komponen
Properties
Nilai
jMenuBar1
jMenu1
jMenu2
-
Text
Text
-
File
Help
jPanel1
border
Titled Border (Title = Phone Book’s)
jLabel1
Text
Name
jTextField1
Text
Variable Name

TxtNama
jLabel2
Text
Mobile
jTextField2
Text
Variable Name

TxtMobile
jLabel3
Text
Home
jTextField3
Text
Variable Name

TxtHome
jLabel4
Text
Office
jTextField4
Text
Variable Name

TxtOffice
jLabel5
Text
E-mail
jTextField5
Text
Variable Name

TxtEmail
jPanel2
border
Titled Border (Title = Button)
jButton1
Text
Variable Name
Insert
BtnSimpan
jButton2
Text
Variable Name
Edit
BtnUbah
jButton3
Text
Variable Name
Del
BtnHapus
jPanel3
border
Titled Border (Title = Daftar Nomor)
jTabel1
Variable Name
Tblkontak
jPanel4
border
Titled Border (Title = Search)
jLabel6
Text
Cari Berdasarkan
jComboBox1

Model



Variable Name
Name
Mobile
Home
Office
E_mail

CmbCari
jTextField6
Text
Variable Name

TxtCari




Tambahkan dua MenuItem pada MenuBar File dan satu MenuItem pada MenuBar Help.

 
     

Berikut komponen dan property – propertinya :

Komponen
Properties
Nilai
jMenuItem1
Text
Variable Name
New
New
jmenuItem2
Text
Variable Name
Quit
Quit
jMenuItem3
Text
Variable Name
About Us
AboutUs


Pada Other Components yang berada di Menu Windows è Navigating è Navigator/Inspector, Klik kanan è Add From Pallate è Swing Windows è Dialog. Perhatikan gambar dibawah ini :



Double klik pada jDialog1, maka akan muncul sebuah form dan desainlah seperti dibawah ini :




Berikut komponen dan property – propertinya :

Komponen
Properties
Nilai
jPanel5
border
Titled Border (Title = )
jLabel7
Text
Font
Phone Book’s
Monotype Corsiva, Italic, 24
jLabel8
Text
Font
application
Monotype Corsiva, Italic, 24
jPanel6
border
Titled Border (Title = )
jLabel9
Text
Icon

p.png
jLabel10
Text
Icon

hp.png
jPanel5
border
Titled Border (Title = Created By :)
jLabel11
Text
Font
Erfan Bahtiar (1110651009)
Times New Roman, Plain, 14
jLabel12
Text
Font
Zainul Muhabat (1110651037)
Times New Roman, Plain, 14

Untuk memasukkan gambar pada jLabel9 dan jLabel10, copy gambar dengan nama p.png dan hp.png kedalam Package buku_telepon.




Klik jLabel9 è properties è Icon                        


Klik jLabel10 è properties è Icon


Untuk dapat terkoneksi dengan database, pada Java telah disediakan Library MySQL JDBC Driver. Kita tinggal meng-import-nya saja. Klik Kanan pada folder Libraries yang ada Pada Project. Klik Add Library.


Cari Library MySQL JDBC Driver, Kemudian Klik Add Library.

Selanjutnya buat Package baru dengan cara Klik Kanan pada Project è New è Java Package. Beri nama Tabel. Klik Finish.
Buat Class baru pada Package Tabel. Klik Kanan pada Package Tabel è New è Java Class. Beri nama DataKontak. Klik Finish.




Buat Class baru pada Package Tabel. Klik Kanan pada Package Tabel è New è Java Class. Beri nama TabelDataKontak. Klik Finish.




Tambahkan code berikut pada class Data_Telp :


Tambahkan variable – variable berikut pada class Data_Telp :


Tambahkan variable – variable berikut pada constructor class Data_Telp :


Selanjutnya tambahkan script berikut di bawah blok Konstruktor FrameKontak.










Catatan:
Pada script di atas, terdapat script
Pada driver diatas, Kami memberikan username =root, dan password tidak Kami isi pada database MySQL.

Selanjutnya, beri actionPerformed pada masing-masing tombol button dan jMenuItem dengan cara : Klik kanan Button/jMenuItem è Events è Action è actionPerformed

o    actionPerformed pada jMenuItem New


o    actionPerformed pada jMenuItem Quit



o    actionPerformed pada jButton Insert




o    actionPerformed pada jButton Edit


o    actionPerformed pada jButton Del




o    Even è Mouse è MousePressed pada jTabel TblKontak




o    Even è Key è KeyReleased pada jTextField TxtCari




o    actionPerformed pada jMenuItem AboutUs



Selanjutnya buat jFrame baru dengan nama Login pada package buku_telepon.
Desain form kurang lebih seperti dibawah ini :



Berikut komponen dan properti – propertinya :

Komponen
Properties
Nilai
jLabel1
Text
Font
Enter Your ID
Monotype Corsiva, Bold Italic, 36
jLabel2
Text
NAME
jLabel3
Text
PASSWORD
jTextField1
Text

jPasswordField1
Text

jButton1
Text
Variable Name
EXIT
BtnExit
jButton2
Text
Variable Name
LOGIN
BtnLogin

o    actionPerformed pada jButton EXIT




o    actionPerformed pada jButton LOGIN




Maksud dari source code ini adalah :
Jika user memasukkan NAME “root” dan PASSWORD “admin”, maka program akan mengeksekusi, artinya masuk ke form Data_Telp.

Menambahkan Count Down GUI (perhitungan waktu mundur) sebelum masuk ke form Login.
Buat jFrame baru dengan nama CountDownGUI. Desain form kurang lebih seperti dibawah ini :



Berikut komponen dan properti – propertinya :

Komponen
Properties
Nilai
jLabel1
Text
Font
Please Wait….
Times New Roman, Plain, 24

Tambahkan code berikut di bawah Constructor class CountDownGUI :



Langkah terakhir adalah membuat class baru dengan nama Frame_Main untuk menjalankan seluruh program (CountDownGUI, Login, dan Data_Telp) yang telah dibuat sebelumnya dalam satu kali eksekusi.
Berikut source codenya :




Catatan :
Untuk menjalankan aplikasi disatu class saja yaitu Frame_main, Method main diclass atau diframe lain harus dihapus atau dijadikan coment saja.

No comments:

Post a Comment

Google+ Followers