Bagikan melalui

Tutorial: Membuat aplikasi WinForms kuis matematika

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

Lingkungan pengembangan terintegrasi Visual Studio (IDE) 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:

  • Buat proyek Visual Studio yang menggunakan Windows Forms.
  • Tambahkan label, tombol, dan kontrol lainnya ke formulir.
  • Atur properti untuk kontrol.
  • Simpan dan jalankan proyek Anda.

Prasyarat

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

Nota

Tutorial ini memerlukan templat proyek Windows Forms App (.NET Framework). Selama penginstalan, pilih beban kerja pengembangan desktop .NET :

Cuplikan layar yang memperlihatkan beban kerja pengembangan desktop DOT NET di Alat Penginstal Visual Studio.

Jika Anda sudah menginstal Visual Studio dan perlu menambahkannya, dari menu, pilih Alat>Dapatkan Alat dan Fitur, atau di jendela Buat proyek baru , pilih tautan Instal alat dan fitur lainnya .

Cuplikan layar yang memperlihatkan tautan Instal lebih banyak alat dan fitur dari kotak dialog Tidak menemukan apa yang Anda cari di kotak dialog Buat proyek baru.

Membuat proyek Windows Forms 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.

    Cuplikan layar yang memperlihatkan opsi Buat proyek baru di jendela mulai Visual Studio.

  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.

    Cuplikan layar yang memperlihatkan kotak dialog Buat proyek baru dengan kotak pencarian, daftar Jenis proyek, dan dua templat dipanggil.

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

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

Atur properti formulir

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

  1. Di proyek Anda, pilih Windows Forms Designer. 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.

    Nota

    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 . Pegangan seret adalah persegi putih kecil di sudut kanan bawah bentuk. 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 pengaju 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 menambahkan kode untuk timer hitung mundur dalam tutorial selanjutnya dalam seri ini.

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

  2. Label Pilih kontrol di Kotak Alat, lalu seret ke formulir.

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

    • Atur (Nama) ke timeLabel.
    • Ubah Ukuran Otomatis menjadi False sehingga Anda bisa mengubah ukuran kotak.
    • Ubah BorderStyle menjadi FixedSingle untuk menggambar garis di sekitar kotak.
    • Atur Ukuran ke 200, 30.
    • Pilih properti Teks , lalu pilih kunci 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, gunakanlah garis tersebut untuk memosisikan kontrol pada formulir.

  5. Tambahkan kontrol Label lain dari Kotak Alat, 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 .

    Cuplikan layar yang memperlihatkan label Waktu Tersisa dan sisa waktu dengan kontrol berbaris di samping satu sama lain di sudut kanan atas formulir.

Tambahkan kontrol untuk soal penjumlahan

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

  1. Tambahkan kontrol Label dari Kotak Alat ke formulir.

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

    • Atur Teks ke ? (tanda tanya).
    • Atur Ukuran Otomatis 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. Atur 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. NumericUpDown Tambahkan kontrol dari Kotak Alat ke formulir. Anda mempelajari lebih lanjut tentang kontrol semacam ini nanti.

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

    • Atur ukuran font ke 18.
    • Di bawah Ukuran Maksimum, atur lebar ke 100.
    • Atur (Nama) ke jumlah.

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

    Cuplikan layar yang memperlihatkan baris pertama kuis matematika, dengan label terlihat dan kontrol dengan tombol panah yang menampilkan nol.

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 ke dalam formulir.

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

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

    • Atur (Nama) label tanda tanya pertama menjadi minusLeftLabel.
    • Atur Teks label kedua ke - (tanda minus).
    • Atur (Nama) label tanda tanya kedua menjadi 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) kendali NumericUpDown menjadi produk.

  6. Untuk baris keempat:

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

Cuplikan layar yang memperlihatkan kuis matematika dengan empat baris masalah, dengan label dan kontrol dengan tombol panah terlihat.

Tambahkan tombol mulai dan atur urutan indeks tab

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

  1. Button Tambahkan kontrol dari Kotak Alat ke formulir.

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

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

  3. Tengahkan tombol di dekat bagian bawah formulir.

    Cuplikan layar yang memperlihatkan kuis matematika dengan empat baris masalah dan tombol mulai.

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

    • Atur TabIndex dari kontrol jumlah ke 1.
    • Atur TabIndex dari kontrol perbedaan ke 2.
    • Atur TabIndex pada kontrol produk ke 3.
    • Atur TabIndex dari kontrol quotient ke 4.

Jalankan aplikasi Anda

Masalah matematika belum berfungsi 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 Simpan Semua File>.
    • Pada toolbar, pilih tombol Simpan Semua .

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

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

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

Langkah selanjutnya

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

  • Last updated on