Modul Praktikum Pemrograman Visual Akuntansi IDokumen singkat tapi Sempurna Yang dituliskan dibawah...

MODUL PRAKTIKUM

Pemrograman Visual Akuntansi I

Disusun Oleh :

Windi Irmayani, SE. M.Kom.

PROGRAM STUDI SISTEM INFORMASI AKUNTANSI

UBSI KAMPUS PONTIANAK

2018

ii

KATA PENGANTAR

Alhamdullillah saya panjatkan kehadirat Allah SWT, yang telah melimpahkan rahmat dan

karunia-Nya, karena akhirnya saya dapat menyelesaikan Modul Pemrograman Visual Akuntansi

I ini dengan baik. Oleh karena itu pada kesempatan ini, saya ingin menyampaikan ucapan terima

kasih kepada:

1. Rektor Universitas Bina Sarana Informatika

2. Wakil Rektor Bidang Akademik.

3. Ketua Program Studi Sistem Informasi Akuntansi Universitas Bina Sarana Informatika.

4. Staff / Karyawan / Dosen dilingkungan Universitas Bina Sarana Informatika.

Saya menyadari akan kekurangan yang masih ada, untuk itu saya bersikap terbuka pada

masukan yang membangun demi penyempurnaan modul ini. Terima kasih.

Pontianak, September 2018

Penyusun

ii

DAFTAR ISI

COVER KATA PENGANTAR............................................................................................ii

DAFTAR ISI ..........................................................................................................iii

BAB I PENGENALAN....................................................................................... 1

BAB II LATIHAN TAG-TAG HTML ............................................................... 7

BAB III JavaServer Pages (JSP) ........................................................................ 20

BAB IV Java Web Database Application .......................................................... 30

BAB V Membuat Web dengan Database ......................................................... 39

DAFTAR PUSTAKA............................................................................................76

M o d u l P r a k t i k u m P e m r o g r a m a n V i s u a l A k u n t a n s i 1 1

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>

M o d u l P r a k t i k u m P V A 1 ( J a w a W e b ) 3

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

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.

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:

> menandakan lebih besar dari (>)

< menandakan lebih kecil dari (<)

& menandakan ampersand (&)

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

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

https://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html

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:



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>



<p>Hello!! Ini adalah website pertama saya. Sekarang saya sudah tahu

apa itu <abbr title="Hyper Text Markup Language"> HTML

</abbr>.</p>

</body>

</html>

BAB II LATIHAN TAG-TAG HTML

Struktur HTML

<!DOCTYPE html>

<html>

<head>



</head>

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






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

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

<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" />

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



</tr>

<tr>



<td> Baris 2, Kolom 3</td>

</tr>

<tr>




</tr>

<tr>




</tr>

</table>

</body>

</html>

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

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:

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

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>


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>

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

<section id=”content”>

<article>


<p>

Posting artikel

</p>

</article>

<article>


<p>

Posting artikel

</p>

</article>

Dan seterusnya...

</section>

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 class="container" id="header">

<h1>Sistem Informasi Akuntansi</h1>

<h2>Bina Sarana Informatika</h2>

</header>

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





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

<section id = "content" >

<article>

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





<footer class="container" id="footer">

<p align="center">

Selamat Belajar dan Semoga Berhasil

</p>

</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;

}

#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:

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

Header

Sidebar Footer

Isi Content

Navigation


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.

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

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


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

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



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

<%

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




<!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"

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

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



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

Simpan file dengan nama: proses.jsp


<!DOCTYPE html>

<html>

<body>

<%

session.setAttribute("login", request.getParameter("uname"));

response.sendRedirect("index.jsp");

%>

</body>


</html>

Simpan file dengan nama: index.jsp


<!DOCTYPE html>

<html>

<head>


<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


<!DOCTYPE html>


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

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 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)],


…

Kolom_n TipeData[(size)]

);

Sintax membuat tabel dengan Primary Key

CREATE TABLE nama_table(



…

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


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:

Menambah Kolom


ALTER TABLE nama_table

ADD nama_kolom TipeData[(size)];

Menambahkan Primary Key


ADD PRIMARY KEY(nama_kolom1 [,nama_kolom2,

nama_kolom_n]);

Menghapus Kolom


DROP [COLUMN] nama_kolom;

Merubah tipe data


MODIFY [COLUMN] nama_kolom TipeData [(size)];

Mengubah nama kolom dan tipe data


CHANGE nama_kolom_lama

nama_kolom_baru TipeData[(size)];

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

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

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:

Nama Kolom/Field Tipe Size

NIM* INT 8

Nama_mhs VARCHAR 30

Jurusan VARCHAR 20


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


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’);

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


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


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


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:


