Bagaimana Membuat Program Computer Based Test Sederhana Dengan Delphi

Artikel ini ditujukan kepada programmer pemula yang sudah mengenal dan menggunakan IDE Delphi. Di sini akan dituliskan bagaimana membuat sebuah program Computer Based Test (CBT) sederhana. Bahan yang digunakan di artikel ini adalah materi yang diajarkan kepada mahasiswa STMIK Jenderal Achmad Yani tadi malam tanggal 14 Mei 2014 oleh penulis. Penulis berjanji untuk menuliskan ulang dan menjelaskan tentang program CBT ini.

Program CBT ini penulis buat di depan mahasiswa langsung dengan Delphi Lite 10 yang terinstal di komputer laboratorium. Pertemuan sebelumnya penulis memberikan tugas kepada para mahasiswa untuk membuat program CBT ini. Penulis pun membuat versi sederhan dari program CBT yang kurang lebih bisa dikerjakan dalam waktu satu jam efektif.

Gambar 1. Antarmuka pengguna Computer Based Test sederhana

Baik, langkah-langkah apa saja yang dilakukan dalam membuat program CBT ini? Berikut adalah langkah-langkahnya yang nanti akan penulis sajikan lebih detil.

1. Merancang alur kerja CBT.
2. Merancang antarmuka berbasis grafik dengan Delphi.
3. Mengimplementasikan pemrograman
• Membuat tipe data yang menyimpan soal, variabel nomor dan nilai
• Membuat daftar soal dalam konstanta
• Menginisialisasi soal pertama
• Membuat program yang menginput jawaban dari pengguna

1. Merancang Alur Kerja CBT

Alur kerja CBT di sini sudah ditentukan oleh penulis dan didesain yang paling mudah bagi mahasiswa atau pemrogram baru. Alur rancangan kerja CBT ini adalah sebagai berikut:

1. Tampilkan soal berserta pilihan jawabannya
2. Pengguna memilih jawaban di salah satu pilihan yang ditampilkan di Radio Group.
3. Pengguna klik tombol Jawab jika sudah yakin dengan jawabannya.
4. Setelah tombol Jawab diklik, program mengecek apakah jawaban yang dipilih oleh pengguna benar atau salah. Jika benar, maka nilai ditambah 1 jika salah nilai tetap nol.
5. Program memberikan soal berikutnya jika masih ada. Jika sudah habis program memberi informasi bahwa soal sudah habis.
6. Jika soal sudah habis, saat klik tombol Jawab dimunculkan pesan bahwa soal sudah habis.

2. Merancang Antarmuka Berbasis Grafik dengan Delphi

Di dalam artikel ini, penulis menggunakan Borland Delphi 7 mengingat di dalam laptop penulis yang terinstal adalah Borland Delphi 7. Pada hakekatnya sama dari sisi bahasa pemrogramannya termasuk proses merancang antarmukanya. Delphi memberikan fasilitas Form Desainer untuk melakukan desain antarmukanya. Di dalam desain antar muka pertama yang dilakukan adalah mengatur form dan menempatkan Visual Component Library (VCL) yang dibutuhkan ke dalam form desainer.

Pertama, untuk memaniskan tampilan form, di mana di bagian atas form umumnya tertulis "Form 1". Tulisan ini bisa diubah sesuai dengan keinginan kita. Pembaca bisa membuka Object Inspector dengan menekan tombol F11 di keyboard untuk memunculkannya seperti Gambar 2. Kemudian pilih property yang bernama Caption. Ganti tulisan "Form 1" dengan "Computer Based Test" atau sesuai dengan keinginan pembaca. Secara otomatis tulisan bagian atas form berubah.

Gambar 2. Object Inspector.

Langkah kedua, penulis mempersiapkan tempat untuk menaruh Soal. Soal nanti akan disajikan dua bagian. Bagian pertama adalah menampilkan nomor soal. Bagian ke dua adalah isi dari soal tersebut. Keduanya, penulis menggunakan TLabel. Untuk mempermudah dalam desain yang dinamis, penulis menempatkan terlebih dahulu TPanel.

Gambar 3. Posisi TPanel di dalam kelompok Standard

Penulis menaruh TPanel yang masuk di dalam kelompok Standard. Gambar 3 menunjukkan kelompok VCL yang ada di dalam kelompok Standard. Dobel klik saja TPanel atau tarik dan taruh ke dalam form desainer. Di dalam form desainer nanti biasanya akan bernama Panel1. Karena Panel1 tidak digunakan untuk pemrograman, biarkan saja nama tersebut. Pembaca fokuskan lagi ke Object Inspector dengan menekan tombol F11 jika belum muncul. Pastikan Panel1 yang aktif. Jika bukan Panel1, pembaca bisa klik lagi Panel1 yang ada di form designer.

Gambar 4. Cara mengatur besar atau kecil sebuah VCL di dalam form designer.

Di dalam Object Inspector dicari property yang bernama Align. Di dalam property Align, pembaca bisa memilih apa yang disajikan di sana. Pilih nilai alTop, maka Panel1 akan menempel ke atas. Pembaca bisa membesarkan atau mengecilkan tinggi dari Panel1 dengan menarik ke bawah atau ke atas seperti Gambar 4. Hal ini berlaku juga untuk VCL lainnya.

