Buatlah tabel baru dengan nama project dengan atribut no_project dengan tipe char(10) dan nama_project dengan tipe varchar(50) dan budget dengan tipe int. Set no_project sebagai primary key, kemudian masukkan beberapa data seperti pada gambar 1.

Gambar 1. Tabel project

Selanjutnya coba buat tampilan tabel tersebut menggunakan php. Buat file baru dengan nama project.php kemudian isikan kode program berikut:

<?php
//membuat koneksi dengan mysql
mysql_connect('localhost','root','') or die ("koneksi gagal !!!");
//membuat koneksi dengan database
mysql_select_db('perusahaan');
//membuat tabel project
echo "<table border=1>";
echo "<tr>";
echo "<th>Nomor Project</th>
<th>Nama Project</th>
<th>Budget</th>";
echo "</tr>";
//membaca semua data dari tabel project
$query = "select * from project";
$result = mysql_query($query)or die ("Wrong Query:".mysql_error());
while($data=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>$data[no_project]</td>
<td>$data[nama_project]</td>
<td>$data[budget]</td>";
echo "</tr>";
}
?>


Jalankan browser anda , kemudian ketikkan alamat http://localhost/perusahaan/project.php kemudian enter. Anda akan mendapatkan tampilan seperti pada gambar 2.

Gambar 2. Tabel project melalui browser

Tabel project mempunyai hubungan N:N (many to many) dengan tabel karyawan yang telah kita pelajari pada pembahasan sebelumnya berjudul Membuat Database dan Tabel menggunakan MySQL dan PHP. Satu project dapat terdiri dari banyak karyawan , sementara sebaliknya 1 orang karyawan boleh bekerja untuk beberapa project pada saat yang sama. Dalam hal ini kita perlu membuat tabel baru untuk memecah hubungan many to many antara tabel project dan karyawan. Buat tabel baru dengan nama project_karyawan dengan atribut Pnumber dengan tipe char(10), Ekode dengan tipe char(10), jabatan dengan tipe varchar(30) dan lama_kerja dengan tipe int. Tabel baru tersebut akan menjadi child entity dari tabel karyawan dan tabel project yang keduanya sebagai parent entity.

Pnumber akan menjadi foreign key yang merujuk pada no_project dari tabel project, sedangkan Ekode akan menjadi foreign key yang merujuk pada kd_karyawan dari tabel karyawan. Karena seorang karyawan hanya dapat menjabat satu posisi tertentu saja pada satu project maka Pnumber dan Ekode juga akan kita gunakan sebagai primary key dari tabel karyawan_project

Bukalah kembali phpmyadmin, kemudian buatlah tabel project_ karyawan seperti dijelaskan diatas. Untuk membuat Pnumber dan Ekode sebagai primary key, check atribut Pnumber dan Ekode, kemudian klik icon primary key di bawah tabel.

Gambar 3. Tabel project_karyawan

Selanjutnya adalah membuat atribut Pnumber dan Ekode sebagai foreign key. Pertama dengan mengakses menu Designer pada database perusahaan, kemudian akan muncul semua tabel yang terdapat pada database perusahaan. Tampilkan semua atributnya dengan mengklik tombol panah yang terdapat di samping kiri nama tabel. Pilih menu create relation yang terdapat pada toolbar, arahkan referenced key yaitu no_project pada tabel project dan foreign key yaitu Pnumber pada tabel project_karyawan. Lakukan hal yang sama untuk kd_karyawan di tabel  karyawan dan Ekode di tabel project_karyawan. Hasil akhirnya seperti terlihat pada gambar 4.

Gambar 4. Membuat relationship N:N

Selanjutnya adalah mengisi tabel project karyawan. Perhatikan bahwa data Pnumber dan Ekode bukan berupa isian tetapi combo box yang nilainya masing-masing berasal dari no_project  dan kd_karyawan.

Gambar 5. Mengisi data pada tabel project_karyawan

Dengan adanya relationship antara tabel project dan tabel karyawan melalui tabel project_karyawan maka kita dapat menampilkan data gabungan dari kedua tabel tersebut, contohnya menampilkan nama project dan karyawan yang bekerja di dalamnya. Buka kembali file project.php kemudian tambahkan kode program berikut :

//membuat tabel project_karyawan

echo "</tr>";

//membaca semua data dari tabel project_karyawan, project dan karyawan

$query1 = “select * from project_karyawan,project,karyawan where project_karyawan.Pnumber = project.no_project and project_karyawan.Ekode = karyawan.kd_karyawan”;

$result1 = mysql_query($query1)or die (“Wrong Query:”.mysql_error());

while($data1=mysql_fetch_array($result1))

{

echo “<tr>”;

echo “<td>$data1[no_project]</td>

<td>$data1[nama_project]</td>

<td>$data1[kd_karyawan]</td>

<td>$data1[nama_depan]</td>

<td>$data1[jabatan]</td>

<td>$data1[lama_kerja]</td>”;

echo “</tr>”;

}

Jalankan kembali browser anda , kemudian ketikkan alamat http://localhost/perusahaan/project.php kemudian enter. Anda akan mendapatkan tampilan seperti pada gambar 6.

Gambar 6. Tampilan gabungan data tabel project_karyawan, project dan karyawan

Buatlah tabel baru dengan nama departemen dengan atribut no_departemen dengan tipe int dan nama_departemen dengan tipe varchar. Set no_departemen sebagai primary key, kemudian masukkan beberapa data seperti pada gambar 1.

Gambar 1. Tabel departemen

Selanjutnya coba buat tampilan tabel tersebut menggunakan php. Buat file baru dengan nama departemen.php kemudian isikan kode program berikut:

<?php
//membuat koneksi dengan mysql
mysql_connect('localhost','root','') or die ("koneksi gagal !!!");
//membuat koneksi dengan database
mysql_select_db('perusahaan');
 
//membuat tabel departemen
echo "<table border=1>";
echo "<tr>";
echo "<th>Nomor Departemen</th>
<th>Nama Departemen</th>";
echo "</tr>";
 
//membaca semua data dari tabel departemen
$query = "select * from departemen";
$result = mysql_query($query)or die ("Wrong Query:".mysql_error());
while($data=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>$data[no_departemen]</td>
<td>$data[nama_departemen]</td>";
echo "</tr>";
}
?>

Jalankan browser anda , kemudian ketikkan alamat http://localhost/perusahaan/departemen.php kemudian enter. Anda akan mendapatkan tampilan seperti pada gambar 2.

Gambar 2. Tabel departemen melalui browser

Tabel departemen mempunyai hubungan 1:N (one to many) dengan tabel karyawan yang telah kita pelajari pada pembahasan sebelumnya berjudul Membuat Database dan Tabel menggunakan MySQL dan PHP. Satu departemen dapat mempunyai banyak karyawan , sementara sebaliknya 1 orang karyawan hanya boleh bekerja untuk 1 departemen saja, atau dengan kata lain tabel departemen merupakan parent entity dari child entity yaitu tabel karyawan.

Untuk menandakan adanya hubungan antara kedua tabel tersebut diperlukan atribut yang mewakili parent entity di child entity (analogi: nama ayah yang dipakai di nama belakang anak ). Atribut tersebut dinamakan sebagai Foreign Key. Nilai dari foreign key yang berada di child entity akan merujuk ke nilai primary key dari parent entity.

Bukalah kembali phpmyadmin, kemudian tambahkan atribut baru pada tabel karyawan dengan nama Dnumber seperti pada gambar 3. Caranya adalah buka menu structure pada tabel karyawan kemudian klik tombol Go yang berada di bawah struktur tabel tersebut. Setelah mengisikan nama atribut dan tipe datanya, tekan tombol save untuk menyimpan perubahan tersebut. Perhatikan syntax sql untuk merubah struktur tabel dan perhatikan bahwa atribut Dnumber sudah masuk kedalam struktur tabel.

Gambar 3. Menambahkan atribut baru pada tabel karyawan

