Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"

Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana" - Membuat Form Login dengan Desain Modern di Delphi 7 adalah artikel yang membahas tentang pembuatan form login yang dikhususkan pada langkah-langkah dalam mendesainnya. Adapun berbagai aspek yang perlu diperhatikan saat membuat form ini bukanlah tentang penggunaan komponen-komponen yang bersifat tambahan atau mendownload skin tambahan, namun melainkan tentang bagimana pembaca memanfaatkan berbagai komponen-komponen dasar yang telah disediakan oleh Delphi 7 itu sendiri sebagai objek antar muka dalam form login ini.
Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"Berfokus pada tampilan antar muka form login, berarti pembaca diarahkan untuk berimajinasi keras tentang objek apa yang akan disuguhkan kepada pengguna program saat program tersebut dijalankan untuk pertama kalinya. Disisi lain penggunaan warna yang harus harmoni terhadap tema maupun isi dari program tersebut, membuat pembaca harus melakukan eksperimen beberapa kali guna untuk mendapatkan citra warna terbaik untuk diaplikasikan kepada antar muka form login ini.
Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"
Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"

Bagaimana dengan pembaca yang tidak memiliki jiwa desainer? Apakah tetap bisa membuat form login seperti halnya gambar thumbnail pada artikel ini?
Nah, sebenarnya artikel ini ditulis bukan sekedar tulisan belaka yang hanya memberikan penjelasan tanpa praktik percobaan. Penulis akan memandu dan membantu pembaca agar dapat membuat form login sebagaimana gambar dari thumbnail artikel ini, walaupun pada praktiknya nanti kemungkinan tidak 100% persis.

Baiklah, adapun Langkah-Langkah Yang Perlu Dilakukan Untuk Membuat Form Login Dengan Desain Modern Di Delphi 7 Antara Lain Sebagai Berikut

Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"
Gambar 1 - Desain interface login

Cara menambahkan maupun setting project dan form :
  1. Buka Borland Delphi 7, kemudian buat project baru dengan nama “prjdesain_login”.
  2. Tambahkan sebuah form (form1) kemudian atur properties form1 tersebut seperti tabel di bawah ini.
    Properties
    Value
    Caption
    Form Login
    Color
    $00FF3C9D
    + Font
         Name
         Size

    Trebuchet MS
    12
    Heigh
    537
    Name
    Frmform_login
    Width
    1062
    WindowsState
    wsNormal

Komponen yang dibutuhkan untuk membuat objek antar muka form login antara lain sebagai berikut : (Urutan nomor tutorial di bawah ini sama dengan urutan nomor yang terdapat di gambar 1)
  1. Tambahkan sebuah Panel, caranya klik tab Standard pada Component Palette – Klik Panel – Atur Propertiesnya seperti dibawah ini :
    Properties
    Value
    BevelOuter
    bvNone
    Color
    clWhite
    Heigh
    345
    Left
    372
    Name
    pnlbg_login
    Top
    80
    Width
    313
    Catatan : Panel ini dijadikan sebagai wadah untuk menempatkan komponen-komponen selanjutnya.
  2. Tambahkan label kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik label – Atur Propertiesnya seperti dibawah ini : 
    Properties
    Value
    Alignment
    taCenter
    AutoSize
    False
    Caption
    Sistem Terproteksi
    Color
    $00800040
    Heigh
    62
    Layout
    tlCenter
    Left
    0
    Name
    lblket
    Top
    0
    Transparent
    False
    Width
    313
  3. Tambahkan label lagi kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik label – Atur Propertiesnya seperti dibawah ini : 
    Properties
    Value
    Alignment
    taCenter
    AutoSize
    False
    Caption
    ~
    Color
    clSilver
    + Font
         Name
         Size

    Webdings
    48
    Heigh
    97
    Layout
    tlCenter
    Left
    104
    Name
    lbllogo_login
    Top
    80
    Transparent
    False
    Width
    105
  4. Tambahkan Edit kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik Edit – Atur Propertiesnya seperti dibawah ini : 
    Properties
    Value
    Ctl3D
    False
    + Font
         Name
         Size

    Trebuchet MS
    16
    Heigh
    33
    Hint
    Nama Pengguna
    Left
    8
    Name
    txtusername
    ShowHint
    True
    TabOrder
    0
    Top
    192
    Width
    297
  5. Tambahkan Edit lagi kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik Edit – Atur Propertiesnya seperti dibawah ini :
    Properties
    Value
    Ctl3D
    False
    + Font
         Name
         Size

    Trebuchet MS
    16
    Heigh
    33
    Hint
    Kata Sandi
    Left
    8
    Name
    txtpassword
    ShowHint
    True
    TabOrder
    1
    Top
    231
    Width
    265
  6. Tambahkan label lagi kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik label – Atur Propertiesnya seperti dibawah ini : 
    Properties
    Value
    Alignment
    taCenter
    AutoSize
    False
    Caption
    l
    Color
    $00800040
    Cursor
    crHandPoint
    + Font
         Color
         Name
         Size

    clWhite
    Wingdings
    14
    Heigh
    33
    Hint
    Tampilkan Kata Sandi
    Layout
    tlCenter
    Left
    272
    Name
    cmdshow_password
    Top
    231
    Transparent
    False
    Width
    33
  7. Tambahkan Panel kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik Panel – Atur Propertiesnya seperti dibawah ini :
    Properties
    Value
    BevelOuter
    bvNone
    Caption
    Masuk
    Color
    $00800040
    Ctl3D
    True
    Cursor
    crHandPoint
    + Font
         Color
         Name
         Size

    clWhite
    MS Serif
    12
    Heigh
    34
    Left
    8
    Name
    cmdlogin
    Top
    270
    Width
    297
  8. Tambahkan label lagi kedalam Panel, caranya klik tab Standard pada Componen Palette – Klik label – Atur Propertiesnya seperti dibawah ini : 
    Properties
    Value
    Alignment
    taCenter
    AutoSize
    False
    Caption
    Bersihkan
    Color
    clWhite
    Cursor
    crHandPoint
    + Font
         Color
         Name
         Size

    clBlue
    MS Sans Serif
    12
    Heigh
    20
    Left
    8
    Name
    cmdclear
    Top
    313
    Transparent
    False
    Width
    297
  9. Jalankan program dengan menekan tombol Run atau tekan tombol F9.