Selanjutnya tempatkan TLabel ke dalam Panel1. TLabel juga merupakan VCL yang terdapat di kelompok Standard. Anda tarik dan taruh saja ke dalam Panel1. Dengan cara yang sama seperti penjelasan sebelumnya tentang mengubah nilai property, ubah property Name untuk Label1 menjadi LabelNomor. Hal ini untuk mempermudah di dalam pemrograman. Secara otomatis nama Label1 hilang dan berubah menjadi LabelNomor. Untuk merapikan tampilan agar menempel ke kanan, ubah property Align milik LabelNomor dengan alLeft.

Tempatkan kembali TLabel ke dalam Panel1 dan ubah property Name dengan Pertanyaan dan property Align dengan alClient. Atur sehingga posisinya seperti tertampil di Gambar 5 di mana daerah LabelNomor adalah yang berwarna hijau dan yang berwarna biru adalah daerah Pertanyaan. Sekedar catatan, warna di dalam Gambar 5 hanya digunakan di artikel ini untuk menunjukkan batasan saja, di komputer pembaca tentu tidak berwarna seperti di Gambar 5 kecuali diubah oleh pembaca.

Hingga di sini pembaca sudah memiliki dua komponen yang akan diakses di dalam pemrograman yaitu LabelNomor dan Pertanyaan. Keduanya memiliki tipe TLabel.

Gambar 5. Desain awal Computer Based Test sederhana

Langkah ketiga, penulis memasukan VCL untuk menampilkan pilihan jawaban. Penulis menggunakan TRadioGroup. Dengan cara yang sama, pembaca bisa menaruh TRadioGroup dari daftar komponen di kelompok Standard seperti terlihat di Gambar 3 ke dalam Form1. Atur property Name dengan nilai Pilihan sehingga nama dari VCL ini adalah Pilihan. Di dalam Pilihan juga ada property Caption, ubah property Caption menjadi 'Pilihan Jawaban' sehingga di dalam form designer muncul tulisan "Pilihan Jawaban".

Langkah keempat menaruh TButton yang juga merupakan VCL yang masuk ke dalam kelompok Standard. Taruh TButton di posisi seperti tombol Jawab yang ada di Gambar 5 kemudia ubah nilai Caption-nya dengan tulisan 'Jawab' sehingga tampilannya seperti pada Gambar 5.

Langkah ke lima taruh TLabel kembali ke dalam form designer di posisi yang tertulis 'Nilai' (background kuning) dan ubah property Name dengan 'Nilai' sehingga nanti saat pemrograman menggunakan nama ini.

Jadilah desain untuk CBT tetapi desain ini belum bisa dijalankan sesuai dengan rancangan. Jika dijalankan hanyalah tampil biasa saja.

3. Mengimplementasikan Pemrograman

3.1. Membuat Tipe Data Yang Menyimpan Soal, Variabel Nomor dan Nilai

Di dalam langkah Ini, pembaca perlu membuat tipe data baru untuk struktur soal beserta jawaban dan kunci jawabannya. Penulis menggunakan record untuk struktur tipe data baru. Penulis mendefinisikan TSoal. Berikut ini adalah struktur TSoal di dalam program:

  TSoal = record
    Soal,A,B,C,D,E: String;
    Kunci: Integer;
  end;

TSoal terdiri dari variabel Soal, A, B, C, D dan E yang bertipe String. Soal nanti digunakan untuk menyimpan pertanyaan, A, B, C, D dan E digunakan untuk menyimpan pilihan jawaban dari A hingga ke E. Kunci digunakan untuk menyimpan kunci jawaban yang benar. Kunci ini nantinya untuk melihat apakah jawaban pengguna benar atau salah.

Penulis juga memasukkan dua variabel NomorSoal dan NilaiTotal dengan tipe data Integer.  Variabel tersebut penulis taruh di bawah tulisan private. Terkait dengan mengapa di private, penulis tidak akan jelaskan, karena ini terkait dengan Object Oriented Programming (OOP). Pembaca bisa pelajari tentang OOP di lain kesempatan atau di halaman web lain.

Kode-kode itu penulis tambahkan di dalam source code yang sudah dibuat oleh Delphi. Untuk berpindah dari layar desain ke dalam kode program, pembaca bisa menekan tombol F12. Jika ingin kembali lagi maka tekan lagi F12. Lebih jelasnya mengenai penambahan kode program untuk tipe data dan variabel baru bisa dilihat di Gambar 6. Di gambar tersebut, penulis hanya menambahkan kode program yang diberi kotak warna merah. Kode-kode yang lain sudah diciptakan oleh Delphi. Bisa jadi di tempat pembaca sedikit berbeda, akan tetapi secara struktur tetap sama dari mulai interface, uses, type, private dan public.

Gambar 6. Penambahan kode program yang di batasi dengan kotak merah

3.2. Membuat Daftar Soal di dalam Konstanta