Selanjutnya adalah membuat atribut Dnumber sebagai foreign key yang merujuk ke no_departemen yang merupakan primary key dari tabel departemen. Caranya seperti diperlihatkan pada gambar 4. Pertama dengan mengakses menu Designer pada database perusahaan, kemudian akan muncul tabel karyawan dan tabel departemen. Tampilkan semua atributnya dengan mengklik tombol panah yang terdapat di samping kiri nama tabel. Pilih menu create relation yang terdapat pada toolbar, pilih referenced key yaitu no_departemen pada tabel departemen dan foreign key yaitu Dnumber pada tabel karyawan.

Gambar 4. Membuat relationship 1:N

Setelah membuat relationship antara tabel departemen dan tabel karyawan, selanjutnya adalah mengisi nilai Dnumber. Bukalah tabel karyawan kemudian pilih semua data dengan pilihan Check All yang berada di bagian kiri bawah tabel, kemudian pilih menu change seperti pada gambar 5. Perhatikan pada bagian Dnumber, inputan bukan berupa isian tetapi berupa combo box yang isinya merupakan nilai dari primary key yang tersedia di tabel departemen. Isikan nomor departemen untuk semua karyawan yang terdapat di tabel karyawan.

Gambar 5. Menambahkan data nomor departemen pada tabel karyawan

Dengan adanya relationship antara tabel departemen dan tabel karyawan maka kita dapat menampilkan data gabungan dari kedua tabel tersebut, contohnya menampilkan nama departemen dan karyawan yang bekerja di dalamnya. Buka kembali file departemen.php kemudian tambahkan kode program berikut :

//membuat tabel karyawan yang bekerja di departemen tertentu
echo "<table border=1>";
echo "<tr>";
echo "<th>Nomor Departemen</th>
<th>Nama Departemen</th>
<th>Kode Karyawan</th>
<th>Nama Karyawan</th>
<th>Gaji</th>";
echo "</tr>";
 
//query data dari 2 tabel
$query1 = "select * from karyawan,departemen where departemen.no_departemen=karyawan.Dnumber";
$result1 = mysql_query($query1)or die ("Wrong Query:".mysql_error());
while($data1=mysql_fetch_array($result1))
{
echo "<tr>";
echo "<td>$data1[no_departemen]</td>
<td>$data1[nama_departemen]</td>
<td>$data1[kd_karyawan]</td>
<td>$data1[nama_depan]</td>
<td>$data1[gaji]</td>";
echo "</tr>";
}

Gambar 6. Tampilan gabungan data tabel departemen dan karyawan

Pada pembahasan ini kita akan coba membuat database menggunakan mysql dan menampilkan hasilnya menggunakan php. Untuk dapat mempermudah melakukannya, anda cukup menggunakan paket aplikasi XAMPP dimana didalamnya antara lain terdapat aplikasi database MySql, Php dan Apache server. Anda dapat mendownloadnya melalui link berikut:

Selesai mendownload, lakukan instalasi dengan mengikuti langkah-langkah yang diberikan. Setelah aplikasi XAMPP berhasil diinstall, jalankan XAMPP Control Panel dan jalankan (start) modules Apache dan MySql.

Gambar 1. Menjalankan module apache dan mysql

Selanjutnya bukalah browser anda (firefox,chrome,opera, dsb.), kemudian ketikkan http://localhost di alamat url kemudian enter. Apabila pada browser browser anda muncul tampilan seperti pada gambar 2, berarti anda telah berhasil menginstall XAMPP dan siap membuat aplikasi database berbasis web.

Gambar 2. Tampilan localhost XAMPP

Selanjutnya bukalah folder tempat anda menginstal XAMPP yang biasanya berada di C:\xampp. Bukalah folder htdocs, folder ini merupakan folder penyimpanan file web kita. Buatlah folder baru di dalam folder htdocs misalnya dengan nama perusahaan untuk menyimpan aplikasi database yang akan kita buat. Buatlah file baru di dalam folder perusahaan dengan nama index.php kemudian isikan kode program berikut (anda dapat menggunakan notepad atau editor yang lain):

<?php
echo "Hore...Saya berhasil membuat aplikasi PHP:)";
?>

Jalankan kembali browser anda kemudian ketikkan alamat http://localhost/perusahaan/

Apabila tampilan wweb anda seperti pada gambar 3 maka anda berhasil membuat aplikasi php pertama anda dengan sukses

Gambar 3. Tampilan aplikasi awal

Setelah berhasil membuat aplikasi awal, selanjutnya kita belajar menggunakan database. Bukalah alamat http://localhost/phpmyadmin/ , maka browser anda akan menampilkan semua database yang terdapat pada MySQL anda. Buatlah database baru dengan nama perusahaan.

Gambar 4. Tampilan phpmyadmin

Selanjutnya buat tabel karyawan pada database perusahaan tersebut dengan jumlah atribut sebanyak 7 buah seperti pada gambar 5.

Gambar 5. Membuat tabel baru pada database perusahaan

Buatlah atribut-atribut untuk karyawan dengan tipe data yang sesuai untuk masing-masing atribut seperti contoh pada gambar 6.

Gambar 6. Membuat atribut baru pada tabel karyawan

Setelah memasukkan atribut-atribut baru kemudian simpan dengan menggunakan tombol save. Selanjutnya anda akan melihat bahwa tabel karyawan sudah terbentuk. Anda juga akan melihat sintax sql untuk membuat tabel tersebut. Langkah selanjutnya adalah mencoba memasukkan data pada tabel tersebut. Pilih menu insert, kemudian masukkan data karyawan seperti pada gambar 8.

Gambar 7. Tampilan awal tabel karyawan

Gambar 8. Menambahkan data baru di tabel karyawan

Setelah memasukkan data karyawan, simpan menggunakan tombol Go. Anda akan melihat perintah sql untuk memasukkan data.

Gambar 9. Tampilan setelah menambahkan data baru di tabel karyawan

Untuk melihat data yang telah anda masukkan, pilih menu browse.

Gambar 10. Melihat data di tabel karyawan

Cobalah memasukkan data baru yang persis sama di tabel karyawan, anda akan melihat bahwa data tersebut berhasil dimasukkan ke tabel karyawan. Hal tersebut  seharusnya tidak boleh terjadi, duplikasi data akan menimbulkan masalah pada proses – proses yang menggunakan data dari tabel tersebut. Hapuslah salah satu data yang sama tersebut dengan mengklik tanda silang pada awal data. Selanjutnya buatlah primary key pada tabel tersebut untuk mencegah duplikasi data yang sama persis. Pilih menu Structure, kemudian set atribut kd_karyawan sebagai primary key dengan mengklik tanda kunci seperti pada gambar 12.

Gambar 11. Duplikasi data di tabel karyawan

Gambar 12. Membuat primary key di tabel karyawan

Gambar 13. Atribut kd_karyawan sebagai primary key di tabel karyawan

Anda dapat mencoba kembali memasukkan data yang sama persis dengan data yang ada pada tabel, kemudian lihat bahwa anda akan mendapat pesan error seperti berikut:

MySQL said:
#1062 - Duplicate entry 'A101234' for key 'PRIMARY'

Masukkan beberapa data lagi pada tabel karyawan tersebut. Selanjutnya kita akan mencoba menampilkan tabel karyawan tersebut pada halaman web.

Bukalah kembali file index.php yang berada di folder C:\xampp\htdocs\perusahaan menggunakan notepad atau text editor yang lain. Masukkan kode berikut pada file tersebut:

<?php
//membuat koneksi dengan mysql
mysql_connect('localhost','root','') or die ("koneksi gagal !!!");
//membuat koneksi dengan database
mysql_select_db('perusahaan');
 
//membuat tabel karyawan
echo "<table border=1>";
echo "<tr>";
echo "<th>Kode Karyawan</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Jenis Kelamin</th>
<th>Tanggal Lahir</th>
<th>Alamat</th>
<th>Gaji</th>";
echo "</tr>";
 
//membaca semua data dari tabel karyawan
$query = "select * from karyawan";
$result = mysql_query($query)or die ("Wrong Query:".mysql_error());
while($data=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>$data[kd_karyawan]</td>
<td>$data[nama_depan]</td>
<td>$data[nama_belakang]</td>
<td>$data[jenis_kelamin]</td>
<td>$data[tanggal_lahir]</td>
<td>$data[alamat]</td>
<td>$data[gaji]</td>";
echo "</tr>";
}
?>

