Tutorial membuat Halaman Login Sederhana WinForm C#

Halaman Login merupakan halaman awal yang digunakan untuk mengakses halaman utama dari sebuah Sistem Aplikasi. Kali ini kita akan membuat sebuah Tutorial mengenai cara membuat halaman login pada Windows Form dengan menggunakan bahasa pemrogramana C#.

Untuk membuat halaman ini, yang perlu kamu persiapkan pertama kali adalah Visual Studio. Disini kami menggunakan Visual Studio 2019.

Membuat Project Baru Winform

Hal yang harus kamu lakukan untuk membuat project baru, untuk membuatnya kamu dapat mengunjungi halaman Materi : Membuat Aplikasi WinForm dengan C#, atau kamu dapat mengikuti langkah – langkah dibawah ini.

1. Buka Visual Studio dan buat project baru windows form. Perhatikan gambar dibawah ini.
   
   
   
   Pilih Windows Form App ( .NET Framework ), kemudian klik Next.
   
2. Kedua adalah memberi nama pada Project yang akan dibuat. Perhatikan gambar di bawah ini.
   
   
   
   Beri nama sesuai keinginanmu, setelah itu pilih Create.
   
3. Project telah selesai dibuat.
   
   

Setelah selesai membuat Project Baru Windows Form dengan Visual Studio, sekarang waktunya untuk proses Layouting atau membuat layout.

Membuat Layout

Sekarang mari kita mencari IDE, desain seperti apa yang ingin kita implementasikan pada halaman login. Bagaimana jika seperti gambar dibawah ini ?

Oke jika setuju, mari kita buat Layoutnya. Berikut ini adalah hasil dari layout yang telah dibuat.

Bagaimana sudah mirip belum ?

Layout di atas menggunakan :

• 1 Panel
• 1 PictureBox
• 2 Label
• 2 TextBox
• 1 CheckBox
• 1 Button

Setelah Layout selesai dibuat, langkah selanjutnya mempercantiknya dengan warna dan sebaginay

Design Customization

Mari kita percantik dan sesuaikan layout sebelumnya agar lebih menawan.

Menambahkan Gambar

Klik tanda panah pada bagian atas PictureBox, kemudian pilih Choose Image

Import Gambar yang telah kamu siapkan sebelumnya dengan cara pilih import

Jika Gambar yang di import terlihat terlalu besar pada PictureBox, gantilah Size Mode ke Stretch

Mengganti Teks pada Label

Kamu dapat mengganti teks pada label melalui Tab Properties.

Kemudian Ganti warna Teks melalui ForeColor pada Appereance

Ganti juga Teks Checkbox dan Button, caranya sama seperti di atas.

Mengganti Warna Panel

Sama seperti sebelumnya, kamu dapat mengganti panel dengan melalui tab properties pada kategori appereance. Apabila sebelumnya kita berbicara mengenai ForeColor, untuk mengganti warna panel kita gunakan BackColor. Dan berikut ini adalah hasilnya.

Kustomisasi desain telah selesai, bagaimana menurutmu ? Apakah masih ada yang kurang ?. Bagaimana dengan ini.

Tahapan desain telah selesai kita lakukan, sekarang waktunya mengatur layout agar responsif dalam segala resolusi.

Responsive

Suatu program dapat dikatakan baik apabila dapat berfungsi normal pada semua jenis resolusi. Maka dari itu responsive merupakan hal yang sangat penting dalam pengembangan suatu program.

Agar program dapat responsive, kamu dapat memanfaatkan docking dan anchor, kamu dapat mempelajarinya melalui tautan dibawah ini.

Pelajari juga : Docking dan Anchor pada Windows Form

Agar tampilan form dan logo tetap berada di tengah, kamu dapat menghilangkan anchor pada control tersebut. Kamu dapat melakukannya melalui tab properties.

Ganti bagian anchor dengan none, maka anchor akan hilang.

Kemudian untuk membatasi ukuran window ketika di perkecil, kamu dapat mengaturnya pada properties form.

Atur sesuai selera, disini kami menggunakan 640 x 480.

Setelah tampilan dirasa sudah baik, maka langkah selanjutnya adalah membuat kode program agar dapat berfungsi sesuai dengan keinginan.

Code

Saat ini kita belum akan mengimplementasikan form login ini dengan database, khusus implementasi database pada form ini akan dibahas pada materi selanjutnya

Untuk menulis kode kamu dapat membuka code editor dengan cara melakukan double click pada form. berikut ini tampilannya

Tambahkan dua buah variable untuk menampung Username dan Password. Tambahkan 2 variabel di dalam Class Login ( Nama Form, bisa berbeda tergantung nama yang kamu tetapkan sebelumnya ).

namespace loginScreen
 {
     public partial class Login : Form
     {
         readonly string Username = "idcsharp";
         readonly string Password = "12345";
         public Login()
         {
             InitializeComponent();
         }

Selanjutnya kita akan menambahkan kode program yang berfungsi otentikasi ketika login, pada button login.

Double click pada Button Login, kemudian tambahkan kode berikut.

private void BtnLogin_Click(object sender, EventArgs e)
         {
             if (TxtUsername.Text == Username && TxtPassword.Text == Password)
             {
                 MessageBox.Show("Kamu berhasil login");
             }
             else if (TxtUsername.Text == "" || TxtPassword.Text == "")
             {
                 MessageBox.Show("Kamu belum mengisi form login");
             }
             else
             {
                 MessageBox.Show("Username atau Password Salah ");
             }
         }

Keseluruhan kode akan terlihat seperti dibawah ini :

using System;
using System.Windows.Forms;

namespace loginScreen
{
    public partial class Login : Form
    {
        readonly string Username = "idcsharp";
        readonly string Password = "12345";
        public Login()
        {
            InitializeComponent();
        }

        private void BtnLogin_Click(object sender, EventArgs e)
        {
            if (TxtUsername.Text == Username && TxtPassword.Text == Password)
            {
                MessageBox.Show("Kamu berhasil login");
            }
            else if (TxtUsername.Text == "" || TxtPassword.Text == "")
            {
                MessageBox.Show("Kamu belum mengisi form login");
            }
            else
            {
                MessageBox.Show("Username atau Password Salah ");
            }
        }
    }
}

Kemudian klik run dan cek, apakah program berfungsi dengan benar.

Sampai jumpa di materi selanjutnya, selanjutnya kita akan membahas mengenai Tutorial membuat Halaman Login dengan koneksi database melalui Service Based Database.

Kamu mengunduh project ini melalui tautan dibawah.