1

MEMODELKAN OBYEK DAN KELAS

SERTA MODEL DIMAMIS BAGIAN II DI

TAHAP PERANCANGAN

1.1 Tujuan Praktikum

1. Praktikan mampu memahami konsep permodelan dinamis menggunakan UML baik ditahap analisis maupun

tahap perancangan.

2. Praktikan mampu menggambarkan alur sistem ke dalam class diagram, state transition diagram,

deployment diagram, dan component diagram di tahap perancangan

3. Praktikan mampu memahami alur kodingan sistem yang akan dibuat dan menggambarkannya dalam

bentukclass diagram, state transition diagram dan component diagram

1.2 Perlengkapan Praktikum

1. Software Power Designer.

2. Modul 4 Praktikum APSI.

1.3 Landasan Teori

1.3.1 Enkapsulasi

Selama fase analsis, semua atribut diperlakukan seolah‐olah dapat diakses secara public, kecuali jika

sudah didefinisikan aksesibilitasnya di awal.Selama fase perancangan, semua atribut harus ditulis sebagai

“private”. Atribut yang akandiakses oleh kelas lain diakses melalui method yang di‐set sebagai public. Atribut

dari suatu obyek menyimpan catatan tentang state obyek dan mendefinisikan tugas yang sedang dilakukan

obyek itu. Untuk itu, kelas‐kelas harus berisi hal‐hal berikut ini :

Tidak boleh obyek ekternal mengakses secara langsung ke atribut. Oleh sebab itu, kelas- kelasharus

menyediakan method untuk membaca dan menulis nilai ke atau dari atributtersebut. Method‐method

tersebut disebut sebagai method accessor;

4

2

Method‐method internal adalah method‐method yang membantu menyederhanakanmekanisme internal

suatu obyek, namun disembunyikan dari ekternal obyek. Method- methodini disebut sebagai method

”helper”.

Pada pradigma berorientasi obyek, istilah ”public” dan ”private” digunakan untuk mengidentifikasi setiap

kategori atribut dan method. Sebagian besar bahasa berorientasi obyek menggunakan istilah ini sebagai kata

kunci (keyword).Hampir semua bahasa pemrograman (berorientasi obyek dan prosedural) mendukungkonsep

ini dalam bentuk yang sama. Selama tahap disain, istilah tersebut digunakan untukmemberitahu programmer

tentang ijin akses ke atribut atau method pada kelas yang sedang ditulisnya.Atribut harus diakses melalui

method, sehingga dapat dilakukan pengecekan nilai sebelum dimasukkan ke atribut. Pengecekan iniakan

menjamin bahwa nilai yang dimasukkan ke atribut adalah valid. UML hanya mendukung public, private, dan

protected.UML belum mendukung konsep package pada Teknologi Java. Untuk itu, cara yang dapat digunakan

untuk menggambarkan package adalah dengan menggunakan package stereotype.

1.3.2 Class Diagram

Class diagram menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu

sama lain seperti hubungan dinamis, pewarisan, asosiasi, dan agregasi.Sesuai dengan perkembangan class

model, class dapat dikelompokkan menjadi package. Sehingga dapat membuat diagram yang terdiri atas

package.

Class memiliki tiga area pokok :

o Nama (dan stereotype)

o Atribut

o Metoda

Gambar 1 Class Diagram

1.3.2.1 Nama Class

Digunakan untuk membedakan antara satu kelas dan kelas yang lain. Contohnya : Manusia, Mahasiswa

3

1.3.2.2 Attribute

Digunakan untuk menyimpan state, pada bahasa pemrograman ini berupa field. Bisa juga diartikan apa

yang dimiliki oleh sebuah objek.

Contohnya : nama, alamat, usia, nim, warna

Aturan penggunaan :modifier nama_attribute : tipedata

Contoh penggunaan : nama : String dibaca attribute nama memiliki modifier private dengan tipe dataString

1.3.2.2.1 Atribut Private, Public dan Protected

Daftar berikut ini berisi definisi dari atribut, method, dan package private, public, dan protected :

Atribut dan metod private hanya dapat diakses dari method di dalam kelas yang sama;

Atribut‐atribut dan method‐method package (di Teknologi Java) dapat diakses darimethod di kelas lain yang

disimpan di dalam package yang sama;

Protected bervariasi berdasarkan bahasa pemrograman yang digunakan. Pada TeknologiJava, atribut dan