FROM tabel1

JOIN tabel2


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:


FROM tabel1 LEFT JOIN tabel2


Atau:


FROM tabel1

LEFT OUTER JOIN tabel2


Contoh:

SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate

FROM Orders

LEFT JOIN Customers


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:


FROM tabel1

RIGHT JOIN tabel2


Atau:


FROM tabel1

RIGHT OUTER JOIN tabel2


Contoh:

SELECT Orders.OrderID, Customers.CustomerName,Orders.OrderDate

FROM Orders

RIGHT JOIN Customers


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!

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%’;

M o d u l P r a k t i k u m P e m r o g r a m a n V i s u a l A k u n t a n s i 1 39

BAB V Membuat Web dengan Database

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


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

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

}

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;


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:

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


<%

//-- koneksi Database --

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




PreparedStatement query = null;

ResultSet rs = null;


try {



query = koneksi.prepareStatement("SELECT * FROM produk");

rs = query.executeQuery();

} catch (Exception e) {

e.printStackTrace();

}

%>

<!DOCTYPE html>

<html>

<head>


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

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


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:

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


Buatlah Tabel: master_akun

Buatlah Tabel: saldo_awal

Buatlah Project baru File – New Project…


Menambahkan Libraries (MySQL JDBC Driver)


Membuat File JSP dengan nama: add_akun.jsp


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

add_akun.jsp

Berikut source code dari tampilan tersebut:


<!DOCTYPE html>

<html>

<head>


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



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

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


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

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


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";




PreparedStatement pstmt = null;

int result = 0;

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



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='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

Bentuk tampilan dari tampil_akun.jsp


Source Code: tampil_akun.jsp

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

<%

//--koneksi database--


Statement stmt = null;



koneksi = DriverManager

.getConnection("jdbc:mysql://localhost/db_sia",


"root", "");

stmt = koneksi.createStatement();

rs = stmt.executeQuery("SELECT * FROM master_akun"

+ " ORDER BY kode_akun");

%>


<!DOCTYPE html>

<html>

<head>


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

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


Source Code: edit_akun.jsp

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

<%

Akun akun = new Akun();

//--koneksi database--


Statement stmt = null;



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"));

}

}

%>


<!DOCTYPE html>

<html>

<head>


<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" />

</td>

</tr>

</tbody>

</table>

</form>

</body>

</html>

Setelah membuat tampilan untuk meng-edit akun buka kembali akunServlet.java,

dan tambahkan kode berikut ini:

...





if (aksi != null) {





switch (aksi) {

case "Insert":



+ " VALUES(?, ?, ?, ?)");






if (result > 0) {



+ "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 = ?");






if (result > 0) {


+ "alert('Data telah di Update');"


+ " </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:


...





if (aksi != null) {





switch (aksi) {

case "Insert":


+ " VALUES(?, ?, ?, ?)");






if (result > 0) {




+ " </script>");

}

break;

case "Update":

pstmt = koneksi.prepareStatement("UPDATE master_akun SET"

+ " nama_akun = ?,"

+ " jenis_akun = ?,"

+ " saldo_normal = ?"

+ " WHERE kode_akun = ?");






if (result > 0) {


+ "alert('Data telah di Update');"


+ " </script>");

}

break;


//--code yang ditambahkan--

case "Delete":

pstmt = koneksi.prepareStatement("DELETE FROM"

+ " master_akun WHERE kode_akun = ?");



if (result > 0) {


+ "alert('Data telah di Hapus');"


+ " </script>");

}

break;

//--end delete--

default:

break;

}

...


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.


Daftar Pustaka

A.S, Rosa dan M. Shalahuddin. 2011. Modul Pembelajaran Rekayasa Perangkat

Lunak (Terstruktur Dan Berorientasi Objek). Bandung: Modula.

Gata, Windu dan Grace Gata. 2013. Sukses Membangun Aplikasi Penjualan

dengan Java. Jakarta: PT. Elex Media Komputindo

Modul Praktikum Pemrograman Visual Akuntansi IDokumen singkat tapi Sempurna Yang dituliskan dibawah...

Documents

Transcript of Modul Praktikum Pemrograman Visual Akuntansi IDokumen singkat tapi Sempurna Yang dituliskan dibawah...