Nafis Albab Alfasha_181011400785_Pertemuan Ke 6

Pemrograman II
Membuat Program Aplikasi Database

1. Langkah pertama yaitu memulai projek databasenya, "install terlebih dahulu aplikasi xampp" jika anda belum mempunyai aplikasi xampp anda bisa download disini https://www.apachefriends.org/index.html. Setelah selesai downloadnya silahkan anda install aplikasi xamppnya dan setelah terinstall "search aplikasi xampp dan klik aplikasi xampp control panelnya" untuk membuka xamppnya.

2. Selanjutnya "start Apache dan MySQL nya", jika sudah buka browser anda lalu "masuk ke alamat  localhost/phpmyadmin/".

3. Berikutnya jika sudah buat database baru. Caranya : "klik New" -> "lalu beri nama database nya dengan nama database_kontak dan jika sudah klik button ciptakan atau create".

4. Selanjutnya membuat table pada database_kontak yang telah dibuat sebelumnya. Caranya : "klik Structure" ->  "lalu isi textfield nama pada new table dengan data_kontak dan isi textfield number of columns dengan 5" -> "jika sudah klik button Go"

5. Berikutnya membuat isi colum field pada table data_kontak. Caranya : "isi 5 colum atau field dengan kata id_kontak, nama_kontak, no_kontak, alamat, status" -> "lalu pada 5 type data tentukan menjadi type data int, varchar, varchar, varchar, varchar" -> "serta isi 5 panjang atau ukuran type data menjadi 10, 50, 50, 100,30" -> "lalu isi index pada colum pertama sebagai primary_key" -> "jika sudah klik button save untuk menyimpan". Dan hasilnya seperti gambar dibawah ini.

6. Selanjutnya buka Aplikasi Netbeans anda, Lalu buatlah sebuah project baru. Caranya yaitu : "Pilih File" -> "New Project  (Ctrl+Shift+N)".

7. Berikutnya "Pilih Java" -> "Java Application" -> Lalu "Klik Next".

8. Selanjutnya beri nama dan tentukan sendiri lokasi penyimpanan project Netbeans yang anda buat sesuai dengan keinginan anda, disini saya menamainya dengan "Nafis Albab Alfasha_181011400785_Pertemuan6". Dengan lokasi penyimpanan di "C:\Users\Nafis\Documents\NetBeansProjects". Jika sudah "Klik Finish".

9. Berikutnya membuat package. Caranya  : "Klik kanan pada folder Source Package pada project name yang sudah anda buat" -> "Pilih New" -> "Pilih Java Package" -> Lalu beri nama  sesuai dengan keinginan anda, disini saya menamainnya dengan "aplikasi_buku_telepon". Jika sudah "Klik Finish".

10. Selanjunya membuat  JFrame Form. Caranya : "Klik kanan pada Package aplikasi_buku_telepon"-> "Pilih New" -> "Pilih JFrame From" -> Lalu beri nama  sesuai dengan keinginan anda, disini saya menamainya dengan "input_data_bukutelepon". Jika sudah "Klik Finish".

11. Berikutnya membuat desainnya. Langkah pertama yaitu : Pilih menu "Panel" lalu drag ke dalam form kosong pada desain dan perbesar ukuran panel di dalam form desainnya.

12. Selanjutnya "Klik kanan pada Label Panel di dalam form" -> "Pilih Properties" -> "Pilih Background" (Caranya klik Tanda persegi titik tiga yang telah saya bulatkan).

13. Berikutnya pilih warna background panel yang anda inginkan -> Jika sudah "Klik OK" -> "Lalu Klik Close".

14. Selanjutnya "Masukan 6 menu Label" ke dalam form design.

15. Berikutnya "Masukan 4 menu Text Field" di sebelah kanan jLabel 2 sampai dengan jLabel 5. 

16. Selanjutnya yaitu "Masukan 1 menu Combo Box" di sebelah kanan jLabel 6.

17. Berikutnya "Masukan 2 menu Button" di sebelah kanan jTextField 1. 

18. Selanjutnya "Masukan 1 menu tabel" di bawah jLabel 6 dan Combox box untuk melihat data buku telepon yang akan disimpan nanti.

19. Berikutnya jika sudah Edit Text jLabel 1, Caranya : "Klik kanan pada menu jLabel 1" -> "Lalu klik Edit Text" -> ubah menjadi "Input Data Kontak". 

20. Selanjutnya jika sudah, "Lakukan Edit Text pada jLabel 2 sampai jLabel 6 dan 4 jTextField dan 2 Button" yang ada di menu desain. Caranya sama seperti pada point nomer ke 19, sampai desainnya menjadi seperti gambar di bawah ini.

21. Berikutnya jika sudah langkah selanjutnya yaitu "Klik kanan pada Combo Box" -> "Lalu pilih Properties" -> "Pilih model" (Caranya klik Tanda persegi titik tiga yang telah saya bulatkan).