method dapat diakses dari kelas yang beda jika kelas‐kelas tersebutberada pada package yang sama. Kelas

yang mewarisi kelas lain dapat mengaksesmethod dan atribut yang di‐set sebagai protected. Dalam bahasa

pemrograman C++,hanya kelas yang mewarisi kelas lain saja yang dapat mengakses atribut atau

methodkelas parent‐nya;

Atribut dan method public dapat diakses oleh semua obyek tanpa ada batasan.

1.3.2.2.2 Mengakses Atribut yang Terenkapsulasi

Karena atribut yang dienkapsulasi tidak dapat diakses langsung, maka diperlukan method untuk

mengaksesnya. Untuk melakukan ini, perlu dibangun operasi‐operasi berikut ini :

Method untuk menyeting nilai atribut, sebagai contoh, setName, setAddress,setDateOfBirth,

setAccountNumber;

Method untuk mengakses nilai dari atribut, mencakup derived attribute, sebagai contoh,getName,

getAddress, getDateOfBirth, getAccountNumber;

Method untuk menanyakan pertanyaan dengan jawaban berupa true atau false,sebagai contoh isConnected,

isSave.

1.3.2.3 Method

Digunakan untuk menyimpan behaviour, pada bahasa pemrograman berupa method yang mengembalikan

nilai (non,void method) dan method yang tidak mengembalikan nilai (void method).

Contohnya : getNama, getAlamat, getUsia, jalan, lari

4

Aturan Penggunaan :Modifier nama_method([namaParameter : tipeParameter]) :nilai_kembalian

Contoh penggunaan :

+ getNama() : Stringdibaca method getNama memiliki modifier public, tidak memilikiparameter dan

memiliki nilai kembalian String.

+ setNama(nama : String) : voiddibaca method setNama memiliki modifier public, memiliki 1 buat

parameter yaitu nama dengan tipe parameter String dan tidak memiliki nilai kembalian karena bertipe void.

1.3.2.4 Antarmuka Method

System Analyst harus mendefiisikan method dalam suatu antarmuka, nilai kembalian dan parameter yang

dimasukkan ke dalamnya, dan visibilitasnya.Notasi untuk nilai kembalian mirip dengan nilai atribut. Argumen

yang dikirim ke dalam method digambarkan dalam urutan penulisan berikut : nama method, daftar‐daftar

parameter yang dipisahkan dengan koma menggunakan notasi «Object : Class». Baik obyek atau kelas dapat

dihilangkan jika tidak diperlukan.Parameter dan tipe kembalian dapat berupa tipe Boolean, data primitif (seperti

int), referensi (pointer), List, atau void.Sebagian besar operasi yang digunakan untuk obyek‐obyek luar

dideklarasikan sebagai public, dan method‐method yang digunakan di dalam obyeknya dan tidak diakses oleh

obyek di luarnya dideklarasikan sebagai private.Use Case Diagram

1.3.4 Kelas Event dan Event Handler

Pada teknologi Java, human interface merupakan ekstensi dari kelas Swing/AWT. EventHandler

mendaftarkan sebuah event, dengan obyek‐obyek Swing/AWT, dan method spesifik yang akan dipanggil ketika

ada event yang terjadi (sebagai contoh, tombol ditekan). Teknologi Java menyediakan framework untuk

Swing/AWT event.Namun, programmer dapat membuat sendiri struktur event untuk event non GUI.Obyek

event Handler diinstansiasi dengan link interaksi ke obyek‐obyek bisnis dan obyekobyek human

interface.Sebagai contoh, Obyek event handler dapat didaftarkan ke obyek MenuItem.Ketika obyek MenuItem

dipilih, method actionPerformed pada obyek handler dipanggil.Event Handler dapat menyalin data dari

obyek‐obyek bisnis ke obyek‐obyek GUI atau melakukan prosedur sebaliknya, yaitu menyalin data dari GUI ke

obyek‐obyek bisnis. Prosedur dapat dilakukan dengan obyek yang sama atau obyek terpisah di mana setiap

obyek melakukan satu tugas spesifik.

5

Gambar 2 Kelas‐kelas Event Handler

Event Handler dapat dibuat dalam bentuk pohon inheritance untuk mewarisi atribut, perilaku, dan tipe

yang umum.Untuk itu, sebaiknya dilakukan pemisahan antara kode event handling dengan GUI. Selain itu,

event handling ini juga dapat digunakan kembali oleh platform lain seperti RMI, Corba, atau DCOM jika ingin

