TUTORIAL MEMBUAT BACK END dan FRONT END Kelola Inventory Barang

Nama Anggota Kelompok (D3 TI 3C ) :
1. Faida Farha (1143081)
2. Lidya Handayani S (1143095)


Note : Pastikan anda sudah install NetBeans dan XAMPP
Disini saya menggunakan NetBeans IDE 8.1 dan XAMPP v 5.6

- Jalankan xampp, start apache dan mysql
- Buka phpmyadmin di browser

- Buatlah database inventaris
- Buatlah table barang, dengan attribut sebagai berikut:

- Kemudian buat project di Netbeans dengan nama InventarisApps

- Buat package Controller, Entitas, Service, TableModel, Utilities, dan View.

(klik kanan di source package -> new -> java package).       

LANGKAH MEMBUAT BACK END

- Tambahkan Library (klik kanan pada project -> properties->add library-> MySQL JDBC Driver)


- Buat class pada package utilities dengan klik kanan pada package utilities -> new -> java class kemudian isi nama class DatabaseUtilities.

- Masukan code seperti berikut di class DatabaseUtilities untuk mendaftarkan library yang sudah ditambahkan pada langkah sebelumnya.

- Pilih windows->service->database->driver->klik kanan mysql->connect using->ganti mysql jadi inventaris->finish.

- Buat class pada package entitas dengan cara klik kanan pada package entitas -> new -> java class kemudian isi nama class Barang.

- Masukan attribut yang ada di table barang ke class Barang beserta getter and setternya

- Buat class pada package service seperti langkah membuat class sebelumya dengan nama SvBarang dengan code seperti berikut:

