BAB III

LANDASAN TEORI

3.1. Website

Secara etimologi, website adalah kumpulan dari

halaman-halaman situs yang terangkum dalam sebuah

domain atau sub domain yang tempatnya berada dalam

World Wide Web (WWW) di dalam internet. Sebuah halaman

web biasanya berupa dokumen yang ditulis dalam format

HTML (Hyper Texs Markup Language) yang selalu bisa

diakses melalui HTTP, yaitu sebuah protokol yang

menyampaikan informasi dari server website untuk

ditampilkan kepada para pemakai melalui web broser. Semua

publikasi dari website tersebut dapat membentuk sebuah

jaringan informasi yang sangat besar. Adapun pengertian

website atau WWW menurut para ahli adalah:

World Wide Web merupakan jaringan dokumentasi

yang sangat besar yang saling berhubungan satu

dengan yang lain. Satu set protocol yang

mendefinisikan bagaimana system bekerja dan

mentransfer data, dan sebuah software yang

membuatnya bekerja dengan mulus. Web

menggunakan teknik hypertext dan multimedia yang

membuat internet mudah digunakan dijelajahi dan

dikontribusikan.

Web merupakan system hypermedia yang berarea luas yang

ditujukan

15
 16

untuk akses secara universal. Salah satu kuncinya adalah kemudahan

tempat seseorang atau perusahaan dapat menjadi bagian dari web

berkontribusi pada web.

(Hanson,2000)

Sedangkan Menurut Hardjono (2006) “web merupakan fasilitas

hyperteks untukmenampilkan data berupa teks, gambar, suara,

animasi, dan data multimedia lainnya.”

Halaman-halaman dari website dapat diakses melalui URL (uniform

Resoursce Locator) yang biasanya disebut dengan HOMEPAGE. URL ini

mengatur halaman situs untuk manjadi sebuah hirarki mekipus hyperlink

yang ada di dalam halaman tersebut mengatur para pembaca dan memberi

tahu mereka susunn keseluruhan dan bagaimana arus informasi ini berjalan.

Beberapa website membutuhkan subskripsi (data masukan) agar para user

bias mengakses sebagian atau keseluruhan isi website tersebut. Contohnya,

ada beberapa situs-situs bisnis, situs email gratis, yang membutuhkan sub

skripsi agar dapat mengakses situs tersebut.

Penemu website adalah Sir Timthy John Barnes Lee, sedangkan

website yang tersambung dalam jaringan pertama kali muncul pada tahun

1991. Awalnya Sir Timthy membuat website adalah untuk mempermudah

tukar menukar dan mempengaruhi informasi kepada sesama peneliti di

tempat Sir Timthy bekerja. Pada tanggal 30 April 1993, CERN (Tempat

dimana Sir Timthy bekerja) menginformasikan bahwa WWW dapat

 17

digunakan secara gratis oleh semua orang. Sebuah website bisa berupa hasil

bekerja dari perorangan atau individu, atau menunjukan kepemilikan dari

sebuah organisasi, perusahaan, dan biasanya website menunjukan beberapa

topik khusus, atau kepentingan tertentu.

Website ditulis atau secara dinamik dikonversi menjadi HTML dan

diakses melalui sebuah program software yang biasa disebut dengan web

broser, yang dikenal juga dengan HTTP client. Halaman website dapat

dilihat atau diakses melalui jaringan komputer dan internet, perangkat dapat

berupa komputer pribadi, laptop, PDA ataupun telepon seluler. Sebuah

website dibuat di dalam sebuah sistem komputer yang dikenal dengan web

server, atau yang disebut yang disebut juga HTTP server, artinya software

yang dipakai akan menjalankan sutau sistem, yang kemudian menerima

intruksi dari penggunjung website, lalu mengirim halaman-halaman yang

dipelukan untuk memenuhi permintaan pengunjung. Apache dan Microsoft

Internet Server (IIS).adalah perangkat lunak yang biasa digunakan untuk

web server.

Beberapa tahun lalu, masih sangat mudah untuk mengelompokan

jenis-jenis Website berdasarkan fungsi dan tujuannya, namun dengan

berkembanganya teknologi baik internet, browser, script dan program untuk

membangun website serta teknologi alat untuk mengakses internet, maka

jenis websitepun semakin beragam dan semakin kompleks.

Untuk membuat website diperlukan beberapa komponen yang harus

ada (terinstal) di dalam komputer, yaitu :

 18

1. Web browser merupakan komponen yang wajib yang harus ada di

komputer. Untuk menjalankan aplikasi web harus menggunakan web

browser, beberapa contoh web browser yaitu : Internet Exsploler,

Mozila Firefox, Opera, Chrome, Safari, dan lain-lain.

2. Web Sevrer merupakan perangkat lunak wajib jika membuat halaman

web dinamis. Dalam web server semua script web diletakkan, biasanya

diletakkan di “document root” dalam web server tersebut. Dengan

menggunakan web server maka pembuat web dapat melakukan ujicoba

terhadap halaman-halaman web yang dibuat, tanpa adanya koneksi

