Interface User Form
(IUF) digunakan untuk melakukan penginputan data, dimana data yang dimasukan
untuk keperluan informasi yang dibutuhkan, seperti pembuatan laporan. Untuk
memudahkan pembuatan IUF kita perlukan langkah-langkah agar supaya memudahkan
dalam pembuatannya. Dibawah ini merupakan cara pengimplemtasian pembuatan IUF yang
mudah dan sederhana.
1. Membuat table untuk penyimpanan data
2. Desain form yang sesuai dengan
atribut dari table yang dibuat
3. Lakukan koneksi database
4. Lakukan penyesuaian komponen input
dengan atribut pada table yang dibuat
5. Membuat tombol untuk melakukan
manipulasi data, seperti Tambah, Ubah, Simpan, Batal dan Hapus terhadap data.
Sebagai catatan, pembuatan IUF yang
sederhana dalam artikel ini akan dibuat dengan Delphi 7 dan DBMS dengan
MS-Access dari Microsoft. Untuk memudahkan pemahaman dalam pembuatannya, anda
perlu memahami pemrograman Delphi yang dimulai struktur program sampai dengan
komponen Delphi yang dipakai dalam pendesainan IUF. Selain itu juga anda harus
memahami cara membuat database dan table pada MS-Access. Setelah itu anda akan
dengan mudah memahami pengimplemtasian IUF dengan langkah-langkah yang tertera
diatas.
Pembuatan Database dan
Tabel
Langkah awal untuk
membuat IUF yaitu pembuatan database dan table untuk menyimpan data. Kita ambil
contoh IUF yang sedehana untuk memasukan data Dosen pada Sistem Pengolahan Data
Nilai. Untuk memudahkan dalam memahami materi, lakukan langkah-langkah dibawah
ini:
1. Buka MS-Access, kemudian buat database
dengan nama dbNilai. Dan simpan di folder
kita dengan file MS-Access 2003 bila kita menggunakan MS-Access 2007.
2. Buat table Dosen dengan nama Dosen sesuai spefikasi dibawah ini :
Nama Field
|
Type
|
Size
|
Kunci
|
KoDos
|
Text
|
3
|
Primary Key
|
NamaDos
|
Text
|
30
|
-
|
AlamatDos
|
Text
|
50
|
-
|
Tlp
|
Text
|
15
|
-
|
Email
|
Text
|
20
|
-
|
3. Isikan table yang telah dibuat dengan
:
KoDos
|
NamaDos
|
AlamatDos
|
Tlp
|
Email
|
ARI
|
Andi
Ruswandi
|
Jl.
Parungkuda Kuda No.21 Sukabumi
|
(0266)
6717717
|
andiruswandi@gmail.com
|
AFI
|
Arif
Indrawan
|
Jl.
Veteran No.23 Sukabumi
|
(0266)
2312312
|
arif@gmail.com
|
Pendesainan Interface User Form
Untuk membuat IUF,
kita harus mengacu pada table yang dibuat, karena IUF digunakan untuk melakukan
aktifitas manipulasi data (Insert, Edit, Save dan Delete). Atribut yang ada
pada table diatas ada 5 atribut, yaitu KoDos,
NamaDos, AlamatDos Tlp, dan Email. Dari semua atribut ini, komponen
yang cocok untuk melakukan input data adalah DBEdit pada komponen Data Control.
Untuk lebih jelasnya lakukan
langkah-langkah dibawah ini :
1. Buat form baru di Delphi dengan
langkah File | New | Application, kemudian lakukan komfigurasi terhadap Form1,
seperti pada Tabel dibawah ini :
Komponen
|
Property
|
|
Value
|
Form1
|
Caption
|
|
Form
Data Dosen
|
|
BorderStyle
|
|
bsSingle
|
|
BorderIcons
|
biMinimize
|
False
|
|
|
biMaximize
|
False
|
|
Name
|
|
frmDosen
|
|
Position
|
|
poScreenCenter
|
2. Untuk mekukan pendesaian terhadap
form dalam mengimplementasikan IUF dengan menambah beberapa komponen yang
disediakan pada Tab Komponen (Pallete) seperti pada tabel dibawah ini :
Pallete
|
Komponen
|
Jumlah
|
Standard
|
Label
|
5
|
Standard
|
Button
|
6
|
Data
Control
|
DBGrid
|
1
|
Data
Control
|
DBNavigator
|
1
|
3.
Kemudian
lakukan pendesainan seperti pada Gambar Desain Form Data Dosen, yang berada dibawah
ini :
Gambar Desain Form Data Dosen
4. Lakukan konfigurasi form pada gambar
diatas dengan langkah-langkah pada table dibawah ini :
Komponen
|
Property
|
Value
|
Label1
|
Caption
|
Kode
Dosen
|
Label2
|
Caption
|
Nama
Dosen
|
Label3
|
Caption
|
Alamat
Lengkap
|
Label4
|
Caption
|
No.
Telepon
|
Label5
|
Caption
|
Email
|
Button1
|
Caption
|
Tambah
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tTambah
|
Button2
|
Caption
|
Ubah
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tUbah
|
Button3
|
Caption
|
Simpan
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tSimpan
|
Button4
|
Caption
|
Batal
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tBatal
|
Button5
|
Caption
|
Hapus
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tHapus
|
Button6
|
Caption
|
Keluar
|
|
Font
-> Style – fsBold
|
True
|
|
Name
|
tKeluar
|
DBNavigator
|
Visible
Button -> nbFirst
|
True
|
|
Visible
Button -> nbPrior
|
True
|
|
Visible
Button -> nbNext
|
True
|
|
Visible
Button -> nbLast
|
True
|
|
Visible
Button -> nbInsert
|
False
|
|
Visible
Button -> nbDelete
|
False
|
|
Visible
Button -> nbEdit
|
False
|
|
Visible
Button -> nbPost
|
False
|
|
Visible
Button -> nbCancel
|
False
|
|
Visible
Button -> nbRefresh
|
False
|
5. Setelah dilakukan konfigurasi maka
akan form akan tampil seperti dibawah ini :
Gambar Desain Form Data Dosen yang telah dikonfigurasi