Pemrograman Web 2- Praktikum 7

-

TUTORIAL PRAKTEK PEMROGRAMAN WEB 2
PRAKTIKUM KE 7
( CRUD Web Service dengan Bootstrap- Sesi 2)
15. Selanjutnya kita buat modifikasi client siakad dengan bootstrap, maka silahkan copy bahan-bahan pendukung di ClientSiakad/web




16. Buat beberapa file dengan nama header.jsp, footer.jsp, index.jspdi web pages pada project ClientSiakad
17. Tapi hapus terlebih dahulu file indes.html nya ,klik kanan file index.html -> delete -> yes
18. Cara untuk membuat fil, klik kanan pada Web Pages -> New -> Jsp -> masukkan nama : header -> klik finish
Masukkan script berikut dihalaman 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>

Script untuk halaman footer.jsp
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

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


19. Agar tampilan content halaman berupa table maka tambahkan script berikut di halaman index.jsp

<%@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 data agar tampil dihalaman utama, maka ubahlah script index.jsp sehingga menjadi script beikut

<%@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. Untuk membuat agar bisa di input data lewat client dengan klik tombol tambah 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 bisa tersimpan di dalam database, maka buat file baru dengan nama proses-tambah-mhs.jsp
Masukkaan script berikut di halaman prose-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" %>





(step selanjutnya klik link dibawah ini)
https://hidaisnurul.blogspot.com/2019/01/pemrograman-web-2-praktikum-7-lanjutan.html

Komentar

Posting Komentar

Postingan populer dari blog ini

Sejarah Windows

-
Gambar
      Microsoft Windows  adalah keluarga sistem operasi. yang dikembangkan oleh Microsoft, dengan menggunakan antarmuka pengguna grafis. Sistem operasi Windows telah berevolusi dari MS-DOS, sebuah sistem operasi yang berbasis modus teks dan command-line. Windows versi pertama, Windows Graphic Environment 1.0 pertama kali diperkenalkan pada 10 November 1983, tetapi baru keluar pasar pada bulan November tahun 1985, yang dibuat untuk memenuhi kebutuhan komputer dengan tampilan bergambar. Windows 1.0 merupakan perangkat lunak 16-bit tambahan (bukan merupakan sistem operasi) yang berjalan di atas MS-DOS (dan beberapa varian dari MS-DOS), sehingga ia tidak akan dapat berjalan tanpa adanya sistem operasi DOS. Versi 2.x, versi 3.x juga sama. Beberapa versi terakhir dari Windows (dimulai dari versi 4.0 dan Windows NT 3.1) merupakan sistem operasi mandiri yang tidak lagi bergantung kepada sistem operasi MS-DOS.     Dimulai dari DosShell for DOS ...
Baca selengkapnya

Sejarah Perkembangan Processor

-
Gambar
               Processor merupakan bagian sangat penting dari sebuah komputer, yang berfungsi sebagai otak dari komputer. Processor yang kita pakai saat ini sudah sangat cepat sekali. Tentu saja untuk mencapai kecepatan sampai saat ini processor tersebut mengalami perkembangan. Nah berikut perkembangan processor mulai dari generasi 4004 microprocessor yang di pakai pada mesin penghitung Busicom sampai dengan intel Quad-core Xeon.Perkembangan processor diawali oleh processor intel pada saat itu hanya satu² nya microprocessor yang ada. 1. Microprocessor 4004 (1971) Processor di awali pada tahun 1971 dimana intel mengeluarkan processor pertamanya yang di pakai pada mesin penghitung buscom. Ini adalah penemuan yang memulai memasukan system cerdas kedalam mesin. Processor ini dinamakan microprocessor 4004. Chip intel 4004 ini mengawali perkembangan CPU dengan mempelopori peletakan seluruh komponen mesin hitung dalam satu IC. Pada saat ini IC men...
Baca selengkapnya

Pemrograman Web 2- Praktikum 7 lanjutan akhir

-
TUTORIAL PRAKTEK PEMROGRAMAN WEB 2 PRAKTIKUM KE 7 ( CRUD Web Service dengan Bootstrap- Sesi 2)  lanjutan akhir 32. Buat file edit-mhs.jsp Masukkan script 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" %> 33. Selanjutnya buat file ...
Baca selengkapnya