langsung ke internet (localhost). Contoh web server adalah IIS, Apache,

Xitami.

3. Script digunakan untuk membuat web statis menggunakan client side

scripting (HTML, CSS, Java Script). Untuk membuat web dinamis

menggunakan server side scripting (ASP, PHP, JSP).

4. Database server merupakan tempat penyimpanan data dalam sebuah

web. Contohnya MySQL, Microsoft SQL Server, Oracle, DB2 (IBM),

PostgreSQL.

5. Web editor merupakan perangkat lunak yang digunakan untuk

mengetikan perintah-perintah script yang diguankan baik itu client side

scrpting maupun server side scripting. Beberapa web editor dapat

digunakan untuk mengatur layout (tampilan) web secara instan. Berikut

contoh web editor : Notepad, Macromedia Dreamweaver, Ultra Edit,

Adobe Go Live, Netbean.

 19

6. Image Editor merupakan perangkat lunak yang digunakan untuk

mengelola gambar-gambar dan animasi yang akan digunakan di dalam

halaman web. Berikut contoh Image editor : Adobe Photoshop, Corell

Draw, Macromedia Flash.

3.2. Macromedia Dreamweaver8

Macromedia Dreamweaver8 yang diciptakan pada tahun 1997,

merupakan program aplikasi web editor yang cukup populer untuk

pembuatan website, selain tampilannya yang menarik, kemampuan fitur-

fiturnya juga memudahkan para pemakainnya untuk menciptakan halaman

web. Namun sekarang Macromedia dimiliki oleh adobe yang mengakuisi

pada tahun 2005, dan berganti nama menjadi Adobe Dreamweaver.

Adobe dreamweaver adalah script editor profesional yang digunakan

untuk melakukan desain secara visual dan mengelola halaman web serta

pembuat aplikasi web. Pengembang dan programer aplikasi web lebih

menyukai menggunakan Dreamweaver, karena Dreamweaver berbasiskan

WYSIWYG (What You See Is What You Get). (Mahdi:21)

Dreamweaver adalah sofware yang digunakan untuk mendesain web

yang menawarkan cara mendesain web dengan dua langkah sekaligus dalam

satu waktu, yaitu mendesain dan memprogram. Script akan mengisi secara

otomatis dan langsung mengisi program pengaturan.

 20

Dreamweaver mengendalikan fitur visual editing, sehingga pengguna

dapat secara cepat melakukan desain dan memfungsikan halaman web yang

diinginkan tanpa harus menuliskan beberapa baris kode pemrograman

Gambar 3.1 Tampilan Awal Dreamweaver8

3.2.1. Komponen – komponen Dreamweaver

Gambar 3.2 Ruang Kerja Dreamheaver8

1. Menu Utama

Menu utama berisi semua perintah yang dapat digunakan untuk

bekerja pada Dreamweaver seperti File, Edit, View, Insert,

Modify, Texts, Commands, Site, Window, dan Help

 21

a. File menu

Berisi menu standar seperti New, Open, Save, Cut, Copy, dan

Paste. File menu juga berisi beberapa perintah tambahan

seperti Preview In Browser dan Print Code.

b. Edit menu

Berisi perintah seleksi dan pencarian, seperti Select Parent

Tag dan Find and Replaces serta menyediakan akses ke

Keyboard Shourtcut Editor dan Tag Library Editor.

c. View menu

Mengijinkan untuk melihat tampilan dokumen dengan

beberapa cara (seperti Desain View dan Code View) dan

untuk menampilkan atau menyembunyikan beberapa elemen

pada dokumen dan peralatan yang dimiliki Dreamweaver.

d. Insert menu

Menyediakan alternatif untuk memasukkan objek pada

dokumen.

e. Modify menu

Untuk mengubah properti elemen halaman web atau item

lainnya yang dipilih. Menggunakan menu ini dapat mengedit

tag, mengubah tabel dan elemen tabel serta menampilkan

beberapa tindakan yang dapat dilakukan item pada library di

template.
 22

f. Text Menu

Menyediakan perintah yang dibutuhkan untuk pemformatan

pada teks.

g. Commands menu

Menyediakan akses untuk beberapa macam perintah,

termasuk untuk membuat album foto dengan cepat dan

melakukan optimasi gambar dengan menggunakan program

lain.

h. Site menu

Menyediakan item menu untuk membuat, membuka, dan

mengedit site.

i. Window menu

Menyediakan akses ke semua panel, inspectors, dan jendela

pada Dreamweaver8.

j. Help menu

Menyediakan akses ke dokumentasi yang dimiliki oleh

Dreamweaver, termasuk cara penggunaan Dreamweaver,

membuat extensi dan material lainnya yang dapat

membantu dalam menggunakan Dreamweaver yang baik.

 23

2. Insert Bar

Insert bar merupakan tempat semua perangkat kerja (tombol)

yang digunakan untuk membuat halaman web.

Gambar 3.3 Menu Insert Bar

a. Hyperlink: Menu ini digunakan untuk menuju lokasi lain dari

