Subbab 9 / 9

Winform GUI, OOP, dan Event

Definisi Windows Forms

Windows Forms (WinForms) merupakan kerangka kerja (framework) berbasis GUI (Graphical User Interface) yang menjadi bagian dari .NET dan digunakan untuk membangun aplikasi desktop pada sistem operasi Windows. WinForms menyediakan berbagai komponen antarmuka yang dapat digunakan untuk membuat aplikasi dengan lebih mudah, seperti tombol, label, kotak input, tabel, dan komponen lainnya.

Dalam pengembangannya, WinForms memungkinkan programmer merancang tampilan aplikasi menggunakan metode drag-and-drop melalui Visual Studio. Programmer dapat menempatkan komponen pada Form, mengatur tampilannya melalui jendela Properties, kemudian menambahkan kode C# untuk mengatur perilaku aplikasi.

Keunggulan dan Kelemahan Winforms

Keunggulan Winform

  1. Memungkinkan pembuatan prototipe dan aplikasi sederhana secara cepat melalui fitur drag-and-drop di Visual Studio.
  2. Relatif mudah dipelajari oleh pemula karena antarmuka dapat dirancang secara visual tanpa harus menulis seluruh kode UI secara manual.
  3. Telah digunakan sejak lama sehingga memiliki dokumentasi yang melimpah, banyak contoh program, dan referensi penyelesaian masalah.
  4. Cocok untuk aplikasi perkantoran sederhana dan pengelolaan data yang tidak membutuhkan pemrosesan grafis intensif.

Kelemahan WinForms

  1. Membutuhkan usaha tambahan untuk membuat tampilan modern, transparansi, dan animasi kompleks seperti pada aplikasi modern.
  2. Membutuhkan konfigurasi yang tepat agar ukuran dan posisi komponen tetap sesuai pada layar dengan resolusi serta skala DPI yang berbeda.
  3. WinForms menggunakan sistem gambar dan kontrol Windows yang secara tradisional banyak mengandalkan GDI/GDI+. Oleh karena itu, WinForms kurang ideal untuk aplikasi yang membutuhkan animasi atau pemrosesan grafis kompleks.

Komponen Penting Dalam WinForms

Komponen

Keterangan

Form

Jendela utama aplikasi. Semua komponen lain diletakkan di sini.

Label

Digunakan untuk menampilkan teks keterangan (instruksi) yang tidak bisa diubah oleh user.

TextBox

Digunakan sebagai tempat bagi pengguna untuk memasukkan teks, seperti nama, email, atau kata sandi.

Button

Digunakan untuk memicu suatu aksi ketika diklik, seperti menyimpan data atau menjalankan proses login.

ComboBox

Digunakan untuk menampilkan daftar pilihan dalam bentuk menu drop-down, sehingga pengguna dapat memilih salah satu opsi yang tersedia.

DataGridView

Digunakan untuk menampilkan data dalam bentuk tabel yang terdiri atas baris dan kolom, misalnya data yang berasal dari database.

CheckBox

Digunakan untuk memilih satu atau beberapa opsi sekaligus, seperti memilih hobi atau fitur tertentu.

RadioButton

Digunakan untuk memilih satu opsi dari beberapa pilihan yang tersedia dalam satu kelompok, seperti memilih jenis kelamin.

PictureBox

Digunakan untuk menampilkan gambar, seperti foto, logo, atau ilustrasi, dalam aplikasi.

Panel

Digunakan sebagai wadah (container) untuk mengelompokkan komponen-komponen antarmuka agar tata letak aplikasi lebih rapi dan terstruktur.

Waktunya Praktik Wak !!!

Disini kita akan mencoba untuk membuat tampilan halaman login dari awal sampai akhir. Lets goo!!!

A. Membuat Project Baru

  1. Buka Visual Studio.
  2. Pilih Create a new project.
  3. Pilih template Windows Forms App (.NET Framework).
  4. Klik Next, beri nama project misalnya LoginFormApp.
  5. Pilih lokasi penyimpanan, lalu klik Create.

B. Mengubah Background Form Utama

  1. Klik form utama di designer.
  2. Klik kanan pada form, Buka Properties → cari BackgroundImage.
  3. Klik, pilih gambar background (jika belum ada, import dulu).
  4. Set BackgroundImageLayout menjadi Stretch agar memenuhi form.

C. Menambahkan Panel untuk Login Form

  1. Buka menu Toolbox, lalu pilih Panel.
  2. Drag ke form, letakkan kira-kira di tengah.
  3. Atur ukuran panel sesuai kebutuhan (misalnya 300x400 px).
  4. Sesuaikan posisi agar di tengah form (Anda bisa atur properti Location).

D. Menambahkan Gambar Logo di Panel

  1. Dari Toolbox, pilih PictureBox.
  2. Letakkan di dalam panel, letakkan di bagian atas tengah.
  3. Di Properties → klik BackgroundImage → pilih logo (import jika belum ada).
  4. Atur BackgroundImageLayout menjadi Zoom agar gambar pas.

E. Menambahkan Label Judul "FORM LOGIN"

  1. Dari Toolbox, pilih Label.
  2. Letakkan di bawah PictureBox dalam panel.
  3. Di Properties, ubah Text menjadi "FORM LOGIN".
  4. Sesuaikan font, misalnya ukuran 14, style bold.
  5. Set alignment menjadi center (opsional).

