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

Membuat Efek Gradasi di Delphi 7 Seperti Instagram

Tekno Borneo – Saat pertama kali membuat sebuah project program aplikasi visual seperti di Delphi 7, maka secara otomatis Delphi 7 akan mengcreate sebuah form dengan nama form1. Form adalah sebuah objek kontrol penampung dari objek kontrol lain, dapat menerima tugas dan memberikan reaksi terhadap tindakan dari user (pengguna) untuk kelangsungan sebuah program aplikasi[1].
Selain itu, form sangat penting keberadaannya sebab salah satu cara komunikasi antara pengguna dengan program aplikasi adalah dengan menggunakan form itu sendiri.
Ada jenis program yang berjalan di background (belakang layar), jenis program ini tidak memerlukan form yang tampak dan pengguna untuk melakukan suatu aksi tertentu agar menghasilkan suatu output, sebab jenis program ini telah di set untuk berjalan secara otomatis dengan algoritma tertentu.
Namun sebaliknya, ada juga program yang sangat memerlukan form dan pengguna agar program dapat berjalan serta mendapatkan hasil sebagaimana mestinya.
Membuat Form Gradasi di Delphi 7 Seperti Instagram
Gambar 1. Membuat Form Gradasi di Delphi 7 Seperti Instagram

Pada saat perancangan form, pembaca akan menemukan berbagai macam model dan style suatu form. Mulai dari pilihan style form dengan adanya tombol Minimize, Maximize, Close, Sizeable form, Single form, Dialog form dan lain sebagainya. Maka dari itu style form akan berpengaruh untuk menunjukkan fungsi dan tugas dari form itu sendiri ketika form telah dijalankan. Form yang telah dijalankan akan berbentuk window (jendela kerja).
Penjelasan di atas merupakan pembukaan dari artikel pada hari ini, dengan memahami dan mengerti tujuan dari adanya form maka pembaca dapat membuat sebuah form sesuai kebutuhan, baik dalam segi jenis form, model form, ukuran form bahkan style form.
Kembali kepada tema artikel pada hari ini, penulis ingin berbagi tentang “Cara Membuat Form Gradasi Seperti di Instagram Dengan Menggunakan Delphi 7”. Adapun unsur pembuatan form yang berkenaan dengan artikel ini adalah jenis dan style form.
1. Langkah awal dalam membuat form gradasi Delphi 7 seperti Instagram
Seperti pada percobaan yang telah penulis lakukan sebelum artikel ini terbit, form yang cocok untuk dibuat gradasi adalah form yang memiliki space besar, dalam artian kata bahwa form ini tidak banyak mengandung komponen-komponen yang sifatnya mendominasi.
Adapun salah satu form yang cocok untuk dibuat gradasi adalah form login.
2. Jalankan Borland Delphi 7
Pastikan pembaca telah memiliki program Delphi 7. Buka Delphi 7 – Klik FileNew – klik Application hingga terbuka sebuah form baru.
3. Atur properties form
Klik form tersebut kemudian atur propertiesnya seperti tabel di bawah ini
Properties
Value
Caption
Login Form
+ Font
                Name
                Size
Trebuchet MS
12
Name
frmlogin
Position
poDesktopCenter
WindowState
wsMaximized
3. Pilih Events OnPaint
Klik form frmlogin – klik tab events – klik 2x pada OnPaint
Membuat Form Gradasi di Delphi 7 Seperti Instagram
Gambar 2. Membuat Form Gradasi di Delphi 7 Seperti Instagram

4. Koding program
Masukkan syntax gradasi form seperti dibawah ini
procedure Tfrmlogin.FormPaint(Sender: TObject);
var baris, y : Word;
    merah : Integer;
begin
  merah  := 200 ;
  y  := (ClientHeight + 512) div 256;
  for baris := 0 to 512 do
  begin
    with Canvas do begin
      Brush.Color := RGB(merah,0,230);
      FillRect(Rect(0, baris * y, ClientWidth, (baris + 1) * y));
      merah :=(merah-1);
    end;
  end;
end;
5. Eksekusi Program
Jalankan program dengan menekan tombol Run atau F9 pada keyboard.

6. Tambahan
Artikel ini fokus kepada pembuatan gradasi di form. Jika pembaca ingin tampilan seperti Gambar 1, maka artikel ini bukanlah artikel yang tepat. Penulis akan menshare artikel khusus untuk membuat tampilan login form di Delphi pada artikel selanjutnya.

Pembaca juga dapat membuat form gradasi yang dapat berubah-ubah warna layaknya seperti di Instagram. Untuk membuat “Membuat Efek Gradasi Instagram di Delphi 7 Dengan Warna Berubah-ubah”, maka klik link di bawah ini.

Lanjut Membaca :
1. Membuat Efek Live Gradasi di Form Delphi 7 >> (Artikel Selengkapnya di blog West Borneo Blogger)
2. Desain Program Delphiku Tidak Seklasik Desain Miliknya << Artikel Sebelumnya