halaman web, file atau lokasi pada halaman yang sama.

b. Email link: Email link mengizinkan pengunjung situs

mengirimkan seseorang email dengan mengklik pada spesial

link.

c. Named Anchor: Tanda anchor ini untuk melakukan link yang

membawa user kebagian lain pada halaman yang sama.

d. Insert Table: Ketika tombol ini di klik, maka muncu jendela

untuk memasukan beberapa jumlah baris dan kolom pada

tabel.

e. Insert Div Tag: Untuk memasukan penempatan tag.

f. Draw Rectangle Hotspot: Layer kotak bukan tabel tapi kotak

tersebut dapat diisi teks, gambar, atau apa saja dan dapat

ditempatkan dimana saja.

g. Flash Botton: Untuk memasukan elemen flash pada web.

h. Date: Untuk memasukan tanggal ke dalam halaman web.

i. Server Side Include: Untuk memasukkan sisi halaman server.

 24

j. Comment: Tool yang digunakan untuk mengingat sesuatu

yang didesain pada halaman web.

k. Templates: Berisi contoh desain web yang sudah ada bawaan

dari perangkat lunak dreamweaver.

l. Tag Chooser: memasukan spesifik HTML, tag dari daftar.

Biasanya digunakan oleh Web Development yang sudah

mahir.

3. Toolbar Dokumen

Toolbar dokumen digunakan untuk mengubah tampilan dan

mengakses fungsi- fungsi penting secara cepat dan mudah. Pada

toolbar dokumen terdapat menu untuk berpindah antar dokumen

kerja window dan mengatur area kerja. Menu pada dokunen

toolbar yang digunakan untuk mengatur tampilan yaitu: Code,

Splite, dan Design.

Gambar 3.4 Toolbar Dokumen

a. Code: Merupakan kumpulan kode programyan telah disusun,

dan berfungsi untuk mengedit listing dari program.

b. Split: Digunakan untuk menampilkan code dan desain secara

bersamaan.
 25

c. Design: Digunakan sebagai tempat untuk meletakan objek –

objek ke dalam area kerja seperti tabel, form dan lainnnya.

4. Panel Properties

Gambar 3.5 Panel Properties

Panel properties merupakan panel yang digunakan untuk

melihat dan mngubah properti dari objek yang ada di area kerja.

Masing – masing objek mempunyai properti dari semua objek

yang ada di area kerja. Masing – masing objek mempunyai

properti yang berbeda. Untuk melihat properti objek yang

diinginkan, maka seleksi terlebih dahulu objek tersebut.

5. Panel Group

Gambar 3.6 Panel Group

 26

Panel group terdiri dari beberapa panel yang digunakan sebagai

window pembantu untuk bekerja di Dreamweaver. Terdapat

lima buah panel yaitu Design, Code, Aplication, Tag Inspector,

dan files. Pada panel files berisi semua file (html, image, swf)

jika telah mendefisikan suatu site ke dalam area kerja

Dreamweaver. Pada panel code berisi semua penjelasan tag-tag

HTML, dan cara penggunaannya. Panel design berisi format –

format CSS yang ada pada dokumen yang sedang dikerjakan.

3.3. HTML

HyperText Markup Language (HTML) adalah bahasa pengkodean

yang digunakan untuk membuat sebuah halaman web dan
menampilkan berbagai informasi di sebuah program web browser
internet. HTML sebenarnya bukanlah bahasa pemrograman melainkan
sebuah standar tata cara penyajian teks dan materi pendukungnya agar
dapat tersaji secara terstruktur di halaman web (Arifin, 2009).

Sedangkan menurut Ariona (2013:11), HTML adalah kependekan dari

Hypertext Markup Language. Artinya adalaha bahasa markup
(penanda) berbasis text atau bisa juga disebut sebagai formatting
language (bahasa untuk memformat). Jadi sudah jelas bahwa HTML
bukanlah bahasa pemrograman, melainkan bahasa markup/formatting.

Ada dua cara untuk membuat sebuah web page, yaitu dengan HTML

editor (FrontPage, Dreamweaver) atau dengan editor teks biasa (notepad,

wordpad). Dokumen HTML disusun oleh elemen-elemen yang berupa

Head, Body, Table, Paragraf, dan List. Elemen-elemen tersebut ditandai

dengan menggunakan Tag, yaitu tanda “<nama elemen>”. Tag umumnya

 27

berpasangan (misal <body> dengan </body>). Ada beberapa elemen yang

tidak mengharuskan tag-tagnya berpasangan, contoh :

1. paragraf dengan tag <p>

2. ganti baris - line break dengan tag <br>

3. garis datar - horizontal rule dengan tag <hr>

4. list item dengan tag <li>

Elemen-elemen yang dibutuhkan untuk membuat suatu dokumen

HTML dinyatakan dengan tag <HTML>,<HEAD> dan <BODY> berikut

pasangan-pasangannya. Setiap dokumen terdiri atas head dan body serta dua

section yaitu section head dan section body. Elemen head berisi informasi

tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya

