membuat program bangun datar GUI part[2]

🙂😀

Daftar Materi Java

sebelumnya kita sudah membuat kelas – kelas yang dibutuhkan untuk control / logic dari program bangun datar ini, sekarang kita akan membuat GUI atau tampilannya menggunakan netbeans. mari kita buat🙂

  • membuat tampilan untuk Persegi

untuk tampilan kelas persegi ini kita buat dengan cara membuat kelas turunan dari JInternalFrame, yaitu kelas frame yang hanya bisa berada di dalam sebuah Frame. jadi seperti frame di dalam frame. untuk menampilkannya dibutuhkan sebuah kelas JDesktopPane sebagai tempat untuk menampilkannya🙂 baiklah untuk membuat JInternalFrame ini sama saja seperti membuat Frame dari turunan kelas JFrame. kita telah membuat package logic dan tampilan pada pertemuan sebelumnya. lalu pada icon package silahkan klik kanan ->new -> JInternalFrame seperti ini kira – kira

jika JInternalFrame tidak ada coba cara ini, iconpackage klik kanan -> new -> Other -> Swing GUI form -> JInternalFrame. insyaAllah bisa🙂

beri nama kelas turunan JInternalFrame itu dengan “PersegiView” lalu sesuaikan form isian lainnya dan klik Finish.setelah muncul window design silahkan desain sesuai dengan gambar berikut

sesuaikanlah baik text, nama variable dan propertinya, jika anda belum paham silahkan simak materi membuat Swing dengan Netbeans sebelumnya . pelajari dulu cara membuat desain GUI pada materi sebelumnya, jika sudah terbiasa mari kita lanjutkan. setelah membuat desainnya maka kita harus membuat tampilan ini bekerja seperti ketika tombol diklik maka akan melakukan aksi tertentu. seekarang buka source kode nya nya lalu lengkapi sehingga menjadi seperti ini


import logic.Persegi;

public class PersegiView extends javax.swing.JInternalFrame {

  Persegi control;
  /** Creates new form PersegiView */
  public PersegiView() {
    initComponents();
    control = new Persegi();
  }

kode kita belum lengkap, perbuatan kita barusan membuat kelas PersegiView memiliki variable berupa object dari kelas Persegi yaitu logicnya. kelas Persegi berfungsi untuk melakukan semua aksi perhitungan persegi. jadi antara logic dan tampilan sudah terpisah. setelah itu kita kembali lagi ke desain dan berikan event pada tombol hitung dengan cara klik kanan komponen tombol -> Events -> actions -> actionPerformed dan lengkapi kodenya menjadi seperti ini

 private void btn_hitungActionPerformed(java.awt.event.ActionEvent evt) {
    double luas=0;
    double keliling=0;
    double sisi=Double.parseDouble(tex_sisi.getText());
    control.setSisi(sisi);
    luas=control.hitungLuas();
    keliling = control.hitungKeliling();
    label_luas.setText(String.valueOf(luas));
    label_keliling.setText(String.valueOf(keliling));
  }

oke tampilan untuk Persegi sudah jadi sekarang buat tampilan selanjutnya

  • membuat GUI untuk Persegi Panjang

cara pembuatannya sama seperti membuat PersegiView, hanya saja namanya kita rubah jadi PerPanjangView. lalu lengkapilah text dan nama variable dari kelas PerPanjangView seperti gambar ini

lengkapi kodenya menjadi seperti ini

package tampilan;

import logic.PersegiPanjang;

public class PerPanjangView extends javax.swing.JInternalFrame {

  PersegiPanjang control;
  /** Creates new form PerPanjangView */
  public PerPanjangView() {
    initComponents();
    control = new PersegiPanjang();
  }

dan buat event pada tombol hitung luasnya dengan cara klik kanan komponen tombol -> Event -> Action-> ActionPerformed dan lengkapi kodenya menjadi seperti ini