(Video Belum Tersedia)

Blog Teknoborneo.com tidak menyediakan project seperti gambar di atas untuk disebarkan, namun jika pembaca ingin, maka dapat menghubungi penulis dengan kontak yang telah tertera di akhir artikel atau masuk ke dalam menu Contact.

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

Referensi :
[1] https://bagibagijawaban.blogspot.co.id/2014/12/pengertian-form-visual-basic.html

Desain Program Delphiku Tidak Seklasik Desain Miliknya

Tekno Borneo – Dewasa ini Desain Antar Muka atau Graphics User Interface (GUI) dalam pemrograman sangat diperlukan untuk menunjang produktifitas user (pengguna) dalam menggunakan aplikasi yang dibuat. Antar muka yang dimaksud adalah bagaimana pengguna dapat merasakan kemudahan dan kenyamanan saat melakukan interaksi di atas aplikasi yang dibuat, hal ini dapat disebut dengan istilah “User Experience (UX)”.
User Experience yang baik memungkinkan pengguna menjadi lebih betah, terbantu dan mendapatkan pengalaman yang baik dalam menyelesaikan pekerjaan tanpa adanya pengalihan perhatian terhadap objek yang dipandangnya.
Untuk membuat pengalaman pengguna menjadi lebih baik, diperlukan metode khusus dalam merancang tampilan aplikasi. Rancangan ini biasanya didapatkan dengan membuat Mockup Aplikasi terlebih dahulu sebelum program dibuat.
Pembuatan Mockup memerlukan aplikasi khusus seperti Balsamiq Mockups 3 dan sejenisnya.
Desainer juga dapat memanfaatkan aplikasi desain grafis seperti Photoshop, Corel, Ilustrator dan lainnya untuk merancang tampilan yang diimpikan sehingga terbentuklah sebuah GUI yang berbeda atau khas dengan gaya desainernya.
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya

Pembaca mungkin pernah mendengar istilah “Flat Design”? Suatu desain yang hadir di era Modern UI milik Microsoft Windows 10. Desain ini mulai mendominasi desain-desain produknya. Tentunya para desainer hingga kompetitor mulai melirik dan mengadopsi desain tersebut hingga menjadi tren desain akhir-akhir ini.

Baca juga : Windows 10 mendapat penghargaan desain interface terbaik

Baiklah sesuai topik yang tertera di judul artikel ini, penulis akan memperkenalkan sedikit tentang Desain Antar Muka Aplikasi khusus Program Delphi 7. Sebelum penjelasan masuk lebih dalam, ada baiknya pembaca telah memiliki program Delphi 7 agar tahu tentang tampilan default dari pemrograman hasil dari pengembangan bahasa Pascal ini.
Sedikit review tentang Delphi 7, Delphi merupakan bahasa pemrograman berbasis Windows yang menyediakan fasilitas pembuatan aplikasi visual seperti Visual Basic. Delphi memberikan kemudahan dalam menggunakan kode program, kompilasi yang cepat, penggunaan file unit ganda untuk pemrograman modular, pengembangan perangkat lunak, pola desain yang menarik serta diperkuat dengan bahasa pemrograman yang terstruktur dalam bahasa pemrograman Object Pascal. Delphi memiliki tampilan khusus yang didukung suatu lingkup kerja komponen Delphi untuk membangun suatu aplikasi dengan menggunakan Visual Component Library (VCL). Sebagian besar pengembang Delphi menuliskan dan mengkompilasi kode program dalam IDE (Integrated Development Environment).
Dengan banyaknya kelebihan yang ditawarkan seperti penjelasan di atas, ternyata ada kelemahan di sisi tampilan dasar dari program ini. Kelemahan ini bukan hal yang krusial jika programmer hanya mementingkan jalannya sistem, namun akan menjadi hal yang fatal jika programmer memiliki pola pemikiran yang berorientasi kepada pelanggannya seperti Saya (Admin Tekno Borneo).
Mari lihat seperti gambar di bawah ini, (mohon maaf) tampilan yang klasik dan membosankan akan menjadi nilai minus saat mempublish atau membagikan program kepada pelanggan.
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Bagaimana mungkin nilai jual menjadi lebih tinggi jika tampilan yang merupakan barometer penilaian pertama telah gagal didapatkan? Atau jika tidak ingin dijual, apakah tampilan yang kurang menarik ini sanggup pembaca jadikan laporan dalam Tugas Akhir atau Skripsi?
Baiklah, masuk kepada topik inti, penulis akan menunjukkan bahwa desain program Delphi yang penulis buat tidak seklasik desain-desain miliknya (Percaya Diri). Pembaca mungkin akan merasakan hal yang biasa-biasa saja saat melihat desain ini, sebab desain ini dibuat berdasarkan plagiasi berbagai model Antar Muka yang kemudian dikompilasi sehingga terbentuklah sebuah tampilan baru. Namun bukan itu tujuan sebenarnya dalam desain GUI, sebab desain antar muka bertujuan untuk memuaskan pelanggan saat menggunakan bukan saat memandang, walaupun jangan sampai image dari aplikasi yang dibangun menjadi runtuh karena tampilan yang apa adanya.
Berikut ini tiga buah model desain yang Teknoborneo buat dengan berbagai macam sumber referensi, namun mungkin belum pernah pembaca coba saat mendesain Antar Muka aplikasi di Delphi 7 :

