1

BAB I
PENDAHULUAN

A. Latar Belakang Masalah

Penemuan berbagai macam teknologi yang mendukung informasi

menyebabkan perkembangan teknologi informasi yang demikian pesat,

dimana setiap informasi yang ada di dunia ini bisa kita dapatkan dalam waktu

yang relatif singkat.Teknologi informasi juga dipandang sebagai hal yang

sangat penting dalam perluasan kesempatan belajar serta perolehan informasi

masyarakat di dunia.

Kebutuhan akan informasi dan penggunaan komputer yang semakin

banyak mendorong terbentuknya jaringan komputer yang mampu melayani

berbagai pengguna informasi, sehingga pengolahan informasi dapat dilakukan

secara cepat dan terstruktur. Kebiasaan pengguna dengan sistem pengisian

data yang dimanja dengan kemudahan tampilan spreadsheet sangat

bertentangan dengan web application yang ada sekarang. Web application

sekarang memerlukan adaptasi yang mengharuskan pengguna mengisi data

satu demi satu sesuai form yang ada, ditambah dengan penggunaan waktu

yang banyak ketika sebuah web application mengambil seluruh data dari

server satu halaman. Berdasarkan hal tersebut perlu adanya pembuatan web

application yang bersifat friendly dengan pengguna dan tidak mengambil

waktu yang banyak dalam memproses data.

SMAN 8 Padang adalah sebuah institusi yang masih menggunakan cara

manual dalam menangani pengolahan data. Data dikumpulkan dalam map

1
 2

arsip, mengelompokkannya, memberi penomoran dengan pola tertentu, lalu

menempatkan arsip-arsip tersebut didalam lemari penyimpanan. Namun, bila

arsip yang disimpan sudah cukup banyak, maka sulit dan butuh waktu lama

untuk menemukan data yang diinginkan. Disamping itu, sangat besar

kemungkinan data tersebut rusak dikarenakan penyimpanan yang masih

konvensional.

Penemuan teknologi yang paling baru sekarang adalah framework Ext-

GWT yang dapat membuat website menjadi lebih tepat sasaran dengan tujuan

pembuataannya, karena teknologi Ext-Gwt membuat library-library web

menjadi lebih variatif dan mudah untuk dikembangkan. Apabila teknologi ini

dipadukan dengan arsitektur programming yang terstruktur dan fleksibel,

seperti arsitektur model view controller maka akan tercipta sebuah web

application yang sangat mudah di gunakan, serta memanjakan penggunanya

seperti bekerja di komputer stand alone dengan fitur-fitur yang ada.

Perkembangan teknologi khususnya dalam teknologi informatika dan adanya

penerapan penggunaan aplikasi berbasis web dalam pengolahan data di

sekolah menjadikan pengolahan data lebih terstruktur dan terorganisir dengan

baik sehingga dalam penyampaian informasi akan bisa lebih cepat.

Sesuai dengan kebutuhan itu, maka perlu rancangan web application

yang dapat membantu sekolah dalam pengolahan data siswa, data guru, data

mata diklat, dan data kelas dengan judul Implementasi Arsitektur Model

View Controller Dalam Web application SMAN 8 Padang Menggunakan

Framework Ext-GWT.
 3

B. Identifikasi Masalah

Berdasarkan latar belakang masalah maka dapat diidentifikasi masalah

yang ada sebagai berikut :

1. Sistem yang dibuat tidak menggunakan arsitektur yang jelas, sehingga

ketika user memerlukan kebutuhan baru, system harus diubah keseluruhan.

2. Pengolahan data masih menggunakan cara mengisi data satu record satu

tampilan, sehingga ketika admin mau memasukan ratusan data, admin

menjadi kewalahan.

3. Sulit dan butuh waktu lama untuk menemukan data yang diinginkan.

4. Arsitektur sistem tidak menggunakan bantuan framework yang bagus,

sehingga banyak terjadi tumpukan kode-kode program yang tidak

diperlukan.

C. Batasan Masalah

Adapun batasan masalah didalam pembuatan tugas akhir ini antara lain:

1. Sistem yang dibuat akan didukung oleh pembuatan database yang sangat

teratur menggunakan postgreSQL.

2. Web application didalam tugas akhir ini akan dapat mengatur data guru,

siswa, serta mata diklat sehingga data lebih aman dan terstruktur.

3. Pembuatan web application menggunakan Eclipse Helios dan framework

Ext-GWT.

4. Pada tugas akhir ini, difokuskan pada arsitektur sistem, bukan

implementasi sistem.
 4

D. Rumusan Masalah

Berdasarkan dari identifikasi dan batasan masalah , maka masalah yang

akan dikaji dalam tugas akhir ini dapat dirumuskan, yaitu Bagaimana

menganalisis, merancangdan pengembangan web application di SMAN 8

Padang dengan menggunakan arsitektur model view controller dan

framework Ext-GWT dalam Eclipse Helios dan database PostgreSQL?.

E. Tujuan

Tujuan dari tugas akhir ini adalah:

1. Membuat arsitektur Model View Controller yang dapat membuat sistem

lebih terstruktur dalam penggunaan proses dan hasil untuk mendapatkan

informasi didalam webbase.

2. Menggabungkan teknologi framework EXT-GWT dalam keperluan

pembuatan webbase yang user friendly dan dapat menghasilkan informasi

yang berguna bagi sekolah.

3. Membuat web base dalam sistem informasi yang dapat digunakan dimana

saja dan membutuhkan sumber daya jaringan yang rendah.

F. Manfaat

Web application yang dirancang merupakan alternatif solusi yang

bermanfaat untuk :

1. Mempermudah pembuatan kerangka sistem yang dirancang sesuai

kebutuhan dan permintaan dari user.

2. Membuat tampilan sistem lebih user friendly sehingga user lebih nyaman

dalam menggunakan sistem.

 5

3. Memperkenalkan, melatih dan membiasakan user untuk menggunakan

teknologi informasi baru sebagai salah satu media pengolah data siswa,

data guru, data kelas dan data mata diklat.

 6

BAB II
LANDASAN TEORI

A. Web application

Sebuah aplikasi web menurut Alex (2000:1) adalah sebuah aplikasi

yang diakses melalui jaringan seperti Internet atau intranet . Istilah ini juga

dapat berarti sebuah aplikasi perangkat lunak komputer yang dikodekan

dalam bahasa yang didukung browser (seperti JavaScript , dikombinasikan

dengan browser yang diberikan markup languange seperti HTML) dan

bergantung pada browserweb umum untuk membuat aplikasi dieksekusi.

Aplikasi Web yang populer karena multiplatform dan kenyamanan

menggunakan web browser sebagai klien, atau disebut juga thin client.

Kemampuan untuk memperbarui dan memelihara aplikasi web tanpa

mendistribusikan dan menginstal perangkat lunak pada ribuan komputer klien

merupakan alasan utama untuk popularitas mereka, seperti dukungan yang

melekat untuk cross-platform.

Dalam model komputasi sebelumnya, misalnya di client-server, beban

untuk aplikasi dibagi antara kode pada server dan kode diinstal pada setiap

klien lokal. Dengan kata lain, aplikasi memiliki klien sendiri program yang

menjabat sebagai antarmuka pengguna dan harus secara terpisah diinstal pada

setiap pengguna komputer pribadi. Upgrade ke kode server sisi aplikasi

biasanya akan juga memerlukan upgrade ke kode sisi klien diinstal pada

setiap workstation pengguna, menambah dukungan biaya dan penurunan

produktivitas.

6
 7

Sebaliknya, aplikasi web menggunakan dokumen-dokumen web ditulis

dalam format standar seperti HTML dan JavaScript, yang didukung oleh

berbagai browserweb. Aplikasi web dapat dianggap sebagai varian tertentu

dari client-server perangkat lunak dimana perangkat lunak client didownload

ke mesin client ketika mengunjungi halaman web yang relevan, dengan

menggunakan prosedur standar.

B. Arsitektur Model View Controller

Model-View-Controller atau MVC menurut Barnes (2006) adalah

sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data

(Model) dari tampilan (View) dan cara bagaimana memprosesnya

(Controller). Dalam implementasinya kebanyakan framework dalam

aplikasi website adalah berbasis arsitektur MVC. MVC memisahkan

pengembangan aplikasi berdasarkan komponen utama yang membangun

sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian

yang menjadi kontrol dalam sebuah aplikasi web.

MVC ini sering terlihat pada HTML atau XHTML yang dihasilkan oleh

sebuah web application. Controller menerima GET atau POST input dan