 private void btn_hitungActionPerformed(java.awt.event.ActionEvent evt) {
    double luas=0;
    double keliling=0;
    double panjang=Double.parseDouble(tex_panjang.getText());
    double lebar = Double.parseDouble(tex_lebar.getText());
    control.setPanjang(panjang);
    control.setLebar(lebar);
    luas=control.hitungLuas();
    keliling = control.hitungKeliling();

    label_luas.setText(String.valueOf(luas));
    label_keliling.setText(String.valueOf(keliling));
  }

yup yup kode dan GUI untuk Persegi panjang sudah jadi sekarang buat untuk segitiga dengan nama SegitigaView. dengan cara yang sama seperti cara membuat JInternalFrame untuk persegi dan persegi panjang desainlah sesuai gambar berikut

terdapat dua tombol / button, tombol untuk menghitung luas dan untuk menghitung keliling pertama kita lengkapi dulu kodenya supaya GUI untuk segitiga ini memiliki variable berupa object dari kelas Segitiga untuk menangani semua perhitungan segituga lengkapi kodenya menjadi

package tampilan;

import logic.Segitiga;
public class SegitigaView extends javax.swing.JInternalFrame {

  Segitiga control;
  public SegitigaView() {
    initComponents();
    control = new Segitiga();
  }

okeee..🙂 kelas GUI segitiga kita sudah punya object dari kelas logicnya, sekarang berikan event pada tombol hitung luas, klik kanan komponen tombol hitung luas -> Event -> Action-> ActionPerformed dan lengkapi kodenya menjadi seperti ini

private void btn_luasActionPerformed(java.awt.event.ActionEvent evt) {
    double luas = 0;
    double alas = Double.parseDouble(tex_alas.getText());
    double tinggi = Double.parseDouble(tex_tinggi.getText());
    control.setAlas(alas);
    control.setTinggi(tinggi);
    luas = control.hitungLuas();
    label_luas.setText(String.valueOf(luas));
  }

lalu dengan cara yang sama terapkan pada tombol hitung keliling dan lengkapi kodenya menjadi seperti ini

private void btn_kelilingActionPerformed(java.awt.event.ActionEvent evt) {
    double keliling = 0;

    double sisi1 = Double.parseDouble(tex_sisi1.getText());
    double sisi2 = Double.parseDouble(tex_sisi2.getText());
    double sisi3 = Double.parseDouble(tex_sisi3.getText());
    control.setSisi1(sisi1);
    control.setSisi2(sisi2);
    control.setSisi3(sisi3);
    keliling = control.hitungKeliling();
    label_keliling.setText(String.valueOf(keliling));
  }

nahhh sudah jadi deh tampilan dan logic untuk segitiga🙂. sekarang membuat GUI untuk lingkaran

  • membuat GUI untuk Lingkaran

mudah saja, lakukan hal yang sama seperti sebelumnya dan beri nama kelasnya dengan “LingkaranView“. buatlah text , nama variable, properties seperti gambar berikut

lalu berikan kelas logicnya yaitu kelas Lingkaran kedalam kelas LingkaranView, berikut ini kodenya

package tampilan;

import logic.Lingkaran;
public class LingkaranView extends javax.swing.JInternalFrame {
  Lingkaran control;
  /** Creates new form LingkaranView */
  public LingkaranView() {
    initComponents();
    control = new Lingkaran();
  }

oke sekarang kelas lingkaran sudah siap untuk melakukan aksi perhitungan, berikanlah event pada tombol hitung dengan cara klik kanan komponen tombol hitung  -> Event -> Action-> ActionPerformed, lalu lengkapilah kodenya menjadi seperti ini

