BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF...

30
6 BAB 2 LANDASAN TEORI 2.1 Teori Umum Teori umum yang menjadi pedoman dalam penulisan skripsi ini antara lain konsep aplikasi tentang tata cara perancangan interface dalam Interaksi Manusia dan Komputer, konsep web tentang HTML dan Internet, dan Rekayasa Perangkat Lunak (RPL). 2.1.1 Aplikasi Web Dalam rekayasa perangkat lunak, suatu aplikasi web adalah suatu aplikasi yang diakses menggunakan web browser melalui suatu jaringan seperti Internet atau intranet. Ia juga merupakan suatu aplikasi perangkat lunak komputer yang dikodekan dalam bahasa yang didukung web browser (seperti HTML, JavaScript, AJAX, Java, dll) dan bergantung pada browser tersebut untuk menampilkan aplikasi. Aplikasi web menjadi populer karena kemudahan tersedianya aplikasi klien untuk mengaksesnya, web browser, yang kadang disebut sebagai suatu th in clien t (klien tipis). Kemampuan untuk memperbarui dan memelihara aplikasi web tanpa harus mendistribusikan dan menginstalasi perangkat lunak pada kemungkinan ribuan komputer klien merupakan alasan kunci popularitasnya. Aplikasi web yang umum misalnya webmail , online retail sales, online auctions, wikis, multiplayer online role-playing games dan masih banyak lagi.

Transcript of BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF...

Page 1: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

6

BAB 2

LANDASAN TEORI

2.1 Teori Umum

Teori umum yang menjadi pedoman dalam penulisan skripsi ini antara lain

konsep aplikasi tentang tata cara perancangan interface dalam Interaksi Manusia dan

Komputer, konsep web tentang HTML dan Internet, dan Rekayasa Perangkat Lunak

(RPL).

2.1.1 Aplikasi Web

Dalam rekayasa perangkat lunak, suatu aplikasi web adalah suatu aplikasi

yang diakses menggunakan web browser melalui suatu jaringan seperti Internet

atau intranet. Ia juga merupakan suatu aplikasi perangkat lunak komputer yang

dikodekan dalam bahasa yang didukung web browser (seperti HTML,

JavaScript, AJAX, Java, dll) dan bergantung pada browser tersebut untuk

menampilkan aplikasi.

Aplikasi web menjadi populer karena kemudahan tersedianya aplikasi

klien untuk mengaksesnya, web browser, yang kadang disebut sebagai suatu thin

client (klien tipis). Kemampuan untuk memperbarui dan memelihara aplikasi

web tanpa harus mendistribusikan dan menginstalasi perangkat lunak pada

kemungkinan ribuan komputer klien merupakan alasan kunci popularitasnya.

Aplikasi web yang umum misalnya webmail, online retail sales, online auctions,

wikis, multiplayer online role-playing games dan masih banyak lagi.

Page 2: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

7

2.1.2 Interaksi Manusia dan Komputer

Dalam Interaksi Manusia dan Komputer terdapat beberapa aturan

mengenai perancangan user interface agar user friendly yang termuat dalam

Eight Golden Rules of User Interface. Setelah aplikasi selesai dibuat

menggunakan aturan tersebut maka harus dievaluasi agar mengetahui apakah

hasil yang didapatkan sudah maksimal atau belum. Untuk mengevaluasiya maka

digunakan lima faktor manusia terukur yang akan dijelaskan lebih lanjut.

2.1.2.1 Pengertian Interaksi Manusia dan Komputer

Interaksi Manusia dan Komputer (IMK) atau Human-Computer

Interaction (HCI) adalah disiplin ilmu yang berhubungan dengan

perancangan, evaluasi, dan implementasi sistem komputer interaktif

untuk digunakan oleh manusia, serta studi fenomena-fenomena besar

yang berhubungan dengannya.

2.1.2.2 Eight Golden Rules of User Interface

Sebuah sistem interaktif yang baik akan dihasilkan dari

penggunaan aturan yang baik pula yang menghasilkan kemudahan bagi

penggunanya karena interface-nya yang user friendly, sebaliknya apabila

aturan perancangan yang digunakan buruk maka hasil yang didapatkan

akan buruk pula.

Untuk mendapatkan interface yang user friendly, maka dapat

menggunakan metode yang terdapat dalam Delapan Aturan Emas (Eight

Page 3: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

8

Golden Rules) yang didefinisikan oleh Shneiderman (1998, p74-75),

