Tutorial: Membuat aplikasi WinForms kuis matematika

Dalam rangkaian empat tutorial ini, Anda akan membangun kuis matematika. Kuis berisi empat masalah matematika acak yang coba dijawab oleh peserta kuis dalam waktu tertentu.

Lingkungan pengembangan terintegrasi (IDE) Visual Studio menyediakan alat yang Anda butuhkan untuk membuat aplikasi. Untuk mempelajari selengkapnya tentang IDE ini, lihat Selamat Datang di IDE Visual Studio.

Dalam tutorial pertama ini, Anda mempelajari cara:

• Membuat proyek Visual Studio yang menggunakan Formulir Windows.
• Menambahkan label, tombol, dan kontrol lainnya ke formulir.
• Menetapkan properti untuk kontrol.
• Menyimpan dan menjalankan proyek Anda.

Prasyarat

Anda memerlukan Visual Studio untuk menyelesaikan tutorial ini. Kunjungi halaman pengunduhan Visual Studio untuk mendapatkan versi gratis.

Membuat proyek Formulir Windows Anda

Saat Anda membuat kuis matematika, langkah pertama adalah membuat proyek aplikasi Formulir Windows.

1. Buka Visual Studio.

2. Di jendela mulai, pilih Buat proyek baru.

   

3. Di jendela Buat proyek baru, cari Formulir Windows. Lalu pilih Desktop dari daftar jenis Proyek.

4. Pilih templat aplikasi Formulir Windows (.NET Framework) untuk C# atau Visual Basic, lalu pilih Berikutnya.

   

   Catatan

   Jika Anda tidak melihat templat aplikasi Formulir Windows (.NET Framework), Anda dapat menginstalnya dari jendela Buat proyek baru. Di pesan Tidak menemukan apa yang Anda cari?, pilih Instal alat dan fitur lainnya.

   

   Selanjutnya, di Visual Studio Installer, pilih pengembangan desktop .NET.

   

   Pilih Ubah di Alat Penginstal Visual Studio. Anda mungkin diminta untuk menyimpan pekerjaan Anda. Berikutnya, pilih Lanjutkan untuk menginstal beban kerja.

5. Di jendela Konfigurasikan proyek baru Anda, beri nama proyek Anda dengan MathQuiz,, lalu pilih Buat.

Visual Studio membuat solusi untuk aplikasi Anda. Solusinya adalah kontainer untuk semua proyek dan file yang dibutuhkan aplikasi Anda.

Mengatur properti formulir

Setelah Anda memilih templat dan memberi nama file Anda, Visual Studio membuka formulir untuk Anda. Bagian ini memperlihatkan kepada Anda cara mengubah beberapa properti formulir.

1. Di proyek Anda, pilih Perancang Formulir Windows. Tab perancang diberi label Form1.cs [Design] untuk C# atau Form1.vb [Design] untuk Visual Basic.

2. Pilih formulir, Form1.

3. Jendela Properti sekarang menampilkan properti untuk formulir. Jendela ini biasanya berada di sudut kanan bawah Visual Studio. Jika Anda tidak melihat Properti, pilih Tampilkan>Jendela Properti.

4. Temukan properti Teks di jendela Properti. Bergantung pada cara daftar diurutkan, Anda mungkin perlu menggulir ke bawah. Masukkan nilai Kuis Matematika untuk nilai Teks, lalu pilih Enter.

   Formulir Anda sekarang memiliki teks "Kuis Matematika" di bilah judulnya.

   Catatan

   Anda dapat menampilkan properti menurut kategori atau menurut abjad. Gunakan tombol pada jendela Properti untuk beralih bolak-balik.

5. Ubah ukuran formulir menjadi lebar 500 piksel dengan tinggi 400 piksel.

   Anda dapat mengubah ukuran formulir dengan menyeret tepinya atau menyeret gagang hingga ukuran yang benar muncul sebagai nilai Ukuran di jendela Properti. Handel seret adalah persegi putih kecil di sudut kanan bawah formulir. Anda juga dapat mengubah ukuran formulir dengan mengubah nilai properti Ukuran.