Follow blog ini jika ingin mendapatkan informasi seputar dunia teknologi. Tetap Ikhtiar, Tawakal dan Berdoa agar #KamekJadiHero.

My Contact :
Facebook : Rangga Saputra
Fanspage : Teknoborneocom
Instagram : @teknoborneo
HP/WA/Telegram : +628 988282 108

Related Posts

Membuat Form Login dengan Desain Modern di Delphi 7 "Sederhana"
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

11 komentar

Tulis komentar
avatar
Anonymous
September 4, 2017 at 2:37 PM

Ditunggu update selanjutnya mas

Reply
avatar
September 5, 2017 at 9:09 AM

wah anda yang sering komen yah? makasih yah gan :D

Reply
avatar
Anonymous
September 7, 2017 at 1:33 PM

Pengunjung setia gan http://twemoji.maxcdn.com/36x36/1f603.png

Reply
avatar
Anonymous
September 7, 2017 at 1:38 PM

pokoknya https://t4.ftcdn.net/jpg/01/36/90/69/240_F_136906975_ESmzLfx9o4U5RqCFFeo8zSlFNwxV9xxD.jpg terus gan ditunggu http://s41.radikal.ru/i093/1608/dd/bec9c13e46bd.png selanjutnya gan

Reply
avatar
Anonymous
September 9, 2017 at 10:12 AM

Gan itu logo usernya didapat dari mana gan https://4.bp.blogspot.com/-ibntnRTwoFk/WYFKtOAuYCI/AAAAAAAAAGM/N1HR3wru_1ENMiXVcXJZZGdGN5QL3bmlACPcBGAYYCw/w530-h265-p/Desain%2BProgram%2BDelphiku%2BTidak%2BSeklasik%2BDesain%2BMiliknya%2B3.jpg

Reply
avatar
September 25, 2017 at 1:37 PM

Hahahha... sorry gan, lg sibuk kuliah. jd ndk update

Reply
avatar
September 25, 2017 at 1:39 PM

itu ane buat sendiri gan...
gan kalo mau tanya" yg fast respon, bisa lewat WA 08988282108

Reply
avatar
Anonymous
October 25, 2017 at 6:10 AM

Ga dilanjut lagi mas

Reply
avatar
October 25, 2017 at 3:52 PM

Wah ada yg terus mantengin yah... makasih ya..
saya sibuk kuliah,, kmren ngurus AdSense jd agak telat...

Reply
avatar
Anonymous
October 26, 2017 at 6:49 AM

ok mas ditunggu update lanjutan mas

Reply
avatar
November 22, 2017 at 8:13 PM

Sudah gan :) Saya buatnya pke Part-part. Semoga lebih mudah belajarnya

Reply

Silahkan Tinggalkan Kritik dan Saran yang membangun dari Anda
1. Berkomentarlah yang baik dan sopan
2. Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
3. Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
4. Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>