Kategori Tips and Trick

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. Buka Visual Studio dan buat project baru windows form. Perhatikan gambar dibawah ini.Pilih Windows Form App ( .NET Framework ), kemudian klik Next.Kedua adalah memberi nama pada Project yang akan dibuat. Perhatikan gambar di bawah ini.Beri nama sesuai keinginanmu, setelah itu pilih Create.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 ? Login Wordpresss Oke jika setuju, mari kita buat Layoutnya. Berikut ini adalah hasil dari layout yang telah dibuat. Layout Login Screen Bagaimana sudah mirip belum ? Layout di atas menggunakan : 1 Panel1 PictureBox2 Label2 TextBox1 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 PictureBox Import Gambar yang telah kamu siapkan sebelumnya dengan cara pilih import Import Image Jika Gambar yang di import terlihat terlalu besar pada PictureBox, gantilah Size Mode ke Stretch Layout Login Screen Mengganti Teks pada Label Kamu dapat mengganti teks pada label melalui Tab Properties. Properties Visual Studio Kemudian Ganti warna Teks melalui ForeColor pada Appereance Properties Visual Studio 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. Tampilan Login Screen Kustomisasi desain telah selesai, bagaimana menurutmu ? Apakah masih ada yang kurang ?. Bagaimana dengan ini. Tampilan Login Screen 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. Properties Visual Studio Ganti bagian anchor dengan none, maka anchor akan hilang. Kemudian untuk membatasi ukuran window ketika di perkecil, kamu dapat mengaturnya pada properties form. Properties Visual Studio 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 Tampilan Code editor di visual strudio 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. Unduh file project

Kategori Tips and Trick

Tutorial membuat Halaman Login Sederhana WinForm C#

Jenis Border Style pada Windows Form, dan cara merubahnya

Cara Merubah Ukuran Windows Form dengan C#

Memasang Mnemonic, pada TextBox

Materi Belajar

Belajar lebih mudah dengan aplikasi Android

Apa yang baru ?