IT-Magz

Senin, 14 Januari 2019

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()

Selanjutnya kita akan buat tombol edit dan proses update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk edit data.
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;
}

Berikut adalah tampilan dari method getMahasiswa() pada file Mahasiswa.java
Selanjutnya buat file baru dengan nama edit-mhs.jsp.
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" %>

Berikut adalah tampilan dari script file edit-mhs.jsp
Selanjutnya buat file baru dengan nama proses-edit-mhs.jsp
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 --%>

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) {
 }
%>

Berikut adalah tampilan dari script file proses-edit-mhs.jsp.
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

Java KULIAH Netbeans TUGAS

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

Dafia Risma R 21.00.00 Comment

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

Setelah melakukan Implementasi Method Create atau Menambahkan Data Mahasiswa ke Database seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 5 - Client Tambah Data Mahasiswa, maka saat ini kita sudah sampai di Part 6 yang akan membahas tentang Bagaimana Cara Menghapus Data dari Database di Project Client

Method Delete Data (Hapus Data Mahasiswa) - delMahasiswa()

Langkah selanjutnya membuat tampilan Edit dan Delete. Dalam hal ini, edit dan delete dibuat dalam satu script menjadi satu table.
Masuk pada project server Siakad, lalu masuk class Mahasiswa.java lalu tambahkan script Method tampilMahasiswa hingga seperti berikut ini.

@WebMethod(operationName = "tampilMahasiswa")
public List tampilMahasiswa() {
    List daftar = new ArrayList();
    String sql_daftar = "select * from mahasiswa";
  try {
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/siakad", "root", "");
   Statement stmt = con.createStatement();
   ResultSet rs = stmt.executeQuery(sql_daftar);
   while (rs.next()) {
    daftar.add("<td>" + rs.getInt("nim") + "</td><td>" + rs.getString("nama") + "</td><td>" + rs.getString("jurusan") + "</td><td>" + rs.getString("email") + "</td><td>" + rs.getString("alamat") + "</td><td><button class=\"btn-info\"><a href=\"edit-mhs.jsp?nim=" + rs.getString("nim") + "\">Edit</a></button><br><button class=\"btn-danger\"><a href=\"hapus-mhs.jsp?nim=" + rs.getString("nim") + "\">Hapus</a></button></td><tr></tr>");
   }
   con.close();
  } catch (Exception ex) {
   System.out.println(ex.getMessage());
  }
 return daftar;
}

Berikut adalah tampilan setelah method tampilMahasiswa diubah.
Untuk membuat proses hapus, silahkan buat 1 buah file dengan nama hapus-mhs.jsp.
Lalu drag operator delMahasiswa dari Web Service Reference ke dalam file hapus-mhs.jsp.
Tetapi, ubahlah script hingga menjadi berikut ini :
Script awal :

<%-- 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;
  port.delMahasiswa(nim);
 } catch (Exception ex) {
  // TODO handle custom exceptions here
 }
%>
<%-- end web service invocation --%>

Ubah sedikit parameter int nim = 0, karena fungsi ini akan digunakan untuk menerima POST berupa hapus mahasiswa berdasarkan nim, sehingga script hapus-mhs.jsp berubah menjadi berikut.

<%-- 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 = Integer.valueOf(request.getParameter("nim"));
  response.sendRedirect("index.jsp");
  port.delMahasiswa(nim);
    } catch (Exception ex) {
  // TODO handle custom exceptions here
    }
    %>
<%-- end web service invocation --%>

Silahkan deploy kemudian tes untuk hapus data.
Tampilan data awal :

Tampilan setelah menghapus data dengan NIM 102 :

Implementasi Method Delete atau Hapus Data Mahasiswa selesai. Selanjutnya pada Part 7 akan membahas tentang bagaimana Cara Mengubah Data Mahasiswa pada Project Client Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Java KULIAH Netbeans TUGAS

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

Dafia Risma R 18.01.00 Comment

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

Setelah melakukan Implementasi Method Read atau Menampilkan Data Mahasiswa dari Database seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 4 - Client Tampil Data Mahasiswa, maka saat ini kita sudah sampai di Part 5 yang akan membahas tentang Bagaimana Cara Menambahkan Data Mahasiswa ke Database di Project Client

Method Add Data (Tambah Data Mahasiswa) - addMahasiswa

