View
12
Download
0
Category
Preview:
Citation preview
HALAMAN JUDUL
TEKNIK PEMBENTUKAN CITRA GRAFIS YANG DINAMIS
DENGAN WEB SERVICE
SKRIPSI
Diajukan untuk Memenuhi Salah Satu Syarat
Memperoleh Gelar Sarjana Teknik Program Studi Teknik Informatika
Disusun Oleh : Benidiktus 045314001
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA
YOGYAKARTA 2008
TEKNIK PEMBENTUKAN CITRA GRAFIS YANG DINAMIS DENGAN
WEB SERVICE
SKRIPSI
Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana
Teknik Program Studi Teknik Informatika
Disusun Oleh : Benidiktus 045314001
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA
YOGYAKARTA 2008
i
GENERATING A DYNAMIC GRAPHIC IMAGE TECHNIQUE USING
WEB SERVICE
SKRIPSI
Presented as partial of The Requirements to Obtain Sarjana Teknik Degree
in Informatic Engineering
by : Benidiktus 045314001
DEPARTMENT OF INFORMATIC ENGINEERING FACULTY OF SCIENCE AND TECHNOLOGY
SANATA DHARMA UNIVERSITY YOGYAKARTA
2008
i
HALAMAN PERSETUJUAN
ii
HALAMAN PENGESAHAN
iii
HALAMAN PERSEMBAHAN
Saat putus asa melingkupiku ....aku memilih tetap maju.
Saat aku tak paham maksud Tuhan..... ....aku memilih percaya.
Saat aku tertekan oleh kekecewaan... ....aku memilih bersyukur.
i dedicated my best work especially to :
FATHER IN HEAVEN
My lovely family :
My father and My mother,
My brother Kristianus Eko
My sister Agatha Rita
My little angel :
Vicka Manuhutu My all friends and almamater
Have mercy on us
iv
HALAMAN MOTTO
MOTTO
Give up is all you can left
behind
v
LEMBAR PERNYATAAN PERSETUJUAN
PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS
vi
PERNYATAAN KEASLIAN KARYA
vii
ABSTRAKSI
Pada saat ini, banyak situs yang menggunakan diagram dan grafik untuk
menggantikan data dengan tipe numeris. Diagram atau grafik yang dinamis
mampu merepresentasikan perubahan data dengan baik dan lebih jelas secara
visual. Citra grafis yang dinamis merupakan suatu bentuk gambar yang komponen
penyusunnya dapat berubah sewaktu-waktu mengikuti perubahan yang terjadi.
Citra dinamis banyak diterapkan dalam bentuk grafik atau diagram untuk
memperjelas pemahaman terhadap data bertipe numeris.
Contoh kasus yang dipilih untuk penerapan citra grafis yang dinamis
adalah monitoring perkembangan akademik mahasiswa. Pemantauan atau
monitoring terhadap keadaan akademik mahasiswa dapat diperoleh melalui
informasi dalam bentuk grafik yang dinamis. Grafik monitoring akademik
dibangun berdasarkan perkembangan akademik yang telah dicapai oleh
mahasiswa bersangkutan sejak semester pertama hingga saat ini dan dapat
menentukan apakah mahasiswa tersebut berada di kategori kritis, normal atau
berprestasi.
Metode yang digunakan adalah dengan teknik pembentukan gambar
dinamis dari data numerik di database. Teknologi multi-tier dipilih untuk
mendukung sistem ini dengan penggunaan arsitektur three-tier. Arsitektur ini
sangat baik digunakan untuk skala enterprise karena kelebihannya dalam
membagi kerja sistem menjadi lapisan-lapisan sehingga kinerja sistem secara
umum menjadi lebih maksimal. Sistem ini akan terdiri dari 3 bagian yaitu,
viii
Aplikasi Web Client pada lapisan presentasi, Aplikasi Server yang terdiri dari web
service dan engine yang meng-generate grafik akademik pada lapisan logik serta
server database pada lapisan data untuk menyimpan data akademik.
Piranti lunak yang digunakan untuk membangun sistem ini adalah
dengan Java sebagai bahasa pemrograman, platform yang digunakan jdk 1.6,
Netbeans IDE 5.5.1 sebagai editor, JAX-WS sebagai web service yang merupakan
bawaan dari Netbean, serta JSP servlet untuk pengembangan aplikasi web client.
Web Server yang digunakan adalah Sun Java Application Server PE 9.
Hasil pengujian yang diperoleh adalah, teknik pembentukan citra grafis
yang dinamis berhasil diimplementasikan dalam pembentukan gambar grafik
perkembangan akademik mahasiswa. Pengujian ini dilakukan dengan
menggunakan 3 komputer client untuk menampilkan grafik secara bersamaan.
Waktu generate gambar rata-rata adalah 1,509 detik. Gambar yang dihasilkan
memiliki format PNG(Portable Network Graphic) dan berukuran 640 x 480 pixel.
ix
ABSTRACT
At the present time, many web site use chart and graphic to represent
numeric data. Dynamic chart or graph have an ability to representate and perform
the change of data clearly and dinamically. Dynamic image graph is an image
form which the formed component can be changed anytime depend on the
difference that happen. Dynamic image often implemented in form of chart or
graph to clear the meaning of numeric data.
Study case that being choosen to implement dynamic image graphic is
through student academic progress monitoring system. Academic observation or
monitoring can be informed or display in form of dynamic graph. The graph
develop based on academic progress the student gained since first semester until
present time and can be categorized into a critical, normal or excellent level .
Method that being used are image construction technique from numeric
data in database. Multi-tier technology, with three-tier architecture is selected to
support this system. This architecture well known as preferrable architecture for
enterprise application because its ability to divide system works into layers since
it maximize system performance commonly. This system also divide into 3
section, Web Client Application on presentation layer, Server Application that
consists of web service and graphic engine generator on logic bussiness layer, and
database server on the data layer to keep the academic data.
Softwares that used are Java as the programming language, the platform
is jdk 1.6, the editor used are Netbeans IDE 5.5.1, JAX-WS is used as web
x
service, JSP servlet use as web site development language, and the web server are
Sun Java System Application Server PE 9.
Testing result showed that generating dynamic image technique
succesfully implemented in generate chart image of student academic progress.
This test using 3 client computer to show academic chart at the same time. The
result is 1,509 second average time. Image produced on PNG (Portable Network
Graphics) format and 640 x 480 pixel sized.
xi
KATA PENGANTAR
Puji dan syukur kepada Tuhan Yang Maha Kuasa karena berkat, rahmat
serta karunia-Nya yang berlimpah sehingga Penulis dapat menyelesaikan Laporan
Tugas Akhir ini dengan baik. Laporan Tugas Akhir ini berjudul TEKNIK
PEMBENTUKAN CITRA GRAFIS YANG DINAMIS DENGAN WEB
SERVICE.
Penulisan Tugas Akhir ini ditujukan sebagai pemenuhan salah satu syarat
memperoleh gelar Sarjana Teknik Jurusan Teknik Informatika Universitas Sanata
Dharma Yogyakarta.
Proses penyusunan Tugas Akhir ini juga tidak mungkin terlaksana tanpa
bimbingan, dukungan, petunjuk, kritik, saran serta kerjasama dari berbagai pihak,
baik secara langsung maupun secara tidak langsung. Pada kesempatan ini, Penulis
secara khusus menyampaikan terima kasih yang sebesar-besarnya atas segala
bentuk bantuan moril dan materiil kepada :
1. Tuhan Yesus Kristus, karena berkat kasih-Mu yang berlimpah dan tiada
habisnya pada hamba-Mu ini.
2. Bapak J.B. Budi Darmawan, S.T., M.Sc. selaku Dosen Pembimbing Tugas
Akhir yang selalu memberikan bantuan dan pengarahan selama penyusunan
skripsi ini.
3. Ibu Agnes Maria Polina, S.Kom., M.Sc. selaku Dosen Pembimbing Akademik
Angkatan 2004 Teknik Informatika Universitas Sanata Dharma.
4. Bapak Puspaningtyas Sanjoyo Adi, S.T., M.T., selaku Ketua Jurusan Teknik
Informatika Universitas Sanata Dharma.
xii
5. Bapak Iwan Binanto, S.T., M.Cs., selaku dosen penguji pada ujian
pendadaran.
6. Bapa’ dan Mama’-ku tercinta serta abang dan adikku terkasih Eko dan Ita
terima kasih atas doa, semangat dan keceriaan yang kalian berikan.
7. Octaviana Manuhutu. Terima kasih atas senyuman dan kerianganmu dari hari
ke hari yang selalu menyemangatkanku. Tetap semangat dan berjuanglah
untuk skripsimu.
8. Teman-teman Teknik Informatika USD angkatan 2004 : Rio, Arif, Dony,
Anton, Angga, Poy, Jumpret dan lain-lain....Maaf tidak bisa dituliskan satu-
persatu.
9. Yudi......terima kasih buat dasinya.
10. My very very best friend, Danang. Terima kasih atas kesabaranmu, semangat,
keceriaan, pesan-pesan serta kata-katamu yang selalu menggugah semangat
dan hatiku.
11. Pak Belle dan Mas Danang selaku laboran di Lab Basis Data dan Lab Jaringan
Komputer serta Mbak Dhea, terima kasih atas dukungannya selama ini.
12. Pak Dar, terima kasih atas sapaan dan senyumanmu sehari-hari.
13. Pihak lain yang tidak dapat disebutkan satu-persatu, penulis mohon maaf dan
terima kasih sebesar-besarnya.
Demikian Laporan Tugas Akhir dengan judul TEKNIK
PEMBENTUKAN CITRA GRAFIS YANG DINAMIS DENGAN WEB
SERVICE ini. Semoga hasil penelitian ini dapat berguna bagi kita semua. Sistem
xiii
xiv
DAFTAR ISI
HALAMAN JUDUL................................................................................................ i
HALAMAN PERSETUJUAN................................................................................ ii
HALAMAN PENGESAHAN................................................................................ iii
HALAMAN PERSEMBAHAN ............................................................................ iv
HALAMAN MOTTO ............................................................................................. v
LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI KARYA ILMIAH
UNTUK KEPENTINGAN AKADEMIS ........................................................ vi
PERNYATAAN KEASLIAN KARYA ............................................................... vii
ABSTRAKSI .......................................................................................................viii
ABSTRACT............................................................................................................ x
KATA PENGANTAR .......................................................................................... xii
DAFTAR ISI......................................................................................................... xv
DAFTAR TABEL................................................................................................ xix
DAFTAR GAMBAR ............................................................................................ xx
DAFTAR LISTING ........................................................................................... xxiv
BAB I PENDAHULUAN....................................................................................... 1
I.1. ......................................................... 1 LATAR BELAKANG MASALAH
I.2. .......................................................................... 3 RUMUSAN MASALAH
I.3. ........................................................................... 3 BATASAN MASALAH
I.4. ............................................ 4 TUJUAN DAN MANFAAT PENELITIAN
I.4.1. ............................................................................ 4 Tujuan Penelitian
I.4.2. .......................................................................... 4 Manfaat Penelitian
xv
I.5. ................................................................ 5 METODOLOGI PENELITIAN
I.5.1. ...................................................................... 5 Pencarian Kebutuhan
I.5.1.1. .............................................. 5 Observasi dan Pengumpulan Data
I.5.1.2. ............................................................................. 5 Studi Literatur
I.5.2. ............................................................. 6 Analisa Dan Desain Sistem
I.5.2.1. ............................................................................. 6 Analisa Sistem
I.5.2.2. .............................................................................. 6 Desain Sistem
I.5.2.3. ................................................................... 6 Implementasi Sistem
I.6. ................................................................. 7 SISTEMATIKA PENULISAN
BAB II LANDASAN TEORI ................................................................................. 9
II.1. ...................................... 9 METODOLOGI PENGEMBANGAN SISTEM
II.1.1. ..................... 9 Pendekatan Model-Driven-Information Engineering
II.1.2.1. ........................................................................ 10 UML Artifact
II.1.2.2. ................................................................ 10 Use-Case Diagram
II.1.2.3. ................................................................... 11 Activity Diagram
II.1.2.4. ................................................................ 11 Sequence Diagram
II.1.2.5. ....................................................................... 11 Class Diagram
II.1.2.6. ......................................................................... 12 Simbol UML
II.1.3. ................................. 14 PENDEKATAN BERORIENTASI OBJEK
II.2. ................................................................ 14 ARSITEKTUR THREE-TIER
II.2.1. ........................... 16 Lapisan Antarmuka Pengguna (User Interface)
II.2.1.1. ........................................................ 17 Java Server Pages (JSP)
II.2.1.2. .................................................................................... 20 Ext JS
xvi
II.2.1.3. ............................................................................ 22 Web Server
II.2.2. ................. 22 Lapisan Logika Bisnis ( Bussiness Logic / Logic Tier)
II.2.2.1. .......................................................................... 23 Web Service
II.2.2.2. ............................................................................. 27 JFreeChart
II.2.2.3. ............................................................................. 30 Java Image
II.2.3. .......................................................................... 31 Lapisan Database
II.2.3.1. ......................................................... 31 Database Server Mysql
II.3. .................................................... 34 XML (eXtensible Markup Language)
II.4. ........................................................................................ 37 MONITORING
BAB III ANALISIS DAN PERANCANGAN SISTEM ...................................... 39
III.1. ............................................................ 39 GAMBARAN UMUM SISTEM
III.2. .................................................................... 39 FASE ANALISIS SISTEM
III.2.1. ..................................................................... 39 Konsep Kerja Sistem
III.2.2. ....................................................................... 43 Analisis Kebutuhan
III.2.2.1. ................................................................. 43 Use Case Diagram
III.2.3. .......................................................................... 44 Struktur Database
III.3. ................................................... 45 ANALISIS BERORIENTASI OBJEK
III.3.1. ........................................................................... 45 Activity Diagram
III.3.2. .............................................................. 50 Object Analysis Diagram
III.3.3. ..................................................... 50 Use Case Realization Diagram
III.3.4. ........................................................................ 51 Sequence Diagram
III.3.5. ................................................................. 56 Collaboration Diagram
III.4. ....................................................... 58 DESAIN BERORIENTASI OBJEK
xvii
III.4.1. .................................................................. 58 Desain Class Diagram
III.5. ................................................................... 66 PERANCANGAN SISTEM
III.5.1. .......................................................... 66 Perancangan User Interface
BAB IV IMPLEMENTASI SISTEM ................................................................... 85
IV.1. ................................................................. 85 KARAKTERISTIK SISTEM
IV.2. ........................................................................ 87 KEBUTUHAN SISTEM
IV.3. ..................................................................... 89 APLIKASI WEB CLIENT
IV.3.1. ................................................................................ 89 Hirarki Model
IV.3.2. ............................................. 95 Implementasi Antarmuka Pengguna
IV.4. ............................................................................ 114 APLIKASI SERVER
IV.5. ......................................................................................... 118 DATABASE
IV.6. .............................. 120 TEKNIK PEMBENTUKAN GRAFIK DINAMIS
BAB V ANALISIS HASIL................................................................................. 122
V.1. ............................................................. 122 HASIL PENGUJIAN SISTEM
V.2. ........................................................................ 124 KELEBIHAN SISTEM
V.3. ................................................................... 125 KEKURANGAN SISTEM
V.4. ........................................... 125 PROSPEK PENGEMBANGAN SISTEM
BAB VI KESIMPULAN DAN SARAN ............................................................ 126
VI.1. ..................................................................................... 126 KESIMPULAN
VI.2. ................................................................................................. 127 SARAN
DAFTAR PUSTAKA ......................................................................................... 128
LAMPIRAN........................................................................................................ 130
BIOGRAFI PENULIS ........................................................................................ 138
xviii
DAFTAR TABEL
Tabel II.1 Tipe Data Numerik............................................................................... 32
Tabel II.2 Tipe Data Numerik............................................................................... 33
Tabel II.3 Tipe Data Numerik............................................................................... 33
Tabel V.1 Tabel Hasil Pengujian Performa ........................................................ 123
xix
DAFTAR GAMBAR Gambar II.1 Simbol aktor (i), use case (ii) dan label (iii)..................................... 12
Gambar II.2 Simbol start (i), proses (ii), kondisi (iii), stop (iv) dan aliran proses
(v) .................................................................................................................. 12
Gambar II.3 Simbol antarmuka (i), proses (ii), database(iii), pemanggilan
fungsi(iv) ....................................................................................................... 13
Gambar II.4 Simbol objek entitas (i), objek control (ii), objek boundary (iii), garis
hubungan agregasi (iv), garis hubungan turunan (v) .................................... 13
Gambar II.5 Simbol kelas (i), objek instansiasi kelas (ii), panah arah realisasi (iii),
hubungan include(iv) .................................................................................... 13
Gambar II.6 Simbol kelas (i), symbol turunan (ii), symbol one to many (iii) ...... 14
Gambar II.7 Arsitektur three-tier .......................................................................... 15
Gambar II.8 Arsitektur Aplikasi dalam sistem three-tier ..................................... 16
Gambar II.9 Langkah kerja JSP ............................................................................ 19
Gambar III.1 Konsep Kerja Sistem....................................................................... 40
Gambar III.2 Use Case Diagram Web Service monakWS.................................... 43
Gambar III.3 Use Case Diagram Web Service monakWS ................................... 44
Gambar III.4 Struktur Database Sistem Monitoring Akademik........................... 45
Gambar III.5 Activity Diagram meminta Data Akademik.................................... 46
Gambar III.6 Activity Diagram meminta grafik akademik................................... 47
Gambar III.7 Activity Diagram Meminta layanan menampilkan data akademik. 48
Gambar III.8 Activity Diagram meminta layanan menampilkan grafik akademik49
Gambar III.9 Object Analysis Diagram ................................................................ 50
xx
Gambar III.10 Use Case Realization..................................................................... 51
Gambar III.11 Sequence Diagram Menampilkan Data Perkembangan Akademik
....................................................................................................................... 52
Gambar III.12 Sequence Diagram meminta layanan menampilkan grafik
akademik ....................................................................................................... 53
Gambar III.13 Sequence Diagram Meminta layanan menampilkan data akademik
....................................................................................................................... 54
Gambar III.14 Sequence Diagram meminta layanan menampilkan grafik
akademik ....................................................................................................... 55
Gambar III.15 Colaboration Diagram................................................................... 56
Gambar III.16 Class Diagram untuk Aplikasi Client............................................ 59
Gambar III.17 Class Diagram untuk Server ......................................................... 61
Gambar III.18 Halaman Login Pengguna Sistem Monitoring Perkembangan
Akademik ...................................................................................................... 67
Gambar III.19 Halaman Login Pengguna Administrator...................................... 67
Gambar III.20 Halaman Menu Pengguna Mahasiswa .......................................... 68
Gambar III.21 Halaman Tampil Perkembangan Akademik - Pengguna Mahasiswa
....................................................................................................................... 69
Gambar III.22 Halaman Ubah Password Pengguna Mahasiswa........................... 71
Gambar III.23 Halaman Menu Pengguna Dosen PA............................................ 72
Gambar III.24 Halaman Data Mahasiswa-Pengguna Dosen PA .......................... 73
Gambar III.25 Halaman Ubah Password Pengguna Dosen PA ............................ 73
Gambar III.26 Halaman Menu Pengguna Kepala Program Studi......................... 74
xxi
Gambar III.27 Halaman Monitoring Akademik Per Angkatan Pengguna Kepala
Program Studi ............................................................................................... 75
Gambar III.28 Halaman Perkembangan Akademik per Mahasiswa Pengguna
Kepala Program Studi ................................................................................... 76
Gambar III.29 Halaman Ubah Password-Pengguna Kepala Program Studi......... 77
Gambar III.30 Halaman Menu Pengguna Sekretariat Jurusan.............................. 77
Gambar III.31 Halaman Monitoring Akademik Per Angkatan Sekretariat Jurusan
....................................................................................................................... 78
Gambar III.32 Halaman Perubahan Data Akademik Mahasiswa Pengguna
Sekretariat Jurusan ........................................................................................ 79
Gambar III.33 Halaman Perkembangan Akademik Per Mahasiswa Pengguna
Sekretariat Jurusan ........................................................................................ 80
Gambar III.34 Halaman Ubah Password Pengguna Sekretariat Jurusan .............. 81
Gambar III.35 Halaman Menu Pengguna Administrator...................................... 81
Gambar III.36 Halaman Pengelolaan Pengguna Administrator............................ 82
Gambar III.37 Halaman Tambah Pengguna - Administrator................................ 82
Gambar III.38 Halaman Ubah Data Pengguna - Administrator............................ 83
Gambar III.39 Halaman Hapus Pengguna - Administrator................................... 84
Gambar III.40 Halaman Ubah Password Pengguna Administrator ...................... 84
Gambar IV.1 Aplikasi Server (i), Aplikasi Client(ii)............................................ 86
Gambar IV.2 Sun Java System Application ServerTM ........................................... 88
Gambar IV.3 MySQL 5.0.18 ................................................................................ 89
Gambar IV.4 Hirarki Model untuk Pengguna Mahasiswa.................................... 90
xxii
Gambar IV.5 Hirarki Model untuk Pengguna Dosen Pembimbing Akademik .... 90
Gambar IV.6 Hirarki Model untuk Pengguna Ketua Program Studi .................... 92
Gambar IV.7 Hirarki Model untuk Pengguna Sekretariat .................................... 93
Gambar IV.8 Hirarki Model untuk Pengguna Adminstrator ................................ 94
Gambar IV.9 Halaman Login Pengguna (login.html)........................................... 95
Gambar IV.10 Halaman Login Administrator (login_admin.html) ...................... 95
Gambar IV.11 Tabel data perkembangan akademik mahasiswa .......................... 98
Gambar IV.12 Grafik Monitoring Perkembangan Akademik............................. 100
Gambar IV.13 Halaman Perkembangan Akademik Mahasiswa......................... 103
Gambar IV.14 Halaman Monitoring Akademik ................................................. 105
Gambar IV.15 Halaman Monitoring Akademik Per Angkatan .......................... 107
Gambar IV.16 Halaman Perubahan Data Akademik Mahasiswa ....................... 108
Gambar IV.17 Halaman Menu Pengaturan Pengguna ........................................ 110
Gambar IV.18 Struktur database akademik ....................................................... 119
xxiii
xxiv
DAFTAR LISTING
Listing II.1Listing contoh kode program halam JSP sederhana ........................... 18
Listing II.2 Listing contoh XML........................................................................... 34
Listing II.3 Listing di atas merupakan pejelasan dari elemen XML..................... 35
Listing II.4 Penjelasan atribut dan isi atribut xml ................................................. 35
Listing II.5 Contoh penulisan DTD di dalam dokumen XML.............................. 37
Listing III.1 SOAP request TampilPerkembanganAkademik .............................. 41
Listing III.2 SOAP response TampilPerkembanganAkademik ............................ 42
Listing IV.1 fungsi wsMonak.get()....................................................................... 99
Listing IV.2 Kode program konversi byte menjadi image ................................. 101
Listing IV.3 kode program penggunan MediaTracker........................................ 102
Listing IV.4 fungsi monakWS.getAkt().............................................................. 104
Listing IV.5 fungsi monakWS.getAkademik() ................................................... 105
Listing IV.6 fungsi monakWS.getAkademik() ................................................... 108
Listing IV.7 Kode program dari fungsi perubahan data akademik mahasiswa .. 109
Listing IV.8 Fungsi untuk menambah pengguna ................................................ 111
Listing IV.9 Fungsi untuk merubah data pengguna............................................ 112
Listing IV.10 Fungsi untuk menghapus pengguna ............................................. 112
Listing IV.11 Fungsi untuk menampilkan data pengguna .................................. 113
BAB I Pendahuluan | 1
BAB I
PENDAHULUAN
I. PENDAHULUAN
I.1. LATAR BELAKANG MASALAH
Dalam kehidupan sehari-hari, kita sering menghadapi situasi
dimana terdapat perubahan data yang cepat seperti pada pasar saham, data
akademik mahasiswa yang berubah tiap semester, kurs mata uang dan lain-
lain. Data tersebut merupakan data dinamis, karena perubahan yang selalu
terjadi pada nilainya. Terkadang kita sulit memahami data dinamis yang
tertera dalam bentuk data numerik di dalam tabel, terutama untuk melihat
perubahan yang terjadi. Grafik dinamis merupakan pilihan yang tepat untuk
merepresentasikan data dinamis tersebut agar lebih mudah untuk dipahami
secara visual.
Perkembangan akademik mahasiswa yang disajikan pada sistem
yang saat ini digunakan di BAPSI (Badan Administrasi dan Perencanaan
Sistem Informasi) untuk mahasiswa, dosen maupun sekretariat
menggunakan tampilan tabel dan angka numerik. Hal ini mungkin akan
meyebabkan kesulitan bagi mahasiswa, dosen, jurusan dan pihak lain yang
berkepentingan dalam memahami data yang disajikan. Melihat keadaan
tersebut, dibutuhkan suatu sistem yang mampu menampilkan data akademik
dalam bentuk grafik yang dinamis dengan tujuan agar lebih mudah
dipahami. Pemahaman tersebut kemudian dapat ditindaklanjuti dengan
tindakan yang membangun seperti dukungan dan motivasi terhadap
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 2
mahasiswa bersangkutan. Sistem ini juga didukung oleh teknologi multi-tier
sehingga perubahan data yang terjadi dapat ter-update dengan cepat,
misalnya perubahan pada tiap semester.
Teknologi multi-tier merupakan teknologi yang diterapkan untuk
membangun sistem pada tingkat enterprise dengan tujuan untuk
peningkatan performa. Salah satu penerapan teknologi ini adalah arsitektur
three-tier. Pada arsitektur three-tier, sistem secara keseluruhan dibagi
menjadi 3 lapisan, yaitu lapisan antarmuka pengguna, lapisan logika bisnis
dan lapisan database. Pembagian kerja menurut lapisannya masing-masing
akan meningkatkan kinerja sistem secara umum. Selain itu perubahan pada
salah satu lapisan tidak akan mempengaruhi lapisan lain. Pembentukan
grafik yang dinamis terletak pada lapisan logika bisnis.
Dalam penyusunan Tugas Akhir ini penulis bermaksud
memanfaatkan keunggulan dari teknologi three-tier untuk membangun
aplikasi berbasis web yang mampu memonitor perkembangan akademik
mahasiswa dengan mengimplementasikan teknik pembentukan grafik yang
dinamis dimana komponen penyusun gambarnya dapat berubah mengikuti
perubahan yang terjadi. Data yang disajikan dalam sistem ini antara lain
adalah pencapaian jumlah sks lulus serta perkembangan Indeks Prestasi
Kumulatif mahasiswa dari tiap semester.
Teknologi yang dibutuhkan untuk mengembangkan sistem ini
dibagi ke dalam 3 lapisan yang terdapat pada arsitektur three-tier. Pada
lapisan antamuka pengguna, teknologi yang digunakan adalah JSP Servlet.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 3
Lapisan logika bisnis menggunakan beberapa teknologi yaitu : JDBC untuk
koneksi dengan database, JFreeChart untuk membentuk grafik, penggunaan
kelas Java Image untuk menghasilkan gambar dinamis dari grafik serta
JAX-WS untuk melayani transportasi data dari atau ke client. Lapisan
database menggunakan database server MySQL untuk melayani
penyimpanan data di storage.
I.2. RUMUSAN MASALAH
Inti permasalahan yang muncul adalah bagaimana
mengimplementasikan teknik pembentukan grafik yang dinamis dengan
memanfaatkan teknologi multi-tier dalam membangun piranti lunak untuk
memonitor perkembangan akademik mahasiswa ?
I.3. BATASAN MASALAH
Piranti lunak ini akan dibangun dengan batasan sebagai berikut :
a. Sistem monitoring perkembangan akademik mahasiswa ini menggunakan
syarat-syarat yang berdasarkan pada Buku Panduan Akademik 2007,
Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Sanata
Dharma, Jogjakarta.
b. Sistem monitoring ini hanya menampilkan contoh visualisasi
perkembangan akademik mahasiswa dalam bentuk grafik.
c. Data yang disajikan adalah pencapaian jumlah sks yang lulus per
semester dilengkapi dengan perkembangan IPK dari mahasiswa Teknik
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 4
Informatika angkatan 2003, 2004 dan 2005 sejak semester ganjil tahun
2003 sampai semester genap tahun 2006.
d. Data jumlah sks lulus, serta IPK tiap semesternya menggunakan data riil
dari BAPSI. Dalam penerapannya akan digunakan format NIM yang
sesuai namun data NIM tersebut yang tidak dipakai pada setiap angkatan.
e. Grafik monitoring akademik akan menempatkan hasil pencapaian
akademik, yaitu jumlah sks lulus, ke dalam 3 kelompok yaitu “Kritis”,
“Normal”, dan “Berprestasi”.
f. Sistem ini tidak menangani kondisi khusus seperti cuti atau
perpanjangan studi lebih dari 10 semester.
I.4. TUJUAN DAN MANFAAT PENELITIAN
I.4.1. Tujuan Penelitian
Menerapkan teknik pembentukan grafik dinamis yang dipadu
dengan teknologi multi-tier untuk mengembangkan Sistem Monitoring
Perkembangan Akademik Mahasiswa.
I.4.2. Manfaat Penelitian
Manfaat yang diharapkan dari penelitian adalah : sistem ini dapat
membantu pihak terkait dalam hal ini mahasiswa, dosen pembimbing
akademik, petugas sekretariat serta kaprodi dalam memantau
perkembangan akademik mahasiswa.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 5
I.5. METODOLOGI PENELITIAN
Metodologi yang digunakan dalam pengembangan sistem ini
adalah Information Engineering (IE) (Whitten, 2004) dan Rational Unified
Process(RUP) (Whitten, 2004) karena proses analisis dan desain yang
digunakan menitik beratkan pada data (data centered) namun sensitif
terhadap proses serta berorientasi objek.
I.5.1. Pencarian Kebutuhan
I.5.1.1. Observasi dan Pengumpulan Data
a. Melakukan observasi dan wawancara BAPSI Universitas Sanata
Dharma.
b. Mengumpulkan data yang dibutuhkan antara lain NIM, jumlah sks
lulus kumulatif, serta IPK per semester.
c. Menganalisis dan memahami data yang telah terkumpul.
I.5.1.2. Studi Literatur
a. Memahami dan mendalami konsep sistem yang akan dibangun.
b. Mempelajari dan mendalami Java Server Pages dan Java Web Service
secara optimal.
c. Mempelajari komponen-komponen penting yang akan digunakan
seperti eXtensible Markup Language(XML), Database, Remote
Method Invocation(RMI), dan Enterprise Java Beans(EJB).
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 6
d. Melakukan penelitian untuk mengembangkan teknik pembentukan
gambar dinamis dengan web service.
I.5.2. Analisa Dan Desain Sistem
I.5.2.1. Analisa Sistem
Dalam analisis dan desain sistem ini model yang digunakan
adalah Object Oriented Analysis (OOA) dengan menggunakan alat bantu
analisis Unified Modelling Language (UML). Langkah-langkahnya adalah
melakukan tahap analisis kebutuhan (Requirement Analysis) yang terdiri
dari perancangan Use Case Diagram serta tahap pemodelan proses
(Modelling Process) yang terdiri dari Activity Diagram dan Sequence
Diagram.
I.5.2.2. Desain Sistem
Melakukan perancangan dan desain yang terdiri dari Design
Application Architecture, Design System Databases, Design System
Interface yang terdiri dari desain antarmuka input dan output.
I.5.2.3. Implementasi Sistem
Pada tahap ini dilakukan instalasi dan pengujian Sistem
Monitoring Perkembangan Akademik Mahasiswa yang terdiri dari Web
Service dan antarmuka berbasis web.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan | 7
I.6. SISTEMATIKA PENULISAN
a. Bab I Pendahuluan
Bab ini berisi tentang penjelasan singkat mengenai latar
belakang penggunaan teknologi multi-tier, Web Service dan JSP,
rumusan masalah yang dapat diselesaikan dengan teknologi Web Service
dan JSP, batasan dari sistem yang dibangun, tujuan dan manfaat dari
penelitian dan pengembangan sistem, motodologi pengembangan sistem,
serta sistematika penulisan Tugas Akhir.
b. Bab II Landasan Teori
Bab ini berisi penjelasan mengenai landasan teori yang
digunakan dalam penelitian yang menjadi dasar dalam proses
pengembangan, analisis hasil serta pengambilan kesimpulan dari
penelitian yang dilakukan.
c. Bab III Analisis dan Perancangan Sistem
Bab ini berisi tentang fase definisi, fase analisis masalah,
requirement analysis, logical design, dan decision analysis. Bab ini juga
berisi penjelasan mengenai desain sistem yaitu application architecture,
desain database, desain output, desain input, desain user interface untuk
Sistem Monitoring Perkembangan Akademik Mahasiswa.
d. Bab IV Implementasi
Bab ini berisi penjelasan mengenai analisis dan desain dari
piranti lunak yang akan dikembangkan.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB I Pendahuluan |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
8
e. Bab V Analisis Hasil
Bab ini menyajikan penjelasan mengenai analisis hasil
implementasi Sistem Monitoring Perkembangan Akademik Mahasiswa.
f. Bab VI Kesimpulan dan Saran
Bab ini berisi penjelasan mengenai kesimpulan yang diperoleh
selama penelitian dan pengembangan sistem serta saran-saran yang ada
untuk pengembangan sistem ke depan.
BAB II Landasan Teori | 9
BAB II
LANDASAN TEORI
II. LANDASAN TEORI
Bagian ini secara garis besar akan menjelaskan teori-teori yang
digunakan dalam penelitian ini. Landasan teori ini mencakup gambaran umum
mengenai metodologi, teknologi multi-tier dan komponennya serta monitoring..
II.1. METODOLOGI PENGEMBANGAN SISTEM
II.1.1. Pendekatan Model-Driven-Information Engineering
Model Information Engineering (IE) merupakan suatu model
yang berfokus pada data. Model ini dapat digunakan untuk tahap
perencanaan, analisa, dan desain sistem informasi. IE menggambarkan
sinkronisasi data dan proses namun tidak mencukupi untuk disain sistem
karena harus dibarengi dengan metode-metode yang lain (Irwin, 2004).
Salah satu tools yang umum digunakan untuk melakukan
pendekatan ini adalah dengan menggunakan UML (Unified Modelling
Language). Tools ini dipilih karena memiliki struktur dan langkah kerja
yang lengkap serta telah memiliki standar internasional.
II.1.2. Unified Modelling Language (UML)
Unified Modelling Language (UML) merupakan sistem arsitektur
yang bekerja dalam object oriented analysis dan object oriented design
(OOA/D) dengan satu bahasa yang konsisten untuk menentukan,
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 10
memvisualisasikan, mengkonstruksi dan mendokumentasikan artifact
yang terdapat dalam sistem perangkat lunak. Artifact adalah sepotong
informasi yang digunakan atau dihasilkan dalam suatu proses rekayasa
perangkat lunak. Artifact dapat berupa model, deskripsi atau perangkat
lunak.
II.1.2.1. UML Artifact
Dalam pembuatan suatu model dengan UML, terdapat suatu
susunan diagram grafis yang menjadi langkah dalam pengembangan
sistem. Diagram grafis tersebut tersusun sebagai berikut :
1) Use-case diagram
2) Activity diagram
3) Sequence diagram
4) Class diagram
II.1.2.2. Use-Case Diagram
Use Case Diagram menjelaskan manfaat sistem jika dilihat
menurut sudut pandang orang yang berada di luar sistem (actor).
Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan
bagaimana sistem berinteraksi dengan dunia luar. Use-Case Diagram
digunakan selama proses analisis untuk menangkap semua kebutuhan
sistem serta memahami bagaimana sistem seharusnya bekerja. Dalam
sebuah model mungkin terdapat satu atau beberapa use-case diagram.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 11
II.1.2.3. Activity Diagram
Activity Diagram memodelkan alur kerja (workflow) sebuah
proses bisnis dan urutan aktivitas dalam suatu proses. Diagram ini
memodelkan sebuah alur kerja dari satu aktivitas ke aktivitas lainnya
atau ke dalam keadaan sesaat (state). Diagram ini berguna dalam
menggambarkan perilaku interaksi dari berbagai use case.
II.1.2.4. Sequence Diagram
Sequence Diagram menjelaskan interaksi objek yang disusun
dalam suatu urutan waktu. Diagram ini secara khusus berasosiasi
dengan use-case. Sequence diagram memperlihatkan tahap demi tahap
apa yang seharusnya terjadi untuk menghasilkan sesuatu di dalam use
case.
II.1.2.5. Class Diagram
Class Diagram dapat digunakan untuk memvisualisasikan
struktur kelas-kelas dari suatu sistem. Class Diagram memperlihatkan
hubungan antar kelas dan penjelasan detail dari tiap-tiap kelas di dalam
model desain dari suatu sistem. Pada proses analisis, class diagram
memperlihatkan aturan serta tanggung jawab entitas yang menentukan
perilaku sistem. Class diagram menampilkan struktur dari semua kelas
yang terbentuk dalam arsitektur sistem yang dibuat.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 12
II.1.2.6. Simbol UML
Simbol-simbol UML yang digunakan dalam pengembangan
sistem ini dibuat menggunakan Microsoft Office Visio 2003 yang
menggunakan standar komponen UML internasional (Unified Modeling
Language: Superstructure, 2002).
a. Use Case Diagram
Pada use case diagram terdapat dua simbol utama yaitu actor dan
use case seperti pada Gambar II.1 di bawah ini.
(i) (ii) (iii)
Gambar II.1 Simbol aktor (i), use case (ii) dan label (iii) (Microsoft Office Visio, 2003)
b. Activity Diagram
Pada activity diagram terdapat 5 simbol utama yang
digunakan seperti pada Gambar II.2 di bawah ini.
(i) (ii) (iii)
(iv) (v)
Gambar II.2 Simbol start (i), proses (ii), kondisi (iii), stop (iv) dan aliran proses (v) (Microsoft Office Visio, 2003)
c. Sequence Diagram
Pada sequence diagram terdapat 4 simbol utama seperti
pada Gambar II.3 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 13
(i) (ii) (iii)
(iv)
Gambar II.3 Simbol antarmuka (i), proses (ii), database(iii), pemanggilan fungsi(iv) (Microsof Office Visio, 2003)
d. Object Analysis Diagram
Pada object analysis diagram, terdapat 5 simbol utama yang
digunakan seperti pada Gambar II.4 di bawah ini.
(i) (ii) (iii)
(iv) (v)
Gambar II.4 Simbol objek entitas (i), objek control (ii), objek boundary (iii), garis hubungan agregasi (iv), garis hubungan turunan (v) (Microsof Office Visio, 2003)
e. Use Case Realisasi
Pada use case realization digunakan symbol-simbol seperti
pada Gambar II.5 dibawah ini.
(i) (ii)
(iii) (iv)
Gambar II.5 Simbol kelas (i), objek instansiasi kelas (ii), panah arah realisasi (iii), hubungan include(iv) (Microsof Office Visio, 2003)
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 14
f. Class Diagram
Pada class diagram digunakan simbol-simbol seperti pada
Gambar II.6 dibawah ini :
(i) (ii) (iii)
Gambar II.6 Simbol kelas (i), symbol turunan (ii), symbol one to many (iii) (Microsof Office Visio, 2003)
II.1.3. PENDEKATAN BERORIENTASI OBJEK
Teknik desain berorientasi objek digunakan untuk menyaring
definisi kebutuhan objek yang diidentifikasi di awal selama analisis.
Teknik ini juga digunakan untuk mendefinisikan objek-objek yang
spesifik (Irwin, 2004).
II.2. ARSITEKTUR THREE-TIER
Dalam pengembangan piranti lunak, salah satu arsitektur multi-tier
(sering disebut sebagai arsitektur n-tier) yang umum digunakan adalah
arsitektur three-tier. Arsitektur three-tier adalah sebuah arsitektur client-
server dimana antarmuka, proses logik fungsional (aturan bisnis),
penyimpanan data komputer dan akses data dikembangkan serta
dipertahankan sebagai modul yang independen, kebanyakan pada platform
terpisah (Eckerson, 1995). Pada arsitektur three-tier terdapat tiga lapisan
yaitu lapisan antarmuka pengguna, lapisan logika bisnis dan lapisan
database seperti pada Gambar II.7. di bawah ini :
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 15
Gambar II.7 Arsitektur three-tier (Green, 2007)
Pada gambar diatas, setiap lapisan memiliki tugas pada bagiannya
masing-masing. Keuntungan dari arsitektur three-tier adalah :
a. Perubahan pada tiap lapisan tidak saling mempengaruhi satu sama lain
yang dapat meningkatkan kemudahan berevolusi dalam menemukan
kebutuhan baru.
b. Network bottleneck dapat diminimalkan karena lapisan bussines logic
hanya mentransmisikan data yang diperlukan oleh client saja.
c. Client terisolasi dari basisdata dan operasi jaringan. Hal ini akan
meningkatkan segi keamanan sistem.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 16
Arsitektur aplikasi dari three-tier dapat dilihat pada Gambar II.8 di
bawah ini :
Gambar II.8 Arsitektur Aplikasi dalam sistem three-tier (Daniels, 2001)
Pada gambar di atas dapat dilihat bahwa Web Server dan Web Client
beserta komponen web lain seperti javascript, Ext JS berada pada layer
Presentation, Web Service berada pada layer Service atau logika bisnis
dan Database Server berada pada layer Data. Penjelasan mengenai tiap
lapisan akan dijelaskan pada subbab-subbab selanjutnya.
II.2.1. Lapisan Antarmuka Pengguna (User Interface)
Lapisan antarmuka pengguna merupakan lapisan pada level
teratas karena secara langsung menangani urusan input-output dengan
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 17
pengguna. Lapisan ini berkomunikasi dengan lapisan lain melalui output
yang dihasilkan serta menerima hasil input untuk diolah kembali sebelum
ditampilkan pada pengguna (Khawar, 2001).
Komponen dari lapisan antarmuka pengguna yang digunakan
dalam sistem ini antara lain adalah Java Server Pages, Ext-JS dan Web
Server.
II.2.1.1. Java Server Pages (JSP)
Suatu teknologi web ekstensibel yang menggunakan template
data, elemen-elemen yang bervariasi, bahasa skrip dan objek Java pada
sisi server yang akan mengembalikan konten dinamis ke klien. Secara
tipikal, template dari data adalah elemen HTML atau XML. Klien
biasanya adalah sebuah web browser. Java Servlet adalah sebuah
program java yang menurunkan fungsionalitas dari sebuah Web Server,
meng-generate konten dinamis dan berinteraksi dengan web client
menggunakan paradigma request-response.
a. Konten Statis dan Dinamis
Suatu konten statis biasanya merupakan sebuah halaman
HTML statis dan menampilkan suatu tampilan yang sama bagi
semua pihak. Contoh dari konten statis : HTML, XML, teks. Konten
yang dinamis, biasanya di-generate berdasarkan pada kondisi.
Dimana kondisi tersebut dapat tergantung pada beberapa hal seperti
identitas user, waktu atau inputan user melalui pilihan pada form.
Contoh konten dinamis adalah : kode Java, tampilan properti dari
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 18
Java bean, invoke logika bisnis yang didefinisikan di tag-tag untuk
kustomisasi.
b. Pengertian Java Server Pages (JSP)
Java Server Pages (JSP) adalah sebuah dokumen berbasis
teks yang berkemampuan untuk mengembalikan konten statis
maupun dinamis ke web browser di sisi client. Konten statis dan
dinamis dapat dicampur. Contoh sederhana dari halaman JSP dapat
dilihat pada kode program di Listing II.1 dibawah ini :
<html> <body> Halo Dunia! <br> Waktu sekarang adalah <%= new java.util.Date() %> </body> </html>
Listing II.1Listing contoh kode program halam JSP sederhana
Pada listing di atas kode program dengan warna biru merupakan
konten statis, sedangkan yang berwarna merah adalah konten
dinamis
c. Keuntungan JSP
Beberapa keuntungan dari Java Server Pages adalah
konten dan tampilan logika di pisahkan, menyederhanakan
pembangunan aplikasi web dengan JSP, JavaBeans dan tag-tag
kustom, mendukung penggunaan kembali perangkat lunak melalui
penggunaan komponen-komponen, deploy otomatis (kompilasi
ulang otomatis ketika perubahan dibuat pada halaman JSP),
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 19
kemudahan bagi perancang halaman web, serta platform-
independent.
d. Langkah Kerja JSP
Langkah kerja dari Java Server Page, seperti pada Gambar
II.9, dapat dijelaskan sebagai berikut :
1) pengguna melakukan request terhadap suatu layanan
2) server menangkap request tersebut
3) pada JSP dilakukan pengecekan kondisi apakah terjadi
perubahan file atau tidak
4a) jika ya maka dilakukan pembuatan source dan proses
Kompilasi dan langkah selanjutnya mengeksekusi Servlet
4b) jika tidak maka langsung dilanjutkan pengeksekusian
Servlet.
Gambar II.9 Langkah kerja JSP (Bodoff, 2007)
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 20
II.2.1.2. Ext JS
Ext JS adalah library JavaScript multi browser yang dapat
digunakan untuk membangun aplikasi internet yang kaya dan dinamis.
Beberapa fitur dari Ext JS adalah performa yang tinggi, antarmuka
pengguna yang bisa dikustomisasi, dirancang, didokumentasikan serta
memiliki model komponen ekstensibel yang baik, berlisensi komersial
dan open source. Kelas-kelas yang sering digunakan dalam library Ext
JS antara lain adalah :
a. Ext.Viewport
Kelas yang berfungsi sebagai layout atau tampilan utama bagi suatu
halaman web. Layout ini dapat menampung komponen-komponen yang
berisi konten web (Ext 2.0 API Documentation, 2008).
b. Ext.BoxComponent
Kelas yang digunakan sebagai komponen yang mengisi layout seperti
pada kelas Ext.Viewport. Kelas ini dapat menampung panel-panel pada
halaman web (Ext 2.0 API Documentation, 2008).
c. Ext.TabPanel
Kelas ini merupakan kelas untuk membentuk panel dalam bentuk tab-
tab. Panel dapat berisi tabel, gambar, teks dan konten-konten halaman
web lainnya (Ext 2.0 API Documentation, 2008).
d. Ext.form.FormPanel
Kelas ini merupakan panel untuk membuat form seperti form html.
Kelas ini memiliki komponen seperti label, teksfield, teksarea, checkbox,
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 21
radiobutton, button dan komponen form lainnya (Ext 2.0 API
Documentation, 2008).
e. Ext.data.SimpleStore
Kelas ini berfungsi sebagai penampung data. Data diperoleh dari
variabel lokal. Data yang ditampung bisa berasal dari query dan dapat
digunakan oleh tabel (Ext 2.0 API Documentation, 2008).
f. Ext.data.JsonStore
Kelas ini berfungsi untuk menampung data dengan format JSON.
Kelebihan kelas ini adalah data dapat diambil dari url tertentu dan dapat
digunakan sebagai penyedia data tabel dan gambar. Data yang
disediakan lebih fleksibel dan dinamis (Ext 2.0 API Documentation,
2008).
g. Ext.grid.GridPanel
Kelas ini berfungsi untuk membentuk tabel. Data dari kelas ini dapat
diperoleh dari berbagai sumber penyedia data seperti
Ext.data.SimpleStore dan Ext.data.JsonStore (Ext 2.0 API
Documentation, 2008).
h. Ext.DataView
Kelas ini berfungsi untuk menampilkan data gambar dari sumber
penyedia data tertentu (Ext 2.0 API Documentation, 2008).
i. Ext.MessageBox
Kelas ini berfungsi untuk menampilkan pesan seperti informasi,
kesalahan, dan pesan lainnya (Ext 2.0 API Documentation, 2008).
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 22
II.2.1.3. Web Server
Server web adalah sebuah perangkat lunak server yang
berfungsi menerima permintaan HTTP atau HTTPS dari klien yang
dikenal dengan browser web dan mengirimkan kembali hasilnya dalam
bentuk halaman-halaman web yang umumnya berbentuk dokumen
HTML. Server web yang terkenal diantaranya adalah Apache Jakarta
Tomcat, Microsoft Internet Information Service (IIS) dan Sun Java
Application Server. Apache merupakan server web antar platform,
sedangkan IIS hanya dapat beroperasi di sistem operasi Windows. Pada
pengembangan sistem ini web server yang dipilih adalah Sun Java
Application Server. Hal ini dikarenakan kompatibilitasnya serta
fasilitas-fasilitas yang disediakan dengan JSP untuk aplikasi client serta
JAX-WS sebagai web service nya.
II.2.2. Lapisan Logika Bisnis ( Bussiness Logic / Logic Tier)
Lapisan logika bisnis adalah lapisan yang menangani proses-
proses utama dalam sistem secara keseluruhan. Logika bisnis adalah
kondisi non teknis yang umum digunakan untuk mendeskripsikan
algoritma-algoritma fungsional yang menangani pertukaran informasi
antara dua lapisan lainnya, antarmuka pengguna dengan database. Lapisan
ini dapat dilihat dengan jelas dari input / output nya yaitu data hasil
validasi dari client dan produk logika. (Khawar, 2001)
Pada sistem ini lapisan logika bisnis memiliki beberapa
komponen yaitu Web Service, JFreeChart dan Java Image.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 23
II.2.2.1. Web Service
a. Sejarah Web Service
Pada tahun 1999 divisi dari Hewlett-Packard's yaitu e-Speak
menjadi sebuah penyedia layanan e-service. Layanan ini memberikan
fasilitas bagi pengguna produk Hewlett-Packard untuk informasi dan
komplain. Selanjutnya, Microsoft memperkenalkan nama web services
pada Juni 2000. Web Service ini telah mendekati dengan apa yang
sudah kita kenal sekarang yaitu suatu bentuk service yang siap
melayani request data serta transportasi data di web (Wikipedia,
2007).
b. Komponen dan Standar Web Service
Ada empat komponen dasar pada web service yaitu :
1) WSDL (Web Service Description Language )
2) UDDI (Universal Description, Discovery and Integration)
3) SOAP (Simple Object Access Protokol)
4) Protokol transport komunikasi antar web service (WSRP, WSIA,
WXL).
Web Service disusun dan dibentuk sepenuhnya berdasarkan
pada standar web dan xml. Web Service dapat berfungsi sebagai
pembantu atau penolong dalam :
1) perantara pada integrasi platform sepanjang eksekusi mesin
virtual.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 24
2) integrasi antara Web dan middleware Object Oriented
3) integrasi dari aliran kerja terisolasi dan layanan-layanan (Web
Services Flow Language-WSFL)
4) pertukaran data pada aplikasi yang berbeda-beda (X-Schema,
XSLT ++).
c. WSDL (Web Service Description Language)
WSDL (Web Services Description Language) adalah sebuah
tata bahasa XML untuk mendeskripsikan antarmuka web service,
protokol yang disupport web service serta lokasinya. Spesifikasi
WSDL Versi 1.1 dibuat oleh IBM Research dan Microsoft. Walaupun
WSDL bukan standar W3C ataupun bagian yang harus ada dalam
membuat dan memanggil web service, tetapi didukung di berbagai
implementasi klien SOAP dan development tools. WSDL merupakan
format XML yang diterbitkan untuk menerangkan suatu web service.
Fungsi dari WSDL yaitu untuk mendefinisikan :
1) pesan-pesan (baik yang abstrak dan kongkrit) yang dikirim ke dan
menuju web service
2) koleksi-koleksi digital dari pesan-pesan (tipe port, antarmuka)
3) bagaimana port type yang ditentukan dijadikan wire protokol
4) di mana layanan ditempatkan.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 25
WSDL dapat diartikan sebagai sebuah mesin yang dapat
dibaca, yaitu dapat berupa sebuah file XML, tool-tool dan
infrastrukturnya dapat dengan mudah dibuat. Tipe semacam ini dapat
menyembunyikan detil-detil yang tidak perlu dalam pengiriman dan
penerimaan pesan-pesan SOAP pada protokol-protokol yang berbeda-
beda. Apache axis menggunakan utilitas bernama WSDL2Java pada
kelas-kelas di Java untuk melakukan fungsi generasi kelas-kelas dari
definisi WSDL, misalnya generasi satu kelas untuk menggunakan
service dan fungsi lain untuk mengimplementasikan service. Kelas-
kelas yang digenerasi dari definisi WSDL yang sama harus mampu
berkomunikasi dengan yang lain sepanjang antarmuka WSDL yang
tersedia, tanpa memperhatikan bahasa pemrograman yang digunakan.
Versi WSDL terdaftar yang terakhir adalah WSDL 1.2 (Wikipedia,
2007).
d. UDDI (Universal Description, Discovery and Integration)
Lebih dikenal dengan sebutan skema XML yaitu kemampuan
atribut metadata untuk menjalankan service-service yang didaftarkan
pada UDDI, kemudian menjalankan queri-queri berdasarkan pada
metadata tersebut dan untuk mencapai tujuan dari UDDI baik pada
waktu desain maupun waktu pengeksekusian. Tugas dari UDDI
adalah sebagai bentuk deskripsi pemrograman dari bisnis dan service
yang didukung oleh deskripsi pemrograman dari spesifikasi web
service, model pemrograman dan skema (Wikipedia, 2007).
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 26
e. SOAP (Simple Object Access Protocol)
Merupakan protokol standar untuk bertukar pesan-pesan
berbasis XML melalui jaringan komputer. SOAP menjadi sebuah
jalan bagi program yang berjalan pada suatu sistem operasi (OS)
untuk berkomunikasi dengan program lain baik pada OS yang sama
maupun berbeda dengan menggunakan HTTP dan XML sebagai
mekanisme untuk pertukaran data. SOAP menspesifikan secara jelas
bagaimana cara untuk meng-encode header HTTP dan file XML
sehingga program pada suatu komputer dapat memanggil program
pada komputer lain untuk saling bertukar informasi, serta mengatur
bagaimana program yang dipanggil memberikan tanggapan. Fungsi
dari SOAP adalah :
1) menentukan format XML,
2) cara data diproses,
3) menentukan aturan untuk mengenkode, untuk standar dan tipe
data yang didefinisikan oleh aplikasi,
4) konvensi yang merepresentasikan remote procedure call, dan
response.
SOAP adalah protokol ringan yang ditujukan untuk
pertukaran informasi struktur pada lingkup desentralisasi, dan
terdistribusi. SOAP menggunakan teknologi XML untuk
mendefinisikan rangka kerja pemesanan terekstensi di mana
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 27
menyediakan konstruksi pesan yang dapat dipertukarkan pada
protokol berbeda. Rangka kerja dirancang bebas dari model
pemrograman dan spesifikasi implementasi semantik (Wikipedia,
2007).
II.2.2.2. JFreeChart
JFreeChart adalah library grafik tak berbayar yang
diperuntukan bagi platform Java dan dirancang untuk digunakan dalam
aplikasi, applet, servlet dan JSP (JFreeChart Class Library v1.0.10,
2008). JFreeChart dapat membangkitkan atau menghasilkan grafik roda,
grafik batang (reguler dan bertumpuk, dengan efek 3D), grafik garis,
grafik titik hamburan, grafik berbasis waktu (termasuk pergerakan rata-
rata, grafik high-low-open-close(untuk saham) dan candlestick plots),
grafik Gantt, grafik ukur(dial, compass and thermometer), grafik
simbol, wind plots, dan grafik kombinasi. Kelas-kelas utama yang
digunakan antara lain adalah (JFreeChart Class Library v1.0.10, 2008) :
a. JFreeChart
Merupakan kelas grafik yang diimplementasikan menggunakan API
Java 2D. JFreeChart mengkoordinasi beberapa objek sehingga dapat
digambar menggunakan grafik Java 2D. Kelas ini menampung
komponen utama grafik yaitu Plot.
b. XYPlot
Kelas umum yang digunakan sebagai area untuk menggambar data
dalam bentuk pasangan koordinat x dan y. Plot ini dapat menggunakan
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 28
data dari semua kelas yang mengimplementasikan interface XYDataset.
XYPlot memakai fungsi dari XYItemRenderer untuk menggambar
setiap titik pada plot. Dengan menggunakan berbagai renderer yang
berbeda bermacam-macam tipe grafik dapat dihasilkan.
c. ChartPanel
Kelas ini merupakan komponen Swing GUI untuk menampilkan objek
JFreeChart. Panel ini ditunjuk bersama grafik untuk menerima notifikasi
untuk setiap perubahan komponen grafik. Grafik akan digambar ulang
secara otomatis setiap kali notifikasi diterima.
d. XYDataset
XYDataset merupakan sub interface dari interface Dataset yang khusus
menangani penyimpanan dan pengaksesan data dalam bentuk koordinat
x dan y. Interface ini dapat diisi komponen berupa XYSeriesCollection.
e. XYSeries
Kelas ini mewakili urutan data 0 atau lebih dalam bentuk koordinat x
dan y (x,y). Secara otomatis, komponen dalam series akan diurutkan
dari kecil ke besar berdasarkan nilai x dimana duplikasi nilai x
diijinkan. Aturan pengurutan dan duplikasi dapat diubah melalui
konstruktor. Nilai y dapat berupa null untuk mewakili nilai yang hilang.
f. XYSeriesCollection
Interface ini merepresentasikan koleksi dari beberapa objek XYSeries
yang dapat digunakan sebagai dataset.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 29
g. XYItemRenderer
XYItemRenderer adalah sub interface yang merupakan turunan dari
LegendItemSource. Interface ini digunakan untuk merender representasi
visual dari sebuah item tunggal (x, y) pada suatu XYPlot.
h. XYLineAndShapeRenderer
Kelas ini merupakan turunan dari kelas abstrak
AbstractXYItemRenderer. Kelas ini berfungsi sebagai alat untuk
merender yang menghubungkan titik-titik data dengan garis dan / atau
menggambar bentuk pada setiap titik data.
i. XYAreaRenderer
Kelas ini merupakan turunan dari kelas abstrak XYAreaItemRenderer.
Kelas ini berfungsi untuk merender grafik berbentuk area pada XYPlot.
Kelas ini mampu menggambar bangun datar pada tiap titik, garis antar
titik, bangun datar dan garis, mengisi suatu area, serta mengisi area dan
bangun datar.
j. ValueAxis
Kelas abstrak ini merupakan turunan dari kelas abstrak Axis dan
berfungsi sebagai kelas dasar bagi axis-axis yang menampilkan nilai
data, dimana nilai diukur menggunakan tipe data double. Sub kelas dari
kelas abtrak ini adalah DateAxis dan NumberAxis.
k. NumberAxis
Kelas ini merupakan turunan dari ValueAxis. Kelas ini merupakan suatu
axis untuk menampilkan data numerik. Kelas ini memiliki mekanisme
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 30
untuk secara otomatis memilih tick unit yang tepat bagi jarak axis saat
itu. Mekanisme ini merupakan adaptasi dari kode yang disarankan oleh
Laurence Vanhelsuwe.
l. XYTextAnnotation
Kelas ini merupakan turunan dari kelas abstrak AbstractXYAnnotation.
Objek kelas ini digunakan untuk menambah catatan sesuai koordinat (x,
y) pada XYPlot.
II.2.2.3. Java Image
Citra grafis di java ( java image) ditangani oleh suatu paket
khusus yaitu java.awt.image. Paket ini menyediakan kelas-kelas untuk
pembentukan dan modifikasi gambar. Gambar diproses dengan
menggunakan framework streaming yang tergabung alam image
producers, optional image filters, dan images consumer. Framework ini
memungkinkan proses render gambar secara progresif pada saat gambar
tersebut sedang di fetched dan dibentuk. Lebih lanjut, framework ini
mengijinkan aplikasi untuk mencegah penggunaan media penyimpanan
oleh suatu gambar dan mencegah pembentukan ulang gambar setiap
saat. Paket ini menyediakan sejumlah image producer (produsen
gambar), image consumers (pengguna gambar) dan filters (penyaringan)
yang dapat dikonfigurasi pada pemrosesan gambar sesuai kebutuhan.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 31
II.2.3. Lapisan Database
Lapisan database merupakan lapisan yang terdiri dari database
server menangani penyimpanan serta perubahan data. Lapisan ini menjaga
agar data tetap netral dan independen terhadap dua lapisan lainnya. Selain
itu, dengan lapisan tersendiri skalabilitas dan performa sistem dapat
meningkat.
Pada sistem ini komponen yang termasuk pada layer data antara
lain adalah Database Server MySQL.
II.2.3.1. Database Server Mysql
MySQL adalah sebuah perangkat lunak yang berfungsi sebagai
sistem manajemen basis data dengan menggunakan SQL (Structure
Query Language) atau DBMS yang multithread, multi-user yang
mampu menangani sejumlah besar data. SQL adalah bahasa terstruktur
yang digunakan dalam pemrosesan dan transaksi pada database server.
Dengan menggunakan SQL, proses akses database menjadi lebih user-
friendly.
Dalam konteks bahasa SQL pada umumnya informasi
tersimpan dalam tabel-tabel yang secara logika merupakan dua dimensi
yang terdiri atas baris-baris data yang berada dalam satu atau lebih
kolom. Baris pada tabel sering disebut sebagai instance dari data,
sedangkan kolom sering disebut sebagai atribut atau field. Keseluruhan
tabel dihimpun dalam satu kesatuan yang disebut database. MySQL
mendukung empat tipe data yaitu:
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 32
1) Numerik
Pada tipe data ini data yang disimpan hanya data angka
(numerik) saja. Angka tersebut bisa disimpan dalam bentuk positif
atau negatif. Tipe data numerik pada MySQL dapat dilihat pada
Tabel II.1 sebagai berikut :
Tabel II.1 Tipe Data Numerik
Tipe Data Jangkauan Signed Memori
TINYINT -128-127 1 byte
SMALLINT -32768-32767 2 byte
MEDIUMINT -8388608-8388607 3 byte
INT -2147483648-2147483647 4 byte
BIGINT -9223372036854775808-
9223372036854775807
8 byte
FLOAT (M,D) Tergantung nilainya 4 byte
DOUBLE (M,D) Tergantung nilainya 8 byte
DECIMAL (M,D) Tergantung nilainya M+2 byte
2) String
Pada tipe data ini isinya bisa nilai string dan numerik,
namun untuk numerik tidak bisa dilakukan operasi perhitungan
sebelum dilakukan konversi. Tipe data numerik dapat dilihat pada
Tabel II.2 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 33
Tabel II.2 Tipe Data Numerik
Tipe Data Max Size Memori CHAR(X) 255 BYTE X BYTE
VARCHAR(X) 255 BYTE X+1 BYTE TINYTEXT 255 BYTE X+1 BYTE TINYBLOB 255 BYTE X+2 BYTE
TEXT 65535 BYTE X+2 BYTE BLOB 65535 BYTE X+2 BYTE
MEDIUMTEXT 1.6 MB X+3 BYTE MEDIUMBLOB 1.6 MB X+3 BYTE
LONGTEXT 4.2 MB X+4 BYTE LONGBLOB 4.2 MB X+4 BYTE
3) Waktu
Tipe data ini menyimpan informasi waktu, baik tanggal
maupun jam, walaupun data yang disimpan disini adalah numerik
tetapi pembacaan terhadap data adalah String sehingga dalam
penggunaannya harus dikonversi terlebih dahulu. Tipe data ini dapat
dilihat pada Tabel II.3 di bawah ini.
Tabel II.3 Tipe Data Numerik
Tipe Data Format Standar Zero Value DATETIME YYYY-MM-DD
HH:MM:SS 0000-00-00 00:00:00
DATE YYYY-MM-DD 0000-00-00 TIME HH:MM:SS 00:00:00 YEAR YYYY 0000
TIMESTAMP YYYYMMDDHHMMSS 00000000000000
4) Data selain numerik atau string
Ada dua tipe data yang tidak termasuk tipe data di atas
yaitu ENUM dan SET. ENUM adalah sebuah tipe data yang
menyimpan beberapa pilihan data yang akan disimpan tetapi hanya
ada satu pilihan yang boleh disimpan, sedangkan SET adalah tipe
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 34
data mirip seperti ENUM tetapi dapat memilih lebih dari pada satu
pilihan.
II.3. XML (eXtensible Markup Language)
XML merupakan suatu markup language dengan penyediaan
format bagi deskripsi suatu data terstruktur dan terurut. Tujuan fasilitas dari
XML adalah agar isi atau konten dari sebuah data menjadi lebih mudah
dimengerti. Suatu XML berisi kumpulan tag yang tak terbatas dan isinya
dapat dideklarasikan sesuai dengan keinginan pembuat XML, misalnya agar
lebih mudah dimengerti penerima XML. Data XML dapat diambil dan
dimanipulasi oleh aplikasi apapun karena sudah merupakan suatu standar.
Sehingga data yang diperoleh dari XML dapat ditampilkan di browser,
untuk aplikasi internet atau diproses kembali oleh aplikasi lain. Contoh
XML sederhana dapat dilihat pada listing Listing II.2 berikut :
<? Xml version = “1.0”?> <nikahan> <pasangan> <nama>Mas Lilik</nama> </pasangan> <pasangan> <nama>Mbak Defi</nama> </pasangan> </nikahan>
Listing II.2 Listing contoh XML
Kode program di atas merupakan contoh XML sederhana.
a. Elemen XML
File XML harus memiliki minimal sebuah elemen yang terdiri
dari tag pembuka, tag penutup, serta semua yang ada di antara tag
pembuka dan tag penutup. Tag pembuka dimulai dengan “<” dan
diakhiri dengan “>” sedangkan tag penutup diawali dengan “</” dan
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 35
diakhiri dengan “>”. Nama elemen dapat diisi dengan kata sebebasnya
tanpa penggunaan karakter sebagai berikut, @, #, $, %, ^, (, ), +, ?, =, .,
* serta penggunaan kata “xml”, “XML”, maupun kombinasinya.
Penjelasan dari elemen XML dapat dilihat pada Listing II.3 di bawah
ini :
Tag pembuka tag penutup <nama>Octaviana Manuhutu</nama>
Elemen
Listing II.3 Listing di atas merupakan pejelasan dari elemen XML
Pada gambar di atas dapat dilihat tag pembukan adalah “<nama>” dan
tag penutup adalah “</nama”. Elemen pada kode program di atas adalah
“Octaviana Manuhutu”.
b. Atribut XML
Atribut dalam XML biasanya digunakan untuk menambah
informasi pada sebuah elemen. Atribut memiliki 2 komponen yaitu
nama serta nilai atribut. Atribut dapat dinamai sebebasnya dan bisa
memiliki nilai default. Penempatannya biasanya setelah nama elemen
dan penulisannya seperti pada Listing II.4 berikut :
<nama nim= “048114001”>Octaviana Manuhutu</nama>
Atribut
Nilai / isi atribut
Listing II.4 Penjelasan atribut dan isi atribut xml
Pada gambar tersebut dapat dilihat bahwa atribut dari “nama” adalah
“nim” dengan isi atribut “048114001”.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 36
c. Keuntungan dari XML
XML memiliki beberapa keuntungan dan keunggulan yaitu :
1) ekstensibilitas
2) pemisahan data dengan presentasi data
3) fungsi pencarian yang lebih spesifik
4) dapat ditukar atau digabung dengan dokumen XML lain
5) ditulis sekali dan dapat dipakai dimana saja
6) penyederhanaan aplikasi
d. DTD (Document Type Definition) and Schemas
DTD merupakan bentuk standarisasi suatu penulisan dokumen
XML sehingga dapat digolongkan sebagai dokumen yang valid atau
tidak. Dalam dokumen XML, pendefinisian elemen dan atribut yang
diijinkan disebut juga dengan well-formed, yang berarti dokumen XML
tersebut sesuai dengan sintaks XML dasar. DTD juga menentukan
elemen dan atribut mana saja yang harus ada dan tidak wajib untuk
dicantumkan. DTD dapat diletakkan menjadi satu dengan dokumen
XML serta di luar dokumen XML. Contoh penulisan DTD yang
digabung dengan dokumen XML dapat dilihat pada Listing II.5 di
bawah ini :
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori | 37
<? xml version = “1.0” encoding = “UTF-8” standalone
= “yes” ?>
<!DOCTYPE elemen_pokok [
<!ELEMENT kelas (#PCDATA)> DTD
]>
<kelas>Kelas Praktikum Algoritma dan Struktur Data
I</kelas>
Listing II.5 Contoh penulisan DTD di dalam dokumen XML
Pada gambar di atas penulisan DTD di letakkan di bawah
deklarasi dokumen XML yaitu pada tag “<!DOCTYPE.... >”. Pada
listing di atas DTD tersebut berarti dokumen XML hanya boleh berisi
elemen utama (root element) yang bernama “kelas”. Simbol
(#PCDATA) menandakan bahwa isi elemen “kelas” hanya merupakan
teks biasa dan tidak berisi elemen.
II.4. MONITORING
Monitoring atau pemantauan merupakan suatu aktivitas untuk
mengamati perkembangan dari suatu proses. Sistem Monitoring Akademik
seperti pada judul penelitian ini berarti suatu sistem yang terkomputerisasi
yang mampu melakukan pemantauan terhadap perkembangan akademik dari
mahasiswa berdasarkan pencapaian jumlah sks yang lulus dari tiap
semesternya. Dari data tersebut kemudian dibentuk suatu grafik yang
menggambarkan perkembangan akademik dengan memberikan level atau
tingkat tertentu sebagai acuan perbandingan.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB II Landasan Teori |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
38
Pada sistem ini, penentuan area akademik berdasarkan pada Buku
Panduan Akademik 2007, Teknik Informatika, Fakultas Sains dan
Teknologi, Universitas Sanata Dharma, Yogyakarta. Penentuan ini
mencakup batasan sks yang harus ditempuh untuk mencapai level tertentu
baik sebagai prasyarat mata kuliah atau untuk evaluasi. Misalnya pada
semester 4 jumlah SKS lulus minimum yang harus dicapai mahasiswa
adalah 40 SKS, sehingga untuk dapat masuk ke dalam level “Normal” atau
“Berprestasi” mahasiswa harus mencapai lebih dari 40 SKS, jika tidak
mahasiswa tersebut akan masuk ke dalam level “Kritis” (Panduan
Akademik 2007 Teknik Informatika FST USD Jogjakarta, 2007).
BAB III Analisis dan Perancangan Sistem | 39
BAB III
ANALISIS DAN PERANCANGAN SISTEM
III. ANALISIS DAN PERANCANGAN SISTEM
III.1. GAMBARAN UMUM SISTEM
Sistem yang akan dibangun adalah sistem monitoring akdemik
mahasiswa Teknik Informatika Fakultas Sains dan Teknologi Universitas
Sanata Dharma. Program atau aplikasi yang dibangun akan bersifat client-
server. Bentuk komunikasi (request-response) antara Web Service dengan
database menggunakan MySqlConnectorJ sedangkan komunikasi antara
Web Service dengan aplikasi client yaitu internet browser dengan
memanfaatkan SOAP dalam pertukaran data serta protokol HTTP untuk
protokol transport.
III.2. FASE ANALISIS SISTEM
III.2.1. Konsep Kerja Sistem
Konsep kerja dari Sistem Monitoring Akademik ini
menggunakan arsitektur three-tier. Arsitektur sistem ini dirancang
berdasarkan pada Arsitektur Aplikasi Three-Tier menurut John Daniels di
halaman 16. Perancangan arsitektur sederhana dari sistem ini serta
mekanisme kerja sistem secara keseluruhan dapat dilihat pada Gambar
III.1 di bawah ini :
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 40
CLIENT TIER LOGIC TIER DATA TIER
JSP SERVLET JAX-WSDATABASE
SERVER MYSQL
CLIENT BROWSER
JAVA IMAGE JFREECHART
SOAP REQUEST
SOAP REPLY
HTTP REQUEST HTTP
RESPONSE
JDBC REQUEST
JDBC REPLY
CHART DATA
CHART BUFFERED IMAGE
IMAGE BYTE
Gambar III.1 Konsep Kerja Sistem
Keterangan dari gambar di atas dapat dilihat pada penjelasan di
bawah ini :
a. Pada sistem ini, sisi klien menggunakan internet browser untuk
mengakses web Sistem Monitoring Akademik. Web ini menyediakan
beberapa layanan yaitu tampilan hasil pencapaian akademik mahasiswa
selama masa perkuliahan. Pada layanan tersebut, yaitu menampilkan
perkembangan akademik (getGrafikAkademik), parameter yang
dikirimkan oleh client ketika melakukan request adalah NIM. Data-data
dalam parameter dikirim ke Web Service menggunakan XML dalam
paket SOAP. Contoh SOAP request client ke Web Service yang
disediakan oleh Java: SOAP untuk request getGrafikAkademik ke Web
Service dapat dilihat pada Listing III.1 di bawah ini :
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 41
<?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:ns1="http://monak.me.org/"> <soapenv:Body> <ns1:getGrafikAkademik> <nim>045314001</nim> </ns1:getGrafikAkademik> </soapenv:Body> </soapenv:Envelope>
Listing III.1 SOAP request TampilPerkembanganAkademik
b. Web Service akan mendeteksi dan melakukan identifikasi pesan
permintaan / request dari client berdasarkan informasi header dan
message body dari SOAP yang diterima. Pesan SOAP terdiri dari
message body dan informasi header yang dipakai untuk menerapkan
permintaan pesan tersebut, selanjutnya Web Service akan melayani
request SOAP dari client dengan menjalankan fungsi yang diminta
client. Web service kemudian meneruskan menjalankan queri ke
database server MySQL.
c. Pada database server MySQL, request tersebut akan segera diproses.
Hasilnya adalah data-data terkait dengan perkembangan akademik dari
mahasiswa dengan NIM bersangkutan. Data-data tersebut antara lain :
nim, jumlah sks yang lulus selama semester satu sampai saat ini serta
Indeks Prestasi Komulatif. Hasil tersebut kemudian diambil oleh Web
Service dengan menggunakan komponen JDBC yaitu JDBC Resultset
untuk mengeksekusi queri serta menampung datanya.
Data-data tersebut diterima dan akan diolah kembali oleh web service
dan di-generatemenjadi suatu gambar grafik menggunakan JFreeChart.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 42
Grafik ini berbentuk bufferedimage yang selanjutnya akan diproses ini
dengan memanfaatkan beberapa kelas Java Image yang akan mengambil
data dalam bentuk bytearray dari gambar. Data bytearray tersebut
selanjutnya dikonversi menjadi format kelas Object Java. Data Object
inilah yang kemudian dikirim kembali oleh Web Service menggunakan
SOAP. Contoh response dari Web Service ke JSP Servlet dapat dilihat
pada Listing III.2 di bawah ini :
<?xml version="1.0" encoding="UTF-8"?>
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:ns1="http://monak.me.org/">
<soapenv:Body>
<ns1:getGrafikAkademikResponse>
<return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xsi:type="xs:base64Binary">iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAABfkklEQVR42u29D1Bc15ngezeIoaMQwowRxVMxLipgQmziwRqVX5ceD2splYI9+NlxNPNUSF5pXRR..................................................................................................................R3mMJQlgRykT8XSGACCAzgaTohM3CwsLCwne9G48dN0EAEcAEL3Z5ciwsLCwsfNcjgAggAsjCwsLCwsKCACKACCALCwsLCwsLAogAIoAsLCwsLCwsCCACiACysLCwsLCwIIAIoGcEEAAAANYe3AQBBAAAAIAY/P+t2rkzFKCjSQAAAABJRU5ErkJggg==</return>
</ns1:getGrafikAkademikResponse>
</soapenv:Body>
</soapenv:Envelope>
Listing III.2 SOAP response TampilPerkembanganAkademik
Seperti pada kode program diatas SOAP response, terutama pada tag
“<ns1:getGrafikAkademikResponse>”, berisi data gambar hasil
konversi dalam bertipe base64binary. Tipe data tersebut adalah data
biner berbasis 64.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 43
d. Pada aplikasi web client, data tersebut diterima dalam bentuk Object
dan mengkonversi kembali menjadi data bytearray. Data yang diterima
kemudian akan disusun ulang menjadi bentuk objek gambar dengan
bantuan kelas MediaTracker di Java. Gambar ini selanjutnya di
tampilkan pada halaman di client browser.
III.2.2. Analisis Kebutuhan
III.2.2.1. Use Case Diagram
a. Web Services monakWS
Gambar III.2 di bawah ini adalah use case diagram Web Service
monakWS yang memiliki 2 actor, Aplikasi Client dan Database
Akademik, dan 2 buah use case, “Meminta layanan data akademik”
dan “Meminta grafik akademik”. Use case ini digunakan untuk
memperoleh perkembangan akademik dalam bentuk tabel dan
gambar grafik.
Gambar III.2 Use Case Diagram Web Service monakWS
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 44
b. Aplikasi Web Client
Gambar III.3 di bawah ini adalah use case diagram pada Aplikasi
Web Client dengan 2 actor yaitu Pengguna dan Web Service
monakWS. Pada use case, terdapat 2 fungsi utama yaitu “Meminta
layanan data akademik” dan “Meminta layanan grafik akademik”.
Use case ini digunakan untuk memperoleh perkembangan akademik
dalam bentuk tabel dan gambar grafik.
Aplikasi Web Client Database Akademik
Web Servis monakWS
Meminta layanan menampilkan data akademik
Meminta layanan menampilkan grafik akademik
Gambar III.3 Use Case Diagram Web Service monakWS
III.2.3. Struktur Database
Berikut ini adalah struktur database dari Sistem Monitoring
Akademik (Gambar III.4).
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 45
dosen
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))kajur(int(1)) pengampu(int(4))
sekretariat
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
Admin
*noinduk(varchar(50))nama(varchar(50))password(varchar(32))
`
mhs2003
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
area_kritis
*id(int(3))*kurikulum(int(4))smt1(double(5,2))smt2(double(5,2))smt3(double(5,2))smt4(double(5,2))smt5(double(5,2))smt6(double(5,2))smt7(double(5,2))smt8(double(5,2))smt9(double(5,2))smt10(double(5,2))
mhs2005
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
mhs2004
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
mhs2006
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
mhs2007
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
area_normal
*id(int(3))*kurikulum(int(4))smt1(double(5,2))smt2(double(5,2))smt3(double(5,2))smt4(double(5,2))smt5(double(5,2))smt6(double(5,2))smt7(double(5,2))smt8(double(5,2))smt9(double(5,2))smt10(double(5,2))
kurikulum
*id(int(3))*angkatan(int(4))kurikulum(int(4))
akt2003
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2004
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2005
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2006
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2007
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
Gambar III.4 Struktur Database Sistem Monitoring Akademik
III.3. ANALISIS BERORIENTASI OBJEK
III.3.1. Activity Diagram
a. Web Service monakWS
Activity Diagram pada Web Services monakWS menjelaskan aktifitas
utama yang terjadi pada lingkungan web service tersebut. Gambar
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 46
III.5 di bawah ini merupakan activity diagram dari fungsi web service
monakWS.
Aplikasi Web Client Web Service monakWS
1: Menjalankan layanan pencarian data akdemik yang
diminta
Database Akademik
3: Menjalankan pencarian data akademik
2: Meminta data-data akademik sesuai dengan data
yang diterima
Mulai
Selesai
Activity Diagram meminta data akademik
4: Menampung data akademik
5: Mengirim data akademik ke aplikasi client
Gambar III.5 Activity Diagram meminta Data Akademik
Proses ini dimulai dari response dari request aplikasi web client yaitu
menjalankan layanan permintaan data akademik. Data yang diterima
dari aplikasi client kemudian digunakan untuk mencari data akademik
di database. Selanjutnya queri dijalankan di database untuk
mendapatkan data akademik yang diminta. Hasil data akademik
kemudian dikirim ke aplikasi client.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 47
Aplikasi Web Client monakWSApplication
1: Menjalankan layanan pencarian data akdemik yang
diminta
Database Akademik
3: Menjalankan queri pencarian data akademik
2: Meminta data-data akademik sesuai dengan data
yang diterima
4: Menampung data akademik dalam variabel
penampung
5: Membentuk grafik akademik
Activity Diagram meminta grafik akademik
Mulai
Selesai
6: Menampung data grafik dalam objek Java
7: Mengirim data grafik ke aplikasi client
Gambar III.6 Activity Diagram meminta grafik akademik
Proses ini dimulai dengan inputan pengguna yaitu meminta layanan
untuk menampilkan perkembangan akademik. Aplikasi client akan
menjalankan layanan tampil perkembangan akademik pada web
service yang akan mengambil data NIM sebagai kunci utama.
Selanjutnya web service akan menjalankan queri ke database untuk
mendapatkan data akademik dari NIM bersangkutan. Data tersebut
kemudian ditampung ke dalam variabel. Objek kelas JFreeChart
kemudian membentuk grafik berdasarkan data akademik tersebut.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 48
Hasil bentukan ini akan dikonversi menjadi objek BufferedImage
untuk menampung komponen penyusun grafik. Selanjutnya objek
BufferedImage dikonversi ke dalam bentuk byte array oleh kelas
Image bawaan Java. Hasil konversi tersebut selanjutnya di clone
menjadi objek dari kelas Object bawaan Java. Objek tersebut yang
akan dikirim sebagai nilai balikan ke aplikasi client.
b. Aplikasi Web Client
Pada aplikasi web client diambil 2 activity diagram utama yaitu
layanan untuk menampilkan data akademik (Gambar III.7) dan
menampilkan grafik perkembangan akademik (Gambar III.8).
Gambar III.7 Activity Diagram Meminta layanan menampilkan data akademik
Activity diagram di atas dimulai dengan proses yang dimulai oleh
pengguna yang menjalankan aplikasi web. Aplikasi web akan
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 49
menampilkan halaman login dimana pengguna dapat mengisi data
login. Setelah divalidasi akan terdapat 2 kondisi yaitu data login
pengguna valid sehingga wsMonak menjalankan layanan
menampilkan data akademik. Kondisi kedua yaitu data login tidak
valid sehingga akan ditampilkan pesan kesalahan pada antarmuka
pengguna.
Pengguna Aplikasi Web Client
5: Membentuk komponen penampung data grafik
akademik
Web Service monakWS
1: Menerima data akademik
6: Menampilkan data grafik akademik
Activity Diagram meminta grafik akademik
2: Membentuk grafik akademik
Mulai
Selesai
3: Menampung data grafik dalam objek Java
4: Mengirim data grafik ke aplikasi client
Gambar III.8 Activity Diagram meminta layanan menampilkan grafik akademik
Proses di atas dimulai dari web service yang menerima data akademik dari
database dan membentuk grafik akademik. Grafik tersebut dikonversi dan
dikirim ke aplikasi client. Aplikasi client menampung dan mengolah data
grafik sebelum ditampilkan pada antarmuka pengguna.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 50
III.3.2. Object Analysis Diagram
Kelas-kelas analisis adalah kelas dengan stereotype “boundary”,
“control” dan entity” yang menggambarkan konsep awal mengenai objek
dalam sistem aplikasi. Kelas analisis ini akan berkembang menjadi kelas
dalam proses Object Design seperti dapat dilihat pada Gambar III.9 di
bawah ini.
Gambar III.9 Object Analysis Diagram
Pada object analysis diagram di atas terdapat beberapa kelas dengan tipe
sebagai berikut : monakWSJSPClient (boundary), monakWS (control),
dan areaAkademik (control).
III.3.3. Use Case Realization Diagram
Use Case Realization Diagram menggambarkan bagaimana
sebuah Use Case direalisasikan dalam bentuk kolaborasi berbagai objek
seperti pada Gambar III.10 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 51
Gambar III.10 Use Case Realization
Seperti pada gambar diatas, pada use case monakWS direalisasikan 2 fungsi
utama yaitu “meminta layanan menampilkan data akademik” dan “meminta
layanan menampilkan grafik akademik”. Fungsi menampilkan grafik
akademik bersifat include terhadap fungsi menampilkan data akademik,
dimana untuk dapat menampilkan grafik dibutuhkan pemanggilan data
akademik terlebih dahulu.
III.3.4. Sequence Diagram
Berikut ini adalah sequence diagram bagi fungsi-fungsi utama
yang dirancang dalam pengembangan sistem ini.
a. Web Service monakWS
Web Service monakWS memiliki 2 fungsi utama untuk
menampilkan data akademik dan grafik perkembangan akademik.
Sequence diagram dari sisi server dapat dilihat pada Gambar III.11
dan Gambar III.12 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 52
Gambar III.11 Sequence Diagram Menampilkan Data Perkembangan Akademik
Gambar di atas dapat dijelaskan melalui langkah-langkah berikut ini :
1) pengguna memilih layanan untuk menampilkan data akademik
sehingga aplikasi web client kemudian memanggil fungsi
getGrafikAkademik() dari web service dan menunggu nilai
baliknya
2) selanjutnya dijalankan fungsi call spDataAkademik() oleh web
service untuk memperoleh data akademik mahasiswa dari database
3) proses pencarian dilakukan di database
4) (a) bila ketemu data akademik akan ditampung . (b) bila tidak,
maka ditampilkan pesan kesalahan pada pengguna.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 53
5) data akademik yang ditampung selanjutnya dikirim ke aplikasi
web client sebagai SOAP response.
2. call spGrafikAkademik(NIM)
Database AkademikWeb Service monakWS
1. getAkademik(NIM, tipe_data)
4a. Menampung data akademik
5. kirimDataGrafik()
3. Melakukan pencarian data
akademik
Aplikasi Web Client
4b.pesanKesalahan()
5. createChart()
6. getByte()
7. clone()
Sequence Diagram Meminta Grafik Akademik
Gambar III.12 Sequence Diagram meminta layanan menampilkan grafik akademik
Berdasarkan gambar di atas, proses dimulai pada saat aplikasi web
client memanggil fungsi web service getAkademik dengan parameter
(NIM, tipe_data). Web service akan mengambil data akademik di
database dengan store procedure spGrafikAkademik. Bila tidak
terdapat kesalahan, data akademik akan ditampung, dibangun menjadi
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 54
grafik serta dikonversi sehingga akhirnya siap di kirim ke aplikasi
client. Apabila terdapat kesalahan, maka pesan kesalahan akan
disampaikan ke pengguna.
b. Aplikasi Web Client
Pada aplikasi web client juga terdapat 2 buah fungsi utama dengan
sequence diagram seperti pada Gambar III.13 dan Gambar III.14 di
bawah ini.
Gambar III.13 Sequence Diagram Meminta layanan menampilkan data akademik
Pada gambar di atas proses dimulai setelah pengguna menginputkan data
NIM. NIM akan divalidasi, bila valid dilanjutkan dengan memanggil
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 55
fungsi web service getAkademik(), bila tidak valid maka ditampilkan
pesan kesalahan pada pengguna. Data akademik yang diperoleh dari web
service kemudian ditampung dan dibentuk dalam model tabel
menggunakan kelas Ext.Data.SimpleStore dan Ext.grid.GridPanel. Tabel
ditampilkan pada antarmuka pengguna.
Pengguna Web Service monakWS
2. getGrafikAkademik(NIM)
1. Inputan NIM
3b.pesanKesalahan()
3a. kirimDataGrafik()
4. konversiGrafik()
5.tampilGrafikAkademik()
Aplikasi Web Client
Sequence Diagram Meminta Data Akademik
Gambar III.14 Sequence Diagram meminta layanan menampilkan grafik akademik
Pada sequence diagram di atas proses dimulai saat diperoleh inputan
berupa NIM. Kemudian dijalankan fungsi web service
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 56
getGrafikAkademik(NIM) untuk mengambil data grafik. Data grafik
selanjutnya dikonversi dan diolah kembali sebelum ditampilkan di
antarmuka pengguna.
III.3.5. Collaboration Diagram
Gambar III.15 berikut ini adalah Collaboration Diagram yang
menggambarkan gabungan fungsi dan kelas dari sequence diagram.
Aplikasi Web Client
: Pengguna
1: login()
8: ambilNIM()
Halaman show_grafik.jsp
3: ambilDataLogin()
: Web Service monakWS
Database Akademik
4: ambilDataPengguna()
10: ambilDataAkademik()
5: cekDataPengguna()
6: validasi_login()
7: tampilPAkademik()
9: cekNIM()
11: createCombinedChart()
14: getGrafikAkademik()
14: showGrafik()2: cekDataInputan()
12: getByte()13: clone()
Gambar III.15 Colaboration Diagram
Penjelasan dari gambar di atas dapat dilihat melalui langkah-langkah
berikut :
1) pengguna melakukan login dengan mengisi form login dan
menjalankan proses login
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 57
2) aplikasi web client menjalankan fungsi web service cekDataInputan()
3) web service validasi pengguna memanggil fungsi ambilDataLogin()
untuk mekanisme validasi login
4) dalam fungsi tersebut terdapat fungsi ambilDataPengguna() untuk
dicocokkan dengan data login.
5) proses perbandingannya didalam fungsi cekDataPengguna()
6) Selanjutnya dijalankan fungsi validasi_login(), fungsi ini akan
mengatur halaman yang akan dibuka berdasarkan tipe penggunanya bila
valid, serta menampilkan pesan kesalahan yang sesuai bila tidak valid.
7) fungsi tampilPAkademik() dijalankan untuk mendapatkan layanan
tampilan perkembangan akademik mahasiswa
8) fungsi ambilNIM dijalankan untuk pengecekan apakah NIM yang
diinputkan valid atau tidak.
9) Pengecekan NIM akan dijalankan bersama dengan pengambilan data
akademik
10) fungsi ambilDataAkademik() akan dijalankan bila data NIM valid, bila
NIM tidak valid pengambil data dibatalkan.
11) di dalam web service dibentuk objek kelas AreaAkademik, dimulai dari
pengolahan data numerik, pembuatan objek kelas JFreeChart untuk
membangun grafik, konversi ke bytearray sebelum dikonversi lagi
menjadi objek kelas bawaan Java
12) berikutnya, dengan pemanggilan fungsi kirimDataGrafik() data gambar
grafik dikirim ke aplikasi client dalam bentuk biner berbasis 64.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 58
III.4. DESAIN BERORIENTASI OBJEK
Pada sub bagian ini akan dijelaskan mengenai langkah-langkah
yang perlu dilakukan oleh pihak-pihak yang terkait untuk melakukan suatu
aksi terhadap sistem, respon sistem terhadap pihak yang menggunakan
sistem tersebut, desain obyek yang terkait di dalam sistem, langkah-langkah
yang ditempuh pengguna sistem untuk dapat menjalankan sistem, dan
gambaran mengenai class-class yang akan dibuat pada sistem.
III.4.1. Desain Class Diagram
a. Desain Class Diagram untuk Client
Desain class diagram untk pengguna client dapat dilihat pada
Gambar III.16 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 59
addImage(): MediaTrackercreateImage(): Toolkitshow() : voidcreateGraphics(): Graphics2Dwrite(): ImageIo
grafik_005fakademik_jsp
jspinit() :voidjspService() : voidjspdestroy() : voidcekDataLogin() : booleantampilPAkademik() : StringubahPassword() : voidtampilGrafikAkademik() : voidtampilPetunjuk() : void
show_005fgrafik_jsp
GenericServlet
request()rsponse()session()application()out()config()
JSPservlet
java.awt.Graphics java.image.io
-image-bufferedImage
Writer
PrintWriter
InputStream
ServletInputSTream
-out
-xml
MediaTracker Toolkit
-dtbyte-image
Gambar III.16 Class Diagram untuk Aplikasi Client
Berikut adalah keterangan dari fungsi-fungsi yang ada pada class
show_005fgrafik_jsp :
1) fungsi cekDataLogin() digunakan untuk mengecek valid tidaknya
data login pengguna.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 60
2) fungsi tampilPAkademik() digunakan untuk menjalankan layanan
tampilan perkembangan akademik mahasiswa. Data acuannya adalah
NIM dan hasilnya akan ditampilkan dalam bentuk grafik.
3) fungsi ubahPassword() digunakan untuk mengganti password dari
pengguna.
4) fungsi jspinit() digunakan untuk inisialisasi servlet.
5) fungsi jspdestroy() digunakan untuk menghapus servlet.
Berikut adalah keterangan untuk dari fungsi-fungsi yang ada pada class
grafik_005fakademik_jsp :
1) fungsi createImage() digunakan untuk konversi data Grafik dari
byte [] ke Image.
2) fungsi addImage() digunakan untuk mengenali dan merekonstruksi
komponen penyusun gambar
3) fungsi show() digunakan untuk menampilkan gambar grafik
perkembangan akademik.
4) fungsi createGraphics() digunakan untuk mempersiapkan gambar
dengan ukuran yang ditetapkan untuk ditampilkan
5) fungsi write() digunakan untuk menampilkan gambar ke web
browser melalui outputstream.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 61
b. Desain Class Diagram untuk Server
Desain Class Diagram untuk server dapat dilihat pada
Gambar III.17 di bawah ini.
Gambar III.17 Class Diagram untuk Server
Kelas monakWS merupakan kelas yang menyediakan fungsi-fungsi
web service. Kelas ini adalah turunan dari kelas WebService di Java
sehingga mewarisi atribut serta fungsi-fungsi yang ada. Berikut adalah
keterangan dari fungsi-fungsi pada class monakWS :
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 62
1) get()
Fungsi ini berguna untuk mengembalikan data akademik mahasiswa
untuk membentuk grafik monitoring akademik.
Parameternya adalah NIM dari mahasiswa yang bersangkutan.
2) cek()
Fungsi ini berguna untuk mengecek kevalidan pengguna yang login.
Parameternya adalah no induk, password dan tipe pengguna.
3) getData()
Fungsi ini berguna untuk memperoleh data pengguna untuk
kepentingan administrator dalam pengaturan pengguna,
parameternya adalah no induk pengguna.
4) cek_noinduk()
Fungsi ini berguna untuk mengecek ada tidaknya no induk yang
dicari.
5) get_akt()
Fungsi ini berguna untuk memperoleh angkatan yang dibimbing
oleh seorang dosen pembimbing akademik. Parameternya adalah
NPP dari dosen.
6) ganti_pwd()
Fungsi ini berguna untuk mengganti password pengguna dengan
parameter no induk dan password baru dari pengguna. Nilai
baliknya adalah “sukses” atau “gagal”.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 63
7) ubahPengguna()
Fungsi ini berguna untuk perubahan data pengguna dan
mengembalikan data pengguna yang akan diubah. Parameternya
adalah no induk dan nama pengguna dan nilai baliknya adalah
“sukses” atau “gagal”.
8) tambahPengguna()
Fungsi ini berguna untuk menambah pengguna baru dimana
parameter nya adalah no induk, nama, tipe dan password dari
pengguna. Nilai baliknya adalah “sukses” atau “gagal”.
9) hapusPengguna()
Fungsi ini berguna untuk menghapus data pengguna berdasarkan
NIM, nilai balik yang diberikan adalah “sukses” atau “gagal”.
10) ubahAkademik()
Fungsi ini berguna dalam perubahan data akademik mahasiswa oleh
pihak sekretariat. Parameternya adalah NIM beserta data akademik
dari mahasiswa bersangkutan. Nilai baliknya adalah “sukses” atau
“gagal” tergantung pada lapisan database.
11) getAkademik()
Fungsi ini berguna untuk mengembalikan data akademik mahasiswa
untuk mengisi tabel data akademik
12) getGrafikAkademik()
Fungsi ini merupakan fungsi utama dari seluruh sistem ini yang akan
mengembalikan data gambar grafik berdasarkan NIM.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 64
Kelas areaAkademik memanfaatkan library dari kelas JFreeChart
untuk membentuk grafik. JFreeChart merupakan package khusus yang
menyediakan fungsi-fungsi pembentuk grafik. Berikut adalah
keterangan dari fungsi-fungsi yang ada pada class areaAkademik :
1) createCombinedChart()
Fungsi ini adalah fungsi utama untuk membentuk grafik kombinasi.
Kombinasi disini diartikan karena grafik yang terbentuk memiliki 2
sumbu y.
2) getBI()
Fungsi ini akan mengembalikan nilai bufferedImage dari grafik yang
terbentuk.
3) getJFC()
Fungsi ini akan mengembalilkan grafik yang merupakan hasil
konversi dari data akademik di database.
4) getByte()
Fungsi ini akan mengembalikan nilai byte dari bufferedImage yang
terbentuk untuk kemudian di clone sebelum dikirim kembali ke
server.
5) createDataSet1()
Fungsi ini digunakan untuk membentuk dataset yaitu data-data yang
akan digunakan dalam membangun grafik, khususnya area akademik
dan sumbu x.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 65
6) createDataSet2()
Fungsi ini digunakan untuk membentuk dataset yaitu data-data yang
akan digunakan dalam membangun grafik, khususnya sumbu y,
yaitu data akademik yang diambil dari database.
7) konek()
Fungsi ini digunakan untuk melakukan koneksi ke database dan
menjalankan query yang sesuai.
Berikut adalah keterangan dari fungsi-fungsi yang ada pada class
DataPengguna :
1) Fungsi getNama() digunakan untuk mengambil nilai nama dari tabel
pengguna.
2) Fungsi getID() digunakan untuk mengambil noid dari tabel
pengguna. Nomor id dapat berupa NIM atau NPP.
3) Fungsi getPassword() digunakan untuk mengambil nilai password
dari tabel pengguna.
4) Fungsi getTipe() digunakan untuk mengambil nilai tipe dari tabel
pengguna. Tipe dapat berupa : mahasiswa, dosen_pa, kaprodi dan
sekjur.
5) Fungsi select()[] digunakan untuk mengambil nilai data Pengguna.
6) Fungsi update() digunakan untuk perubahan nilai dari data
pengguna.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 66
7) Fungsi delete() digunakan untuk penghapusan pengguna.
8) Fungsi cariData() digunakan untuk mencari data pengguna. Fungsi
ini akan mengembalikan nilai true jika ketemu dan false jika tidak
ketemu.
9) Fungsi setNama() digunakan untuk memberi nilai pada atribut nama
di tabel pengguna.
10) Fungsi setID()digunakan untuk memberi nilai pada atribut noid di
tabel pengguna.
11) Fungsi setPassword() digunakan untuk memberi nilai pada atribut
password di tabel pengguna.
12) Fungsi setTipe() digunakan untuk memberi nilai pada atribut tipe di
tabel pengguna.
III.5. PERANCANGAN SISTEM
III.5.1. Perancangan User Interface
a. Client
1) Halaman Login Pengguna
Gambar III.18 di bawah ini merupakan halaman Login
bagi pengguna.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 67
Gambar III.18 Halaman Login Pengguna Sistem Monitoring Perkembangan
Akademik
Halaman ini merupakan halaman bagi pengguna untuk
melakukan login. Pengguna dapat mengisi NIM / NPP dan password
pada tempat yang disediakan serta memilih tipe pengguna apakah
mahasiswa, dosen atau jurusan.
2) Halaman Login Pengguna Administrator
Halaman login untuk administrator dapat dilihat pada
Gambar III.19 di bawah ini.
Sistem Monitoring Akademik
Password
Masuk
Login Administrator
Gambar III.19 Halaman Login Pengguna Administrator
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 68
Pada halaman ini Administrator dapat mengisi password
pada tempat yang disediakan.
3) Halaman Menu Pengguna Mahasiswa
Halaman utama pengguna Mahasiswa dapat dilihat pada
Gambar III.20 di bawah ini.
Sistem Monitoring Akademik
Selamat Datang di Menu Mahasiswa
Tampil Perkembangan Akademik Anda
Ubah Password
Keluar
mahasiswaA – 045314100
Gambar III.20 Halaman Menu Pengguna Mahasiswa
Pada rancangan ini terdapat 2 buah menu yaitu “Tampil
Perkembangan Akademik Anda” dan “Ubah Password”. Pengguna
dapat logout dengan meng-klik tombol “Keluar”.
4) Halaman Data Akademik Anda Pengguna Mahasiswa
Halaman Data Akademik Anda dapat dilihat pada Gambar
III.21 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 69
1 2 3 4 5 6 7 8 9 10
SEMESTER
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
Berprestasi Normal Jumlah SKS Lulus
JUMLAH SKS LULUS
KENDUL - 035314101
11
Kritis
4,00
IPK
( 18 )
( 38 )
( 54 )
( 72 )
( 85 )
( 100 )
( 115 )
( 130 )( 138 )
( 144 )
0,75
1,00
1,25
1,50
1,75
2,00
2,25
2,50
2,75
3,00
3,25
3,50
3,75
Perkembangan IPK
( 3, 59 )
( 2, 62 ) ( 2, 64 )
( 2, 91 )( 3, 05 )
( 3, 07 )
( 3, 34 )
( 3, 27 ) ( 3, 25 )
( 3, 72 )
SEMESTER SKS KUMULATIF IPK KUMULATIF KONDISI1
2
3
4
5
6
7
8
9
10
18
38
54
72
85
100
115
130
138
144
3,72
3,59
2,62
2,64
2,91
3,05
3,07
3,34
3,27
3,25
Berprestasi
Berprestasi
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Gambar III.21 Halaman Tampil Perkembangan Akademik - Pengguna
Mahasiswa
Pada gambar di atas ditampilkan 2 informasi akademik,
dalam bentuk tabel dan gambar grafik. Tabel berisi data jumlah sks
lulus, IPS dan IPK serta keterangan kondisi akademik dari
mahasiswa sesuai posisi pada grafik. Grafik memiliki 2 informasi,
pertama merupakan pencapaian jumlah sks lulus (garis biru) yang
disertai dengan blok-blok daerah dengan level tertentu yaitu “Kritis”
(merah), “Normal”(hijau) dan “Berpretasi”(kuning). Sedangkan
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 70
grafik kedua yaitu IPK (garis coklat) yang diperoleh dari tiap
semesternya. Legenda terdapat pada bagian bawah grafik.
Area “Kritis” memiliki 4 batasan utama. Status “Kritis”
akan disandang mahasiswa bila hasil pencapaian akademik jumlah
sks berada di bawah batasan berikut (Panduan Akademik 2007
Teknik Informatika FST USD Jogjakarta, 2007) :
a. Semester 1 jumlah sks lulus : 18 SKS. Batas ini merupakan
jumlah sks wajib untuk ditempuh mahasiswa pada semester
pertama.
b. Semester 4 jumlah sks lulus : 40 SKS. Batas ini ditentukan
berdasarkan syarat evaluasi pada semester 4.
c. Semester 7 jumlah sks lulus : 97 SKS. Batas ini ditentukan dari
syarat bahwa mahasiswa setidaknya sudah mengambil mata
kuliah Kerja Praktek pada semester 7.
d. Semester 10 jumlah sks lulus : 144 SKS. Batas ini ditentukan
karena di atas semester 10 mahasiswa akan di DO.
Area “Normal” memiliki 2 batasan yaitu batas atas dan
batas bawah. Batas bawah merupakan batasan pada area “Kritis”,
dimana status “Normal” akan disandang mahasiswa bila pencapaian
jumlah sks lulus berada di atas batas tersebut dan di bawah batas
atas. Batas atas terdiri dari 3 batasan utama sebagai berikut (Panduan
Akademik 2007 Teknik Informatika FST USD Jogjakarta, 2007):
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 71
a. Semester 1 jumlah sks lulus : 18 SKS. Batas ini merupakan
jumlah sks wajib untuk ditempuh mahasiswa pada semester
pertama.
b. Semester 6 jumlah sks lulus : 116 SKS. Batas ini ditentukan
berdasarkan syarat bahwa mahasiswa setidaknya sudah dapat
mengambil mata kuliah Pra Tugas Akhir pada semester 7 dengan
syarat 116 SKS. .
c. Semester 8 jumlah sks lulus : 144 SKS. Batas ini ditentukan
karena lama masa studi standar mahasiswa menurut buku
panduan adalah 8 semester.
Pada area “Berprestasi”, status “Berprestasi” akan
disandang bila mahasiswa bersangkutan mencapai jumlah sks lulus
di atas batas atas dari area “Normal”.
5) Halaman Ubah Password Pengguna Mahasiswa
Gambar III.22 dibawah ini merupakan halaman untuk
perubahan password pengguna.
Gambar III.22 Halaman Ubah Password Pengguna Mahasiswa
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 72
Gambar di atas merupakan halaman perubahan password bagi
pengguna mahasiswa dengan mengisi password baru sebanyak 2
kali. Selanjutnya pengguna dapat meng-klik tombol “Konfirmasi”.
6) Halaman Menu Pengguna Dosen Pembimbing Akademik
Halaman utama Dosen Pembimbing Akademik dapat dilihat
pada Gambar III.23 di bawah ini.
Gambar III.23 Halaman Menu Pengguna Dosen PA
Pada bagian kiri halaman terdapat Menu Anda dengan
submenu Navigasi dan Pengaturan. Pada bagian tengah terdapat tiga
tab menu yaitu Tampil Akademik per angkatan, per mahasiswa dan
menu untuk mengubah password. Pengguna dapat logout dengan
meng-klik tombol “Keluar”.
7) Halaman Perkembangan Akademik Mahasiswa Pengguna Dosen
Pembimbing Akademik
Halaman Perkembangan Akademik Mahasiswa per
angkatan dapat dilihat seperti pada Gambar III.24 dibawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 73
Sistem Monitoring Akademik
Menu Dosen – Data Mahasiswa Angkatan 2003
Kembali
NIM NAMA DATA AKADEMIK035314101 KENDUL TAMPIL
.....................
...........................................................
.................
.................
035314102 GUNDUL TAMPIL
Gambar III.24 Halaman Data Mahasiswa-Pengguna Dosen PA
Gambar di atas adalah halaman yang menampilkan data akademik
mahasiswa bimbingan sesuai angkatan dari dosen yang
bersangkutan. Pengguna dapat meng-klik tombol “Tampil” untuk
melihat perkembangan akademik per mahasiswa.
8) Halaman Ubah Password Pengguna Dosen Pembimbing Akademik
Halaman perubahan password untuk dosen Pembimbing
Akademik dapat dilihat pada Gambar III.25 berikut ini.
Gambar III.25 Halaman Ubah Password Pengguna Dosen PA
Pengguna menginputkan password baru sebanyak 2 kali kemudian
meng-klik tombol “Konfirmasi”.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 74
9) Halaman Menu Pengguna Kepala Program Studi
Halaman utama bagi pengguna Kepala Program Studi
(Kaprodi) dapat dilihat pada Gambar III.26 di bawah ini.
Sistem Monitoring AkademikSelamat Datang di Menu Kepala Program Studi
Tampil Perkembangan Akademikper Angkatan
Ubah Password
Keluar
Tampil Perkembangan Akademikper Mahasiswa
Review Peningkatan Akademik per Angkatan
Gambar III.26 Halaman Menu Pengguna Kepala Program Studi
Pada sisi kiri terdapat Menu Anda yang berisi sub menu Navigasi
dan Pengaturan. Pada bagian tengah terdapat 3 menu yaitu
perkembangan akademik perangkatan, per mahasiswa, review
peningkatan per angkatan dan ubah password.
10) Halaman Monitoring Akademik Per Angkatan Pengguna Kepala
Program Studi
Halaman Monitoring Akademik Per Angkatan bagi
pengguna Kaprodi menampilkan data akademik mahasiswa dari
seluruh angkatan. Informasi tersebut disajikan dalam bentuk tabel
yang merupakan hasil seleksi berdasarkan pilihan pengguna dari
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 75
combo box di atasnya. Tabel dibagi menurut angkatannya, untuk
lebih jelasnya dapat dilihat pada Gambar III.27 di bawah ini.
Sistem Monitoring AkademikMenu Kaprodi – Tampil Perkembangan Akademik
Kembali
NIM NAMA DATA AKADEMIK025314101 GUNDES TAMPIL
.....................
...........................................................
.................
.................
025314102 RAYMOND TAMPIL
Angkatan 2002200320042005
Data Mahasiswa Angkatan 2002
Gambar III.27 Halaman Monitoring Akademik Per Angkatan Pengguna
Kepala Program Studi
Gambar di atas merupakan halaman untuk menampilkan
data mahasiswa sesuai angkatan dalam bentuk tabel. Kaprodi dapat
memilih angkatan dan meng-klik pada tombol “Tampil” untuk
menampilkan perkembangan akademik dari tiap mahasiswa.
11) Halaman Perkembangan Akademik Per Mahasiswa Pengguna Kepala
Program Studi
Halaman Perkembangan Akademik Per Mahasiswa bagi
pengguna Kaprodi menampilkan informasi akademik mengenai
mahasiswa seperti pada Gambar III.28 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 76
1 2 3 4 5 6 7 8 9 10
SEMESTER
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
Berprestasi Normal Jumlah SKS Lulus
JUMLAH SKS LULUS
KENDUL - 035314101
11
Kritis
4,00
IPK
( 18 )
( 38 )
( 54 )
( 72 )
( 85 )
( 100 )
( 115 )
( 130 )( 138 )
( 144 )
0,75
1,00
1,25
1,50
1,75
2,00
2,25
2,50
2,75
3,00
3,25
3,50
3,75
Perkembangan IPK
( 3,59 )
( 2,62 ) ( 2,64 )
( 2,91 )( 3,05 )
( 3,07 )
( 3,34 )
( 3,27 ) ( 3,25 )
( 3,72 )
SEMESTER SKS KUMULATIF IPK KUMULATIF KONDISI1
2
3
4
5
6
7
8
9
10
18
38
54
72
85
100
115
130
138
144
3,72
3,59
2,62
2,64
2,91
3,05
3,07
3,34
3,27
3,25
Berprestasi
Berprestasi
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Gambar III.28 Halaman Perkembangan Akademik per Mahasiswa
Pengguna Kepala Program Studi
Pada bagian atas ditampilkan nama dan NIM. Di bawahnya
terdapat link untuk kembali ke halaman utama. Informasi
ditampilkan dalam bentuk tabel dan grafik. Keterangan grafik
dijelaskan pada legenda di bagian bawah.
12) Halaman Ubah Password Pengguna Kepala Program Studi
Halaman perubahan password bagi Kaprodi dapat dilihat
pada Gambar III.29 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 77
Gambar III.29 Halaman Ubah Password-Pengguna Kepala Program Studi
Pengguna menginputkan password baru sebanyak 2 kali kemudian
dan meng-klik tombol “Konfirmasi”.
13) Halaman Menu Pengguna Sekretariat Jurusan
Gambar III.30 di bawah ini adalah Halaman Utama
Sekretariat.
Gambar III.30 Halaman Menu Pengguna Sekretariat Jurusan
Sesuai gambar di atas, pada sisi kiri terdapat 2 Menu yaitu
“Tampil Perkembangan Akademik per Angkatan” dan “Tampil
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 78
Perkembangan Akademik per Mahasiswa”. Pengguna dapat logout
dari sistem ini dengan meng-klik tombol “Keluar”.
14) Halaman Monitoring Akademik Per Angkatan Pengguna Sekretariat
Halaman Monitoring Akademik bagi pengguna Sekretariat
dapat dilihat pada Gambar III.31 di bawah ini.
Gambar III.31 Halaman Monitoring Akademik Per Angkatan Sekretariat
Jurusan
Pada gambar di atas informasi disajikan dalam tabel
mahasiswa per angkatan yang merupakan hasil seleksi dari combo
box di bagian atas. Pengguna dapat menampilkan perkembangan
akademik dari tiap mahasiswa dengan meng-klik link “Tampil”.
15) Halaman Perubahan Data Akademik Mahasiswa Pengguna
Sekretariat Jurusan
Halaman perubahan data akademik mahasiswa bagi
pengguna Sekretariat dapat dilihat pada Gambar III.32 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 79
Gambar III.32 Halaman Perubahan Data Akademik Mahasiswa
Pengguna Sekretariat Jurusan
Gambar di atas merupakan halaman perubahan data
akademik mahasiswa bagi pengguna Sekretariat Jurusan. Pada
halaman ini, pengguna dapat mengubah data akademik mahasiswa
dengan menginputkan data baru dan meng-klik tombol “Simpan”.
16) Halaman Perkembangan Akademik Per Mahasiswa Pengguna
Sekretariat Jurusan
Halaman Perkembangan Akademik Per Mahasiswa bagi
pengguna Sekretariat dapat dilihat pada Gambar III.33 di bawah ini
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 80
1 2 3 4 5 6 7 8 9 10
SEMESTER
10
20
30
40
50
60
70
80
90
100
110
120
130
140
150
Berprestasi Normal Jumlah SKS Lulus
JUMLAH SKS LULUS
KENDUL - 035314101
11
Kritis
4,00
IPK
( 18 )
( 38 )
( 54 )
( 72 )
( 85 )
( 100 )
( 115 )
( 130 )( 138 )
( 144 )
0,75
1,00
1,25
1,50
1,75
2,00
2,25
2,50
2,75
3,00
3,25
3,50
3,75
Perkembangan IPK
( 3, 59 )
( 2, 62 ) ( 2, 64 )
( 2, 91 )( 3, 05 )
( 3, 07 )
( 3, 34 )
( 3, 27 ) ( 3, 25 )
( 3, 72 )
SEMESTER SKS KUMULATIF IPK KUMULATIF KONDISI1
2
3
4
5
6
7
8
9
10
18
38
54
72
85
100
115
130
138
144
3,72
3,59
2,62
2,64
2,91
3,05
3,07
3,34
3,27
3,25
Berprestasi
Berprestasi
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Normal
Gambar III.33 Halaman Perkembangan Akademik Per Mahasiswa
Pengguna Sekretariat Jurusan
Sebagai catatan, NIM yang inputkan adalah “045314010”,
hasil pencarian pada gambar di atas disajikan dalam bentuk tabel dan
grafik akademik.
17) Halaman Ubah Password Pengguna Sekretariat Jurusan
Halaman perubahan password bagi pengguna Sekretariat
dapat dilihat pada Gambar III.34 di bawah ini.
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB III Analisis dan Perancangan Sistem | 81
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar III.34 Halaman Ubah Password Pengguna Sekretariat Jurusan
Pada gambar tersebut pengguna menginputkan password
baru sebanyak 2 kali kemudian mengklik tombol “Konfirmasi”.
18) Halaman Menu Pengguna Administrator
Halaman Menu Pengguna Administrator dapat dilihat pada
Gambar III.35 di bawah ini.
Sistem Monitoring Akademik
Selamat Datang di Menu Administrator
Pengelolaan Pengguna
Ubah Password
Keluar
Gambar III.35 Halaman Menu Pengguna Administrator
Pada gambar di atas, di bagian kiri terdapat Menu Anda
dengan 2 sub menu yaitu Pengelolaan Pengguna dan Ubah Password.
Menu Pengelolaan Pengguna berfungsi mengatur pengguna dalam
sistem, seperti menambah, mengubah atau menghapus pengguna
(Mahasiswa, Dosen dan Sekretariat). Pengguna dapat logout dengan
meng-klik tombol “Keluar”.
BAB III Analisis dan Perancangan Sistem | 82
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
19)
n pengguna Administrator dapat dilihat
Halaman Pengelolaan Pengguna Administrator
Halaman pengelolaa
pada Gambar III.36 di bawah ini.
Gambar III.36 Halaman Pengelolaan Pengguna Administrator
Sesuai pada gambar di atas, administrator dapat menambah
pengguna gguna
dalam si
20)
engguna dapat dilihat pada
baru, mengubah data pengguna dan menghapus pen
stem, Dosen atau Sekretariat. Tombol Batal akan membawa
kembali ke menu utama administrator.
Halaman Tambah Pengguna Administrator
Halaman untuk menambah p
Gambar III.37 di bawah ini.
Gambar III.37 Halaman Tambah Pengguna - Administrator
BAB III Analisis dan Perancangan Sistem | 83
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Administrator dapat menginputkan data pengguna.
Selanjutnya Administrator dapat menyimpan proses penambahan
dengan meng-klik tombol “Konfirmasi”.
21) Halaman Ubah Data Pengguna Administrator
Halaman perubahan data pengguna oleh Administrator
dapat dilihat pada Gambar III.38 di bawah ini,
Gambar III.38 Halaman Ubah Data Pengguna - Administrator
Administrator memasukkan NIM / NPP yang datanya akan
diubah dan meng-klik tombol “Perubahan Pengguna”. Data yang
bersangkutan akan pada form di bawah, Adminstrator dapat mengisi
perubahan yang diinginkan dan selanjutnya dapat disimpan dengan
meng-klik tombol “Konfirmasi”.
22) Halaman Hapus Data Pengguna Administrator
bagi
Administrator dapat dilihat pada Gambar III.39 di bawah ini.
Halaman untuk menghapus data pengguna
84BAB III Analisis dan Perancangan Sistem |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar III.39 Halaman Hapus Pengguna - Administrator
Administrator dapat mencari dengan memasukkan tipe
pengguna serta NIM atau NPP yang akan dihapus datanya kemudian
mencari data tersebut. Bila data ditemukan, administrator dapat
meng-klik tombol hapus atau membatalkan proses penghapusan.
23) Halaman Ubah Password Pengguna Administrator
Halaman perubahan password bagi pengguna Administrator
dapat dilihat pada Gambar III.40 di bawah ini.
G
utkan password baru
sebanyak 2 kali kemudian mengklik tombol “Konfirmasi”.
ambar III.40 Halaman Ubah Password Pengguna Administrator
Pada gambar di atas pengguna menginp
BAB IV Implementasi Sistem | 85
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB IV
IMPLEMENTASI SISTEM
IV. IMPLEMENTASI SISTEM
IV.1. KARAKTERISTIK SISTEM
Sistem yang dibangun digunakan untuk menampilkan
perkembangan akademik mahasiswa dalam bentuk gambar grafik yang
dinamis denga ukan
simulasi pembe
lapisan web pada
sisi pengguna (client tier) akan meminta aplikasi server (logic tier) untuk
menampilkan grafik perkembangan akademik. Aplikasi server selanjutnya
akan memanggil fungsi-fungsi web service yang selanjutnya mengambil
data dari database (data tier) kemudian membangun dan menyediakan data
grafik. Aplikasi server (logic tier) kemudian akan mengirim data grafik
tersebut pada aplikasi client. Aplikasi client mengolah kembali data gambar
grafik tersebut sebelum ditampilkan pada browser.
Fasilitas pengguna di sisi client yang digunakan untuk melakukan
permintaan ini adalah aplikasi web yang dibangun menggunakan JavaTM
Server Pages. Aplikasi pada sisi server yang menangani permintaan client
adalah Sun JavaTM System Application Server. Dan untuk aplikasi web
service-nya menggunakan JavaTM API for XML Web Service.
Selain itu, terdapat fasilitas administrator yang berfungsi untuk
melakukan manajemen pengguna menyangkut penambahan, perubahan data,
n menerapkan teknologi three-tier. Sistem akan melak
ntukan gambar grafik yang dinamis dengan web service pada
Logika Bisnis (logic tier). Dalam hal ini aplikasi berbasis
BAB IV Implementasi Sistem | 86
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
maupun penghapusan data pengguna. Fasilitas administrator ini dibangun
dengan menggunaka
aplikasi server dan aplikasi client dapat
ah ini :
n JavaTM Server Pages.
Gambar besar sistem ini,
dilihat pada Gambar IV.1 di baw
(i) (ii)
Gambar IV.1 Aplikasi Server (i), Aplikasi Client(ii)
BAB IV Implementasi Sistem | 87
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
IV.2.
dibutuhkan beberapa sistem
penunjan
Berikut ini kebutuhan perangkat keras yang digunakan untuk
melakukan pengujian aplikasi berbasis web pada sisi
client(monakWSJSPClient) dan server (monakWSApplication):
1) prosesor AMD TurionTM 64 Mobile Technology MK 36, 2 GHz, 512
KB L2 cache
2) memori RAM berkapasitas1 GB
3) harddisk 80 GB
4) kartu grafis ATI Radeon Xpress 1100
Kebutuhan perangkat lunak yang dipergunakan dalam pengujian adalah :
1) Sistem Operasi Windows XP SP 2.
2) Mozilla Firefox 2.0, Internet Explorer 7, Opera 9.2, resolusi minimal
(1024 x 768) pixel, dengan javascript dan JavaTM diaktifkan, serta
gambar ditampilkan.
b. Aplikasi Server
Berikut ini adalah kebutuhan perangkat lunak yang diperlukan
oleh aplikasi server untuk dapat melakukan pengujian aplikasi
(monakW
1) Sun Java System Application Server Platform Edition 9.0,
merupakan aplikasi server yang kerap digunakan di kalangan
KEBUTUHAN SISTEM
Pada implementasi sistem ini
g, antara lain :
a. Aplikasi Web Client
SApplication) :
BAB IV Implementasi Sistem | 88
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
pengembang aplikasi web berbasis JavaTM. Tampilan pada browser
dari web server dapat dilihat pada Gambar IV.2 di bawah ini.
Gambar IV.2 Sun JavaTM System Application Server
2) Java Development 1.6.0, merupakan perkakas untuk
pengembangan aplikasi berbasis JavaTM.
3) Java API for XML Web Service (JAX – WS), JSR 224,
merupakan bagian penting dalam pengembangan aplikasi enterprise
untuk memberikan layanan bagi aplikasi berbasis web terutama untuk
pembangunan xml web service.
4) MySQL 5.0.18, adalah aplikasi database server versi rilis yang sering
digunakan khususnya bagi aplikasi berbasis web karena bersifat tidak
berbayar. Konsol dari server dapat dilihat pada Gambar IV.3 di
bawah ini.
TM
TM
BAB IV Implementasi Sistem | 89
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar IV.3 MySQL 5.0.18
IV.3. APLIKASI WEB CLIENT
asi web client merupakan bagian antarmuka bagi pengguna
sistem ini yaitu mahasiswa, dosen, iat dan kaprodi. Aplikasi ini
me presentasi dari sistem.
IV.3.1.
Pengguna Mahasiswa, alur halaman
halaman ganti_pwd.jsp. Tabel perkembangan akademik
merupakan hasil dari invok_data.jsp dan Grafik perkembangan
akademik berasal dari halaman get_images.jsp serta
grafik_akademik.jsp. Pengguna yang keluar selanjutnya menjalankan
Aplik
sekretar
nangani layer
Hirarki Model
a. Hirarki Model untuk Pengguna Mahasiswa
Pada Hirarki Model bagi
yang dijalankan, baik ditampilkan secara visual atau tidak, pada browser
pengguna Mahasiswa dimulai dari login.jsp, validasi_login.jsp dan
masuk ke menu_mhs.jsp. Pada halaman ini perubahan password akan
menuju pada
BAB IV Implementasi Sistem | 90
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
halaman logout.jsp dan akan kembali ke halaman login.html. Model
dalam penjelasan tersebut dapat dilihat pada Gambar IV.4 di bawah ini.
login.html validasi_login.jsp validasi.jsp
pesan kesalahan
sukses
gagal
menu_mhs.jsp invok_data.jsp
get_images.jsp grafik_akademik.jsp
Tabel perkembangan
akademik
ganti_pwd.jsp
Pesan sukses atau gagal
Grafik perkembangan
akademiklogout.jsp
Gambar IV.4 Hirarki Model untuk Pengguna Mahasiswa
b. Hirarki Model untuk Pengguna Dosen Pembimbing Akademik
Gambar IV.5 di bawah ini merupakan Hirarki Model untuk
Pengguna Dosen Pembimbing Akademik.
Gambar IV.5 Hirarki Model untuk Pengguna Dosen Pembimbing Akademik
BAB IV Implementasi Sistem | 91
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Seperti pada gambar di atas, alur halaman yang dijalankan, baik
ditampilkan secara visual atau tidak, pada browser pengguna Dosen
Pembimbing Akademik dimulai dari login.jsp, validasi_login.jsp dan
masuk ke halaman_dosen.jsp. Pada halaman ini perubahan password
akan menuju pada halaman ganti_pwd.jsp. Tabel Perkembangan
Akademik mahasiswa ditampilkan dengan menjalankan invok_data.jsp
untuk pembentukan tabel. Grafik Perkembangan Akademik ditampilkan
dengan alur sebagai berikut : data NIM yang diinputkan diolah oleh
halaman valid_grafik.jsp, bila gagal ditampilkan pesan kesalahan, bila
sukses ak emanggil
emik.jsp.
Penggun i-
c. Hirarki Model untuk Pengguna Ketua Program Studi
Pada Hirarki Model untuk Pengguna Ketua Program Studi, alur
halaman yang dijalankan, baik ditampilkan secara visual atau tidak, pada
browser pengguna Dosen Pembimbing Akademik dimulai dari login.jsp,
validasi_login.jsp dan masuk ke halaman_dosen.jsp. Pada halaman ini
perubahan password akan menuju pada halaman ganti_pwd.jsp.
Tabel Perkembangan Akademik mahasiswa ditampilkan dengan
menjalankan data_akademik.jsp untuk pembentukan tabel. Grafik
Per d ta
NIM yang diinputkan diolah oleh halaman valid_grafik.jsp, bila gagal
an menjalankan halaman show_grafik.jsp dan m
komponen grafik yaitu get_images.jsp dan grafik_akad
a yang logout menjalankan halaman logout.jsp dan akan d
redirect ke halaman login.html.
kembangan Akademik ditampilkan dengan alur sebagai berikut : a
BAB IV Implementasi Sistem | 92
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
ditampilkan pesan kesalahan, bila sukses akan menjalankan halaman
show_grafik.jsp dan memanggil komponen grafik yaitu get_images.jsp
dan grafik_akademik.jsp. Pengguna yang logout menjalankan halaman
logout.jsp dan akan di-redirect ke halaman login.html. Model pada
penjelasan tersebut dapat dilihat pada Gambar IV.6 di bawah ini.
login.html validasi_ login.jsp validasi.jsp
pesan kesalahan
sukses
gagal
halaman_ kaprodi.jsp
logout.jsp
data_ akademik.jsp
Tabel perkembangan
akademik
valid_ grafik.jsp show_ grafiksukses
.jsp
pesan kesalahan
gagal
get_ images.jsp
Grafik perkembangan
akademik
grafik_ akademik.jsp
ganti_pwd.jsp
Pesan sukses atau gagal
Ga
d.
sp dan
masuk k
mbar IV.6 Hirarki Model untuk Pengguna Ketua Program Studi
Hirarki Model untuk Pengguna Sekretariat
Pada Hirarki Model untuk Pengguna Sekretariat, alur halaman
yang dijalankan, baik ditampilkan secara visual atau tidak, pada browser
pengguna Sekretariat dimulai dari login.jsp, validasi_login.j
e halaman_sekre.jsp. Pada halaman ini perubahan password
akan menuju pada halaman ganti_pwd.jsp. Tabel Perkembangan
Akademik mahasiswa ditampilkan dengan menjalankan
data_akademik.jsp untuk pembentukan tabel. Grafik Perkembangan
BAB IV Implementasi Sistem | 93
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Akademik ditampilkan dengan alur sebagai berikut : data NIM yang
diinputkan diolah oleh halaman valid_grafik.jsp, bila gagal ditampilkan
pesan kesalahan, sebaliknya bila sukses akan menjalankan halaman
show_grafik.jsp dan memanggil komponen grafik yaitu get_images.jsp
dan grafik_akademik.jsp.
Pada perubahan data akademik, inputan pengguna akan diolah
oleh halaman ubah_akademik.jsp. Selanjutnya akan disampaikan pesan
apakah proses berhasil atau gagal. Pengguna yang logout menjalankan
halaman logout.jsp dan akan di-redirect ke halaman login.html. Model
pada penjelasan tersebut dapat dilihat pada Gambar IV.7 di bawah ini.
login.html validasi_login.jsp validasi.jsp
pesan kesalahan
sukses
gagal
halaman_kaprodi.jsp
logout.jsp
data_akademik.jsp
Tabel perkembangan
akademik
valid_grafik.jsp show_grafik.jspsukses
pesan kesalahan
gagal
get_images.jsp
Grafik perkembangan
akademik
grafik_akademik.jsp
ganti_pwd.jsp
Pesan sukses atau gagal
ubah_akademik.jsp
Pesan sukses atau gagal
Gambar IV.7 Hirarki Model untuk Pengguna Sekretariat
Hirarki Model untuk Pengguna Administrator
Hirarki Model untuk Pengguna Administrator dapat dilihat pada
Gambar IV.8 di bawah ini.
e.
BAB IV Implementasi Sistem | 94
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
login_admin.html validasi_login.jsp validasi.jsp
pesan kesalahan
sukses
gagal
halaman_admin.jsp
logout.jsp
invok_data.jsp
Tabel Data Pengguna
invok_user.jsp ubah_usukses
ser.jsp
pesan kesalahan
gagal
ganti_pwd.jsp
Pesan sukses atau gagal
hapus_user.jsp
Pesan sukses atau gagal
Pesan sukses atau gagal
hapus_user.jsp Pesan sukses gagalatau
Berdasarkan gambar di atas, alur halaman yang dijalankan
sebagai pengguna Administrator, baik ditampilkan secara visual atau
tidak, adalah sebagai berikut. Pengguna melakukan proses login pada
halaman login_admin.html, data login tersebut diproses pada halaman
validasi_login, bila gagal akan ditampilkan pesan kesalahan dan halaman
di-redirect ke login_admin.html. Apabila proses login berhasil, alur
selanjutnya adalah halaman validasi.jsp yang meneruskan ke
halaman_admin.jsp.
Pada halaman utama administrator, Tabel Data Pengguna
diperoleh dari file i ta pengguna diolaj oleh
ana data pengguna dapat
diubah d
gan menampilkan pesan sukses atau gagal.
Gambar IV.8 Hirarki Model untuk Pengguna Adminstrator
nvok_data.jsp. Perubahan da
halaman invok_user.jsp dan ubah_user.jsp dim
an disimpan. Proses penambahan pengguna akan diproses oleh
halaman tambah_user.jsp den
BAB IV Implementasi Sistem | 95
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Proses penghapusan pengguna akan diproses oleh halaman
hapus_user.jsp dengan menampilkan pesan sukses atau gagal. Pengguna
yang logout menjalankan halaman logout.jsp dan akan di-redirect ke
halaman login.html.
IV.3.2. Implementasi Antarmuka Pengguna
a. Halaman Login Pengguna dan Administrator
Halaman login pengguna merupakan halaman pertama yang di
akses oleh browser klien dan berperan sebagai fungsi otentifikasi
pengguna.
Gambar IV.9 Halaman Login Pengguna (login.html)
Gambar IV.10 Halaman Login Administrator (login_admin.html)
BAB IV Implementasi Sistem | 96
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Pada saat dipanggil beberapa fungsi yang dijalankan adalah :
1) Ext.onReady(function())
Fungsi ini merupakan fungsi inisialisasi awal pada ext-js yang
menandakan library ext siap digunakan oleh halaman web.
2) Ext.form.Field.prototype.msgTarget
Fungsi ini merupakan fungsi untuk mengatur posisi dimana
meletakkan tampilan pesan kesalahan pada form.
3) Ext.Tipe
Tipe ini merupakan tipe buatan untuk menampung data tipe pengguna
yang dapat melakukan login yaitu : mahasiswa, dosen, sekretariat dan
kaprodi. Dengan pendeklarasian ini, maka combobox menu pada form
akan secara otomatis menampilkan tipe pengguna pada saat diketik 1
huruf pertama.
4) Ext.FormPanel()
Panel untuk menampung komponen-komponen yang ada pada form
login. Komponen tersebut antara lain label, textfield, passwordfield,
combobox, dan button.
Pada saat pengguna telah m asi untuk
melakukan login (NIM / NPP, password dan tipe login) serta mengklik
tombol “Login” maka proses selanjutnya serta fungsi yang dijalankan
adalah sebagai berikut :
emasukkan inform
BAB IV Implementasi Sistem | 97
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
1) handl
ketika begitu tombol “Login” diklik. Data
nilai balik
bari menunggu akan ditampilkan
2)
i dijalankan bila nilai balik yang diperoleh adalah pesan
3)
ankan bila nilai balik yang diperoleh adalah pesan
akan menampilkan kotak pesan berisi alasan
b. Ha
Fungsi ini merupakan fungsi untuk membangun tampilan halaman
web dan menampung komponen-komponen lain di dalamnya. Layout
er:function()
Fungsi ini dijalankan se
komponen form yang telah diisi (NIM / NPP, password dan tipe login)
dikirimkan ke url validasi. Dari url tersebut akan diperoleh
berupa pesan sukses atau gagal. Sem
kotak pesan pengiriman data.
success:function()
Fungsi in
sukses. Halaman akan menampilkan kotak pesan tanda validasi
berhasil dan mensimulasikan proses membuka halaman sesuai tipe
login. Halaman akan diredirect ke halaman berikutnya.
failure:function(form, action)
Fungsi ini dijal
gagal. Halaman
kegagalan login. Selanjutnya form akan direset dan pengguna dapat
melakukan login ulang.
laman Utama Pengguna
Halaman ini merupakan halaman pertama yang ditampilkan
pada saat pengguna login. Pada saat ditampilkan pada browser klien,
fungsi-fungsi yang dijalankan antara lain :
1) Ext.Viewport()
BAB IV Implementasi Sistem | 98
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
yang digunakan adalah border yang menunjukkan adanya pengaturan
2)
ntuk mengubah password pengguna.
c. Ha
an tab menu dari halaman utama
ma
uta
ak
me ngsi sebagai berikut :
emik
tata letak komponen sesuia posisi yang ditentukan : north, south, west
atau east.
Ext.FormPanel()
Fungsi ini dipanggil untuk mengisi menu “Menu Anda” pada kiri
layar. Fungsi form ini adalah u
3) Ext.TabPanel()
Fungsi ini merupakan fungsi untuk membuat tampilan menu dalam
bentuk tab. Seperti dilihat pada halaman ini terdapat 2 tab menu yaitu
“Halaman Utama” dan “Data Akademik Anda”.
laman Data Akademik Anda (menu_mhs.jsp)
Halaman ini merupak
hasiswa dan diinisialisasi pada saat yang bersamaan dengan halaman
ma. Pada halaman ini terdapat 2 hal utama yaitu tabel perkembangan
ademik serta grafik monitoring akademik. Dua komponen ini dibentuk
lalui proses dan fungsi-fu
Tabel perkembangan akad
Gambar IV.11 Tabel data perkembangan akademik mahasiswa
BAB IV Implementasi Sistem | 99
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
1)
mpung data akademik tersebut dengan pemanggilan fungsi
asarkan nim dari mahasiswa bersangkutan seperti
Tabel pada gambar di atas dibentuk berdasarkan data akademik yang
diperoleh dari database. Langkah awal adalah pembentukan variabel
untuk mena
web service berd
pada Listing IV.1 di bawah ini.
try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); // fungsi untuk mengambil data akademik mahasiwa java.lang.String result = port.get(nim); out.print(result); } catch (Exception ex) { // eksepsi yang ditangkap } %>
Listing IV.1 fungsi wsMonak.get()
2) deklarasi store untuk menyimpan variabel data yang telah dibuat
sebelumnya agar bisa dibaca dalam format javascript yaitu dengan
fungsi Ext.data.SimpleStore().
3) langkah terakhir adalah pembuatan grid / tabel (Ext.grid.GridPanel)
dan menggunakan data store yang telah dibuat sebelum dipasang
sebagai komponen pada tab menu (Ext.TabPanel()).
Grafik monitoring akademik, yang ditampilkan merupakan bagian
utama dari seluruh sistem. Grafik ini disusun dalam bentuk gambar yang
dinamis dimana data akademik yang ada diperoleh dari database. Grafik
monitoring akademik dapat dilihat pada Gambar IV.12 di bawah ini.
BAB IV Implementasi Sistem | 100
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar IV.12 Grafik Monitoring Perkembangan Akademik
1) langkah awal pembentukannya adalah deklarasi variabel session
ut
akan mengembalikan nilai dalam format JSON yang menunjuk pada
link gambar grafik.
“nim_graf” sesuai dengan nim dari mahasiswa bersangkutan.
Fungsinya agar variabel tersebut nantinya dapat dibaca oleh sistem
yang akan mengambil data grafik dari server.
2) pembentukan variabel storeGrafik (Ext.data.JsonStore) yang
merupakan data berformat JSON dengan pengaturan : url menuju ke
arah pengambilan data gambar (get-images.jsp), root dari data adalah
“images”, serta field data adalah “name” dan “url”. Pada file terseb
BAB IV Implementasi Sistem | 101
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
3) fungsi load grafik dipanggil dan halaman mengkoneksikan dengan url
pengambilan gambar (grafik_akademik.jsp).
4) pada file tersebut inisialisasi awal gambar grafik dilakukan dengan
pemanggilan fungsi web service, parameternya adalah atribut session
“nim_graf”. Nilai balik dari fungsi ini adalah objek.
5) objek tersebut selanjutnya dikonversi dari byte menjadi image dengan
fungsi seperti pada Listing IV.2 di bawah ini :
Toolkit.getDefaultToolkit().createImage(dataByte);
Listing IV.2 Kode program konversi byte menjadi image
Fungsi tersebut akan mengembalikan nilai java.awt.Image.
6) Image yang diperoleh dari fungsi selanjutnya di-track dan di-render
ulang dengan kelas MediaTracker untuk selanjutnya dimuat ke objek
buffered
MediaTracker mediaTracker = new MediaTracker(new
Image seperti pada Listing IV.3 berikut.
Container()); // menambah data gambar dan mulai melakukan pemuatan gambar serta proses render mediaTracker.addImage(image, 0); mediaTracker.waitForID(0); // untuk mengecek kesalahan pada titik ini : System.out.println(mediaTracker.isErrorAny()); // menentukan ukuran gambar asli, sesuai ukuran dari server int imageWidth = 640; int imageHeight = 480; // menggambar dan menentukan ukuran image yang telah dimuat dan akan digambar ke objek image BufferedImage gambarGrafik = new BufferedImage(640, 480, BufferedImage.TYPE_INT_RGB); Graphics2D graphics2D = gambarGrafik.createGraphics();
BAB IV Implementasi Sistem | 102
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
graphics2D.setRenderingHint(RenderingHints.KEY_I NTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR); graphics2D.drawImage(image, 0, 0, 640, 480, null);
Listing IV.3 kode program penggunan MediaTracker
7) Selanjutnya dilakukan pengaturan konten MIME halaman web dengan
fungsi setContentType(“image/png”). Format PNG dipilih karena
antu browser dalam
me
8) Langkah ber dengan
menye an
Pa
me
ak se
pe ebut dapat
dil ar IV.13 di bawah ini.
kelebihannya dalam mempertahankan komponen kualitas gambar.
Fungsi pengaturan ini adalah untuk memb
nampilkan halaman ini.
ikutnya adalah deklarasi fungsi Ext.DataView()
rtakan pemakaian komponen storeGrafik. Fungsi ak
melakukan pemuatan gambar grafik yang telah terbentuk dan
menampilkannya pada browser klien.
d. Halaman Perkembangan Akademik Mahasiswa
da halaman perkembangan akademik mahasiswa yang merupakan
nu tab pada halaman utama, terdapat 3 buah tabel perkembangan
ad m luruh mahasiswa yang menjadi bimbingan dari dosen
ing ademik yang bersangkutan. Halaman ters
e ik
mbimb ak
ihat pada Gamb
BAB IV Implementasi Sistem | 103
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar IV.13 Halaman Perkembangan Akademik Mahasiswa
BAB IV Implementasi Sistem | 104
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Tabel ini mencakup SKS kumulatif, pencapaian IPS dan IPK
mahasiswa. Pembentukkan tabel-tabel tersebut dijelaskan melalui
langkah-langkah berikut :
1) pada saat browser klien memuat halaman dosen, atribut
session_noinduk dipanggil untuk diperoleh nilainya, yaitu NPP dari
dosen bersangkutan. NPP ini akan digunakan sebagai acuan untuk
memperoleh data mengenai mahasiswa angkatan yang dibimbing serta
data akademik mahasiswa.
2) angkatan yang dibimbing oleh dosen bersangkutan dapat diperoleh
dari fungsi web service seperti pada Listing IV.4 berikut :
// mengambil nilai angkatan yang diampu int akt = 0; String npp = (String)session.getAttribute("session_noinduk"); try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); akt = port.getAkt(npp); } catch (Exception ex) { // menangkap eksepsi dari web service Eksepsi = ex; }
Listing IV.4 fungsi monakWS.getAkt()
Pada kode program diatas melalui nilai balik tersebut dapat diketahui
apakah dosen yang bersangkutan pembimbing akademik atau tidak.
3) Selanjutnya adalah pembentukan variabel penampung data akademik
mahasiswa yaitu jum_sks, ips dan ipk. Data akademik mahasiswa
tersebut diperoleh melalui fungsi web service seperti pada Listing
IV.5 berik
ut :
BAB IV Implementasi Sistem | 105
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); java.lang.String noInduk = angk + n; java.lang.String tipeData = "jumsks"; //”ipk” atau “ips” java.lang.String result = port.getAkademik(noInduk, tipeData); out.print(result); } catch (Exception ex) { // menangkap eksepsi Eksepsi = “” + ex; }
Listing IV.5 fungsi monakWS.getAkademik()
4) Variabel-variabel penampung data tersebut kemudian digunakan dan
dimuat oleh 3 objek dari Ext.data.SimpleStore()
6) an menyertakannya
nen dari
e. Ha
n textfield berlabel
“N ton berlabel “Tampil”. Fungsinya adalah untuk
menampilkan grafi mahasiswa dengan
NIM yang diinputkan. Halaman ini dapat dilihat pada Gambar IV.14 di
bawah ini.
5) Langkah selanjutnya adalah pembuatan 3 grid / tabel dengan memuat
objek store tersebut sebagai komponen.
Grid tersebut ditampilkan pada browser klien deng
sebagai item dalam objek FormPanel yang merupakan kompo
viewport.
laman monitoring akademik
Halaman ini berisi sebuah formPanel denga
IM“ dan sebuah but
k perkembangan akademik dari
Gambar IV.14 Halaman Monitoring Akademik
BAB IV Implementasi Sistem | 106
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Pada gambar di atas, bila data inputan telah dimasukkan dan
pe aka fung si serta prose
ya
1)
balik dapat
rupa pesan sukses atau pesan gagal. Pada halaman validasi tersebut
klien halaman akan
emik dan grafik monitoring
ahasiswa sehingga tidak perlu dijelaskan lagi.
at link untuk kembali ke halaman
utama
f. T
enampilkan grafik monitoring akademik dari
mahasiswa dengan inputan NIM. Halaman tersebut dapat dilihat pada
Gambar IV.15 di bawah ini :
ngguna mengklik tombol “Tampi si-fung s l” m
ng dijalankan adalah sebagai berikut :
data inputan yaitu NIM akan dikirimkan ke URL yang telah ditentukan
(valid_grafik.jsp) untuk mengecek kevalidannya. Nilai
be
juga akan diset atribut session “nim_graf” bila NIM dinyatakan valid.
2) bila pesan sukses diterima maka pada browser
diredirect ke halaman “grafik_akademik.jsp”. Di halaman ini, akan
ditampilkan tabel perkembangan akad
akademik beserta nama dan nim dari mahasiswa bersangkutan. Proses
pembentukan tabel serta grafik juga serupa dengan yang ada pada
halaman m
3) pada halaman tersebut juga terdap
dosen.
abel Monitoring Perkembangan Akademik per Angkatan
Pada halaman kaprodi, terdapat tab menu “Monitoring
Akademik” yang berisi tabel perkembangan akademik dari tiap angkatan
serta formPanel untuk m
BAB IV Implementasi Sistem | 107
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Gambar IV.15 Halaman Monitoring Akademik Per Angkatan
Langkah-langkah untuk menampilkan grafik monitoring
akademik kurang lebih sama dengan yang ada pada halaman dosen.
nkan adalah sebagai berikut :
wa dalam tiap
angka
Untuk menampilkan tabel perkembangan dari tiap angkatan, fungsi-
fungsi serta proses yang dijala
1) membuat variabel penampung data dari tiap mahasis
tan dan memanggil fungsi web service seperti pada Listing IV.6
berikut :
try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); java.lang.String noInduk = "0" + i + n; java.lang.String tipeData = "jumsks"; // “ipk” atau “ips” // fungsi untuk mengambil data akademik mahasiswa java.lang.String result = port.getAkademik(noInduk, tipeData); out.print(result);
BAB IV Implementasi Sistem | 108
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
} catch (Exception ex) { // penanganan eksepsi } }
Listing IV.6 fungsi monakWS.getAkademik()
2) setelah data-data tersebut ditampung dalam variabel-variabel,
selanjutnya deklarasi store sebagai objek dari Ext.data.SimpleStore()
untuk memuat variabel tersebut.
3) Kemudian dideklarasi grid / tabel dengan menyertakan store yang
dibuat sebelumnya sebagai komponen.
4) Dengan menyertakan grid-grid tersebut dalam tab panel yang sesuai
maka tabel-tabel perkembangan akademik mahasiswa dapat
ditampilkan pada browser klien.
g. Halama
ada Gambar
n Perubahan Data Akademik Mahasiswa
Halaman Sekretariat memiliki fungsi tambahan yaitu untuk
mengubah data akademik mahasiswa seperti jumlah sks lulus, ipk atau
ips dari semester tertentu. Halaman tersebut dapat dilihat p
IV.16 di bawah ini.
Gambar IV.16 Halaman Peruba ademik Maha
Fungsi tambahan ini memiliki langkah-lahan Data Ak siswa
ngkah sebagai berikut :
BAB IV Implementasi Sistem | 109
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
1) n berupa NIM, semester,
lus, ipk dan ips kemudian mengklik tombol “Simpan”
2) maka nilai inputan form akan dibawa ke URL yang bersangkutan
(ubah_akademik.jsp) untuk diproses
3) pada halaman tersebut dijalankan fungsi web service untuk
menyimpan perubahan tersebut seperti pada Listing IV.7 berikut :
String nimnya = request.getParameter("nim_graf");
petugas sekretariat memasukkan inputa
jumlah sks lu
int semester = Integer.parseInt(request.getParameter("smt")); int jumSksLulus = Integer.parseInt(request.getParameter("sks")); double ipsnya = Double.parseDouble(request.getParameter("ips")); double ipknya = Double.parseDouble(request.getParameter("ipk")); String result = ""; try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); // fungsi mengubah data-data akademik mahasiswa result = port.ubahAkademik(nimnya, semester, jumSksLulus, ipsnya, ipknya); } catch (Exception ex) { eksepsi = “” + ex; }
Listing IV.7 Kode program dari fungsi perubahan data akademik mahasiswa
Inputan ditangkap dengan getParameter() selanjutnya dikirim sebagai
parameter dengan pemanggilan fungsi ubahAkademik().
4) selanjutnya akan menunggu nilai balik yang mengisi variabel “result”,
bila sukses maka pada browser klien akan menampilkan pesan sukses
namun bila gagal akan ditampilkan pesan kesalahan.
BAB IV Implementasi Sistem | 110
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
h. Halaman Pengaturan Pengguna
Halaman pengaturan pengguna terdiri dari 2 bagian yaitu
ahasiswa, dosen dan
formPanel untuk pengaturan pengguna di bagian atas serta tabel
pengguna yang aktif di bagian bawah, terdiri dari m
petugas sekretariat. Halaman tersebut dapat dilihat pada Gambar IV.17
di bawah ini.
Gambar IV.17 Halaman Me gaturan Pengguna nu Pen
ahnya sebagai
Menu pengaturan pengguna terdiri dari 3 bagian, yaitu
menambah pengguna, merubah data serta menghapus pengguna. Proses
untuk menambah pengguna memiliki langkah-langk
berikut :
1) administrator dapat mengisi data inputan dengan lengkap dan
mengklik pada tombol “Tambah Pengguna”.
BAB IV Implementasi Sistem | 111
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
2) Maka data akan dikirim ke url validasi (tambah_user.jsp) sebelum
disim
Induk = request.getParameter("nimnip");
pan ke database. Pada halaman ini data inputan akan ditangkap
dengan method getParameter().
3) Selanjutnya method tersebut akan dikirim sebagai parameter melalui
pemanggilan fungsi web service seperti pada Listing IV.8 berikut :
String no String namanya = request.getParameter("nama"); String pas = request.getParameter("pwd"); String result = ""; try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); //fungsi untuk menambah pengguna baru result = port.tambahPengguna(noInduk, namanya, pas); } catch (Exception ex) { // penanganan eksepsi }
Listing IV.8 Fungsi untuk menambah pengguna
Berdasarkan fungsi diatas, data inputan form ditangkap dan dijadikan
parameter pada fungsi tambahPengguna().
Bagian kedua yaitu fungsi untuk merubah data pengguna.
dimana langkah-langkahnya adalah sebagai berikut :
1) Admin
2
.
4) Fungsi web service nya adalah seperti pada Listing IV.9 berikut :
String noInduk = request.getParameter("nimnip");
istrator dapat memasukkan no induk pengguna(NIM atau NPP)
dan mengklik pada tombol “Perubahan Pengguna”.
) Selanjutnya data pengguna berupa nama dan tipe ditampilkan pada
textfield
3) Administrator kemudian dapat merubah data pengguna dan mengklik
pada tombol “Simpan”.
String namanya = request.getParameter("nama");
BAB IV Implementasi Sistem | 112
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
String result = ""; try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); // fungsi untuk mengubah data pengguna result = port.ubahPengguna(noInduk, namanya); } catch (Exception ex) { // penanganan eksepsi }
Listing IV.9 Fungsi untuk merubah data pengguna
S kirim
se
den
1) a
ngklik tombol “Hapus Pengguna”. Sebelumnya akan
2) da halaman tersebut data
no_i
ila sebaliknya akan
V.10 berikut :
eperti pada fungsi di atas data perubahan pengguna akan di
bagai parameter melalui fungsi web service ubahPengguna().
Bagian terakhir adalah menu untuk menghapus pengguna
gan langkah-langkahnya adalah sebagai berikut :
Pada menu ini Administrator menginputkan NIM / NPP penggun
dan me
dikonfirmasi terlebih dahulu sebelum data dihapus dari database.
url yang dituju adalah “hapus_user.jsp”. Pa
nduk akan dicek valid atau tidak. Bila valid maka data akan
dihapus dan disampaikan pesan sukses, namun b
disampaikan pesan kesalahan ke browser klien.
3) Fungsi web service nya adalah seperti pada Listing I
String noInduk = request.getParameter("nimnip"); String result = ""; try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); // fungsi untuk menghapus user result = port.hapusPengguna(noInduk); } catch (Exception ex) { // penanganan eksepsi Eksepsi = “ “ + ex; }
Listing IV.10 Fungsi untuk menghapus pengguna
BAB IV Implementasi Sistem | 113
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Seperti pada fungsi di atas, data no induk dikirim sebagai parameter
ad n ebagai berikut :
1) k variabel penampung data pengguna yaitu dosen, sekretariat
2) untuk
meng
melalui fungsi web service hapusPengguna().
Proses menampilkan seluruh data pengguna, pada halaman
mi terangkai melalui langkah-langkah s
dibentu
dan mahasiswa per angkatan
selanjutnya dipanggil fungsi web service sebagai berikut
isi variabel tersebut :
try { org.me.monak.MonakWSService service = new org.me.monak.MonakWSService(); org.me.monak.MonakWS port = service.getMonakWSPort(); java.lang.String namaTabel = "dosen"; // “mhs” atau “sekretariat” java.lang.String result = port.getData(namaTabel); out.print(result); } catch (Exception ex) { // menangani eksepsi Eksepsi = “ “ + ex; }
Listing IV.11 Fungsi untuk menampilkan data pengguna
3) contoh fungsi di atas kemudian diterapkan untuk mengisi data
sekretariat dan mahasiswa dari tiap angkatan.
4) langkah selanjutnya yaitu membuat objek store untuk memuat
5)
variabel data pengguna tersebut.
deklarasi grid / tabel dengan membuat store yang digunakan sebagai
komponen untuk kemudian disertakan pada tabPanel agar bisa
ditampilkan di client browser.
BAB IV Implementasi Sistem | 114
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
IV.4. APLIK
a. Imp
Aplikas
aplikasi web
enghubungkan layer presentasi dengan
b. Kelas areaAkadem
Ke
gra k
JFr . Fungsi-fungsi dalam kelas ini
ant
1) createCo
g terbentuk memiliki 2
fungsi ini akan mengembalilkan grafik yang merupakan hasil
konversi dari data akademik di database.
ASI SERVER
lementasi Aplikasi Server
i server merupakan aplikasi yang berfungsi untuk menangani
permintaan dari aplikasi web klien. Aplikasi ini merupakan
dengan melekatkan fungsi web service dan berfungsi sebagai logic-tier
atau lapisan logika bisnis yang m
database. Aplikasi ini terdiri dari 2 kelas utama dengan fungsi-fungsi di
dalamnya.
ik.java
sla ini merupakan kelas yang berperan penting untuk pembentukan
fi yang dinamis. Kelas ini menggunakan library dari kelas
eeChart untuk meng-generate grafik
ara lain adalah :
mbinedChart()
fungsi ini adalah fungsi utama untuk membentuk grafik kombinasi.
Kombinasi disini diartikan karena grafik yan
sumbu y.
2) getBI()
fungsi ini akan mengembalikan nilai bufferedImage dari grafik
yang terbentuk.
3) getJFC()
BAB IV Implementasi Sistem | 115
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
4) getByte()
fungsi ini akan mengembalikan nilai byte dari bufferedImage yang
ik dan sumbu x.
tuk koneksi ke database dan menjalankan
c. Kelas m
Kelas ini merupakan kelas utama dalam Sistem Monitoring Akademik
penghubung sentral antara lapisan database dan presentasi.
Kelas i
pembentukan grafik yang dinamis. Menggunakan objek dari kelas
elas ini mampu memproses data, request dan response
serta m
dalam k
terbentuk untuk kemudian di clone sebelum dikirim kembali ke
server.
5) createDataSet1()
fungsi ini digunakan untuk membentuk dataset yaitu data-data
yang akan digunakan dalam membangun grafik, khususnya area
akadem
6) createDataSet2()
fungsi ini digunakan untuk membentuk dataset yaitu data – data
yang akan digunakan dalam membangun grafik, khususnya sumbu
y, yaitu data akademik yang diambil dari database.
7) konek()
fungsi ini digunakan un
query yang sesuai.
onakWS.java
karena menjadi
ni juga mendukung penerapan arsitektur teknologi three-tier untuk
areaAkademik, k
enghasilkan grafik dinamis dengan waktu sedikit. Fungsi-fungsi
elas ini adalah.
BAB IV Implementasi Sistem | 116
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
1) get()
fungsi ini berguna untuk mengembalikan data akademik
mahasiswa untuk membentuk grafik monitoring akademik.
Parameternya adalah NIM dari mahasiswa yang bersangkutan.
3)
na untuk memperoleh data pengguna untuk
4)
i berguna untuk mengecek ada tidak nya no induk yang
5)
na untuk memperoleh angkatan yang dibimbing
2) cek()
fungsi ini berguna untuk mengecek kevalidan pengguna yang
login. Parameternya adalah no induk, password dan tipe pengguna.
getData()
fungsi ini bergu
kepentingan administrator dalam pengaturan pengguna,
parameternya adalah no induk pengguna.
cek_noinduk()
fungsi in
dicari.
get_akt()
fungsi ini bergu
oleh seorang dosen pembimbing akademik. Parameternya adalah
NPP dari dosen.
6) ganti_pwd()
fungsi ini berguna untuk mengganti password pengguna dengan
parameter no induk dan password baru dari pengguna. Nilai
baliknya adalah “sukses” atau “gagal”.
BAB IV Implementasi Sistem | 117
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
7) ubahPengguna()
alah
s” atau “gagal”.
8)
nya adalah no induk, nama, tipe dan password dari
9)
a pengguna berdasarkan
yang diberikan adalah “sukses” atau “gagal”.
10)
ni berguna dalam perubahan data akademik mahasiswa oleh
etariat. Parameternya adalah NIM beserta data akademik
au
11)
berguna untuk mengembalikan data akademik
12)
seluruh sistem ini yang
kan mengembalikan data gambar grafik berdasarkan NIM.
fungsi ini berguna untuk perubahan data pengguna dan
mengembalikan data pengguna yang akan diubah. Parameternya
adalah no induk dan nama pengguna dan nilai baliknya ad
“sukse
tambahPengguna()
fungsi ini berguna untuk menambah pengguna baru dimana
parameter
pengguna. Nilai baliknya adalah “sukses” atau “gagal”.
hapusPengguna()
fungsi ini berguna untuk menghapus dat
NIM, nilai balik
ubahAkademik()
fungsi i
pihak sekr
dari mahasiswa bersangkutan. Nilai baliknya adalah “sukses” at
“gagal” tergantung pada layer database.
getAkademik()
fungsi ini
mahasiswa untuk mengisi tabel data akademik
getGrafikAkademik()
fungsi ini merupakan fungsi utama dari
a
BAB IV Implementasi Sistem | 118
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
IV.5.
Lapis
data-tier. Lapi
a. Implement
Su ada sistem ini merupakan data riil yang
rsebut mencakup jumlah SKS lulus, IPS dan
IPK maha
angkatan 2
ganjil tahu NPP untuk
t tidak menggunakan format yang sebenarnya.
Penggunaa
pengacaka
ng diperoleh dan mengacu pada database aslinya
maka diim
pada Gam
Se
sebuah adm area_normal, kurikulum,
2005, mhs2006, mhs2007, akt2003, akt2004,
akt2005, ak
akt) merup pakan tabel untuk
sebagai pengguna sedangkan aktXXXX
digunakan
DATABASE
an terakhir dari arsitektur three-tier adalah lapisan database atau
san ini bertugas mengelola data yang dibutuhkan lapisan lain.
asi Database
mber data yang ada p
diperoleh dari BAPSI. Data te
siswa jurusan Teknik Informatika Universitas Sanata Dharma
003, 2004 dan 2005 dengan jangka waktu mulai dari semester
n 2003 hingga semester ganjil tahun 2006. Penggunaan
dosen dan petugas sekretaria
n NIM untuk mahasiswa menggunakan format yang sesuai dengan
n urutan.
Berdasarkan data ya
plementasikan database akademik dengan struktur sebagai seperti
bar IV.18 di bawah.
perti pada gambar tersebut terdapat 16 tabel yang terdiri dari
inistrator, dosen, sekretariat, area_kritis,
mhs2003, mhs2004, mhs
t2006, dan akt2007. Data untuk angkatan 2006 dan 2007 (mhs dan
akan data simulasi. Tabel mhsXXXX meru
menyimpan data mahasiswa
untuk menyimpan data akademik.
BAB IV Implementasi Sistem | 119
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
dosen
*noinduk(varchar(10))nama(varchar(50))
kajur(int(1)) pengampu(int(4))
password(varchar(32))
sekretariat
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
Admin
*noinduk(varchar(50))nama(varchar(50))password(varchar(32))
`
mhs2003
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
area_kritis
*id(int(3))
smt3(double(5,2))
smt6(double(5,2))
smt10(double(5,2))
*kurikulum(int(4))smt1(double(5,2))smt2(double(5,2))
smt4(double(5,2))smt5(double(5,2))
smt7(double(5,2))smt8(double(5,2))smt9(double(5,2))
mhs2005
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
mhs2004
*noinduk(varchar(10))
password(varcharnama(varchar(50))
(32))
mhs2006
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
mhs2007
*noinduk(varchar(10))nama(varchar(50))password(varchar(32))
area_normal
*id(int(3))
smt3(double(5,2))
smt6(double(5,2))
smt10(double(5,2))
*kurikulum(int(4))smt1(double(5,2))smt2(double(5,2))
smt4(double(5,2))smt5(double(5,2))
smt7(double(5,2))smt8(double(5,2))smt9(double(5,2))
kurikulum
*id(int(3))
kurikulum(int(4))*angkatan(int(4))
akt2003
*nim(varchar(10))
jumSksLulus(int(3ips(double(3,2))
semester(int(2))))
ipk(double(3,2))
akt2004
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2005
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
akt2006
*nim(varchar(10))semester(int(2))
ips(dipk(d
jumSksLulus(int(3))ouble(3,2))ouble(3,2))
akt2007
*nim(varchar(10))semester(int(2))jumSksLulus(int(3))ips(double(3,2))ipk(double(3,2))
b. Store procedure dan store function pada database akademik
Pada database ini terdapat 14 store procedure dan 4 store function
untuk membantu pengelolaan data tabel-tabel di dalam database.
Gambar IV.18 Struktur database akademik
BAB IV Implementasi Sistem | 120
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
IV.6. TEKNIK PEMBENTUKAN GRAFIK DINAMIS
Penjelasan mengenai teknik ini akan dimulai proses di dalam fungsi
di web service hingga konversi pada sisi client dimana gambar grafik siap
ditampilkan di browser. Langkah-langkahnya adalah sebagai berikut.
a. dalam fungsi web service getGrafikAkademik(), terdapat di file
monakWS.java, parameter NIM mahasiswa ditangkap dan ditampung
dalam variabel nim
b. data angkatan kemudian diambil dengan fungsi substring().
c. dibentuk objek tes dari kelas areaAkademik dengan 3 parameter yaitu
nama sistem, angkatan dan nim dari mahasiswa.
d. dalam kelas areaAkademik selanjutnya dijalankan konstruktor
areaAkademik yang menangkap 3 parameter tersebut.
e. fungsi createCombinedChart() akan menjalankan semua proses dalam
pembentukan grafik, mulai dari query ke database, pengaturan axis dan
ordinat, anotasi, dataset, plot hingga membentuk satu kesatuan grafik.
Semua komponen tersebut kini melekat pada objek tes.
f. fungsi pack( nen-komponen yang
ada pada grafik
g. selanjutnya dibentuk vaiabel byte array (byte [])yaitu b yang
menangkap data byte dari objek tes. Konversi ke byte ini dilakukan
dengan fungsi getByte().
h. variabel b tersebut kemudian di konversi menjadi objek dengan fungsi
clone() dan ditampung oleh variabel data bertipe Object Java.
) digunakan untuk mengemas kompo
BAB IV Implementasi Sistem |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
121
ilai balik oleh fungsi
getG
i web
ebut dikonversi ke dalam bytearray dan ditampung
g oleh variabel image
tersebut untuk
ampilkan.
ri kelas Graphics2D.
i. variabel data kemudian dikembalikan sebagai n
rafikAkademik() ini ke aplikasi client.
j. pada aplikasi client, yaitu di file grafik_akademik.jsp
(../halaman/akademik/grafik_akademik.jsp). Nilai balik dari fungs
service getGrafikAkademik() tersebut ditangkap dengan menggunakan
variabel result bertipe Object.
k. selanjutnya data ters
dalam variabel dataByte.
l. dengan fungsi createImage() dari kelas Toolkit, data bytearray tersebut
dikonversi menjadi bertipe Image dan ditampun
dan kelas Image bawaan Java.
m. kelas MediaTracker selanjutnya mengolah data image
mengidentifikasi komponen-komponennya. Kelas ini juga membentuk
BufferedImage untuk mengatur ukuran, tipe pewarnaan dari gambar
grafik. Kemudian kelas ini membentuk objek dari Graphics2D untuk
mempersiapkan gambar grafik tersebut sehingga siap dit
n. Gambar grafik tersebut kemudian ditampilkan dengan fungsi
drawImage() da
o. Gambar grafik selanjutnya muncul sebagai konten pada browser client.
BAB V Analisis Hasil | 122
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB V
ANALISIS HASIL
V. ANALISIS HASIL
HASIL PENGUJIAN SISTEM
Sistem yang dibangun berjalan di lingkungan intranet, dimana
terdapat client dan server serta thr
V.1.
ee tier yaitu web service yang berfungsi
n yang dilakukan diperoleh sistem yang
web yang dinamis. Grafik dinamis yang
guna
puter dimana komputer penulis
jaringan dan berstatus login sebagai pengguna yaitu Dosen Pembimbing
Akademik, Kaprodi dan Sekretariat. Pengujian dilakukan secara bersamaan
dengan menampilkan grafik perkembangan akademik dari 3 mahasiswa
menyediakan fungsi layanan untuk memenuhi kebutuhan web.
Berdasarkan pengujia
maksimal dalam mengimplementasikan teknologi three-tier. Fungsi dari
layer user interface, layer bussiness logic dan layer database berhasil
dimanfaatkan dalam pembentukan
terbentuk tampil dengan kualitas yang terjaga karena menggunakan format
gambar PNG. Format ini dipilih karena mampu menjaga kualitas komponen
penyusun gambar. Ukuran gambar yang dihasilkan 640 x 480 pixel.
Pada pengujian performa, dilakukan dengan menghitung waktu
yang dibutuhkan untuk meng-generate grafik dimulai dari saat peng
meng-klik tombol “Tampil” hingga grafik berhasil ditampilkan di layar
monitor. Pengujian dilakukan dengan 4 kom
sebagai server dan 3 komputer lainnya sebagai client terkoneksi dalam satu
BAB V Analisis Hasil | 123
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
angkatan 2003, dengan asums
angkatan lainnya.
mputer yang difungsikan sebagai server adalah :
1 GB dan Harddisk 80 GB. Spesifikasi 3
kompu
i data yang diproses lebih banyak dibanding
Spesifikasi ko
AMD Turion 64 2 GHZ, RAM
ter yang difungsikan sebagai client adalah : Pentium 4 Dual Core 2
GHz, RAM 1 GB dengan Harddisk 80 GB. Hasil pengujian dapat dilihat
pada tabel di bawah ini.
Tabel V.1 Tabel Hasil Pengujian Performa
Komputer 1 Komputer 2 Komputer 3 Browser Opera 9.2 SeaMonkey 1.1.4 Safari 3.0.2 Pengguna Kaprodi Dosen PA Sekretariat Waktu (dalam detik )
3 Komputer 1,517 1,509 1,502 2 Komputer 0,083 0,091 ----- 1 Komputer ---- ----- 0,05
Pengujian dilakukan beberapa kali dan menghasilkan waktu yang
berkisar tidak jauh berbeda. Berdasarkan hasil pengujian rata-rata waktu
yang dibutuhkan adalah 1,509 detik. Waktu diperoleh dari modul
penghitung waktu dalam sistem. Berdasarkan Tabel V.1 di atas dapat dilihat
kecil bila jumlah komputer semakin sedikit. Hasil ini dapat dikaji lebih jauh
bila melihat pada spesifikasi komputer server dan client, dimana bila
dilakukan peningkatan pada sumber daya tersebut akan meningkatkan waktu
generate dan performa sistem secara umum.
waktu yang diperlukan untuk meng-generate gambar grafik akan semakin
BAB V Analisis Hasil | 124
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
V.2.
memiliki kelebihan pada fungsi utamanya, yaitu dalam
pembentu
m
m
m
antara lain, kerja pada sistem client lebih berat (menggunakan applet) dan
kerja server we i lapisan antarmuka
p dan pe ra en akan
m sistem ja dari e dapat an dan
fu lti-t iimpleme n dengan ba ilnya adalah
k cara ruhan m aksimal dan pembebanan kerja
tidak ter
al.
KELEBIHAN SISTEM
Sistem ini
kan grafik yang dinamis dengan web service. Selain dengan
etode yang digunakan dalam sistem ini, terdapat beberapa metode lain
isalnya dengan menggunakan applet atau memanfaatkan JSP untuk
embangun grafik dinamis. Dua metode lain tersebut memiliki kelemahan
b JSP lebih berat (harus melayan
engguna mbentukan g fik sekaligus). D gan menggun
etode pada ini, ker web servic dimaksimalk
ngsi dari mu iered d ntasika ik. Has
erja sistem se keselu enjadi m
jadi pada satu sisi.
Gambar hasil pembentukan dapat digunakan kapan saja ataupun
dihapus bila tidak dipergunakan lagi. Perubahan yang ada dapat di update
dengan cepat dan dapat segera ditampilkan.
Sesuai dengan hasil pengujian yang dilakukan, sistem ini mampu
merespon dan memproses dengan cepat hingga 3 komputer pada saat yang
bersamaan. Bisa dibayangkan bila sumber dayanya didukung oleh sarana
yang lebih sesuai seperti mesin server dan arsitektur jaringan yang baik
maka performa sistem akan menjadi lebih maksim
BAB V Analisis Hasil |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
125
V.4. PROSPEK PENGEMBANGAN SISTEM
Sistem yang dibangun memiliki fungsi utama dalam
pengembangan grafik dinamis yang memaksimalkan kerja web service.
Prospek pengembangan dari sistem ini dapat diarahkan pada kelengkapan
fasilitas dari tiap pengguna. Selain itu, berdasarkan hasil pengujian, waktu
generate akan dapat ditingkatkan dengan penambahan sumber daya seperti
penggunaan mesin server dan peningkatan kualitas jaringan yang baik.
Dalam pengembangannya, sistem ini dapat mengarah ke bidang
multimedia dalam aplikasi web seperti file, suara, video dan lain-lain. Selain
itu, sistem ini dapat diimplementasikan dalam segala bentuk pengembangan
aplikasi web yang membutuhkan bentuk dinamis seperti bursa saham,
pengamatan kecepatan angin dan lain-lain.
V.3. KEKURANGAN SISTEM
Sistem ini memiliki beberapa kekurangan terutama pada fasilitas
sistem yang belum maksimal bagi tiap pengguna. Pengguna dari sistem ini
adalah mahasiswa, dosen, sekretariat dan kaprodi. Hingga sistem ini
diselesaikan, fasilitas bagi pengguna terbatas sampai pengamatan
perkembangan akademik secara numerik dan grafik. Peningkatan dari segi
fasilitas seperti kemampuan melayani kondisi-kondisi khusus seperti cuti
dan perpanjangan studi, grafik peningkatan akademik per angkatan dan
fasilitas lainnya diharapkan dapat meningkatkan kenyamanan dan kegunaan
dari sistem ini di mata penggunanya.
Penutup | 126
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BAB VI
VI.1.
lain a
1. T
di
a.
b. gambar grafik kemudian dikonversi menjadi tipe byte array dan di-clone
menjadi Java Object untuk dikirim ke aplikasi web client
c. setelah diterim
2. Dari hasil pengujian, teknik ini m
oleh 3
kondisi pengujian adalah :
a. komputer
b.
KESIMPULAN DAN SARAN
VI. PENUTUP
KESIMPULAN
Kesimpulan akhir yang diperoleh setelah pengembangan sistem ini antara
dalah :
eknik pembentukan citra grafis yang dinamis dengan web service berhasil
implementasikan dengan langkah-langkah sebagai berikut :
data numerik diproses menjadi gambar grafik dengan menggunakan kelas
JFreeChart
a, Object gambar dikonversi kembali menjadi byte array dan
data bertipe bufferedimage, data ini yang kemudian ditampilkan pada
aplikasi web client
ampu menampilkan gambar grafik dinamis
client secara bersamaan dengan waktu generate rata-rata 1,509 detik,
server memiliki spesifikasi prosesor AMD Turion 64 2 GHz,
memori 1 GB dan harddisk 80 GB sedangkan komputer client sejumlah 3
buah, memiliki spesifikasi prosesor Pentium 4 Dual Core 2 GHz, memori 1
GB dan harddisk 80 GB.
komputer client dan server terhubung secara jaringan
Penutup |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
127
c. gambar yang dihasilkan mem an 640 x 480 pixel dengan format
PNG (Portable Ne
VI.2. SARAN
Saran yang dapat penulis berikan dengan tujuan pengembangan sistem
ini lebih lanjut adalah :
a. perlu adanya kelengkapan fasilitas bagi pengguna dalam sistem ini seperti
kemampuan melayani kondisi-kondisi khusus seperti cuti dan perpanjangan
studi, grafik peningkatan akademik per angkatan dan fasilitas lainnya.
b. diharapkan adanya penelitian-penelitian sejenis untuk mengkaji lebih dalam
mengenai pengembangan sistem ini seperti pengujian pada mesin server,
konfigurasi jaringan yang memadai dan pengujian dengan client dalam
jumlah yang besar..
c. pengembangan sistem ini dapat dilakukan dengan penggunaan metode lain
misalnya pemebntukan grafik di sisi client dengan JApplet, Jquery dan metode
lain yang memungkinkan.
iliki ukur
twork Graphic).
Daftar Pustaka | 128
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
DAFTAR PUSTAKA
Anonim, The JavaTM Web Services Tutorial,
http://www.java.sun.com/webservices/download/webservicestutorial.ht
ml (akses terakhir : 17 Maret 2008, jam 18:40)
Anonim, 2002, Unified Modeling Language: Superstructure version 2.0,
http://www.omg.org/issues/03-08-02.pdf (akses terakhir : 12 Agustus
2008, jam 17:17).
Boggs, W., Boggs, M., 1999, Mastering UML with Rational Rose, SYBEX Inc.,
Alameda USA.
Bodoff, S., 2007, Java Server Pages (JSP) Basics, Sun Microsystems.
Cheesman, J., Daniels, J., 2001, UML Components: A Simple Process for
Specifying Component-Based Software, Addison-Wesley.
Eckerson, Wayne W., 1995, Three Tier Client/Server Architecture: Achieving
Scalability, Performance, and Efficiency in Client Server Applications.,
Open Information Systems.
Green, Mark L., Miller, Stephen D., 2007, Multitier Portal Architecture for Thin-
and Thick-client Neutron Scattering Experiment Support
Hung, M., Zou, Y., 2005, Extracting Bussiness Process from Three-Tier
Architecture System,
Kadir, A., 2004, Dasar Pemrograman Web Dinamis Dengan JSP, Penerbit Andi,
Yogyakarta.
Daftar Pustaka |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
129
Khawar, Z. A., Umrysh, C n to Enterprise Software",
evelo
Martin, D , Birmingham.
. E., 2001, "Introductio
D ping Enterprise Java Applications with J2EE and UML ISBN 0-
201-73829-5, Addison-Wesley.
. et all., 2000, Professional XML, Wrox Press Ltd
Sadoski, D., et all, Three Tier Software Architectures, http://www.sei.cmu.edu
(akses terakhir : 11 Agustus 2008, jam 23:10)
Whitten, J. L., Bentley, L. D., Dittman, K. C., 2004, Metode Desain & Analisis
Wielenga, G., Manisha, U., Grebac, M., Kuchtiak, M., Najman, R., Web Services
/index.html
Sistem edisi 6, Tim Penerjemah ANDI, Yogyakarta.
(JAX-WS) in Java EE 5, http://www.netbeans.org/kb/55
(akses terakhir : 17 Maret 2008, jam 18:40).
Lampiran | 130
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
LAMPIRAN
Login Pengguna Halaman
Halaman Login Administrator
Halaman Utama Mahasiswa
Lampiran | 131
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Data Akademik Anda – Mahasiswa
Halaman Utama Dosen Pembimbing Akademik ( DPA )
Lampiran | 132
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Perkembangan Akademik Mahasiswa – DPA
Halaman Monitoring Akademik – DPA
Halaman Utama Ketua Program Studi (Kaprodi)
Lampiran | 133
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Monitoring Akademik Kaprodi
Halaman Utama Petugas Sekretariat
Lampiran | 134
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Monitoring Akademik Petugas Sekretariat
Lampiran | 135
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Perkembangan Akademik Mahasiswa – Semua Pengguna
Lampiran | 136
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
Halaman Ubah Password – Semua Pengguna
Halaman Utama Administrator
Lampiran |
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
137
or Halaman Pengaturan Pengguna – Administrat
Biografi Penulis | 138
Teknik Pembentukan Citra Grafis Yang Dinamis Dengan Web Service
BIOGRAFI PENULIS
DATA PRIBADI
Nama Lengkap : Benidiktus Tempat & Tgl. Lahir : Pontianak , 11 Februari 1986 Jenis Kelamin : Laki-laki Agama : Katolik Kewarganegaraan : Indonesia Alamat : Jalan Dharma Putra VI No.74A Siantan Hilir, Pontianak Utara
78243 Pontianak, Kalimantan Barat
No. H/P : 0818-0273-0896 Email : benidiktus@hotmail.com
RIWAYAT PENDIDIKAN
Pendidikan Formal : SD Kanisius Pontianak, lulus tahun 1998. SMP Bruder Disamakan Pontianak, lulus tahun 2001. SMU Negeri 3 Pontianak, lulus tahun 2004. Universitas Sanata Dharma Jogjakarta, jurusan Teknik Informatika, lulus tahun 2008.
Pendidikan Informal :
Kursus Bahasa Inggris di LIA, Pontianak, tahun 1999-2003 PENGALAMAN
Asistensi :
Asisten Dosen di Lab Komputer Dasar Teknik Informatika USD Asisten Dosen di Lab Sistem Operasi Teknik Informatika USD Asisten Dosen di Lab Basis Data Teknik Informatika USD Asisten Dosen di Lab Jaringan Komputer Teknik Informatika USD
Recommended