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

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

1. 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" %>

2. Deploy kemudian run project kembali, maka akan tampil seperti gambar berikut ini.
   
3. 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>

4. 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" %>

5. 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/>

6. 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" %>

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

Tutorial CRUD Web Service dengan Bootstrap Menggunakan Netbeans lainnya :

Implementasi CRUD Web Service dengan Bootstrap Menggunakan Netbeans

CRUD Web Service dengan Bootstrap - Part 1 - Persiapan Awal

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

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

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

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

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

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