Selanjutnya, untuk membuat agar dapat input data lewat client dengan klik Tambah Mahasiswa, maka perlu dibuat file baru dengan nama tambah-mhs.jsp. File ini akan berisikan script form untuk tambah data.
Masukkan script berikut ke dalam file tambah-mhs.jsp

<%@include file="header.jsp" %>
<div class="container">
    <h3>Form Tambah Mahasiswa</h3>
    <form class="form-horizontal" method="post" action="proses-tambah-mhs.jsp">
        <div class="form-group">
            <label class="control-label col-sm-1">NIM</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="nim">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">Nama</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="nama">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">Jurusan</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="jurusan">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">Email</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="email">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-1">Alamat</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="alamat">
            </div>
        </div>
        <button type="submit" class="btn btn-danger">Simpan</button>
    </form>
</div>
<%@include file="footer.jsp" %>

Berikut adalah tampilan dari file tambah-mhs.jsp saat dijalankan di browser.
Agar data yang diinputkan bisa tersimpan ke dalam database, maka buat file lagi dengan nama proses-tambah-mhs.jsp.
Tambahkan script berikut ini ke dalam file proses-tambah-mhs.jsp. Atau dapat juga dengan melakukan drag n drop method addMahasiswa pada Web Service Reference ke dalam file.

<%-- 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.addMahasiswa(nim, nama, jurusan, email, alamat);
 } catch (Exception ex) {
  // TODO handle custom exceptions here
 }
%>
<%-- end web service invocation --%>

Ubahlah sedikit script sehingga dapat menerima POST dari tambah-mhs.jsp dengan menambahkan script berikut :

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.addMahasiswa(nim, nama, jurusan, email, alamat);
response.sendRedirect("index.jsp");

Berikut tampilan script lengkapnya :
Silahkan deploy kemudian run project ClientSiakad.
Berikut adalah tampilan form tambah-mhs.jsp yang diisi dengan data baru.
Klik pada button Simpan, maka akan berpindah ke file index.jsp yang menampilkan data baru.

Implementasi Method Create atau Tambah Data Mahasiswa selesai. Selanjutnya pada Part 6 akan membahas tentang bagaimana Cara Menghapus Data Mahasiswa dari Database pada Project Client Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Java KULIAH Netbeans TUGAS

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

Dafia Risma R 17.35.00 Comment

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

Setelah melakukan Konfigurasi Template Bootstrap untuk Project Client seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 3 - Konfigurasi Template Bootstrap, maka saat ini kita sudah sampai di Part 4 yang akan membahas tentang Bagaimana Cara Menampilkan Data Mahasiswa yang ada di Database menjadi sebuah tabel html di Project Client

Method Read Data (Tampil Data Mahasiswa) - tampilMahasiswa()

Untuk membuat tampil table maka ubah atau tambahkan script index.jsp menjadi berikut :

<%@include file="header.jsp" %>
<h1>Halaman Mahasiswa</h1>
<table class="table">
    <thead>
        <tr>
            <th>NIM</th>
            <th>Nama</th>
            <th>Jurusan</th>
            <th>Email</th>
            <th>Alamat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>
<%@include file="footer.jsp" %>

Deploy kemudian run project kembali, maka akan tampil seperti gambar berikut ini.
Untuk membuat tombol tambah agar tampil di halaman, maka tambahkan script berikut ke file index.jsp.

<a href="tambah-mhs.jsp"><button class="btn-success">Tambah Mahasiswa</button></a>

Maka file index.jsp akan terlihat seperti berikut ini.

<%@include file="header.jsp" %>
<div class="container">
    <h3>Daftar Mahasiswa</h3>
    <a href="tambah-mhs.jsp"><button class="btn-success">Tambah Mahasiswa</button></a>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>NIM</th>
                <th>Nama</th>
                <th>Jurusan</th>
                <th>Email</th>
                <th>Alamat</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                
            </tr>
        </tbody>
    </table>
</div>
<%@include file="footer.jsp" %>

Kemudian masukkan script method tampilMahasiswa untuk menampilkan data mahasiswa ke dalam file index.jsp. Langkah ini juga dapat dilakukan dengan cara memilih tampilMahasiswa dalam Web Service Reference kemudian drag n drop ke dalam file index.jsp dan tambahkan perulangan untuk menampilkan semua data. Lebih sederhananya, silakan copykan script berikut ini.