digunakan.

1.3.4.1 Contoh Kasus

Anda diminta oleh sebuah institusi pendidikan untuk membuat sebuah aplikasi berbasis web untuk

menentukan lokasi geladi, yang memiliki fungsi :

1. Dapat menampilkan daftar lokasi geladi.

2. Dapat menyimpan data pilihan mahasiswa berdasarkan id login.

3. Dapat melakukan edit data diri (username, pass) data yang ada diambil dari database geladi.

Hasil :

6

1.3.4.2 Langkah-langkah

1. Buka Power Designer

2. File – New – Pilih Model Type : Object-Oriented Model – Pilih Class Diagram

3. Buat 3 package dari pallete

7

4. Klik kanan pada package – pilih composite view

5. Namakan ketiga package dengan : View , Controller dan Beans

6. Pada package view : klik kanan – open diagram , buat 3 file pada diagram tersebut beri nama index.jsp ,

dataUser.jsp , daftarLokasi.jsp kembali ke diagram utama (ctrl+u), klik kanan lagi pilih Adjust to composite

view

8

7. Pada package controller : klik kanan – open diagram , buat class pada diagram tersebut , klik kanan class

tersebut pilih create servlet beri nama Lokasi – next – next – finish – ctrl + u

8. Pada package beans : klik kanan – open diagram , buat 2 class pada diagram tersebut beri nama Lokasi dan

Mahasiswa beri atribut dan method sesuai contoh pada class tersebut, ctrl + u

9. Hubungkan package menggunakan dependency

1.3.5. Component Diagram

Component diagram adalah diagram yang digunakan untuk menggambarkan organisasi dan

ketergantungan komponen-komponen software sistem.Component diagram berguna untuk memodelkan

komponen objek.

Component diagram menggambarkan struktur dan hubungan antar komponen peranti lunak, termasuk

ketergantungan (dependency) diantaranya. Komponen peranti lunak adalah modul berisi code, baik berisi

9

source code maupun binary code, baik library maupun executable, baik yang muncul pada compile time, link

time maupun run time.

Pada umumnya komponen terbentuk dari bebrapa class dan/atau package, tapi dapat juga dari

komponen-komponen yang lebih kecil. Komponen dapat juga berupa interface, yaitu kumpulan layanan yang

disediakan sebuah komponen untuk komponen lain.

Penggambaran diagram komponen pada fase perancangan dilakukan dengan cara berikut :

1. Tinjau ulang diagram kelas dan identifikasi kelompok kelas dengan menggunakan teknik coupling dan

cohesion

2. Gambarkan dengan sata stuktur komponen UML kelompok-kelompok kelas tersebut di diagram component

3. Notasi komponen UML digambarkan sebagai empat persegi panjang dengan dua empat persegi panjang

yang lebih kecil di sisi kirinya

4. Masing-masing tipe komponen harus diberi nama pada diagramnya

5. Jika terdapat satu instan dari komponen di dalam sistem, maka intasn tersebut harus punya nama

Bentuk pada UML versi 1

Bentuk pada UML versi 2

Atau atau atau

Stereotypes yang dapat digambarkan pada bentuk component

<<application>>,kumpulan aplikasi system

<<executable>>,component yang jalan di client

<<file>>, data file

<<infrastructure>>, technical component didalam system

<<source code>>, source file

<<table>>, table data dalam sebuah database

<<UI>>, User interface (screen, pages, report)

Dll

N a m a co m p o n e n t< < c o m p o n e n t> >

N a m a c o m p o n e n t

10

1.3.5.1. Depedency

Dimodelkan dengan garis terputus dengan panah terbuka

Digambarkan dependencies dari kiri ke kanan

Contoh:

<<ASP>> Source Code bergantung pada

<<database>> MySQL

Dimungkinkan sebuah component dependencies pada interfaces component lainnya

Contoh:

1.3.5.2.Inheritance

Inheriting/child component diletakkan dibawah parent component, dengan arah panah menuju ke parent

component

Dimodelkan dengan garis dengan panah tertutup

Contoh:

1.3.5.3. Interface

Interfaces adalah kumpulan >=1 methode dan >=0 attribute yang dapat dipakai pada class tanpa menjadi

behavior suatu class.

Jenis interface ada 2 macam yaitu :

Provide, digambarkan dengan bentuk lollipop

Pada UML 1.* bisa juga digambarkan dengan garis terputus dengan panah tertutup

