bab 2 landasan teori 2.1 perancangan dan pemesanan...

8

BAB 2

LANDASAN TEORI

2.1 Perancangan dan Pemesanan

2.1.1 Pengertian Perancangan Sistem

Menurut Valacich, Goerge dan Hoffer (2004. P23), perancangan sistem

adalah suatu tahap dalam siklus pengembangan sistem (System Development Life

Cycle) dimana sistem yang dipilih untuk pengembangan dalam analisis sistem

pertama kali dijabarkan secara tersendiri dari semua platform komputer (desain

logika) dan kemudian diubah menjadi detil – detil teknologi secara spesifik

(desain fisik) dari semua rancangan pemograman dari sistem yang dapat

diselesaikan.

Menurut McLeod (2001, p192), perancangan sistem adalah penentuan

proses data yang diperlukan oleh sistem baru. Jika sistem itu berbasis komputer,

rancangan dapat menyertakan spesifikasi jenis peralatan yang akan

dipergunakan.

Jadi dapat di simpulkan bahwa perancangan sistem adalah pembuatan

atau pengembangan sistem yang baru sesuai dengan apa yang diinginkan analisis

sistem baik penentuan proses ataupun datanya.

9

2.1.2 Pengertian Pemesanan

Pesan adalah kata baku dari pemesanan yang memiliki arti “hendak

membeli supaya dikirim”. Pesanan adalah barang yang dipesan. Jadi pemesanan

adalah proses, perbuatan atau cara memesan (sumber : Kamus Bahasa

Indonesia).

2.2 Web 2.0 dan AJAX

2.2.1 Web 2.0

2.2.1.1 Pengertian WEB 2.0

(Dari Wikipedia bahasa Indonesia, ensiklopedia bebas )

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, 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 si-pengembang sistem di dalam

10

menggunakan platform web. Mengacu pada Tim O’Reilly, istilah Web 2.0

didefinisikan sebagai berikut:

"Web 2.0 adalah 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. ”

Web 2.0 menjadi topik hangat dalam pembahasan web saat ini.

Prinsip-prinsip Web 2.0 :

1. Web sebagai platform

2. Data sebagai pengendali utama

3. Efek jaringan diciptakan oleh arsitektur partisipasi

4. Inovasi dalam perakitan sistem serta situs disusun dengan menyatukan fitur

dari pengembang yang terdistribusi dan independen (semacam model

pengembangan "open source")

5. Model bisnis yang ringan, yang dikembangkan dengan gabungan isi dan

layanan

6. Akhir dari siklus peluncuran (release cycle) perangkat lunak (perpetual beta)

7. Mudah untuk digunakan dan diadopsi oleh user

2.2.1.2 Perkembangan Web 2.0

Inovasi dalam dunia web semakin hari kian mengalami perkembangan

yang berarti, ini dibuktikan dengan adanya Teknologi Web 2.0 yang

dikembangkan sekitar tahun 2004. Walaupun sudah termasuk lama

11

kedengarannya oleh para praktisi web, namum sebagian besar mereka masih

bertanya-tanya tentang fungsi dan kegunaannya. Web 2.0 merupakan teknologi

web yang menyatukan teknologi-teknologi yang dimiliki dalam membangun

web. Penyatuan tersebut merupakan gabungan dari HTML, CSS, JavaScript,

XML, dan tentunya AJAX.

Perkembangan web 2.0 lebih menekankan pada perubahan cara berpikir

dalam menyajikan konten dan tampilan di dalam sebuah website. Dalam

perkembangannya Web 2.0 diaplikasikan sebagai bentuk penyajian halaman web

yang bersifat sebagai program desktop pada umumnya seperti Windows. Fungsi-

fungsi pada penerapannya sudah bersifat seperti desktop, seperti drag and drop,

auto-complete, serta fungsi lainnya. Aplikasi Web 2.0 disajikan secara penuh

dalam suatu web browser tanpa membutuhkan teknologi perangkat yang canggih

dari sisi user. Tidak mengherankan bila suatu aplikasi (software) dapat diakses

secara online tanpa harus menginstallnya terlebih dahulu. Software tersebut

misalnya software pengolah kata (seperti MS Word) atau software pengolah

angka (seperti MS Excel).

Teknologi ke depan suatu software berbasisi web tidak lagi dijual

melainkan suatu fasilitas gratis yang dapat digunakan setiap waktu.

Permasalahan manajemen file juga tidak merepotkan, bahkan file dapat disimpan

dan juga dapat di-sharing dengan user lain. Implementasi dari teknologi Web 2.0

dapat dilihat pada aplikasi sprearsheet pada Google yang merupakan aplikasi

untuk operasi mengolah angka seperti MS Excel. Aplikasi ini dapat dilihat pada

12

http://spreadsheets.google.com/ , tentunya aplikasi tersebut membutuhkan suatu

akun Google untuk memasukinya.

Suatu web 2.0 biasanya digunakan sebagai akhir dari siklus peluncuran

produk software, mengilustrasikan setiap produsen software tidak lagi

meluncurkan produknya dalam bentuk fisik. Karena web menjadi platform,

pengguna cukup datang ke website untuk menjalankan aplikasi yang ingin

mereka gunakan. Hasil dari pengembangan fitur di dalam software dapat

langsung dirasakan oleh pengguna. Software tidak lagi dijual sebagai produk

namun berupa layanan (service).

2.2.1.3 Tujuh Karakteristik

Meskipun definisi Web 2.0 belum secara solid diformulasikan, terdapat tujuh

prinsip yang mendasari karakter Web 2.0 yaitu :

1. Karakteristik pertama antara lain web sebagai platform dimana menjadikan

web sebagai tempat bekerja di manapun Anda berada. Cukup dengan

membuka web browser, Anda dapat mengerjakan tugas mengetik dokumen,

perhitungan keuangan, atau merancang presentasi melalui aplikasi-aplikasi

yang telah disediakan dan dapat dijalankan secara langsung melalui internet.

2. Karakteristik kedua,adanya partisipasi dari pengguna dalam berkolaborasi

pengetahuan. Hal ini mengingatkan akan pemberian kepercayaan kepada

pengguna internet untuk dapat berpartisipasi dalam berbagi pengetahuan di

Wikipedia, sebuah ensiklopedia berbasis web yang disusun berdasarkan

masukan-masukan pengguna internet di seluruh dunia.

13

3. Karakteristik ketiga, data menjadi trademark-nya aplikasi, mengingatkan kita

pada slogan “Intel Inside” yang telah melambungkan nama prosesor Intel di

kalangan pengguna komputer. Trademark tersebut telah menjadi suatu

garansi kepercayaan dari pengguna akan kemampuan komputer yang akan

ataupun sudah dibelinya. Maksud yang sama juga diusung oleh karakteristik

ketiga ini, dimana penyuplai data akan memberikan trademark yang akan

digunakan oleh pemilik website untuk memberikan garansi kepercayaan

kepada pengunjungnya. Sebagai contoh adalah “Nevteq Onboard” untuk data

peta pada sistem navigasi GPS dan “Powered by Google” untuk dukungan

Google Maps pada peta dunia berbasis web.

4. Sedangkan karakteristik keempat, web 2.0 sebagai akhir dari siklus

peluncuran produk software, mengilustrasikan setiap produsen software tidak

lagi meluncurkan produknya dalam bentuk fisik. Karena web menjadi

platform, pengguna cukup datang ke website untuk menjalankan aplikasi

yang ingin mereka gunakan. Hasil dari pengembangan fitur di dalam

software dapat langsung dirasakan oleh pengguna. Software tidak lagi dijual

sebagai produk namun berupa layanan (service). Produsen yang memberikan

pelayanan yang cepat dan bagus, akan menjadi pilihan pengguna.

5. Karakteristik kelima, dukungan pada pemrograman yang sederhana dan ide