 private void btn_hitungActionPerformed(java.awt.event.ActionEvent evt) {
    double luas=0;
    double keliling=0;
    double jari=Double.parseDouble(tex_jari.getText());
    control.setJari(jari);
    luas = control.hitungLuas();
    keliling = control.hitungKeliling();
    label_luas.setText(String.valueOf(luas));
    label_keliling.setText(String.valueOf(keliling));
  }

yak!!!🙂 sudah selesai untuk tampilan berupa internal frame nya, lalu kita harus membuat GUI satu lagi yaitu GUI untuk menu utama atau frame utama. caranya sama seperti membuat kelas turunan dari JInternalFrame tapi yang kita pilih sekarang adalah JFrame form bukan JInternalFrame form

jika sudah memilih JFrame form, beri nama kelas ini dengan “Main” dan desain lah sesuai gambar berikut ini

caranya sama seperti mendesain pada pembuatan GUI sebelumnya yaitu dengan drag n drop dan melengkapi properti, text,dan nama variable sesuai dengan gambar di atas. jika anda bingung silahkan lihat cara membuat menu . setelah desain jadi, bukalah sourcecode dan berikanlah Variable berupa kelas – kelas yang akan menangani semua proses yang dibutuhkan, berikut potongan kodenya

package tampilan;

public class Main extends javax.swing.JFrame {
  LingkaranView lingkaran;
  PersegiView persegi;
  PerPanjangView pp;
  SegitigaView segitiga;
  /** Creates new form Main */
  public Main() {
    initComponents();
  }

buatlah event untuk masing – masing menu item, pertama mari berikan event pada meni item Persegi dengan klik kanan -> Events -> action ->actionperformed  dan lengkapi kodenya menjadi

private void mi_persegiActionPerformed(java.awt.event.ActionEvent evt) {
    persegi = new PersegiView();
    persegi.setVisible(true);
    desktop.add(persegi);
  }

lalu buat pula event untuk menu item persegi panjang dengan klik kanan -> Events -> action ->actionperformed dan lengkapi kodenya

private void mi_persegi_pjgActionPerformed(java.awt.event.ActionEvent evt) {
    pp = new PerPanjangView();
    pp.setVisible(true);
    desktop.add(pp);
  }

lakukan juga untuk menu item segitiga klik kanan -> Events -> action ->actionperformed dan lengkapi juga kodenya menjadi

private void mi_segitigaActionPerformed(java.awt.event.ActionEvent evt) {
    segitiga = new SegitigaView();
    segitiga.setVisible(true);
    desktop.add(segitiga);

  }

oke menu item yang terakhir jangan lupa diberi ampun.. eh  event hehe.. klik kanan -> Events -> action ->actionperformed

private void mi_lingkaranActionPerformed(java.awt.event.ActionEvent evt) {
    lingkaran = new LingkaranView();
    lingkaran.setVisible(true);
    desktop.add(lingkaran);
  }

wah sudah selesai programnya🙂 silahkan di run [Shift + F6] pada kelas Main dan lihat hasilnya🙂.  jika anda menemukan kesalahan mohon beritahu saya agar kodenya segera saya betulkan🙂 jika ada kesempatan silahkan lihat materi lainnya di daftar materi .. salam Java !!!
🙂😀

Daftar Materi Java

9 comments on “membuat program bangun datar GUI part[2]

  1. ini salah nya di mana lagi mas.. error nya pas di sini.. tpi apalagi y gmesti di edit.

    private void mi_segitigaActionPerformed(java.awt.event.ActionEvent evt) {
    segitiga = new SegitigaView();
    segitiga.setVisible(true);
    desktop.add(segitiga); <——— error nya di sini terus,, di semua bangun datar, padahal udah saya masukin.

    public class Main extends javax.swing.JFrame {
    LingkaranView lingkaran;
    PersegiView persegi;
    PerPanjangView pp;
    SegitigaView segitiga;
    /** Creates new form Main */
    public Main() {
    initComponents();
    }

    • Oke bro.. Mantap

      Belajar Java wrote:

      > a:hover { color: red; } a { text-decoration: none; color: #0088cc; } a.primaryactionlink:link, a.primaryactionlink:visited { background-color: #2585B2; color: #fff; } a.primaryactionlink:hover, a.primaryactionlink:active { background-color: #11729E !important; color: #fff !important; } /* @media only screen and (max-device-width: 480px) { .post { min-width: 700px !important; } } */ WordPress.com

silahkan ditanggapi :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s