6. Ubah nilai properti FormBorderStyle menjadi Fixed3D, dan atur properti MaximizeBox ke False.

   Nilai-nilai ini mencegah pengalih kuis mengubah ukuran formulir.

Membuat kotak sisa waktu

Kuis matematika berisi kotak di sudut kanan atas. Kotak itu memperlihatkan jumlah detik yang tersisa dalam kuis. Bagian ini memperlihatkan kepada Anda cara menggunakan label untuk kotak tersebut. Anda akan menambahkan kode untuk timer hitung mundur dalam tutorial selanjutnya dalam seri ini.

1. Di sisi kiri IDE Visual Studio, pilih tab Toolbox. Jika Anda tidak melihat kotak alat, pilih Tampilkan>Toolbox dari bilah menu atau Ctrl+Alt+X.

2. Pilih kontrol Label di Toolbox, lalu seret ke formulir.

3. Dalam kotak Properti, atur properti berikut ini untuk label:

   • Atur (Nama) ke timeLabel.
   • Ubah AutoSize ke False sehingga Anda dapat mengubah ukuran kotak.
   • Ubah BorderStyle menjadi FixedSingle untuk menggambar garis di sekitar kotak.
   • Atur Ukuran ke 200, 30.
   • Pilih properti Teks, lalu pilih tombol Backspace untuk menghapus nilai Teks.
   • Pilih tanda plus (+) di samping properti Font, lalu atur Ukuran ke 15,75.

4. Pindahkan label ke sudut kanan atas formulir. Saat garis spacer biru muncul, gunakan untuk memosisikan kontrol pada formulir.

5. Tambahkan kontrol Label lain dari Toolbox, lalu atur ukuran font-nya menjadi 15,75.

6. Atur properti Teks label ini ke Waktu Tersisa.

7. Pindahkan label sehingga berbaris ke atas ke kiri label timeLabel.

   

Menambahkan kontrol untuk masalah penambahan

Bagian pertama dari kuis adalah masalah penambahan. Bagian ini memperlihatkan kepada Anda cara menggunakan label untuk menampilkan masalah tersebut.

1. Tambahkan kontrol Label dari Toolbox ke formulir.

2. Dalam kotak Properti, atur properti berikut ini untuk label:

   • Atur Teks ke ? (tanda tanya).
   • Atur AutoSize ke False.
   • Atur Ukuran ke 60, 50.
   • Atur ukuran font ke 18.
   • Atur TextAlign ke MiddleCenter.
   • Atur Lokasi ke 50, 75 untuk memosisikan kontrol pada formulir.
   • Atur (Nama) ke plusLeftLabel.

3. Dalam formulir, pilih label plusLeftLabel yang Anda buat. Salin label dengan memilih Edit>Salin atau Ctrl+C.

4. Tempelkan label ke dalam formulir tiga kali dengan memilih Edit>Tempel atau Ctrl+V tiga kali.

5. Susun tiga label baru sehingga berturut-turut di sebelah kanan label plusLeftLabel.

6. Atur properti Teks label kedua ke + (tanda plus).

7. Atur properti label ketiga (Nama) ke plusRightLabel.

8. Atur properti Teks label keempat ke = (tanda sama dengan).

9. Tambahkan kontrol NumericUpDown dari Kotak Alat ke formulir. Anda akan mempelajari lebih lanjut tentang kontrol semacam ini nanti.

10. Dalam kotak Properti, atur properti berikut untuk kontrol NumericUpDown:

    • Atur ukuran font ke 18.
    • Atur lebar ke 100.
    • Atur (Nama) ke jumlah.

11. Sejajarkan kontrol NumericUpDown dengan kontrol Label untuk masalah penambahan.

    

Menambahkan kontrol untuk masalah pengurangan, perkalian, dan pembagian

Selanjutnya, tambahkan label ke formulir untuk masalah matematika yang tersisa.

1. Salin empat kontrol Label dan kontrol NumericUpDown yang Anda buat untuk masalah penambahan. Tempelkan mereka ke dalam formulir.