Required, digambarkan dengan bentuk socket

S t u d e n t

D a t a A c c e s s

S t u d e n tS tu d e n t

A d m in i s t r a t io n< U I> >

11

Penggambaran interfaces dapat juga dilakukan dengan menambah bagian component seperti contoh

dibawah ini :

Bentuk Grafik

1.3.5.4. Port

Port adalah bentuk object yang menjelaskan interaksi antara object dan lingkungannya, Digambarkan

sebagai kotak kecil di pinggiran component :

Assembly connector

Penghubung antara 2/lebih component dimana sebuah/beberapa component provides interfaces dan

component lain required interfaces

Digambarkan dengan gabungan bentuk interfaces

contoh:

1.3.5.5.Contoh Kasus :

Race Meeting

Terdiri dari tiga komponen yaitu Team, RaceMeeting dan Spectator

Tiap komponen terdiri dari beberapa class atau package. Komponen Team terdri dari class Drve, Car,

Team,dan Mechanic. Komponen Spectator terdiri dari package spectator dan komponen Spectator

RaceMeeting terdiri dari Race, RaceMeeting dan RaceSchedule

Order

A1( )

A2 B2

B1()

<<com ponent>>

O rder

StudentTransaksi itemitem

Pinjamitem

12

Hasil :

1.3.5.6. Langkah-langkah

1. Pilih File – New – ObjectOrientedModel – Component Diagram

2. Pilih icon component, buat 3 icon

:Team

Team

MechanicDrive

Car:Spectator

Spectator

:RaceMeeting

Race

Meeting

RaceSchedule

13

3. Beri nama masing-masing icon, dengan double klik icon

4. Klik icon “part”, sisipkan di setiap komponen sesuai jumlah class dan beri nama. Beri penguhubung line

untuk setiap kelas.

14

5. Dan asosiasikan setiap komponen dengan line “generalization” Sehingga menjadi

6. Kelas dalm tiap komponen dapat di implementasikan dalam modulnya sendiri. Misalkan komponen Team

akan di implementasikan sebagai kelas public yang dinanamakan Team yang terdapat dalam suatu file yang

bernams Team.java. Sementara Driver, Mechanic dan Car akan masuk kelas default.

1.3.6 Deployment Diagram

Deployment diagram adalah diagram yang berfungsi untuk untuk memodelkan distribusi aplikasi. Model

UML yang akan digunakan untuk menggambarkan platform aplikasi yang berjalan adalah Deployment

Diagram.

Pada aplikasi client dan server, terdapat satu mesin sebagai host bagi program server dan satu atau lebih

sistem lebih sistem terpisah menjadi host untuk client.Tidak perlu menggambarkan semua mesin client dalam

Deployment Diagram.

:Team

Team

MechanicDrive

Car:Spectator

Spectator

:RaceMeeting

Race

Meeting

RaceSchedule

15

Deployment Diagram menggunakan gambaran kotak 3 dimensi untuk menggambarkan masing-masing

platform. Diagram ini kan dihubungkan dengan garis-garis yang menggambarkan koneksi jaringan antar

platform yang memungkinkan komponen suatu sistem berkomunikasi. Garis tersebut dapat di beri label dengan

protokol jaringan yang digunakan untuk berkomunikasi . Tanda Multiplicity yang sama dengan diagram kelas

dapat digunakan untuk menggambarkan jumlah mesin yang di ijinkan berkomunikasi dengan sistem .kotak

sebaiknya diberi nama untuk menunjukkan platform apa yang digunakan.

1.3.6.1. Contoh kasus

- sebuah computer bernama sisfo digunakan sebagai platform untu server

- Suatu aplikasi client server dimana suatu server diakses oleh sejumlah client,

- Server juga memiliki akses pada sebuah database di mesin yang terpisah,

- Setiap client memiliki akses ke sebuah printer jaringan.

- Printer jaringan bisa di-share jika beberapa mesin client diletakkan dalam satu tempat yang sama dengan

printer

1.3.6.2. Langkah-langkah

1. Pilih File-New – ObjectOrientedModel – Deployment Diagram

2. Klik icon “Node”, buat node 4 buah sesuai dengan kasus

16

3. Beri nama setiap node dengan double klik setiap node

4. Sisipkan icon component sesuai dengan project, dan beri asosiasi setiap komponen menggunakan

“dependency”

17

5. Sehingga menjadi

1.3.7 State Transition Diagram