22. Selanjutnya isi seperti gambar di bawah ini -> "Lalu klik OK", kemudian "berikan nilai -1 pada properties selected index" untuk menampilkan list item tanpa nama pada design -> "Jika sudah klik Close".

23. Berikutnya ubah semua nama variabel jTextField 1 sampai dengan jTextField 4 dimulai dari jTextField 1. Caranya : "Klik kanan pada jTextField 1" -> "Pilih Change Variable Name" -> lalu ubah menjadi " Nafis_idKontak" -> Jika sudah "Klik OK".

24. Selanjutnya ubah nama variabel jTextField 2. Caranya : "Klik kanan pada jTextField 2" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_namaKontak" -> Jika sudah "Klik OK".

25. Berikutnya ubah nama variabel jTextField 3. Caranya : "Klik kanan pada jTextField 3" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_noKontak" -> Jika sudah "Klik OK".

26. Selanjutnya ubah nama variabel jTextField 4. Caranya : "Klik kanan pada jTextField 4" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_alamatKontak" -> Jika sudah "Klik OK".

27. Berikutnya ubah nama variabel Combo Box. Caranya : "Klik kanan pada Combo Box" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_statusCombobox" -> Jika sudah "Klik OK".

28. Selanjutnya ubah nama variabel Button Simpan dan Refresh, di mulai dari Button Simpan. Caranya : "Klik kanan pada Button Simpan" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_simpanBtn" -> Jika sudah "Klik OK".

29. Berikutnya ubah nama variabel Button Refresh. Caranya : "Klik kanan pada Button Refresh" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_refreshBtn" -> Jika sudah "Klik OK".

30. Selanjutnya ubah nama variabel Tabel. Caranya : "Klik kanan pada Tabel" -> "Pilih Change Variable Name" -> lalu ubah menjadi "Nafis_outputTable" -> Jika sudah "Klik OK".

31. Berikutnya masuk ke Source, untuk "memasukkan import yang dibutuhkan" seperti gambar dibawah ini.

Source code :

package aplikasi_buku_telepon;

import java.awt.Dimension;

import java.awt.Toolkit;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.Statement;

import javax.swing.JOptionPane;

import javax.swing.table.DefaultTableModel;

32. Selanjutnya "buat private konstruktor pada public class input_data_bukutelepon" seperti gambar di bawah ini.

Source code :