public class SvBarang { //insert public static void insert(Barang barang){ //menggunakan Prepared Statement PreparedStatement ps = null; try{ String query = "insert into barang (kd_barang, nm_barang, satuan, harga, stok) values (?,?,?,?,?)"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setString(1, barang.getKd_barang()); ps.setString(2, barang.getNm_barang()); ps.setString(3, barang.getSatuan()); ps.setInt(4, barang.getHarga()); ps.setInt(5, barang.getStok()); ps.executeUpdate(); } catch (SQLException e) { Logger.getLogger(SvBarang.class.getName()).log(Level.SEVERE, null, e); } } //update public static void update(Barang barang){ //menggunakan Prepared Statement PreparedStatement ps = null; try{ String query = "update barang set nm_barang = ?, satuan = ?, harga = ?, stok = ? where kd_barang = ?"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setString(1, barang.getNm_barang()); ps.setString(2, barang.getSatuan()); ps.setInt(3, barang.getHarga()); ps.setInt(4, barang.getStok()); ps.setString(5, barang.getKd_barang()); ps.executeUpdate(); } catch (SQLException e) { Logger.getLogger(SvBarang.class.getName()).log(Level.SEVERE, null, e); } } //delete public static void delete(String kd_barang){ //menggunakan Prepared Statement PreparedStatement ps = null; try{ String query = "delete from barang where kd_barang = ?"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setString(1, kd_barang); ps.executeUpdate(); } catch (SQLException e) { Logger.getLogger(SvBarang.class.getName()).log(Level.SEVERE, null, e); } } //Read 1 Data public static Barang get(String kd_barang){ //menggunakan Statement dan Result Set Barang barang = new Barang(); Statement s = null; try { s = (Statement) DatabaseUtilities.getConnection().createStatement(); String query = "SELECT * FROM barang WHERE kd_barang = "+kd_barang; ResultSet rs = s.executeQuery(query); while (rs.next()){ barang.setKd_barang(rs.getString("kd_barang")); barang.setNm_barang(rs.getString("nm_barang")); barang.setSatuan(rs.getString("satuan")); barang.setHarga(rs.getInt("harga")); barang.setStok(rs.getInt("stok")); } } catch (SQLException e) { Logger.getLogger(SvBarang.class.getName()).log(Level.SEVERE,null,e); } return barang; } //Read All Data public static List <barang> getList(){ //menggunakan Statement dan Result Set List<barang> list = new ArrayList<>(); Statement s = null; try { s = (Statement) DatabaseUtilities.getConnection().createStatement(); String query = "SELECT * FROM barang"; ResultSet rs = s.executeQuery(query); while (rs.next()){ Barang barang = new Barang(); barang.setKd_barang(rs.getString("kd_barang")); barang.setNm_barang(rs.getString("nm_barang")); barang.setSatuan(rs.getString("satuan")); barang.setHarga(rs.getInt("harga")); barang.setStok(rs.getInt("stok")); list.add(barang); } } catch (SQLException e) { Logger.getLogger(SvBarang.class.getName()).log(Level.SEVERE,null,e); } return list; } }

- Selanjutnya buat class pada table model dengan nama TmBarang. Caranya sama seperti ketika membuat class DatabaseUtilities dan Barang

- Masukan code seperti dibawah. (untuk mendapat kan override anda klik icon lampu di bagian kiri lalu pilih implement all abstract methods. Lalu ganti code overridenya dengan code dibawah ini :

public class TmBarang extends AbstractTableModel{ List<barang> list = new ArrayList<barang>();{ } @Override public int getRowCount() { return list.size(); } @Override public int getColumnCount() { return 5; } @Override public Object getValueAt(int rowIndex, int columnIndex) { switch(columnIndex){ case 0 : return list.get(rowIndex).getKd_barang(); case 1 : return list.get(rowIndex).getNm_barang(); case 2 : return list.get(rowIndex).getSatuan(); case 3 : return list.get(rowIndex).getHarga(); case 4 : return list.get(rowIndex).getStok(); default : return null; } } @Override public String getColumnName(int column) { switch(column){ case 0 : return "Kd_barang"; case 1 : return "Nm_barang"; case 2 : return "Satuan"; case 3 : return "Harga"; case 4 : return "Stok"; default : return null; } } //set data ke tabel public void setList(List<barang> list){ this.list = list; fireTableDataChanged(); } }

LANGKAH MEMBUAT FRONT END
- Buat interface/design pilih view->new-> JFrame form dengan nama FBarangView.

- Buat design pada FBarangView

- Buat form dengan nama FBarangAdd, dengan design seperti berikut


- Buat form dengan nama FBarangUpdate,dengan design seperti berikut

- Tambahkan getter dan setter di bagian source pada semua form yang ada dipackage view.

- Tambahkan code seperti berikut pada pacakage InventarisApss

- Tambahkan kode berikut pada source FBarangView

 

- Buat class di controller dengan nama CtBarang, tambahkan code seperti berikut:

public class CtBarang { public static void InitView(FBarangView f) { f.getTblBarang().setModel(f.tmBarang); //untuk menset data dari database List<barang> list = SvBarang.getList(); f.tmBarang.setList(list); } public static void insert(FBarangAdd f){ Barang barang = new Barang(); barang.setKd_barang(f.getTxtKdBarang().getText()); barang.setNm_barang(f.getTxtNmBarang().getText()); barang.setSatuan(f.getTxtSatuan().getText()); int harga = Integer.valueOf(f.getTxtHarga().getText()); barang.setHarga(harga); int stok = Integer.valueOf(f.getTxtStok().getText()); barang.setStok(stok); SvBarang.insert(barang); FBarangView barangView = new FBarangView(); barangView.setVisible(true); f.dispose(); } public static void goUpdate(FBarangView f){ int x = f.getTblBarang().getSelectedRow(); if(x != -1){ FBarangUpdate fs = new FBarangUpdate(); fs.setVisible(true); f.dispose(); fs.getTxtKdBarang().setText(String.valueOf(f.tmBarang.getValueAt(x, 0))); fs.getTxtNmBarang().setText(String.valueOf(f.tmBarang.getValueAt(x, 1))); fs.getTxtSatuan().setText(String.valueOf(f.tmBarang.getValueAt(x, 2))); int harga = (Integer) f.tmBarang.getValueAt(x, 3); fs.getTxtHarga().setText(String.valueOf(harga)); int stok = (Integer) f.tmBarang.getValueAt(x, 4); fs.getTxtStok().setText(String.valueOf(stok)); } } public static void update(FBarangUpdate f){ Barang barang = new Barang(); barang.setKd_barang(f.getTxtKdBarang().getText()); barang.setNm_barang(f.getTxtNmBarang().getText()); barang.setSatuan(f.getTxtSatuan().getText()); int harga = Integer.valueOf(f.getTxtHarga().getText()); barang.setHarga(harga); int stok = Integer.valueOf(f.getTxtStok().getText()); barang.setStok(stok); SvBarang.update(barang); FBarangView fs = new FBarangView(); fs.setVisible(true); f.dispose(); } public static void delete(FBarangView f){ int x = f.getTblBarang().getSelectedRow(); if(x != -1){ String kd_barang = (String) f.tmBarang.getValueAt(x, 0); SvBarang.delete(kd_barang); List<barang> list = SvBarang.getList(); f.tmBarang.setList(list); } } }

- Jalankan program

TESTING
- Run Project coba insert update dan delete data 

TUTORIAL MEMBUAT BACK END dan FRONT END PART 2

Sebelumnya saya telah membahas tentang Cara membuat Back End dan sekarang saya akan membahas CRUD di Front End

1. Buka projek kita sebelumnya di NetBeans
2. Buka class CtSiswa di package Controller

3. Tambahkan source code berikut:
public static void insert(FSiswaAdd f){ Siswa siswa = new Siswa(); siswa.setNama(f.getTxtNama().getText()); siswa.setTelepon(f.getTxtTelepon().getText()); siswa.setKelas(f.getTxtKelas().getText()); SvSiswa.insert(siswa); FSiswaView siswaview = new FSiswaView(); siswaview.setVisible(true); f.dispose(); } public static void goUpdate(FSiswaView f){ int x = f.getTblSiswa().getSelectedRow(); if(x != -1){ FSiswaUpdate fs = new FSiswaUpdate(); fs.setVisible(true); f.dispose(); int id = (Integer) f.tmSiswa.getValueAt(x, 0); fs.getTxtId().setText(String.valueOf(id)); fs.getjTextField1().setText(String.valueOf(f.tmSiswa.getValueAt(x, 1))); fs.getjTextField2().setText(String.valueOf(f.tmSiswa.getValueAt(x, 2))); fs.getjTextField3().setText(String.valueOf(f.tmSiswa.getValueAt(x, 3))); } } public static void update(FSiswaUpdate f){ Siswa siswa = new Siswa(); int id = Integer.valueOf(f.getTxtId().getText()); siswa.setId(id); siswa.setNama(f.getjTextField1().getText()); siswa.setTelepon(f.getjTextField2().getText()); siswa.setKelas(f.getjTextField3().getText()); SvSiswa.update(siswa); FSiswaView fs = new FSiswaView(); fs.setVisible(true); f.dispose(); } public static void delete(FSiswaView f){ int x = f.getTblSiswa().getSelectedRow(); if(x != -1){ int id = (Integer) f.tmSiswa.getValueAt(x, 0); SvSiswa.delete(id); List<Siswa> list = SvSiswa.getList(); f.tmSiswa.setList(list); } }

4. Kemudian Save. Lalu buka view FSiswaView, klik dua kali pada button insert lalu tambahkan source code berikut pada btnInsertActionPerformed
Catatatan: setiap muncul tanda garis merah, CTRL+spasi pada kata yang bergaris merah untuk import.

5. Buka kembali design FSiswaView klik dua kali pada button update lalu tambahkan source code berikut berikut juga dengan button delete kemudian save

6. Lalu selanjutnya buka FSiswaAdd pada package View. klik dua kali pada button insert lalu tambahkan source code berikut kemudian save

7. Setelah itu buka FSiswaUpdate pada package View. klik dua kali pada button update lalu tambahkan source code berikut kemudain save

8. Setelah itu jalankan project coba insert, update, dan delete data.

Ketika insert maka akan tampil seperti berikut

Ketika update maka akan tampil seperti berikut

Ketika delete maka akan tampil seperti berikut

TUTORIAL MEMBUAT BACK END dan FRONT END PART 1

Note : Pastikan anda sudah install NetBeans dan XAMPP
Disini saya menggunakan NetBeans IDE 8.1 dan XAMPP v 5.6

- Jalankan xampp, start apache dan mysql
- Buka phpmyadmin di browser

- Buatlah database sekolah
- Buatlah table siswa, dengan attribut sebagai berikut:

- Kemudian buat project di Netbeans dengan nama DatabaseApps

- Buat package Controller, Entitas, Service, TableModel, Utilities, dan View.

(klik kanan di source package -> new -> java package).       

LANGKAH MEMBUAT BACK END

- Tambahkan Library (klik kanan pada project -> properties->add library-> MySQL JDBC Driver)


- Buat class pada package utilities dengan klik kanan pada package utilities -> new -> java class kemudian isi nama class DatabaseUtilities.

- Masukan code seperti berikut di class DatabaseUtilities untuk mendaftarkan library yang sudah ditambahkan pada langkah sebelumnya.


- Pilih windows->service->database->driver->klik kanan mysql->connect using->ganti mysql jadi sekolah ->finish.


- Buat class pada package entitas dengan cara klik kanan pada package entitas -> new -> java class kemudian isi nama class Siswa.

- Masukan attribut yang ada di table siswa ke class Siswa beserta getter and setternya


- Buat class pada package service seperti langkah membuat class sebelumya dengan nama SvSiswa dengan code seperti berikut:

public class SvSiswa { //insert public static void insert(Siswa siswa){ //menggunakan prepared statemnet PreparedStatement ps = null; try{ String query ="insert into siswa (nama,telepon,kelas)values(?,?,?)"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setString(1, siswa.getNama()); ps.setString(2, siswa.getTelepon()); ps.setString(3, siswa.getKelas()); ps. executeUpdate(); }catch (SQLException e){ Logger.getLogger(SvSiswa.class.getName()).log(Level.SEVERE, null, e); } } //update public static void update(Siswa siswa){ //menggunakan prepared statemnet PreparedStatement ps = null; try{ String query ="update siswa set nama = ? ,telepon =?, kelas =? where id =?"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setString(1, siswa.getNama()); ps.setString(2, siswa.getTelepon()); ps.setString(3, siswa.getKelas()); ps.setInt (4, siswa.getId()); ps. executeUpdate(); }catch (SQLException e){ Logger.getLogger(SvSiswa.class.getName()).log(Level.SEVERE, null, e); } } //delete public static void delete(int id){ //menggunakan prepared statemnet PreparedStatement ps = null; try{ String query ="delete from siswa where id=?"; ps = (PreparedStatement) DatabaseUtilities.getConnection().prepareStatement(query); //load data ps.setInt(1, id); ps. executeUpdate(); }catch (SQLException e){ Logger.getLogger(SvSiswa.class.getName()).log(Level.SEVERE, null, e); } } //read 1 data public static Siswa get(int id){ //menggunakan statement dan result set Siswa siswa = new Siswa(); Statement s= null; try{ s = (Statement) DatabaseUtilities.getConnection().createStatement(); String query = "SELECT * FROM siswa WHERE id = "+id; ResultSet rs = s.executeQuery(query); while (rs.next()){ siswa.setId(id); siswa.setNama(rs.getString("Nama")); siswa.setTelepon(rs.getString("Telepon")); siswa.setKelas(rs.getString("Kelas")); } }catch (SQLException e){ Logger.getLogger(SvSiswa.class.getName()).log(Level.SEVERE, null, e); } return siswa; } //read all data public static List<siswa> getList(){ //menggunakan statement dan result set List<siswa> List = new ArrayList<siswa>(); Statement s= null; try{ s = (Statement) DatabaseUtilities.getConnection().createStatement(); String query = "SELECT * FROM siswa"; ResultSet rs = s.executeQuery(query); while (rs.next()){ Siswa siswa = new Siswa(); siswa.setId(rs.getInt("id")); siswa.setNama(rs.getString("Nama")); siswa.setTelepon(rs.getString("Telepon")); siswa.setKelas(rs.getString("Kelas")); List.add(siswa); } }catch (SQLException e){ Logger.getLogger(SvSiswa.class.getName()).log(Level.SEVERE, null, e); } return List; } }

- Selanjutnya buat class pada table model dengan nama TmSiswa. Caranya sama seperti ketika membuat class DatabaseUtilities dan Siswa

- Masukan code seperti dibawah. (untuk mendapat kan override anda klik icon lampu di bagian kiri lalu pilih implement all abstract methods. Lalu ganti code overridenya dengan code dibawah ini :

public class TmSiswa extends AbstractTableModel{ List<siswa> list = new ArrayList<siswa>(); @Override public int getRowCount() { return list.size(); } @Override public int getColumnCount() { return 4; } @Override public Object getValueAt(int rowIndex, int columnIndex) { switch(columnIndex){ case 0 : return list.get(rowIndex).getId(); case 1 : return list.get(rowIndex).getNama(); case 2 : return list.get(rowIndex).getTelepon(); case 3 : return list.get(rowIndex).getKelas(); default: return null; } } @Override public String getColumnName(int column) { switch(column){ case 0 : return "Id"; case 1 : return "Nama"; case 2 : return "Telepon"; case 3 : return "Kelas"; default: return null; } } public void setList(List<siswa> list){ this.list = list; fireTableDataChanged(); } }

LANGKAH MEMBUAT FRONT END
- Buat interface/design pilih view->new-> JFrame form dengan nama FsiswaView.

- Buat design pada FSiswaView

- Buat form dengan nama FsiswaAdd, dengan design seperti berikut


- Buat form dengan nama FsiswaUpdate,dengan design seperti berikut


- Tambahkan getter dan setter di bagian source pada semua form yang ada dipackage view.

- Tambahkan code seperti berikut pada pacakage DatabaseApss

- Tambahkan kode berikut pada source FsiswaView

- Buat class di controller dengan nama CtSiswa,tambahkan code seperti berikut:

- Jalankan program



TESTING
Menampilkan data yag dimasukan pada database

- Masukkan data pada database sekolah melalui phpmyadmin di browser
- Kemudian jalankan project, data yang sudah ditambahkan di database tampil pada form view.



Berikut adalah tutorial yang saya buat selama praktikum mata kuliah mobile programming part 1. Fungsi insert, update dan delete belum berfungsi maka pada part 2 saya akan membahas tetang CRUD. Semoga bermanfaat.