Jalankan browser anda, kemudian ketikkan alamat http://localhost/perusahaan/ kemudian enter. Anda akan mendapatkan tampilan tabel seperti terlihat pada gambar 14.

Gambar 14. Tampilan tabel karyawan di browser

Gambar 1. Tampilan aplikasi font

Pada tampilan tersebut terdapat 3 objek kontrol utama pada aplikasi font ini yaitu edit box untuk memasukkan teks, list box untuk menampilkan daftar font, serta static text untuk menampilkan hasil perubahan font berdasarkan pilihan pada list box. Untuk itu kita perlu membuat variable untuk ketiga objek tersebut seperti berikut:

Tabel 1. Variabel yang dibutuhkan pada aplikasi font

Setelah menyiapkan tampilan serta variabel yang dibutuhkan untuk aplikasi font, selanjutnya kita akan mengambil daftar font yang terdapat pada windows untuk dimasukkan pada list box yang terdapat pada aplikasi font ini. Seperti dijelaskan sebelumnya, untuk mengambil daftar font pada windows, kita perlu membuat fungsi pemanggil (callback function) dari windows API. Deklarasi fungsi akan kita buat pada file dlg.cpp sedangkan prototype (pemanggilan fungsi di awal aplikasi) kita buat di file dlg.h.

Berikut adalah prototype fungsi yang kita buat pada file dlg.h:

// Lat_FontDlg.h : header file
#pragma once
#include "afxwin.h"
 
//prototype fungsi untuk memanggil semua font yang terdapat pada windows
int CALLBACK EnumFontFamProc(LPENUMLOGFONT lpelf,LPNEWTEXTMETRIC lpntm, DWORD nFontType, long lParam);
 