yang tersusun dari link, grafik, paragraf dan elemen lainnya. Pola dasarnya

adalah :

<HTML>
<BODY>
</BODY>
</HTML>

Setiap dokumen html harus diawali dengan menuliskan tag <html> dan tag

</html> di akhir dokumen. Elemen head ditandai dengan tag <head> di

awal dan </head> di akhir, berisi tentang informasi dokumen htmlnya.

Elemen body ditandai dengan tag <body> di awal dan diakhir dengan tag

</body>, berisi isi dokumen yang akan ditampilkan pada browser, meliputi

paragraf, grafik, link, tabel dan sebagainya.

 28

Tabel 3.1 Tag-Tag Dasar HTML

Nama Tag Tag Awal Tag Akhir Keterangan

Tag dasar untuk mendefinisikan
Html
<html> </html> dokumen html
Untuk menuliskan keterangan
Head <head> </head> tentang dokumen web yang akan
ditampilkan
Untuk memberikan
judul/informasi pada caption web
Title <title> </title> browser tentang topik atau judul
dokumen web yang ditampilkan
Section utama dalam dokumen
Body
<body> </body> web
Paragraf <p> </p> Membuat teks berparagraf
Memaksakan ganti baris pada
Line break
<br> dokumen web
Membentuk tulisan dengan pola
judul (heading) dan „n‟ adalah
Heading <Hn> </Hn> nomor tingkatan dari 1-6

Garis Membuat garis mendatar pada

mendatar <hr> dokumen
Membentuk tulisan menjadi
Komentar
<!-- --> komentar

3.4. PHP

“PHP (Hypertext PreProcessor) adalah sebuah bahasa pemrograman

yang berbentuk scripting. Sistem kerja program ini adalah sebagai

interpreter bukan sebagai compiler” (Nugroho : 2004). Bahasa interpreter

adalah bahasa yang script-script program tidak harus diubah ke dalam

bentuk source code. Sehingga pada saat menjalankan bentuk program, kode

dasar secara langsung akan dijalankan tanpa harus melalui proses

pengubahan ke dalam bentuk source code. Ketika dipanggil dari web

 29

browser, program yang ditulis dengan PHP akan di-parsing (diuraikan) di

dalam web server oleh interpreter PHP dan diterjemahkan ke dalam

dokumen HTML, yang selanjutnya akan ditampilkan kembali ke web

browser. Karena pemrosesan program PHP dilakukan di lingkungan web

server, PHP dikatakan sebagai bahasa sisi server (server-side). Oleh sebab

itu, kode PHP tidak akan terlihat pada saat user memilih perintah ”View

Source” pada web browser yang digunakan.

PHP (Hypertext PreProcessor) adalah sebuah script yang bersifat

server-side yang artinya semua proses akan dikerjakan di sisi server
dan hanya hasilnya saja yang akan dikirim ke browser. PHP pertama
kali dibuat oleh Rasmus Lerdorf untuk mengetahui siapa yang telah
mengunjungi situsnya (Pranowo, 2009).

“Penulisan script PHP harus selalu didahului dengan tanda ( <? ) dan

diakhiri dengan tanda ( ?> ). Apabila tanda tersebut tidak ada, maka script

yang ditulis dianggap sebagai HTML biasa” (Pranowo, 2009). Setiap baris

perintah atau statement harus diakhiri dengan menggunakan tanda titik

koma ( ; ). Seperti pada pemrograman lainnya, PHP memiliki beberapa

aturan penulisan yaitu bagaimana memulai dan mengakhiri PHP. Adapun

beberapa aturan dalam penulisan kode program PHP ditunjukkan pada tabel

berikut :

Tabel 3.2 Kode Pembuka dan Penutup PHP

Awal Akhir
<? ?>
<?php ?>
<script languange = “php”> </script>
 30

3.5. Cascading Style Sheet (CSS)

CSS banyak digunakan untuk memperluas kemampuan HTML dalam

memformat dokumen web atau untuk mempercantik tampilan web, bahkan

untuk pemosisian dan layouting halaman web. Dengan mendefiniskan suatu

style sekali saja maka style itu akan dapat digunakan berulangkali.

CSS telah didukung di beberapa browser, terutama versi baru sehingga

penempatan layout menjadi lebih fleksibel. Membuat HTML menggunakan

tag minimal berpengaruh terhadap ukuran file, dapat menampilkan konten

utama terlebih dahulu, sementara gambar dan lain dapat menampilkan

sesudahnya. Selain itu penggunaan CSS pada file terpisah dapat

mempermudah pengubahan tampilan situs secara keseluruhan.

3.6. JavaScript

JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML

dan diproses di sisi klien. Bahasa ini adalah bahasa pemrograman untuk

memberikan kemampuan tambahan terhadap bahasa HTML dengan

mengijinkan pengeksekusian perintah-perintah di sisi user, yang artinya di

sisi browser bukan di sisi server web. JavaScript bergantung kepada

browser (navigator) yang memanggil halaman web yang berisi skrip-skrip

dari JavaScript dan tentu saja terselip di dalam dokumen HTML. Dengan

adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas.

Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk

memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan

 31

ke server. Ketika mengisi sebuah formulir yang divalidasi menggunakan

JavaScript, mengetikkan data lalu klik submit, sebelum data dikirimkan, jika

memang data yang diisi tidak valid, fungsi JavaScript yang ada pada

halaman web akan bekerja secara langsung. Tanpa perlu membuang-buang

waktu dengan mengirimkan data ke server baru divalidasi di server

kemudian server mengirimkan respon balik mengenai ketidak-validan input

data.

JavaScript bukanlah bahasa Java dan merupakan dua bahasa yang

berbeda. Javascript tidak memerlukan kompilator atau penerjemah khusus

untuk menjalankannya (pada kenyataannya kompilator JavaScript sendiri

sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa Java

yang memerlukan kompilator khusus untuk menerjemahkannya di sisi

user/klien, dan hasil kompilasinyalah yang dijalankan oleh klien.

Javascript bekerja pada sisi browser. Untuk menampilkan halaman web,

user menuliskan alamat web di address bar URL. Setelah itu, browser
“mengambil” file html (dengan file Javascript yang melekat padanya) ke
server yang beralamat di URL yang diketikan oleh user. Selesai file diambil,
file ditampilkan pada browser. Setelah file JavaScript berada browser,
barulah skrip JavaScript tersebut bekerja. Efek dari JavaScript yang bekerja
pada sisi browser ini, JavaScript dapat merespon perintah user dengan
cepat, dan membuat halaman web menjadi lebih responsif. JavaScript
melakukan apa yang tidak bisa dilakukan oleh HTML, PHP dan CSS, dalam
menangani hal-hal yang membutuhkan respon cepat terhadap aksi dari user,
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
seperti validasi data.

Struktur dari Javascript adalah sebagai berikut :

Penulisan kode javascript

// - - >
</SCRIPT>
 32

Keterangan :

Kode <!-- // --> umumnya disertakan dengan tujuan agar sekiranya browser

tidak mengenali JavaScript maka browser akan memperlakukannya sebagai

komentar sehingga tidak ditampilkan pada jendela browser. (Mahdi:31)

Definisi Javascript menurut para ahli yaitu:

Javascript adalah bahasa pemrograman yang sederhana karena bahasa

ini tidak dapat digunakan untuk membuat aplikasi ataupun apllet.

Dengan javascriptkita dapat dengan mudah membuat sebuah halaman

web yang interaktif.(Hardjono, 2006)

Sedangkan menurut Ellswoth dan Mathew (2000), Javascript adalah

pendekatan lain untuk membuat hal web menjadi lebih interaktif, baik

dalamdeteksi maupun tanggapan ke interaksi pengguna dengan

halaman web, javascript dapat langsung digabungkan dengan HTML,

tanpa harus di compile terlebih dahulu.

3.7. MySQL

1. Memahami Database MySQL

Database secara sederhana dapat disebut sebagai gudang data.

Secara teori, database adalah kumpulan data atau informasi yang

kompleks, data-data tersebut disusun menjadi beberapa kelompok

dengan tipe data sejenis (disebut tabel), di mana setiap datanya dapat

saling berhubungan satu sama lain atau dapat berdiri sendiri, sehingga
 33

mudah diakses. Dalam basis data, database dapat dikelola menggunakan

program aplikasi basis data, misalnya : MySQL, Access, PostgreSQL,

dan SQL Server. Aplikasi yang dapat membuat dan mengelola database

sering disebut SMBD (Sistem Manajemen Basis Data) atau DBMS

(Data Base Management System). Ada dua perbedaan SMBD (Sistem

Manajemen Basis Data) yang sering digunakan, yaitu database yang

bersifat stand alone dan database yang bersifat database server. Berikut

ini pengkategoriannya (Nugroho, 2008:2) :

a) Database server (berjalan client-server) : MySQL, MsQL,

PostgreSQL, SQL Server, Oracle, Interbase.

b) Bukan database server (berjalan stand alone) : Microsoft Access,

Paradox, dBase.

MySQL merupakan database server yang awalnya hanya berjalan

pada sistem Unix dan Linux. Seiring berjalannya waktu dan banyaknya

peminat yang menggunakan database ini, MySQL merilis versi yang

dapat diinstal pada hampir semua platform, termasuk Windows.

2. Keterkaitan MySQL dan SQL

SQL merupakan kependekan dari kata “Structured Query

Language”. SQL merupakan suatu bahasa permintaan yang
terstruktur. Karena pada penggunaannya, SQL memiliki beberapa
aturan yang telah distandarkan oleh asosiasi yang bernama ANSI
(American National Standarts Institute). Jadi SQL adalah bahasa
permintaan yang melekat pada satu database atau SMBD tertentu,
sedangkan MySQL merupakan database server-nya. Dengan kata
lain, MySQL merupakan SMBD-nya dan SQL adalah perintah atau
bahasa yang melekat di dalam SMBD tersebut (Nugroho, 2008:3).
 34

3.8. XAMPP