memutuskan apa yang harus dilakukan dengan hal itu, menyerahkan ke obyek

domain yaitu model yang berisi busines rules dan tahu bagaimana

melaksanakan tugas-tugas khusus seperti pengolahan perintah baru dan

menghasilkan komponen seperti mesin template, XML, Ajax callback.

 8

Model pada MVC berupa logika bisnis dan domain yang dibutuhkan

untuk memanipulasi data dalam sebuah aplikasi. Banyak aplikasi

menggunakan mekanisme penyimpanan persisten seperti database untuk

menyimpan data. MVC tidak secara khusus menyebutkan lapisan akses data

karena dipahami sebagai bawah atau dienkapsulasi oleh model.

MVC merupakan pattern yang tidak dapat langsung dipetakan menjadi

kode, MVC lebih merupakan suatu rancangan konseptual atau paradigma.

Seiring dengan semakin banyaknya penggunaan client side scripting, ada 3

jenis MVC yang mungkin terjadi pada suatu aplikasi webyaitu :

a. Server Side MVC

Server Side MVC biasa terjadi pada aplikasi web tradisional, yang

tidak melibatkan client side seperti Javascript, Java Applet, Flash.Server

Side. MVC menyerahkan keseluruhan proses bisnis pada server, aplikasi

pada sisi user hanya dapat menerima. MVC jenis ini terkadang disebut

juga dengan nama Thin Client.

b. Mixed Client Side and Server Side MVC

Pada Mixed Client Side dan Server Side MVC 1 client tidak

menggunakan model sebagai jembatan untuk melakukan komunikasi pada

server, dibandingkan dengan Server Side MVC, arsitektur ini memiliki

tingkat kompleksitas yang lebih tinggi karena lebih banyak komponen

yang terlibat. Untuk selanjutnya arsitektur ini disebut, dengan Mixed

MVC 1.
 9

Pada Mixed Client Side and Server Side MVC 2, client

menggunakan model sebagai jembatan untuk melakukan komunikasi pada

server, dibandingkan dengan arsitektur MVC yang lain, arsitektur ini

memiliki tingkat kompleksitas yang paling tinggi karena lebih banyak

komponen yang terlibat, sehingga membutuhkan sumber daya yang lebih

besar pula. Untuk selanjutnya arsitektur ini disebut dengan Mixed MVC 2.

c. Rich Internet Application MVC

MVC Rich Internet Application (RIA) disebut juga dengan nama Fat

Client, merupakan aplikasi web yang memiliki kemampuan dan fungsi

hampir seperti aplikasi desktop.RIA pada sisi client, memiliki engine untuk

mengambil data yang berada pada server, sehingga pada client terdapat

bagian MVC sendiri dan hanya membutuhkan bagian model pada sisi

server.

C. Framework

Framework secara artian namanya adalah kerangka kerja.Framework

dalam wikipedia (2010) juga dapat diartikan sebagai kumpulan script

(terutama class dan function) yang dapat membantu developer atau

programmer dalam menangani berbagai masalah-masalah dalam

pemrograman seperti koneksi ke database, pemanggilan variabel, file,

sehingga developer lebih fokus dan lebih cepat membangun aplikasi. Bisa

juga dikatakan Framework adalah komponen pemograman yang siap re-use

kapan saja, sehingga programmer tidak harus membuat scrip yang sama

untuk tugas yang sama. Misalkan saat anda membuat aplikasi web berbasis
 10

ajax yang setiap kali harus melakukan XML Http Request, maka ajax telah

mempermudahnya untuk anda dengan menciptakan sebuah objek khusus

yang siap digunakan untuk operasi Ajax berbasis PHP.

Itu adalah salah satu contoh kecil, selebihnya framework jauh lebih luas

dari itu. Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan

fungsi (libraries), maka seorang programmer tidak perlu lagi membuat

fungsi-fungsi (biasanya disebut kumpulan library) dari awal, programmer

tinggal memanggil kumpulan library atau fungsi yang sudah ada didalam

framework, tentunya cara menggunakan fungsi-fungsi itu sudah ditentukan

oleh framework.

Beberapa contoh fungsi-fungsi standar yang telah tersedia dalam suatu

framework adalah fungsi paging, enkripsi, email, SEO, session, security,

kalender, bahasa, manipulasi gambar, grafik, tabel bergaya zebra, validasi,

upload, captcha, proteksi terhadap XSS(XSSfiltering), template, kompresi,

XML dan lain-lain.

D. Ext-GWT

Menurut Grant (2010: 2) Ext-GWT atau sering disingkat GXT adalah

sebuah framework yang dapat mengkompilasikan bahasa pemograman JAVA

ke dalam JavaScript dan dikombinasikan dengan HTML serta CSS untuk

menghasilkan aplikasi web mandiri. GXT sendiri dikembangkan oleh sebuah

perusahaan ExtJS. GXT menambah variasi kelas seperti widget interaktif,

layout, kelas template, model data yang lengkapdan menyimpan cache.

 11

Di mulai sebagai proyek open source bernama MyGWT, kemudian

bergabung pengembang proyek ExtJS dan lebih memperluas library, serta

menulis ulang kembali framework asli. Sekarang yang paling baru diversi 2.4,

GXT menawarkan fitur yang dirancang untuk jalur cepat dalam

pengembangan RIA. Pembuatan web dengan GXT dilakukan menggunakan

bahasa pemrograman Java. Sementara GXT ini cocok untuk pengembangan

web, Anda tidak membutuhkan pengetahuan yang luas tentang HTML,

Cascading style sheet (CSS), atau JavaScript.

E. Perangkat Pemodelan dan Teknik Pengembangan Sistem

Ada beberapa macam perangkat pemodelan sistem yang bisa dipakai

untuk memodelkan sistem, akan tetapi tidak mutlak semua perangkat

pemodelan yang ada harus diterapkan dalam memodelkan sistem, artinya

boleh memakai sebagian perangkat pemodelan dari beberapa perangkat yang

ada. Berikut ini adalah perangkat-perangkat pemodelan sistem :

1. Unified Modeling Languange

Menurut Adi (2010: 6) UML atau Unified Modeling Languange

adalah bahasa pemodelan untuk sistem yang berparadigma berorientasi

objek. Selanjutnya menurut Jesse (2003: 16) UML juga dibuat

berdasarkan hasil pengembangan dan produktifitas object-oriented

sistem., dengan kata lain UML diciptakan untuk perancangan sistem

yang berorientasi objek. Pemodelan sesungguhnya dilakukan untuk

penyederhanaan permasalahan-permasalahan yang kompleks sehingga

lebih mudah dipelajari dan dipahami.. Untuk dapat memahami UML

 12

membutuhkan bentuk konsep dari sebuah bahasa model, dan

mempelajari tiga elemen utama dari UML seperti building block, aturan-

aturan yang menyatakan bagaimana building block diletakkan secara

bersamaan, dan beberapa mekanisme umum (common). Tiga macam

yang terdapat dalam building block adalah :

1 Things

Menurut Jesse (2003: 18) Hal yang sangat mendasar dalam model

UML, juga merupakan bagian paling statik dari sebuah model, serta

menjelaskan elemen-elemen lainnya dari sebuah konsep dan atau fisik.

Bentuk dari beberapa benda/thing adalah sebagai berikut:

a Classes, yang diuraikan sebagai sekelompok dari object yang

mempunyai atribute, operasi, hubungan yang semantik. Sebuah kelas

mengimplementasikan 1 atau lebih interfaces. Sebuah kelas dapat

digambarkan sebagai sebuah persegi panjang, yang mempunyai

sebuah nama, atribute, dan metoda pengoperasiannya.

b Interfaces, merupakan sebuah antar-muka yang menghubungkan dan

melayani antar kelas dan atau elemen. Interface atau antar-muka

mendefinisikan sebuah set atau kelompok dari spesifikasi

pengoperasian, umumnya digambarkan dengan sebuah lingkaran yang

disertai dengan namanya. Sebuah antar-muka berdiri sendiri dan

umumnya merupakan pelengkap dari kelas atau komponen.

c Collaboration, yang didefinisikan dengan interaksi dan sebuah

kumpulan atau kelompok dari kelas elemen-elemen yang bekerja

 13

secara bersama-sama. Collaborations mempunyai struktur dan

dimensi. Pemberian sebuah kelas memungkinkan berpartisipasi

didalam beberapa collaborations dan digambarkan dengan sebuah

elips dengan garis terpotong-potong.

d Use case, adalah rangkaian sekelompok yang saling terkait dan

