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.