Pemrograman Visual 1

Program Studi – Komputerisasi Akuntansi

JSP (JavaServer Pages) adalah suatu teknologi web berbasis

bahasa pemrograman Java dan berjalan di Platform Java,
serta merupakan bagian teknologi J2EE (Java 2 Enterprise
Edition).

Tim Konsorsium - 2016

 Kata Pengantar

Puji syukur kami panjatkan kehadirat Allah SWT, yang dengan segala nikmat
tercurahkan kepada seluruh umatnya dan dengan segala rahmat dan hidayahnya kami dapat
menyelesaikan modul “Pemrograman Visual 1” tepat pada waktunya.

Modul ini disusun agar dapat membantu dalam pembelajaran bagi mahasiswa/i AMIK
BSI Program Studi Komputerisasi Akuntansi. Dan dalam kesempatan kali ini, kamipun ingin
mengucapkan terima kasih kepada semua pihak yang telah membantu dalam menyelesaikan
modul ini.

Modul ini membahas tentang pengenalan JSP (Java Server Pages) untuk membangun
aplikasi berbasis web dengan menggunakan bahasa java. Dan kami berharap semoga modul
ini dapat menjadi salah satu referensi bagi para mahasiswa/i dalam pembelajaran mata kuliah
Pemrograman Visual 1.

Kami sadari masih begitu banyak kekurangan dalam modul ini baik dari segi materi,
penyusunan, bahasan, dan penulisan. Oleh karena itu kami berharap kritik dan saran yang
sifatnya membangun khususnya kepada para pengajar nantinya yang dapat dikirimkan via
email: yudhistira.yht@bsi.ac.id dan muhammad.mrd@bsi.ac.id guna perbaikan agar modul ini
dapat lebih baik nantinya.

Jakarta, Juli 2016

Tim Penyusun

1
 Daftar Isi

BAB I PENGENALAN .......................................................................................................................0

HTML (HyperText Markup Language) ...............................................................................................0
Sejarah singkat HTML .........................................................................................................................0
Apa itu HTML? ....................................................................................................................................0
Elemen — dasar building blocks .........................................................................................................1
Tag .......................................................................................................................................................1
Atribut ..................................................................................................................................................2
Named character references .................................................................................................................3
Doctype dan Komentar.........................................................................................................................3
HTML 4.01 Strict .............................................................................................................................4
Dokumen singkat tapi Sempurna .........................................................................................................5
BAB II LATIHAN TAG-TAG HTML .................................................................................................6
Struktur HTML ....................................................................................................................................6
BAB III JavaServer Pages (JSP) ..........................................................................................................19
BAB IV Java Web Database Application .............................................................................................27
BAB V Membuat Web dengan Database ............................................................................................38

2
BAB I PENGENALAN

HTML (HyperText Markup Language)

HyperText Markup Language (HTML) adalah bahasa inti untuk hampir seluruh konten
Web. Apa yang Anda lihat di layar browser Anda hampir semuanya bisa dideskripsikan,
secara fundamental, menggunakan HTML. Lebih tepatnya, HTML adalah bahasa yang
mendeskripsikan struktur dan nilai semantik konten dari dokumen Web.

Berbagai macam teknologi (seperti CSS, JavaScript, Flash, AJAX, JSON) dapat digunakan
untuk mendefinisikan elemen dari sebuah halama web. Akan tetapi, pada level paling
rendah, sebuah halaman web didefinisikan dengan menggunakan HTML (HyperText Markup
Language). Tanpa HTML maka tidak akan ada halaman web.

Sejarah singkat HTML

Di akhir tahun 1980an, Tim Berners-Lee bekerja sebagai seorang physicist di CERN
(Sebuah Organisasi untuk research nuklir di eropa). Beliau merancang sebuah jalan bagi
para scientis untuk berbagi dokumen melalui internet. Sebelum invensi ini, komunikasi
melalui internet hanya terbatas pada dokumen teks biasa menggunakan beberapa teknologi
seperti email,, FTP (File Transfer Protocol), dan Panel diskusi berbasis Usenet. Invensi dari
HTML memanfaatkan model dan konten yang disimpan dalam server pusat yang dapat
ditransfer dan ditampilkan pada workstation lokal melalui browser. Invensi ini
menyederhanakan akses terhadap konten dan memungkinkan untuk menampilkan konten
yang "kaya" (seperti pemformatan teks yang mutakhir dan menampilkan gambar).

Apa itu HTML?

HTML adalah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser
bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar,
audio, video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi
bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen
yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki
satu atau lebih "tag" yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri
dengan kurung siku, dan tag "penutup" (tag yang menandakan akhir dari konten) diawali
dengan garis miring.

Sebagai contoh, elemen paragraf terdiri dari tag pembuka "<p>" dan tag penutup "</p>" –
tanpa tanda kutip. Contoh berikut menampilkan sebuah paragraf yang terdapat dalam
elemen paragraf HTML:

<p>Ini adalah contoh tag html paragraf</p>

Elemen — dasar building blocks

HTML terdiri dari sekumpulan elemen-elemen. Elemen-elemen mendefinisikan arti semantik

dari content yang bersangkutan. Elemen-elemen mengikutsertakan saja yang terdapat di
dalam tag elemen yang berkesesuaian, termasuk tag mereka sendiri. Sebagai contoh,
elemen "<p>" mengindikasikan sebuah paragraf; elemen "<img>" mengindikasikan sebuah
gambar (image).

Sebagian besar elemen dapat menampung elemen lainnya, membentuk sebuah struktur
hierarki. Sebuah halaman web sederhana tapi sempurna akan terlihat seperti berikut:

<html>
<body>

<p> Ini adalah contoh tag html paragraf.</p>

</body>
</html>

Seperti yang anda lihat, elemen <html> menampung dokumen di dalamnya, dan elemen
<body> menampung konten dari halaman web. Struktur ini sering diibaratkan sebagai pohon
yang memiliki cabang-cabang (dalam kasus ini elemen <body> dan <p>) yang tumbuh dari
batang (<html>). Struktur Hierarki ini disebut dengan DOM: Document Object Model.

Tag

Dokumen HTML ditulis dalam teks biasa, bisa juga ditulis menggunakan teks editor apapun
yang memungkinkan isinya disimpan dalam teks biasa (Meski sebagian besar penulis HTML
menganjurkan untuk menggunakan editor spesial yang memiliki syntax highligting dan
menampilkan DOM). Nama tag bisa ditulis dengan huruf kecil atau huruf kapital. Akan tetapi,
W3C (Konsorsium global yang mengurus standarisasi HTML) menganjurkan untuk
menggunakan huruf kecil (dan XHTML mengharuskan menggunakan huruf kecil).

1
HTML menempelkan makna spesial terhadap apa saja yang diawali dengan tanda lebih kecil
dari "<" dan diakhiri dengan tanda lebih besar dari ">" – tanpa tanda kutip. Markup tersebut
disebut dengan tag. Pastikan untuk menutup tag, seperti halnya sebagian tag ditutup secara
bawaan, dan yang lainnya mungkin menghasilkan error yang tidak diinginkan jika anda lupa
menutup tag.

Berikut ini adalah contoh sederhananya:

Dalam contoh di atas terdapat tag pembuka dan tag penutup. Tag penutup sama hanya
dengan tag pembuka tapi memiliki tanda garis miring (/) – lihat contoh di atas. Kebanyakan
elemen-elemen HTML dituliskan menggunakan tag pembuka dan penutup.

Berikut ini adalah contoh kode yang valid:

Dan berikut ini adalah contoh kode yang tidak valid:

Sebagian elemen tidak memiliki konten atau elemen lainnya. Elemen-elemen tersebut
adalah elemen kosong dan tidak membutuhkan tag penutup. Berikut contohnya:

<img src="smileyface.jpg" />

Kebanyakan orang menuliskan markup elemen kosong ini dengan menambahkan garis
miring (/) – yang mana diperintahkan dalam XHTML.

Atribut

Tag pembuka dapat memiliki informasi tambahan, informasi tersebut disebut dengan atribut.
Atribut biasanya terdiri dari 2 bagian:

1. Nama Atribut, dan

2. Nilai Atribut.

2
Sebagian kecil atribut hanya bisa menampung satu nilai. Atribut-atribut tersebut adalah
atribut Boolean dan dapat disingkat dengan hanya menuliskan nama atribut atau
membiarkan nilai atribut kosong. Ketiga contoh berikut memiliki arti yang sama:

<input required="required">

<input required="">

<input required>

Named character references