membentuk sistem secara teratur yang dilakukan atau diawasi oleh

sebuah aktor. Use case digunakan untuk membentuk tingkah-laku

benda/ things dalam sebuah model serta di realisasikan oleh sebuah

collaboration. Umumnya Use case digambarkan dengan sebuah elips

dengan garis yang solid, biasanya mengandung nama.

2 Relationship

Ada 4 macam hubungan didalam penggunaan UML, yaitu;

a Dependency, adalah hubungan semantik antara dua things yang mana

sebuah benda berubah mengakibatkan benda satunya akan berubah

pula. Umumnya sebuah dependency digambarkan sebuah panah

dengan garis terputus-putus.

b Association, hubungan antar benda struktural yang terhubung diantara

obyek. Kesatuan obyek yang terhubung merupakan hubungan khusus,

yang menggambarkan sebuah hubungan struktural diantara seluruh

atau sebagian. Umumnya association digambarkan dengan sebuah

garis yang dilengkapi dengan sebuah label, nama, dan status

hubungannya.
 14

c Generalizations, adalah menggambarkan hubungan khusus dalam

obyek anak yang menggantikan obyekparent atau induk. Dalam hal

ini, obyek anak memberikan pengaruhnya dalam hal struktur dan

tingkah lakunya kepada obyek induk. Digambarkan dengan garis

panah.

d Realizations, merupakan hubungan semantik antara pengelompokkan

yang menjamin adanya ikatan diantaranya. Hubungan ini dapat

diwujudkan diantara interface dan kelas atau elements, serta antara

Use cases dan collaborations. Model dari sebuah hubungan

realization.

3 Diagram

Menurut Jesse (2003: 21) UML sendiri terdiri atas

pengelompokkan diagram-diagram sistem menurut aspek atau sudut

pandang tertentu. Diagram adalah yang menggambarkan permasalahan

maupun solusi dari permasalahan suatu model. UML mempunyai 9

diagram, yaitu; use-case, class, object, state, sequence, collaboration,

activity, component, dan deployment diagram.

a Use case Diagram, menggambarkan sekelompok Use cases dan aktor

yang disertai dengan hubungan diantaranya. Diagram Use cases ini

menjelaskan dan menerangkan kebutuhan atau requirement yang

diinginkan user, serta sangat berguna dalam menentukan struktur

organisasi dan model dari pada sebuah sistem.

 15

b Class Diagram, yang memperlihatkan struktur statis dari kelas actual

didalam sistem.
c Package Diagram, yang merupakan varian dari kelas diagram yang

memperlihatkan lebih detail banyaknya obyek yang mengintantiasi

(instances) kelas.
d Statechart Diagram, yang memperliatkan semua keadaan (state) yang

dapat dimiliki oleh kelas dan event yang dapat merubah keadaan

tersebut.
e Sequence Diagram, yang memperlihatkan kolaborasi dinamik antara

objek-objek dengan suatu urutan pesan (a sequence of message) antar

objek tersebut.
f Activity Diagram, yang memperlihatkan aliran urutan aktifitas.
g Component Diagram, yang memperlihatkan struktur fisik dari source

code dalam terminology code components. Komponen berisi informasi

tentang logical class dapat berupa komponen source code, komponen

biner atau komponen yang dapat dieksekusi.

h Deployment Diagram, yang memperlihatkan arsitektur fisik dari

hardware dan software pada sistem.

G. Database

Menurut Gavin (2006) Database adalah repositori untuk data.

Dengan kata lain, Anda dapat menyimpan banyak informasi dalam

database. Data adalah deskripsi tentang benda, kejadian, aktivitas dan

transaksi yang tidak mempunyai makna atau tidak berpengaruh secara

langsung kepada pemakai. Database ialah kumpulan yang terorganisasi dari

data-data yang secara nalar terkait. Database juga dapat diartikan sebagai
 16

suatu bentuk penyimpanan informasi yang terpusat agar data-data atau

informasi yang ada didalamnya mudah dicari, dikelola dan digunakan

kembali.

Berdasarkan definisi tersebut, ada 3 hal yang merupakan ciri-ciri dari

database, yakni menghimpun data yang terkait atau data yang berhubungan,

kumpulan data terorganisasi dan bisa melibatkan lebih dari satu organisasi.

Didalam Wikipedia (Database, 2009), Database Object-Relasional (ORD),

atau Object-Relational Database Management System (ORDBMS), adalah

sebuah Database Management System (DBMS) mirip dengan database

relasional, tetapi dengan berorientasi objek model database. Objek, kelas

dan pewarisan secara langsung didukung dalam skema database dan dalam

bahasa query. Selain itu, mendukung perluasan dari model data dengan

membuat tipe data dan method.

Database object-relasional dapat dikatakan untuk memberikan jalan

tengah antara database relasional dan objek berorientasi database

(OODBMS). Dalam objek-relasional database, pendekatan ini pada

dasarnya bahwa database relasional data berada dalam database dan

dimanipulasi kolektif dengan query dalam bahasa pemograman, pada

ekstrem yang lain adalah OODBMS dimana database pada dasarnya adalah

sebuah penyimpanan objek terus menerus untuk perangkat lunak ditulis

dalam bahasa pemrograman berorientasi objek , dengan pemrograman API

untuk menyimpan dan mengambil objek.

 17

Kesulitan utama dalam merancang database adalah bagaimana

merancang sehingga database dapat memuaskan keperluan saat ini dan masa

mendatang. Perancangan koseptual dapat dilakukan di samping perancangan

model fisik. Pada perancangan konseptual terdapat dua buah teknik yaitu:

1. Teknik Normalisasi

Proses normalisasi merupakan proses pengelompokan data elemen

menjadi tabel-tabel yang menunjukkan entity dan relasinya. Pada teknik

normalisasi ada beberapa konsep yang harus diketahui yaitu

ketergantungan fungsi dan file atau atribute kunci, setiap file terdapat

kunci dari file berupa satu field atau satu set field yang dapat mewakili

record. Ada beberapa atribute kunci antara lain :

a. Candidate key adalah satu atribute atau satu set minimal atribute

yang mengidentifikasikan secara unik suatu kejadian spesifik dari

entity. Jika satu kunci kandidat berisi lebih dari satu atribute, maka

biasanya disebut sebagai composite key (kunci campuran).

b. Primery Key adalah suatu atribute atau satu set minimal atribute yang

tidak hanya mengidentifikasi secara unik suatu kejadian spesifik,

tetapi juga dapat mewakili setiap kejadian dari setiap entity. Setiap

kunci kandidat punya peluang menjadi primery key, tetapi sebaiknya

dipilih satu saja yang dapat mewakili secara menyeluruh terhadap

entity yang ada.

 18

c. Alternate key adalah kunci kandidat yang tidak dipakai sebagai

primery key. Kerap kali kunci alternatif dipakai sebagai kunci

pengurutan.

d. Foreign key adalah suatu atribute yang melengkapi satu relationship

untuk menunjukkan ke induknya.

2. Teknik Entity Relationship

Relasi antara dua file atau dua tabel dikategorikan menjadi tiga

macam. Demikan pula untuk membantu gambaran relasi secara lengkap

terdapat juga tiga macam relasi dalam hubungan atribute dalam satu file.

a. Satu ke satu (one to one)

Setiap entitas pada himpunan entitas A berhubungan paling banyak

dengan satu entitas pada himpunan B dan begitu juga sebaliknya.

b. Satu ke banyak (one to many)

Setiap entitas pada entitas himpunan A dapat berhubungan dengan

banyak entitas pada himpunan entitas B, tetapi sebaliknya, dimana

pada setiap entitas pada himpunan B berhubungan paling banyak

dengan satu entitas pada himpunan A.

c. Banyak ke satu (many to one)

Setiap entitas pada himpunan A berhubungan dengan paling banyak

dengan satu entitas pada himpunan entitas B, tetapi sebaliknya,

dimana setiap entitas pada himpunan entitas B berhubungan dengan

paling banyak satu entitas A.

 19

d. Banyak ke banyak (many to many)

Yang berarti setiap entitas pada himpunan A dapat berhubungan

dengan banyak entitas pada himpunan entitas B dan begitu juga

sebaliknya.

H. Analisis dan Perancangan Sistem

Analisis dan perancangan sistem sangat dibutuhkan sebelum kita

membuat sebuah sistem. Metode pengumpulan data dari business user dapat

dilakukan melalui cara pengamatan langsung, wawancara pembuatan daftar

pertanyaan (questionnair) dan membaca dokumen perusahaan. Business user

merupakan personil yang menjalankan suatu bisnis.