State transition diagram menggambarkan cara satu obyek berubah state-nya dalam selang waktu

tertentu ketika method-nya dipanggil oleh method obyek lain.

1.3.7.1 State

Semua obyek memiliki keadaan atau state. State yang sedang terjadi dari setiap obyek dicatat nilainya

dan disimpan atributnya. Misalnya sebuah printer. Printer memiliki beberapa state seperti idle (tidak

melakukan pekerjaan apa pun), menunggu untuk mencetak dokumen berikutnya, atau sedang sibuk (sedang

mencetak dokumen). Sehingga, printer memiliki dua keadaan, yaitu idle atau sibuk (busy).

*

*

Client

UserInterface

GUI

Model

CommandLine

connectServer

Network Printer Database

.

18

1.3.7.2 Event

Event merupakan pendorong yang menyebabkan sebuah obyek bertransisi dari satu keadaan ke

keadaan lainnya. Event terjadi dalam bentuk pemanggilan method. Method dapat disebut sebagai sebuah

pekerjaan atau beberapa pekerjaan di dalam obyek yang mengubah state dari obyek tersebut.

Pada contoh printer di atas, ketika beberapa obyek memanggil method print(), state printer berubah dari

idle menjadi busy. Pemanggilan method print() adalah suatu event yang menyebabkan perubahan state printer.

Sebuah obyek minimal berada dalam satu state dari state-state yang dimilikinya. Hal ini berarti bahwa

obyek tersebut memiliki durasi state dan state yang stabil. Ini juga berarti transisi dari satu state ke state lainnya

seharusnya berlangsung sesegera mungkin.

1.3.7.3 Menggambar State Transition Diagram

State transition diagram merupakan diagram penting untuk menggambarkan sebuah event berdampak

pada obyek dan menggambarkan sifat perubahan yang boleh terjadi di dalam obyek. Setiap state transition

diagram memiliki titik awal untuk menandai momen ketika obyek diinstansiasi. Dari state ini, obyek dengan

segera berubah state-nya menjadi initial state, biasanya status ini stabil.

Tanda panah selanjutnya digunakan untuk menggambarkan alur antar berbagai state obyek. Setiap tanda

panah ditulisi dengan suatu tulisan yang menggambarkan tugas yang dilakukan di obyek tersebut untuk

menggambarkan event yang terjadi saat itu. Jika sebuah obyek tidak lagi diperlukan dalam siklus hidup sistem,

maka obyek tersebut dihapus. Pada state transition diagram digambarkan sebagai titik akhir atau termination.

Termination dalam kenyataannya diperlukan di semua state transition diagram meskipun jika event yang

memicu termination adalah akhir dari sistem. Gambar 3 berikut ini menggambarkan contoh state transition

diagram sebuah printer.

Gambar 3 Contoh State Transition Diagram Sebuah Printer

Ketika obyek printer diinstansiasi, maka state-nya di-set menjadi idle. Dari state ini printer dapat

melakukan pekerjaan seperti menerima file untuk dicetak (suatu event yang menyebabkan perubahan

state menjadi busy) atau obyek printer tersebut dihapus dari sistem. Berdasarkan pada diagram ini, tidak

boleh ada operasi untuk menghapus obyek printer ketika state-nya dalam keadaan busy.

19

1.3.7.4 Mengembangkan State Transition Diagram di Tahap Perancangan

Pada tahap perancangan, state transition diagram dapat ditambahkan rincian tentang event, aksi,

dan guard. Untuk beberapa kelas dengan state yang signifikan, perlu ditetapkan penggunaan state

pattern, perlu ditambahkan rincian tentang parameter yang dilewatkan kepada event, parameter yang

dimasukkan ke aksi yang dipanggilnya, dan petunjuk-petunjuk. Setiap event memerlukan method untuk

penanganannya dan setiap aksi memerlukan method pada obyek penerimanya.

Gambar 4 menggambarkan state transition diagram parsial untuk sistem video player. Diagram

tersebut menggunakan guard kondisi untuk menghindari aksi play dan record ketika tidak ada tape

cartridge yang di-load. Jika digunakan state pattern, sebaiknya guard ini dihapus. Guard ini dapat dihapus

dan menggantinya dengan menambah satu atau beberapa state.

Gambar 4 State Transition Diagram untuk Sistem Video Palyer

Gambar 5 State Transistion Diagram untuk Sistem Video player yang dibuat di Tahap Analisis

20

Gambar 5 menggambarkan State Transition Diagram sistem video player yang dibuat pada saat fase

