TUTORIAL 8




1.      Bismillah, hari ini kita akan membuat sebuah project web service (Server & Client), untuk project Server = Siakad dan untuk Client = ClientSiakad, project yang akan kita buat memiliki kemampuan CRUD (Create, Read, Update, Delete). Sebelum membuat project langkah pertama kita buat sebuah database dengan ketentuan sebagai berikut :
Database name : siakad
Table name : mahasiswa
Field
Type
Panjang
Nim
int
15
Nama
varchar
30
Jurusan
varchar
30
Email
varchar
20
Alamat
varchar
50

2.      Buka Netbeans 8.2, lalu buat project untuk server, caranya : klik File à New Project à Java Web à Application, lalu beri nama Siakad. Lalu klik Next à Pilih Server Glassfish 4.1.1, lalu klik Finish.
3.      Selanjutnya buat web service didalam project. Caranya klik kanan pada project Siakad à New à Web Service à Masukkan nama : Mahasiswa dan Package : siakad.mahasiswa

4.      Lalu kita buat koneksi, caranya klik kanan pada Package siakad.mahasiswa à New à Java class lalu beri nama koneksiMySQL.
5.      Kemudian untuk script koneksi MySQL dapat menggunakan script berikut :
package siakad.mahasiswa;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

/**
*
* @author Muqorobin, S.Kom
*/
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;
}
}

6.      Selanjutnya setting Library, caranya klik kanan pada project siakad, lalu pilih properties à Libraries à Add Library à MySQL JDBC Driver à Lalu klik Add, terus klik OK.
7.      Selanjutnya kita cek didalam directory Library sudah ada MySQL JDBC Driver apa belum
8.      Agar data MySQL dapat di panggil di Web Service, maka di butuhkan Getter and Setter Masing-masing data. Caranya klik kanan pada Package toko.lipstick à New à Java Class, beri nama mhs

9.      Kemudian masuk script sebagai berikut :
package siakad.mahasiswa;
/**
*
* @author Muqorobin, S.Kom
*/
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 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;
}
}
10.  Setelah itu kita akan membuat method CRUD(Create, Read, Update, Delete) didalam class : Mahasiswa.java
11.  Masukan script pada halaman class Mahasiswa.java sebagai berikut
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;
/**
*
* @author Muqorobin, S.Kom
*/
@WebService(serviceName = "Mahasiswa")
public class Mahasiswa {
/*Panggil Koneksi MySQL*/
koneksiMySQL kon = new koneksiMySQL();
Connection con;
PreparedStatement ps;
ResultSet rs;
/*Selesai Panggil Koneksi MySQL*/
/*Get Mahasiswa*/
@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;
}
/*Selesai Get Mahasiswa*/
/*Selesai Tambah 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());
}
}
/*Selesai Tambah Mahasiswa*/
/*Hapus Mahasiswa*/
@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());
}
}
/*Selesai Hapus Mahasiswa*/
/*Edit Mahasiswa*/
@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());
}
}
/*Selesai Edit Mahasiswa*/
@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;
}
}

12.  Setelah seluruh script method CRUD telah siap, maka kita akan membuat Client, Caranya klik File à New Project à Java Web à Application, lalu beri nama project : ClientSiakad
13.  Selanjutnya koneksikan ClientSiakad dengan Server Siakad, Caranya klik kanan pada project ClientSiakad à Lalu pilih New à Pilih Web Service Client, lalu pilih project à Browse à Pilih Siakad – Mahasiswa – klik OK, lalu isi package : client.siakad lalu klik Finish.
14.  Maka akan muncul Web Service References sebagai berikut
15.  Selanjutnya kita akan membuat modifikasi Tampilan Client dengan tamplate bootstrap, silahkan anda copy bahan – bahan pendukung dibagian ClientSiakad/web lihat berikut


16.  Buat sebuah file header.jsp. footer.jsp dan index.jsp di Web Pages Project ClientSiakad
17.  Tapi hapus file index.html terlebih dahulu
18.  Cara buat file baru, klik kanan pada Web Pages -> New -. JSP -> beri nama header.jsp
Masukan script header.jsp
<%@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-->

19.  Masukkan script index.jsp berikut
<%--
    Document   : index
    Created on : Dec 11, 2018, 2:15:49 PM
    Author     : SiNus
--%>


<%@include file="header.jsp" %>
<h3>Daftar Mahasiswa</h3>
<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>


20.  Selanjutnya agar database tampil didalam project, maka perlu memanggil WSDL. Caranya drag dan drop method gerMahasiswa ke dalam index.jsp Drag kedalam index.jsp didalam antara<tr> …… </tr> perhatikan sehingga scriptnya berikut

<%-- start web service invocation --%><hr/>
    <%
    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;
            // TODO process result here
            java.util.List<java.lang.Object> resultMhs = port.getMahasiswa(nim);
        for(int i=0; i<resultMhs.size();i++){
            out.println(resultMhs.get(1));
        }
    } catch (Exception ex) {
            // TODO handle custom exceptions here
    }
    %>
    <%-- end web service invocation --%><hr/>

21.   




Komentar