yang isinya sebagai berikut:

1. Berusaha untuk selalu konsisten.

Maksudnya adalah penggunaan jenis huruf, warna, simbol,

bentuk tombol pada setiap halaman harus sama apabila masih

di dalam program yang sama.

2. Memperbolehkan frequent users menggunakan shortcut.

Maksudnya adalah membuat suatu tombol untuk navigasi ke

bagian yang dituju secara langsung tanpa harus melewati

bagian-bagian sebelumnya.

3. Memberikan umpan balik yang informatif.

Dengan adanya umpan balik yang diberikan oleh sistem kepada

penggunanya secara jelas, maka pengguna tidak akan

kebingungan dalam menggunakan aplikasi.

4. Merancang dialog untuk memberikan penutupan, sehingga

pengguna tahu awal dan akhir dari suatu aksi.

5. Memberikan pencegahan kesalahan dan penanganan

kesalahan yang sederhana.

Jika terjadi kesalahan yang dilakukan oleh pengguna baik

secara sengaja ataupun tidak sengaja, maka sistem harus dapat

mendeteksi kesalahan tersebut dan memberikan solusi untuk

memperbaiki kesalahan tersebut.

6. Memperbolehkan pembalikan aksi secara mudah.

Page 4: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

9

Apabila pengguna melakukan kesalahan maka sistem harus

dapat memberikan jalan agar keadaan dapat dikembalikan pada

aksi sebelum kesalahan terjadi. Dengan adanya fitur seperti ini,

maka kegelisahan dan rasa takut membuat kesalahan pada

pengguna dapat diatasi.

7. Mendukung pusat kendali internal.

Rancangan ini memberikan kesan seakan pengguna mempunyai

kekuasaan penuh atas sistem. Pengguna akan merasa lebih

nyaman apabila mereka memiliki kuasa penuh atas sistem yang

mereka gunakan dan adanya tanggapan dari sistem atas aksi

yang mereka lakukan.

8. Mengurangi beban ingatan jangka pendek.

Mengingat terbatasnya kemampuan manusia untuk mengingat,

maka hendaknya tampilan pada sistem dibuat agar mudah

diingat dan sederhana, sehingga apabila pengguna

menggunakan sistem berulang kali tentunya waktu yang

dipakai akan lebih singkat.

2.1.2.3 Lima Faktor Manusia Terukur

Setelah aplikasi selesai dibuat dan dipublikasikan, tentunya

diadakan evaluasi untuk mengetahui apakah hasil yang didapatkan sudah

maksimal atau belum, apabila dirasa masih kurang maka dapat direvisi

kembali. Menurut Sheiderman (1998, p15) digunakan lima faktor

manusia terukur untuk mengevaluasinya, yaitu:

Page 5: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

10

1. Waktu belajar: berapa lama seseorang biasa mempelajari instruksi

relevan untuk melakukan suatu tugas?

2. Kecepatan kinerja: berapa lama suatu tugas diselesaikan?

3. Tingkat kesalahan: berapa banyak kesalahan dan kesalahan-kesalahan

apa saja yang dilakukan oleh pengguna?

4. Daya ingat: bagaimana pengguna mempertahankan kemampuan

pengetahuannya setelah jangka waktu tertentu?

5. Kepuasan subjektif: bagaimana kesukaan pengguna terhadap berbagai

aspek dari sistem?

2.1.3 Database

Dalam skripsi ini digunakan sedikit basis data untuk menampung data-

data user, buku-buku, kritik dan saran.

2.1.3.1 Pengertian Database (Ramakhrisnan, 2003, p4)

Database adalah kumpulan data, yang khususnya

menggambarkan aktivitas dari satu atau beberapa organisasi yang

berhubungan.

2.1.3.2 Pengertian DBMS (Database Management System)

DBMS adalah software yang didesain untuk membantu dalam

mengontrol dan memanfaatkan kumpulan data dalam jumlah besar

(Rmakhrisnan, 2003, p4).

Page 6: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

11

2.1.3.3 Arsitektur Sistem Database

Menurut DBTG (Data Base Task Group) tahun 1971 (Connoly,

2002, p34), Sistem Database dibagi dalam 3 tingkatan arsitektur, yaitu:

1. Tingkat external (pandangan user mengenai database)

Tingkat ini menunjukkan bagian database yang berhubungan dengan

setiap user.

2. Tingkat konseptual (pandangan kelompok mengenai database)