analisis. Pada fase perancangan, gambar di atas perlu diperinci. Misalkan, jika pada fase perancangan tidak

menggunakan state pattern, maka hasil akhir diagram kurang lebih seperti ditunjukkan pada Gambar 6.

Gambar 6 State Transition Diagram yang Dikembangkan di Fase Perancangan

Pada fase perancangan, state transition diagram dapat ditambahkan elemen-elemen yang :

memodifikasi event menjadi nama method;

menampilkan parameter;

memodifikasi guard;

memodifikasi aksi untuk menambah parameter;

menggambarkan obyek target, menggunakan nama obyek atau kelas, untuk aksi pada kelas lain;

menggambarkan aksi mengirim event, atau obyek, gunakan kata kunci send untuk menunjukkan hal

ini.

Tujuan dari penambahan elemen-elemen ini adalah :

menghindari gap dokumen;

mengecek bahwa pemahaman tentang disain tepat;

menemukan method-method yang terlewatkan. Setiap event harus memiliki method yang

menanganinya;

menemukan method-method aksi yang terlewatkan, setiap aksi harus memiliki method yang menanganinya

di obyek target;

menemukan referensi yang hilang;

21

menemukan variabel state yang diperlukan;

Pada tahap ini, dapat juga dilakukan break down terhadap state transition diagram ke dalam sub state,

parallel state, sub-state dengan history, dan sebagainya. Selain itu, pada tahap ini beberapa kompleksitas yang

ditemukan dapat dikurangi dengan konstruksi disain, seperti pattern.

1.3.7.5 Langkah-langkah Praktikum

1. Buka start>SyBase>Power Designer 12>Power Designer.

2. Klik File>New

Model Type: Object-Oriented Model, Beri nama model pada model name, pilih object language: Java, dan

pilih first diagram: statechart diagram.

3. Klik Pallete Start untuk mengawali State Transition Diagram.

4. Klik pallete state untuk membuat state/status. Beri nama dengan klik 2x pada state yang telah dibuat.

22

5. Klik transition untuk menghubungkan antar state, antara start dengan state, dan state dengan end.

6. Untuk member keterangan pada transition, gunakan text.

7. Terakhir, untuk mengakhiri state, klik end pada pallete.

1.4 Praktikum

Kasus :

TOSERBA CAHAYA KARTIKAH SEJATI adalah salah satu TOSERBA terbesar yang ada di

Republik Indonesia tercinta. TOSERBA ini sangat menjunjung tinggi rasa nasionalisme, sehingga hampir 90%

karyawan mereka adalah orang-orang pribumi. TOSERBA CAHAYA KARTIKAH SEJATI sudah melayani

pelaggan-pelanggannya sejak tahun 1991 dan sudah mendirikan cabang di 3 kota besar di Pulau Jawa, yakni :

23

Jakarta (terletak di Jakarta Timur), Surabaya, dan Bandung. Pendapatan TOSERBA ini terus meningkat dari

tahun ke tahun, hingga pada akhir tahun 2011, pendapatan TOSERBA mengalami penurunan secara signifikan.

Selidik punya selidik, ternyata salah satu faktor penyebab turunnya pendapatan TOSERBA ini adalah

menurunnya tingkat kepuasan pelanggan terhadap pelayanan (khususnya sistem pembayaran) yang diberikan

oleh karyawan TOSERBA ini.Sistem yang ada dirasa kurang tanggap dan cepat dalam mengidentifikasi

keinginan pelanggan yang selalu ingin dilayani secara cepat dan tepat. Selain itu, struk pembayaran yang ada

kadang-kadang tidak sesuai dengan jumlah pembelian yang dilakukan oleh pelanggan. Dampaknya, pelanggan

mulai meninggalkan TOSERBA ini dan memilih TOSERBA lain dengan sistem pelayanan yang lebih nyaman

bagi mereka.

Temuan tersebut membuat Noor Kartikah Sejati, CEO sekaligus pendiri TOSERBA ini berpikir untuk

mendesain ulang proses bisnis yang ada, khususnya pada sistem pembayaran atau POS (Point of Sales). Pada

akhirnya, setelah berpetualang mencari ide dan ilham dari Yang Maha Kuasa, akhirrnya Jeng Noor (Sapaan

akrab CEO) beserta tim, berhasil membuat proses bisnis baru pada sistem POS yang ada.