Named character references (Sering disebut juga entities) digunakan untuk mencetak
karakter yang memiliki makna spesial dalam HTML. Sebagai contoh, HTML menerjemahkan
tanda lebih kecil dari dan lebih besar dari sebagai pemisah tag. Ketika Anda ingin
menampilkan simbol lebih besar dari dalam teks, Anda bisa menggunakan named character
reference. Ada empat named character references yang harus anda ketahui:

 &gt; menandakan lebih besar dari (>)

 &lt; menandakan lebih kecil dari (<)
 &amp; menandakan ampersand (&)
 &quot; menandakan tanda kutip dua (")

Ada banyak entiti, tapi keempat entiti tersebut adalah yang paling penting karena semuanya
menandakan karakter yang memiliki arti spesial bagi HTML. Silahkan kunjungi:
https://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html untuk
mengetahui yang lainnya.

Doctype dan Komentar

Sebagai tambahan dari tag, konten teks dan entitas-entitas, sebuah dokumen HTML harus
memiliki deklarasi doctype yang terdapat dibaris pertama. Deklarasi doctype bukanlah tag
HTML; doctype ini adalah instruksi untuk web browser tentang versi keberapa dokumen
HTML ditulis.

Dalam HTML 4.01, doctype mengacu kepada DTD (Document Type Definition)
sebagaimana HTML ini berbasis SGML (Standard Generalized Markup Language). Ada tiga
deklarasi doctype dalam HTML 4.01.

3
HTML 4.01 Strict

DTD ini berisi seluruh elemen dan atribut HTML, tetapi TIDAK MENYERTAKAN
presentasional atau element-element usang (seperti font). Framesets tidak diizinkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

DTD ini menampung seluruh elemen dan atribut HTML, TERMASUK element yang bersifat
presentasi dan elemn yang usang. Framesets tidak diizinkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

DTD ini sama halnya dengan HTML 4.01 Transitional, namun mengizinkan penggunakan
Framesets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Dalam HTML 5, hanya terdapat satu deklarasi dan deklarasi ini ditulis seperti berikut:

<!DOCTYPE html>

Doctype memiliki sejarang yang panjang dan rumit, tapi untuk sekarang apa yang harus
anda ketahui adalah doctype memberitahu browser untuk menerjemahkan kode HTML dan
CSS sesuai dengan standar W3C.

Komentar

HTML memiliki mekanisme untuk penyertaan komentar yang tidak ditampilkan ketika
halaman diproses dalam browser. Komentar ini berguna untuk menjelaskan beberapa
bagian dalam markup, atau meninggalkan catatan untuk orang lain yang mungkin juga
bekerja dalam halaman tersebut atau meninggalkan pengingat untuk Anda sendiri. Komentar
HTML dibuat dengan menyertakan simbol seperti berikut:

4
 <!-- Silahkan tulis komentar disini -->

Dokumen singkat tapi Sempurna

Yang dituliskan dibawah ini adalah contoh dokumen HTML sederhana. Anda dapat
menuliskan codenya ke dalam teks editor, simpan dengan nama file myfirstsite.html dan
bukalah dengan browser. Pastikan Anda menyimpannya dengan character encoding UTF-8.
Karena dokumen ini tidak menggunakan style maka dokumen ini akan terlihat sangat polos,
tapi ini hanyalah tahap awal.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Pertama Saya</title>
</head>
<body>
<h1>Selamat datang di Web Saya </h1>
<!-- ini adalah komentar (silahkan tulis apapun) -->
<p>Hello!! Ini adalah website pertama saya. Sekarang
saya sudah tahu apa itu <abbr title="Hyper Text
Markup Language"> HTML </abbr>.</p>
</body>
</html>

5
BAB II LATIHAN TAG-TAG HTML

Struktur HTML
<!DOCTYPE html>
<html>
<head>
<!-- tag di dalam head -->
</head>
<body>
<!-- tag di dalam body-->
</body>
</html>

Tag Heading

Heading adalah sekumpulan kata yang dijadikan judul atau subjudul dalam konten halaman
web, dan html menyediakan enam tingkatan: <h1>, <h2>, <h3>, … <h6>.

<!DOCTYPE html>
<html>
<head>
<title>Tag Heading</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

Tag Paragraf

Untuk membuat paragraf digunakan tag <p> …isi paragraph… </p>, untuk mengatur
posisi dari paragraf dengan atribut align dengan nilai atribut: left, center, dan right.

<!DOCTYPE html>
<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>

6
 <p>
Ini adalah paragraf
</p>
<p align=”left”>
Ini adalah paragraf kedua dengan posisi kiri
</p>
<p align=”center”>
Ini adalah paragraf ketiga dengan posisi tengah
</p>
<p align=”right”>
Ini adalah paragraf keempat dengan posisi kanan
</p>
</body>
</html>

Tag List

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak
berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered
list dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan
untuk list sendiri menggunakan tag <li>.

Berikut ini contoh kode HTML menggunakan ordered list menggunakan tag <ol>:

<!DOCTYPE html>
<html>
<head>
<title>Tag List 1</title>
</head>
<body>
<h2>Jenis-Jenis Olahraga:</h2>
<li>
<ol>Sepakbola</ol>
<ol>Basket</ol>
<ol>Voly</ol>
<ol>Bulutangkis</ol>
</li>
</body>
</html>
,dan menggunakan unordered list menggunakan tag <ul>:

<!DOCTYPE html>
<html>
<head>
<title>Tag List 2</title>
</head>
<body>

7
 <h2>Daftar Jurusan AMIK BSI:</h2>
<li>
<ul>Komputerisasi Akuntansi</ul>
<ul>Manajemen Informatika</ul>
<ul>Teknik Komputer</ul>
</li>
</body>
</html>

Tag Image

Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan
<img>.

Atribut src

Atribut “src” adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar
yang akan ditampilkan.

<!DOCTYPE html>
<html>
<head>
<title>Tag Image</title>
</head>
<body>
<h2>Menampilkan gambar</h2>
<img src=”gambar1.jpg”>
</body>
</html>

Atribut alt

Atribut “alt” adalah singkatan dari alternative description, dimana alt digunakan untuk
keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser.

Atribut width dan height

Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan,
yaitu width dan height.

<!DOCTYPE html>
<html>
<head>
<title>Tag Image</title>
</head>
<body>
<h2>Menampilkan gambar</h2>
<img alt="Gambar Koala" src="koala.jpg"
height="200" width="100" />

8
 </body>
</html>

Tag Table

Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>,
<tr>, dan <td>:

 Tag <table> digunakan untuk memulai tabel

 Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari
tabel.
 Tag <td> adalah singkatan dari table data (kolom), digunakan untuk menginput data
ke tabel.

Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>

9
Tag Link

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan
pindah ke halaman lainnya. Link ditulis dengan tag <a> yang merupakan singkatan cari
anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi
alamat yang dituju (href adalah singkatan dari hypertext reference).

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar HTML, klik untuk membuka
<a href="http://student.bsi.ac.id "> Ruang Mahasiswa BSI</a>
</p>
</body>
</html>

Tag Form

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form>
dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat
berfungsi dengan seharusnya.

Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan
dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman yang
digunakan untuk memproses isi data form.

Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form
akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa “get” atau “post”.

Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form,
input, textarea, select dan option.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form</title>
</head>
<body>
<form method="get">
Nama: <input type="text" name="nama" value="Nama Kamu" />
<br />

10
 Password: <input type="password" name="password" />
<br />

Jenis Kelamin :
<input type="radio" name="gender" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="gender" value="perempuan" />
Perempuan
<br />

Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku

<input type="checkbox" name="hobi_nulis" /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
<br />

Asal Kota:
<select name="asal_kota" >
<option value="Jakarta"> Jakarta</option>
<option value="Bandung”>Bandung</option>
<option value="Semarang">Semarang</option>
</select>
<br />

Komentar Anda:
<textarea name="komentar" rows="5" cols="20">
Silahkan katakan isi hati anda…
</textarea>
<br />

<input type="submit" value="Mulai Proses!" >

</form>
</body>
</html>

Mendesain Template Untuk Website

Template Website merupakan salah satu bahan dokumen atau file yang sangat di butuhkan
dalam hal pembuatan website. Template atau Theme merupakan dokumen atau file yang
berisikan model-model tambahan yang akan muncul pada saat proses pembuatan dokumen
lain. Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan
informasi dan tertanam pada World Wide Web (www). Dari pengertian 2 kata diatas,
pengertian Template Website adalah sebuah desain tampilan halaman dengan berisikan
dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap
pakai.

Disini kita akan membagi layout desain kedalam 4 bagian horisontal yang terdiri dari:
header, navigasi, section, dan footer. Struktur HTML yang akan dibuat sebagai berikut:

11
 <header class=”container”>HEADER</header>
<nav class=”container”>NAVIGATION</nav>
<section class=”container”>Main Content</section>
<footer class=”container”>HEADER</footer>

Kode CSS (Cascading Style Sheet) yang akan digunakan untuk layout di atas adalah
sebagai berikut:

*{margin:0px;padding:0px}
header, footer, section, nav{
display:blocks;
}
.container{

12
 margin:0 auto;
margin-top:15px;
width:980px;
}

Membut Navigasi menu, untuk membuat navigasi menu menggunakan daftar berurut
(ordered list) atau tag <ul> yang ditempatkan di dalam tag <nav>.

<nav class=”container” id=”nav”>

<ul>
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</nav>

Kode CSS yang digunakan adalah sebagai berikut:

#nav{
overflow:auto;
}
#nav ul{
list-syle: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li{
float: left;
margin: 10px;
}

