Minggu, 14 Juli 2013

Menu Utama Aplikasi Toko

Pada sebuah Aplikasi Toko pasti diperlukan suatu tampilan menu utama dimana anda bisa memilih menu-menu yang tersedia di aplikasi kita. Nah..bagaimana cara membuatnya ? Mari ikuti langkah saya.

Dibawah ini adalah gambaran menu utama aplikasi toko saya.
Menu Utama Aplikasi Toko
Dalam setiap menu saya berikan sub menu yang berisikan secara detail isi dari setiap menu.
Sub Menu Pada Setiap Menu Aplikasi Toko

Anda pasti mempertanyakan bagaimana cara membuatnya, mari ikuti langkah berikut :
1. Pertama buatlah sebuah JFrame dengan cara klik kanan pada packages menu_utama kemudian pilih New lalu JFrame Form

2. Kemudian langkah kedua berikan satu panel dalam desain halaman anda. Menu Windows > Palette > Panel. Sesuaikan ukuran panel dengan ukuran tampilan anda. Karena nanti palette-palette yang lain akan diletakkan didalam panel kecuali pada bagian menu seperti menu bar.


3. Untuk membuat Menu user, Management barang, Pengadaan, Penjualan dan Laporan saya menggunakan Menu Bar. 


4. Jika Menu Bar sudah diletakkan kemudian anda tinggal mengeditnya saja. Ini tampilannya jika anda sukses melakukan langkah 1 hingga 3.


5. Edit menu bar anda, klik kanan menu bar anda kemudian pilih Add Menu. Lakukan langkah ini sesuai kebutuhan. Dalam contoh ada lima menu jadi anda tinggal menambahkan tiga menu lagi. Kemudian Edit text/nama menu anda dengan klik menu file kemudian tekan F2 pada keyboard.




6. Langkah berikutnya adalah menambahkan sub menu pada menu. Klik kanan salah satu menu > Add From Palette > Menu Item. Lakukan langkah ini berulang kali sesuai apa yang sudah saya contohkan diatas. Lihatlah Hasil Jadi dari Menu Utama Aplikasi Toko saya.



7. Berikutnya tinggal memberikan icon gambar pada setiap menu. Caranya yaitu klik menu yang akan anda beri icon kemudian cari Properties pada menu Windows. Jika sudah ketemu nanti cari barisan kolom yang bernama icon. Nah..disitulah tempat memberikan icon gambar agar tampilan menu anda sedikit menarik.


8. Ketika anda klik tanda yang sudah saya berikan digambar atas maka akan muncul tampilan dibawah ini. Kemudian centang External Image dan pilih gambar yang sudah anda siapkan. Misal anda akan memberika icon di menu user.


9. Pilih gambar yang akan dijadikan icon pada menu user lalu klik open jika sudah.


10. Import to Project yaitu untuk mengcopy gambar anda tadi kedalam dokumen src Netbeans anda lalu OK.


 11. Nah...inilah hasilnya. Anda perlu merapikan tampilan anda. Ratakan tengah antara icon dengan judul menu. 



12.  Klik menu user kemudian pilih Properties dan cari baris HorizontalAligment (untuk icon) dan HorizontalTextPosisition (untuk text menu bar "user"). Jangan lupa juga atur pada VerticalAligment dan VerticalTextPosisition.



13. Lihatlah hasilnya setelah kita atur posisinya. Lakukan langkah diatas untuk memberikan icon pada menu-menu yang belum diberikan icon.


Sekian dari saya untuk tampilan Menu Utama dalam Aplikasi Toko :) Selamat Mencoba !






2 komentar:

Unknown mengatakan...

Maaf Kalau atur ukurannya gimana ya? Soalnya gambar ada yg terlalu besar menu bar juga ikut besar bgt. Makasih

Unknown mengatakan...

Maaf Kalau atur ukurannya gimana ya? Soalnya gambar ada yg terlalu besar menu bar juga ikut besar bgt. Makasih

Posting Komentar