akan web service atau RSS. Ketersediaan RSS akan menciptakan kemudahan

untuk di-remix oleh website lain dengan menggunakan tampilannya masing--

masing dan dukungan pemrograman yang sederhana.

14

6. Karakteristik keenam, software tidak lagi terbatas pada perangkat tertentu.

Hal ini mempertegas posisi web sebagai platform dimana setiap perangkat

dapat mengaksesnya. Komputer tidak lagi menjadi satu-satunya perangkat

yang dapat menjalankan berbagai aplikasi di internet. Setiap aplikasi harus

didesain untuk dapat digunakan pada komputer pribadi, perangkat genggam

seperti ponsel dan PDA, ataupun server internet.

7. Sedangkan karakteristik terakhir, adanya kemajuan inovasi pada antar-muka

(interface) di sisi pengguna. Dukungan AJAX yang menggabungkan HTML,

CSS, Javascript, dan XML pada Yahoo!Mail Beta dan Gmail membuat

pengguna merasakan nilai lebih dari sekedar situs penyedia e-mail.

Kombinasi media komunikasi seperti Instant Messenger (IM) dan Voice over

IP (VoIP) akan semakin memperkuat karakter Web 2.0 di dalam situs

tersebut.

2.2.1.4 Kunci Perbedaan

Menurut Wikipedia, yang menjadi kunci perbedaan dalam Web 2.0 dan Web 1.0

adalah

1. Keterbatasan pada Web 1.0 yang mengharuskan pengguna internet untuk

datang ke dalam website tersebut dan melihat satu persatu konten di

dalamnya. Sedangkan Web 2.0 memungkinkan pengguna internet dapat

melihat konten suatu website tanpa harus berkunjung ke alamat situs yang

bersangkutan.

2. Selain itu, kemampuan Web 2.0 dalam melakukan aktivitas drag and drop,

auto complete, chat, dan voice seperti layaknya aplikasi desktop, bahkan

15

berlaku seperti sistem operasi, dengan menggunakan dukungan AJAX atau

berbagai plug-in (API) yang ada di internet. Hal tersebut akan merubah

paradigma pengembang sofware dari distribusi produk menjadi distribusi

layanan.

3. Sedangkan karakter lainnya, kolaborasi dan partisipasi pengguna, ikut

membantu memperkuat perbedaan pada Web 2.0. Suatu website dapat saja

memasukkan beberapa bahkan tujuh karakter Web 2.0 di dalam situs yang

dibangunnya. Semakin banyak karakter yang masuk ke dalam website

tersebut, suatu situs akan mendekati Web 2.0.

Yang terpenting bukanlah klaim sebagai Web 2.0, namun mampukah dampak

perkembangan tersebut menjembatani pengguna internet dengan kepentingan

perusahaan, komunitas, atau anda dengan menggunakan Web 2.0?

(sumber : Ridwan Sanjaya, http://ridwansanjaya.blogspot.com/2006/07/web-20-

gelombang-baru-di-dunia.html)

2.2.2 AJAX

2.2.2.1 Pengantar AJAX (Asynchorous JavaScript And XML)

Sebelum membahas lebih jauh tentang AJAX. Apa sih sebenarnya

AJAX? AJAX bukanlah barang baru dan bukan teknologi baru. Menurut Ahmad

Masykur (sumber : http://semarang.netIndonesia.net/blogs/cahnom/), AJAX

merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu

HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah

16

akronim dari Asynchronous JavaScript and XML, komponen-komponen AJAX

meliputi:

• HTML (HyperText Markup Language) digunakan dalam membuat halaman

web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser.

HTML merupakan standar internasional dengan spesifikasi yang ditetapkan

oleh World Wide Web Consortium (W3C). Versi terakhir saat tulisan ini

dibuat adalah HTML 4.01.

• XHTML (Extensible HyperText Markup Language), adalah bahasa markup

sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. Versi terakhir

saat tulisan ini dibuat adalah XHTML 2.0.

• CSS (Cascading Style Sheets ) adalah sebuah mekanisme sederhana untuk

memberikan style (seperti font, warna, jarak spasi, dll) kepada dokumen web

yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa

XML seperti XHTML dan SVG).

• JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan

lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa

mandiri, melainkan dirancang untuk ditanamkan pada produk dan aplikasi

lain seperti peramban web.

• DOM (Document Object Model) adalah sebuah API (Application Program

Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi

dokumen secara terstruktur, dimungkinkan untuk merubah isi dan presentasi

17

visual. Pada dasarnya, DOM menghubungkan halaman web dengan script

atau bahasa pemprograman.

• XML (Extensible Markup Language) adalah bahasa markup untuk keperluan

umum yang disarankan oleh W3C untuk membuat dokumen markup

keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar

sistem yang beraneka ragam.

• XSLT (Extensible Stylesheet Language Transformations ) adalah sebuah

bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun proses

merujuk pada transformasi, dokumen asli tidak berubah melainkan dokumen

XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya

digunakan untuk merubah skema XML ke halaman web atau dokumen PDF.

• Objek XMLHttpRequest untuk melakukan pertukaran data secara asinkron

dengan peladen (server) web. Beberapa kerangka-kerja AJAX dan dalam

beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest

untuk melakukan pertukaran data dengan peladen web.

• JSON (JavaScript Object Notation) yaitu format pertukaran data komputer

yang ringan dan mudah. Keuntungan JSON dibandingkan dengan XML

adalah pada proses penterjemahan data menggunakan Javascript. Javascript

dapat menterjemahkan JSON menggunakan built-in procedure eval().

Dalam penerapannya, tidak semua teknologi di atas digunakan. Terdapat

beberapa teknik komunikasi yang digunakan untuk implementasi AJAX. Teknik

yang umum digunakan adalah dengan menggunakan:

18

• Hidden Frame. Metode ini memanfaatkan frame yang tersembunyi.

Biasanya salah satu frame diset dengan ukuran tinggi/lebar 0 sehingga tidak

terlihat di halaman. Frame tersembunyi inilah yang sebenarnya melakukan

request ke dan menerima respon dari server, sehingga frame yang tampil

kelihatan tidak melakukan postback ke server. Javascript digunakan untuk

mengambil data dan mengisi data yang ada di frame tersembunyi ini.

• Hidden IFrame. Metode ini hampir sama dengan hidden frame,

perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan

Frame.

• Objek XMLHttpRequest. Metode yang satu ini memanfaatkan ActiveX

Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari,

Opera). Objek ini yang akan melakukan postback ke server dan menerima

respon balik berupa data (bukan halaman). Data yang didapat dari server

kemudian diolah di klien untuk ditampilkan ke halaman.

Teknik pemprosesan halaman secara umum ada dua:

• Pemprosesan halaman dengan pembuatan/manipulasi objek dokumen

menggunakan javascript. Klien mengirimkan data dalam format XML/JSON

kepada server dan mendapatkan data dari server berupa XML/JSON. Data

XML/JSON kemudian diolah untuk memanipulasi objek dokumen

menggunakan DOM dan javascript.

19

• Parsial rendering. Pada teknik ini UI dan behaviour tidak diproses di klien

melainkan diproses di server. Klien menerima UI dan behaviour kemudian

melakukan rendering pada bagian halaman tertentu.

Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja

aplikasi web dan lebih responsif terhadap aksi pengguna. Dengan AJAX

pertukaran data antara klien dan server lebih ringan karena hanya data yang

dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan lebih cepat.

2.2.2.2 Penggunaan Dasar

Dua keistimewaan AJAX adalah dapat:

• Membuat permintaan kepada server tanpa memuat kembali (reload)

halaman.

• Mengurai (parse) dan bekerja dengan dokumen XML dan atau JSON.

1. Membuat Permintaan HTTP (HTTP Request)