Selanjutnya menentukan struktur content website, section (bagian) adalah elemen yang
akan kita gunakan untuk membuat main page (halaman utama) dimana section dibagi lagi
menjadi dua bagian yaitu posting dan sidebar.

<section class = ”container” id = ”main”>

<section id = ”content” >Posting</section>
<aside id = ”sidebar”>Sidebar</aside>
</section>

13
Kode CSS yang digunakan adalah sebagai berikut:

#main{
overflow: auto;
}
#content{
float: left;
width: 640px;
}
#sidebar{
float: right;
width: 320px
}

Membuat isi dari content website, isi dari content web dengan article dan judul dari article
adalah bagian terpenting dan diharuskan menggunakan tag <h1>.

<article>
<header>Judul Artikel</header>
<p>
Posting artikel
</p>
</article>

14
Untuk penambahan artike berjajar kebawah bualah struktur yang sama seperti dibawah ini:

<section id=”content”>
<article>
<header>Judul Artikel</header>
<p>
Posting artikel
</p>
</article>

<article>
<header>Judul Artikel</header>
<p>
Posting artikel
</p>
</article>
Dan seterusnya...
</section>

15
Hasil tampilan dari template website tersebut seperti pada gambar dibawah in

Simpan dengan Nama file: home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"; charset=UTF-8">
<link rel="stylesheet" href="style/style.css"/>
<title>Latihan Template</title>
</head>
<body>
<!--header-->
<header class="container" id="header">
<h1>Sistem Informasi Akuntansi</h1>
<h2>Bina Sarana Informatika</h2>
</header>
<!--End header-->
<!--Navigation-->
<nav class="container" id="nav">
<ul>
<li><a href="home.jsp">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>
<!--End Nav-->
<!--Section-->
<section class = "container" id = "main">
<section id = "content" >
<article>

16
 <header>
<h1>SELAMAT DATANG DI WEBSITE KAMI</h1>
</header>
<p>
…isi Artikel…
</p>
</article>
</section>
<aside id = "sidebar">
<ul>
<li a href="#">Akun</a></li>
<li a href="#">Saldo Awal</a></li>
<li a href="#">Informasi Perusahaan</a></li>
<li a href="#">Periode Akuntansi</a></li>
</ul>
</aside>
</section>
<!--End Section-->
<!--Footer-->
<footer class="container" id="footer">
<p align="center">
Selamat Belajar dan Semoga Berhasil
</p>
</footer>
<!--End Footer-->
</body>
</html>

Selanjutnya buatlah folder dengan nama: syle untuk menyipan file dari css.

Simpan dengan Nama file: style.jsp

*{margin: 0px; padding: 0px}
header, footer, section, nav{display:blocks;}
.container{
margin:0 auto;
margin-top:15px;
width:980px;
font-family: arial;
margin-top: 20px
}
#main, #header, #nav{
overflow: auto;
}
#content{
float: left;
width: 640px;
}
#sidebar{
float: right;
width: 320px
}
#nav{
overflow:auto;

17
}
#nav ul{
list-syle: none;
height: 30px;
padding: 0px;
margin: 10px;
}
#nav ul li{
float: left;
font-size: 12px;
font-weight: bold;
margin: 10px;
}

TUGAS UTS

Buatlah desain template dari struktur di bawah ini:

Header

Navigation

Isi Content

Sidebar Footer

Note: Buatlah template semenarik mungkin…! (Selamat mengerjakan)

18
BAB III JavaServer Pages (JSP)

Java Server Pages (JSP) merupakan teknologi server script yang berbasis pada bahasa
Java, dimana dapat digunakan untuk membangung situs (website) yang bersifat dinamis.
JSP merupakan bahasa server script yang diciptakan oleh SUN Microsystem agar para
developer bisa membangun aplikasi server. Untuk anda ketahui, file yang dibuat dengan JSP
adalah file-file HTML biasa dimana di embeded dengan tag khusus yang berisi perintah-
perintah JSP, dan dalam hal ini merupakan bahasa Java itu sendiri.

Scripting Elements

Scripting elemen menyediakan kemampuan untuk menyisipkan kode java kedalam jsp. Ada
tiga jenis scripiting elemen, yaitu:

 Scriptlet tag
 Expresion tag
 Declaration tag

Scriplet Tag digunakan untuk mengeksekusi perintah java source code di jsp.

Sintax: <% scripting-language-statements %>

Contoh: <% out.print("Belajar JSP"); %>

Expresion Tag, digunakan untuk mencetak nilai dari variabel atau metode.

Sintax: <%= Pernyataan %>

Contoh: <%= "Selamat datang untuk jsp"%>

Note: jangan mengakhiri pernyataan dengan titik koma dalam kasus tag ekspresi.

Contoh lain dari penggunaan tag ekspresi untuk mencetak waktu saat ini. Untuk mencetak
waktu saat ini, kita harus menggunakan metod getTime() dari class Calender.

Waktu saat ini:

<%= java.util.Calendar.getInstance()getTime()%>
Declaration Tag, digunakan untuk mendeklarasikan fields dan methods.

19
Sintax: <%! fields atau methods declaration %>

Contoh:
<%! int data=50; %>
<%= "nilai dari variabel adalah:" + data %>

JSP Directives

JSP Directives adalah elemen yang menyampaikan pesan pada JSP container dan
mempengaruhi bagaimana mengkompilasi halaman JSP.

Ada tiga jenis JSP Directives: Page, Include, dan Taglib.

Sintax: <%@ directive attribute="value" %>

Page Directives

Digunakan untuk mendefinisikan atribut-atribut yang terdapat pada halaman jsp. Atribut-
atribut ini seperti: language, import, info, errorpage dan lain-lain. Cara penulisannya dengan
menggunakan tanda @ setelah tag jsp (<%), kemudian diikuti kata page dan atributnya.

Sintax:
<%@ page [language="" ] [ extends="" ] [ import="" ]
[ session="t|f" ] [ buffer="" ] [ autoFlush=" " ]
[ isThreadSafe=" " ][ info=" " ] [ errorPage=" " ]
[ contentType=" " ] [ isErrorPage=" " ] %>
Contoh: <%@ page language=”java” %>

Include Directives

Digunakan untuk menyisipkan suatu berkas atau mengimport suatu kelas. Cara
penulisannya dengan menggunakan tanda @ setelah tag jsp (<%), kemudian diikuti kata
include dan atributnya.

Sintax: <% @ include file="filename" % >

Contoh: <%@ page import=”java.io.*, java.sql.*” %>

Taglib Directives

Digunakan untuk mendefinisikan tag-tag yang dibuat sendiri oleh pemrogram. Tag-tag
tersebut biasanya disimpan dalam “tag library” dalam bentuk file yang dikompres (ZIP atau

20
JAR). Dalam file yang dikompres tersebut terdapat class-class dalam suatu paket. Dan untuk
memanggil atau mengoperasikan method atau properti dalam class tersebut digunakan
directive ini. Cara penulisannya dengan menggunakan tanda @ setelah tag jsp (<%),
kemudian diikuti kata taglib dan atributnya.

Sintax: <%@ taglib uri="URIToTagLibrary" prefix="tagPrefix" %>

Contoh:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<p>Contoh Sederhana dari c:out </p>
Perkalian 5 dan 2 adalah <c:out value="${5*2}"/>

Latihan 1
Simpan file dengan nama: latihan1.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><title>First JSP</title></head>
<body>
<%
double num = Math.random();
if (num > 0.95) {
%>
<h2>Selamat Anda Beruntung</h2><p>(<%= num %>)</p>
<%
} else {
%>
<h2>Silahkan Coba lagi!... </h2><p>(<%= num %>)</p>
<%
}
%>
<a href="<%= request.getRequestURI()%>"><h3>Klik disini</h3></a>
</body>
</html>

