idcsLogo
idcsLogo2
idcsLogo2
  • Home
  • E-Learning
    • Visual Studio C#
    • C# Dasar
    • Windows Form C#
    • Golang
    • SQL Server
  • Tips and Trick
    • Console
    • Windows Form
  • Submit Artikel
  • Laporkan Masalah

Tutorial membuat Halaman Login Sederhana WinForm C#

Home » Tutorial membuat Halaman Login Sederhana WinForm C#
  • Daftar Materi

    • Apakah itu Windows Form ?
    • Apakah itu Visual Studio ?
    • Tampilan WinForm VS 2019
  • –

    • Apa itu Form ?
    • Apa itu WinForm Control ?
    • Control Properties
    • Membuat Aplikasi WinForm
    • Toolbar WinForm
    • Mnemonic
  • –

    • Docking dan Anchor
    • Container Control
    • Flow Layout
    • GroupBox
    • Panel
    • Split Container
    • TabControl
    • TableLayoutPanel
  • –

    • Apa itu Event ?
    • Apa itu Event Handler ?
    • Event Order
  • –

    • Mengenal GDI+
    • Menggambar Vektor
    • Cardinal Spline
    • Bezier Spline 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 ?

    Tutorial membuat Halaman Login
    Login WordPresss

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

    Tutorial membuat Halaman Login
    Layout Login Screen

    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

    Tutorial membuat Halaman Login
    PictureBox

    Import Gambar yang telah kamu siapkan sebelumnya dengan cara pilih import

    Tutorial membuat Halaman Login
    Import Image

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

    Tutorial membuat Halaman Login
    Layout Login Screen

    Mengganti Teks pada Label

    Kamu dapat mengganti teks pada label melalui Tab Properties.

    Tutorial membuat Halaman Login
    Properties Visual Studio

    Kemudian Ganti warna Teks melalui ForeColor pada Appereance

    Tutorial membuat Halaman Login
    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.

    Tutorial membuat Halaman Login
    Tampilan Login Screen

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

    Tutorial membuat Halaman Login
    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.

    Tutorial membuat Halaman Login
    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.

    Tutorial membuat Halaman Login
    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

    Tutorial membuat Halaman Login Tampilan Code editor di visual strudio
    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
    Angga Adji Surya
    39
    Tips and Trick, Windows Form
    Prev PostPartial Class pada C#, Apakah Fungsinya?Partial Class pada C#, Apakah Fungsinya?Jan 06, 2020
    Next PostMengenal Bahasa Pemrograman GolangOkt 04, 2020mengenal bahasa pemrograman golang IDCSharp
    idcsLogo
    IDCSharp menyediakan materi - materi bahasa pemrograman komputer dan informasi seputar dunia IT untuk kamu. Mari kita belajar membuat aplikasi bersama
    • Implementasi Media Video dan Audio pada HTML5 Part 2
    • Memahami 3 Jenis Api Model pada HTML5
    • Memahami 3 Api Model pada HTML5 Part 2
    • Memahami 3 Api Model pada HTML5 Part 3
    • Memahami 3 Api Model pada HTML5 Part 4
    • Home
    • E-Learning
      • Visual Studio C#
      • C# Dasar
      • Windows Form C#
      • Golang
      • SQL Server
    • Tips and Trick
      • Console
      • Windows Form
    • Submit Artikel
    • Laporkan Masalah
    Copyright © 2021 IDCSharp. All Rights Reserved