XAMPP merupakan singkatan dari :

X : multi platform, bisa Windows, Linux, Mac OS, maupun Solaris

A : Apache HTTP Server

M : MySQL Database

Server P : PHP Scripting Language

P : Perl Scripting Language

XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam

satu buah paket. Dalam peketnya sudah terdapat Apache (web server),

MySQL (database), PHP (server-side scripting), Perl, FileZilla FTP server,

PhpMyAdmin dan berbagai pustaka bantu lainnya. Dengan menginstal

XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web

server Apache, PHP dan MySQL secara manual. XAMPP akan

menginstalasi dan mengonfigurasikannya secara otomatis.

Gambar 3.7 Gambar XAMPP

Berikut penjelasan tentang web server Apache, PHP, MySQL, PhpMyAdmin

dan Perl :
 35

1. Apache

Tugas utama Apache adalah menghasilkan halaman web yang benar

kepada peminta, berdasarkan kode PHP yang dituliskan oleh pembuat

halaman web.

2. PHP

PHP merupakan bahasa pemrograman untuk membuat web yang

bersifat server-side scripting. PHP memungkinkan untuk membuat

halaman web yang bersifat dinamis. PHP dapat dijalankan pada

berbagai macam sistem operasi misalnya Windows, Linux dan Mac OS.

Selain Apache, PHP juga mendukung beberapa web server lain,

misalnya Microsoft IIS, Caudium, PWS dan lain-lain. Sistem

manajemen database yang sering digunakan bersama PHP adalah

MySQL.

3. MySQL

MySQL adalah sebuah sistem manajemen database yang bersifat open

source, digunakan untuk membuat dan mengelola database beserta

isinya, menambah, mengubah dan menghapus data yang berada dalam

database. MySQL merupakan sistem manajemen database yang

bersifat relational, artinya data-data yang dikelola dalam database akan

diletakkan pada beberapa tabel yang terpisah sehingga manipulasi data

akan lebih cepat.

4. PhpMyAdmin
 36

Merupakan sebuah software yang berbentuk seperti halaman situs yang

terdapat pada web server. Fungsi dari halamanin ini adalah sebagai
pengendali database MySQL sehingga pengguna MySQL tidak perlu
repot untuk membuat perintah-perintah SQL. Karena dengan adanya
halaman ini semua hal tersebut dapat dilakukan hanya dengan mengklik
menu fungsi yang ada pada halaman PhpMyAdmin (Kurniawan,
2010:17).

5. Perl

Adalah bahasa pemrograman untuk segala keperluan, dikembangkan

pertama kali oleh Larry Wall di mesin Unix. Perl sangat populer

digunakan dalam program-program CGI (Common Gateway Interface)

dan berbagai protokol internet lainnya. Seperti juga bahasa populer

lainnya, Perl menerima banyak kritikan, salah satunya adalah

sintaksnya yang susah dibaca karena banyak menggunakan simbol-

simbol yang bukan huruf dan angka.

3.9. UML

UML merupakan singkatan dari Unified Modelling Language adalah

sekumpulan pemodelan konvensi yang digunakan untuk menentukan
atau menggambarkan sebuah sistem perangkat lunak dalam kaitannya
dengan objek (Whitten, 2004:430).

UML dapat juga diartikan sebuah bahasa grafik standar yang

digunakan untuk memodelkan perangkat lunak berbasis objek. UML
pertama kali dikembangkan pada pertengahan tahun 1990an dengan
bekerjasama antara James Rumbaugh, Grady Booch dan Ivar
Jacobson, yang masing-masing telah mengembangkan notasi mereka
sendiri di awal tahun 1990an (Lethbride dan Leganiere, 2002:151).

Komponen-komponen UML. UML terdiri dari diagram-diagram, di

mana setiap diagram di dalam UML memperlihatkan sistem dari sudut

pandang yang berbeda :

 37

1. Use Case Diagram

Menggambarkan fungsionalitas yang diharapkan dari sebuah sistem.

Yang ditekankan adalah “apa” yang diperbuat sistem, dan bukan

“bagaimana”. Sebuah use case mempresentasikan sebuah interaksi

antara aktor dengan sistem. “Use case adalah sebuah gambaran dari

fungsi sistem yang dipandang dari sudut pandang pemakai” (Schmuller,

1999:10).

2. Activity Diagram

Menggambarkan berbagai alir aktivitas dalam sistem yang sedang

dirancang. Bagaimana masing-masing alir berawal, desicion yang

mungkin terjadi, dan bagaimana alir aktivitas itu berakhir. Activity

diagram juga dapat menggambarkan proses paralel yang mungkin

terjadi pada beberapa eksekusi.

3. Sequence Diagram

Sequence diagram secara grafis menggambarkan bagaimana objek

berinteraksi antara satu sama lain melalui pesan eksekusi pada sebuah

use case atau operasi. “Sebuah sequence diagram menunjukkan urutan

pertukaran pesan yang dilakukan oleh sekumpulan objek atau aktor

yang mengerjakan pekerjaan” (Lethbridge dan Laganaiere, 2002:270).