<%-- start web service invocation --%><hr/>
<%
 try {
  client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
  client.siakad.Mahasiswa port = service.getMahasiswaPort();
  // TODO process result here
  java.util.List<java.lang.Object> resultMhs = port.tampilMahasiswa();
   for (int i = 0; i < resultMhs.size(); i++) {
    out.println(resultMhs.get(i));
   }
 } catch (Exception ex) {
  // TODO handle custom exceptions here
 }
%>
<%-- end web service invocation --%><hr/>

Maka script file index.jsp akan menjadi seperti di bawah ini.

<%@include file="header.jsp" %>
<div class="container">
    <h3>Daftar Mahasiswa</h3>
    <a href="tambah-mhs.jsp"><button class="btn-success">Tambah Mahasiswa</button></a>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>NIM</th>
                <th>Nama</th>
                <th>Jurusan</th>
                <th>Email</th>
                <th>Alamat</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <%-- start web service invocation --%>
                <hr />
                <%
    try {
     client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
     client.siakad.Mahasiswa port = service.getMahasiswaPort();
     // TODO process result here
     java.util.List<java.lang.Object> resultMhs = port.tampilMahasiswa();
     for (int i = 0; i < resultMhs.size(); i++) {
      out.println(resultMhs.get(i));
     }
    } catch (Exception ex) {
     // TODO handle custom exceptions here
    }
    %>
                <%-- end web service invocation --%>
                <hr />
            </tr>
        </tbody>
    </table>
</div>
<%@include file="footer.jsp" %>

Deploy kemudian run project kembali, maka akan tampil seperti gambar berikut ini. Data dari database yang didapatkan dengan method tampilMahasiswa berhasil dimasukkan ke dalam file index.jsp

Implementasi Method Read atau Tampil Data Mahasiswa selesai. Selanjutnya pada Part 5 akan membahas tentang bagaimana Cara Menambahkan Data Mahasiswa ke Database pada Project Client Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Minggu, 13 Januari 2019

Java KULIAH Netbeans TUGAS

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

Dafia Risma R 23.28.00 Comment

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

Setelah melakukan implementasi Method Operasi CRUD seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 2 - Method Operasi CRUD, maka saat ini kita sudah sampai di Part 3 yang akan membahas tentang Konfigurasi Template Bootstrap untuk Project Client Web Service.

Implementasi Project Client Web Service dengan Template Bootstrap

Setelah semua script method CRUD telah siap, maka kita akan membuat project untuk client dengan nama ClientSiakad. Caranya dengan klik File - New Project - Java Web - Web Application - Beri Nama ClientSiakad - klik Next
Pilih Server GlassFish - klik Finish.
Lalu kita buat koneksi ke project server Siakad, dengan membuat web service client. Caranya dengan klik kanan pada project Client - New - Web Service Client - Browse - Pilih Project Siakad - Mahasiswa - Klik OK
Kemudian Klik OK. Masukkan client.siakad pada package kemudian klik Finish.
Maka akan muncul Web Service References sebagai berikut :
Selanjutnya kita akan buat modifikasi ClientSiakad dengan bootstrap, maka silahkan copykan bahan-bahan berikut ke ClientSiakad/web. Untuk bahan silakan download di sini
Berikut adalah tampilan struktur dari project ClientSiakad
Buat beberapa file dengan nama header.jsp, footer.jsp, dan index.jsp di Web Pages project ClientSiakad.
Hapus file index.html terlebih dahulu, klik kanan file index.html lalu delete.
Buat file dengan cara klik kanan pada Web Pages - New - JSP - Masukkan nama “header”, “footer”, dan “index” kemudian klik Finish.
Masukkan script header.jsp berikut ini.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Siakad Mahasiswa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <!--Kode Navbar-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Siakad Kampus</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.jsp">Home<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Profil</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="index.jsp">Daftar Mahasiswa</a></li>
                            <li><a href="tambah-mhs.jsp">Tambah Mahasiswa</a></li>
                            <li><a href="edit-mhs.jsp">Edit Mahasiswa</a></li>
                            <li><a href="hapus-mhs.jsp">Hapus Mahasiswa</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--Akhir Navbar-->
</body>

</html>

Masukkan script footer.jsp berikut ini.

Masukkan script index.jsp berikut ini.

<%@include file="header.jsp" %>
<h1>Halaman Mahasiswa</h1>
<%@include file="footer.jsp" %>

Cobalah untuk deploy kemudian run project dengan cara klik kanan project ClientSiakad - Run
Berikut adalah tampilan project ClientSiakad saat dijalankan di web browser.