Tingkat ini menggambarkan data apa yang tersimpan dalam database

dan relasi antar data di dalamnya.

3. Tingkat internal (bentuk representasi database secara fisik pada

komputer)

Tingkat ini menggambarkan bagaimana proses penyimpanan data ke

dalam database.

2.1.4 HTML

HyperText Markup Language atau yang lebih dikenal dengan HTML

adalah markup language yang paling banyak digunakan. HTML berfungsi untuk

mendeskripsikan struktur informasi berbasis teks dalam sebuah dokumen dan

memperjelasnya dengan menambahkan form interaktif, image, dan objek

lainnya. HTML ditulis dalam bentuk tag, dibatasi oleh kurung sudut. HTML juga

bisa ditambahkan dengan beberapa scripting language (seperti JavaScript) yang

dapat mempengaruhi behavior dari browser dan prosesor HTML lainnya.

Page 7: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

12

2.1.5 Top Ten Mistakes of Web Design (Jakob Nielsen, 1996)

Menurut Jakob Nielsen ada beberapa kesalahan yang sering terjadi saat

mendesain web atau yang lebih dikenal dengan istilah top ten mistakes of web

design, yaitu:

a. Penggunaan frame.

b. Penggunaan teknologi baru dengan serampangan.

c. Gerakan teks dan animasi yang berjalan terus.

d. URL yang kompleks.

e. Halaman yatim.

f. Halaman yang terlalu panjang gulungannya. Isi terpenting dan navigasi harus

tampak di bagian atas.

g. Kurangnya dukungan navigasi.

h. Warna link yang tidak standar.

i. Informasi yang basi.

j. Waktu download yang terlalu lama. Pemakai kehilangan minat dalam 10-15

detik.

2.1.6 World Wide Web (WWW)

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang

informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh

pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering

dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia

hanyalah bagian daripadanya.

Page 8: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

13

Hiperteks dilihat dengan sebuah program bernama web browser yang

mengambil informasi (disebut "dokumen" atau "halaman web") dari server web

dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti

pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim

informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut

"surfing" atau "berselancar" dalam bahasa Indonesia. Halaman web biasanya

diatur dalam koleksi material yang berkaitan yang disebut "situs web".

2.1.7 Internet

Secara harfiah, internet (singkatan dari “interconnected-networking”)

ialah rangkaian komputer yang terhubung di dalam beberapa rangkaian.

Manakala Internet (huruf 'I' besar) ialah sistem komputer umum, yang berhubung

secara global dan menggunakan TCP/IP sebagai protokol pertukaran paket

(packet switching communication protocol). Rangkaian internet yang terbesar

dinamakan Internet. Cara menghubungkan rangkaian dengan kaedah ini

dinamakan internetworking.

2.1.7.1 Kemunculan Internet

Rangkaian pusat yang membentuk Internet diawali pada tahun

1969 sebagai ARPANET, yang dibangun oleh ARPA (United States

Department of Defense Advanced Research Projects Agency). Beberapa

penyelidikan awal yang disumbang oleh ARPANET termasuk kaedah

rangkaian tanpa-pusat (decentralised network), teori queueing, dan

kaedah pertukaran paket (packet switching).

Page 9: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

14

Pada 1 Januari 1983, ARPANET menukar protokol rangkaian

pusatnya, dari NCP ke TCP/IP. Ini merupakan awal dari Internet yang

kita kenal hari ini.

Pada sekitar 1990-an, Internet telah berkembang dan

menyambungkan kebanyakan pengguna jaringan-jaringan komputer yang

ada.

2.1.7.2 Budaya Internet

Jumlah pengguna Internet yang besar dan semakin berkembang,

telah mewujudkan budaya internet. Internet juga mempunyai pengaruh

yang besar atas ilmu, dan pandangan dunia. Dengan hanya berpandukan

mesin pencari seperti Google, pengguna di seluruh dunia mempunyai

akses internet yang mudah atas bermacam-macam informasi. Dibanding

dengan buku dan perpustakaan, Internet melambangkan penyebaran

(decentralization) / pengetahuan (knowledge) informasi dan data secara

ekstrim.

Perkembangan Internet juga telah mempengaruhi perkembangan

ekonomi. Berbagai transaksi jual beli yang sebelumnya hanya bisa

dilakukan dengan cara tatap muka (dan sebagian sangat kecil melalui pos

atau telepon), kini sangat mudah dan sering dilakukan melalui Internet.