2. Pindahkan kontrol baru untuk berbaris di bawah kontrol penambahan.

3. Dalam kotak Properti, atur properti berikut ini untuk kontrol baru:

   • Atur (Nama) label tanda tanya pertama ke minusLeftLabel.
   • Atur Teks label kedua ke - (tanda minus).
   • Atur (Nama) label tanda tanya kedua ke minusRightLabel.
   • Atur (Nama) kontrol NumericUpDown ke perbedaan.

4. Salin kontrol penambahan, dan tempelkan dua kali lagi ke dalam formulir.

5. Untuk baris ketiga:

   • Atur (Nama) label tanda tanya pertama ke timesLeftLabel.
   • Atur Teks label kedua ke × (tanda perkalian). Anda dapat menyalin tanda perkalian dari tutorial ini dan menempelkannya ke formulir.
   • Atur (Nama) label tanda tanya kedua ke timesRightLabel.
   • Atur (Nama) kontrol NumericUpDown ke produk.

6. Untuk baris keempat:

   • Atur (Nama) label tanda tanya pertama ke dividedLeftLabel.
   • Atur Teks label kedua ke ÷ (tanda pembagian). Anda dapat menyalin tanda pembagian dari tutorial ini dan menempelkannya ke formulir.
   • Atur (Nama) label tanda tanya kedua ke dividedRightLabel.
   • Atur (Nama) kontrol NumericUpDown ke quotient.

Tambahkan tombol mulai dan atur urutan indeks tab

Bagian ini memperlihatkan kepada Anda cara menambahkan tombol mulai. Anda juga akan menentukan urutan tab kontrol. Urutan ini menentukan bagaimana pengarah kuis berpindah dari satu kontrol ke kontrol berikutnya dengan menggunakan tombol Tab.

1. Tambahkan kontrol Button dari Kotak Alat ke formulir.

2. Dalam kotak Properti, atur properti Tombol berikut ini:

   • Atur (Nama) ke startButton.
   • Atur Teks ke Mulai kuis.
   • Atur ukuran font ke 14.
   • Atur AutoSize ke True, yang menyebabkan tombol untuk mengubah ukuran secara otomatis agar pas dengan teks.
   • Atur TabIndex ke 0. Nilai ini membuat tombol mulai menjadi kontrol pertama untuk menerima fokus.

3. Pusatkan tombol di dekat bagian bawah formulir.

   

4. Dalam kotak Properti, atur properti TabIndex dari setiap kontrol NumericUpDown:

   • Atur TabIndex dari kontrol jumlah NumericUpDown ke 1.
   • Atur TabIndex dari perbedaan kontrol NumericUpDown ke 2.
   • Atur TabIndex dari kontrol NumericUpDown produk ke 3.
   • Atur TabIndex dari kontrol Quotient NumericUpDown ke 4.

Jalankan aplikasi Anda

Masalah matematika belum berhasil pada kuis Anda. Tetapi Anda masih dapat menjalankan aplikasi untuk memeriksa apakah nilai TabIndex berfungsi seperti yang Anda harapkan.

1. Gunakan salah satu metode berikut untuk menyimpan aplikasi Anda:

   • Pilih Ctrl+Shift+S.
   • Pada bilah menu, pilih File>Simpan Semua.
   • Pada toolbar, pilih tombol Simpan Semua.

2. Gunakan salah satu metode berikut untuk menjalankan aplikasi Anda:

   • Pilih F5.
   • Pada bilah menu, pilih Debug>Mulai Penelusuran Kesalahan.
   • Pada toolbar, pilih tombol Mulai.

3. Pilih tombol Tab beberapa kali untuk melihat bagaimana fokus berpindah dari satu kontrol ke kontrol berikutnya.

Langkah berikutnya

Lanjutkan ke tutorial berikutnya untuk menambahkan masalah matematika acak dan penanganan aktivitas ke kuis matematika Anda.

Tutorial bagian 2: Menambahkan masalah matematika ke aplikasi WinForms kuis matematika