public class input_data_bukutelepon extends javax.swing.JFrame {

private Connection con;

private Statement stat;

private ResultSet res;

private String t;

33. Berikutnya "tambahkan source code pada public input_data_bukutelepon()" seperti gambar di bawah ini.

Source code :

public input_data_bukutelepon() {

        initComponents();

        koneksi();

        kosongkan();

        status();

        tabel();

        

        //rata kiri dan kanan

        Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();

        Dimension frameSize = getSize();

        setLocation(

        (screenSize.width - frameSize.width) /3,

        (screenSize.height - frameSize.height) /4);

    }

34. Selanjutnya "membuat private void koneksi()" seperti gambar di bawah ini.

Source code :

private void koneksi() {

    try{

        Class.forName("com.mysql.jdbc.Driver");

        con=DriverManager.getConnection("jdbc:mysql://127.0.0.1/database_kontak", "root", "");

        stat=con.createStatement();

    }catch (Exception e){

        JOptionPane.showMessageDialog(null, e);

        }

    }

35. Berikutnya "membuat private void kosongkan()" dan "tambahkan source code status combobox" seperti gambar di bawah ini.

Source code :

private void kosongkan() {

    Nafis_idKontak.setText(" ");

    Nafis_namaKontak.setText(" ");

    Nafis_noKontak.setText(" ");

    Nafis_alamatKontak.setText(" ");

    Nafis_statusCombobox.setSelectedIndex(-1); 

    }

36. Selanjutnya "buatlah isi konstruktor status" dan "tambahkan source code status combobox" seperti gambar di bawah ini.

Source code :

private void status(){

    Nafis_statusCombobox.addItem("Keluarga");

    Nafis_statusCombobox.addItem("Teman");

    Nafis_statusCombobox.addItem("Kenalan");

    Nafis_statusCombobox.addItem("Rekan Kerja");

    Nafis_statusCombobox.setSelectedIndex(-1); 

}

37. Berikutnya "buatlah isi konstruktor tabel()" seperti gambar di bawah ini.

Source code :

private void tabel(){

    DefaultTableModel t= new DefaultTableModel();

    t.addColumn("Id");

    t.addColumn("Nama");

    t.addColumn("No Kontak");

    t.addColumn("Alamat");

    t.addColumn("Status");

    Nafis_outputTable.setModel(t); try{ res=stat.executeQuery("select * from data_kontak");

    while (res.next()) {

    t.addRow(new Object[]{ res.getString("id_kontak"),

    res.getString("nama_kontak"),

    res.getString("no_kontak"),

    res.getString("alamat"),

    res.getString("status")

        });

    }

    }catch (Exception e) {

    JOptionPane.showMessageDialog(rootPane, e);

        }

    }

38. Selanjutnya kembali ke menu desain untuk mengaktifkan dan memasukkan source code perintah pada Button Simpan. Caranya : "Klik kanan pada Button Simpan" -> "Pilih Events" -> "Action" -> "actionPerformed".

39. Berikutnya jika sudah "masukan source code perintah pada Button Simpan" dan "tambahkan source code status combobox" seperti gambar di bawah ini.

Source code :

private void Nafis_simpanBtnActionPerformed(java.awt.event.ActionEvent evt) {                                  

// TODO add your handling code here:

        try{

            stat.executeUpdate("insert into data_kontak values ("

                    + "'" + Nafis_idKontak.getText()+"',"

                    + "'" + Nafis_namaKontak.getText()+"',"

                    + "'" + Nafis_noKontak.getText()+"',"

                    + "'" + Nafis_alamatKontak.getText()+ "',"

                    + "'" + Nafis_statusCombobox.getSelectedItem()+ "')");

            kosongkan();

            JOptionPane.showMessageDialog(null,"Berhasil Menyimpan Data");

        }catch(Exception e){

            JOptionPane.showMessageDialog(null, "Perintah Salah : "+e);

        }

40. Selanjutnya kembali ke menu desain untuk mangaktifkan dan memasukkan source code perintah pada Text Field 1. Caranya : "Klik kanan pada Text Field 1" -> "Pilih Events" -> "Action" -> "actionPerformed".

41. Berikutnya jika sudah "masukan source code perintah pada Text Field 1" dan "tambahkan source code status combobox" seperti gambar di bawah ini.

Source code :

private void Nafis_idKontakActionPerformed(java.awt.event.ActionEvent evt) {                                     

// TODO add your handling code here:

        try {

            res=stat.executeQuery("select * from data_Kontak where "+                          "id_Kontak='"+Nafis_idKontak.getText()

                    +"'" ); while (res.next()){ 

                        Nafis_namaKontak.setText(res.getString("nama_kontak"));

                        Nafis_noKontak.setText(res.getString("no_kontak"));

                        Nafis_alamatKontak.setText(res.getString("alamat"));

                        Nafis_statusCombobox.setSelectedItem(res.getString("status"));

                    }

        }catch (Exception e) {

            JOptionPane.showMessageDialog(rootPane, e);

        }

    }                        

42. Selanjutnya kembali ke menu desain, "lalu import mysql connector pada libraries". Caranya : "klik kanan pada libraries" -> "pilih Add JAR/Folder" -> "pilih mysql connector" -> "pilih relative path" -> "Jika sudah klik Open".

43. Berikutnya jika sudah maka "hasilnya" seperti gambar dibawah ini.

44. Selanjutnya yaitu "mengaktifkan dan memasukkan source code perintah pada Button Refresh". Caranya : "Klik kanan pada Button Refresh" -> "Pilih Events" -> "Action" -> "actionPerformed".

45. Berikutnya jika sudah "masukan source code perintah pada Button Refresh" seperti gambar di bawah ini.

Source code :

private void Nafis_refreshBtnActionPerformed(java.awt.event.ActionEvent evt) {                                            

        // TODO add your handling code here:

        DefaultTableModel model = (DefaultTableModel)Nafis_outputTable.getModel();

        model.setRowCount(0);

        tabel();

    }            

46. Selanjutnya adalah mengecek Hasil Run dari Program Aplikasi Database. Caranya : "Klik kanan pada input_data_bukutelepon.java" -> "Lalu pilih Run File (Shift+F6)" Hasil tampilan GUInya seperti gambar dibawah ini.

47. Berikutnya yaitu melakukan percobaan "Program Aplikasi Database untuk menyimpan data kontak". Sesuai dengan list status pada combobox yaitu list status Keluarga, Teman, Kenalan, Rekan Kerja. Dimulai dari list status Keluarga seperti gambar dibawah ini. 

48. Selanjutnya setelah muncul notifikasi berhasil menyimpan data, maka akan secara otomatis "data akan tersimpan di database_kontak pada tabel data_kontak". Setelah itu untuk menampilkan data kontak yang telah dibuat sebelumnya tekan tombol button Refresh pada tampilan GUI Program Aplikasi Database seperti gambar di bawah ini.

49. Berikutnya yaitu "menambahkan data kontak dengan list status Teman, Kenalan dan Rekan Kerja" caranya sama seperti pada point nomer 47-48 sehingga hasil akhirnya akan seperti gambar di bawah ini.

Share this post