Home Java KULIAH Netbeans TUGAS CRUD Web Service dengan Bootstrap Menggunakan Netbeans - Part 5 - Client Tambah Data Mahasiswa

Senin, 14 Januari 2019

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

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

  1. 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.
  2. Masukkan script berikut ke dalam file tambah-mhs.jsp 
    3. <%@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" %>
  3. Berikut adalah tampilan dari file tambah-mhs.jsp saat dijalankan di browser.
  4. Agar data yang diinputkan bisa tersimpan ke dalam database, maka buat file lagi dengan nama proses-tambah-mhs.jsp.
  5. 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.
    6. <%-- 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 --%>
  6. Ubahlah sedikit script sehingga dapat menerima POST dari tambah-mhs.jsp dengan menambahkan script berikut :
    7. 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");
  7. Berikut tampilan script lengkapnya :
  8. Silahkan deploy kemudian run project ClientSiakad.
  9. Berikut adalah tampilan form tambah-mhs.jsp yang diisi dengan data baru.
  10. 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