Cara membuat CRUD Web Service dengan Bootstrap - sesi 2
Haii di tutorial kali ini saya akan meneruskan tutorial yang sebelumnya yaitu Cara membuat CRUD Web Service dengan Bootstrap - sesi 1
Yang tutorial Cara membuat CRUD Web Service dengan Bootstrap - sesi 2 caranya sebagai berikut:
15. Selanjutnya kita akan buat modifikasi ClientSiakad dengan bootstrap, maka silahkan copykan bahan bahan berikut di ClientSiakad/web
16. Buat beberapa file dengan nama header.jps, footer.jsp dan index.jsp di web pages project ClientSiakad.
17. Tapi hapus file index.html nya terlebih dahulu, klik kanan file index.html lalu delete
18. Cara buat file, klik kanan pada web pages -> New -> JSP -> masukkan nama header -> klik finish .
<%@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>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<%@include file="header.jsp" %>
<h1>Halaman Mahasiswa</h1>
<%@include file="footer.jsp" %>
19. Untuk membuat tampil table maka ubah atau tambahkan script index.jsp menjadi berikut
<%@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>
<%@include file="footer.jsp" %>
20. Untuk membuat tombol tambah agar tampil di halaman , maka ubah file index.jsp sehingga menjadi script berikut
<%@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" %>
21. Selanjutnya untuk membuat agar bias input data lewat Client dengan klik tambah mahasiswa, maka perlu buat file baru dengan nama 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" %>
22. Agar data bias tersimpan di database maka buat file lagi dengan nama proses-tambah-mhs.jsp
<%-- 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 --%>
23. 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");
} catch (Exception ex) {
}
%>
24. Silahkan deploy sehingga akan muncul tampilan sebagai berikut
25. Langkah selanjutnya membuat tampilan Edit dan Delete . Dalam hal ini edit dan delete dibuat dalam satu script menjadi satu table
26. Masuk pada project server siakad, lalu masuk Class Mahasiswa.java lalu tambahkan script Method tampilMahasiswa sehingga menjadi sebagai berikut.
@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;
}
27. Untuk membuat proses proses hapus, silahkan buat 1 buah file dengan nama hapus-mhs.jsp
28. Lalu drag operator hapus dari Web Service Reference
29. Tapi ubah scriptnya sehingga menjadi sebagai 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 = 0;
port.delMahasiswa(nim);
} catch (Exception ex) {
// TODO handle custom exceptions here
}
%>
<%-- end web service invocation --%>
30. 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 sebagai 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")); port.delMahasiswa(nim);
response.sendRedirect("index.jsp");
} catch (Exception ex) {
}
%>
<%-- end web service invocation --%>
31. Silahkan di deploy lalu tes untuk hapus data
32. Selanjutnya kita akan buat tombol edit dan update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk edit.
33. Sebelum membuat file edit, rubah terlebih dahulu method getMahasiswa di project siakad sehingga berubah menjadi sebagai berikut.
/*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*/
34. Selanjutnya buat file baru dengan nama edit-mhs.jsp Masukkan script di halaman edit-mhs.jsp berikut
<%@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" %>
35. Selanjutnya buat file baru dengan nama proses-edit-mhs.jsp Masukkan script 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 = 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 --%>
36. Lalu rubah script proses-edit-mhs.jsp sehingga tampil sebagai 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) {
}
%>
37. Terakhir silahkan anda deploy dan run ClientSiakad maka akan tampil sebagai berikut
Yang tutorial Cara membuat CRUD Web Service dengan Bootstrap - sesi 2 caranya sebagai berikut:
15. Selanjutnya kita akan buat modifikasi ClientSiakad dengan bootstrap, maka silahkan copykan bahan bahan berikut di ClientSiakad/web
16. Buat beberapa file dengan nama header.jps, footer.jsp dan index.jsp di web pages project ClientSiakad.
17. Tapi hapus file index.html nya terlebih dahulu, klik kanan file index.html lalu delete
18. Cara buat file, klik kanan pada web pages -> New -> JSP -> masukkan nama header -> klik finish .
- Masukkan 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-->
</body>
</html>
- Masukkan script footer.jsp
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
- Masukkan script index.jsp
<%@include file="header.jsp" %>
<h1>Halaman Mahasiswa</h1>
<%@include file="footer.jsp" %>
19. Untuk membuat tampil table maka ubah atau tambahkan script index.jsp menjadi berikut
<%@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>
<%@include file="footer.jsp" %>
20. Untuk membuat tombol tambah agar tampil di halaman , maka ubah file index.jsp sehingga menjadi script berikut
<%@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" %>
21. Selanjutnya untuk membuat agar bias input data lewat Client dengan klik tambah mahasiswa, maka perlu buat file baru dengan nama 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" %>
22. Agar data bias tersimpan di database maka buat file lagi dengan nama proses-tambah-mhs.jsp
<%-- 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 --%>
23. 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");
} catch (Exception ex) {
}
%>
24. Silahkan deploy sehingga akan muncul tampilan sebagai berikut
25. Langkah selanjutnya membuat tampilan Edit dan Delete . Dalam hal ini edit dan delete dibuat dalam satu script menjadi satu table
26. Masuk pada project server siakad, lalu masuk Class Mahasiswa.java lalu tambahkan script Method tampilMahasiswa sehingga menjadi sebagai berikut.
@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;
}
27. Untuk membuat proses proses hapus, silahkan buat 1 buah file dengan nama hapus-mhs.jsp
28. Lalu drag operator hapus dari Web Service Reference
29. Tapi ubah scriptnya sehingga menjadi sebagai 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 = 0;
port.delMahasiswa(nim);
} catch (Exception ex) {
// TODO handle custom exceptions here
}
%>
<%-- end web service invocation --%>
30. 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 sebagai 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")); port.delMahasiswa(nim);
response.sendRedirect("index.jsp");
} catch (Exception ex) {
}
%>
<%-- end web service invocation --%>
31. Silahkan di deploy lalu tes untuk hapus data
32. Selanjutnya kita akan buat tombol edit dan update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk edit.
33. Sebelum membuat file edit, rubah terlebih dahulu method getMahasiswa di project siakad sehingga berubah menjadi sebagai berikut.
/*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*/
34. Selanjutnya buat file baru dengan nama edit-mhs.jsp Masukkan script di halaman edit-mhs.jsp berikut
<%@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" %>
35. Selanjutnya buat file baru dengan nama proses-edit-mhs.jsp Masukkan script 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 = 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 --%>
36. Lalu rubah script proses-edit-mhs.jsp sehingga tampil sebagai 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) {
}
%>
37. Terakhir silahkan anda deploy dan run ClientSiakad maka akan tampil sebagai berikut
Sekian tutorial hari ini semoga bermanfaat bagi pembaca. Sekian dan Terima kasih
Komentar
Posting Komentar