Transaksi melalui Internet ini dikenal dengan nama e-commerce.

Terkait dengan pemerintahan, Internet juga memicu tumbuhnya

transparansi pelaksanaan pemerintahan melalui e-government.

Page 10: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

15

2.1.8 Rekayasa Perangkat Lunak

Rekayasa Perangkat Lunak adalah ilmu yang menggabungkan proses,

metode, dan alat untuk pengembangan perangkat lunak komputer (Pressman,

2001, p47).

Dalam penelitian ini penulis menggunakan paradigma Linear Sequential

atau yang dikenal dengan Waterfall Model atau Classic Life Cycle sebagai

metode perancangan.

2.1.8.1 Pengertian Perangkat Lunak

Dalam buku Pressman (2001, p6), perangkat lunak adalah:

1. Perintah (program komputer) yang ketika dieksekusi akan

menyediakan fungsi dan bekerja seperti yang diharapkan.

2. Struktur data yang memungkinkan program untuk memanipulasi

informasi dengan cukup, dan

3. Dokumen yang menggambarkan operasi dan fungsi dari program-

program.

2.1.8.1.1 Karakteristik Perangkat Lunak

Menurut Pressman (2001, p6), perangkat lunak

memiliki karakteristik yang berbeda dibandingkan perangkat

keras, antara lain:

1. Perangkat lunak dibangun atau dikembangkan, tidak dibuat

dalam arti klasik.

Page 11: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

16

Maksudnya dalam proses pembuatannya, perangkat lunak

lebih mudah memperbaiki masalah kualitas dibandingkan

perangkat keras.

2. Perangkat lunak tidak akan rusak

Perangkat lunak tidak rentan terhadap pengaruh lingkungan

yang menyebabkan perangkat keras rusak.

3. Perangkat lunak umumnya dibuat secara custom – built

2.1.8.2 Pengertian Rekayasa Perangkat Lunak

Menurut Fritz Brauer dalam buku Rekayasa Perangkat Lunak

(2001, p20), Rekayasa Perangkat Lunak adalah penetapan dan

penggunaan prinsip-prinsip pengembangan suara untuk memperoleh

perangkat lunak ekonomis yang reliable dan bekerja efektif pada mesin.

Menurut IEEE, rekayasa perangkat lunak adalah (Pressman, 2001,

p20):

1. Aplikasi sebuah pendekatan perkembangan yang dapat diukur,

sistematis, disiplin, operasi, dan perawatan perangkat lunak, yaitu

aplikasi rekayasa perangkat lunak.

2. Pengetahuan mengenai pendekatan seperti pada (1).

Page 12: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

17

2.1.8.3 Paradigma Perangkat Lunak Waterfall Model

Waterfall model adalah model pengembangan software secara

bertahap (proses untuk membuat sebuah perangkat lunak) yang tahap

pengembangannya terlihat seperti mengalir terus ke bawah (seperti air

terjun) melalui beberapa tahap yaitu requirements analysis, design,

implementation, testing (validasi), integration, dan maintenance. Asal

mula istilah “waterfall” banyak dikutip untuk dijadikan artikel pada tahun

1970 oleh Winston W. Royce (1929-1995), walaupun Royce tidak

menggunakan istilah “waterfall” dalam artikel ini. Ironisnya, Royce

mengatakan bahwa model ini adalah contoh model yang salah.

Berikut tahapan dari waterfall model:

Gambar 2.1 Waterfall Model

Analysis

Design

System Engineering

Coding

Testing

Maintenance

Page 13: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

18

• System Engineering

Pada tahap ini berfokus pada analisa sistem secara keseluruhan dalam

hubungannya antara perangkat lunak dengan perangkat keras dan user

dengan database yang diperlukan.

• Analysis

Tahap ini berfokus pada perancangan perangkat lunak yang akan

dibuat dengan mengumpulkan informasi yang diperlukan dan

memahami fungsi-fungsi yang diinginkan sesuai dengan kesepakatan

pada tahap sebelumnya.

• Design

Pada tahap ini akan dilakukan perancangan penggambaran modul dari

perangkat lunak secara rinci dan dilakukan pengkajian kualitas. Tahap

ini menitikberatkan pada struktur data, arsitektur dan prosedur.

• Coding

Pada tahap ini dilakukan langkah-langkah pengkodean dengan

mengubah desain yang telah dirancang sebelumnya ke dalam bentuk

