CRUD Web Service dengan Bootstrap

TUTORIAL PRAKTIK PEMROGRAMAN WEB II

PRAKTIKUM KE 8

Untuk sesi pertama bisa dilihat di sini.

15. Selanjutnya kita akan membuat modifikasi ClientSiakad dengan bootstrap, copykan bahan-bahan berikut ke ClientSiakad/web.

16. Buat beberapa file dengan nama header.jsp, footer.jsp dan index.jsp di Web Pages Project ClientSiakad.
17. Tetapi hapus file indext.html nya terlebih dahulu, dengan cara klik kanan file index.html lalu pilih 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"%>

Siakad Mahasiswa

-->    • Masukkan script footer.jsp

    • Masukkan script index.jsp
<%@include file="header.jsp" %>

Halaman Mahasiswa

<%@include file="footer.jsp" %>

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

<%@include file="header.jsp" %>

Daftar Mahasiswa

NIM Nama Jurusan Email Alamat

<%@include file="footer.jsp" %>

20. Untuk membuat tombol tambah agar tampil di halaman, maka ubah file index.jsp sehingga menjadi script seperti berikut ini:

<%@include file="header.jsp" %>

Daftar Mahasiswa

<%-- start web service invocation --%>

<%
try {
client.siakad.Mahasiswa_Service service = new client.siakad.Mahasiswa_Service();
client.siakad.Mahasiswa port = service.getMahasiswaPort();
// TODO process result here
java.util.List 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 --%>

NIM	Nama	Jurusan	Email	Alamat	Aksi

<%@include file="footer.jsp" %>

21. Selanjutnya untuk membuat agar bias input data lewat Client dengan klik tombol Tambah Mahasiswa, maka perlu buat file baru dengan nama tambah-mhs.jsp.

Tambah script berikut ke dalam file tambah-mhs.jsp:
<%@include file="header.jsp" %>

Form Tambah Mahasiswa

<%@include file="footer.jsp" %>

22. Agar data bisa tersimpan di database maka buat file lagi dengan nama proses-tambah-mhs.jsp.

Tambah script berikut ke dalam file 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. Langkah selanjutnya membuat tampilan Edit dan Delete. Dalam hal ini Edit dan Delete dibuat dalam satu script.
25. Masuk pada project server Siakad, lalu masuk Class Mahasiswa.java --> tambahkan script Method tampilMahasiswa sehingga menjadi seperti 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("
" + rs.getInt("nim") + "
" + rs.getString("nama") + "
" + rs.getString("jurusan") + "
" + rs.getString("email") + "
" + rs.getString("alamat") + "

");
}
con.close();
} catch (Exception ex) {
System.out.println(ex.getMessage());
}
return daftar;
}

26. Untuk membuat proses Hapus, buat satu buah file dengan nama hapus-mhs.jsp.

27. Lalu drag operator hapus dari Web Service Reference.

28. Tetapi ubah script 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 --%>

29. 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")); port.delMahasiswa(nim);
response.sendRedirect("index.jsp");
} catch (Exception ex) {
}
%>
<%-- end web service invocation --%>

30. Deploy --> Run
Tampilan awal:

Tampilan akhir setelah salah satu data di hapus:

31. Selanjutnya kita akan buat tombol Edit dan Update. Proses ini akan mengambil data mahasiswa dan menampilkannya ke dalam form untuk Edit.
32. Sebelum membuat file Edit, ubah terlebih dahulu method getMahasiswa di project Siakad sehinggaberubah menjadi seperti 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("

\n" +
" NIM\n" +
"

\n" +
" "value=\""+rst.getInt("nim")+"\" readonly=\"true\">\n" +
"

\n" +
"

\n" +
" \n" +
"

\n" +
" Nama\n" +
"

\n" +
" " value=\""+rst.getString("nama")+"\">\n" +
"

\n" +
"

\n" +
" \n" +
"

\n" +
" Jurusan\n" +
"

\n" +
" " value=\""+rst.getString("jurusan")+"\">\n" +
"

\n" +
"

\n" +
" \n" +
"

\n" +
" Email\n" +
"

\n" +
" " value=\""+rst.getString("email")+"\">\n" +
"

\n" +
"

\n" +
" \n" +
"

\n" +
" Alamat\n" +
"

\n" +
" \n" +
"

\n" +
"

");
}
} catch (Exception ex) {
System.out.println(ex.getMessage());
}
return mahasiswa;
}
/*Selesai Get Mahasiswa*/

33. Buat file baru dengan nama edit-mhs.jsp. masukkan script berikut:

<%@include file="header.jsp" %>

Form Edit Mahasiswa

<%@include file="footer.jsp" %>

34. 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 --%>

35. Ubah script proses-edit-mhs.jsp menjadi seperti dibawah ini:

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

36. Coba edit data:

37. Hasil edit data:

Untuk lebih lengkapnya, dokumen dan project bisa didownload di sini.

Lail's Blog

Cari Blog Ini