Konfigurasi Template Bootstrap untuk CRUD Web Service selesai. Selanjutnya pada Part 4 akan membahas tentang bagaimana Cara Menampilkan Data Mahasiswa dari Database ke dalam Project Client Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Java KULIAH Netbeans TUGAS

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

Dafia Risma R 23.16.00 Comment

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

Setelah melakukan Persiapan Awal seperti membuat Database, Project Client dan Server seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 1 - Persiapan Awal, maka saat ini kita sudah sampai di Part 2 yang akan membahas tentang Method Operasi CRUD Web Service ke dalam Project Server Siakad

Implementasi Method CRUD Web Service ke dalam Project Server

Aktifkan project server Siakad, kemudian buka file Mahasiswa.java.
Masukkan script berikut ke dalam file Mahasiswa.java.
Script koneksi untuk mendefinisikan pemanggilan variable untuk koneksi pada class koneksiMySQL.

koneksiMySQL kon = new koneksiMySQL();
    Connection con;
    PreparedStatement ps;
    ResultSet rs;

Script method tampilMahasiswa(). Method ini digunakan untuk menampilkan data yang ada di database ke dalam bentuk tabel html.

@WebMethod(operationName = "tampilMahasiswa")
public List tampilMahasiswa() {
    List daftar = new ArrayList();
    String sql_daftar = "select * from mahasiswa";
    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/siakad", "root", "");
        Statement stmt = con.createStatement();
        ResultSet rs = stmt.executeQuery(sql_daftar);
        while (rs.next()) {
            daftar.add("<td>" + rs.getInt("nim") + "</td><td>" + rs.getString("nama") + "</td><td>" + rs.getString("jurusan") + "</td><td>" + rs.getString("email") + "</td><td>" + rs.getString("alamat") + "</td><td><a href=\"edit-mhs.jsp?nim=" + rs.getInt("nim") + "\"><span class=\"glyphicon glyphicon-edit\"></span></a><br><a href=\"hapus-mhs.jsp?nim=" + rs.getInt("nim") + "\"><span class=\"glyphicon glyphicon-remove\"></span></a></td><tr></tr>");
        }
        con.close();
    } catch (Exception ex) {
        System.out.println(ex.getMessage());
    }
    return daftar;
}

Script method addMahasiswa(). Method ini digunakan untuk menambahkan data ke dalam database mysql.

@WebMethod(operationName = "addMahasiswa")
public void addDosen(
    @WebParam(name = "nim") int nim,
    @WebParam(name = "nama") String nama,
    @WebParam(name = "jurusan") String jurusan,
    @WebParam(name = "email") String email,
    @WebParam(name = "alamat") String alamat
) {
    try {
        con = kon.getCon();
        ps = con.prepareStatement("insert into mahasiswa value (?,?,?,?,?)");
        ps.setInt(1, nim);
        ps.setString(2, nama);
        ps.setString(3, jurusan);
        ps.setString(4, email);
        ps.setString(5, alamat);
        ps.executeUpdate();
    } catch (Exception ex) {
        System.out.println(ex.getMessage());
    }
}

Script method getMahasiswa(). Method ini digunakan untuk menampilkan satu data tertentu berdasarkan nim kemudian ditampilkan dalam bentuk form.

@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;
}

Script method editMahasiswa(). Method ini digunakan untuk mengubah suatu data dari database sesuai yang diubah di dalam form edit.

@WebMethod(operationName = "editMahasiswa")
public void editMahasiswa(
    @WebParam(name = "nim") int nim,
    @WebParam(name = "nama") String nama,
    @WebParam(name = "jurusan") String jurusan,
    @WebParam(name = "email") String email,
    @WebParam(name = "alamat") String alamat) {
    try {
        con = kon.getCon();
        ps = con.prepareStatement("update mahasiswa set nama=?,jurusan=?,email=?,alamat=? where nim=?");
        ps.setString(1, nama);
        ps.setString(2, jurusan);
        ps.setString(3, email);
        ps.setString(4, alamat);
        ps.setInt(5, nim);
        ps.executeUpdate();
    } catch (Exception e) {
        System.out.println("Failed to edit student because " + e.toString());
    }
}

Script method delMahasiswa(). Method ini digunakan untuk menghapus suatu data dari database berdasarkan nim.

