CRUD Web Service dengan Bootstrap Menggunakan Netbeans - Part 7 - Client Edit Data Mahasiswa

Implementasi CRUD Web Service (Client dan Server) dengan Bootstrap Menggunakan Netbeans

Setelah melakukan Implementasi Method Delete atau Hapus Data Mahasiswa dari Database seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 6 - Client Hapus Data Mahasiswa, maka saat ini kita sudah sampai di Part 7 atau Part Terakhir yang akan membahas tentang Bagaimana Cara Mengedit atau Mengubah Data yang ada di Database dengan Project Client

Method Update Data (Edit Data Mahasiswa) - getMahasiswa() dan editMahasiswa()

1. Selanjutnya kita akan buat tombol edit dan proses update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk edit data.
2. Sebelum membuat file edit, ubah terlebih dahulu method getMahasiswa di Project Siakad sehinga berubah menjadi berikut.

@WebMethod(operationName = "getMahasiswa")
public List getMahasiswa(
    @WebParam(name = "nim") int nim) {
    List mahasiswa = new ArrayList();
    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/siakad", "root", "");
        Statement st = conn.createStatement();
        con = kon.getCon();
        ps = con.prepareStatement("select * from mahasiswa where nim=?");
        ps.setInt(1, nim);
        ResultSet rst = ps.executeQuery();
        while (rst.next()) {
            mahasiswa.add("<div class=\"form-group\">\n" +
                " <label class=\"control-label col-sm-1\">NIM</label>\n" +
                " <div class=\"col-sm-2\">\n" +
                " <input type=\"text\" class=\"form-control\" name=\"nim\"value=\"" + rst.getInt("nim") + "\" readonly=\"true\">\n" +
                " </div>\n" +
                " </div>\n" +
                " \n" +
                " <div class=\"form-group\">\n" +
                " <label class=\"control-label col-sm-1\">Nama</label>\n" +
                " <div class=\"col-sm-2\">\n" +
                " <input type=\"text\" class=\"form-control\" name=\"nama\" value=\"" + rst.getString("nama") + "\">\n" +
                " </div>\n" +
                " </div>\n" +
                " \n" +
                " <div class=\"form-group\">\n" +
                " <label class=\"control-label col-sm-1\">Jurusan</label>\n" +
                " <div class=\"col-sm-2\">\n" +
                " <input type=\"text\" class=\"form-control\" name=\"jurusan\" value=\"" + rst.getString("jurusan") + "\">\n" +
                " </div>\n" +
                " </div>\n" +
                " \n" +
                " <div class=\"form-group\">\n" +
                " <label class=\"control-label col-sm-1\">Email</label>\n" +
                " <div class=\"col-sm-2\">\n" +
                " <input type=\"text\" class=\"form-control\" name=\"email\" value=\"" + rst.getString("email") + "\">\n" +
                " </div>\n" +
                " </div>\n" +
                " \n" +
                " <div class=\"form-group\">\n" +
                " <label class=\"control-label col-sm-1\">Alamat</label>\n" +
                " <div class=\"col-sm-2\">\n" +
                " <input type=\"text\" class=\"form-control\" name=\"alamat\"value=\"" + rst.getString("alamat") + "\">\n" +
                " </div>\n" +
                " </div>");
        }
    } catch (Exception ex) {
        System.out.println(ex.getMessage());
    }
    return mahasiswa;
}

3. Berikut adalah tampilan dari method getMahasiswa() pada file Mahasiswa.java
   
4. Selanjutnya buat file baru dengan nama edit-mhs.jsp.
5. Masukkan script di halaman edit-mhs.jsp berikut, atau dapat juga dengan drag n drop method getMahasiswa yang ada di Web Service Reference dan beri sedikit tambahan.

<%@include file="header.jsp" %>
<div class="container">
    <h3>Form Edit Mahasiswa</h3>
    <form class="form-horizontal" method="post" action="proses-edit-mhs.jsp">
        <%
   try {
    client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
    client.siakad.Mahasiswa port = service.getMahasiswaPort();
    int nim = Integer.valueOf(request.getParameter("nim"));
    java.util.List<java.lang.Object> result = port.getMahasiswa(nim);
    for (int i = 0; i < result.size(); i++) {
     out.println(result.get(i));
    }
   } catch (Exception ex) {
   }
  %>
        <button type="submit" class="btn btn-danger">Edit</button>
    </form>
</div>
<%@include file="footer.jsp" %>

6. Berikut adalah tampilan dari script file edit-mhs.jsp
   
7. Selanjutnya buat file baru dengan nama proses-edit-mhs.jsp
8. Masukkan script berikut, atau dapat juga dengan drag n drop method editMahasiswa yang ada di Web Service Reference.
   

<%-- start web service invocation --%>
<%
 try {
  client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
  client.siakad.Mahasiswa port = service.getMahasiswaPort();
  // TODO initialize WS operation arguments here
  int nim = 0;
  java.lang.String nama = "";
  java.lang.String jurusan = "";
  java.lang.String email = "";
  java.lang.String alamat = "";
  port.editMahasiswa(nim, nama, jurusan, email, alamat);
 } catch (Exception ex) {
  // TODO handle custom exceptions here
 }
%>
<%-- end web service invocation --%>

9. Lalu ubah script proses-edit-mhs.jsp sehingga tampak seperti berikut.

<%
 try {
  client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
  client.siakad.Mahasiswa port = service.getMahasiswaPort();
  int nim = Integer.valueOf(request.getParameter("nim"));
  java.lang.String nama = request.getParameter("nama");;
  java.lang.String jurusan = request.getParameter("jurusan");;
  java.lang.String email = request.getParameter("email");;
  java.lang.String alamat = request.getParameter("alamat");;
  port.editMahasiswa(nim, nama, jurusan, email, alamat);
  response.sendRedirect("index.jsp");
 } catch (Exception ex) {
 }
%>

10. Berikut adalah tampilan dari script file proses-edit-mhs.jsp.
    
11. Terakhir silahkan deploy kemudian Run Project ClientSiakad.
    Tampilan data awal :
    
    
    Pilih edit data dengan nim 101 :
    
    
    Ubah nama kemudian klik button Edit :
    
    
    Berhasil edit data dengan nim 101 :
    

Implementasi Method Delete atau Hapus Data Mahasiswa selesai. Kelima method yakni addMahasiswa, tampilMahasiswa, getMahasiswa, editMahasiswa, dan delMahasiswa berhasil diimplementasikan ke dalam suatu project Server dan Client yang memanfaatkan Web Service.

CRUD Web Service dengan Bootstrap Menggunakan Netbeans SELESAI

Jika anda berminat untuk mengunduh file lengkap dari database siakad dan project Siakad dan ClientSiakad yang sudah dipraktikkan dalam 7 sesi ini, silakan klik tombol di bawah ini

Tutorial CRUD Web Service dengan Bootstrap Menggunakan Netbeans lainnya :

Implementasi CRUD Web Service dengan Bootstrap Menggunakan Netbeans

CRUD Web Service dengan Bootstrap - Part 1 - Persiapan Awal

CRUD Web Service dengan Bootstrap - Part 2 - Method Operasi CRUD

CRUD Web Service dengan Bootstrap - Part 3 - Konfigurasi Template Bootstrap

CRUD Web Service dengan Bootstrap - Part 4 - Client Tampil Data Mahasiswa

CRUD Web Service dengan Bootstrap - Part 5 - Client Tambah Data Mahasiswa

CRUD Web Service dengan Bootstrap - Part 6 - Client Hapus Data Mahasiswa

CRUD Web Service dengan Bootstrap - Part 7 - Client Edit Data Mahasiswa