TOSERBA CAHAYA KARTIKAH SEJATI secara bertahap membuat perubahan pada bisnisnya.

Perbaikan proses bisnis yang ia inginkan dengan penambahan sistem pembayaran atau POS (Point of Sales)

telah ia dilakukan dengan analisis sistem berupa use case. Proses bisnis dimulai saat pelanggan menghampiri

kasir untuk melakukan transaksi pembayaran. Kasir kemudian menggunakan sistem POS untuk mencatat detail

barang-barang yang dibeli oleh pelanggan. Selanjutnya, sistem akan menampilkan detail listbarang yang dibeli

beserta total harga yang harus dibayar pelanggan. Pada tahap berikutnya, pelanggan memasukkan informasi

pembayaran (bisa cash, debit, atau credit card) dimana informasi pembayaran ini akan divalidasi dan

disimpan oleh sistem. Proses bisnis berakhir saat sistem meng-update inventori barang terkait dan pelanggan

menerima bukti pembayaran beserta barang-barang yang mereka beli.

Buatlah class diagram, state chart diagram component diagram dan deployment diagram dan di tahap

perancangan untuk use case input barang!

Berikut merupakan kodingan untuk input barang menggunakan MVC.

1. inputBarang.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>

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

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="css/style.css" rel="stylesheet" type="text/css"/>

24

<title>MODUL IV</title>

</head>

<body>

<div id=main>

<div id=header>

<p class="opening">SELAMAT DATANG DI PRAKTIKUM WEB BASED

2012 ENJOY YOUR LESSON :D</p>

</div>

<div id=content>

<div id=content_kiri>

<div id=content_menu>

<ul>

<li><a href="index.jsp">Home</a></li>

<li><ahref="inputBarang.jsp">Input Barang</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>

</div>

<div id=content_kanan>

<div id=content_kanan_dalam>

<form

action="http://localhost:8081/apsi3/ActionControl?action=input_b

arang" method="post">

<center>

<table cellpadding=2 cellspacing=1 border="1"

bgcolor="lightblue">

<tr bgcolor="lightblue">

<td valign=top>

<b>ID Barang^*</b>

<br />

25

<input type="text" name="id_brg" value="" size=20

maxlength=20></td>

<td valign=top>

<b>Nama Barang^*</b>

<br />

<input type="text" name="nama_brg" value="" size=25

maxlength=20></td>

</tr>

<tr bgcolor="lightblue">

<td valign=top>

<b>Jumlah^*</b>

<br />

<input type="text" name="jml_brg" value="" size=5

maxlength=125>

<br /></td>

<td valign=top>

<b>Harga^*</b>

<br />

<input type="text" name="harga_brg" value="" size=15

maxlength=8></td>

</tr>

<tr bgcolor="lightblue">

<td align=center colspan=2>

<input type="submit" value="Submit"><input type="reset"

value="Reset">

</td>

</tr>

</table>

</center>

</form>

</div>

</div>

</div>

26

</div>

<div id=footer>

Design by PRODASE - &copy; Copyright 2012 - prodaslab.com

</div>

</body>

</html>

2. Controller – ActionControl.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import service.Databaseakses;

import service.ManageAction;

/**

* Servlet implementation class ActionControl

*/

public class ActionControl extends HttpServlet {

private static final long serialVersionUID = 1L;

public ActionControl(){

super();

}

private Databaseakses database=null;

private static final byte input_barang = 0;

27

private static final byte view_barang = 0;

private String[] COMMAND = {"input_barang","view_barang"};

private int identifyAction(String action){

for (int i=0; i<COMMAND.length; i++){

if (action.equals(COMMAND[i])){

return i;

}

}

return -1;

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

doPost(request, response);

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

int action = identifyAction(request.getParameter("action"));

String nextPage = "";

switch (action) {

case input_barang:

nextPage = inputBarang(request, response);

break;

case view_registrasi:

nextPage = viewBarang(request, response);

break;

default:

nextPage="inputBarang.jsp";

28

break;

}

RequestDispatcher dispatcher =request.getRequestDispatcher(nextPage);

dispatcher.forward(request, response);

}

private String inputBarang(HttpServletRequest request, HttpServletResponse response){

String nextPage="";

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

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

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

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

try {

nextPage = ManageAction.getInstance(database, request,

response).inputDataBarang(id_brg, nama_brg, jml_brg, harga_brg);

} catch (Exception e) {

e.printStackTrace();

}

return nextPage;

}

private String viewBarang(HttpServletRequest request, HttpServletResponse response){

String nextPage="";

try {

nextPage = ManageAction.getInstance(database, request, response).viewDataBarang();

} catch (Exception e) {

e.printStackTrace();

}

return nextPage;

}

29

}

