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
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
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
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
HALAMAN MOTTO
MOTTO
Give up is all
you can left
LEMBAR PERNYATAAN PERSETUJUAN
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
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
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
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
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
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
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. LATAR BELAKANG MASALAH... 1
I.2. RUMUSAN MASALAH... 3
I.3. BATASAN MASALAH... 3
I.4. TUJUAN DAN MANFAAT PENELITIAN... 4
I.4.1. Tujuan Penelitian... 4
I.5. METODOLOGI PENELITIAN... 5
I.5.1. Pencarian Kebutuhan... 5
I.5.1.1. Observasi dan Pengumpulan Data... 5
I.5.1.2. Studi Literatur... 5
I.5.2. Analisa Dan Desain Sistem... 6
I.5.2.1. Analisa Sistem... 6
I.5.2.2. Desain Sistem... 6
I.5.2.3. Implementasi Sistem... 6
I.6. SISTEMATIKA PENULISAN... 7
BAB II LANDASAN TEORI ... 9
II.1. METODOLOGI PENGEMBANGAN SISTEM... 9
II.1.1. Pendekatan Model-Driven-Information Engineering... 9
II.1.2.1. UML Artifact... 10
II.1.2.2. Use-Case Diagram... 10
II.1.2.3. Activity Diagram... 11
II.1.2.4. Sequence Diagram... 11
II.1.2.5. Class Diagram... 11
II.1.2.6. Simbol UML... 12
II.1.3. PENDEKATAN BERORIENTASI OBJEK... 14
II.2. ARSITEKTUR THREE-TIER... 14
II.2.1. Lapisan Antarmuka Pengguna (User Interface)... 16
II.2.1.1. Java Server Pages (JSP)... 17
II.2.1.3. Web Server... 22
II.2.2. Lapisan Logika Bisnis ( Bussiness Logic / Logic Tier)... 22
II.2.2.1. Web Service... 23
II.2.2.2. JFreeChart... 27
II.2.2.3. Java Image... 30
II.2.3. Lapisan Database... 31
II.2.3.1. Database Server Mysql... 31
II.3. XML (eXtensible Markup Language)... 34
II.4. MONITORING... 37
BAB III ANALISIS DAN PERANCANGAN SISTEM ... 39
III.1. GAMBARAN UMUM SISTEM... 39
III.2. FASE ANALISIS SISTEM... 39
III.2.1. Konsep Kerja Sistem... 39
III.2.2. Analisis Kebutuhan... 43
III.2.2.1. Use Case Diagram... 43
III.2.3. Struktur Database... 44
III.3. ANALISIS BERORIENTASI OBJEK... 45
III.3.1. Activity Diagram... 45
III.3.2. Object Analysis Diagram... 50
III.3.3. Use Case Realization Diagram... 50
III.3.4. Sequence Diagram... 51
III.3.5. Collaboration Diagram... 56
III.4.1. Desain Class Diagram... 58
III.5. PERANCANGAN SISTEM... 66
III.5.1. Perancangan User Interface... 66
BAB IV IMPLEMENTASI SISTEM ... 85
IV.1. KARAKTERISTIK SISTEM... 85
IV.2. KEBUTUHAN SISTEM... 87
IV.3. APLIKASI WEB CLIENT... 89
IV.3.1. Hirarki Model... 89
IV.3.2. Implementasi Antarmuka Pengguna... 95
IV.4. APLIKASI SERVER... 114
IV.5. DATABASE... 118
IV.6. TEKNIK PEMBENTUKAN GRAFIK DINAMIS... 120
BAB V ANALISIS HASIL... 122
V.1. HASIL PENGUJIAN SISTEM... 122
V.2. KELEBIHAN SISTEM... 124
V.3. KEKURANGAN SISTEM... 125
V.4. PROSPEK PENGEMBANGAN SISTEM... 125
BAB VI KESIMPULAN DAN SARAN ... 126
VI.1. KESIMPULAN... 126
VI.2. SARAN... 127
DAFTAR PUSTAKA ... 128
LAMPIRAN... 130
DAFTAR TABEL
Tabel II.1 Tipe Data Numerik... 32
Tabel II.2 Tipe Data Numerik... 33
Tabel II.3 Tipe Data Numerik... 33
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 CaseDiagramWeb 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.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.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 JavaTM System Application Server... 88
Gambar IV.3 MySQL 5.0.18 ... 89
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
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
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
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 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
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
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 sertaberorientasi 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
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
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
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
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
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
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
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
(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 objekentitas (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),
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
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
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
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.
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
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.
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.
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,
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
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
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
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
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
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
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
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
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)
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
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 Tipe Data Numerik
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
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 “>”. 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
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
<? 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
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
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
CLIENT TIER LOGIC TIER DATA TIER
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
<?xml version="1.0" encoding="UTF-8"?>
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
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 Servletdapat 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
</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
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 clientbrowser.
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.