// CFontDlg dialog
class CFontDlg : public CDialogEx
{
.
.
.


 
Untuk deklarasi fungsinya kita letakkan pada akhir file dlg.cpp :

int CALLBACK EnumFontFamProc(LPENUMLOGFONT lpelf,LPNEWTEXTMETRIC lpntm, DWORD nFontType, long lParam)
{
//membuat pointer ke Window
CLat_FontDlg* pWnd = (CLat_FontDlg*) lParam;
 
//memasukkan font kedalam list box
pWnd->ctrl_list_font.AddString(lpelf->elfLogFont.lfFaceName);
 
//return 1 to continue font enumeration
return 1;
}

 
Selanjutnya kita perlu membuat fungsi untuk mengisi listbox pada aplikasi yang kita buat, dimana fungsi tersebut akan menggunakan callback function yang telah kita buat sebelumnya. Buatlah fungsi dengan right-click pada class dlg, pilih return type fungsi void dan tipe akses private. Beri nama fungsi misalnya dengan FillFontList.

Gambar 2. Membuat fungsi untuk mengisi list box

Isi fungsi tersebut dengan kode program seperti berikut:

void CLat_fontDlg::FillFontList()
{
LOGFONT lf;
//inisialisasi struktur LOGFONT
lf.lfCharSet = DEFAULT_CHARSET;
StrCpyW(lf.lfFaceName,L"");
//kosongkan list box
ctrl_list_font.ResetContent();
//create a device context variable
CClientDC dc (this);
//enumerate the font families
::EnumFontFamiliesEx((HDC) dc,&lf,(FONTENUMPROC) EnumFontFamProc, (LPARAM) this, 0);
}

 
Fungsi tersebut di atas harus dipanggil di awal aplikasi dijalankan agar daftar font muncul pada list box. Untuk itu kita perlu memanggil fungsi tersebut pada fungsi OnInitDialog() seperti berikut:

BOOL CFontDlg::OnInitDialog()
{
.
.
.
// TODO: Add extra initialization here
//mengisi list box font
FillFontList();
 
return TRUE;  // return TRUE  unless you set the focus to a control
}

 
Jalankan aplikasi anda, perhatikan bahwa pada listbox sudah muncul daftar font, akan tetapi terdapat duplikasi. Untuk menghilangkan duplikasi pada font tersebut, ubahlah fungsi FillFontList menjadi seperti berikut:

void CLat_fontDlg::FillFontList()
{
int iCount; //jumlah font
int iCurCount; // jumlah font saat ini
CString strCurFont; //nama font saat ini
CString strPrevFont =L""; //nama font sebelumnya
LOGFONT lf;
//inisialisasi struktur LOGFONT
lf.lfCharSet = DEFAULT_CHARSET;
StrCpyW(lf.lfFaceName,L"");
//kosongkan list box
ctrl_list_font.ResetContent();
//create a device context variable
CClientDC dc (this);
//enumerate the font families
::EnumFontFamiliesEx((HDC) dc,&lf,(FONTENUMPROC) EnumFontFamProc, (LPARAM) this, 0);
//hitung jumlah fon di dalam list box
iCount = ctrl_list_font.GetCount();
//ulangi dari akhir listbox sampai awal
//cari dan hapus data yang sama
for(iCurCount=iCount; iCurCount>0; iCurCount--)
{
//Ambil nama font saat ini
ctrl_list_font.GetText((iCurCount-1),strCurFont);
//cek apakah sama dengan nama font sebelumnya
if(strCurFont==strPrevFont)
{
//apabila ya, hapus
ctrl_list_font.DeleteString((iCurCount-1));
}
//set nama font sebelumnya menjadi nama font saat ini
strPrevFont=strCurFont;
}
}

 
Setelah kita berhasil menampilkan font pada list box, langkah selanjutnya adalah membuat fungsi untuk mengisi static text dengan teks yang kita ketikkan pada edit box. Untuk membuatnya cukup dengan double-click pada edit box kemudian isikan dengan kode program seperti berikut:

void CLat_fontDlg::OnEnChangeEdit1()
{
// TODO:  If this is a RICHEDIT control, the control will not
// send this notification unless you override the CDialogEx::OnInitDialog()
// function and call CRichEditCtrl().SetEventMask()
// with the ENM_CHANGE flag ORed into the mask.
 
// TODO:  Add your control notification handler code here
//update data dari kotak dialog ke variabel
UpdateData(true);
//isi variabel static teks dengan nilai dari variabel edit box
static_hasil=edit_teks;
//update isi variabel ke kotak dialog
UpdateData(false);
}

 
Langkah terakhir yang perlu kita lakukan adalah membuat fungsi pada list box agar ketika kita memilih salah satu font dari list box, maka teks yang terdapat pada static text akan berganti font. Akan tetapi sebelumnya kita harus membuat variabel bertipe CFont pada file dlg.h untuk menampung pilihan font. Buat variabel tersebut misalnya dengan nama font_pilihan. Untuk membuatnya cukup deklarasikan pada file dlg.h pada bagian public :

CFont font_pilihan

Untuk memudahkan memodifikasi aplikasi nantinya, fungsi perubahan font tidak kita letakkan langsung pada edit box. Buatlah fungsi baru pada class dlg sama seperti fungsi FillFontList, yaitu dengan nilai return void dan tipe akses private. Buat fungsi tersebut misalnya dengan nama SetMyFont, kemudian isikan kode program berikut pada fungsi tersebut:

void CLat_fontDlg::SetMyFont(void)
{
CRect rRect; // variabel menampung area persegi dari static text hasil
int iHeight; //variabel menampung tinggi dari area static text untuk digunakan pada font
 
// cek apakah ada font yang dipilih
if(list_font !="")
{
//ambil ukuran luas dari static text dimana font akan ditampilkan
ctrl_static_hasil.GetWindowRect(&rRect);
//hitung tingginya
iHeight = rRect.top- rRect.bottom;
//pastikan nilainya positif
if(iHeight<0)
iHeight=0-iHeight;
//hilangkan akses pada current font
font_pilihan.Detach();
//create font yang akan digunakan
font_pilihan.CreateFont((iHeight-5),0,0,0,FW_NORMAL,0,0,0,DEFAULT_CHARSET,OUT_CHARACTER_PRECIS,CLIP_CHARACTER_PRECIS, DEFAULT_QUALITY,DEFAULT_PITCH|FF_DONTCARE,list_font);
 
//set font tersebut pada static teks hasil
ctrl_static_hasil.SetFont(&font_pilihan);
}
}

 
Selanjutnya buat fungsi pada list box dengan cara double-click pada list box, kemudian panggil fungsi SetMyFont di atas.

void CLat_fontDlg::OnLbnSelchangeList1()
{
//mengupdate pilihan pada list box ke dalam variabel
UpdateData(true);
//memanggil fungsi SetMyFont
SetMyFont();
}

 
Jalankan aplikasi, lihat apakah aplikasi font telah berjalan dengan baik.

Untuk pencarian data, langkah pertama yang perlu kita lakukan adalah membuat kotak dialog baru dengan tampilan seperti berikut.

Gambar 1. Kotak dialog pencarian data

Buatlah kotak dialog seperti tampilan gambar 1 dengan menggunakan objek-objek kontrol yang terdapat pada toolbox. Ubah properties semua edit box menjadi disable. Untuk dapat menggunakan kotak dialog tersebut, langkah pertama yang harus kita lakukan adalam membuat class. Caranya right-click pada kotak dialog tersebut kemudian pilih Add Class. Beri nama class tersebut misalnya CPencarian.

Gambar 2. Membuat class untuk kotak dialog pencarian

Setelah membuat class, langkah selanjutnya adalah membuat variabel untuk objek-objek yang terdapat pada class baru tersebut.

Untuk semua edit box buat variabel CString misalnya dengan nama edit_cari_judul, edit_stok_min dan edit_stok_maks. Untuk radio button, buat variabel hanya untuk radio button1. Sebelumnya ubah properties group dari radio button tersebut menjadi true. Buat variabel integer misalnya dengan nama radio_cari. Terakhir buat variabel global bertipe integer misalnya dengan nama tombol_cari untuk menampung pilihan tombol mana yang anda tekan apakah tombol search atau cancel.

Gambar 3. Membuat variabel kotak dialog

Fungsi pertama yang akan kita buat adalah untuk menampilkan kotak dialog pencarian. Buat sub menu baru pada menu record misalnya dengan nama search record. Buat fungsi pada menu tersebut dan letakkan pada class view, kemudian isikan kode program seperti berikut:

void CLat_DatabaseView::OnRecordSearchrecord()
{
//membuat objek untuk mengakses kotak dialog pencarian
CPencarian pencarian;
//menampilkan kotak dialog pencarian
pencarian.DoModal();
}

Perhatikan bahwa pada fungsi tersebut kita mengakses class CPencarian. Untuk dapat mengakses class tersebut sebelumnya anda harus menambahkan #include “Pencarian.h” pada bagian atas dari file view.cpp.

Jalankan aplikasi untuk melihat apakah kotak dialog pencarian sudah terhubung dengan fungsi dari sub menu pencarian. Selanjutnya kita buat fungsi untuk radio button. Double-click radio button 1 untuk membuat fungsi dan isikan kode program berikut:

void CPencarian::OnBnClickedRadio1()
{
//mengupdate kondisi kotak dialog ke dalam variabel
UpdateData(true);
switch(radio_cari)
{
//nilai radio_cari=0 apabila radio button pertama dipilih
//mengaktifkan pencarian berdasarkan judul
case 0: GetDlgItem(IDC_EDIT1)->EnableWindow(true);
GetDlgItem(IDC_EDIT1)->SetFocus();
GetDlgItem(IDC_EDIT2)->EnableWindow(false);
GetDlgItem(IDC_EDIT3)->EnableWindow(false);
break;
//nilai radio_cari=1 apabila radio button pertama dipilih
//mengaktifkan pencarian berdasarkan jumlah stok
case 1: GetDlgItem(IDC_EDIT1)->EnableWindow(false);
GetDlgItem(IDC_EDIT2)->EnableWindow(true);
GetDlgItem(IDC_EDIT2)->SetFocus();
GetDlgItem(IDC_EDIT3)->EnableWindow(true);
break;
}
}

Untuk radio button 2 isi dengan nama fungsi dari radio button 1.

void CPencarian::OnBnClickedRadio2()
{
OnBnClickedRadio1();
}

Jalankan aplikasi anda untuk melihat apakah fungsi radio button berjalan dengan baik. Agar tidak ada radio button yang terpilih pada saat kotak dialog pencarian muncul, inisialisasi variabel radio_cari dengan nilai -1 pada fungsi OnInitDialog(). Untuk membuat fungsi OnInitDialog, buka properties dari class CPencarian kemudian pilih menu overrides lalu tambahkan fungsi OnInitDialog().

Gambar 4. Membuat fungsi OnInitDialog()

BOOL CPencarian::OnInitDialog()
{
CDialog::OnInitDialog();
 
// TODO:  Add extra initialization here
radio_cari=-1;
UpdateData(false);
 
return TRUE;  // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}

Selanjutnya buat fungsi OnClose() pada class CPencarian dengan cara mengakses properties kemudian pilih messages, pilih event WM_CLOSE kemudian add OnClose().

Gambar 5. Membuat fungsi OnClose()

Isikan kode program berikut pada fungsi OnCLose().

void CPencarian::OnClose()
{
//mengisikan variabel tombolcari = 1 ketika kotak dialog di tutup
tombolcari=1;
 
CDialog::OnClose();
}

Buat juga fungsi untuk tombol search kemudian isi dengan perintah OnOK() untuk menutup kotak dialog. Untuk tombol Cancel buat fungsi dan isikan dengan fungsi OnClose() dan OnOK() agar ketika tombol cancel ditekan maka fungsi OnClose() akan dijalankan dan kotak dialog ditutup.

//fungsi tombol search
void CPencarian::OnBnClickedButton1()
{
OnOK();
}
//fungsi tombol cancel
void CPencarian::OnBnClickedButton2()
{
OnClose();
OnOK();
}

Pada kotak dialog utama tambahkan tombol refresh untuk merefresh kembali data awal. Ubah properties visible pada tombol tersebut menjadi false agar pada saat awal tombol tersebut tidak terlihat. Buat variabel control untuk tombol tersebut misalnya dengan nama ctrl_btn_refresh.

Gambar 6. Membuat tombol refresh

Tambahkan kode program berikut pada fungsi search record:

void CLat_DatabaseView::OnRecordSearchrecord()
{
//membuat objek untuk mengakses kotak dialog pencarian
CPencarian pencarian;
//menampilkan kotak dialog pencarian
pencarian.DoModal();
 
//mengupdate data dari kotak dialog ke variabel
UpdateData(true);
//buat variabel filter untuk menampung query filter
CString filter;
if(pencarian.radio_cari==0)
{
//membuat variabel filter untuk menampung query pencarian
filter = _T("judul_buku LIKE '%");
filter.Append(pencarian.edit_cari_judul);
filter.Append(L"%'");
}
else
{
//membuat variabel filter untuk menampung query pencarian
//CString filter = _T("stok BETWEEN 10 AND 15");
filter = _T("stok BETWEEN ");
filter.Append(pencarian.edit_stok_min);
filter.Append(L" AND ");
filter.Append(pencarian.edit_stok_maks);
}
//query pencarian data
m_pSet->m_strFilter = filter;
//menutup dan membuka dataset agar hanya menampilkan hasil pencarian
m_pSet->Close();
m_pSet->Open();
UpdateData(false);
//Menampilkan tombol refresh
ctrl_btn_refresh.ShowWindow(true);
 
if (pencarian.tombolcari==1)
ctrl_btn_refresh.ShowWindow(false);
}

Buat fungsi pada tombol refresh dan isikan kode program seperti berikut:

void CLat_DatabaseView::OnBnClickedButton3()
{
//filter dengan atribut ID dan tanpa kondisi
m_pSet->Close();
m_pSet->m_strFilter = "[ID]";
m_pSet->Open();
UpdateData(false);
//Menghilangkan tombol refresh
ctrl_btn_refresh.ShowWindow(false);
}

Jalankan aplikasi untuk melihat apakah fungsi pencarian yang kita buat telah berjalan dengan baik.

Selanjutnya untuk mengurutkan data buat kotak dialog baru dan buat class baru untuk kotak dialog tersebut misalnya dengan nama CPengurutan.

Gambar 7. Membuat kotak dialog Pengurutan Data

Buatlah tampilan kotak dialog tersebut seperti pada gambar 7 dengan menggunakan objek-objek kontrol yang terdapat pada toolbox.

Masukkan header class CPengurutan yaitu pengurutan.h ke bagian atas dari file view.cpp agar class CPengurutan dapat  diakses oleh class view.

Gambar 8. File header pada file view.cpp

Buat sub menu baru pada menu record misalnya sort record, kemudian buat fungsi pada sub menu tersebut, lalu isikan dengan kode program seperti berikut:

void CLat_DatabaseView::OnRecordSortrecord()
{
//membuat objek untuk mengakses kotak dialog pengurutan
CPengurutan pengurutan;
//menampilkan kotak dialog pencarian
pengurutan.DoModal();
}

Ubah properties group untuk radio button 1 menjadi true. Selanjutnya buat variabel pada radio button 1 saja dengan tipe integer, misalnya dengan nama radio_urut. Buat fungsi OnInitDialog() pada class CPengurutan kemudian isikan kode program seperti berikut:

BOOL CPengurutan::OnInitDialog()
{
CDialog::OnInitDialog();
 
// TODO:  Add extra initialization here
radio_urut=-1;
UpdateData(false);
 
return TRUE;  // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}

Perhatikan bahwa kode program tersebut menginisialisasi variabel radio_urut dengan nilai -1 agar tidak ada radio button yang terpilih pada saat awal kotak dialog dijalankan.

Gambar 9. Membuat variabel pada radio button

Buat fungsi untuk tombol sort dan tombol cancel. Isikan fungsi OnOK() pada kedua fungsi tersebut aga kotak dialog pengurutan ditutup ketika kedua tombol tersebut ditekan.

Terakhir lengkapi fungsi sort record pada file view.cpp dengan kode program seperti berikut:

void CLat_DatabaseView::OnRecordSortrecord()
{
//membuat objek untuk mengakses kotak dialog pengurutan
CPengurutan pengurutan;
//menampilkan kotak dialog pencarian
pengurutan.DoModal();
 
UpdateData(true);
switch(pengurutan.radio_urut)
{
case 0:     m_pSet->Close();
m_pSet->m_strSort="[ID]";
m_pSet->Open();
break;
case 1: m_pSet->Close();
m_pSet->m_strSort="[judul_buku]";
m_pSet->Open();
break;
}
UpdateData(false);
}

Jalankan aplikasi anda untuk melihat apakah fungsi pengurutan telah berjalan dengan sempurna.
 

Untuk membuat  fungsi penambahan data, tambahkan tombol save dan cancel pada kotak dialog kemudian ubah properties visible menjadi false agar tombol-tombol tersebut tidak terlihat. Ubah juga properties disabled semua edit box menjadi true agar menjadi tidak aktif.

Gambar 1. Membuat tombol simpan

Buat variabel control tombol tersebut dan semua edit box dengan cara right-click pada masing-masing objek kemudian pilih add variable, misal pada contoh ini dibuat dengan nama: ctrl_btn_simpan, ctrl_edit_kode, ctrl_edit_buku dan ctrl_edit_stok.

Gambar 2. Membuat variabel control

Buka kotak dialog menu pada resource view dan tambahkan sub menu New Record pada menu Record.

Gambar 3. Menambah menu new record

Buat fungsi  untuk menu new record tersebut dengan cara right-click kemudian pilih add event handler. Pilih class view untuk menampung fungsi tersebut.

Gambar 4. Membuat fungsi dari menu new record

Isikan kode program pada fungsi tersebut seperti berikut:

void CLat_DatabaseView::OnRecordNewrecord()
{
//mengaktifkan edit box dan tombol simpan
ctrl_edit_kode.EnableWindow(true);
ctrl_edit_buku.EnableWindow(true);
ctrl_edit_stok.EnableWindow(true);
ctrl_btn_simpan.ShowWindow(true);
ctrl_btn_batal.ShowWindow(true);
//mengosongkan isi edit box
ctrl_edit_kode.SetWindowTextW(CString(""));
ctrl_edit_buku.SetWindowTextW(CString(""));
ctrl_edit_stok.SetWindowTextW(CString(""));
//set fokus pada edit box kode buku
ctrl_edit_kode.SetFocus();
//menambahkan data baru
m_pSet->AddNew();
}

Buat juga fungsi pada tombol simpan dan tambahkan kode program seperti berikut:

void CLat_DatabaseView::OnBnClickedButton1()
{
UpdateData();
if (m_pSet->Update())
AfxMessageBox(_T("Database updated!"));
else
AfxMessageBox(_T("Failed updating database!"));
// menyembunyikan kembali tombol
ctrl_btn_simpan.ShowWindow(false);
ctrl_btn_batal.ShowWindow(false);
//menonaktifkan edit box
ctrl_edit_kode.EnableWindow(false);
ctrl_edit_buku.EnableWindow(false);
ctrl_edit_stok.EnableWindow(false);
//menampilkan data terakhir
m_pSet->MoveLast();
}

Terakhir buat fungsi pada tombol cancel dan isikan kode program seperti berikut:

void CLat_DatabaseView::OnBnClickedButton2()
{
// menyembunyikan kembali tombol
ctrl_btn_simpan.ShowWindow(false);
ctrl_btn_batal.ShowWindow(false);
//menonaktifkan edit box
ctrl_edit_kode.EnableWindow(false);
ctrl_edit_buku.EnableWindow(false);
ctrl_edit_stok.EnableWindow(false);
//query ulang data
m_pSet->Requery();
UpdateData(false);
}

Apabila anda ingin menambahkan icon penambahan data pada toolbar maka tampilkan menu toolbar melalui resource view, kemudian buatlah icon baru untuk penambahan data tersebut, terakhir ubahlah nama id icon tersebut pada properties menjadi sama dengan id dari fungsi new record.

Gambar 5. Membuat ikon toolbar untuk menu new record

Fungsi selanjutnya yang akan kita buat adalah fungsi edit data. Buat sub menu edit record pada menu record kemudian buat fungsi untuk menu tersebut. Fungsi edit ini kurang lebih sama dengan fungsi tambah data dan menggunakan tombol-tombol yang sama (tombol save dan cancel). Untuk itu kita perlu suatu variabel untuk membedakan fungsi mana yang sedang kita gunakan. Buat variabel global pada class view dengan cara right-click pada kotak dialog kemudian buat variabel dengan tipe integer (pada contoh ini nama variabel: tombol). Selanjutnya isikan kode program berikut pada fungsi edit record:

void CLat_DatabaseView::OnRecordEditrecord()
{
//nilai tombol=2 untuk fungsi edit data
tombol=2;
//mengaktifkan edit box dan tombol
ctrl_edit_kode.EnableWindow(true);
ctrl_edit_buku.EnableWindow(true);
ctrl_edit_stok.EnableWindow(true);
ctrl_btn_simpan.ShowWindow(true);
ctrl_btn_batal.ShowWindow(true);
//edit data pada database
m_pSet->Edit();
}

Perhatikan bahwa untuk fungsi edit nilai variabel tombol kita isi dengan nilai 2, untuk itu isi nilai variabel tombol pada fungsi tambah dengan nilai 1.

void CLat_DatabaseView::OnRecordNewrecord()
{
//nilai tombol=1 untuk fungsi tambah data
tombol=1;
.
.
.
}

Ubah kode program untuk tombol save:

void CLat_DatabaseView::OnBnClickedButton1()
{
.
.
.
if(tombol==1)
m_pSet->MoveLast();//menampilkan data terakhir
else
return;//kembali ke kondisi sebelumnya
}

Dan pada tombol cancel:

void CLat_DatabaseView::OnBnClickedButton2()
{
.
.
.
if(tombol==1)
m_pSet->Requery();//query ulang data
else
return;//kembali ke kondisi sebelumnya
UpdateData(false);
}

Fungsi selanjutnya yang akan kita buat adalah fungsi hapus data. Tambahkan sub menu delete rocord pada menu record, kemudian buat fungsi pada menu delete record tersebut. Isikan kode program berikut pada fungsi tersebut:

void CLat_DatabaseView::OnRecordDeleterecord()
{
int Answer = MessageBox(_T("Apakah anda yakin untuk menghapus data ini?"),_T("konfirmasi"),MB_YESNO);
if( Answer == IDYES )
{
m_pSet->Delete();
m_pSet->Requery();
UpdateData(FALSE);
}
else
return;
}

Seperti pada fungsi new record, anda dapat menambahkan ikon pada fungsi delete record. Jalankan aplikasi untuk melihat apakah fungsi-fungsi di atas berjalan dengan baik.

Gambar 1. Membuat database dengan MS Access

Untuk menghubungkan database tersebut dengan aplikasi MFC yang akan kita buat, kita memerlukan koneksi ODBC (Open Database Connection). Fitur ODBC ini dapat anda temukan dengan mengakses Control Panel pada windows anda, kemudian pilih Administrative tools dan pilih menu Data Source (ODBC).

Gambar 2. Mengakses Fitur ODBC

Buat koneksi baru dengan tombol add kemudian pilih driber MS Access.

Gambar 3. Membuat koneksi ODBC

Isi nama data source kemudian pilih database yang akan digunakan.

Gambar 4. Setting koneksi ODBC

Setelah melakukan setting koneksi ODBC di atas maka koneksi ODBC anda telah siap untuk digunakan pada aplikasi MFC. Langkah selanjutnya tentu saja adalah membuat project MFC baru. Untuk koneksi dengan database, MFC menyediakannya pada tipe aplikasi single document.

Gambar 5. Tipe aplikasi Single Document untuk aplikasi database

Setting database support dengan memilih Database view without file support sebab kita tidak belum menghubungkan dengan file lain seperti file dokumen untuk laporan. Pilih client type ODBC kemudian tekan tombol Data Source, pilih koneksi ODBC yang telah anda buat sebelumnya dan pilih tabel yang akan digunakan.

Gambar 6. Setting database Support

Setelah melakukan setting untuk database support maka akan terbentuk beberapa class pembentuk aplikasi database. Apabila anda menekan tombol finish akan muncul pesan warning yang mengingatkan bahwa pada aplikasi yang anda buat terdapat code yang berisi password ke database. Untuk sementara kita abaikan dulu pesan tersebut.

Gambar 7. Pesan warning pada akhir pembuatan aplikasi database

Tampilkan kotak dialog yang telah terbentuk melalui resource view kemudian buat tampilan seperti berikut:

Gambar 8. Kotak dialog aplikasi database

Coba jalankan aplikasi, akan ada pesan error dan apabila anda akses letak error tersebut mengarah pada warning terhadap adanya password yang kita temui sebelumnya. Sementara hal ini kita abaikan dengan membuat comment pada line code program tersebut menggunakan //.

Gambar 9. Menangani pesan warning/error untuk security issue

Setelah mengangani masalah security issue tersebut, apabila anda jalankan aplikasi kembali maka akan berhasil, akan tetapi belum ada data yang ditampilkan pada edit box sebab edit box yang kita buat belum terhubung dengan database.

Buka file set.h maka anda akan menemukan variabel data yang terbentuk secara otomatis dan telah terhubung dengan database.

Gambar 10. Variabel data dari database

Untuk menghubungkan variabel tersebut dengan edit box yang telah kita buat pada kotak dialog, bukalah file view.cpp kemudian akses fungsi DoDataExchange. Masukkan kode program berikut pada fungsi tersebut.

DDX_FieldText(pDX, IDC_EDIT1, m_pSet->m_ID, m_pSet);
DDX_FieldText(pDX, IDC_EDIT2, m_pSet->m_judul_buku, m_pSet);
DDX_FieldText(pDX, IDC_EDIT3, m_pSet->m_stok, m_pSet);

Gambar 11. Menghubungkan edit box dengan database

Perhatikan bahwa kode program tersebut menghubungkan antara id dari edit box pada kotak dialog dengan variabel dataset.

Jalankan aplikasi anda, maka edit box anda akam menampilkan data dari database. Perhatikan anda bisa penggunakan menu toolbar untuk mengakses data lainnya.

Gambar 12. Edit box terhubung dengan database

Perhatikan bahwa ukuran kotak dialog perlu diubah agar tidak terlalu besar. Untuk mengubahnya buka file MainFrm.cpp dan masukkan code program berikut pada fungsi OnCreate dan PreCreateWindow.

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
.
.
.
// TODO: Delete these three lines if you don't want the toolbar to be dockable
m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
EnableDocking(CBRS_ALIGN_ANY);
DockControlBar(&m_wndToolBar);
//Set posisi dan nama kotak dialog
this->CenterWindow();
this->SetWindowText(_T("Sistem Administrasi Perpustakaan - Data Buku"));
 
return 0;
}
 
BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs)
{
if( !CFrameWnd::PreCreateWindow(cs) )
return FALSE;
// TODO: Modify the Window class or styles here by modifying
//  the CREATESTRUCT cs
 
//Set ukuran kotak dialog dan title
cs.cx = 500;
cs.cy = 450;
cs.style &= ~FWS_ADDTOTITLE;
 
return TRUE;
}

Jalankan kembali aplikasi anda untuk melihat tampilan yang baru

Gambar 1. Contoh aplikasi count down

Untuk membuat aplikasi tersebut, seperti biasa yang kita lakukan adalah membuat project baru dengan template MFC Application, tipe aplikasi dialog base. Selanjutnya buatlah tampilan seperti pada gambar 1 menggunakan objek kontrol yang terdapat pada toolbox.

Buat variabel pada static text dengan tipe data integer. Pada contoh ini nama variabelnya adalah waktu. Sama seperti contoh aplikasi pada pembahsan sebelumnya untuk menggunakan fungsi timer maka kita perlu menjalanjan fungsi SetTimer() pada fungsi OnInitDialog() agar dijalankan pada awal aplikasi. Masukkan kode program berikut pada fungsi OnInitDialog():

SetTimer(1,1000,NULL);
waktu=10;//mengisi nilai awal variabel waktu

Selanjutnya kita perlu mengakses fungsi OnTimer() milik class dialog (pada contoh ini Clat_countdownDlg). Akses menu messages pada class tersebut kemudian isikan kode program berikut:

void CLat_countdownDlg::OnTimer(UINT_PTR nIDEvent)
{
UpdateData(true);
waktu=waktu - 1;
if(waktu==0)
{
KillTimer(1);
UpdateData(false);
MessageBox(_T("waktu habis"));
}
UpdateData(false);
CDialog::OnTimer(nIDEvent);
}

Gambar 2. Membuat fungsi OnTimer()

Jalankan aplikasi, kemudian lihat apakah fungsi hitung mundur (count down) berjalan dengan baik. Selanjutnya kita akan mencoba membuat pengembangan aplikasi menggunakan fungsi hitung mundur tersebut misalnya aplikasi kuis seperti pada tampilan berikut:

Gambar 3. Contoh aplikasi kuis menggunakan countdown

Buat project MFC application dengan tipe dialog base, kemudian buatlah tampilan dialog seperti contoh tampilan aplikasi pada gambar 1 menggunakan objek-objek kontrol yang terdapat pada toolbox. Langkah selanjutnya adalah membuat variabel pada static text berisikan data yang kita gunakan. Pada aplikasi ini, ada 4 static text yang berisikan data. Variabel static text kita buat adalah static_nomor dengan tipe data integer untuk menampung nomor pertanyaan, waktu dengan tipe data integer untuk menampung waktu countdown, static_pertanyaan untuk menampung pertanyaan, static_pilihan1 sampai static_pilihan4 untuk menampung pilihan jawaban dan terakhir static_nilai untuk menampung jumlah jawaban yang benar.

Selain variabel objek dialog, kita juga perlu membuat variabel global dan variabel array tipe bentukan untuk menampung data soal pada class dialog. Berikut adalah contoh deklarasinya pada file dialog header:

typedef struct {
CString isi;
CString pilihan1;
CString pilihan2;
CString pilihan3;
CString pilihan4;
char jawaban;
}bentuksoal;//deklarasi tipe bentukan soal
typedef struct bentuksoal TabSoal[100];//deklarasi array tipe bentukan
TabSoal soal;//deklarasi variabel array tipe bentukan
int i;//nomor elemen array
int n;//jumlah data array
CString jawaban;//meyimpan jawaban yang benar

Isikan deklarasi variabel tersebut pada bagian public dari dialog header (pada contoh ini Lat_WaktuDlg.h) pada bagian public agar dapat diakses pada semua fungsi.

Setelah pembuatan variabel selesai, selanjutnya adalah membuat agar aplikasi menampilkan data soal pertama. Untuk itu maka kita perlu mengakses fungsi OnInitDialog(). Isikan kode program berikut pada fungsi tersebut:

//variabel sementara untuk menampung string
char x[250];
char a[100];
char b[100];
char c[100];
char d[100];
//Membaca data dari file dan memasukkannya kedalam variabel array
FILE *Fin;
fopen_s(&Fin,"soal.txt","r");
fscanf_s(Fin,"%d\n",&n);
for(i=1;i<=n;i++)
{
fgets(x,250,Fin);
soal[i].isi=x;
fgets(a,100,Fin);
soal[i].pilihan1=a;
fgets(b,100,Fin);
soal[i].pilihan2=b;
fgets(c,100,Fin);
soal[i].pilihan3=c;
fgets(d,100,Fin);
soal[i].pilihan4=d;
fscanf_s(Fin,"%c\n",&soal[i].jawaban);
}
fclose(Fin);
i=1;
static_nomor=i;
static_pertanyaan=soal[i].isi;
static_pilihan1=soal[i].pilihan1;
static_pilihan2=soal[i].pilihan2;
static_pilihan3=soal[i].pilihan3;
static_pilihan4=soal[i].pilihan4;
waktu=10; //inisialisasi waktu countdown
radio_pilih=-1; //inisialisasi variabel radio button dengan -1 agar di awal aplikasi sidak ada radio button yang terpilih
static_nilai=0; //inisialisasi nilai jawaban yang benar
UpdateData(false);
//membuat timer dengn fungsi SetTimer dengan ID 1, waktu refresh 1000 mili second
SetTimer(1,1000,NULL); //membuat timer

Jangan lupa untuk membuat file text sebagai inputan data untuk aplikasi ini. Pada contoh aplikasi ini diberi nama soal.txt dengan isi seperti pada gambar berikut:

Gambar 4. Contoh file text sebagai inputan soal

Data pertama pada file tersebut adalah untuk menampung jumlah data soal, sedangkan data berikutnya berulang dengan urutan: soal, pilihan a, pilihan b, pilihan c, pilihan d, dan jawaban yang benar.

Untuk menampung jawaban yang benar dari radio button, sebelumnya kita telah membuat variabel jawaban bertipe CString (lihat pada deklarasi variabel pada file header). Untuk radio button sendiri, kita hanya perlu membuat variabel pada radio button pertama. Tapi sebelumnya ubah terlebih dulu properties group pada radio button tersebut menjadi true. Selanjutnya buat fungsi pada radio button pertama tersebut dengan melakukan double-click, kemudian isikan kode program berikut:

void CLat_kuisDlg::OnBnClickedRadio1()
{
UpdateData(true);
switch(radio_pilih)
{
case 0:jawaban="a";
break;
case 1:jawaban="b";
break;
case 2:jawaban="c";
break;
case 3:jawaban="d";
break;
}
UpdateData(false);
}

Buat juga fungsi untuk radio button yang lain dan isikan dengan nama fungsi dari radio button yang pertama seperti pada contoh berikut:

void CLat_kuisDlg::OnBnClickedRadio2()
{
OnBnClickedRadio1();
}

Selanjutnya buat fungsi OnTimer() dengan cara mengakses Class dialog properties pada class view, kemudian pada menu properties pilih messages, pilih WM_Timer, lalu <add>OnTimer. Pada fungsi OnTimer() yang terbentuk masukkan kode program berikut:

void CLat_kuisDlg::OnTimer(UINT_PTR nIDEvent)
{
UpdateData(true);
i=static_nomor;
waktu=waktu - 1;
if(waktu==0)
{//1
if (soal[i].jawaban==jawaban)
static_nilai=static_nilai+1;
i=i+1;
if(i>n)
{//2
KillTimer(1);
UpdateData(false);
MessageBox(_T("selesai"));
}//2
else
{//3
static_nomor=i;
static_pertanyaan=soal[i].isi;
static_pilihan1=soal[i].pilihan1;
static_pilihan2=soal[i].pilihan2;
static_pilihan3=soal[i].pilihan3;
static_pilihan4=soal[i].pilihan4;
waktu=10;
radio_pilih=-1;
}//3
UpdateData(false);
}//1
UpdateData(false);
CDialog::OnTimer(nIDEvent);
}

Gambar 1. Contoh aplikasi pengolahan waktu

Langkah pertama yang perlu kita buat seperti biasa adalah project baru. Buat project MFC application dengan tipe dialog base, kemudian buatlah tampilan dialog seperti contoh tampilan aplikasi pada gambar 1 menggunakan objek-objek kontrol yang terdapat pada toolbox. Langkahselanjutnya adalah membuat variabel pada static text berisikan data yang kita gunakan. Pada aplikasi ini, ada 6 static text yang berisikan data, 3 untuk menampung data waktu sistem, data waktu masuk dan waktu keluar dan 3 lagi untuk menampung selisih waktu masuk dan keluar. Contoh pada aplikasi ini variabel waktu yang kita buat adalah static_waktu, static_masuk dan static_keluar yang bertipe CString dan variabel selisih waktu yaitu static_jam, static_menit dan static_detik yang bertipe integer.

Selain variabel objek dialog, kita juga perlu membuat variabel global pada class dialog. Berikut adalah contoh deklarasinya pada file dialog header:

//deklarasi tipe bentukan waktu
typedef struct{
int jam,menit,detik;
}waktu;
//deklarasi variabel penampung waktu:
//temp menampung waktu sementara
// waktu1 menampung waktu masuk, waktu2 menampung waktu keluar
waktu temp,waktu1,waktu2;

Isikan deklarasi variabel tersebut pada bagian public dari dialog header (pada contoh ini Lat_WaktuDlg.h) pada bagian public agar dapat diakses pada semua fungsi.

Setelah pembuatan variabel selesai, selanjutnya adalah membuat agar static text menampilkan waktu jam sistem. Karena kita ingin agar jam sistem tersebut muncul pada awal aplikasi dijalankan maka kita perlu mengakses fungsi OnInitDialog(). Isikan kode program berikut pada fungsi tersebut:

//membuat timer dengn fungsi SetTimer dengan ID 1, waktu refresh 1000 mili second
SetTimer(1,1000,NULL);

Selanjutnya buat fungsi OnTimer() dengan cara mengakses Class dialog properties pada class view, kemudian pada menu properties pilih messages, pilih WM_Timer, lalu <add>OnTimer. Pada fungsi OnTimer() yang terbentuk masukkan kode program berikut:

void CLat_WaktuDlg::OnTimer(UINT_PTR nIDEvent)
{
CTime waktu = CTime::GetCurrentTime();//mengambil waktu sistem
//memasukkan variabel waktu ke static text dengan format tertentu
static_waktu = waktu.Format("%H:%M:%S");
//mengambil komponen jam, menit dan detik ke variabel sementara(temp)
temp.jam=waktu.GetHour();
temp.menit=waktu.GetMinute();
temp.detik=waktu.GetSecond();
UpdateData(false);//update variabel ke kotak dialog
CDialog::OnTimer(nIDEvent);
}

Gambar 2. Membuat fungsi OnTimer()

Jalankan aplikasi kemudian lihat apakah waktu sistem sudah muncul pada static text pertama. Apabila berhasil maka selanjutnya adalah membuat fungsi pada tombol Absen. Fungsi yang ingin kita buat adalah apabila tombol ditekan pertama kali maka waktu masuk akan tercatat, kemudian apabila tombol tersebut ditekan kedua kalinya maka waktu keluar akan tercatat sekaligus menghitung selisih antara waktu keluar dan waktu masuk dan menampilkannya pada static text selisih waktu. Buat fungsi pada tombol Absen dengan cara double-click pada tombol tersebut, kemudian masukkan kode program berikut:

//cek apakah waktu masuk kosong. Apabila kosong, isi waktu masuk
if(static_masuk.IsEmpty()==true)
{     //mengisi waktu masuk dengan waktu sistem ketika tombol ditekan
static_masuk=static_waktu;
//mengisi komponen jam,menit,detik dari waktu masuk dengan nilai variabel temp
waktu1.jam=temp.jam;
waktu1.menit=temp.menit;
waktu1.detik=temp.detik;
}
else//apabila waktu masuk sudah terisi, masukkan waktu keluar
{     //mengisi waktu masuk dengan waktu sistem ketika tombol ditekan
static_keluar=static_waktu;
//mengisi komponen jam,menit,detik dari waktu keluar dengan nilai variabel temp
waktu2.jam=temp.jam;
waktu2.menit=temp.menit;
waktu2.detik=temp.detik;
//menghitung selisih waktu
//selisih waktu dalam satuan detik
int selisih=waktu2.jam*3600+waktu2.menit*60+waktu2.detik-(waktu1.jam*3600+waktu1.menit*60+waktu1.detik);
static_jam=selisih/3600;//menghitung jam
int sisa=selisih%3600;
static_menit=sisa/60;//menghitung menit
static_detik=sisa%60;//menghitung detik
}
UpdateData(false);

Jalankan aplikasi, apabila berhasil maka akan menghasilkan tampilan seperti berikut:

Gambar 3. Tampilan jalannya aplikasi

Sampai dengan pokok bahasan ini, kita dapat membedakan beberapa jenis variabel berdasarkan kriteria tertentu. Berikut adalah beberapa jenis variabel yang kita ketahui yaitu:

1. Variabel objek dialog yang terdiri dari:

• Kategori value
• Kategori kontrol

2. Variabel berdasarkan ruang lingkupnya yang terdiri dari:

• Variabel lokal
• Variabel global

3. Variabel array

• Array tipe dasar
• Array tipe bentukan

Beberapa jenis variabel di atas pastinya sudah kita sebelumnya apabila kita mempelajari bahasa C/C++, akan tetapi kita akan membahas bagaimana menggunakannya pada visual C++ dan apa saja yang perlu diperhatikan ketika kita membuat, menggunakan dan menghapusnya.

1.       Variabel Objek Dialog

Variabel jenis ini dibagi 2 pilihan yaitu kategori value dan kategori kontrol. Seperti yang sering kita gunakan pada pembahasan sebelumnya, kita memilih kategori value apabila kita ingin menggunakan nilai dari variabel objek dialog pada kode program kita. Variabel kategori value ini mempunyai pilihan tipe data sesuai dengan jenis objeknya. Sementara itu variabel kategori kontrol hanya mempunyai 1 pilihan tipe data yang tergantung objeknya misal untuk edit box CEdit, dan untuk combo box CComboBox. Pilihan tipe data untuk variabel kategori kontrol tersebut mengacu pada class dari masing-masing jenis objek tersebut, sehingga apabila kita membuat variabel jenis kontrol sama saja dengan membuat objek (instansiasi) berdasarkan class objek dialog tersebut. Akibatnya variabel kategori kontrol yang kita buat dapat digunakan untuk mengakses fungsi-fungsi milik class object tersebut, misalnya kita dapat menggunakan fungsi Setfocus() untuk edit box, GetLBText() untuk combo box dan sebagainya. Hal ini tentu saja mengingatkan kita ketika mempelajari fungsi GetDlgItem() untuk memanggil objek tertentu pada kotak dialog. Apabila misalnya kita mempunyai sebuah objek edit box dengan ID : IDC_EDIT1 dan variabel kategori kontrol dengan nama ctrl_edit_hasil, lalu kita menggunakan kode berikut pada program:

GetDlgItem(IDC_EDIT1)->SetFocus();

akan sama hasilnya dengan:

ctrl_edit_hasil. SetFocus();

