Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 5 : Menggabungkan KonversiSuhuPaneldengan AppFrame, Compile dan RUN

Setelah semuanya siap, langkah terakhir yaitu menggabungkan JPanel dengan JFrame.
Pertama saya buat package dengan nama com.ftijember.konversi.frame, Kemudian buat JFrame dengan cara klik kanan pada package com.ftijember.konversi.frame -> New -> pilih JFrame (jika tidak ada  pilih Other) -> beri nama AppFrame -> Finish

Membuat AppFrame

 
 Setelah AppFrame berhasil dibuat, langkah selanjut ada meng-compile project dengan cara Klik Kanan pada nama project Konversi Suhu -> Clean And Build -> Tunggu hingga selesai proses.

Clean and Build Project Java

Lalu Klik KonversiSuhuPanel,java -> Drag and Drop ke AppFrame seperti video berikut

Read More

Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 4 : Implementasi Fungsi Konversi Suhu pada UI

Pada tahapan ini saya akan meng-implementasi Fungsi Konversi Suhu pada UI. Langsung saja
Klik atau pindah pada halaman design UI KonversiSuhuPanen.java 
Pada JButton atau tombol konversi saya kasih aksi atau event, jika diklik tombol tersebut memberikan reaksi sebagaimana mestinya tombol diberi fungsi untuk mengkonversi nilai suhu.
Caranya Klik kanan pada tombol (yang diberi aksi) -> pilih Events -> Action -> actionPerformed.  

Add events action perfomed pada tombol konversi

Maka nantinya akan diarahkan pada tab source code dimana saya akan mengimplementasikan fungsi konversi suhu.

Tempat source code dikettikan ketika tombol di klik

Langkah pertama yaitu ambil nilai suhu awal dari inputan user yaitu JTextField_SuhuAwal.

SourceCode mengambil nilai inputan user pada JTextField

*Keterangan :

• Pada kode diatas terdapat fungsi Double.parseDouble yang berfungsi untuk mengkoversi Tipe Data String menjadi Tipe Data Double (agar dapat dihitung)
• JTextField_SuhuAwal.getText() fungsi getText() merupakan fungsi yang digunakan mengambil nilai dari inputan user pada JTextField
• JTextField_SuhuAwal.getText().toString() berfungsi untuk men-casting atau mengkonversi dari object menjadi tipe data string. fungsi memastikan bahwasanya yang akan di konversi oleh fungsi Double.parseDouble benar-benar tipe data String (Object tidak bisa).

Selanjutnya mengambil jenis suhu awal dan jenis suhu tujuan konversi.

Mengambil jenis suhu awal dan jenis suhu tujuan konversi dari JComboBox

*Keterangan :

•  Pada kode diatas terdapat fungsi getSelectedItem() yang terdapat pada JComboBox di kedua JenisSuhu. fungsi ini digunakan untuk mengambil nilai pada JComboBox yang dipilih user atau terseleksi. nilai kembalian merupakan nilai object maka dari itu butuh fungsi toString() agar menjadi tipe data String.

Terakhir buat logika konversi dari suhu awal ke tujuan suhu konversi, logika ini bisa diproses dari jenis_suhu_awal dan jenis_suhu_konversi yang didapat JComboBox_JenisSuhu...

Source Code Lengkap koversi suhu

*Keterangan :

• variable double hasil = 0.0; berfungsi sebagai penampung hasil perhitungan konversi yang didapat dari fungsi getter yang telah dibuat (pada tahap 3).
• jenis_suhu_awal.equalsIgnoreCase("Celsius"), pada bagian terdapat fungsi equalsIgnoreCase("") fungsi adalah bawaan dari java yang berguna untuk mengecek apakah nilai dari jenis_suhu_awal (String) sama dengan "Celcius"? dengan mengabaikan besar kecilnya huruf pada String tersebut.
• Logika if yang terdapat pada source diatas itu berbunyi sebagai pernyataan sebagai berikut "(1) apakah jenis suhu awal sama dengan celcius? dan (2) apakah jenis suhu konversi sama dengan Kelvin?" jika keduanya bernilai benar, maka source code yang ada pada scope ( tanda kurung kurawal {.....} ) akan dieksekusi. yang artinya menjalankan perintah membuat object atau instansi class dari KonversiCelcius dengan parameter SuhuAwal dan diberi nama koversi.
• Terakhir mengambil hasil konversi yang dimasukkan pada variable hasil => hasil = konversi.getKelvin();
• Scope Source Code else{}  akan dieksekusi jika salah satu atau kedua pernyataan diatas benilaikan salah atau false dengan menampilkan pesan bahwasanya fungsi tersebut belum tersedia
  