3. Service-ManageAction.java

package service;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import model.BarangBean;

public class ManageAction {

private Databaseakses database;

private static ManageAction instance;

private HttpServletResponse response;

private HttpServletRequest request;

private ManageAction(Databaseakses database, HttpServletRequest request, HttpServletResponse

response){

this.database = database;

this.request = request;

this.response = response;

}

public static ManageAction getInstance(Databaseakses database, HttpServletRequest request,

HttpServletResponse response){

if(instance == null){

instance = new ManageAction(database, request, response);

}

30

return instance;

}

public String inputDataBarang(String id_brg, String nama_brg, String jml_brg, String harga_brg){

String address="";

try {

BarangBean bean = new BarangBean();

bean.setId_brg(id_brg);

bean.setNama_brg(nama_brg);

bean.setJml_brg(jml_brg);

bean.setHarga_brg(harga_brg);

String[] query = {"insert into barang (id_brg, nama_brg, jml_brg, harga_brg)

values('"+id_brg+"','"+nama_brg+"','"+jml_brg+"','"+harga_brg+"')"};

database.getInstance().executeUpdateQuery(query);

System.out.println(query[0]);

address = "/ActionControl?action=view_barang";

} catch (Exception e) {

e.printStackTrace();

}

return address;

}

public String viewDataBarang() throws SQLException{

String address="";

String query = "select*from barang";

ResultSet rs = database.getInstance().executeSelectQuery(query);

ArrayList DataList = new ArrayList();

BarangBean barang;

while(rs.next()){

barang = new BarangBean();

barang.setId_brg(rs.getString(1));

barang.setNama_brg(rs.getString(2));

barang.setJml_brg(rs.getString(3));

31

barang.setHarga_brg(rs.getString(4));

DataList.add(barang);

}

request.setAttribute("viewBarang", DataList);

address = "Results/success.jsp";

return address;

}

}

4. Model-BarangBean.java

package model;

import java.io.*;

import java.util.*;

public class BarangBean {

private String id_brg;

private String nama_brg;

private String jml_brg;

private String harga_brg;

public BarangBean() {

id_brg="";

nama_brg="";

jml_brg="";

harga_brg="";

}

public String getId_brg() {

return id_brg;

}

public String getNama_brg() {

return nama_brg;

32

}

public String getJml_brg() {

return jml_brg;

}

public String getHarga_brg() {

return harga_brg;

}

public void setId_brg(String id_brg) {

this.id_brg =id_brg;

}

public void setNama_brg(String nama_brg) {

this.nama_brg =nama_brg;

}

public void setJml_brg(String jml_brg) {

this.jml_brg=jml_brg;

}

public void setHarga_brg(String harga_brg) {

this.harga_brg=harga_brg;

}

5. View Barang-success.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

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

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

<jsp:useBean id="success" class="model.FormBean" scope="request"/>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="css/style.css" rel="stylesheet" type="text/css"/>

<title>MODUL IV</title>

</head>

<body>

33

<div id=main>

<div id=header>

<p class="opening">SELAMAT DATANG DI PRAKTIKUM APSI 2012

ENJOY YOUR LESSON :D</p>

</div>

<div id=content>

<div id=content_kiri>

<div id=content_menu>

<ul>

<li><a href="index.jsp">Home</a></li>

li><a href="inputBarang.jsp">Input Barang</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Tutorial</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>

</div>

<div id=content_kanan>

<div id=content_kanan_dalam>

<center>

<table cellpadding=1 cellspacing=1 border="1" >

<font size=4>

<tr bgcolor="lightblue">

<th>ID Barang</th>

<th>Nama Barang</th>

<th>Jumlah Barang</th>

<th>Harga Barang</th>

</tr>

<c:forEach var="view"

items="${viewBarang}">

<tr bgcolor="lightblue">

<td>${view.id_brg}</td>

34

<td>${view.nama_brg}</td>

<td>${view.jml_brg}</td>

<td>${view.harga_brg}</td>

</tr>

</c:forEach>

</font>

</table>

</center>

</div>

</div>

</div>

</div>

<div id=footer>

Design by PRODASE - &copy; Copyright 2012 - prodaslab.com

</div>

</body>

</html>