1. Form Pembukaan atau Splash Screen ala Microsoft Office

Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Layaknya sebuah aplikasi profesional kelas atas, penulis juga mewajibkan setiap form yang dibuat harus selalu diawali dengan Form Pembukaan. Form ini menjadi tidak terlalu penting jika dibuat tanpa mencantumkan sesuatu informasi di dalamnya. Sebagai contoh gambar di atas, informasi yang termuat di form ini adalah nama atau judul aplikasi dan copyright atau hak cipta.

2. Form Login dengan desain background ala instagram.

Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Menjadi fokus utama adalah warna background yang bergradasi. Gradasi warna ini dapat berubah-ubah dengan interval waktu yang sudah ditentukan. Dengan metode infinity looping membuat perubahan gradasi tidak akan berhenti terkecuali form ini di close. Tentunya warna yang ditampilkan dapat disetting sesuai keinginan.

3. Form Menu dengan desain Metro UI ala Windows 10

Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Bukan hanya kotak sembarang kotak, namun lebih kepada tampilan yang interaktif sehingga memanjakan pengguna. Dilain sisi, penggunaan tampilan yang dinamis (bergerak-gerak dan hilang-datang) dapat membentuk ruang baru sehingga menjadikan bagian-bagian yang tampil belakangan dengan space lumayan luas dapat dimanfaatkan untuk memberikan keterangan atau informasi lain. Misalnya pada bagian kotak “Tentang Pengguna”, pada slide pertama dapat dimanfaatkan untuk menampilkan gambar user yang login, sedangkan untuk slide ke dua digunakan untuk informasi user tersebut.

4. Form Beranda dengan desain Modern UI ala Android

Desain Program Delphiku Tidak Seklasik Desain Miliknya
Desain Program Delphiku Tidak Seklasik Desain Miliknya
Pernah dapat masukan dari salah satu YouTuber konten kreatif Indonesia, desainer pemula yang ingin membuat sebuah karya sebaiknya memanfaatkan karya-karya milik orang lain untuk dijadikan referensi dalam menciptakan desain milik sendiri. Namun harus diingat, bahwasanya plagiasi yang berlebihan akan membuat image dari desain Antar Muka menjadi buruk atau di anggap membosankan. Misalnya pada desain form beranda ini, dengan mengadopsi desain dari Google Keep dan Slider Navigation Menu layaknya di Telegram Apps, menjadikan aplikasi ini seperti aplikai yang dibuat oleh brand-brand ternama (Percaya Diri). Padahal dengan sedikit kreatifitas, pembaca dapat membuat desain ini bahkan mungkin lebih bagus dari aslinya.
Itulah tiga buah contoh desain Antar Muka yang diharapkan dapat memanjakan pengguna saat menggunakan aplikasi yang dibuat. Tidak hanya memanjakan namun juga mendapatkan nilai plus dari sisi User Experience.
Artikel ini bukan bertujuan untuk menghakimi, menjudge atau mungkin memotong dan menurunkan semangat pembaca dalam berkreasi, karena balik lagi kepada hukum estetika, bahwasanya tampilan yang bagus itu bersifat relatif. Artinya ada orang yang bilang ini bagus namun ada juga yang beranggapan ini buruk. Namun yakinlah bahwasanya perkembangan teknologi selalu berbanding lurus dengan perkembangan zaman, dengan kata lain jika yang klasik telah memiliki tempat di masanya, maka kita selaku pengguna yang masih memainkan benda klasik tersebut di generasi saat ini, dapat menyulap itu menjadi hal yang luar biasa atau mungkin lebih bagus dari yang muncul di generasi sekarang.
Blog Teknoborneo.com tidak menyediakan pembaca untuk mendapatkan project seperti gambar di atas, namun penulis akan memandu pembaca yang budiman untuk membuat hal yang (relatif) sama seperti di atas dengan memposting hal-hal terkait pada artikel berikutnya.

Lanjut Membaca :
1. Desain Tampilan Form Delphi 7 Modern, Cantik, Keren dan Menarik >> (Artikel Selengkapnya di blog West Borneo Blogger)
2. Membuat Efek Gradasi di Delphi 7 Seperti Instagram >> Artikel Selanjutnya

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

Referensi :
https://id.wikipedia.org/wiki/Desain_antarmuka_pengguna
https://id.wikibooks.org/wiki/Delphi_7