• JOptionPane.showMessageDialog merupakan salah satu dialog bawaan JavaSwing yang bisa digunakan sebagai message box atau menyampaikan suatu informasi kepada user.

Sampai disini selesai tahapan untuk implementasi fungsi konversi suhu.
Langkah terakhir yaitu menggabungkan JPanel dengan JFrame agar aplikasi tersebut dapat berjalan. Klik
Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 5 : Menggabungkan JPanel dengan JFrame, Compile dan RUN

Read More

Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 3 : Membuat Fungsi Konversi Suhu

Selesai Tahapan Membuat User Interface, selanjutnya pada tahap ini saya akan memaparkan cara membuat fungsi konversi suhu java yang akan di implementasikan pada user interface yang dibuat pada tahap 2.

Buat package baru dengan nama com.ftijember.konversi.rumus.suhu. Kemudian buat file java dengan nama KonversiCelcius.java. Caranya klik kanan pada package -> pilih new -> Java Class

New Java Class

Pastikan berada pada package yang ditentukan -> Finish

Dialog untuk menentukan nama dan lokasi file java yang akan dibuat

Hasil dari Java Class yang telah dibuat

Ok, sekarang tambahkan attribute celcius pada java class tersebut dengan tipe data double. seperti gambar dibawah ini.

attribute pada java class

Lalu buat konstruktor dengan parameter attribute celcius.

konstruktor

*Note : Kontruktor merupakan sebuah method atau fungsi yang namanya sama dengan nama classnya.

Sekarang buat fungsi atau method getter yang didalamnya terdatap algoritma/rumus untuk menghitung konversi suhu celcius ke suhu kelvin

Fungsi Getter Konversi Suhu Celcius menjadi Suhu Kelvin

Agar tidak terlalu panjang tulisan pada tahap ini, saya contohkan satu fungsi dulu yaitu konversi suhu dari celcius ke kelvin. *algorithma yang lain akan dibahas ditahap berikutnya atau kalian bisa berinisiatif menambahkan fungsi getter yang lain sendiri itu lebih baik utk melatih kemampuan dalam memecahkan masalah.

Langkah berikutnya yaitu meng-implementasikan algoritma diatas pada User Interface yang telah dibuat sebelumnya. Klik
Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 4 : Implementasi Fungsi Konversi Suhu pada UI

Read More

Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 2 : User Interface

Setelah Tahap 1 mengenai Persiapan Project selesai, langkah selanjutnya membuat user interface aplikasi  menggunakan java swing.

Buat package baru lagi beri nama com.ftijember.konversi.panel, package ini nantinya akan digunakan sebagai tempat yang dikhususkan untuk file.java yang berjenis panel.

Setelah package siap, buat panel baru dengan cara klik kanan pada package -> pilih new -> JPanel Form (jika tidak tersedia pilihan klik other dan cari jenis JPanel).

membuat panel pada package baru

Setelah panel tersedia, masukkan komponen  komponen java swing yang dibutuhkan. Pada aplikasi kali saya mengunakan beberapa komponen java swing diantaranya yaitu JPanel, JLabel, JTextField, JComboBox, dan JButton. Yang akan menghasilkan design UI (user interface) seperti gambar dibawah ini.

1. JPanel | 2. JLabel | 3. JTextField | 4. JComboBox | 5. JButton

Komponen – komponen tersebut sudah tersedia pada window pallete di netbeans sebelah kanan.

Palete Java Swing Pada NetBeans IDE

Silakan buat design UI dengan selera masing-masing asal masih dalam cakupan 5 komponen tadi. Agar tidak menemukan kesulitan ditahap selanjutnya.
Ok satu persatu, pertama saya buat seperti berikut.

Tampilan UI 1