Business process menggambarkan rangkaian tugas yang harus

diselesaikan menurut aturan-aturan tertentu untuk mendapatkan suatu hasil.

Analisa businnes process mencangkup proses pencatatan, bukti transaksi dan

dokument pencatatan, laporan dan metode pengkodean.

Business rules merupakan ketentuan/batasan yang dapat menjaga

integritas/keabsahan data, tidak merusak sistem yang ada atau merugikan

perusahaan/organisasi. Dalam implementasi businnes rules, komputer jauh

lebih teliti dibandingkan dengan manusia.

Analisa yang dilaksanakan dalam tahap business problems& solution

yaitu identifikasi masalah, identifikasi penyebab masalah dan penyelesaian

masalah. Masalah-masalah yang umum dihadapi organisasi/perusahaan antara

lain:

1. Keterlambatan dalam pengolahan/penyajian data.

 20

2. Informasi yang tidak mencerminkan keadaan sebenarnya.

Syarat untuk desain sistem yang baik (hardware maupun software)

ialah dapat mengatasi masalah yang terjadi saat ini dan juga dapat

mengantisipasi kejadian-kejadian pada masa yang akan datang, untuk itu

seorang sistem analisa harus mendapatkan informasi mengenai business

plans tentang rencana jangka pendek, jangka menengah dan jangka

panjangnya.

Perancangan adalah rekayasa yang memprensentasikan sesuatu yang

akan dibangun. Perancangan berhubungan dengan kebutuhan pengguna dan

juga penilaian terhadap sekumpulan defenisi kriteria untuk perancangan yang

bagus. Perancang sistem mencangkup analisa, desain, implementasi dan

pemeliharaan, terdiri dari:

1. Project Coordinator, merupakan orang yang bertanggung jawab agar suatu

tim dapat bekerja secara harmonis dan optimal serta mengontrol agar

pelaksanaan sesuai dengan rencana.

2. System analisyst dan design, ialah orang yang memberikan solusi dan

memdesain sistem baru.

3. Programmer, ialah orang yang membuat program berdasarkan rancangan

dari sistem analisis.

4. Network designer, bertanggung jawab terhadap desain suatu jaringan

seperti LAN, MAN dan WAN.

5. Technician (hardware), menetapkan konfigurasi-konfigurasi hardware

yang tepat agar dapat bekerja secara optimal.

 21

6. Database administrator, ialah orang yang bertanggung jawab terhadap

suatu sistem database, mencangkup pola struktur data, integritas data,

memberikan hak akses kepada user, backup, recovery dan

mengoptimalkan performa database.

7. Documenter, ialah orang yang membuat dokumentasi sistem, mencangkup

buku operasional aplikasi, teknis dan sistem.

8. Software tester, tugas dari software tester ialah menjamin bahwa program

aplikasi yang dibuat programmer telah sesuai dengan spesifikasi.

9. Graphic Designer, seorang yang memiliki keahlian dalam mendesain,

misalnya icon atau user interface.

I. Keamanan Sistem

Keamanan atau security merupakan salah satu keamanan yang dimiliki

oleh database. Dengan adanya kemampuan ini, maka seorang administrator

dapat melakukan penjagaan data secara otomatis yang di setting pada server.

Beberapa cara untuk melakukan pembatasan pengaksesan yang tidak

bertanggung jawab :

1. Memahami hak user biasa.

User biasa akan memiliki hak akses penuh untuk melakukan

pekerjaan yang berkaitan dengan perintah DDL (Data Definition

Language) dan DML (Data Manipulation Language).

2. Memahami hak administrator

 22

Administrator memiliki hak akses penuh untuk melakukan operasi

DDL, DML dan pengoperasian perintah-perintah DCL (Data Control

Language).

3. Memahami hak akses global

Hak akses global merupakan hak akses yang memiliki kemampan

untuk menggunakan perintah DDL, DML dan DCL tanpa ada batasan

tertentu terhadap database.

J. Development Tool dan ORDBMS

Sistem database secara umum dapat diartikan sebagai suatu sistem

dalam pengolahan data menjadi informasi.

1. PostgreSQL

PostgreSQL sering disebut juga Postgres, salah satu program yang

memiliki fasilitas penyimpanan dan pemanggilan struktur informasi pada

sistem komputer. Dalam Wikipedia (2008), PostgreSQL adalah

sebuah object-relational database manajemen sistem (ORDBMS). Hal

ini dirilis di bawah MIT-style license dan dengan demikian perangkat lunak

bebas dan open source. PostgreSQL berevolusi dari Ingres proyek di

University of California, Berkeley.

Pada tahun 1982, pemimpin proyek, Michael Stonebraker , kiri

Berkeley untuk membuat versi berpemilik dari Ingres. Ia kembali ke

Berkeley pada 1985 dan memulai sebuah proyek pasca-Ingres untuk

mengatasi masalah dengan sistem database kontemporer yang telah

menjadi semakin jelas pada awal 1980-an. Proyek baru, Postgres,

 23

bertujuan untuk menambahkan fitur paling sedikit dibutuhkan untuk benar-

benar mendukung jenis. Fitur-fitur ini termasuk kemampuan untuk

menentukan jenis dan untuk sepenuhnya menggambarkan hubungan

sesuatu yang digunakan secara luas sebelumnya, tetapi dikelola

sepenuhnya oleh pengguna.

Di Postgres, database bisa mengambil informasi dalam tabel terkait

dengan cara alami menggunakan aturan. Postgres digunakan banyak ide-

ide dari Ingres, tetapi tidak dikodekan.

Mulai tahun 1986, tim menerbitkan sejumlah makalah yang

menjelaskan dasar sistem, dan tahun 1988 memiliki versi prototipe. Tim

merilis versi 1 ke sejumlah kecil pengguna pada bulan Juni 1989, maka

versi 2 dengan sistem aturan ditulis ulang pada Juni 1990. Versi 3, dirilis

pada tahun 1991, sekali lagi menulis ulang sistem aturan, dan

menambahkan dukungan untuk beberapa manajer penyimpanan dan

perbaikan mesin query. Pada tahun 1993 jumlah besar pengguna mulai

membanjiri proyek dengan permintaan dukungan dan fitur. Setelah merilis

versi 4 terutama pembersihan proyek berakhir.

Tapi open-source pengembang dapat memperoleh salinan dan

mengembangkan sistem lebih lanjut, karena Berkeley telah merilis

Postgres dibawah lisensi MIT-style . Pada tahun 1994, Berkeley mahasiswa

pascasarjana Andrew Yu dan Jolly Chen menggantikan Ingres berbasis

QUEL bahasa query penerjemah dengan satu untuk SQL bahasa query,

menciptakan Postgres95, kode ini dirilis di web.

 24

Pada bulan Juli 1996, Marc Fournier di Hub.Org Networking

Services yang disediakan server non-universitas pembangunan pertama

untuk pengembangan usaha open source. Seiring dengan Bruce Momjian

dan Vadim B. Mikheev, bekerja mulai menstabilkan kode diwarisi dari

Berkeley. Versi open source pertama dirilis pada tanggal 1 Agustus 1996.

Pada tahun 1996, proyek ini berganti nama menjadi PostgreSQL

untuk mencerminkan dukungan untuk SQL. Rilis PostgreSQL versi 6.0

pertama kali dibentuk pada Januari 1997. Sejak itu, perangkat lunak telah

dipertahankan oleh sekelompok pengembang database dan sukarelawan di

seluruh dunia, koordinasi melalui internet .

Proyek PostgreSQL terus membuat rilis utama (sekitar per tahun)

dan minor "bugfix" rilis, semua tersedia di bawah lisensi yang sama. Kode

berasal dari kontribusi dari vendor proprietary, perusahaan dukungan, dan

open source programer pada umumnya.

2. Eclipse Helios

Menurut Wikipedia (2009) Eclipse Helios adalah suatu program

berbasis bahasa JAVA yang dioperasikan dalam lingkungan

Windows,Linux, Unix dimana JAVA merupakan suatu bahasa pemograman

yang berorientasi objek sehingga dalam pembuatan program menjadi lebih

mudah.

Untuk menunjang pembuatan aplikasi, Eclipse Helios menyediakan

banyak objek, baik objek visual maupun objek non visual. Setiap objek
 25

berisi data dan program. Kesatuan antara data dan program akan

memudahkan mencari kesalahan dan meminimalkan pengaruhnya kepada

objek lain. Sejak versi 3.0, Eclipse pada dasarnya merupakan sebuah