yang dapat dibaca oleh mesin.

• Testing

Pada tahap ini dilakukan pengujian terhadap semua fungsi yang telah

dibuat pada perangkat lunak. Pengujian ini dilakukan untuk

menemukan kemungkinan adanya kesalahan serta memastikan output

yang dihasilkan sesuai dengan permintaan.

Page 14: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

19

• Maintenance

Suatu perangkat lunak yang baik harus mampu menyesuaikan

terhadap adanya perubahan yang mungkin terjadi di masa yang akan

datang, baik peningkatan kebutuhan user ataupun pengembangan dari

lingkungan di luar sistem perangkat lunak tersebut sehingga tidak

perlu dibuat program baru hanya untuk memenuhi kebutuhan-

kebutuhan tersebut, yang mungkin akan berkembang menjadi lebih

kompleks.

2.1.9 Perancangan Layar

Perancangan layar dimaksudkan untuk memudahkan pemakai dalam

menggunakan aplikasi. Setiap halaman web dirancang menggunakan format

yang tetap sehingga pemakai dapat dengan cepat mengidentifikasikan informasi

dan mengatur navigasi dengan perintah-perintah yang konsisten.

2.2 Teori Khusus

Teori khusus yang menjadi pedoman penulisan skripsi ini antara lain PHP,

AJAX, Web 2.0, Client-Server, MySQL, dan Unified Modeling Language (UML).

2.2.1 PHP

PHP adalah bahasa pemrograman script yang paling banyak dipakai saat

ini yang dikhususkan untuk mendukung pengembangan web dan dapat

digabungkan dengan HTML.

Page 15: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

20

Contoh terkenal dari aplikasi PHP adalah phpBB dan MediaWiki

(software di belakang wikipedia). PHP juga dapat dilihat sebagai pilihan lain dari

ASP.NET/C#/VB.NET Microsoft, ColdFusion Macromedia, JSP/Java Sun

Microsystems, dan CGI/Perl. Contoh aplikasi lain yang lebih kompleks berupa

CMS yang dibangun menggunakan PHP adalah Mambo, Joomla!, Postnuke,

Xaraya, dan lain-lain.

Kelebihan PHP dari bahasa pemrograman lain:

• Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaannya.

• Web Server yang mendukung PHP dapat ditemukan dimana - mana dari

mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi yang relatif

mudah.

• Dalam sisi pengembangan lebih mudah, karena banyaknya milis-milis dan

developer yang siap membantu dalam pengembangan.

• Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah

karena memiliki referensi yang banyak.

• PHP adalah bahasa open source yang dapat digunakan di berbagai mesin

(Linux, Unix, Macintosh, Windows) dan dapat dijalankan secara runtime

melalui console serta juga dapat menjalankan perintah-perintah sistem.

2.2.2 AJAX

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah

suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web

Page 16: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

21

interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada

komputer web surfer, melakukan pertukaran data dengan server di belakang

layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap

kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan

interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:

• DOM yang diakses dengan client side scripting language, seperti VBScript

dan implementasi ECMAScript seperti JavaScript dan JScript, untuk

menampilkan secara dinamis dan berinteraksi dengan informasi yang

ditampilkan.

• Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di

implementasikan pada beberapa browser. Objek ini berguna sebagai

kendaraan pertukaran data asinkronus dengan web server. Pada beberapa

framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP

atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.

• XML umumnya digunakan sebagai dokumen transfer, walaupun format lain

juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam

pemakaian teknik AJaX karena kemudahan akses penanganannya dengan

memakai DOM.

• JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat

JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah.

Page 17: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

22

2.2.3 Web 2.0

Web 2.0 adalah sebuah istilah yang dicetuskan pertama kali oleh O’Reilly

Media pada tahun 2003, dan dipopulerkan pada konferensi web 2.0 pertama di

tahun 2004, merujuk pada generasi yang dirasakan sebagai generasi kedua

layanan berbasis web seperti situs jaringan sosial, wiki, perangkat komunikasi,

dan folksonomi yang menekankan pada kolaborasi online dan berbagi antar

pengguna. O'Reilly Media, dengan kolaborasinya bersama MediaLive

International, menggunakan istilah ini sebagai judul untuk sejumlah seri

konferensi, dan sejak 2004 beberapa pengembang dan pemasar telah mengadopsi

ungkapan ini.

Walaupun kelihatannya istilah ini menunjukkan versi baru daripada web,