4. Class Diagram

“Kelas adalah sebuah kategori atau pengelompokan dari hal-hal yang

mempunyai atribut dan fungsi yang sama” (Schmuller, 1999:8).

 38

“Class diagram adalah sebuah grafik presentasi dari gambaran statis

yang menunjukkan sekumpulan model elemen yang terdeklarasi (statis)

seperti kelas, tipe dan isinya serta hubungannya” (Rumbaugh,

1999:190).

“Sebuah class diagram terdiri dari sejumlah kelas yang dihubungkan

dengan garis yang menunjukkan hubungan antar kelas yang disebut

dengan Associations” (Rambaugh, 1999:47). Jenis-jenis Associations

(Rambaugh, 1999:49-53) yaitu :

a. Aggregation

Associations yang menggambarkan hubungan antar kelas dimana

kelas yang satu merupakan bagian dari kelas yang lainnya.

b. Composition

Associations yang menggambarkan hubungan erat antar kelas di

mana kelas composite mempunyai segala tanggung jawab untuk

mengatur kelas lainnya dan kedua kelas mempunyai lifetime yang

sama.

c. Bidirectionality

Associations yang menghubungkan antara dua kelas atau lebih yang

berbeda object tapi tidak bergantung satu sama lainnya, sehingga

apabila salah satu kelas dihilangkan, kelas yang lain dapat tetap

digunakan.

d. Generalization
 39

Associations yang menghubungkan dua kelas atau lebih untuk

membedakan antara kelas yang umum dengan kelas yang khusus.

e. Inheritance

Associations yang menghubungkan dua kelas atau lebih yang dapat

menurunkan properties seperti attributes, operations antara kelas

induk dengan kelas anak.

Berikut ini adalah simbol-simbol yang digunakan dalam perancangan

website dengan uml:

Tabel 3.3 Simbol Use Case Diagram

NO GAMBAR NAMA KETERANGAN

Menspesifikasikan himpuan peran yang

1 Actor pengguna mainkan ketika berinteraksi
dengan use case.

Hubungan dimana perubahan yang terjadi

pada suatu elemen mandiri (independent)
2 Dependency akan mempengaruhi elemen yang
bergantung padanya elemen yang tidak
mandiri (independent).
 40

NO GAMBAR NAMA KETERANGAN

Hubungan dimana objek anak

(descendent) berbagi perilaku dan
3 Generalization
struktur data dari objek yang ada
di atasnya objek induk (ancestor).

Menspesifikasikan bahwa use

4 Include
case sumber secara eksplisit.

Menspesifikasikan bahwa use

case target memperluas perilaku
5 Extend
dari use case sumber pada suatu
titik yang diberikan.

Apa yang menghubungkan antara

6 Association
objek satu dengan objek lainnya.

Menspesifikasikan paket yang

menampilkan sistem secara
7 System terbatas.

Deskripsi dari urutan aksi-aksi

yang ditampilkan sistem yang
8 Use Case
menghasilkan suatu hasil yang
terukur bagi suatu aktor

Interaksi aturan-aturan dan

elemen lain yang bekerja sama
9 Collaboration untuk menyediakan prilaku yang
lebih besar dari jumlah dan
elemen-elemennya (sinergi).

Tabel 3.4 Simbol Class Diagram
NO GAMBAR NAMA
1 Generalization
2 Nary Association
3 Class
4 Collaboration
5 Realization
6 Dependency
7 Association
41
KETERANGAN
Hubungan dimana objek anak
(descendent) berbagi perilaku
dan struktur data dari objek yang
ada di atasnya objek induk
(ancestor).
Upaya untuk menghindari
asosiasi dengan lebih dari 2
objek.
Himpunan dari objek-objek yang
berbagi atribut serta operasi
yang sama.
Deskripsi dari urutan aksi-aksi
yang ditampilkan sistem yang
menghasilkan suatu hasil yang
terukur bagi suatu aktor
Operasi yang benar-benar
dilakukan oleh suatu objek.
Hubungan dimana perubahan
yang terjadi pada suatu elemen
mandiri (independent) akan
mempegaruhi elemen yang
bergantung padanya elemen
yang tidak mandiri
Apa yang menghubungkan
antara objek satu dengan objek
lainnya
 42

Tabel 3.5 Simbol Sequence Diagram

NO GAMBAR NAMA KETERANGAN

Objek entity, antarmuka yang saling

berinteraksi.
1 LifeLine

Spesifikasi dari komunikasi antar

objek yang memuat informasi-
2 Message
informasi tentang aktifitas yang
terjadi

Spesifikasi dari komunikasi antar

objek yang memuat informasi-
3 Message
informasi tentang aktifitas yang
terjadi

Tabel 3.6 Simbol State Chart Diagram

NO GAMBAR NAMA KETERANGAN

Nilai atribut dan nilai link pada

1 State suatu waktu tertentu, yang
dimiliki oleh suatu objek.

Initial Pseudo Bagaimana objek dibentuk atau

2
State diawali

Bagaimana objek dibentuk dan