Dalam aplikasi CBT ini, untuk mempermudah memahami, penulis menyajikan penyimpanan soal di dalam konstanta. Pembaca bisa menaruh konstanta ini di bagian implementation atau di bagian interface. Gambar 7 adalah contoh kode untuk membuat daftar soal di dalam konstanta berjenis Array dari TSoal. Di dalam contoh tersebut, penulis menggunakan dua soal. Pembaca bisa menambah soal sendiri yang tentunya Array yang tertulis "[1..2]" harus diubah sesuai dengan jumlah soal yang pembaca buat. Pada Gambar 7, hanya bagian yang diberi kotak warna merah saja yang penulis tambahkan, yang lainnya adalah buatan Delphi secara otomatis.

Gambar 7. Kode untuk menambahkan data soal ke dalam konstanta dengan nama DataSoal

3.3. Menginisialisasi Soal Pertama

Saat program dijalankan tentu jika tidak ada inisialisasi soal pertama untuk dimunculkan maka tampilan yang muncul adalah tampilan yang sama persis dengan desain awal. Di dalam desain  awal yang muncul hanya tulisan-tulisan yang tidak bermakna soal. Untuk melakukan inisialisasi, pembaca bisa memanfaatkan event FormCreate. Apa event tersebut, penulis akan jelaskan nanti saat menuliskan tentang konsep OOP.

Pertama, pembaca bisa kembali ke form designer dengan menekan tombol F12. Di dalam form designer, pembaca dobel klik saja di bagian form yang masih kosong (tidak ditempeli VCL). Lihat panah merah di Gambar 8, di lokasi tersebut pembaca lakukan dobel klik.

Gambar 8. Lokasi dobel klik untuk masuk ke kode program event FormCreate

Setelah pembaca melakukan dobel klik di form tersebut, maka sebuah procedure FormCreate pun dibuat otomatis oleh Delphi. Pembaca tinggal memasukkan kode-kode program di dalam procedure FormCreate tersebut. Tuliskan kode seperti yang tersaji di Gambar 9. Penulis menambahkan kode hanya yang berada di dalam kotak warna merah, di luar itu sudah dibuatkan oleh Delphi saat dobel klik tadi dan sisanya penulis tinggal menyisipkannya.

Gambar 9. Penambahan kode program saat event FormCreate

Di dalam program tersebut tertulis sintak:

NomorSoal := 1;

Maksud dari sintak ini adalah menginisialisasi NomorSoal dimulai dari nomor 1.

Baris kedua tertulis sintak:

NilaiTotal := 0;

Maksud dari sintak ini adalah menginisialisasi bahwa pengguna belum mendapatkan nilai, sehingga nilai harus diseting nol.

Baris berikutnya terdapat sintak:

LabelNomor.Caption := IntToStr(NomorSoal)+'. ';

LabelNomor adalah VCL yang dibuat saat desain antar muka, berikutnya diikuti Caption, artinya Caption yang dimiliki oleh LabelNomor. Caption tersebut diisi dengan nilai dalam variabel NomorSoal agar di tampilan muncul nomor dari soal yang disajikan. Karena Caption berupa String dan NomorSoal berupa integer maka perlu mengubah NomorSoal menjadi String dengan perintah IntToStr.

Langkah berikutnya adalah menampilkan pertanyaan dan pilihan jawaban ke dalam layar. Soal di tampilkan di VCL Pertanyaan, sementara pilihan jawaban dimasukkan ke dalam pilihan.

3.4. Membuat Program yang Menerima Input Jawaban dari Pengguna

Pada bagian akhir ini adalah program di mana pengguna melakukan proses penjawaban soal. Ketika soal dijawab oleh pengguna, maka CBT akan menilai jawaban pengguna. Setelah menilai, CBT akan menampilkan soal berikutnya. Jika ternyata sudah tidak ada soal berikutnya maka CBT akan memberikan informasi bahwa soal sudah dijawab semua. Jika semua soal sudah dijawab, maka program tidak akan menerima inputan lagi dari pengguna.

Kode terakhir ini, pembaca dobel klik pada tombol "Jawab" yang ada di form designer. Untuk masuk ke form designer jika posisi pembaca di editor, maka tekan F12. Setelah pembaca dobel klik tombol "Jawab", maka pembaca akan disajikan sebuah procedure OnClick yang dibuat otomatis oleh Delphi. Pengguna tinggal menambahkan kode program atau memodifikasi saja di dalamnya. Silakan tambahkan kode program seperti yang ada di dalam Gambar 10. Setelah itu, silakan Anda jalankan dengan tekan F9 atau run. Jika masih muncul error, silakan lihat pesan error-nya. Bisa jadi pembaca kurang teliti menuliskan kode program atau salah pemberian nama identifier di saat desain antarmuka.

Gambar 10. Kode program saat pengguna menjawab soal

Setelah berhasil, pengguna bisa melakukan modifikasi, baik dari sisi tampilan, dari sisi aturan, dari sisi soal dan termasuk bagaimana menyimpan soal, bagaimana menampilkan soal secara acak. Pengguna bisa membuat soal yang dinamis  dengan memanfaatkan file eksternal atau menggunakan basisdata.

Semoga artikel ini memberikan manfaat buat para pembaca sekalian.