@WebMethod(operationName = "delMahasiswa")
public void delMahasiswa(
    @WebParam(name = "nim") int nim) {
    try {
        con = kon.getCon();
        ps = con.prepareStatement("delete from mahasiswa where nim = ?");
        ps.setInt(1, nim);
        ps.executeUpdate();
    } catch (Exception e) {
        System.out.println("Failed to remove student because " + e.toString());
    }
}

Berikut adalah script lengkap dari file Mahasiswa.java.

package siakad.mahasiswa;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import javax.jws.WebService;
import javax.jws.WebMethod;
import javax.jws.WebParam;

@WebService(serviceName = "Mahasiswa")
public class Mahasiswa {

    koneksiMySQL kon = new koneksiMySQL();
    Connection con;
    PreparedStatement ps;
    ResultSet rs;
	
    @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;
    }
	
    @WebMethod(operationName = "addMahasiswa")
    public void addDosen(
        @WebParam(name = "nim") int nim,
        @WebParam(name = "nama") String nama,
        @WebParam(name = "jurusan") String jurusan,
        @WebParam(name = "email") String email,
        @WebParam(name = "alamat") String alamat
    ) {
        try {
            con = kon.getCon();
            ps = con.prepareStatement("insert into mahasiswa value (?,?,?,?,?)");
            ps.setInt(1, nim);
            ps.setString(2, nama);
            ps.setString(3, jurusan);
            ps.setString(4, email);
            ps.setString(5, alamat);
            ps.executeUpdate();
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
        }
    }
	
    @WebMethod(operationName = "delMahasiswa")
    public void delMahasiswa(
        @WebParam(name = "nim") int nim) {
        try {
            con = kon.getCon();
            ps = con.prepareStatement("delete from mahasiswa where nim = ?");
            ps.setInt(1, nim);
            ps.executeUpdate();
        } catch (Exception e) {
            System.out.println("Failed to remove student because " + e.toString());
        }
    }
	
    @WebMethod(operationName = "editMahasiswa")
    public void editMahasiswa(
        @WebParam(name = "nim") int nim,
        @WebParam(name = "nama") String nama,
        @WebParam(name = "jurusan") String jurusan,
        @WebParam(name = "email") String email,
        @WebParam(name = "alamat") String alamat) {
        try {
            con = kon.getCon();
            ps = con.prepareStatement("update mahasiswa set nama=?,jurusan=?,email=?,alamat=? where nim=?");
            ps.setString(1, nama);
            ps.setString(2, jurusan);
            ps.setString(3, email);
            ps.setString(4, alamat);
            ps.setInt(5, nim);
            ps.executeUpdate();
        } catch (Exception e) {
            System.out.println("Failed to edit student because " + e.toString());
        }
    }
	
    @WebMethod(operationName = "tampilMahasiswa")
    public List tampilMahasiswa() {
        List daftar = new ArrayList();
        String sql_daftar = "select * from mahasiswa";
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/siakad", "root", "");
            Statement stmt = con.createStatement();
            ResultSet rs = stmt.executeQuery(sql_daftar);
            while (rs.next()) {
                daftar.add("<td>" + rs.getInt("nim") + "</td><td>" + rs.getString("nama") + "</td><td>" + rs.getString("jurusan") + "</td><td>" + rs.getString("email") + "</td><td>" + rs.getString("alamat") + "</td><td><a href=\"edit-mhs.jsp?nim=" + rs.getInt("nim") + "\"><span class=\"glyphicon glyphicon-edit\"></span></a><br><a href=\"hapus-mhs.jsp?nim=" + rs.getInt("nim") + "\"><span class=\"glyphicon glyphicon-remove\"></span></a></td><tr></tr>");
            }
            con.close();
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
        }
        return daftar;
    }
}

Simpan semua file, kemudian deploy lalu silakan Test Web Service dan coba masukkan satu data ke dalam database.

Implementasi Method Operasi CRUD Web Service ke dalam Project Server selesai. Selanjutnya pada Part 3 akan membahas tentang bagaimana Konfigurasi Template Bootstrap untuk Project Client Web Service. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Tutorial CRUD Web Service dengan Bootstrap Menggunakan Netbeans lainnya :

Java KULIAH Netbeans TUGAS

CRUD Web Service dengan Bootstrap Menggunakan Netbeans - Part 1 - Persiapan Awal

Dafia Risma R 20.30.00 Comment

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