3 Final State
dihancurkan

Sebuah kejadian yang memicu

sebuah state objek dengan cara
4 Transition
memperbaharui satu atau lebih
nilai atributnya
 43

NO GAMBAR NAMA KETERANGAN

Apa yang menghubungkan antara

5 Association
objek satu dengan objek lainnya.

Elemen fisik yang eksis saat

aplikasi dijalankan dan
6 Node
mencerminkan suatu sumber daya
komputasi.

Tabel 3.7 Simbol Activity Diagram

NO GAMBAR NAMA KETERANGAN

Memperlihatkan bagaimana
1 Actifity masing-masing kelas antarmuka
saling berinteraksi satu sama lain

State dari sistem yang

2 Action mencerminkan eksekusi dari suatu
aksi

Initial Bagaimana objek dibentuk atau

3
Node diawali.

Actifity Bagaimana objek dibentuk dan

4
Final Node dihancurkan

Satu aliran yang pada tahap tertentu

5 Fork Node
berubah menjadi beberapa aliran

3.10. Adobe Photoshop CS5

Photoshop adalah program berbasis pixel untuk mengolah hasil

fotografi maupun menghasilkan lukisan yang diperoleh dari efek-efek
khusus. Di samping kemampuannya sangat bagus untuk memanipulasi
foto, program ini juga digunakan untuk mendesain grafis web
(Dyaninta, 2009:10).

Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat

lunak editor citra buatan Adobe Systems yang dikhususkan untuk

 44

pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak

digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap

sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah

gambar/foto, dan bersama Adobe Acrobat, dianggap sebagai produk terbaik

yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini

disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut

Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3, versi

kesebelas adalah Adobe Photoshop CS4, versi keduabelas adalah Adobe

Photoshop CS5, versi (ketigabelas) adalah Adobe Photoshop CS6, dan Versi

yang terakhir adalah versi (keempatbelas) Adobe Photoshop CS7 .

3.11. Web Browser

Sebuah web browser adalah sebuah aplikasi perangkat lunak yang

memungkinkan pengguna untuk menayangkan dan berinteraksi dengan

tulisan, gambar, video, musik dan berbagai informasi lainnya yang terdapat

pada halaman web di sebuah situs di world wide web atau di jaringan LAN

lokal. Tulisan dan gambar di halaman web dapat mempunyai hyperlink ke

halaman web lain di mesin yang sama atau di situs web lainnya. Web

browser memungkinkan pengguna secara cepat dan mudah mengakses

informasi yang diberikan oleh banyak situs web dengan cara menjelajahi

link tersebut. Web browser memformat informasi HTML untuk di

tayangkan, oleh karena itu penampakan halaman web akan agak berbeda

dari satu browser ke browser yang lain. Namun sesungguhnya kegunaan

 45

web browser adalah sama. Ada beberapa web browser yang dapat

digunakan di antaranya adalah :

1. Mozilla Firefox

Dibuat oleh Mozilla Corporation, Firefox adalah salah satu web

browser open source yang dibangun dengan Gecko layout engine. Tak

hanya handal, Firefox juga didukung oleh sejumlah add-ons/ plugin

yang merupakan aplikasi tambahan yang dapat dipasang sehingga

memperkaya fitur software yang bersangkutan.

Gambar 3.8 Mozilla Firefox 9

2. Google Chrome

Google Chrome adalah web browser besutan Google yang memiliki

beberapa keunggulan. Chrome bisa dikatakan browser yang sangat

ringan, cepat dan kaya akan aplikasi/add-on. Selain itu Chrome

menggunakan engine Webkit, engine browser yang rata-rata

mendukung fitur-fitur terbaru dari teknologi HTML dan CSS. Engine

 46

adalah kode utama dalam aplikasi untuk menampilkan halaman web,

contohnya Mozilla untuk Firefox dan Webkit untuk Google Chrome

dan Safari.

Gambar 3.9 Google Chrome 17

3. Safari

Safari adalah web browser dari Apple. Sama halnya dengan Chrome,

Safari menggunakan engine Webkit sehingga mendukung fitur-fitur

terbaru HTML dan CSS.

 47

Gambar 3.10 Safari 5

4. Internet Explorer

Web browser besutan Microsoft Corporation biasa dikenal dengan

nama pendek IE, sejak 1995 IE mulai dimasukan sebagai default

software pada saat instalasi sistem operasi Windows.

Penggunaan Internet Explorer dalam pengujian halaman web

sangat tidak dianjurkan (terutama versi 7 ke bawah) karena
dukungannya yang kurang serta proses penampilan halaman web
yang terkadang menjadi berantakan (Ariona, 2013:5).

Gambar 3.11 Internet Explorer 8

 48

5. Opera

Opera dikembangkan oleh Opera Software Company. jika Firefox

punya add-ons, Opera punya “Opera Widgets”, sebuah aplikasi web

kecil yang dijalankan bersamaan dengan Opera yang mempunyai

kegunaan tertentu, layaknya add-ons Firefox.

Gambar 3.12 Opera