Penjelasan:
1. Sebuah script JSP adalah halaman HTML biasa yang berisi program Java. Ingatlah
bahwa JSP adalah "Java dalam HTML" (sedangkan servlet adalah "HTML dalam Java").
Statement Java diapit oleh <% ... %> (disebut JSP scriptlet) atau <%= ... %> (disebut
JSP Expression).
2. JSP Scriptlet <% ... %> digunakan untuk menyertakan statement Java.
3. JSP Expression <%= ... %> digunakan untuk mengevaluasi single ekspresi Java dan
menampilkan hasilnya.
4. Metode request.getRequestURI() digunakan untuk mengambil URL dari halaman saat
ini. Ini digunakan dalam anchor tag <a> untuk menyegarkan halaman untuk
mendapatkan nomor acak lain.

21
JSP – FORM Processing
Form digunakan untuk mengumpulkan data dari pengunjung web, mulai dari login form,
pendaftaran dan mengirimkan data antar halaman web. Penggunaan form dengan html tidak
akan terlalu berguna, form biasanya hanya berupa interface yang disediakan untuk
mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web lainnya.
Didalam tag form tedapat atribut yaitu method, berfungsi untuk menjelaskan bagaimana data
isian form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa “get” atau
“post”.
Perbedaan method get dan method post, jika kita mengisi atribut method dengan get (default
seandainya atribut method tidak ditulis) maka isian form akan terlihat pada url browser –
method get ini biasanya digunakan untuk query pencarian.
Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password,
atau registrasi user –data hasil form tidak akan terlihat pada browser.

Reading Form Data dengan JSP

Untuk membaca nilai dari form html menggunakan beberapa method, sebagai berikut:
 getParameter()
call request.getParameter() method untuk mendapatkan nilai dari form parameter.
 getParameterValues()
pemanggilan method ini jika parameter muncul lebih dari sekali dan memiliki banyak
isi/nilai, sebagai conto adalah penggunaan checkbox.
 getParameterNames()
 getInputStream()

Latihan 2
Simpan file dengan nama: latihan2.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>HTML Request Parameters</title>
</head>
<body>
<h3>Silahkan pilih hobi anda:</h3>
<form method="get">
<input type="checkbox" name="hobi" value="Olahraga">Olahraga
<input type="checkbox" name="hobi" value="Membaca">Membaca
<input type="checkbox" name="hobi"
value="Travelling">Travelling
<input type="submit" value="Submit">
</form>

22
 <%
String[] authors = request.getParameterValues("hobi");
if (authors != null) {
%>
<h3>Hobi anda adalah </h3>
<ul>
<%
for (int i = 0; i < authors.length; ++i) {
%>
<li><%= authors[i]%></li>
<%
}
%>
</ul>
<a href="<%= request.getRequestURI()%>">BACK</a>
<%
}
%>
</body>
</html>

Penjelasan:
1. Halaman HTML ini memiliki form dengan tiga cekbox. "name=value" nama dari cekbox
tersebut adalah "hobi". Tidak ada atribut "action" yang ditentukan pada tag form, jadi
default "action" adalah halaman itu sendiri (permintaan akan dikirim ke halaman yang
sama).
2. JSP scriptlet memeriksa apakah parameter query "author" ada untuk memutuskan atau
untuk menghasilkan halaman yang dinamis. Parameter "author" tidak ada saat halaman
pertama diminta. Setelah klien mengisi form (dengan mencentang kotak cekbox) dan
meng-klik Submit, "author" akan ada dalam HTTP request, dan diserahkan ke halaman
yang sama untuk diproses.
3. request.getParameterValues(), digunakan untuk mengambil semua nilai-nilai
parameter.

Latihan 3
Simpan file dengan nama: latihan3.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>HTML Request Parameters</title>
</head>
<body>
<h3>Silahkan pilih hobi anda:</h3>
<form method="get">
<input type="text" name="nama_depan"

23
 placeholder="Entry nama depan" />
<input type="text" name="nama_belakang"
placeholder="Entry nama belakang" />
<input type="submit" value="Submit">
<input type="reset" value="Batalkan">
</form>

<%
String nama_depan = request.getParameter("nama_depan");
String nama_belakang = request.getParameter("nama_belakang");
if (request.getParameter("submit") != "") {
out.println("<h2>Nama anda adalah " + nama_depan
+ " " + nama_belakang + "</h2>");
}
%> </body>
</html>

Tugas
Buatlah halaman web seperti di bawah ini:

Gambar 1 Tampilan Web di Browser

24
 Gambar 2 Hasil Web setelah [Submit] diKlik

JSP – Sessions
Session adalah cara untuk menyimpan informasi (di dalam variabel) untuk digunakan pada
halaman web yang berbeda.

Latihan Session

Simpan file dengan nama: login.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<form action="proses.jsp" method="post">
<input type="text" name="uname" placeholder="Entry Nama..."/>
<input type="submit" value="Login"/>
</form>
</body>
</html>

25
Simpan file dengan nama: proses.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<body>
<%
session.setAttribute("login", request.getParameter("uname"));
response.sendRedirect("index.jsp");
%>
</body>
</html>

Simpan file dengan nama: index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP - Session</title>
</head>
<body>
<h1>SELAMAT DATANG </h1>
<%
String uname = (String) session.getAttribute("login");
if (uname != null) {
out.println("<h2><i>" + uname + "</i></h2>");
out.println("<a href=logout.jsp>Logout</a>");
} else {
out.println("Silahkan login terlebih dahulu...");
out.println("<a href=login.jsp>Login</a>");
}
%>
</body>
</html>

