repository.usd.ac.idrepository.usd.ac.id/32313/2/045314001_full.pdf · halaman persembahan . saat...

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

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


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.



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



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.



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



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.



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.


BAB I Pendahuluan |


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,



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.



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.



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.



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



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 :



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.



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



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



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



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)



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,



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



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.



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.



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.



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



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



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



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.



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



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.



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:



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.




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.


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



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



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



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 :



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


BAB II Landasan Teori |


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 :



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 :



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



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.



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



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



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


`

mhs2003


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


mhs2004


mhs2006


mhs2007


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


akt2005


akt2006


akt2007


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



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.



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.



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.


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



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.



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.



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.



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.



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



grafik serta dikonversi sehingga akhirnya siap di kirim ke aplikasi

client. Apabila terdapat kesalahan, maka pesan kesalahan akan

disampaikan ke pengguna.


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



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



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



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.



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.



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.



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.



b. Desain Class Diagram untuk Server

Desain Class Diagram untuk server dapat dilihat pada


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 :



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



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.



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.



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.



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.



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


Sistem Monitoring Akademik

Password

Masuk

Login Administrator

Gambar III.19 Halaman Login Pengguna Administrator



Pada halaman ini Administrator dapat mengisi password

pada tempat yang disediakan.

3) Halaman Menu Pengguna Mahasiswa

Halaman utama pengguna Mahasiswa dapat dilihat pada



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.



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



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



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



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.




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



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



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.



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


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 )


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




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



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.



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



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


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 )


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





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



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



19)

n pengguna Administrator dapat dilihat

Halaman Pengelolaan Pengguna Administrator

Halaman pengelolaa


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 Halaman Tambah Pengguna - Administrator



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 |


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


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


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



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)



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



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



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



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



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



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


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



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


ubah_akademik.jsp


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.



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


hapus_user.jsp



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



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)



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



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



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



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.



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



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



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



Gambar IV.13 Halaman Perkembangan Akademik Mahasiswa



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 :



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



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



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



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



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.



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



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



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



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.



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



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.



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



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



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.



dosen

*noinduk(varchar(10))nama(varchar(50))

kajur(int(1)) pengampu(int(4))

password(varchar(32))

sekretariat


Admin


`

mhs2003


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


mhs2004

*noinduk(varchar(10))

password(varcharnama(varchar(50))

(32))

mhs2006


mhs2007


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


akt2005


akt2006

*nim(varchar(10))semester(int(2))

ips(dipk(d

jumSksLulus(int(3))ouble(3,2))ouble(3,2))

akt2007


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



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 |


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


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



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



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 |


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


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 |


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


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 |


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

http://www.omg.org/issues/03-08-02.pdf

Lampiran | 130


LAMPIRAN

Login Pengguna Halaman

Halaman Login Administrator

Halaman Utama Mahasiswa

Lampiran | 131


Halaman Data Akademik Anda – Mahasiswa

Halaman Utama Dosen Pembimbing Akademik ( DPA )

Lampiran | 132


Halaman Perkembangan Akademik Mahasiswa – DPA

Halaman Monitoring Akademik – DPA

Halaman Utama Ketua Program Studi (Kaprodi)

Lampiran | 133


Halaman Monitoring Akademik Kaprodi

Halaman Utama Petugas Sekretariat

Lampiran | 134


Halaman Monitoring Akademik Petugas Sekretariat

Lampiran | 135


Halaman Perkembangan Akademik Mahasiswa – Semua Pengguna

Lampiran | 136


Halaman Ubah Password – Semua Pengguna

Halaman Utama Administrator

Lampiran |


137

or Halaman Pengaturan Pengguna – Administrat

Biografi Penulis | 138


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 : [email protected]

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

repository.usd.ac.idrepository.usd.ac.id/32313/2/045314001_full.pdf · halaman persembahan . saat...

Documents