kernel, yang mengangkat plug-in. Apa yang dapat digunakan didalam

Eclipse sebenarnya adalah fungsi dari plug-in yang sudah diinstal. Ini

merupakan basis dari Eclipse yang dinamakan Rich Client Platform

(RCP). Berikut ini adalah komponen yang membentuk RCP:

a. Core platform

b. OSGi

c. SWT (Standard Widget Toolkit)

d. JFace

e. Eclipse Workbench

Secara standar Eclipse selalu dilengkapi dengan JDT (JAVA

Development Tools), plug-in yang membuat Eclipse kompatibel untuk

mengembangkan program JAVA, dan PDE (Plug-in Development

Environment) untuk mengembangkan plug-in baru. Eclipsebeserta plug-

in-nya diimplementasikan dalam bahasa pemrograman JAVA.

Konsep Eclipse adalah IDE yang terbuka (open), mudah diperluas

(extensible) untuk apa saja, dan tidak untuk sesuatu yang spesifik. Jadi,

Eclipse tidak saja untuk mengembangkan program JAVA, akan tetapi dapat

digunakan untuk berbagai macam keperluan, cukup dengan menginstal

plug-in yang dibutuhkan. Apabila ingin mengembangkan program C/C++

terdapat plug-in CDT (C/C++ Development Tools). Selain itu,

 26

pengembangan secara visual bukan hal yang tidak mungkin oleh Eclipse,

plug-in UML2 tersedia untuk membuat diagram UML. Dengan

menggunakan PDE setiap orang bisa membuat plug-in sesuai dengan

keinginannya.

K. Organisasi

SMAN 8 Padang adalah sekolah yang terdiri dari kepala sekolah,

wakil kurikulum, wakil kesiswaan,dan wakil sumber daya. Kurikulum

yang diterapkan di SMAN 8 Padang adalah Kurikulum Tingkat Satuan

Pendidikan ( KTSP ) yaitu kurikulum SMAN 8 Padang.

Struktur organisasi merupakan suatu kerangka yang menjadi

landasan bagi setiap usaha untuk mencapai tujuan yang ditetapkan.

Organisasi adalah suatu hubungan dengan mengadakan susunan atau

urutan yang cukup mengikat, hubungan yang cepat diantara faktor-faktor

produksi tersebut bekerja secara efisien, efektif guna terlaksananya tujuan.

Dari definisi tersebut dapat dilihat unsur-unsur dari organisasi:

terdapatnya sekelompok orang-orang, kerjasama atau pembagian kerja dan

mempunyai tujuan tertentu. Berikut struktur organisasi SMAN 8 Padang :

 27

Gambar 2.1. Organisasi SMAN 8 Padang

 28

BAB III

ANALISIS DAN PERANCANGAN SISTEM

A. Analisis Sistem

Tujuan utama analisis sistem adalah untuk menentukan hal-hal detail

tentang yang akan dikerjakan oleh sistem yang diusulkan. Didalam analisa

sistem diharapkan dapat mempelajari sistem informasi yang akan dirancang.

1. Analisis pengolahan dan pelaporan data administrasi.

Proses pengelolaan data administrasi di SMAN 8 Padang masih

menggunakan metode konvensional, seperti pengelolaan data siswa, data

guru, data mata diklat. Data yang didapat dikumpulkan dan dicatat di

dalam buku data guru, data siswa. Data tersebut kemudian diketik dan

disimpan dalam sebuah komputer dalam format excel. Untuk melaporkan

data yang ada kepada kepala sekolah, staf administrasiakan memberikan

kopian data tersebut kepada kepala sekolah.

2. Analisis Dokumen

Data-data mengenai seluruh kegiatan yang terjadi di SMAN 8

Padang disimpan dan diketik manual dibagian administrasi memakai

Microsoft excel, seperti data siswa baru, siswa lama, data guru, mata

diklat.

a. Data guru

Data guru merupakan informasi tentang identitas guru.

28
 29

b. Data siswa

Data siswa merupakan informasi tentang identitas siswa.

c. Data mata diklat

Data mata diklat merupakan informasi mengenai mata diklat yang

diajarkan di SMAN 8 Padang.

Untuk mengetahui lebih jelas bagaimana sistem pengolahan data

di SMAN 8 Padang dapat dilihat dari input, proses, dan output yang

dihasilkan oleh sistem tersebut.

a. Masukkan sistem (Input)

Masukan sistem input digunakan untuk melihat data, menambah

data, merubah data dan menghapus data. Berdasarkan isi dari data

tersebut, diperlukan data input diantaranya :

1) Data siswa, meliputi biodata data diri siswa dan data akademik

siswa seperti kelas dan semester.

2) Data guru, meliputi biodata diri guru dan data akademik guru

seperti program keahlian dari guru yang diperoleh dari

universitas.

3) Data mata diklat, meliputi mata diklat yang akan diajarkan oleh

guru yang bersangkutan sesuai dengan keahlian yang dimiliki

oleh guru.

b. Proses
 30

Pada hakekatnya semua hal yang dikerjakan merupakan proses.

Sistem pengolahan data meliputi beberapa proses yaitu:

1) Data Siswa

Bagian administrasi mengentri data siswa ke dalam

computer yang didapatkan ketika psb online. Dari proses

tersebut maka didapatkanlah data siswa.

2) Data Guru

Bagian administrasi mengentri data guru ke dalam

komputer yang didapatkan dari formulir yang dibagikan ke

guru yang berisi biodata guru dan program keahliannya. Dari

keahlian yang dimiliki oleh guru maka dapat diketahui mata

diklat apa yang akan diajarkan oleh guru tersebut.

3) Data Mata Diklat

Bagian administrasi mengumpulkan data mata diklat sesuai

kurikulum, kemudian mengentrikan datanya ke dalam excel.

4) Data Kelas

Setelah dikumpulkan data siswa, bagian administrasi

menyusun kelas-kelas dan membagi siswa secara manual.

c. Keluaran sistem (output)

Keluaran sistem output merupakan keluaran yang digunakan untuk

menampilkan informasi dari sistem informasi. Output yang

dihasilkan dari proses diatas adalah :

 31

1) Informasi siswa, dan

kelas siswa.

2) Informasi data guru dan

mata diklat.

3. Analisis Prosedur

Pada prosedur sistem pelaporan data siswa, data guru, mata diklat

yang sedang berjalan kegiatannya melibatkan guru, dan siswa. Prosedur

pendaftaran siswa baru diawali dengan pengambilan data siswa

berdasarkan PSB online yang telah di lakukan siswa. Prosedur pendataan

guru dimulai dengan guru mengisi formulir data dapat diketahui mata

diklat apa yang layak untuk diajarkan.

4. Analisis Masalah

Dengan menganalisis aliran prosedurnya, maka dapat dilihat bahwa

sistem pengumpulan dan pengolahan data yang dilakukan secara manual

akan memakan waktu yang lama melihat dari peningkatan jumlah siswa

setiap tahunnya dan juga dapat mengakibatkan kendala-kendala seperti :

1. Kesalahan penulisan nama siswa.

2. Kesalahan nama mata diklat yang akan dipelajari siswa.

3. Kesalahan nama guru yang akan mengajarkan siswa yang

bersangkutan.

4. Kesalahan nama siswa yang akan diajarkan oleh guru yang

bersangkutan.
 32

5. Analisis Sistem yang akan Dikembangkan

Sistem yang akan dikembangkan adalah sistem pengolahan data

siswa, data guru, data mata diklat dengan tujuan membantu siswa, guru,

bagian administrasi dalam pelayanan dan pengolahan data yang

diinginkan.

Pada sistem ini proses pendataan siswa, pendataan guru, mata diklat

tidak lagi dilakukan secara manual. Admin akan mendaftarkan secara

langsung menggunakan sistem.

a. Masukan (input)

Sistem informasi administrasi SMAN 8 Padang ini memerlukan

data input yang akan diolah sehingga dapat menghasilkan informasi

sesuai dengan kebutuhan pengguna sistem. Data-data input yang

diperlukan oleh sistem adalah sebagai berikut :

1) Data siswa, meliputi biodata diri siswa dan data akademik siswa

seperti bidang dan program keahlian dari siswa tersebut, kelas dan

semester.

2) Data guru, meliputi biodata diri guru dan data akademik guru

seperti jurusan dan program keahlian dari guru yang diperoleh dari

universitas.

3) Data mata diklat, meliputi mata diklat yang akan diajarkan oleh

guru yang bersangkutan sesuai dengan keahlian yang dimiliki oleh

guru.
 33

