Template

Selasa, 12 Agustus 2014

Membuat Menu Navigasi dengan DevExpress

Jika kita berbicara masalah tampilan aplikasi saya kira hal itu tidak akan ada habisnya mengingat teknologi yang terus berkembang dari masa ke masa. Ambil saja contoh Handphone yang dulunya hanya berwarna hitam putih dan hanya bisa untuk SMS dan Telpon Saat ini tampilan bahkan kemampuan dari sebuah handphone hampir menyerupai komputer.

Berkaitan dengan hal diatas, Saya sendiri menyadari bahwa Urusan Desain Tampilan memang hal yang paling utama untuk kenyamanan End User. Berangkat dari hal itu kali ini saya mau sharing tentang cara membuat Menu Navigasi di Delphi dengan memanfaatkan salah satu component delphi yaitu Dev Express. Sobat Tahu kan menu Navigasi itu seperti apa ? contoh hasil akhir yang kita inginkan adalah seperti di bawah ini

Membuat Menu Navigasi dengan DevExpress

Cara membuatnya silahkan ikuti step-step berikut :

1. Silahkan Download dan Install component  DevExpress untuk delphi tujuh. Link Download ada pada postingan sebelumnya yang membahas cara membuat menu Office 2010 pada Delphi

2. Selesai install, silahkan buka Delphi Sobat

3. Masuk ke Pallete Win32 Tambahkan Komponen ImageList ke Form Sobat

4. Klik 2 kali Komponen ImageList kemudian Add (tambahkan 9 Icon ekstensi *.bmp atau *.ico) -> Apply -> OK
Membuat Menu Navigasi dengan DevExpress

5. Masuk Ke Pallete Dev Express kemudian tambahkan komponen dxNavbar ke Form Sobat. atur property sebagai berikut :
Align = alLeft
OptionImage -> SmallImage = ImageList

Membuat Menu Navigasi dengan DevExpress


6. Klik Dua kali komponen dxNavbar pada Form Sobat. Klik menu groups dan tambahkan 3 group. atur masing-masing property grup Sebagai berikut :
Caption = Terserah sobat
SmallImageIndex = Urutan gambar yang ada di ImageList / step 4 (di mulai dari 0). pilih salah satu misal 1

Membuat Menu Navigasi dengan DevExpress

7. Masih pada Pengaturan dxNavbar, Klik menu Items dan tambahkan 6 Item. atur property masing-masing Item sebagai berikut :
Caption = Terserah Sobat
SmallImageIndex = Urutan gambar yang ada di ImageList / step 4 (di mulai dari 0). pilih salah satu misal 3

Membuat Menu Navigasi dengan DevExpress

8. Masih pada Pengaturan dxNavbar, Klik menu Link Designer. Tambahkan Item 1 dan 2 ke Group 1, Item 3 dan 4 ke Group 2 dan Items 5 dan 6 ke Group 3 Caranya klik 1 kali pada salah satu group dan klik 1 kali pada item yang mau ditambahkan pada group tersebut kemudian klik button (+) atau bisa juga dengan drag and drop
Membuat Menu Navigasi dengan DevExpress

9. Klik menu View kemudian Pilih Skin Menu Navigasi Sesuka Sobat.

Membuat Menu Navigasi dengan DevExpress

10. Sampai disini, kita sudah berhasil membuat menu navigasi. akhir kata selamat mencoba :)

Membuat Menu Navigasi dengan DevExpress

Koneksi Database MySQL dengan ZEOS

Seperti sudah dijelaskan pada postingan sebelumnya, ZEOSLib merupakan connector database. seperti halnya ODBC, ZEOSLib juga memfasilitasi untuk melakukan koneksi ke Database MySql. rasanya kurang greget kalau kita hanya tahu teorinya saja tanpa ada implementasi untuk menggunakannya. untuk itu mari kita coba menggunakan connector ini untuk mengkoneksikan database MySQL kita ke Delphi. caranya mudah, ikuti langkah berikut :

1. Silahkan Download dan Install komponen ZEOSnya dulu. Disini
silahkan baca postingan sebelumnya tentang cara menginstal komponen di delphi

2. Buat sebuah database dengan minimal 1 tabel

3. Jalankan Delphi anda

4. Masuk ke Pallete Zeos Access dan tambahkan komponen ZConnection dan ZQuery ke Form anda
untuk property ZConnection silahkan ganti seperti berikut :
1User = User MySQL anda (root)
2Password = Password MySQL anda
3Protokol = MySQL
4Port = 3306
5Library Location = C:\xampp\mysql\lib\libmysql.dll (Jika anda menggunakan xampp)
6Hostname = localhost
7Database = Nama Database Anda
8Connected = True
5. Masuk ke Pallete Data Access dan tambahkan komponen Datasource
6. Masuk ke Pallete Data Control dan tambahkan komponen DBGRID

7. Atur Property ZQuery seperti berikut
1Connection = ZConnection
2SQL = select * from nama_tabel_di_database_anda
3Active = True
8. Atur Property Datasource (Dataset = ZQuery)
9. Atur Property DBGrid (Datasource = Datasource1)

Hasil Akhir saya seperti ini :

Koneksi Database MySQL dengan ZEOS