 2.       Variabel Berdasarkan ruang lingkupnya

Berdasarkan ruang lingkup penggunaannya, suatu variabel dapat kita pisahkan menjadi ruang lingkup lokal dan global. Konsep lokal dan global untuk variabel merupakan konsep yang dipelajari ketika kita mempelajari tentang fungsi pada bahasa C/C++ atau pemrograman lainnya. Pada pemrograman visual C++ menggunakan MFC, yang dimaksud dengan variabel global adalah variabel yang dideklarasikan pada level class sehingga seluruh fungsi yang dimiliki oleh class tersebut dapat menggunakannya. Seperti yang kita ketahui, sampai saat ini kebanyakan kita masih melakukan pemrograman di dalam class milik kotak dialog.

Pembuatan variabel global ini mirip dengan pembuatan variabel objek dialog. Caranya adalah dengan memilih menu add variable ketika right-click pada kotak dialog atau pada class dialog melalui class view.

Gambar 1. Membuat variabel global

Hal lain yang perlu diperhatikan pada variabel global adalah referensi yang terbentuk ketika kita membuat variabel tersebut. Tentu saja kita ingat bahwa pengetahuan tentang letak referensi dari suatu variabel penting ketika kita akan menghapus variabel tersebut dari kotak dialog. Perhatikan gambar 2 yang menunjukkan letak referensi dari variabel global. Referensi no.2 merupakan deklarasi dari variabel, sementara deklarasi no.1 merupakan penentuan nilai awal dari variabel berdasarkan tipe datanya. Perhatikan pada contoh bahwa nilai awal untuk int adalah 0 sedangkan untuk CString adalah “”.

Gambar 2. Referensi variabel global pada suatu class

Sementara itu, variabel objek dialog semuanya bersifat global karena berlaku untuk semua fungsi di dalam class dialog dimana objek tersebut berada. Lalu seperti apa yang dimaksud dengan variabel lokal? Apabila kita berada di dalam suatu class, yang dimaksud dengan variabel lokal adalah variabel yang kita deklarasikan di dalam salah satu fungsi pada class tersebut, sehingga variabel tersebut hanya dapat digunakan pada fungsi tersebut saja. Perhatikan pada gambar berikut untuk melihat penggunaan variabel lokal:

Gambar 3. Contoh variabel lokal pada suatu fungsi

Pada contoh di atas, variabel x dan y merupakan variabel lokal karena dideklarasikan di dalam fungsi OnInitDialog(), sehingga variabel tersebut hanya digunakan di dalam fungsi OnInitDialog().

3.       Variabel Array

Variabel array juga merupakan istilah biasa apabila kita mempelajari pemrograman. Yang menjadi permasalahan adalah bagaimana menggunakannya di visual C++ dan apa yang perlu diperhatikan pada penggunaannya. Perbedaan array dan variabel biasa adalah suatu array mampu meyimpan beberapa nilai serta dapat dilakukan proses terhadap semua elemennya pada suatu saat yang sama bahkan tanpa perlu berurut pemanggilannya. Variabel array dapat berupa variabel lokal maupun global, tergantung penggunaan yang kita harapkan pada program.

Variabel array tipe dasar adalah array yang berisi data dengan nilai bertipe dasar tertentu. Array jenis ini hanya dapat menampung satu jenis tipe data pada saat tertentu. Agar suatu array dapat menampung beberapa tipe data dasar pada saat bersamaan, maka dibuatlah array tipe data bentukan. Pembentukan array jenis ini sudah kita pelajari pada pembahasan mengenai pembuatan data array dengan file text.

Contoh deklarasi array tipe bentukan:

struct login      //tipe bentukan login
{
CString username;
int password;
};
typedef login Tablogin[100];  //membuat array tipe bentukan
Tablogin log; //mendeklarasikan variabel array tipe bentukan
int i;      //menampung nomor elemen array
int n;  //menampung jumlah elemen array