4) Data Kelas, data-data tersebut akan tersimpan dalam sistem yang

termanajemen dan terstruktur bentuk database. Data tersebut dapat

digunakan serta dimanipulasi tergantung pada informasi yang akan

ditampilkan sesuai kebutuhan pengguna informasi.

b. Keluaran

(output)

Informasi yang akan dihasilkan oleh sistem berdasarkan data

input yang telah dimasukkan adalah :

1) Informasi biodata siswa.

2) Informasi biodata guru

3) Informasi mata diklat.

Informasi tersebut di atas akan ditampilkan dalam browser

sesuai dengan kebutuhan pengguna sistem yang dapat diakses secara

langsung dimana saja.

c. Proses

Untuk menghasilkan output sistem berupa informasi seperti

yang telah disebutkan di atas proses yang akan dilakukan oleh sistem

adalah :

1) Pengolahan data-data yang berhubungan dengan siswa, guru, mata

diklat dan data kelas.

 34

2) Manipulasi data yang akan ditampilkan pada browser sesuai

dengan informasi yang diperlukan oleh pengguna.

B. Perancangan Sistem

Banyak bentuk perancangan sistem yang dapat digunakan dalam

perancangan sistem. Dalam hal ini tidak menjadi masalah model mana yang

akan digunakan, yang jelas mampu mempresentasikan visualisasi bentuk

sistem yang ingin digunakan oleh pemakai. Dalam hal ini Perancangan Sistem

Informasi Administrasi di SMAN 8 Padang menggunakan model diantaranya:

Event List, Unified Modelling Language).

1. Tujuan Perancangan Sistem

Perencanaan sistem dilakukan saat suatu kegiatan akan berjalan.

Perencanaan sistem mengidentifikasikan web application penting dan

strategis dalam organisasi. Tujuannnya untuk melihat kesempatan

memanfaatkan teknologi informasi dan membangun proyek sistem yang

mendukung tujuan bisnis.

Sebelum suatu web application dikembangkan, umumnya dimulai

dengan adanya suatu kebijakan dan perencanaan untuk mengembangkan

sistem itu. Tanpa adanya kebijakan pengembangan sistem oleh manajemen

puncak maka pengembangan sistem tidak akanmendapat dukungan dari

manajemen puncak.

2. Model-Model Perancangan Sistem

Permodelan pada sistem terdapat sejumlah cara yang

merepresentasikan sistem melalui diagram misalnya flowchart, HIPO

 35

(hierarchy input proses output), decision tables, dataflow diagram,

Unified Modelling Languange, system flowchart, state-transition diagram,

decision trees, entity relationship diagram, hamilton zeldin diagram, PAD

diagram, dan banyak model lainnya. Pemakai yang berbeda mungkin akan

membutuhkan permodelan yang berbeda pula, demikian juga dengan

sistem yang berbeda. Kebanyakan sistem yang dibuat pada masa ini

mempunyai fungsi spesifik kompleks, struktur data kompleks dan

ketergantungan pada waktu yang juga kompleks.

3. Unified Model Languange

a. Use case Diagram

 36

Gambar 3.1.Use case Diagram Web Base

Pada Use case diagram di atas terlihat ketiga aktor yang

berhubungan dengan sistem secara langsung dalam memproses data.

Masing-masing aktor mempunyai proses sendiri yang berada pada

sistem.

b. Class Diagram
 37

Gambar 3.2Class DiagramWeb Base

Di dalam class diagram di atas terdapat rincian mengenai

hubungan-hubungan class-class yang terdapat pada web application

SMAN 8 Padang. Pada class diagram juga terdapat atribut-atribut

penyusun class yang dapat dilihat di bagian bawah.

 38

c. Package Diagram

Gambar 3.3.Package DiagramWeb Base

Pada gambar Package Diagram di atas, pada webbase itu di

butuhkan keterampilan khusus JAVA, HTML, CSS, ORDBMS. Seluruhnya

memiliki ketergantungan. Pada package database, dibutuhkan suatu

manajemen data dan keterampilan membuat model, memiliki sifat bebas.

Lalu pada packageuser, di bangun secara remote team. Sedangkan

package search, dibutuhkan suatu kemampuan dengan teknologi search

engine dan bersifat subsistem local. Kemudian editing, terdiri dari dasar

panel editing untuk penerbitan pertama, N-Editing untuk release

berikutnya, dan y-editing untuk permintaan client.

 39

d. Component Digram

Gambar 3.4.Component DiagramWeb Base

Pada component diagram di atas, dijelaskan component-component

yang terlibat didalam sistem, yang saling berhubungan untuk mendukung

sebuah sistem. Hubungan component dengan class bahwa component

merupakan subsistem berisi class-class yang bekerja sama merealisasikan

antar muka yang diinstruksikan.

e. Deployment Diagram
 40

Gambar 3.5.Deployment DiagramWeb Base

Model diagram deployment di atas terlihat hubungan bagian-

bagian perangkat lunak pada sistem dengan elemen perangkat keras yang

akan mengeksrekusinya.

f. Statechart Diagram

Gambar 3.6.Statechart DiagramWeb Base

Diagram statechart di atas menggambarkan perilaku sistem

perangkat lunak serta perilaku class, subsistem dan seluruh aplikasi.

g. Activity Diagram
 41

Gambar 3.7.Activity DiagramWeb Base

Diagram activity di atas lebih memfokuskan pada eksekusi dan

alur sistem. Sistem yang digambarkan di beri awalan lambang start dimana

proses pertama di mulai. Kemudian di akhiri dengan lambang finish,

dimana proses sistem berakhir.

h. Sequence Diagram
 42

Gambar 3.8.Sequence DiagramWeb Base

Sequence diagram di atas menunjukan proses pengaktifan eksekusi

pada sistem sesuai dengan timming yang ada.

 43

BAB IV

PEMBAHASAN DAN HASIL ANALISIS

A. Hasil Rancangan Tampilan

Hasil rancangan tampilan merupakan rancangan antarmuka WebBase.

Tampilan rancangan inilah yang merealisasikan terjadinya interaksi antara

manusia dengan komputer. Hasil rancangan tampilan dapat dijelaskan di

dalam poin-poin berikut ini.

1 Halaman Login

Halaman Login merupakan halaman yang menggambarkan proses

masuk agar bisa mengakses halaman Menu Utama. Login dilengkapi

dengan sebuah panel window yang dapat di drag and drop, di atur

ukurannya sesuai keinginan user. Pada halaman login juga terdapa tiga

buah label dan dua buah textfield yang berfungsi sebagai tempat kita

memasukan username dan password. Kemudian juga terdapat satu buah

combo box untuk memilih tema WebBase. Gambaran halaman Login

adalah sebagai berikut.

Gambar 4.1. Halaman Login

42
 44

2 Halaman Menu Utama

Halaman Menu Utama merupakan halaman awal WebBase SMAN 8

Padang yang memiliki tiga jenis user, yaitu guru, siswa, dan admin.

Perbedaan halaman utama di antara user adalah ketersediaan tombol pada

panel tree yang ada di sebelah kanan halaman, jika user masuk sebagai

guru, maka sistem hanya akan memperbolehkan user mengakases tiga

buah tombol, sedangkan jika user masuk sebagai siswa, maka sistem akan

memperbolehkan dua tombol saja, dan jika user masuk sebagai admin,

maka sistem akan memunculkan delapan tombol akses. Gambaran

halaman Menu Utama dapat dilihat pada gambar berikut ini.

Gambar 4.2. Halaman Menu Utama

Tombol navigasi di halaman Menu Utama berfungsi masing-masing

tombol dijelaskan pada poin-poin berikut ini.

a Tombol Entry user, berfungsi sebagai memunculkan panel untuk

menambah user.
b Tombol Entry data guru, berfungsi sebagai memunculkan panel untuk

menambah data guru.

 45

c Tombol Entry data siswa, befungsi sebagai memunculkan panel untuk

menambah data siswa.

d Tombol Entry data kelas, berfungsi sebagai memunculkan panel untuk

menambah data kelas.

e Tombol Entry mata diklat, berfungsi sebagai meunculkan panel untuk

menambah mata diklat.

f Tombol data guru, berfungsi sebagai memunculkan panel untuk

melihat data guru.

g Tombol data mata diklat, berfungsi sebagai memunculkan panel untuk

melihat mata diklat.

h Tombol data kelas, berfungsi sebagai memunculkan panel untuk

melihat data kelas.

Tombol pada setiap panel terdiri dari sebagai berikut:
a Tombol refresh, berfungsi untuk mengambil data ke database untuk