Simpan file dengan nama: logout.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<body>
<%
session.setAttribute("login", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>
</body>
</html>

26
BAB IV Java Web Database Application

Sintax MySQL Statement

-- Database-Level
DROP DATABASE databaseName; -- Delete the database (irrecoverable!)
DROP DATABASE IF EXISTS databaseName; -- Delete if it exists
CREATE DATABASE databaseName; -- Create a new database
CREATE DATABASE IF NOT EXISTS
databaseName; -- Create only if it does not exists

SHOW DATABASES; -- Show all the databases in this server

USE databaseName ; -- Set the default (current) database
SELECT DATABASE() ; -- Show the default database
SHOW CREATE DATABASE databaseName; -- Show the CREATE DATABASE statement

-- Table-Level
DROP TABLE [IF EXISTS] tableName, ...;
CREATE TABLE [IF NOT EXISTS] tableName (
columnName columnType columnAttribute, ...
PRIMARY KEY(columnName),
FOREIGN KEY (columnNmae) REFERENCES tableName (columnNmae)
);
SHOW TABLES; -- Show all the tables in the default database
DESCRIBE|DESC tableName ; -- Describe the details for a table
ALTER TABLE tableName ...; -- Modify a table, e.g., ADD COLUMN
-- and DROP COLUMN
ALTER TABLE tableName ADD columnDefinition;
ALTER TABLE tableName DROP columnName;
ALTER TABLE tableName ADD FOREIGN KEY (columnNmae) REFERENCES tableName
(columnNmae);
ALTER TABLE tableName DROP FOREIGN KEY constraintName;
SHOW CREATE TABLE tableName ; -- Show the CREATE TABLE statement
-- for this tableName
-- Row-Level
INSERT INTO tableName
VALUES (column1Value, column2Value,...); -- Insert on all Columns
INSERT INTO tableName
VALUES (column1Value, column2Value,...), ...; -- Insert multiple rows
INSERT INTO tableName (column1Name, ..., columnNName)
VALUES (column1Value, ..., columnNValue); -- Insert on selected Columns
DELETE FROM tableName WHERE criteria;
UPDATE tableName SET columnName = expr, ... WHERE criteria;
SELECT * | column1Name AS alias1, ..., columnNName AS aliasN
FROM tableName
WHERE criteria
GROUP BY columnName
ORDER BY columnName ASC|DESC, ...
HAVING groupConstraints
LIMIT count | offset count;

-- Others
SHOW WARNINGS; -- Show the warnings of the previous statement

27
Dasar – Dasar SQL (Structured Query Language)
SQL kependekan dari Structured Query Language. SQL atau juga sering disebut sebagai
query merupakan suatu bahasa (language) yang digunakan untuk mengakses database.
SQL dikenalkan pertama kali dalam IBM pada tahun 1970 dan sebuah standar ISO dan
ANSII ditetapkan untuk SQL. Standar ini tidak tergantung pada mesin yang digunakan (IBM,
Microsoft atau Oracle). Hampir semua software database mengenal atau mengerti SQL.
Jadi, perintah SQL pada semua software database hampir sama. Terdapat 3 (tiga) jenis
perintah SQL, yaitu:
DDL (Data Definition Language)
DDL merupakan perintah SQL yang berhubungan dengan pendefinisian suatu struktur
database, dalam hal ini database dan tabel.
Perintah SQL yang termasuk kedalam DDL, yaitu: CREATE, ALTER, RENAME, dan
DROP
DML (Data Manipulation Language)
DML merupakan perintah SQL yang berhubungan dengan manipulasi atau pengolahan
data atau record dalam tabel.
Perintah SQL yang termasuk kedalam DML, yaitu: SELECT, INSERT, UPDATE, dan
DELETE.
DCL (Data Control Language)
DCL merupakan perintah SQL yang berhubungan dengan manipulasi user dan hak
akses (priviledges).
Perintah SQL yang termasuk dalam DCL, yaitu: GRANT dan REVOKE

Perintah DDL (Data Definition Laguage)

CREATE
ALTER
DROP

Membuat Database
Sintax SQL untuk membuat database adalah sebagai berikut:

CREATE DATABASE [IF NOT EXISTS] nama_database;

Dari perintah diatas aturan penamaan pada nama_database sama seperti aturan penamaan
pada sebuah variable, dimana secara umum nama database dapat terdiri dari huruf, angka
dan under-score. Perintah yang terdapat di dalam tanda ‘[‘ dan ‘]’ –tanpa tanda petik/kutip

28
satu bersifat optional (boleh disertakan atau juga tidak dituliskan). Jika perintah IF NOT
EXISTS digunakan maka akan menghapus database yang memiliki nama yang sama.
Misalkan kita akan membuat database dengan nama database “persediaan”, perintah yang
digunakan adalah sebagai berikut:
CREATE DATABASE persediaan;
Kemudian untuk melihat database yang telah dibuat dapat menggunakan perintah sebagai
berikut:
SHOW DATABASES;
Sebelum melakukan perubahan/manipulasi pada tabel atau record terlebih dahulu kita harus
membuka atau mengaktifkan database terlebih dahulu, perintah yang digunakan untuk
membuka database “penjualan” adalah sebagai berikut:
USE penjualan;

Menghapus Database
Sintax SQL untuk menghapus database adalah sebagai berikut:

DROP DATABASE [IF EXISTS] nama_database;

Dari perintah tersebut kita akan menghapus database “penjualan” yang telah dibuat dengan
perintah sebagai berikut:
DROP DATABASE penjualan;
Perintah IF EXISTS digunakan untuk memastikan bahwa database yang akan dihapus
benar-benar ada.

Membuat Tabel
Sintax SQL untuk membuat tabel secara sederhana adalah sebagai berikut:

CREATE TABLE nama_table(

Kolom1 TipeData[(size)],
Kolom2 TipeData[(size)],
…
Kolom_n TipeData[(size)]
);

29
Sintax membuat tabel dengan Primary Key

CREATE TABLE nama_table(

Kolom1 TipeData[(size)],
Kolom2 TipeData[(size)],
…
Kolom_n TipeData[(size)],
PRIMARY KEY(Kolom1 [, Kolom2, … Kolom_n])
);

Sebagai contoh kita akan membuat tabel “mahasiswa” dengan struktur tabel sebagai
berikut:
Nama Kolom/Field Tipe Size
NIM* INT 8
Nama_mhs VARCHAR 30
Jurusan VARCHAR 20

Untuk membuat tabel “mahasiswa” di atas dengan “nim” sebagai primary key, perintah SQL
yang digunakan adalah sebagai berikut:

CREATE TABLE mahasiswa(

Nim INT(8),
Nama_mhs VARCHAR(30),
Jurusan VARCHAR(20),
PRIMARY KEY(NIM)
);

Selanjutnya untuk melihat tabel tersebut benar sudah ada pada database dengan
menggunakan sintax SQL:
SHOW TABLES;
Untuk melihat struktur tabel dari tabel “mahasiswa” secara mendetail sintax SQL yang
digunakan adalah sebagai berikut:
DESC mahasiswa;
DESC merupakan kependekan dari DESCRIBE (dapat ditulikan lengkap atau hanya 4 karakter
awal) dan mahasiswa adalah nama tabel yang akan di lihat struktur tabaelnya.

Perintah ALTER TABLE

Perintah ini digunakan untuk menambah, menghapus atau mengubah dari struktur tabel
yang telah terbentuk, perintah-perintah SQL ALTER yang umum digunakan adalah sebagai
berikut:

30
Menambah Kolom

ALTER TABLE nama_table

ADD nama_kolom TipeData[(size)];
Menambahkan Primary Key

ALTER TABLE nama_table

ADD PRIMARY KEY(nama_kolom1 [,nama_kolom2,
nama_kolom_n]);

Menghapus Kolom

ALTER TABLE nama_table

DROP [COLUMN] nama_kolom;
Merubah tipe data

ALTER TABLE nama_table

MODIFY [COLUMN] nama_kolom TipeData [(size)];
Mengubah nama kolom dan tipe data

ALTER TABLE nama_table

CHANGE nama_kolom_lama
nama_kolom_baru TipeData[(size)];

Sebagai contoh perhatikan tabel “mahasiswa” yang telah dibuat sebelumnya:

Nama Kolom/Field Tipe Size
NIM* INT 8
Nama_mhs VARCHAR 30
Jurusan VARCHAR 20

Menambahkan Kolom
Sekarang kita akan menambahkan sebuah kolom dengan nama “Tanggal_lahir”, perintah
yang digunakan:
ALTER TABLE mahasiswa ADD Tanggal_lahir DATE;
Merubah Tipe
Masih dari tabel yang sama kita akan mengganti tipe dari kolom “NIM” pada tabel
mahasiswa, perintah yang digunakan:
ALTER TABLE mahasiswa MODIFY COLUMN NIM CHAR(8) NOT NULL;
Menghapus Kolom
Sekarang kita akan menghapus kolom “Tanggal_Lahir” dari tabel mahasiswa, perintah SQL
ALTER TABLE yang digunakan:
ALTER TABLE mahasiswa DROP COLUMN Tanggal_lahir;
Merubah Nama Tabel

31
Perintah SQL yang digunakan untuk mengganti nama tabel adalah sebagai berikut:
RENAME TABLE nama_tabel TO nama_tabel_baru;
Atau
ALTER TABLE nama_tabel RENAME TO nama_tabel_baru;
Contoh: RENAME TABLE mahasiswa TO mhs;

Perintah DROP
Sintax SQL yang digunakan untuk menghapus database atau tabel, perintah yang digunakan
adalah sebagai berikut:
DROP DATABASE nama_database;
Perintah di atas digunakan untuk menghapus database, dan untuk menghapus tabel sintax
yang digunakan:
DROP TABLE nama_tabel;
Contoh: DROP TABLE mhs;

Perintah DML (Data Manipulation Language)

INSERT
UPDATE
DELETE
SELECT

INSERT
Perintah SQL INSERT digunakan untuk menambahkan data baru pada tabel, perintah yang
digunakan adalah sebagai berikut:
INSERT INTO nama_tabel
VALUES(‘str_nilai1’, ‘str_nilai2’, int_nilai3, nilai_n);
INSERT INTO nama_tabel(kolom1, kolom2, …kolom_n)
VALUES(‘str_nilai1’, ‘str_nilai2’, int_nilai3, nilai_n);
INSERT INTO nama_tabel
SELECT ‘str_nilai1’, ‘str_nilai2’, int_nilai3, nilai_n;
Sebagai contoh kita akan menambahkan data baru pada tabel mahasiswa, perintah SQL
INSERT yang digunakan adalah sebagai berikut:
Menambahkan satu record pada tabel mahasiswa, perintahnya:
INSERT INTO mahasiswa
VALUES(‘11130011’, ‘Areta Dewi’, ‘Komp. Akuntansi’);

32
Menambahkan beberapa record pada tabel mahasiswa, perintahnya:
INSERT INTO mahasiswa VALUES
(‘11130011’, ‘Areta Dewi’, ‘Komp. Akuntansi’),
(‘11130012’, ‘Yudhistira’, ‘Komp. Akuntansi’),
(‘11130013’, ‘Riyadi’, ‘Komp. Akuntansi’);

UPDATE
Perintah SQL UPDATE digunakan untuk mengedit/mengubah data pada tabel, perintah yang
digunakan adalah sebagai berikut:
UPDATE nama_tabel SET kolom = nilai_baru [WHERE kondisi];
Contoh:
Mengubah nama_mhs menjadi ‘Rajwa’ pada tabel mahasiswa yang mempunyai nim
‘11130011‘, perintahnya:
UPDATE mahasiswa SET nama_mhs = ‘Rajwa’
WHERE nim = ‘11130011’;
Mengubah nama_mhs menjadi ‘Raisa’ dan jurusan menjadi ‘Komputerisasi Akuntansi’
pada tabel mahasiswa yang mempunyai nim ‘11130012’, perintahnya:
UPDATE mahasiswa SET
nama_mhs = ‘Rajwa’,
jurusan = ‘Komputerisasi Akuntansi’
WHERE nim = ‘11130011’;

DELETE
Perintah SQL DELETE digunakan untuk menghapus data pada tabel, perintah yang
digunakan adalah sebagai berikut:
DELETE FROM nama_tabel [WHERE kondisi];
Contoh:
Menghapus data pada tabel mahasiswa dengan nim ‘11130013’, perintahnya:
DELETE FROM mahasiswa WHERE nim = ‘11130013’;
Menghapus semua data pada tabel mahasiswa dengan jurusan ‘Komp. Akuntansi’,
perintahnya:
DELETE FROM mahasiswa WHERE jurusan = ‘Komp. Akuntansi’;

SELECT
Perintah SQL SELECT digunakan untuk menampilkan data pada tabel, perintah yang
digunakan adalah sebagai berikut:

33
SELECT * FROM nama_tabel [WHERE kondisi];
SELECT kolom1, kolom2, kolom3, kolom_n
FROM nama_tabel [WHERE kondisi];
Contoh:
Menampilkan seluruh kolom pada tabel mahasiswa, perintahnya:
SELECT * FROM mahasiswa;
Menampilkan hanya beberapa kolom pada tabel mahasiswa, perintahnya:
SELECT nim, nama_mhs FROM mahasiswa;
Menampilkan seluruh kolom pada tabel mahasiswa dengan nim ‘11130012’, perintahnya:
SELECT * FROM mahasiswa WHERE nim = ‘11130012’;

JOIN TABLE
Join Table digunakan untuk menggabungkan dua atau lebih tabel berdasarkan field-field
pada tabel tersebut.
Lihat pada tabel ‘Orders’ di bawah ini:

dan lihat pada tabel ‘Customer’ di bawah ini:

INNER JOIN
Dengan INNER JOIN kita dapat menggabungkan dua atau lebih tabel, dimana semua baris
pada tabel-tabel yang ditampilkan sesuai denga kondisi join dan tidak ada nilai NULL pada
sisinya.
Perintah SQL INNER JOIN adalah sebagai berikut:
SELECT kolom1, kolom2, kolom3, …kolom_n
FROM tabel1
INNER JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Atau:

34
SELECT kolom1, kolom2, kolom3, …kolom_n
FROM tabel1
JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Dari contoh di atas terdapat dua buah tabel “Orders” dan “Customer”, dari kedua tabel
tersebut perhatikan bahwa kolom “CustomerID” pada tabel “Orders” mengacu pada kolom
“CustomerID” yang ada pada tabel “Customer”. Relasi pada kedua tabel di atas adalah
kolom “CustomerID”.
SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate
FROM Orders
INNER JOIN Customers
ON Orders.CustomerID=Customers.CustomerID;
Hasil dari queri tersebut, adalah:

OUTER JOIN
Dengan OUTER JOIN tabel akan digabungkan satu arah, sehingga memungkinkan ada data
yang memiliki nilai NULL (kosong) di satu sisi. OUTER JOIN terbagi menjadi LEFT JOIN,
dan RIGHT JOIN.

LEFT JOIN
Perintah LEFT JOIN akan menampilkan seluruh tabel dari tabel sisi kiri (tabel1), dengan
menyamakan baris pada tabel sisi kanan (tabel2). Hasil yang ditampilkan akan terdapat nilai
NULL (kosong) pada sisi kanan ketika data tidak sesuai.
Perintah SQL LEFT JOIN, adalah sebagai berikut:
SELECT kolom1, kolom2, kolom3, …kolom_n
FROM tabel1
LEFT JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Atau:
SELECT kolom1, kolom2, kolom3, …kolom_n

35
 FROM tabel1
LEFT OUTER JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Contoh:
SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate
FROM Orders
LEFT JOIN Customers
ON Orders.CustomerID=Customers.CustomerID;
Note: Perintah LEFT JOIN menampilkan baris dari sisi tabel kiri (Orders), bahkan jika tidak
ada kesamaan pada sisi tabel kanan (Customer).

RIGHT JOIN
Perintah RIGHT JOIN akan menampilkan seluruh tabel dari tabel sisi kanan (tabel1), dengan
menyamakan baris pada tabel sisi kiri (tabel2). Hasil yang ditampilkan akan terdapat nilai
NULL (kosong) pada sisi kiri ketika data tidak sesuai.
Perintah SQL RIGHT JOIN, adalah sebagai berikut:
SELECT kolom1, kolom2, kolom3, …kolom_n
FROM tabel1
RIGHT JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Atau:
SELECT kolom1, kolom2, kolom3, …kolom_n
FROM tabel1
RIGHT OUTER JOIN tabel2
ON tabel1.kolom_PK = tabel2.kolom_FK;
Contoh:
SELECT Orders.OrderID, Customers.CustomerName,Orders.OrderDate
FROM Orders
RIGHT JOIN Customers
ON Orders.CustomerID=Customers.CustomerID;
Note: Perintah RIGHT JOIN menampilkan baris dari sisi tabel kanan (Customer), bahkan jika
tidak ada kesamaan pada sisi tabel kiri (Orders).

Latihan

Ketikan perintah-perintah di bawah ini, dan jelaskan perintah tersebut!

36
1. CREATE DATABASE eprodukshop;
2. CREATE TABLE produk (
produk_id int(10) unsigned NOT NULL AUTO_INCREMENT,
nama_produk varchar(30) DEFAULT NULL,
harga double DEFAULT '1',
qty int(2) DEFAULT '1',
PRIMARY KEY (produk_id)
);
3. INSERT INTO produk VALUES ( NULL,'Java for
dummies','100','10');
4. INSERT INTO produk VALUES ( NULL,'Membangun Web Application
dengan JSP','50','22');
5. INSERT INTO produk VALUES ( NULL,'PHP dan MySQL','120','30');
6. SELECT * FROM produk;
7. SELECT * FROM produk WHERE harga >= 100;
8. SELECT * FROM produk WHERE nama_produk LIKE ‘%app%’;

37
 BAB V Membuat Web dengan Database

Buatlah halaman web seperti di bawah ini, dan simpan dengan nama: produk.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Data Produk</title>
</head>
<body>
<form method="POST" action="ProdukSrv">
<table border="0" cellspacing="4" cellpadding="3" align="center">
<caption><h2>Data Produk</h2></caption>
<tbody>
<tr>
<td>Nama Produk</td>
<td><input type="text" name="nama" size="50" /></td>
</tr>
<tr>
<td>Harga@</td>
<td><input type="text" name="harga" size="10" /></td>
</tr>
<tr>
<td>Qty</td>

38
 <td><input type="text" name="qty" size="10" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Simpan" name="submit" />
<input type="reset" value="Batal" name="reset" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Selanjutnya buatlah Java Class… dengan nama Produk di package com.mypkg.model,

tuliskan code berikut ini:

package com.mypkg.model;

public class Produk {

private String produkID;
private String namaProduk;
private double harga;
private int qty;

public String getProdukID() {

return produkID;
}

public void setProdukID(String produkID) {

this.produkID = produkID;
}

public String getNamaProduk() {

return namaProduk;
}

public void setNamaProduk(String namaProduk) {

this.namaProduk = namaProduk;
}

public double getHarga() {

return harga;
}

public void setHarga(double harga) {

this.harga = harga;
}

public int getQty() {

return qty;

39
 }

public void setQty(int qty) {

this.qty = qty;
}

@Override
public String toString(){
return "Produk: [ID = " + produkID + ", Nama Produk = " +
namaProduk + ", Harga = " + harga + ", Qty = " + qty + "]";
}
}

Selanjutnya buatlah Sevlet… dengan nama Produk di package com.mypkg.controller,

tuliskan code (yang tercetak tebal) berikut ini:

package com.mypkg.controller;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.sql.*;
import com.mypkg.model.Produk;

public class ProdukSrv extends HttpServlet {

/* public ProdukSrv() {
super();
} */

protected void processRequest(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

Produk produk = new Produk(); //--inisialisasi Object

produk.setNamaProduk(request.getParameter("nama"));
produk.setHarga(Double.parseDouble(request.getParameter("harga")));
produk.setQty(Integer.parseInt(request.getParameter("qty")));

String URL = "jdbc:mysql://localhost:3306/eprodukshop";

String USERNAME = "root";
String PASSWORD = "";

Connection koneksi = null;

PreparedStatement query = null;

40
 int result = 0;

try {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);

query = koneksi.prepareStatement
("INSERT INTO produk (nama_produk, harga, qty)"
+ " VALUES(?, ?, ?)");

query.setString(1, produk.getNamaProduk());
query.setDouble(2, produk.getHarga());
query.setInt(3, produk.getQty());

result = query.executeUpdate();

if (result >= 0) {
out.print("<script language=JavaScript>"
+ "alert('Data berhasil disimpan');"
+ "document.location='produk.jsp';"
+ "</script>");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
Penting: untuk diingat menambahkan Library: klik Kanan  Add Library  Import: MySQL
JDBC Driver (Lihat Gambar).

Selanjutnya membuat tampilan daftar produk, bentuk halaman untuk tampilan daftar produk
sebagai berikut:

41
<%@page import="java.sql.*,java.io.*"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%
//-- koneksi Database --
String URL = "jdbc:mysql://localhost:3306/eprodukshop";
String USERNAME = "root";
String PASSWORD = "";

Connection koneksi = null;

PreparedStatement query = null;
ResultSet rs = null;

try {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);
query = koneksi.prepareStatement("SELECT * FROM produk");
rs = query.executeQuery();
} catch (Exception e) {
e.printStackTrace();
}
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daftar Buku</title>
</head>
<body>
<table border="1" cellspacing="4" cellpadding="2"
align="center">
<caption><h1>Daftar Koleksi Buku Q'ta</h1></caption>
<tbody>

42
 <tr>
<th>No</th>
<th>Nama Produk</th>
<th align="right">Harga@</th>
<th align="right">Qty</th>
</tr>
<%
int i = 1;
while (rs.next()) {
%>
<tr>
<td align="center"><%=i%></td>
<td><%=rs.getString("nama_produk")%></td>
<td align="right"><%=rs.getDouble("harga")%></td>
<td align="right"><%=rs.getInt("qty")%></td>
</tr>
<%
++i;
}
%>
</tbody>
</table>
</body>
</html>

Untuk mempercantik tampilan tabel, kita dapat menambahkan CSS (Cascading Style Sheet),
sehingga tampilan yang akan dihasilkan seperti gambar di bawah ini:

43
Berikut CSS yang disisipkan pada baris <head> .. </head>, pada code tersebut:

<style>

table {

color: #333; /* Lighten up font color */

font-family: Helvetica, Arial, sans-serif; /* Nicer font */
width: 640px;
border-collapse: collapse;
border-spacing: 0;
}

/* Make cells a bit taller */

td, th { border: 1px solid #CCC; height: 30px; }

th {
background: #F3F3F3; /* Light grey background */
font-weight: bold; /* Make sure they're bold */
}

td {
background: #FAFAFA; /* Lighter grey background */
text-align: none; /* Center our text */
}
</style>

Tugas (Individu)

Dari halaman daftar produk sebelumnya, ubah tampilan menjadi seperti gambar di bawa ini:

44
Perhatikan dari gambar di atas terdapat satu kolom “Action”, dimana terdapat link untuk
meng-edit dan men-delete data produk.

Jika dipilih Edit, maka akan tampil halaman form untuk merubah isi dari data produk
sebelumnya sesuai dengan baris yang dipilih.

Jika dipilih Delete, maka akan dihapus data produk sesuai dengan baris yang dipilih.
Tentunya tampilkan jendela konfirmasi sebelum data akan dihapus.

Membuat Aplikasi SIA (Sistem Informasi Akuntansi)

Berikutnya membuat project salah satu dari siklus SIA, yaitu general ledger. Dan project
akan berlanjut pada semester berikutnya.

Membuat Database dengan MySQL

Buatlah database dengan nama: sia menggunakan phpMyAdmin

45
Buatlah Tabel: master_akun

Buatlah Tabel: saldo_awal

46
Buatlah Project baru File – New Project…

47
Menambahkan Libraries (MySQL JDBC Driver)

48
Membuat File JSP dengan nama: add_akun.jsp

49
Membuat Tampilan Input Master akun, buatlah file jsp dengan nama: add_akun.jsp

Berikut source code dari tampilan tersebut:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data Akun</title>
</head>
<body>
<h1>Tambah Akun</h1>
<form action="akunServlet" method="POST">
<table border="0" cellpadding="4">
<tbody>
<tr>
<td>Jenis Akun</td>
<td>
<select name="jenis">
<!--Jenis Akun disesuaikan sendiri-->
<option value="Kas/Bank" selected>Kas/Bank</option>
<option value="Aktiva Lancar">Aktiva Lancar</option>
<option value="Aktiva Tetap">Aktiva Tetap</option>
<option value="Kewajiban">Kewajiban</option>
<option value="Modal">Modal</option>
<option value="Pendapatan">Pendapatan</option>
<option value="Beban">Beban</option>
</select>
</td>
</tr>
<tr>
<td>Kode*</td>
<td><input type="text" name="kode" size="5" /></td>

50
 </tr>
<tr>
<td>Nama Akun</td>
<td><input type="text" name="nama" size="20" /></td>
</tr>
<tr>
<td>Saldo Normal</td>
<td>
<select name="saldo">
<option value="Debet">Debet</option>
<option value="Kredit">Kredit</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Insert" name="aksi" />
<input type="reset" value="Reset" name="batal" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Mebuat Class Java: akun.java

51
Berikut source code dari class tersebut:

package model;
public class Akun {

private String kode_akun;

private String nama_akun;
private String jenis_akun;
private String saldo_normal;

public String getKode_akun() {

return kode_akun;
}

public void setKode_akun(String kode_akun) {

this.kode_akun = kode_akun;
}

public String getNama_akun() {

return nama_akun;
}

public void setNama_akun(String nama_akun) {

this.nama_akun = nama_akun;
}

public String getJenis_akun() {

52
 return jenis_akun;
}

public void setJenis_akun(String jenis_akun) {

this.jenis_akun = jenis_akun;
}

public String getSaldo_normal() {

return saldo_normal;
}

public void setSaldo_normal(String saldo_normal) {

this.saldo_normal = saldo_normal;
}

@Override
public String toString() {
return "Master Akun: [Kode Akun = " + kode_akun +
", Nama Akun = " + nama_akun +
", Jenis Akun = " + jenis_akun +
", Saldo Normal = " + saldo_normal + "]";
}
}

Membuat Servlet: akunServlet.java

53
54
Berikut source code dari servlet tersebut:

package control;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.Akun;
import java.sql.*;
import java.util.logging.Level;
import java.util.logging.Logger;

public class akunServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException,
SQLException, ClassNotFoundException {
response.setContentType("text/html;charset=UTF-8");

Akun akun = new Akun(); //--Inisialisasi Object—

String URL = "jdbc:mysql://localhost:3306/sia";

String USERNAME = "root";
String PASSWORD = "";

Connection koneksi = null;

PreparedStatement pstmt = null;
int result = 0;

try (PrintWriter out = response.getWriter()) {

Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);

String aksi = request.getParameter("aksi");

if (aksi != null) {
akun.setKode_akun(request.getParameter("kode"));
akun.setNama_akun(request.getParameter("nama"));
akun.setJenis_akun(request.getParameter("jenis"));
akun.setSaldo_normal(request.getParameter("saldo"));

switch (aksi) {
case "Insert":
pstmt = koneksi.prepareStatement("INSERT INTO master_akun"
+ " VALUES(?, ?, ?, ?)");
pstmt.setString(1, akun.getKode_akun());
pstmt.setString(2, akun.getNama_akun());
pstmt.setString(3, akun.getJenis_akun());
pstmt.setString(4, akun.getSaldo_normal());

result = pstmt.executeUpdate();
if (result > 0) {

55
 out.println("<script> "
+ "alert('Data telah ditambahkan');"
+ "document.location='add_akun.jsp';"
+ " </script>");
}
break;
default:
break;
}
}
}
}
}
//note: klik kanan -> format, untuk merapihkan source code

Selanjutnya, membuat tampilan data akun yang telah di input. Buatlah file jsp, simpan
dengan nama: tampil_akun.jsp

56
Bentuk tampilan dari tampil_akun.jsp

Source Code: tampil_akun.jsp

<%@page import="java.sql.*" %>

<%
//--koneksi database--
Connection koneksi = null;
Statement stmt = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager
.getConnection("jdbc:mysql://localhost/db_sia",
"root", "");
stmt = koneksi.createStatement();
rs = stmt.executeQuery("SELECT * FROM master_akun"
+ " ORDER BY kode_akun");

%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

57
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"; charset=UTF-8">
<title>Daftar Akun</title>
</head>
<body>
<h1>Daftar Rekening [Akun]</h1>
<table border="1">
<tr>
<th>Kode*</th>
<th>Nama Akun</th>
<th>Jenis Akun</th>
<th>Saldo Normal</th>
<th>Action</th>
</tr>
<%
if (!rs.next()) {
out.println("<tr>"
+ "<td colspan=5> "
+ "- Data Akun Kosong -"
+ "</td>"
+ "</tr>");
} else {
while (rs.next()) {
out.println("<tr>"
+ "<td>" + rs.getString("kode_akun") + "</td>"
+ "<td>" + rs.getString("nama_akun") + "</td>"
+ "<td>" + rs.getString("jenis_akun") + "</td>"
+ "<td>" + rs.getString("saldo_normal") + "</td>"
+ "<td><a href=edit_akun.jsp?kode="
+ rs.getString("kode_akun") + ">Edit</a> | "
+ "<a href=akunServlet?aksi=delete&kode="
+ rs.getString("kode_akun") + ">Hapus</a></td>"
+ "</tr>");
}
}
%>
</table>
</body>
</html>

Untuk mempercantik tampilan silahkan ditambahkan script css dibawah ini diantara tag
<head> … </head>, sebagai berikut:

<style>
table {
border-collapse: collapse;
width: 680px;
}

th, td {
text-align: left;

58
 padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
background-color: #4CAF50;
color: white;
}
</style>
Tampilan setelah CSS ditambahkan...

Langkah berikutnya membuat halaman untuk meng-edit akun, buatlah file jsp dan simpan
dengan nama: edit_akun.jsp

59
Source Code: edit_akun.jsp
<%@page import="java.sql.*, model.Akun" %>
<%
Akun akun = new Akun();
//--koneksi database--
Connection koneksi = null;
Statement stmt = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager
.getConnection("jdbc:mysql://localhost/db_sia",
"root", "rahasia");
stmt = koneksi.createStatement();
String kode = request.getParameter("kode");
if (kode != null) {
rs = stmt.executeQuery("SELECT * FROM master_akun"
+ " WHERE kode_akun = '" + kode + "'");
if (rs.next()) {
akun.setKode_akun(rs.getString("kode_akun"));
akun.setNama_akun(rs.getString("nama_akun"));
akun.setJenis_akun(rs.getString("jenis_akun"));
akun.setSaldo_normal(rs.getString("saldo_normal"));
}
}
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

60
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"; charset=UTF-8">
<title>Edit Akun</title>
</head>
<body>
<h1>Ubah Data Akun</h1>
<form action="akunServlet" method="POST">
<table border="0" cellpadding="4">
<tbody>
<tr>
<td valign="top">Jenis Akun</td>
<td><input type="text" name="jenis" size="20"
value="<%=akun.getJenis_akun()%>" /><br/>
<strong>Daftar Jenis Akun</strong>
<ul>
<li>Kas/Bank</li>
<li>Aktiva Lancar</li>
<li>Aktiva Tetap</li>
<li>dst...</li>
</ul>
</td>
</tr>
<tr>
<td>Kode*</td>
<td><input type="text" name="kode" size="5"
value="<%= akun.getKode_akun()%>"
readonly /></td>
</tr>
<tr>
<td>Nama Akun</td>
<td><input type="text" name="nama" size="20"
value="<%=akun.getNama_akun()%>" /></td>
</tr>
<tr>
<td>Saldo Normal</td>
<td>
<select name="saldo">
<%
if (akun.getSaldo_normal()
.equalsIgnoreCase("Debet")) { %>
<option value="Debet" selected>Debet</option>
<option value="Kredit">Kredit</option>
<% } else { %>
<option value="Debet">Debet</option>
<option value="Kredit" selected>Kredit</option>
<% }%>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Update" name="aksi" />

61
 </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Setelah membuat tampilan untuk meng-edit akun buka kembali akunServlet.java, dan
tambahkan kode berikut ini:

...
try (PrintWriter out = response.getWriter()) {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);

String aksi = request.getParameter("aksi");

if (aksi != null) {
akun.setKode_akun(request.getParameter("kode"));
akun.setNama_akun(request.getParameter("nama"));
akun.setJenis_akun(request.getParameter("jenis"));
akun.setSaldo_normal(request.getParameter("saldo"));

switch (aksi) {
case "Insert":
pstmt = koneksi.prepareStatement("INSERT INTO master_akun"
+ " VALUES(?, ?, ?, ?)");
pstmt.setString(1, akun.getKode_akun());
pstmt.setString(2, akun.getNama_akun());
pstmt.setString(3, akun.getJenis_akun());
pstmt.setString(4, akun.getSaldo_normal());

result = pstmt.executeUpdate();
if (result > 0) {
out.println("<script> "
+ "alert('Data telah ditambahkan');"
+ "document.location='tampil_akun.jsp';"
+ " </script>");
}
break;
//--code yang ditambahkan--
case "Update":
pstmt = koneksi.prepareStatement("UPDATE master_akun SET"
+ " nama_akun = ?,"
+ " jenis_akun = ?,"
+ " saldo_normal = ?"
+ " WHERE kode_akun = ?");

pstmt.setString(1, akun.getNama_akun());
pstmt.setString(2, akun.getJenis_akun());
pstmt.setString(3, akun.getSaldo_normal());
pstmt.setString(4, akun.getKode_akun());

result = pstmt.executeUpdate();
if (result > 0) {
out.println("<script> "

62
 + "alert('Data telah di Update');"
+ "document.location='tampil_akun.jsp';"
+ " </script>");
}
break;
//--end update--
default:
break;
}
...

Setelah kode ditambahkan, maka saat button [Update] pada halaman “edit_akun.jsp” di klik
akan terjadi perubahan data yang di edit pada “tampil_akun.jsp”.

Berikutnya menambahkan kode untuk hapus data. Masih di file akunServlet.java,

tambahkan kode berikut ini:

...
try (PrintWriter out = response.getWriter()) {
Class.forName("com.mysql.jdbc.Driver");
koneksi = DriverManager.getConnection(URL, USERNAME, PASSWORD);

String aksi = request.getParameter("aksi");

if (aksi != null) {
akun.setKode_akun(request.getParameter("kode"));
akun.setNama_akun(request.getParameter("nama"));
akun.setJenis_akun(request.getParameter("jenis"));
akun.setSaldo_normal(request.getParameter("saldo"));
switch (aksi) {
case "Insert":
pstmt = koneksi.prepareStatement("INSERT INTO master_akun"
+ " VALUES(?, ?, ?, ?)");
pstmt.setString(1, akun.getKode_akun());
pstmt.setString(2, akun.getNama_akun());
pstmt.setString(3, akun.getJenis_akun());
pstmt.setString(4, akun.getSaldo_normal());

result = pstmt.executeUpdate();
if (result > 0) {
out.println("<script> "
+ "alert('Data telah ditambahkan');"
+ "document.location='tampil_akun.jsp';"
+ " </script>");
}
break;
case "Update":
pstmt = koneksi.prepareStatement("UPDATE master_akun SET"
+ " nama_akun = ?,"
+ " jenis_akun = ?,"
+ " saldo_normal = ?"
+ " WHERE kode_akun = ?");
pstmt.setString(1, akun.getNama_akun());
pstmt.setString(2, akun.getJenis_akun());
pstmt.setString(3, akun.getSaldo_normal());
pstmt.setString(4, akun.getKode_akun());

63
 result = pstmt.executeUpdate();

if (result > 0) {
out.println("<script> "
+ "alert('Data telah di Update');"
+ "document.location='tampil_akun.jsp';"
+ " </script>");
}
break;
//--code yang ditambahkan--
case "Delete":
pstmt = koneksi.prepareStatement("DELETE FROM"
+ " master_akun WHERE kode_akun = ?");
pstmt.setString(1, akun.getKode_akun());
result = pstmt.executeUpdate();

if (result > 0) {
out.println("<script> "
+ "alert('Data telah di Hapus');"
+ "document.location='tampil_akun.jsp';"
+ " </script>");
}
break;
//--end delete--
default:
break;
}
...

64
TUGAS 2 (Kelompok)

Membuat Form Entry Saldo Awal Akun

Perhatikan tampilan diatas, adalah Form untuk entry saldo awal akun dimana [klik] terlebih
dahulu akun/rekening pada tabel kemudian akan tampil data akun tersebut ke dalam form
entry dan selanjutnya masukkan besar saldo awal dari akun tersebut [klik] Simpan dan saldo
[Debet/Kredit] akan ditampilkan pada tabel dibawahnya.

Dan jika kita memilih akun yang sama maka saldo akun akan terupdate dengan nilai saldo
awal yang terakhir dimasukkan. Perlu diingat...! Selisih antara saldo debet dan saldo kredit
harus bernilai “0” (nol).

Sebagai catatan sebelum entry saldo awal akun, harus menginput data master akun terlebih
dahulu karna tabel saldo akun yang ditampilkan sama dengan akun yang ada pada tabel
master akun.

65