Pada gambar diatas, saya tambahkan JLabel yang terletak pada kanan atas lalu klik kanan pilih edittext untuk merubah tulisan pada jlabel. Kemudian tambahkan JPanel yang diletakkan di bawah JLabel sebelumnya, sesuaikan ukuran dengan cara klik JPanel dan tarik ujung JPanel. Dan agar JPanel terlihat mempunyai baris batas atau border seperti gambar diatas, anda bisa melakukannya dengan cara klik kanan pada JPanel -> properties -> klik tombol … pada baris border -> muncul dialog dan pilih Etched Border -> OK

Properties pada JPanel | Menentukan border panel

Selanjutanya tambahkan JLabel dengan text “Suhu Awal” dan JTextField sebagai inputan user untuk suhu awal. Pada JTextField (setiap komponen) yang ditambahkan, nama defaultnya berdasarkan urutan komponen ketika ditambahkan. Agar tidak kebingunan ketika komponen digunakan maka saya ubah nama komponen tersebut. Dari JTextField1 ubah menjadi  JTextField_SuhuAwal, caranya klik kanan pada komponen yang akan diubah kemudian klik Change Variable Name, ubah nama (rename), ok. Seperti gambar dibawah ini.

Ubah variable name pada komponen JTextField

Komponen selanjutnya adalah JComboBox.
Tambahkan JComboBox, letakkan pada samping kanan JTextField_SuhuAwal, ubah nama menjadi JComboBox_JenisSuhuAwal (caranya sama dengan cara mengubah variable pada JTextField_SuhuAwal).

Tampilan UI 2

Sekarang ubah item default dari item1, item2, . . .  menjadi item suhu yang dibutuhkan, seperti Celcius, Fahrenheit, Reamur, Kelvin (jika butuh yang lain silakan tambahkan sendiri).

Caranya mudah, klik kanan pada JComboBox_JenisSuhuAwal -> pilih properties -> klik tombol … pada baris model -> muncul dialog dengan item default -> ubah dengan item suhu -> OK -> Close. Lihat gambar dibawah.

Properties JComboBox | Ubah nilai item pada jcombobox

Untuk melihat hasil design UI tidak perlu men-complie dan menjalankannya, karena pada tahap ini masih tahap design, dengan kata lain tidak ada action dari komponen. Maka cukup dengan menekan tombol icon Preview Design.

Tombol Preview Design pada NetBeans IDE

Maka akan tampil tasil dari UI yang telah dibikin tadi, seperti gambar dibawah

Preview Design UI

Setelah UI suhu awal selesai, selanjutnya membuat UI untuk suhu tujuan konversi. Caranya sama dengan sebelumnya, komponen yang dibutuhkan yaitu JLabel dan JComboBox dengan nama JComboBox_JenisSuhuKonversi.

Tambah Komponen JLabel dan JComboBox untuk suhu tujuan konversi

Nah… Sekarang tambahkan JButton pada samping kanan JComboBox_JenisSuhuKonversi, ubah text JButton1 menjadi Konversi. Tombol ini nantinya akan berfungsi untuk mengkonversi suhu dari suhu awal ke suhu koversi yang diinginkan.

Tampilan UI 3

Langkah terakhir yaitu menambahkan komponen JLabel  yang berfungi untuk menampilkan hasil dari perhitungan konversi. Agar hasil konversi terlihat lebih mudah dipahami oleh user yang akan menggunakan aplikasi nantinya, saya akan coba coba men-custom properties ( seperti ukuran font dan alignment rata tengan ) pada JLabel dan JPanel seperti gambari dibawah ini.

custom properties pada JLabel4

Jangan lupa untuk mengubah variable name JLabel4 menjadi JLabel_SuhuHasilKonversi

Ubah variable name menjadi JLabel_SuhuHasilKonversi

Dan hasil akhir dari design UI seperti dibawah ini.

Tampilan Design UI yang dihasilkan

Tahap 2 : User Interface selesai sudah.
Tahap berikutny yaitu Tahap 3 yaitu Membuat fungsi konversi suhu pada java. Klik link 
Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 2 : Membuat Fungsi Konversi Suhu

Read More

Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 1 : Project & Package

Pada tulisan kali ini saya akan mencoba membuat program atau aplikasi konversi suhu dengan menggunakan java swing, yang inshaallah akan saya tulis step by step hingga menjadi satu aplikasi seperti gambar dibawah ini.