memunculkan di grid panel.

b Tombol add, berfungsi untuk menambah data kedalam database.
c Tombol save, berfungsi untuk menyimpan data kedalam database.
d Tombol delete, berfungsi untuk menghapus data yang didalam

database.
e Pada panel data kelas terdapat dua buah combo box yang berfungsi

untuk memilih tahun ajar dan kelas.

Pada toolbar main menu terdapat satu buah combo box untuk memilih

tema pada aplikasi, kemudian juga terdapat satu buah button untuk Logout

dari sistem, lalu juga terdapat satu buah button untuk memunculkan panel

about. Setiap panel mempunyai fitur Sort Ascending dan Sort Descending

untuk menyusun record yang ada pada grid panel, kemudian juga terdapat

pengaturan jumlah kolom yang dimunculkan.

3 Panel User
 46

Panel User merupakan panel yang berisikan informasi untuk

menambahkan user pada sistem. Tampilan panel user adalah sebagai

berikut.

Gambar 4.3. Panel User

4 Panel Guru
Panel guru merupakan panel yang berfungsi untuk memunculkan dan

memproses data guru. Tampilan panel guru adalah sebagai berikut.

 47

Gambar 4.4. Panel Guru

5 Panel siswa

Panel siswa merupakan panel yang berfungsi untuk memunculkan dan

memproses data siswa. Tampilan panel siswa sebagai berikut.

Gambar 4.5. Panel Siswa

6 Panel kelas

Panel kelas merupakan panel yang berfungsi untuk memunculkan dan

memproses data kelas. Tampilan panel kelas adalah sebagai berikut.

 48

Gambar 4.6. Panel Kelas

7 Panel entry mata diklat

Panel mata diklat merupakan panel yang berfungsi memunculkan dan

memproses mata diklat. Tampilan panel entry mata diklat adalah sebagai

berikut.

Gambar 4.7. Panel Mata Diklat

 49

B. Hasil Rancangan Program

Hasil rancangan program dijelaskan melalui aplikasi eclipse helios,

postgreSQL dan tomcat server. Hasil ini dideskripsikan sesuai dengan file-file

pembangun webbase. Adapun hasil rancangan program tersebut adalah

sebagai berikut.
1 Rancangan Panel Login

Rancangan panel Login didesain dengan menggunakan aplikasi

eclipse helios. Panel login tersimpan di dalam file Sisfo.java. Hasil run

dari file Sisfo.java akan memunculkan gambaran sebagai berikut.

Gambar 4.8. Rancangan File sisfo.java

2 Rancangan Panel Menu Utama (Home)

Rancangan panel Menu Utama didesain dengan menggunakan aplikasi

eclipse helios. Panel home tersimpan di dalam file Sisfo.java, folder

menu tengah, banner, dan treemenucont. Gambaran hasil rancangan

tersebut dapat dilihat pada gambar berikut ini.

 50

Gambar 4.9. Rancangan Halaman Menu Utama

C. Hasil Rancangan Script

Perancangan webbase SMAN 8 PADANG menggunakan arsitektur model

view controller dalam menyusun gabungan cooding yang ada. Arsitektur

model view controller dapat dilihat sebagai berikut.

1 Model View Controller Main

Model View Controller Main terletak sebagai induk dalam mengontrol

setiap sistem yang ada pada webbase. Pada main MVC yang bertindak

sebagai model adalah database sekolah yang berada pada postgreSQL.

View mengacu pada file Sisfo.java dan controllernya terletak pada

maincontroller.java. Perhatikan gambar stuktur main MVC sebagai

berikut ini.
 51

Gambar 4.10. MVC Main

2 Model View Controller tree

Model View Controller tree terletak sebagai inheritance dari classmain

MVC yang berfungsi sebagai pengatur pada panel tree di dalam menu

utama pada sistem. Pada tree MVC yang bertindak sebagai model adalah

database sekolah yang berada pada postgreSQL. View mengacu pada file

treeview.java dan controllernya terletak pada treecontroller.java. Gambar

struktur tree MVC dapat dilihat sebagai berikut.

Gambar 4.11. MVC Tree

3 Model View Controller menu tengah

Model View Controller menu tengah terletak sebagai inheritance dari

class main MVC yang berfungsi sebagai pengatur pada panel menu
 52

tengah di dalam menu utama pada sistem. Pada menu tengah MVC yang

bertindak sebagai model adalah database sekolah yang berada pada

postgreSQL. View mengacu pada file menuview.java dan controllernya

terletak pada menucontroller.java. Perhatikan gambar stuktur menu

tengah MVC sebagai berikut ini.

Gambar 4.12. MVC Menu Tengah

4 Model View Controller Data Guru

Model View Controller data guru terletak sebagai inheritance dari

class menu tengah MVC yang berfungsi sebagai pengatur pada panel data

guru di dalam menu tengah pada sistem. Pada data guru MVC yang

bertindak sebagai model adalah database sekolah yang berada pada

postgreSQL. View mengacu pada file dataguruview.java dan

controllernya terletak pada datagurucontroller.java. Perhatikan gambar

stuktur data guru MVC sebagai berikut ini.

 53

Gambar 4.13. MVC DataGuru

5 Model View Controller Data Kelas

Model View Controller data kelas terletak sebagai inheritance dari

class menu tengah MVC yang berfungsi sebagai pengatur pada panel data

kelas di dalam menu utama pada sistem. Pada data kelas MVC yang

bertindak sebagai model adalah database sekolah yang berada pada

postgreSQL. View mengacu pada file datakelasview.java dan

controllernya terletak pada datakelascontroller.java. Perhatikan gambar

stuktur data kelas MVC sebagai berikut ini.

Gambar 4.14. MVC DataKelas

6 Model View Controller Data Mata Diklat

Model View Controller data kelas terletak sebagai inheritance dari

class menu tengah MVC yang berfungsi sebagai pengatur pada panel data

mata diklat di dalam menu utama pada sistem. Pada data mata diklat

MVC yang bertindak sebagai model adalah database sekolah yang berada

pada postgreSQL. View mengacu pada file datamataview.java dan

controllernya terletak pada datamatacontroller.java. Perhatikan gambar

stuktur data mata diklat MVC sebagai berikut ini.

 54

Gambar 4.15. MVC Data Mata Diklat

7 Model View Controller Data Siswa

Model View Controller data siswa terletak sebagai inheritance dari

class menu tengah MVC yang berfungsi sebagai pengatur pada panel data

siswa di dalam menu utama pada sistem. Pada data siswa MVC yang

bertindak sebagai model adalah database sekolah yang berada pada

postgreSQL. View mengacu pada file datasiswaview.java dan

controllernya terletak pada datasiswacontroller.java. Perhatikan gambar

stuktur data siswa MVC sebagai berikut ini.

Gambar 4.16. MVC DataSiswa

8 Model View Controller User

Model View Controller data siswa terletak sebagai inheritance dari

class menu tengah MVC yang berfungsi sebagai pengatur pada panel data

user di dalam menu utama pada sistem. Pada data user MVC yang

bertindak sebagai model adalah database sekolah yang berada pada

postgreSQL. View mengacu pada file user.java dan controllernya terletak

 55

pada usercontroller.java. Perhatikan gambar stuktur data siswa MVC

sebagai berikut ini.

Gambar 4.17. MVC User

D. Analisis Pengembangan Sistem

Pengembangan sistem yang ada haruslah sesuai dengan kebutuhan dan

dapat mempermudah kinerja user. Untuk mempermudah pekerjaan user, yang

harus di lihat adalah kebiasaan-kebiasaan yang di lakukan user ketika

berinteraksi dengan sistem. Berikut adalah pengembangan-pengembangan

yang di lakukan oleh perancang sistem, agar web application ini lebih

nyaman dengan user.

1. Pengembangan Teknologi Tree panel

Di dalam kebiasaan user yang sering menggunakan program

explorer pada sistem operasi windows dalam mencari informasi yang

terdapat di dalam komputer, sehingga perancang menganalisis agar pada

web application di pasang susunan tombol menyerupai tree pada

explorer, sehingga user tidak perlu beradaptasi dan membiasakan diri

lagi dengan tampilan sistem baru, karena sistem yang ada sekarang

kebanyakan memakai tombol-tombol panel yang banyak di sebuah form.

Berikut tampilan tree panel pada web application.

 56

Gambar 4.18. Tree Panel

2. Pengembangan Teknologi Tab Panel

Pada saat sekarang ini, sistem yang berbasis web pada umumnya

menggunakan tab pada fitur browser untuk memunculkan halaman baru