Untuk membuat permintaan HTTP kepada server menggunakan

JavaScript, diperlukan sebuah class yang menyediakan fungsi-fungsi ini.

Pada Internet Explorer tersedia objek ActiveX yang disebut XMLHTTP. Pada

Mozilla, Safari, Opera dan beberapa peramban lain, menerapkan sebuah

class Javascript objek XMLHttpRequest yang mendukung metode dan

properties objek Microsoft ActiveX.

20

Untuk membuat instance (objek) class lintas-browser (cross-browser), dapat

dilakukan dengan:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest ();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

Catatan: kode di atas hanya sebagai ilustrasi saja. Kode tersebut merupakan

versi paling sederhana untuk membuat instance XMLHttp. Untuk

penggunaan secara nyata dapat lihat di bagian 3 artikel ini.

Beberapa versi browser Mozilla tidak bekerja dengan baik jika respon dari

server tidak mengandung header mime-type XML. Untuk memenuhi

kebutuhan ini, panggil method untuk mengganti/menambahkan header yang

dikirim oleh server.

http_request = new XMLHttpRequest();

http_request overrideMimeType('text/xml');

Setelah itu, buat fungsi untuk mengolah setelah data diterima dari server

berdasarkan permintaan yang dibuat sebelumnya. Tahap ini, daftarkan fungsi

JavaScript yang menangani respon dari server. Setting properties

onreadystatechange objek dengan nama fungsi Javascript yang disiapkan

untuk mengerjakan proses respon.

21

http_request.onreadystatechange = namaFungsi;

Perlu dicatat bahwa tidak ada tanda kurung setelah nama fungsi dan tanpa

parameter yang dilewatkan. Selain memberikan nama fungsi, dapat juga

digunakan teknik JavaScript dalam pendefinisian fungsi (tanpa nama) saat

program berjalan (run-time) -- yang disebut fungsi anonymous -- dan

mendefinisikan tindakan untuk melakukan proses, seperti berikut:

http_request.onreadystatechange = function() {

// do the thing

};

Selanjutnya, setelah deklarasi dan segera setelah menerima respon, kemudian

buat permintaan. Panggil method open() dan send() dari klas permintaan

HTTP seperti kode berikut:

http_request.open('GET', 'http://www.example.org/somefile', true);

http_request.send(null);

• Parameter panggil pertama dari open() adalah method permintaan HTTP

GET, POST, HEAD atau method lain yang didukung oleh server. Gunakan

huruf kapital sebagaimana standar HTTP. Untuk informasi lebih lanjut

mengenai method permintaan HTTP dapat dilihat pada spesifikasi W3C.

• Parameter kedua adalah URL dari halaman yang diminta. Demi keamanan,

panggilan tidak dapat dilakukan pada halaman domain pihak ketiga. Pastikan

22

untuk menggunakan nama domain yang pasti pada semua halaman jika tidak

ingin mendapat error 'permision denied' ketika melakukan panggilan open().

• Parameter ketiga diset ketika permintaan adalah asinkron. Jika diset TRUE,

eksekusi fungsi JavaScript akan berlanjut walau tanggapan dari peladen

belum sampai. Ini adalah A dalam AJAX.

Parameter untuk method send() dapat berupa sembarang data untuk dikirim

ke server saat mengirimkan permintaan POST. Data harus dalam format

query string, seperti:

name=value&anothername=othervalue&so=on

Catatan bahwa jika ingin mengirim (POST) data, ganti tipe MIME

permintaan menggunakan baris berikut:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-

urlencoded');

Bila tidak, server akan mengabaikan data yang dikirim.

2. Penanganan Respon Server

Ingat bahwa ketika permintaan dikirim, fungsi JavaScript harus telah

disediakan untuk menangani respon.

http_request.onreadystatechange = namaFungsi;

23

Apa yang seharusnya dikerjakan oleh fungsi ini. Pertama, fungsi untuk

memeriksa status tanggapan. Jika status memiliki nilai 4, berarti bahwa

seluruh tanggapan peladen telah diterima dan siap dilanjutkan proses

berikutnya.

if (http_request.readyState == 4) {

// everything is good, the response is received

} else {

// still not ready

}

Berikut adalah daftar nilai status ReadyState

• 0 (tidak diinisialisasi)

• 1 (dalam proses memuat)

• 2 (telah dimuat)

• 3 (interaktif)

• 4 (lengkap)

Berikutnya adalah pemeriksaan kode status dari respon HTTP server. Daftar

kode status respon HTTP dapat dilihat di situs W3C. Pada contoh kali ini

hanya digunakan status 200 yaitu respon OK.

if (httpRequest.status == 200) {

// perfect!

} else {

24

// there was a problem with the request,

// for example the response may be a 404 (Not Found)

// or 500 (Internal Server Error) response codes

}

Setelah semua status permintaan diperiksa dan kode status HTTP telah ada

respon, data respon dari server dapat diolah. Terdapat dua pilihan untuk

mengakses data.

• httpRequest.responseText -- akan mengembalikan respon berupa teks

string

• httpRequest.responseXML -- akan mengembalikan respon berupa objek

XMLDocument object yang dapat diakses dengan fungsi DOM JavaScript

3. Contoh Sederhana

Tulis bagian program menjadi satu permintaan HTTP sederhana. JavaScript

akan meminta sebuah dokumen HTML yaitu test.html yang hanya

mengandung tulisan "I'm a test" dan kemudian memanggil alert() dengan isi

dari berkas test.html

<script type="text/javascript" language="javascript">

var http_request = false;

function makeRequest(url) {

http_request = false ;

if (window.XMLHttpRequest) { // Mozilla, Safari ,...

25

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');

// See note below about this line

}

} else if (window.ActiveXObject) { // IE

var aVersions = [ "MSXML2.XMLHttp.6.0",

"MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",

"MSXML2.XMLHttp.3.0", "Microsoft.XMLHTTP" ];

for (var i = 0; i < aVersions.length; i++) {

try { http_request = new ActiveXObject(aVersions[i]);

break;

}

catch (e)

{

// Do nothing

}

}

}