istilah ini tidak mengacu kepada pembaruan kepada spesifikasi teknis World

Wide Web, tetapi lebih kepada bagaimana cara pengembang sistem di dalam

menggunakan platform web. Mengacu pada Tim Oreilly, istilah web 2.0

didefinisikan sebagai sebuah revolusi bisnis di dalam industri komputer yang

terjadi akibat pergerakan ke internet sebagai platform, dan suatu usaha untuk

mengerti aturan-aturan agar sukses di platform tersebut.

Prinsip-prinsip web 2.0 yaitu:

• Web sebagai platform.

• Data sebagai pengendali utama.

• Efek jaringan diciptakan oleh arsitektur partisipasi.

Page 18: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

23

• Inovasi dalam perakitan sistem serta situs disusun dengan menyatukan fitur

dari pengembang yang terdistribusi dan independen (semacam model

pengembangan "open source").

• Model bisnis yang ringan, yang dikembangkan dengan gabungan isi dan

layanan.

• Akhir dari siklus peluncuran (release cycle) perangkat lunak (perpetual

beta).

• Mudah untuk digunakan dan diadopsi oleh user.

2.2.4 Client-Server

Klien-server atau client-server merupakan sebuah paradigma dalam

teknologi informasi yang merujuk kepada cara untuk mendistribusikan aplikasi

ke dalam dua pihak yaitu pihak klien dan pihak server.

Dalam model klien/server, sebuah aplikasi dibagi menjadi dua bagian

yang terpisah, tapi masih merupakan sebuah kesatuan yakni komponen klien dan

komponen server. Komponen klien juga sering disebut sebagai front-end,

sementara komponen server disebut sebagai back-end. Komponen klien dari

aplikasi tersebut dijalankan dalam sebuah workstation dan menerima masukan

data dari pengguna. Komponen klien tersebut akan menyiapkan data yang

dimasukkan oleh pengguna dengan menggunakan teknologi pemrosesan tertentu

dan mengirimkannya kepada komponen server yang dijalankan di atas mesin

server, umumnya dalam bentuk request terhadap beberapa layanan yang dimiliki

oleh server. Komponen server akan menerima request dari klien, dan langsung

Page 19: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

24

memprosesnya dan mengembalikan hasil pemrosesan tersebut kepada klien.

Klien pun menerima informasi hasil pemrosesan data yang dilakukan server dan

menampilkannya kepada pengguna, dengan menggunakan aplikasi yang

berinteraksi dengan pengguna.

Sebuah contoh dari aplikasi client/server sederhana adalah aplikasi web

yang didesain dengan menggunakan Active Server Pages (ASP) atau PHP. Skrip

PHP atau ASP akan dijalankan di dalam web server (Apache atau Internet

Information Services), sementara skrip yang berjalan di pihak klien akan

dijalankan oleh web browser pada komputer klien. Klien-server merupakan

penyelesaian masalah pada software yang menggunakan database sehingga

setiap komputer tidak perlu di-install database, dengan metode klien-server

database dapat di-install pada suatu komputer sebagai server dan aplikasinya di-

install pada client.

2.2.5 MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data

SQL atau DBMS (database management system) yang multithread, multi-user,

dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL

tersedia sebagai perangkat lunak gratis dibawah lisensi GBU General Public

License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk

kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat

lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber

dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh

Page 20: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

25

sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta

hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang

Finlandia yang mendirikan MySQL AB adalah David Axmark, Allan Larsson,

dan Michael “Monty” Widenius.

Terdapat beberapa API tersedia yang memungkinkan aplikasi-aplikasi

komputer yang ditulis dalam berbagai bahasa pemrograman untuk dapat

mengakses basis data MySQL antara lain bahasa pemrograman C, C+, C#,

bahasa pemrograman Eiffel, bahasa pemrograman Smalltalk, bahasa

pemrograman Java, bahasa pemrograman Lisp, Perl, PHP, bahasa pemrograman

Python, Ruby, REALbasic dan Tcl. Sebuah antarmuka ODBC memanggil

MyODBC yang memungkinkan setiap bahasa pemrograman yang mendukung

ODBC untuk berkomunikasi dengan basis data MySQL. Kebanyakan kode

sumber MySQL dalam ANSI C.

2.2.6 Unified Modeling Language (UML)

Unified Modeling Language (UML) adalah bahasa spesifikasi standar

untuk mendokumentasikan, menspesifikasikan, dan membangun sistem