Langsung saja.
Pertama kita bikin project java appliaction, disini saya menggunakan NetBeans sebagai IDE untuk membuat program tersebut.

1. Klik File -> New Progject
2. Pilih Java -> Java Aplication
   
3. Tuliskan nama project anda, contoh saya kasih nama project "Konversi Suhu"
4. Checkbox main class jangan dicentang (biasanya default tercentang), lebih jelasnya silahkan gambar dibawah ini.
   
5. Finish

Setelah bikin project aplikasi telah berhasil. Pertama buat package terlebih dahulu agar file java yang akan dibuat nantinya tidak campur aduk, sehingga lebih nyaman memilahnya dikala ada error terjadi.
Ok disini package saya berinama com.ftijember.konversi.

Aturan membuat nama package pada umumnya :
(domain).(nama_domain).(nama_project).

Langkah selanjutnya membuat file Main.java pada package yang telah dibuat tadi, caranya klik kanan pada package (yang akan ditambahkan) pilih New -> Java Class. jika tidak ada pada pilihan klik Other maka akan muncul dialog dengan banyak pilihan tipe.

Langkah selanjutya adalah Membuat User Interface Menggunakan JAVA SWING. Klik link

Membuat Program Konversi Suhu dengan Java Swing menggunakan NetBeans - Tahap 2 : User Interface

Read More

Cara Membuat Expand/Collapse Table Rows dengan Bootstrap dan JQuery

Catatan kali ini saya mencoba membuat tutorial sederhana mengenai row expand/collapse pada table atau biasa sering dikenal show/hide (memerperlihatkan/menyembunyikan) row detail pada html dengan menggunakan bootstrap css untuk mempercatik tampilan dan jquery yang nantinya digunakan untuk menangani event ketika header diklik. Berikut tampilan yang nantinya akan dihasilkan.

Tampilan yang dihasilkan dengan menggunakan bootstrap

Ok langsung saja
Pertama kita download dulu bootstrap di website resminya http://getbootstrap.com/getting-started/#download

 

Extract file bootstrap-3.3.7-dist.zip sudah terdownload.

Copy-kan seluruh isi folder yang ada pada folder bootstrap-3.3.7-dist pada folder latihan kita.

Contoh disini folder latihan saya beri nama expand_collapse_row_table_bootstrap.

Lalu bikin file html pada folder expand_collapse_row_table_bootstrap, saya beri nama index.html

sehingga strukturnya sekarang seperti berikut.

Lalu edit file index.html dengan code editor kesayangan anda. Saya disini menggunakan atom sebagai editor. Lalu tuliskan kode berikut pada index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar - Expand Collapse Row Table</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="col-sm-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h5>Belajar - Expand Collapse Row Table</h5> </div> <div class="panel-body"> <table class="table table-bordered"> <tr class="header expand"> <th>Taufik Urrohman <span class="sign"></span></th> </tr> <tr> <td> <table class="table table-bordered table-hover"> <thead> <tr> <th>Sekolah</th> <th>Kota/Kabupaten</th> <th>Tahun</th> </tr> </thead> <tbody> <tr> <td>SD Negeri Gumukmas 07</td> <td>Jember</td> <td>1998 - 2004</td> </tr> <tr> <td>MTs Negeri Kencong</td> <td>Jember</td> <td>2004 - 2007</td> </tr> </tbody> </table> </td> </tr> <tr class="header expand"> <th>Riki Huda Maulana <span class="sign"></span></th> </tr> <tr> <td> <table class="table table-bordered table-hover"> <thead> <tr> <th>Sekolah</th> <th>Kota/Kabupaten</th> <th>Tahun</th> </tr> </thead> <tbody> <tr> <td>MI Tembokrejo</td> <td>Jember</td> <td>1998 - 2004</td> </tr> <tr> <td>MTs Negeri Kencong</td> <td>Jember</td> <td>2004 - 2007</td> </tr> <tr> <td>SMA Negeri 2 Jember</td> <td>Jember</td> <td>2007 - 2010</td> </tr> </tbody> </table> </td> </tr> </table> </div> </div> </div> </body> </html>