if (!http_request) {

alert ('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

26

http_request.onreadystatechange = alertContents;

http_request.open('GET', url, true);

http_request.send(null);

}

function alertContents() {

if (http_request.readyState == 4) {

if (http_request.status == 200) {

alert(http_request.responseText);

} else {

alert('There was a problem with the request.');

}

}

}

</script>

<span style="cursor: pointer; text-decoration: underline" onclick

="makeRequest('test.html')">Make a request

</span >

Pada contoh di atas:

• Ketika pengguna menekan klik pada link &quote;Make a request&quote;

maka fungsi makeRequent dipanggil dengan parameter nama file HTML

test.html dalam direktori yang sama.

27

• Permintaan dibuat dan kemudian event onreadystatechange melakukan

eksekusi alertContents()

• alertContents() memeriksa jika tanggapan telah diterima dalam keadaan

baik dan kemudian tampilkan isi berkas test.html menggunakan fungsi

alert()

Contoh di atas dapat diuji dengan klik di sini dan juga berkas tes dapat dilihat

di sini.

Catatan: baris http_request.overrideMimeType('text/xml'); di atas

mengakibatkan error Console pada Firefox 1.5b seperti tercantum dalam

dokumen pada

https://bugzilla.mozilla.org/show_bug.cgi?id=311724

jika halaman yang dipanggil dengan XMLHttpRequestbukan XML yang

valid (seperti plaintext).

4. Bekerja dengan Respon XML

Pada contoh sebelumnya, setelah tanggapan dari permintaan HTTP diterima,

digunakan sifat responseText dari objek permintaan yang mengandung isi file

test.html. Sekarang, coba gunakan sifat responseXML. Buat dokumen XML

yang valid dengan nama test.xml seperti contoh di bawah:

<?xml version ="1.0" ?>

<root>

28

I'm a test.

</root>

Ganti baris permintaan pada script untuk melakukan request dengan:

...

onclick ="makeRequest('test.xml')">

...

Kemudian pada alertContents() ganti pada baris

alert(http_request.responseText); diganti dengan:

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

alert(root_node.firstChild.data);

Perintah tersebut untuk mengambil objek XMLDocument yang diberikan

oleh responseXML dengan menggunakan method DOM untuk mengakses

data dalam dokumen XML.

5. Petukaran data menggunakan JSON

Telah di sebutkan di atas bahwa JSON merupakan salah satu format

pertukaran data yang dapat secara langsung diterjemahkan ke dalam objek

Javascript. Pada contoh berikut akan dijelaskan bagaimana implementasi

JSON pada AJAX dibandingkan dengan XML.

Pertama, buat data JSON dalam sebuah file dengan nama test.txt yang isinya:

29

{ "FirstName" : "Ahmad", "LastName" : "Masykur" }

Ganti baris perintah pada script untuk melakukan request dengan:

...

onclick ="makeRequest('test.txt')">

...

Kemudian pada alertContents() ganti pada baris

alert(http_request.responseText); diganti dengan:

eval("jsonObj="+http_request.responseText+";");

alert(jsonObj.FirstName + ' ' + jsonObj.LastName);

Dari contoh di atas terlihat bahwa JSON lebih sederhana dan ringan

dibandingkan dengan XML. Jumlah data yang terkandung lebih banyak dan

total byte yang dikirim lebih kecil. Juga pada penulisan di javascript lebih

sederhana karena notasi data dapat langsung diterjemahkan menjadi objek

Javascript dengan fungsi eval().

Pada implementasi di projek nyata, data (baik XML maupun JSON) biasanya

diambil dari application server atau webservice. Demikian tulisan singkat

dan contoh sederhana mengenai AJAX. Semoga dapat membuka wawasan

mengenai AJAX untuk dapat memulai mengembangkan aplikasi web yang

AJAX-enabled.

30

2.3 IMK (Interaksi Manusia dan Komputer)

Menurut Shneiderman (1998, p95) Interaksi manusia dan komputer adalah

disiplin ilmu yang berhubungan dengan perancangan, evaluasi dan implementasi

sistem komputer interaktif untuk digunakan oleh manusia, serta fenomena-

fenomena yang berhubungan dengannya.

Menurut Shneiderman (1998, p95-96) didapat Delapan Aturan Emas desain

antarmuka (user interface) sebagai petunjuk yang baik untuk desain yaitu:

1. Berusaha untuk konsisten (Strive for consistency), rangkaian aksi yang

konsisten sebaiknya digunakan dalam situasi yang mirip, Trimonologi yang

serupa harus digunakan dalam prompts, menu dan layer bantu dan perintah

yang konsisten harus digunakan pada keseluruhan aplikasi.

2. Memungkinkan penggunaan shortcut bagi user (Enable frequent users to use

shortcuts). Seiring dengan peningkatan penggunaan, begitu juga keinginan user

untuk mengurangi jumlah interaksi dan meningkatkan kecepatan interaksi.

Singkatan, perintah tersembunyi, dan fasilitas makro akan sangat membantu

bagi user yang sudah mahir. Contoh : menu

3. Memberikan reaksi yang informatif (Offer informative feedback). Untuk setiap

aksi dari pengguna, seharusnya sistem memberikan reaksi yang informatif.

Untuk aksi yang sering terjadi, reaksi yang di berikan bisa sederhana untuk

aksi yang jarang terjadi, reaksi yang di berikan harus lebih lengkap.

4. Mendesain dialog untuk menyatakan penutupan (Design dialog to yield

closure). Rangkaian aksi harus dikumpulkan dalam suatu kelompok dimana

31

terdapat awal, tengah, akhir. Reaksi yang informatif ketika menyelesaikan

suatu rangkaian aksi akan memberikan user suatu kepuasan akan pencapaian,

perasaan lega, dan sebuah indikasi bahwa aplikasi sudah siap untuk rangkaian

aksi yang berikutnya.

5. Menawarkan penanganan error yang sederhana (offer simple error handling).

Sebanyak mungkin, rancanglah sistem agar user tidak membuat kesalahan

fatal. Bila terjadi sebuah kesalahan, sistem harus bisa mendeteksi kesalahan

tersebut dan memberikan mekanisme yang sederhana dan mudah di mengerti

untuk menangani kesalahan tersebut. Contoh: Halaman registrasi.

6. Izinkan pembalikan aksi yang mudah (Permit easy reversal of actions).

Fasilitas ini menghilangkan kegelisahan, karena user mengetahui kesalahan

dapat di batalkan, dengan begitu maka akan meningkatkan keinginan untuk

mencoba pilihan-pilihan yang tidak di kenal. Contoh : Form Pemesanan.

7. Pusat kendali pada user (Provide a sense of user control). User berpengalaman

sangat menginginkan perasaan bahwa mereka mengendalikan sitem dan sistem

memberi respon terhadap aksi mereka. Rancanglah sistem agar user memulai

suatu aksi daripada hanya merespon.

8. Kurangi beban ingatan jangka pendek (Reduse short-term memory load).

Keterbatasan dari kemampuan manusia untuk memproses informasi dalam

ingatan jangka pendek menghasilkan suatu kebutuhan akan tampilan untuk di

buat tetap sederhana, banyak halaman tampilan digabungkan, dan waktu

pelatihan yang cukup dialokasikan untuk kode-kode, menghafal dan

rangakaian aksi. Contoh: List Pemesanan

32

2.4 ERD (Entity Relationship Diagram)

Menurut Connolly (2002, p330) dikatakan ERD adalah sebuah tehnik

untuk merepresentasikan struktur logis dari sebuah basis data dalam bentuk

gambar, sehingga pemahaman terhadap komunitas basis data lebih muda.

Menurut Connolly (2002, p331-338), pembuatan sebuah Entity Relationship

Diagram, ada beberapa konsep dasar yang harus kita ketahui yaitu :

a. Entity Type

b. Relationship Type

c. Property

d. Attribute

2.5 DFD (Data Flow Diagram)

DFD digunakan untuk menggambarkan suatu sistem yang telah ada atau

sistem baru yang di kembangakan secara logika tanpa mempertimbangkan

lingkungan fisik dimana data tersebut mengalir (misalnya telpon, surat, dan

sebagainya) atau lingkungan fisik dimana data tersebut akan disimpan (misalnya

harddisk, Compact Disc (CD), dan sebagainya).

Menurut Mcleod (2001,p316), DFD adalah suatu gambaran grafis dari

suatu sistem yang menggunakan bentuk-bentuk simbol untuk menggambarkan

bagaimana data mengalir dari suatu proses yang saling berkaitan. DFD hanya

terdiri dari 4 simbol, yaitu:

33

Simbol Bentuk Arti

Lingkaran

• Proses

Menggambarkan apa yang

dilakukan sistem.

• Fungsi

Mentransformasikan satu atau

beberapa data masukan

menjadi satu dan beberapa

data keluaran sesuai dengan

spesifikasi yang diinginkan.

Data Flow

• Proses

Menggambarkan aliran data

dari suatu entity lainnya.

• Aliran data terdiri dari :

‐ Antara 2 proses yang

berurutan

‐ Dari data store ke proses dan

sebaliknya

‐ Dari sumber ke proses

‐ Dari proses ke link

34

Data Store

Tempat penyimpanan data

Proses dapat mengambil data

dari/memberikan data ke data

store.

External Entity

Entitas yang berbeda diluar

sistem yang memberikan data

kepada sistem (source) atau

yang menerima informasi dari

sistem (sink).

Tingkatan Diagram pada DFD

1. Diagram Konteks (Context Diagram)

Merupakan level tertinggi dari DFD yang menggambarkan seluruh input ke

atau output dari sistem, memberikan gambaran tentang keseluruhan sistem.

Dalam diagram konteks, hanya ada satu proses, tidak boleh ada data store.

2. Diagram Nol (Zero Diagram)

Diagram Nol mengindentifikasi proses-proses utama dari sistem. Proses ini

diperoleh dari pemecahan Diagram Konteks.

3. Diagram Rinci

Merupakan rincian dari diagram Nol atau Diagram level di atasnya. Di dalam

level sebaiknya tidak terdapat lebih dari 7 buah proses dan maksimal 9 proses.

35

2.6 State Transaction Diagram (STD)

STD digunakan sejak awal permodelan yang berorientasi objek. Konsep

dasarnya mendefinisikan sebuah mesin yang memiliki banyak kondisi. Mesin

tersebut memperoleh aksi dari lingkungan luar yang mengakibatkan bereaksi

mentransformasi kondisinya ke kondisi yang berlainan. Menurut Pressman

(1997,p301), STD digunakan untuk mengindentifikasikan sebagaimana sistem

harus berperilaku seperti resiko dari kejadian eksternal.

Biasanya dalam STD digunakan notasi seperti :

1. Active

State, simbolnya persegi panjang

State adalah kumpulan keadaan atau atribut yang member perincian

seseorang atau benda pada waktu dan kondisi tertentu.

Contohnya seperti proses user mengisi password, menentukan instruksi

berikutnya.

Simbol state:

36

Transition State / perubahan State, simbolnya panah berarah

Panah yang digunakan untuk menghubungkan perubahan dari suatu

keadaan. Panah awal yang digunakan untuk menunjukkan suatu keadaan

awal, sedangkan kondisi akhir digambarkan dengan panah yang menuju

suatu keadaan akhir dari suatu aksi.

Simbol transition state :

Condition

Kejadian pada lingkungan eksternal yang bisa terdeteksi oleh sistem. Hal

ini mengakibatkan perubahan terhadap state dari keadaan state menunggu

X ke state menunggu Y. Contohnya seperti interrupt signal maupun data.

2. Passive

Sistem ini tidak melakukan kontrol terhadap lingkungan, akan tetapi lebih

bersifat menerima data atau memberikan reaksi saja.

2.7 RPL (Rekayasa Piranti Lunak)

Menurut Pressman (1997, p20), Software Engineering atau RPL merupakan

aplikasi dari sebuah pendekatan sistematik yang dapat diukur untuk

mengembangkan, mengoperasikan, dan memelihara software. Software

37

Engineering ini juga merupakan teknologi yang dibagi menjadi beberapa layer

atau lapisan yaitu:

1. Tools

Dimana tools-tools dari Software Engineering ini menyediakan support

yang automated atau yang semi-automated untuk process dan methods. CASE

(Computer Aided Software Engineering) merupakan sistem untuk menopang

perkembangan perangkat lunak.

2. Methods

Dimana metode-metode dari Software Engineering ini menyediakan

teknik bagaimana cara untuk membuat atau membangun software. Method ini

juga termasuk perencanaan proyek (project planning) dan estimasi, serta

sistem-sistem, system requirements, dan seluruh tahap-tahap SDLC (Software

Development Life Cycle).

3. Process

Dimana pada lapisan ini berfungsi sebagai perekat antara lapisan-

lapisan teknologi (technology layers) bersamaan dengan enables rational

dengan waktu pengembangan dari software komputer.

4. Quality Focus

Dimana pada lapisan ini banyak software masih berorientasi atau masih

fokus pada kualitas yang akan dihasilkan dari software tersebut.

38

Gambar 2.1 Layered Technology

2.7.1 Pengembangan RPL

Seringkali seorang customer sulit menentukan input dan output yang

diharapkan. Tentu saja menyebabkan developer tidak yakin dengan

algoritma yang dibuatnya, serta interaksi manusia dan mesin yang harus

diambil. Dalam hal seperti ini, menggunakan prototype untuk Software

Engineering merupakan langkah yang terbaik. Menurut Bob Hughes dan

Mike Cotterell (2006, p78), Prototyping adalah sebuah rangka kerja dari

satu aspek atau beberapa aspek dari sistem yang dibuat.

Quality Focus

Process

Methods

tools

39

Gambar 2.2 Model Prototype Paradigma

Proses Prototyping dimulai dari :

1. Pengumpulan kebutuhan yang dilakukan oleh pengembang software

dengan klien.

2. Hasil dari pengumpulan kebutuhan diteruskan pada Quick Design.

Quick Design ini memfokuskan pada representasi aspek-aspek software

yang dapat dilihat oleh user, misalnya format input dan output.

3. Quick Design diteruskan pada pembentukan prototype. Prototype

dievaluasi oleh user dan digunakan untuk memperbaiki kebutuhan-

kebutuan software. Proses iterasi terjadi agar prototype yang dihasilkan

Listen to Costumer

Customer test drives mock‐up

Build / revise mock‐up

40

memenuhi kebutuhan user, juga pada saat yang sama developer

mengerti lebih baik tentang apa yang harus dikerjakan

Masalah yang dihadapi oleh prototype paradigma ini adalah:

1. Customer hanya melihat pada apa yang dihasilkan oleh software, tidak

peduli pada hal-hal yang berhubungan dengan kualitas software dan

pemeliharaan jangka panjang.

2. Developer seringkali menyetujui apa yang diterangkan oleh customer

agar prototype dapat dihasilkan dengan cepat. Akibatnya timbul

pemilihan sistem operasi/ bahasa pemrograman yang tidak tepat.

(Pressman, 2002, p41)

2.8 Internet dan Fasilitas Internet

2.8.1 Internet

2.8.1.1 Pengertian Internet

Internet merupakan jaringan besar yang dibentuk oleh interkoneksi

jaringan komputer tunggal diseluruh dunia, melalui saluran telepon, satelit, dan

sistem telekomunikasi lainnya. (Ellsworth, 1997, pg.1)

Menurut Chaudhury (2002, pg.10), internet adalah jaringan global yang

berisi berbagai macam informasi yang berhubungan dengan jaringan komputer

milik universitas, sekolah, perusahaan, instansi-instansi swasta dan sebagainya.

41

2.8.1.2 Sejarah

Sebelum internet ada, ARPAnet (US Defense Advanced Research

Projects Agency) atau Departemen Pertahanan Amerika pada tahun 1969

membuat jaringan komputer yang tersebar untuk menghindarkan terjadinya

informasi terpusat, yang apabila terjadi perang dapat dengan mudah dihancurkan.

Jadi bila satu bagian dari sambungan network terganggu dari serangan musuh,

jalur yang melalui sambungan itu secara otomatis dipindahkan ke sambungan

lainnya.

Selain itu, internet juga digunakan oleh kalangan akademis untuk

keperluan penelitian dan pengembangan teknologi. Dan baru setelah itu,

pemerintah Amerika memberikan izin ke arah komersial pada awal tahun 1990.

2.8.2 Protokol Internet

Internet Protocol (IP) atau protokol internet adalah protokol lapisan

jaringan (network layer dalam OSI Reference Model) atau protokol lapisan

internetwork (internetwork layer dalam DARPA Reference Model) yang

digunakan oleh protokol TCP/IP untuk melakukan pengalamatan dan routing

paket data antar host-host dijaringan komputer berbasis TCP/IP. Versi IP yang

banyak digunakan adalah IP versi 4 (IPv4) yang didefinisikan pada RFC 791 dan

dipublikasikan pada tahun 1981, tetapi akan digantikan oleh IP versi 6 (IPv6)

pada waktu yang akan datang.

42

Protokol IP merupakan salah satu protokol kunci didalam kumpulan

protokol TCP/IP. Sebuah paket IP akan membawa data aktual yang dikirimkan

melalui jaringan dari satu titik ke titik lainnya. Metode yang digunakan adalah

connectionless yang berarti protokol tidak perlu membuat dan memelihara

sebuah sesi koneksi. Selain itu, protokol ini juga tidak menjamin penyampaian

data, tetapi hal ini diserahkan kepada protokol pada lapisan yang lebih tinggi

(lapisan transport dalam OSI Reference Model atau lapisan antar host dalam

DARPA Reference Model), yakni protokol Transmission Control Protocol

(TCP). (Sumber : http://id.wikipedia.org/wiki/protokol_internet )

2.8.3 TCP/IP

TCP/IP (Transmission Control Protocol/Internet Protocol) adalah

standar komunikasi data yang digunakan oleh komunitas internet dalam tukar-

menukar data dari komputer yang satu dengan yang lainnya.

Protokol TCP/IP dikembangkan pada akhir dekade 1970-an hingga awal

1980-an sebagai sebuah protokol standar untuk menghubungkan computer-

komputer dan jaringan untuk membentuk sebuah jaringan yang luas (WLAN).

TCP/IP merupakan sebuah standar jaringan terbuka yang bersifat independen

terhadap mekanisme transport jaringan fisik yang digunakan, sehingga dapat

digunakan dimana saja. Protokol ini menggunakan skema pengalamatan yang

sederhana yang disebut sebagai alamat IP (IP address) yang mengizinkan hingga

beberapa ratus juta komputer untuk dapat saling berhubungan di internet.

Protokol ini juga bersifat routable yang berarti protokol ini cocok

43

menghubungkan sistem-sistem berbeda, misalnya Microsoft Windows dan UNIX,

untuk membentuk jaringan yang heterogen. (Sumber :

http://id.wikipedia.org/wiki/TCP_IP )

2.8.4 DNS

Domain Name System (DNS) merupakan suatu sistem bagian dari TCP/IP

yang menerjemahkan alamat dari domain ke alamat IP. Contoh :

“penguin.tidbits.com” menjadi “204.57.157.10”. (Kelly, 1995, pg.58)

2.8.5 WWW (World Wide Web)

WWW adalah aplikasi yang paling penting dan paling banyak digunakan

dalam internet. Kadang disebut juga “The Killer Application” atau “The world is

in your fingertip” karena sedemikian mudahnya kita dapat mendapatkan

informasi tidak hanya sekedar bentuk tulisan tetapi juga gambar (Images),

maupun multimedia.

Dalam aplikasi ini banyak fasilitas yang dapat dilakukan seperti :

• Melakukan transaksi jual-beli atau pemesanan suatu barang secara online

• Mendaftar secara online

• Mengakses multimedia, dan lain sebagainya

Informasi yang diletakkan di WWW disebut “homepage” dan pada setiap

homepage mempunyai alamatnya masing-masing. Untuk dapat menarik

perhatian user, homepage harus dirancang semenarik mungkin dan banyak

44

menyajikan informasi yang jelas. Dalam hal ini, bidang seni sangat dibutuhkan,

sehingga dunia periklanan dan dunia bisnis semakin semarak.

Menurut Ellsworth (1997, pg.4), WWW terdiri dari dua komponen dasar yaitu :

a. Webserver

Sebuah komputer dan software yang menyimpan dan mendistribusikan data

ke komputer lainnya (yang meminta informasi) melalui internet.

b. Webbrowser

Software yang dijalankan pada komputer pengguna (klien) yang meminta

informasi dari webserver dan menampilkannya sesuai dengan file data itu

sendiri.

Dalam penerapannya, WWW mempunyai beberapa komponen sebagai berikut :

a. HTML (Hypertext Markup Language)

Merupakan sistem yang digunakan untuk menciptakan halaman dan

dokumen yang disajikan pada WWW.

b. HTTP (Hypertext Transfer Protocol)

Internet beroperasi menggunakan satu set protokol yang mengatur dan

mengarahkan data dalam jaringan, yang disebut TCP/IP. Protokol HTTP

digunakan oleh WWW untuk transfer dan memproses file HTML.

c. URL (Uniform Resource Locator)

Merupakan cara standar untuk menampilkan informasi tentang jenis isi dan

lokasi file, lokasi komputer di internet, letak file didalam komputer dan

protokol internet yang digunakan untuk mengakses file itu.

45

Internet sangat besar, luas, merupakan interkoneksi, terdistribusi, tempat yang

sangat tidak seragam, dan URL menstandarkan keanekaragaman tersebut.

(Ellsworth, 1997, pg.42)

2.8.6 Website

Website adalah keseluruhan web page beserta homepage (dimana

homepage tersebut merupakan suatu halaman pertama dari kumpulan halaman

web dan file-file pada situs web tersebut) yang merupakan sistem yang luas dari

server yang menawarkan semua orang melalui jaringan. (Hahn, 1996, pg.181)

2.8.7 E-mail

Surat elektronik (disingkat surel atau surat-e) atau nama umumnya dalam

bahasa inggris disebut e-mail adalah sarana kirim-mengirim surat melalui

jaringan internet. Dengan surat biasa, seseorang perlu membeli perangko sebagai

biaya pengiriman, tetapi dalam e-mail tidak diperlukan biaya pengiriman. Biaya

yang mungkin dikeluarkan hanyalah biaya untuk koneksi internet.

E-mail sudah mulai digunakan ditahun 1960-an. Pada saat itu internet

belum terbentuk. Yang ada hanyalah kumpulan “Mainframe” yang terbentuk

sebagai jaringan. Mulai tahun 1980-an, e-mail sudah bisa dinikmati oleh

khalayak umum. Sekarang ini banyak perusahaan pos diberbagai negara

menurun penghasilannya disebabkan masyarakat sudah tidak memakai jasa pos

lagi. (Sumber : http://id.wikipedia.org/wiki/e-mail )

46

2.9 Macromedia Dreamweaver

Macromedia Dreamweaver adalah sebuah editor web professional yang

digunakan untuk mendesain dan mengelola situs ataupun halaman web.

Dreamweaver paling sering digunakan oleh web designer atau web programmer

dalam mengembangkan suatu situs web. Hal ini disebabkan area kerja, fasilitas,

dan kemampuan dreamweaver yang kompleks dan menunjang peningkatan

produktifitas dan efektifitas dalam mendesain atau membangun situs web.

Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang

cukup lengkap. (Sumber : http://id.wikipedia.org/wiki/Adobe_Dreamweaver )

2.10 Database

Database atau basis data adalah sekumpulan data-data yang dapat

digunakan secara bersama-sama yang berhubungan secara logika, dan deskripsi

dari data terseb,ut dirancang untuk mendapatkan informasi yang dibutuhkan

organisasi. (Connolly and Begg, 2002, pg.14)

Tabel dalam basis data berfungsi untuk menyimpan data dan merupakan

suatu kumpulan data yang berhubungan dengan topik tertentu, misalnya daftar

produk. Tabel terdiri dari baris (record) dan kolom (field). Berikut beberapa

istilah dalam sebuah tabel basis data :

a. Field

Kolom pada tabel untuk menyimpan data dalam kelompok yang sama

47

b. Record

Data lengkap dalam jumlah tunggal yang biasanya tersimpan dalam bentuk

baris secara horizontal pada tabel

c. Attribute

Nama dari kolom pada suatu tabel

d. Degree

Jumlah attribute pada suatu table

e. Cardinality

Jumlah record pada suatu tabel

f. Relation

Sebuah tabel dengan kolom dan baris

g. Relationship

Keterlibatan dua atau lebih tabel yang berhubungan

h. Primary Key

Kunci yang secara unik mengidentifikasikan suatu record pada tabel atau

candidate key yang dipilih untuk mengidentifikasikan setiap record dari

suatu entity secara unik

i. Foreign Key

Kolom-kolom yang mengacu pada primary key atau konstrain unik pada

tabel lain. Primary key atau foreign key dipilih untuk menghubungkan tabel

yang satu dengan yang lain

48

j. Candidate Key

Jumlah minimal attributes yang dapat mengidentifikasikan setiap record

secara unik

k. Composite Key

Candidate key yang terdiri dari dua atau lebih attribute

2.11 Alat Bantu Pemrograman

2.11.1 PHP Hypertext Prepocessor

Menurut Yahya Kurniawan (2002, pg.1), PHP adalah suatu skrip yang

bersifat server-side yang ditambahkan ke dalam HTML, sehingga suatu halaman

web tidak lagi bersifat statis, namun menjadi bersifat dinamis. Sifat server-side

tersebut antara lain :

• Tidak diperlukan kompabilitas browser atau harus menggunakan browser

tertentu, karena server-lah yang akan mengerjakan skrip PHP. Hasil yang

dikirimkan kembali ke browser umumnya bersifat teks atau gambar saja

sehingga pasti dikenal oleh browser manapun

• Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,

seperti koneksi ke database

• Skrip tidak dapat dilihat dengan menggunakan fasilitas view HTML source

Skrip PHP ditambahkan ke dalam HTML dengan menggunakan delimeter

khusus. Delimeter merupakan karakter atau kumpulan karakter yang

49

membedakan antara skrip atau tag dengan teks biasa dalam HTML. Seperti kita

ketahui, delimeter untuk tag HTML adalah karakter “<” dan “>”. Untuk PHP,

delimeter yang digunakan adalah sebagai berikut :

• Untuk dokumen SGML/HTML :

<?skrip PHP?>

• Untuk dokumen XML :

<?php skrip PHP?>

• Untuk editor yang tidak mendukung PHP :

<script language =”php”>

Skrip php

</script>

• Dapat juga menggunakan delimeter ASP :

<%skrip php%>

2.11.2 Javascript

Javascript adalah suatu bahasa yang dikembangkan oleh Netscape yang

memungkinkan pembuat situs merancang situs yang interaktif dan dapat

digunakan seseorang tanpa harus membeli lisensi. Walaupun sering dianggap

berhubungan dengan Java, Javascript secara umum tidak mempunyai banyak

persamaan dengan Java. Walaupun berbagi sebagian filosofi dan struktur dengan

bahasa Java, Javascript dikembangkan secara terpisah dan murni merupakan

sebuah bahasa terjemahan. Kodenya di-embed dan dapat saling berhubungan

dengan program HTML, memungkinkan pembuat situs untuk menghidupkan

situs mereka dengan isi yang dinamis. (Chaudry, 2002, pg.294-295)

50

2.11.3 MySQL

Merupakan bahasa pemrograman RDBMS (Relational Database

Management System) open source yang paling popular dan banyak digunakan di

sistem operasi LINUX (juga tersedia pada sistem operasi WINDOWS).

Kepopuleran ini karena ditunjang oleh performansi query dari database-nya yang

jarang bermasalah. (Allen, 2002, pg.220)

MySQL adalah perangkat lunak pengolah database yang sangat popular,

terutama dikalangan pengguna sistem operasi berbasis UNIX. Badan yang

membuat MySQL adalah MySQL AB. Sebagai informasi, MySQL dieja dengan

mai-es-kiu-el. (Kurniawan, 2002, pg.143)

MySQL merupakan perangkat lunak yang open source. Sesuai dengan

namanya, bahasa standar yang digunakan oleh MySQL adalah SQL. SQL adalah

singkatan dari Structured Query Language dan sering juga disebut sequel. SQL

merupakan bahasa standar untuk pengolahan database. SQL mulai

dikembangkan pada akhir tahun 70-an di laboratorium IBM , San Jose,

California.

2.11.4 Apache

Apache adalah sebuah HTTP server yang sebenarnya dirancang untuk

sistem UNIX. Sejarah apache berawal dari sebuah proyek web server NCSA

HTTP yang dikembangkan oleh sebuah grup, di National Center of Super

Computing Activities (NCSA) di University of Illnois ar Urbana Champaign

(UIUC). Pada awalnya source code ini terbengkalai dan tidak terurus, sehingga

orang-orang yang bekerja didalamnya mengembangkannya sendiri serta

51

menambahkan fitur-fitur baru didalamnya. Tahun 1995, Brian Beh Lendorf dan

Cliff Shulnick memfasilitasi dengan membentuk sebuah grup pengembang yang

mengumpulkan dan memodifikasi source code pada satu tempat dan

memproduksi sebuah produk gabungan. Apache dirilis pada april 1995. Tidak

berselang lama setelah perilisan yang pertama, Thailand merancang sebuah

arsitektur baru yang lebih lengkap.

Beberapa kelebihan apache dibandingkan web server yang lain :

1. Bersifat Open Source

2. Lebih mudah dikonfigurasi dan dikelola

3. Bisa dijalankan dibeberapa system platform seperti Windows, UNIX,

LINUX, OS2, dan Network 5x

4. Lebih stabil dibandingkan web server yang lain

2.12 UML

2.12.1 Pengertian UML

Unified Modelling Language (UML) adalah sebuah bahasa yang

berdasarkan grafik/gambar untuk memvisualisasi, menspesifikasikan,

membangun, dan pendokumentasian dari sebuah sistem pengembangan software

berbasis Object Oriented (OO). UML sendiri juga memberikan standar penulisan

sebuah sistem blue-print, yang meliputi konsep bisnis proses, penulisan kelas-

kelas dalam bahasa program yang spesifik, skema database, dan komponen-

komponen yang diperlukan dalam sistem software.

52

2.12.2 Sejarah

Pendekatan analisa dan rancangan dengan menggunakan model Object

Oriented (OO) mulai diperkenalkan sekitar pertengahan 1970 hingga akhir 1980.

Dikarenakan pada saat itu, aplikasi software sudah meningkat dan mulai

kompleks. Jumlah yang menggunakan metoda Object Oriented mulai

diujicobakan dan diaplikasikan antara 1989 hingga 1994, seperti halnya oleh

Grady Booch dari Rational Software Co., dikenal dengan istilah OOSE (Object

Oriented Software Engineering), serta James Rumbaugh dari General Electric,

dikenal dengan istilah OMT (Object Modelling Technique).

Kelemahan yang saat itu disadari oleh Booch maupun Rumbaugh adalah

tidak adanya standar penggunaan model yang berbasis Object Oriented. Ketika

mereka bertemu, ditemani dengan rekan lainnya, Ivar Jacobson dari Objectory,

mulai mendiskusikan untuk mengadopsi masing-masing pendekatan metoda

Object Oriented untuk membuat suatu model bahasa yang uniform atau seragam

yang disebut UML dan dapat digunakan oleh seluruh dunia.

Secara resmi, bahasa UML dimulai pada bulan Oktober 1994, ketika

Rumbaugh bergabung dengan Booch untuk membuat sebuah proyek pendekatan

metoda yang seragam dari masing-masing metoda mereka. Saat itu baru

dikembangkan draft metoda UML version 0.8 dan diselesaikan serta diterbitkan

pada bulan Oktober 1995. Bersamaan dengan saat itu, Jacobson bergabung dan

UML tersebut diperkaya ruang lingkupnya dengan metoda OOSE (Object

Oriented Software Engineering) sehingga muncul UML version 0.9 pada bulan

53

Juni 1996. Versi terbaru yang saat ini sedang digunakan adalah UML version 1.3.

Standar UML adalah standar dunia yang dikeluarkan oleh OMG (Object

Management Group), sebuah badan yang bertugas mengeluarkan standar-standar

teknologi object oriented dan software component.

2.12.3 Diagram UML

Diagram UML dikelompokkan menjadi beberapa perspektif yang berbeda

untuk memodelkan suatu sistem, antara lain :

• Class Diagram

Diagram yang menunjukkan serangkaian kelas, antar muka, kolaborasi, dan

hubungan diantaranya. (James Rumbaugh, Ivar Jacobson and Grady Booch,

1998, pg.107)

Menggambarkan elemen-elemen data dalam system yang hendak

dikembangkan, cara mengelompokkan elemen-elemen data, serta hubungan

antar elemen data. Diagram ini mengidentifikasikan atribut dan operasi yang

dimiliki oleh setiap class. (Britton and Doake, 2001, pg.69)

Pada class diagram terdapat beberapa simbol yang biasa digunakan dalam

pemodelan sistem, seperti yang ditunjukkan pada gambar.

54

- = Class

- = Assosiation

- = Generalization

- = one to one relation

Gambar 2.3 Contoh Class Diagram

Sumber :

http://mattonsoftware.com/Images /Order_Example_Class_Diagram.jpg

Nama Class

- Attribut

+ Operation()

55

• Use Case Diagram

Merupakan gambaran yang digunakan untuk memahami kebutuhan

sistem. Suatu Usecase Model dapat membantu dalam perencanaan,

pengembangan proyek, dan dokumentasi kebutuhan sistem. Usecase adalah

suatu interaksi antara user dengan suatu sistem yang menggambarkan

keinginan dari user dan tanggapan sistem terhadap user. (Bahrami, 1999,

pg.129)

Beberapa symbol yang digunakan dalam usecase diagram antara lain,

‐ = aktor, menggambarkan user yang berperan

‐ = System Boundary

‐ = Usecase, merupakan event yang terjadi

‐ = Assosiation, penghubung antara aktor dan

Usecase

56

Gambar 2.4 Contoh Usecase Diagram

Sumber :

http://www.sparxsystems.com.au/images/screenshots/uml2_tutorial/uc08.gif

• Sequence Diagram

Menggambarkan interaksi antar objek didalam dan disekitar sistem

(termasuk pengguna, tampilan dan sebagainya) berupa pesan yang

digambarkan terhadap waktu. Sequence Diagram terdiri atas dimensi vertical

(waktu) dan dimensi horizontal (objek-objek yang terkait).

Sequence Diagram biasa digunakan untuk menggambarkan skenario

atau rangkaian langkah-langkah yang dilakukan sebagai tanggapan dari

sebuah proses untuk menghasilkan output tertentu. Diawali dari aksi apa

yang men-trigger aktivitas tersebut, proses dan perubahan apa saja yang

terjadi secara internal dan output apa yang dihasilkan.

57

Gambar 2.5 Contoh Sequence Diagram

Sumber :

http://www.sparxsystems.com.au/images/screenshots/uml2_tutorial/seq07.gif

Komponen-komponen yang digunakan dalam sequence diagram :

1. Lifeline

Merepresentasikan partisipasi individual (object class).

58

Gambar 2.6 Lifeline

Sumber:

http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/seq01.gif.

2. Aktor

Aktor sebenarnya masih termasuk dalam lifeline, tetapi dalam kasus tertentu

jika sequence diagram dimiliki oleh usecase.

Gambar 2.7 Aktor

Sumber:


3. Pesan (Message)

Ditunjukkan sebagai anak panah.

59

Gambar 2.8 Message

Sumber:


4. Self Message

Merepresentasikan pengulangan dari suatu operasi, atau metode dengan

memanggil metode yang sama.

Gambar 2.9 SelfMessage

60

Sumber:


5. Start / end lifeline

Lifeline dapat dibuat atau dihancurkan selama skala waktu yang

direpresentasikan oleh sequence diagram. Pada kasus tertentu, lifeline

berakhir dengan tanda stop yang direpresentasikan oleh garis silang.

Gambar 2.10 Start/End Lifeline

Sumber:


• State Transition Diagram

Menurut Britton and Doake (2001, pg.109), state transition diagram

menggambarkan tanggapan dari suatu objek terhadap suatu aksi, tanggapan dapat

berupa perpindahan objek dari suatu keadaan pada suatu waktu ke keadaan

lainnya, atau objek tetap berada pada keadaan yang sama. State transition

diagram merupakan sifat (behavior) dari suatu class.

61

Gambar 2.11 Contoh State Diagram

Sumber:

http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/sm01.gif.

Keterangan :

- = Initial State yaitu titik awal proses.

- = Final State yaitu titik akhir proses.

- = Transition yaitu suatu hubungan antara 2 state

yang menunjukkan bahwa suatu objek pada state

pertama akan melakukan aksi tertentu dan

memasuki state kedua ketika terjadi suatu kejadian

dan memenuhi kondisi tertentu.

62

‐ = State merupakan suatu kondisi atau keadaan

suatu objek pada waktu tertentu selama

memenuhi beberapa kondisi, melakukan aktivitas

dan menunggu suatu kejadian.

• Activity Diagram

Menggambarkan berbagai alur aktifitas dalam system yang sedang

dirancang, bagaimana masing-masing alur berawal, keputusan yang mungkin

terjadi, dan bagaimana mereka berakhir.

Activity diagram juga dapat menggambarkan proses parallel yang

mungkin terjadi pada beberapa eksekusi. Activity diagram merupakan state

diagram khusus, dimana sebagian besar state adalah aksi dan sebagian besar

transisi dipicu oleh selesainya state sebelumnya (internal processing). Oleh

karena itu, activity diagram tidak menggambarkan behavior internal sebuah

sistem (dan interaksi antar suibsistem) secara abstrak, tetapi lebih

menggambarkan proses-proses dan jalur-jalur aktifitas dari level atas secara

umum.

Sebuah aktifitas dapat direalisasikan oleh satu atau lebih usecase.

Aktifitas menggambarkan proses yang berjalan, sementara usecase

menggambarkan bagaimana user menggunakan sistem untuk melakukan

aktifitas. Sama seperti state, standar UML menggunakan segiempat dengan sudut

membulat untuk menggambarkan aktifitas. Decision digunakan untuk

menggambarkan behavior pada kondisi tertentu. Untuk mengilustrasikan proses-

63

proses parallel (fork dan join) digunakan titik sinkronisasi yang dapat berupa

titik atau garis horizontal dan vertical.

Gambar 2.12 Contoh Activity Diagram

Sumber :

http://topcased-mm.gforge.enseeiht.fr/website/modeling/uml/tutorials/activityDiagram.html

Keterangan :

‐ = Initial State yaitu posisi (state) activity dimulai.

- = Final State yaitu posisi (state) activity berakhir.

‐ = Activity yaitu spesifikasi dari sifat-sifat yang

memiliki parameter yang berurutan.

64

‐ = Decision merupakan sebuah node yang

mengharuskan adanya pemenuhan tugas /

activity untuk dapat menuju ke activity

selanjutnya.

‐ = Fork yaitu memisahkan sebuah activity menjadi

2 activity yang berbeda.

‐ = Join yaitu menggabungkan 2 activity menjadi

sebuah activity.

‐ = Control Flow menunjukkan arus kontrol dari

activity ke activity lainnya.

• Deployment Diagram

Digunakan untuk melayani pemodelan hardware yang digunakan dalam

implementasi sistem dan asosiasinya antara komponen-komponen tersebut.

Elemen yang digunakan dalam dfeployment diagram adalah nodes (ditunjukkan

sebagai sebuah cube), komponen (ditunjukkan sebagai sebuah bujursangkar) dan

juga asosiasi.

65

Gambar 2.13 Contoh Deployment Diagram

Sumber:

http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/dd06.gif.

bab 2 landasan teori 2.1 perancangan dan pemesanan...

Documents