F. Menambahkan Label dan TextBox untuk Username

  1. Cari Toolbox, pilih Label, letakkan di panel tepat di bawah judul.
  2. Ubah text menjadi "Username".
  3. Pilih TextBox dari toolbox, letakkan di bawah label Username.
  4. Set nama properti TextBox menjadi TbUsername.

G. Menambahkan Label dan TextBox untuk Password

  1. Ulangi langkah seperti untuk Username:
  2. Label dengan text "Password".
  3. TextBox, di properti beri nama TbPassword.
  4. Di properti TextBox, ubah UseSystemPasswordChar menjadi True agar teks tersamarkan.

H. Menambahkan Button Login

  1. Dari Toolbox, pilih Button.
  2. Letakkan di bawah textbox Password.
  3. Ubah properti:
  4. Name menjadi BtnLogin
  5. Text menjadi "Login"
  6. BackColor menjadi hijau (misalnya Color.Green)
  7. ForeColor menjadi putih agar tulisan terlihat.

I. Membuat Form Setelah Login

  1. Klik Kanan pada Project C# Windows Forms
  2. Pilih Add -> Form (Windows Forms)
  3. Beri nama "FormDashboard"
  4. Sesuaikan tampilan seperti pada Form Login
  5. Beri label dengan nama LabelDashboard dan text nya menjadi Selamat Datang.

Menyusun Halaman Login

  • Klik 2 kali pada button login untuk otomatis membuat sebuah event handler click.
  • Pada Function tersebut, kita akan mengambil value yang diinputkan oleh user dari masing masing textbox dan menyimpannya ke dalam variabel. Sebelum itu kita juga akan menentukan username dan juga password terlebih dahulu.
php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public partial class Form1 : Form
{
    private string username;
    private string password;
    public Form1()
    {
        InitializeComponent();
        username = "ahmad";
        password = "ahmad123";
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        pictureBox1.BackColor = Color.Transparent;
        
    }


    private void BtnLogin_Click(object sender, EventArgs e)
    {
        string usernameInput = TbUsername.Text;
        string passwordInput = TbPassword.Text;

    }
}
  • Kemudian kita akan menggunakan percabangan untuk menyamakan username dan password yang di inputkan user terhadap username dan password yang telah dibuat. dan kita beri messagebox untuk penanda berhasil atau tidaknya.
php
1
2
3
4
5
6
7
8
9
10
11
string usernameInput = TbUsername.Text;
string passwordInput = TbPassword.Text;

if (usernameInput == username && passwordInput == password)
{
    MessageBox.Show("Login Berhasil", "success", MessageBoxButtons.OK, MessageBoxIcon.Information );
} 
else
{
    MessageBox.Show("Username Atau Password Salah", "Gagal", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
  • Arahkan Ke FormDashboard ketika login Berhasil
php
1
2
3
4
5
6
7
8
9
10
11
12
13
if (usernameInput == username && passwordInput == password)
{
    MessageBox.Show("Login Berhasil", "success", MessageBoxButtons.OK, MessageBoxIcon.Information );

     // ini penambahan
 FormDashboard formDashboard = new FormDashboard();
 formDashboard.Show();
 this.Hide();
} 
else
{
    MessageBox.Show("Username Atau Password Salah", "Gagal", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
  • Tambahkan attribut username pada FormDashboard sehingga kita bisa memberikan value username dari FormLogin ke FormDashboard melalui Constructor. Dan username tersebut akan kita tampilkan pada labelDashboard.

FormDashboard.cs

php
1
2
3
4
5
6
7
8
9
10
11
12
public partial class FormDashboard : Form
{
     private string username;
     public FormDashboard(string username)
     {
          InitializeComponent();
          this.username = username;
          LabelDashboard.Text += this.username;
     }


}

Form1.cs

php
1
2
3
4
// ini penambahan
FormDashboard formDashboard = new FormDashboard(usernameInput);
formDashboard.Show();
this.Hide();

Percobaan Menampilkan Data Dalam DataGridView

A. Menambahkan DataGridView

  1. Dari Toolbox, pilih DataGridView.
  2. Letakkan pada FormDashboard
  3. Ubah nama pada properti menjadi DgUser

B. Buat Class User dalam file Baru yaitu User.Cs

php
1
2
3
4
5
6
7
8
9
10
11
12
13
public class User
{
    public string nama { get; set; }
    public int umur{ get; set; }
    public string asal { get; set; }

    public User(string nama, int umur, string asal)
    {
        this.nama = nama;
        this.umur = umur;
        this.asal = asal;
    }
}

C. Buat Sebuah List bertipe User, dan buat Sebuah Method Untuk Mengenerate Value dari list tersebut di dalam form dashboard

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 public partial class FormDashboard : Form
 {
     private string username;
     private List<User> listUser;
     public FormDashboard(string username)
     {
         InitializeComponent();
         this.username = username;
         LabelDashboard.Text += $" {this.username}";
         this.listUser = generateData();
         DgUser.DataSource = listUser;
     }

     public List<User> generateData()
     {
         List<User> listUser = new List<User>();
         for (int i = 0; i  < 5; i++)
         {
             User user = new User($"Ahmad {i}", 20, "Bwi");
             listUser.Add(user);
         }
         return listUser;
     }
 }
Subbab Sebelumnya
Koneksi Database Berbasis OOP dengan C# dan PostgreSQL