Dari kode diatas maka akan menghasilkan tampilan seperti dibawah ini

Selanjutnya kita bikib style.css untuk keperluan header. Sehingga sekarang strukturnya seperti berikut.

Tuliskan kode css berikut pada pada file style.css

1 2 3 4 5 6 7 8 9 10 11 12

tr.header{ cursor:pointer; } .header .sign:after{ content:"+"; display:inline-block; } .header.expand .sign:after{ content:"-"; }

Setelah style.css sudah selesai, kemudian tambahkan kode berikut pada index.html di bagian tag head

Setelah semua selesai, maka sekarang kita buat event untuk  expand/collapse baris detail.
Dibagian ini kita membutuhkan library javascript yaitu JQuery, apa itu JQuery? baca disini : https://en.wikipedia.org/wiki/JQuery.
Sekarang kita download dulu JQuery di websitenya : https://jquery.com/download/

Setelah download berhasil, letakkan file jquery-3.1.1.min.js pada folder jquery dan buat file app.js yang letaknya sejajar (satu folder) dengan file style.css. Sehingga struktur folder sekarang seperti ini.

 pada file app.js tuliskan kode javascript dibawah ini, kode inilah yang bisa membuat detail collapse maupun expand.

1 2 3 4 5 6 7 8

$( document ).ready(function() { // Handler for .ready() called. // sebagai action ketika row diklik $('.header').click(function(){ $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); }); $('.header').click(); });

Setalah kode tersebut selesai, sekarang tinggal tambahkan 2 baris kode untuk pada file index.html untuk memanggil jquery dan app.js yang telah kita buat tadi.

*Note : Perhatikan letak/struktur code, bisa jadi akan gagal jika urutan code salah (tidak pada tempatnya).

Maka hasilnya seperti berikut. Klik Pada baris header untuk Expand/Collapse atau show/hide detail row.

Semoga bermanfaat.
File latihan tersebut bisa didownload disini

Read More

Pengertian Hibernate dan Manfaatnya

Hibernate adalah sebuah fitur Sistem Operasi (OS) pada sebua perangkat laptop atau PC yang melakukan penyimpanan kerja memori pada memori vitual atau pada Hard Disk. Hibernate memiliki cara kerja seperti Stand by mode, bedanya Hibernate tidak membutuhkan daya sama sekali karena keadaan Laptop atau PC mati/Shut Down. Sedangkan Stand by PC dalam keadaan istirahat atau tidur namun masih membutuhkan daya untuk melakukan kerjanya.

Jika kita melakukan hibernate pada PC maka semua kegiatan yang kita lakukan sebelumnya akan tersimpan, jadi ketika menghidupkan PC akan melakukan kegiatan sebelumnya, seperti buka browser dengarin musik dan mutar video sekalipun.

Fungsi Hibernate

• Fungsi hibernate tentu sudah jelas yaitu menyimpan semua kerja memori atau meyimpan semua kegiatan yang dilakukan di laptop ketika laptop dimatikan, dan akan dikembalikan seperti semula ketika sebelum dihibernate.

Manfaat Hibernate

1. Memudahkan kerja, jika kita sedang banyak melakukan aktivitas di laptop dan tidak sempat menyimpan satu-persatu maka kita bisa lakukan hibernate.
2. Menghemat Daya, Kita bisa menghemat daya laptop karena aktivitas bisa dihentikan tanpa harus menyimpan satu-persatu dan bisa dimatikan tanpa harus mengeluarkan program2 yang sedang kita buka.
3. Menghemat waktu. Kita bisa melakukan hal yang lainnya tanpa harus menyimpan dahulu semua kegiatan pada laptop.

Kerugian dan Masalah Hibernate

1. Ada bebarapa perangkat yang tidak kompitibel, sehingga bisa mengakibatkan error.
2. Komputer akan dipakasa mati, tetapi semua kegiatan PC tidak dihentikan/ditutup terlebih dahulu.

Demikian artikel tentang Pengertian Hibernate dan Manfaatnya. Walaupun artikel ini sederhana, tapi mudah-mudahan dapat bermanfaat. Terimakasih

*** klik gambar untuk memperbesar gambar ***

Selamat Mencoba & Semoga Sukses

Sumber

Read More