perangkat lunak. UML tidak berdasarkan pada bahasa pemrograman tertentu.

Standar spesifikasi UML dijadikan standar defacto oleh OMG (Object

Management Group) pada tahun 1997. UML yang berorientasikan object

mempunyai beberapa notasi standar.

Spesifikasi ini menjadi populer dan standar karena sebelum adanya UML,

telah ada berbagai macam spesifikasi yang berbeda. Hal ini menyulitkan

komunikasi antar pengembang perangkat lunak. Untuk itu beberapa pengembang

Page 21: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

26

spesifikasi yang sangat berpengaruh berkumpul untuk membuat standar baru.

UML dirintis oleh Grady Booch, James Rumbaugh pada tahun 1994 dan

kemudian Ivar Jacobson.

Berikut beberapa diagram dalam UML dan sedikit penjelasannya:

• Use case diagram: use case diagram digunakan untuk mengidentifikasi

elemen primer dan proses yang membentuk sistem.

• Class diagram: class diagram digunakan untuk menyempurnakan use case

diagram dan menjelaskan desain dari sistem secara detail.

• Object diagram: object diagram merupakan spesialisasi dari class diagram.

Sebuah object adalah instance dari sebuah class.

• State diagram: state diagram menggambarkan state dari object dalam sistem.

Object dalam sistem mengubah state sebagai respon dari event. Sebagai

tambahan, sebuah state diagram juga menggambarkan transisi dari state

object mulai dari awal sampai akhir sebagai respon terhadap event yang

berdampak pada sistem.

• Activity diagram: activity diagram menggambarkan aliran proses dalam

sistem.

• Sequence diagram: sequence diagram menggambarkan interaksi antar objek

dalam sistem berdasarkan waktu.

• Collaboration diagram: collaboration diagram mengelompokkan interaksi

antar objek berbeda.

• Component diagram: component diagram menggambarkan bagian high-level

yang membangun sistem.

Page 22: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

27

• Deployment diagram: deployment diagram menggambarkan konfigurasi

elemen runtime dari aplikasi.

Di bawah ini beberapa diagram yang digunakan dalam pembuatan

aplikasi ini:

2.2.6.1 Use Case Diagram

Use case diagram adalah diagram yang menggambarkan

fungsionalitas yang disediakan sistem yang disebut dengan actor,

tujuannya (digambarkan sebagai use case), dan ketergantungan antara use

case tersebut.

Use case diagram menunjukkan posisi atau konteks dari suatu use

case diantara use case lainnya. Sebagai sebuah mekanisme pengorganisir,

kumpulan yang konsisten, use case yang bersangkutan memperkenalkan

gambar yang berguna dari system behavior, sebuah pengertian umum

antara customer/owner/user dan tim pengembang.

Relasi dalam use case diagram harus antara actor dengan use

case, namun ada relasi yang diperbolehkan antara actor dengan actor

yang digambarkan dengan notasi garis lurus dengan ujung segitiga

kosong dari actor khusus menuju actor umum.

Contoh use case diagram:

Page 23: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

28

Gambar 2.2 Contoh Diagram Model Use case

Terdapat 3 relasi dalam use case diagram yang didukung oleh

standar UML, yaitu:

• Include

Relasi ini berguna untuk mengambil behavior yang benar-benar

umum dari bermacam-macam use case menjadi sebuah deskripsi

tunggal. Notasinya dilambangkan dengan tanda panah dari including

menuju included use case disertai label “<<include>>”. Notasi ini

mirip seperti sebuah perluasan makro dimana included use case

ditempatkan didalam use case behavior dasar.

Page 24: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

29

• Extend

Relasi ini mengindikasikan bahwa behavior dari extension use case

boleh dimasukkan dalam extended use case dengan syarat tertentu.

Notasinya dilambangkan tanda panah dari extension use case menuju

extended use case, dengan label “<<extend>>”.

• Generalization

Dalam relasi antara use case, terdapat relasi generalisasi/spesialisai.

Notasinya dilambangkan dengan sebuah garis lurus berujung segitiga

kosong dari spesialisasi ke generalisasi use case

2.2.6.2 Class Diagram

Dalam UML, class diagram adalah tipe dari static structure

diagram yang menggambarkan struktur dari sebuah sistem dengan

menunjukkan kelas-kelas sistem, atributnya, dan relasi antar kelas.

Terdapat beberapa relasi dalam class diagram:

