bab 2 landasan teori 2.1 perancangan dan pemesanan...
TRANSCRIPT
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 "e;Make a request"e;
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:
http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/seq02.gif.
3. Pesan (Message)
Ditunjukkan sebagai anak panah.
59
Gambar 2.8 Message
Sumber:
http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/seq03.gif.
4. Self Message
Merepresentasikan pengulangan dari suatu operasi, atau metode dengan
memanggil metode yang sama.
Gambar 2.9 SelfMessage
60
Sumber:
http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/seq04.gif.
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:
http://www.sparxsystems.com.au/images/screenshots/UML2_tutorial/seq05.gif.
• 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.