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

Implementasi CRUD Web Service (Client dan Server) dengan Bootstrap Menggunakan Netbeans

Setelah melakukan implementasi Method Operasi CRUD seperti yang sudah dijelaskan di tutorial CRUD Web Service dengan Bootstrap - Part 2 - Method Operasi CRUD, maka saat ini kita sudah sampai di Part 3 yang akan membahas tentang Konfigurasi Template Bootstrap untuk Project Client Web Service.

Implementasi Project Client Web Service dengan Template Bootstrap

Setelah semua script method CRUD telah siap, maka kita akan membuat project untuk client dengan nama ClientSiakad. Caranya dengan klik File - New Project - Java Web - Web Application - Beri Nama ClientSiakad - klik Next
Pilih Server GlassFish - klik Finish.
Lalu kita buat koneksi ke project server Siakad, dengan membuat web service client. Caranya dengan klik kanan pada project Client - New - Web Service Client - Browse - Pilih Project Siakad - Mahasiswa - Klik OK
Kemudian Klik OK. Masukkan client.siakad pada package kemudian klik Finish.
Maka akan muncul Web Service References sebagai berikut :
Selanjutnya kita akan buat modifikasi ClientSiakad dengan bootstrap, maka silahkan copykan bahan-bahan berikut ke ClientSiakad/web. Untuk bahan silakan download di sini
Berikut adalah tampilan struktur dari project ClientSiakad
Buat beberapa file dengan nama header.jsp, footer.jsp, dan index.jsp di Web Pages project ClientSiakad.
Hapus file index.html terlebih dahulu, klik kanan file index.html lalu delete.
Buat file dengan cara klik kanan pada Web Pages - New - JSP - Masukkan nama “header”, “footer”, dan “index” kemudian klik Finish.
Masukkan script header.jsp berikut ini.

<%@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 berikut ini.

Masukkan script index.jsp berikut ini.

<%@include file="header.jsp" %>
<h1>Halaman Mahasiswa</h1>
<%@include file="footer.jsp" %>

Cobalah untuk deploy kemudian run project dengan cara klik kanan project ClientSiakad - Run
Berikut adalah tampilan project ClientSiakad saat dijalankan di web browser.

Konfigurasi Template Bootstrap untuk CRUD Web Service selesai. Selanjutnya pada Part 4 akan membahas tentang bagaimana Cara Menampilkan Data Mahasiswa dari Database ke dalam Project Client Web Service Menggunakan Netbeans. Jika anda ingin melanjutkan, silakan klik tombol di bawah ini