yang di butuhkan user dalam memproses informasi, hal ini menyebabkan

sistem me-load ulang satu halaman penuh web yang menyebabkan user

menunggu untuk tampilan penuh agar sistem dapat di gunakan kembali

dalam mengolah informasi. Perancang di dalam web application

memanfaatkan libraryext-gwt agar kelemahan sistem ini tidak terjadi

pada sistem yang di buat, sehingga user tidak perlu menunggu lama

untuk mengolah atau mendapatkan informasi yang di inginkan, maka dari

itu perancang membuatkan tab panel sendiri di dalam sistem, sehingga

sistem tidak perlu me-load satu halaman penuh sistem untuk membuka

halaman lain. Tab yang berada di dalam sistem juga di sesuaikan dengan

tab yang ada pada browser umumnya di gunakan sehingga user kembali

merasa nyaman karena bekerja seolah-olah di browser pribadi sendiri.

Pada teknologi ini, sistem memangkas kebutuhan bandwidth oleh sistem

 57

karena di saat memproses, sistem tidak perlu me-load satu halaman yang

di minta ke server. Berikut adalah gambar tab panel yang terdapat pada

sistem.

Gambar 4.19. Tab Panel

3. Pengembangan Teknologi Grid Panel

Kebiasaan user dalam pengolahan data menggunakan tampilan

program spreadsheet pada aplikasi desktop seperti ms excel, menuntut

perancang dapat membuat tampilan pengolah data juga menggunakan

spreadsheet di dalam web application. Pada sistem informasi berbasis

web sekarang ini kebanyakan menggukan satu buah form yang membuat

user hanya dapat memasukan dan memproses record satu demi satu,

apabila user akan memproses ratusan record, maka user akan kelelahan

dalam memproses data menjadi informasi. Kemudian kebiasaan user

dalam memproses data menggunakan shortcut control pada keyboard

yang dapat memilih data sesuai keinginan tidak dapat di lakukan jika

sistem hanya menyediakan satu buah form. Maka dari itu perancang

membuatkan tampilan web application dalam mengolah data berupa

spreadsheet yang mengadopsi seperti tampilan aplikasi desktop, sehingga

user juga bisa menggunakan tombol shortcut control pada keyboard

 58

dalam memilih data. Berikut tampilan spreadsheet atau pada sistem di

kenal dengan nama grid panel.

Gambar.4.20. Grid Panel

4. Pengembangan Teknologi Rezizeble dan Closeable

Untuk memberikan kemudahan kepada user, serta

memperhitungkan kebiasaan user, maka perancang mengadopsi fitur

tampilan aplikasi desktop yang dapat di atur ukuran panelnya dengan

drag and drop border yang ada pada sisi panel. Kemudian aplikasi juga

di sertai tombol close panel yang memungkinkan user menyingkirkan

panel-panel yang tidak penting untuk mengolah data. Berikut tampilan

panel-panel pada sistem.

Gambar 4.21. Panel aplikasi

E. Analisis Permintaan Hardware dan Software

Permintaan hardware dan software dimaksudkan untuk menentukan

spesifikasi komputer yang digunakan untuk menjalankan Web application

 59

SMAN 8 PADANG. Jenis permintaan ini ditandai dengan permintaan

hardware (perangkat keras) dan permintaan software (perangkat lunak).

Perhatikan penjelasan berikut ini:

1 Permintaan Hardware

Penggunaan webbase terkait dengan perangkat keras yang akan

digunakan. Oleh karena itu, ditentukan spesifikasi perangkat yang

digunakan dalam menjalankan web application. Spesifikasi tersebut dapat

dilihat pada daftar berikut ini.

a Minimum

1 Prosesor minimum Intel Pentium III, clock 800 GHz atau setara

AMD Sempron.

2 Memori minimum 128 MB.

3 VGA Card memori minimum 64 MB.

b Rekomendasi

1 Prosesor Intel Pentium IV clock 3.00 GHz dan yang setara untuk

AMD atau lebih.

2 Memori 512 MB atau lebih.

3 Monitor dengan Resolusi 1024 768 LCD/CRT.

4 VGA Card memori 128 MB atau lebih.

2 Permintaan Software

Webbase SMAN 8 PADANG akan berjalan dengan baik jika

memperhatikan spesifikasi Sofware seperti berikut ini.

a Sistem Operasi Windows, Linux, Mac, Unix.

 60

b Menggunakan browser tebaru.

c Jaringan penghubung ke server (internet atau intranet)

F. Analisis Uji Kelayakan

Pada analisis uji kinerja, digambarkan script-script yang berjalan pada

sistem sehingga dapat di lihat ketangguhan dari sistem yang dibuat. Uji ini

menggunakan add-ons Mozilla firefox firebug dan hackBar.

1. Uji Kinerja

Gambar 4.22 Data awal pemanggilan sistem

Pada gambar 4.22 terlihat ketika sistem dijalankan, sistem memanggil

library-library ext-GWT sesuai dengan apa yang di inginkan pembuat. Pada

gambar terlihat waktu yang dibutuhkan adalah 279 mili detik untuk

mengambil data awal, dimana jumlah file yang diambil hanya 2KB.
 61

Gambar 4.23 Data menu utama

Pada gambar 4.23 di jelaskan bahwa terdapat tiga buah proses yang di

jalankan, dimana proses keamanan selalu hidup dan hanya membutuhkan

waktu 1,36 detik dalam sebuah proses.

Gambar 4.24 Data sistem

Kemudian gambar 4.24 menggambarkan ketika sistem mengambil

data ke store procedure, sistem membutuhkan waktu 6 detik dalam sebuah

proses pengambilan datanya.

2. Uji Keamanan

Gambar 4.25 Kinerja Function Security

 62

Pada gambar 4.25 menjelaskan proses-proses yang terjadi didalam

sistem kebanyakan dalam mode waiting, ini berfungsi untuk menghemat

bandwidth, sedangkan yang aktif selalu hanya proses security.

Gambar 4.26 Security connection always on

Pada gambar 4.26 terlihat proses security yang selalu hidup dan

terjadi proses enkapsulasi dan enkripsi oleh module program.

Gambar 4.27 Proses penetration dengan hackBar

Ketika dicoba login, lalu dilakukan proses penetrasi dan SQL injection

pada sistem yang sedang online, saat program hackBar dijalankan sistem
 63

langsung menangkis serangan dengan memunculkan halaman login, terlihat

seperti gambar dibawah ini.

Gambar 4.28 Execute hackBar

Terlihat pada gambar diatas, setelah program hackbar dijalankan

system keamanan langsung mengubah tampilan ke awal, yang menandakan

keamanannya berjalan dengan baik. Berdasarkan pengamatan penulis,

ketangguhan sistem yang dibuat sudah memenuhi keinginan dari pembuat dan

semua berjalan dengan lancar.

 64

BAB V

KESIMPULAN DAN SARAN

A. Kesimpulan
Kesimpulan yang diambil setelah melakukan perancangan dan

pembuatan Webbase ini dijelaskan di dalam poin-poin berikut ini.

1. Arsitektur Model View Controller dapat membantu perancangan sistem

web application yang terstruktur sesuai kebutuhan proses yang di

lakukan sistem.
2. Teknologi EXT-GWT dapat membuat sistem lebih friendly dengan user

di karenakan library-library yang tersediadapat menjadikan sistem

sangat mudah di gunakan sesuai kebutuhan yang di inginkan.

3. Webbase dapat menjadi awal sistem informasi yang dapat di gunakan

dimana saja dan ramah dengan kebutuhan jaringan, ini di karenakan

proses asyncron yang di lakukan, sehingga sistem tidak memerlukan

proses terus menerus memakan bandwdith dengan keperluan yang

tidak di perlukan.
B. Saran
Adapun saran-saran yang diberikan setelah melakukan perancangan dan

pembuatan Web application ini adalah sebagai berikut.

1. Proses perancangan dan pembuatan Web application haruslah

mempunyai arsitektur yang jelas, sehingga sistem lebih terstruktur dan

mudah di sesuaikan apabila sewaktu waktu ada perubahan kebutuhan

pada sistem.
2. Bagi para perancang dan pembuat perangkat lunak sistem informasi,

diharapkan melakukan perancangan yang terencana dan terstrukur,

sehingga dapat membuat tampilan sistem lebih user friendly.

63
 65

3. Sistem yang akan di buat di harapkan selalu menggunakan teknologi baru

dan pengembangan kreativitas dalam pembuatan sehingga user lebih

mengenal pengembangan sistem informasi yang telah ada.