Setelah membahas apa itu CRUD dan Bootstrap di artikel Implementasi CRUD Web Service dengan Bootstrap Menggunakan Netbeans, maka saat ini kita berada di Part 2 Sesi Tutorial CRUD Web Service yang akan membahas tentang bagaimana cara menghubungkan atau mengkoneksikan project Siakad ke suatu database menggunakan bantuan library MySQL JDBC Driver

Persiapan Awal CRUD Web Service

Buat project WS (Server dan Client) dengan Bootsrap. Project ini memiliki fitur CRUD (Create, Read, Update, dan Delete).

Nama Project Server : Siakad

Nama Project Client : ClientSiakad

Nama Database : siakad

Nama Tabel : mahasiswa

Berikut adalah struktur dari database siakad.
Berikut adalah tampilan struktur database siakad di PHPMyAdmin.
Buka software Netbeans 8.2, lalu buat sebuah project untuk server dengan nama adalah Siakad. Klik File - New Project - Java Web - Web Application. Beri nama Siakad kemudian klik Next.
Pilih GlassFish sebagai server - klik Finish.
Selanjutnya kita buat web service di dalam project Siakad. Caranya, klik kanan pada project, lalu pilih New - Web Service, lalu masukkan nama : Mahasiswa dan Package : siakad.mahasiswa.
Berikut adalah file Mahasiswa.java yang terbentuk otomatis karena pembuatan Web Service yang nantinya menampung method-method yang ada.
Lalu kita buat koneksi project ke database MySQL, caranya dengan klik pada Package siakad.mahasiswa - New - Java Class.
Lalu beri nama koneksiMySQL.
Berikut adalah file Java Class asli yang bernama koneksiMySQL.java.

Copykan script berikut ke file koneksiMySQL.java. File ini digunakan untuk konfigurasi koneksi project Siakad ke database siakad

package siakad.mahasiswa;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class koneksiMySQL {

    String driver = "com.mysql.jdbc.Driver";
    String url = "jdbc:mysql://localhost:3306/siakad";
    String usern = "root";
    String passw = "";
    Connection con;
    PreparedStatement ps;
    ResultSet rs;
    public Connection getCon() {
        try {
            Class.forName(driver);
            con = DriverManager.getConnection(url, usern, passw);
        } catch (Exception ex) {
            System.out.println(ex.getMessage());
        }
        return con;
    }
}

Berikut adalah tampilan dari script koneksiMySQL.java.
Selanjutnya kita setting Library. Caranya dengan klik kanan pada project Siakad - Properties - Libraries - Add Library - pilih MySQL JDBC Driver - Add - OK.
Setelah itu cek di dalam direktori Libraries apakah sudah ada MySQL JDBC Driver atau belum.
Agar data MySQL dapat dipanggil di web service, maka dibutuhkan Getter and Setter masing-masing data. Caranya klik kanan pada package siakad.mahasiswa - New - Java Class, beri nama mhs.
Berikut adalah tampilan dari script original file mhs.java.
Masukkan script berikut ke dalam class mhs pada file mhs.java

public class mhs {
    private int nim;
    private String nama, jurusan, email, alamat;
}

Untuk menambahkan getter and setter, klik kanan di bawah script sebelumnya, kemudian klik Insert Code - pilih Getter and Setter - centang semua variable - klik Generate.
Maka akan muncul script getter and setter. Dan script file mhs.java akan tampak seperti di bawah ini.

package siakad.mahasiswa;

public class mhs {
    private int nim;
    private String nama, jurusan, email, alamat;

    public int getNim() {
        return nim;
    }

    public void setNim(int nim) {
        this.nim = nim;
    }

    public String getNama() {
        return nama;
    }

    public void setNama(String nama) {
        this.nama = nama;
    }

    public String getJurusan() {
        return jurusan;
    }

    public void setJurusan(String jurusan) {
        this.jurusan = jurusan;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getAlamat() {
        return alamat;
    }

    public void setAlamat(String alamat) {
        this.alamat = alamat;
    }

}

Berikut adalah hasil dari generate getter and setter pada file mhs.java.
Project server Siakad sudah terkoneksi dengan database siakad.

Persiapan Awal CRUD Web Service dengan Bootstrap selesai. Selanjutnya pada Part 2 akan membahas tentang bagaimana Membuat Method Operasi CRUD pada Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini

Tutorial CRUD Web Service dengan Bootstrap Menggunakan Netbeans lainnya :