• Link

Link adalah relasi dasar antara obyek. Digambarkan dengan sebuah

garis yang terhubung antara dua obyek atau lebih. Dapat digunakan

pada class diagram atau object diagram. Link adalah instance dari

association.

• Association

Association mewakili kumpulan link. Binary association (dengan dua

ujung) umumnya digambarkan sebagai sebuah garis, dengan masing-

Page 25: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

30

masing ujung terhubung pada class box. Association tingkat tinggi

dapat digambarkan lebih dari 2 ujung. Pada beberapa kasus, ujung-

ujungnya terhubung dengan permata pusat.

Contoh association:

Gambar 2.3 Binary association

• Aggregation

Aggregation adalah varian dari “mempunyai” association;

aggregation lebih spesifik dibandingkan association. Aggregation

adalah association yang mewakili relasi bagian-keseluruhan. Sebagai

bagian dari association, aggregation dapat dinamai dan mempunyai

bentuk yang sama dengan association. Walaupun begitu, aggregation

tidak boleh melibatkan lebih dari 2 kelas.

Contoh aggregation:

Gambar 2.4 Aggregation

• Composition

Composition adalah varian yang lebih kuat dari “mempunyai”

association; composition lebih spesifik dibandingkan aggregation.

Page 26: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

31

Composition biasanya mempunyai ketergantungan life cycle yang

kuat antara instance dari container class dan instance dari contained

class: jika container dihancurkan, normalnya setiap instance yang

dimilikinya dihancurkan pula. Perhatikan bahwa sebuah bagian dapat

(jika diperbolehkan) dibuang dari composite sebelum composite

dihapus, dan kemudian tidak dihapus sebagai bagian dari composite.

Contoh composition:

Gambar 2.5 Composition

• Generalization

Relasi generalization mengindikasikan bahwa satu dari dua class

yang saling berhubungan (subtype) adalah bentuk spesialisasi dari

class lainnya (supertype) dan supertype adalah generalization dari

subtype. Hal ini berarti semua instance dari subtype adalah instance

supertype juga.

Generalization pada class diagram mirip dengan pada use case

diagram, begitu pula dengan notasinya.

Page 27: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

32

2.2.6.3 Activity Diagram

Activity diagram adalah sebuah diagram yang berisi activiy dan

action untuk menggambarkan workflow. Berikut beberapa simbol yang

digunakan dalam activity diagram dan fungsinya:

• Initial state, menggambarkan awal dari sebuah proses.

Gambar 2.6 Initial state

• State, segi empat bersudut tumpul menggambarkan tugas yang perlu

dilakukan.

Gambar 2.7 State

• Transition, panah menggambarkan sasaran yang mengawali aktivitas.

Gambar 2.8 Transition

• Transition (fork), merupakan bar sinkronisasi dimana kegiatan dapat

dilakukan secara paralel.

Gambar 2.9 Transition (fork)

Page 28: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

33

• Transition (join), merupakan bar sinkronisasi dimana dua aktivitas

mempunyai tujuan yang sama dan tujuan dari keduanya digabung

menjadi satu.

Gambar 2.10 Transition (join)

• Decision, menggambarkan sebuah kegiatan keputusan.

Gambar 2.11 Decision

• Final state, menggambarkan akhir dari sebuah proses.

Gambar 2.12 Final state

2.2.6.4 Sequence Diagram

Sequence diagram adalah salah satu diagram interaksi dalam

UML, yang menunjukkan bagaimana proses beroperasi satu sama lain

dan bagaimana urutannya. Berikut contoh sequence diagram:

Page 29: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

34

Gambar 2.13 Sequence diagram

Di bawah ini beberapa simbol yang sering digunakan saat

membuat sequence diagram :

• Object lifeline

Menggambarkan waktu life cycle suatu obyek selama skenario sedang

dibuat.

Gambar 2.14 Object lifeline

Page 30: BAB 2 LANDASAN TEORI - library.binus.ac.idlibrary.binus.ac.id/eColls/eThesisdoc/Bab2/2009-1-00070-IF Bab 2.pdfInteraksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI)

35

• Activation

Dimana proses sedang dilakukan oleh object/class untuk memenuhi

pesan/perintah.

Gambar 2.15 Activation symbol

• Message

Sebuah anak panah yang mengindikasikan pesan diantara obyek. Dan

obyek dapat mengirimkan pesan ke dirinya sendiri.

Gambar 2.16 Message symbol