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.

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.

14
 15

keseluruhan dan bagaimana arus informasi ini berjalan. Beberapa

website membutuhkan subkripsi (data masukan) agar para user bisa

mengakses sebagaian atau keseluruhan isi website 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

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

 16

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 :

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).

 17

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.

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. Profile

Profile adalah gambaran singkat dari seseorang, lembaga, organisasi,

benda ataupun wilayah. Profil yang baik ditulis dengan singkat namun jelas

dan dapat menggambarkan seseorang atau lembaga secara umum. profil bisa

dibuat tertulis, baik dikertas atau di website ataupun melalu email elektronik.

Pemanfaatan profil belakangan cukup banyak, misalnya saja dapat

dijadikan untuk lamaran kerja, untuk meminjam uang, untuk

memperkenalkan diri, memperkenalkan suatu instansi kepada masyarakat

dan sebagainya.
 18

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

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

tidak mengharuskan tag-nya 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
 19

tentang dokumen tersebut, dan elemen body berisi teks yang

sebenarnya yang tersusun dari link, grafik, paragraf dan elemen lainnya.

Pola dasarnya adalah :

<html>
<head>
...informasi tentang dokumen HTML
</head>
<body>
...informasi yang ditampilkan dalam browser
</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.

Tag-tag dasar HTML :

Tabel 3.1 Tag-tag Dasar HTML

Nama Tag Tag Awal Tag Akhir Keterangan

Tag dasar untuk
Html <html> </html>
mendefinisikan dokumen html
Untuk menuliskan keterangan
Head <head> </head> tentang dokumen web yang
akan ditampilkan
Untuk memberikan
judul/informasi pada caption
title <title> </title> web browser tentang topik atau
judul dokumen web yang
ditampilkan
Section utama dalam dokumen
Body <body> </body>
web
 20

paragraf <p> </p> Membuat teks berparagraf

Memaksakan ganti baris pada
Line break <br>
dokumen web
Membentuk tulisan dengan
pola judul (heading) dan ‘n’
heading <Hn> </Hn>
adalah nomor tingkatan dari 1-
6
Garis Membuat garis mendatar pada
<hr>
mendatar dokumen
Membentuk tulisan menjadi
komentar <!-- -->
komentar

Contoh skrip HTML :

<html>
<head>
<title>Ini adalah judulnya</title>
</head>
<body>
Tulisan ini adalah tulisan normal
<p>Tulisan ini merupakan contoh penggunaan paragraf</p>
<p>Ini paragraf yang pertama</p>
<p>Ini adalah paragraf yang kedua</p>
Memotong<br>baris<br>dalam
suatu<br>tulisan,<br>digunakan tag br.<br>
</body>
</html>

Hasil :

Gambar 3.1 Tampilan skrip HTML pada Browser

 21

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

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

 22

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>

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
 23

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

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,
 24

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>

Keterangan :

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

browser tidak mengenali JavaScript maka browser akan memperlakukannya

sebagai komentar sehingga tidak ditampilkan pada jendela browser.

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

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
 25

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).
 26

3.8. XAMPP Server

3.3.1 Pengertian XAMPP Server

Gambar 3.2 Logo XAMPP

XAMPP adalah perangkat lunak bebas, yang mendukung

banyak sistem operasi, merupakan kompilasi dari beberapa

program ( Jogiyanto, 2005). Fungsinya adalah sebagai server yang

berdiri sendiri (localhost), yang terdiri atas program Apache HTTP

Server, MySQL database, dan penerjemah bahasa yang ditulis

dengan bahasa pemrograman PHP dan Perl. Nama XAMPP

merupakan singkatan dari X (empat sistem operasi apapun),

Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU

General Public License dan bebas, merupakan web server yang

mudah digunakan yang dapat melayani tampilan halaman web

yang dinamis.

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
 27

Jacobson, yang masing-masing telah mengembangkan notasi mereka

sendiri di awal tahun 1990an (Lethbride dan Leganiere, 2002:151).

UML terdiri dari diagram-diagram, di mana setiap diagram di dalam

UML memperlihatkan sistem dari sudut pandang yang berbeda :

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).

Use case diagram digunakan untuk menggambarkan hubungan

antara use case dengan actor. Komponen pembentuk diagram use case

adalah:

a. Aktor (actor), menggambarkan pihak-pihak yang berperan dalam

sistem.

Aktor menggambarkan orang, sistem atau entitas eksternal

yang dapat menjalankan sistem dengan input atau masukan

kejadian-kejadian.

b. Use Case, aktivitas atau sarana yang disiapkan oleh bisnis atau

sistem.

Use case mengekspresikan apa yang user harapkan terhadap

sistem. Narasi use case menjelaskan secara detail bagaimana user

berinteraksi dengan sistem saat mengakses use case. Use case

 28

diberi nama yang menyatakan apa hal yang dicapai dari

interaksinya dengan aktor.

c. Hubungan (link atau relationship), aktor mana saja yang terlibat

dalam use case ini.

Relasi (relationship) digambarkan sebagai bentuk garis antara

dua simbol dalam use case diagram. Relasi antara actor dan use

case disebut juga dengan asosiasi (association). Asosiasi ini

digunakan untuk menggambarkan bagaimana hubungan antara

keduanya. Relasi-relasi yang terjadi pada use case diagram bisa

antara actor dengan use case atau use case dengan use case.

Berikut ini merupakan gambar dari tiga komponen sistem dalam use

case diagram :

<nama use case>

<nama actor>

Gambar 3.3 Komponen-komponen Use Case

Jenis-jenis use case relationship (Rambaugh, 1995:66) antara lain :

a. Association

Garis yang menghubungkan antara actor dengan use case.

 29

b. Extend

Menghubungkan antara dua atau lebih use case yang

merupakan tambahan dari base use case yang biasanya untuk

mengatasi kasus pengecualian.

c. Generalization

Hubungan antara use case umum dengan use case yang lebih

khusus.

d. Include

Menghubungkan antara dua atau lebih use case yang

menunjukkan use case tersebut merupakan bagian dari base use

case.

Tabel 3.3 Simbol Use Case Diagram

No Gambar Nama Keterangan

Menspesifikasikan himpuan peran
1 Actor yang pengguna mainkan ketika
berinteraksi dengan use case.
Hubungan dimana perubahan yang
terjadi pada suatu elemen mandiri
(independent) akan mempengaruhi
2 Dependency
elemen yang bergantung padanya
elemen yang tidak mandiri
(independent).
Hubungan dimana objek anak
(descendent) berbagi perilaku dan
3 Generalization
struktur data dari objek yang ada di
atasnya objek induk (ancestor).
Menspesifikasikan bahwa use case
4 Include
sumber secara eksplisit.
 30

No Gambar Nama Keterangan

Menspesifikasikan bahwa use case
target memperluas perilaku dari use
5 Extend
case sumber pada suatu titik yang
diberikan.
Apa yang menghubungkan antara
6 Association
objek satu dengan objek lainnya.

Menspesifikasikan paket yang

7 System
8 Use Case
9 Collaboration
10 Note
menampilkan sistem secara
terbatas.
Deskripsi dari urutan aksi-aksi yang
ditampilkan sistem yang
menghasilkan suatu hasil yang
terukur bagi suatu actor
Interaksi aturan-aturan dan elemen
lain yang bekerja sama untuk
menyediakan prilaku yang lebih
besar dari jumlah dan elemen-
elemennya (sinergi).
Elemen fisik yang eksis saat
aplikasi dijalankan dan
mencerminkan suatu sumber daya
komputasi

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.

 31

Tabel 3.4 Simbol Activity Diagram

No Gambar Nama Keterangan

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

State dari sistem yang mencerminkan

2 Action
eksekusi dari suatu aksi

Bagaimana objek dibentuk atau

3 Initial Node
diawali.
Activity Bagaimana objek dibentuk dan
4
Final Node dihancurkan
Satu aliran yang pada tahap tertentu
5 Fork Node
berubah menjadi beberapa aliran

6 Decision Pilihan untuk mengambil keputusan.

Digunakan untuk menunjukkan

kegiatasn yang dilakukan secara
7 Fork/Join
paralel atau untuk menggabungkan
dua kegiatan paralel menjadi satu.

8 Rake Menunjukkan adanya dekomposisi.

Tanda waktu.
9 Time

10 Send Tanda pengiriman.

3. Sequence Diagram

Sequence diagram secara grafis menggambarkan bagaimana objek

berinteraksi antara satu sama lain melalui pesan eksekusi pada sebuah
 32

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).

Tabel 3.5 Simbol Sequence Diagram

No Gambar Nama Keterangan

Objek atau partisipan merupakan
instance dari sebuah class dan
dituliskan tersusun secara
Objek horizontal. Digambarkan sebagai
1
: Objek 1 (Partisipan) sebuah class (kotak) dengan
nama objek didalamnya yang
diawalai dengan sebuah titik
koma.
Actor juga dapat berkomunikasi
2 Actor dengan objek, maka actor juga
dapat diurutkan sebagai kolom.

Lifeline mengindikasikan
keberadaan sebuah objek dalam
3 Lifeline basis waktu. Notasi untuk lifeline
adalah garis putus-putus vertikal
yang ditarik dari sebuah objek.
Activation dinotasikan sebagai
sebuah kotak segi empat yang
4 Activation digambar pada sebuah lifeline.
Activation mengindikasikan
sebuah objek yang akan
melakukan sebuah aksi.
Boundary terletak diantara
sistem dengan dunia
sekelilingnya. Semua form,
5 Boundary laporan-laporan, antar muka ke
perangkat keras seperti printer
atau scanner dan antar muka ke
sistem lainnya termasuk dalam
kategori.
 33

No Gambar Nama Keterangan

Control berhubungan dengan
fungsionalitas seperti
6 Control pemnfaatan sumber daya,
pemrosesan terdistribusi, atau
penanganan masalah.
Entity digunakan menangani
informasi yang mungkin akan
disimpan secara permanen.
7 Entity Entity bisa juga merupakan
sebuah tabel pada struktur basis
data.
Message, digambarkan dengan
anak panah horizontal antara
8 Message Activation. Message
mengindikasikan komuikasi
antara objek-objek.

3.10. Adobe Dreamweaver Cs3

3.4.1 Pengertian Dreamweaver Cs3

Adobe Dreamweaver CS3 merupakan program aplikasi web

Editor yang cukup popular untuk pembuatan website, selain

tampilanya yang lebih menarik kemampuan fitur-fitur juga mudah

para pemakianya untuk menciptakan halaman web dengan mudah

dan cepat tanpa menulis kode HTML. Salah satu kelebihan

software ini yaitu memiliki kemampuan yang mendukung

pemrograman Script Server Side seperti Active Server Page (ASP),

Java Server Page (JSP),AST.Net Dan PHP (Hypertext

Preprocessor) . Selain itu juga dapat mendukung pemrograman

Client Side seperti HTML dan Java Script.

 34

Dalam dunia web, seseorang webmaster mutlak tidak lepas dari

desain web adalah menggunakan HTML (Hypertext markup

language), HTML merupakan dokumen Hypertext yang biasa

dibaca dari suatu platform computer lain. Seiring dengan

perkembangan zaman perancangan web tidak tertumpuk pada

HTML saja, tetapi juga perancangan secara visual sangat

memudahkan pemakai untuk membuat web, salah satunya software

editor yang cukup dikenal adalah Adobe Dreamweaver, software

ini merupakna software yang paling inovatif yang lengkap

dibandingkan software web editor.

Menurut devisi penelitian MADCOMS (2007)

Dreamweaver merupakan software utama yang digunakan oleh
Web Designer maupun Web Programmer dalam
mengembangkan suatu situs web. Hal ini disebabkan ruang
kerja, fasilitas dan kemampuan dreamweaver yang mampu
meningkatkan produktivitas dan efektifitas dalam desain
maupun membangun situs web.

Untuk lebih jelasnya. berikut ini tampilan ruang kerja Type

Coder Adobe Dreamweaver CS3

 35

Gambar 3.4 Jenis File Yang Dapat Dibuka Dengan Adobe

Dreamweaver CS3.

Menurut devisi penelitian MADCOMS (2007) Dreamweaver

merupakan software utama yang digunakan oleh Web Designer

maupun Web Programmer dalam mengembangkan suatu situs

web. Hal ini disebabkan ruang kerja, fasilitas dan kemampuan

dreamweaver yang mampu meningkatkan produktivitas dan

efektifitas dalam desain maupun membangun situs web.

Pada kolom Category terdapat beberapa kategori file baru

yang dapat dibuat, mulai dari Basic page hingga Page Designs.

Berikut ini penjelasan singkat mengenai kategori tersebut:

 36

1. Basic page

Basic page digunakan untuk membuat file-file dasar situs

web. File yang termasuk dalam kategori ini antara lain file

HTML, CSS, Javascript dan XML.

2. Dynamic page

Dynamic page digunakan untuk membuat file-file

dinamis. Yang dimaksud dengan file dinamis adalah file atau

script berbasis server(server-side-scripting). Masuk dalam

kategori ini antara lain PHP, ASP, ColdFusion dan JSP.

3. Template page

Kategori ini menampilkan pilihan untuk membuat file

baru yang berupa template. Template tersebut dapat berupa

template untuk HTML, PHP atau yang lainnya.

4. Other

Kategori Other menampilkan jenis file yang tidak ada di

tiga kategori sebelumnya, antara lain file Text, Java, dan

seterusnya.

5. CSS Style Sheets

Pilihan kategori ini berisi beberapa contoh halaman CSS

siap pakai.
 37

6. Framesets

Jika ingin membuat situs dengan menggunakan frame,

maka pilihlah kategori ini untuk memilih tampilan frame yang

sesuai.

7. Page Designs (CSS)

Kategori ini menampilkan beberapa contoh layout

halaman situs yang didesain dengan CSS.

8. Starter Page

Pada kategori Starter Page ditampilkan pilihan beberapa

layout halaman depan situs.

9. Page Designs

Page Designs menampilkan berbagai format atau

template dasar halaman web.

Sebagai langkah awal, dalam membuat halaman web dasar.

Pilihlah jenis file dasar HTML dan selanjutnya akan ditampilkan

halaman utama Adobe Dreamweaver CS3.

Tampilan Adobe Dreamweaver CS3 pada dasarnya cukup

mudah dimengerti, bahkan untuk orang awam sekalipun. Berikut

ini merupakan tampilan Adobe Dreamweaver CS3 secara default.

 38

Gambar 3.5 Tampilan Menu Adobe Dreamweaver CS3

Tampilan Adobe Dreamweaver CS3 dapat dibagi menjadi

beberapa bagian yaitu:

1. Menu Utama

Menu utama ditampilkan di bagian atas layar Adobe

Dreamweaver CS3, dan dari menu ini dapat diakses semua

fasilitas yang disediakan oleh Adobe Dreamweaver CS3.

2. Insert Bar

Insert Bar secara default berada tepat dibawah menu

utama. Bagian ini digunakan untuk menambahkan berbagai

komponen dalam design halaman situs.

3. Layar Dokumen Utama

Layar dokumen utama terletak di bagian tengah.

Tampilannya dapat berupa tampilan design (design-view),

tampilan source program (code-view) atau keduanya.

 39

4. Properties Panel

Properties panel merupakan window yang tampilannya

bergantung kepada objek yang sedang aktif. Dari panel ini,

diatur properties dari objek yang sedang aktif.

5. Panel Pendukung.

Panel pendukung berada di sebelah kanan layar

dokumen utama. Panel-panel ini berfungsi sebagai alat bantu

dalam proses pembuatan situs web antara lain untuk

memanage file, informasi penyimpanan, CSS dan sebagainya.

6. Menu Utama

Menu utama pada Adobe Dreamweaver CS3 terletak di

bagian atas, seperti terlihat pada gambar berikut ini.

Gambar 3.6 Tampilan Menu Utama

Berikut ini penjelasan singkat dari masing-masing

menu dalam Adobe Dreamweaver CS3: File, Seperti pada

program (aplikasi) lainnya, menu file merupakan menu yang

digunakan untuk operasi dasar aplikasi seperti membuka file,

menyimpan file, mencetak, import dan export. Menu File

juga memiliki sub menu Preview in Browser yang berguna

untuk menampilkan halaman situs di web browser. Edit.

Menu ini terdiri dari submenu yang berhubungan dengan

 40

proses editing file, seperti Copy, Cut, Paste, Undo, Redo,

Find and Replace. View. Menu ini digunakan untuk mengatur

tampilan layar Adobe Dreamweaver CS3, seperti pengaturan

tampilan (design view, code view atau keduanya), pengaturan

zoom-indan zoom-out dan sebagainya. Insert. Jika ingin

menambahkan suatu objek atau komponen, seperti form,

frame dan image ke dalam halaman web, dapat dicari didalam

menu Insert. Menu insert sebenarnya dapat diakses dari insert

bar. Modify.Menu ini digunakan untuk mengubah properties

dari objek yang sedang aktif. Dan juga digunakan untuk

melakukan convert table ke layer dan sebaliknya.Text. Menu

ini digunakan untuk mengatur tampilan (style) text.

Commands. Menu ini terdiri dari beberapa perintah

berhubungan dengan source-formating dan HTML- cleaning.

Menu ini juga memiliki sub menu untuk membuat web photo

album. Site. Menu ini berhubungan dengan manajemen file

dan situs. Window. Menu window digunakan untuk

pengaturan tampilan (show-and-hide) window properties.

Help Menu ini merupakan menu bantuan mengenai

penggunaan Adobe Dreamweaver CS3.

7. Insert Bar

Insert bar merupakan bagian yang ditampilkan di

bawah menu utama. Insert bar berisi sejumlah objek atau

 41

komponen web yang dapat disertakan di halaman web. Insert

bar dapat dimunculkan dan disembunyikan melalui menu

Window > Insert. Insert bar terdiri dari beberapa kategori,

yaitu:

Gambar 3.7 Tampilan Insert Bar

8. Common

Kategori ini berisi komponen-komponen HTML yang

sering digunakan, seperti table, div, image, komentar,

hyperlink dan sebagainya.

Gambar 3.8 Tampilan Common

9. Layout

Menu layout berisi pengaturan pilihan tampilan standar,

expanded atau layout. Standar digunakan jika akan men-

designlayout dengan tabel, layout dipilih jika ingin

menggunakan layer/div dalam men-design.

Gambar 3.9 Tampilan Menu Layout

10. Forms

Kategori ini digunakan untuk menambahkan elemen

form ke dalam halaman.

Gambar 3.10 Tampilan Menu Form

 42

11. Text

Kategori text berisi pengaturan-pengaturan (formating) text.

Gambar 3.11 Tampilan Menu Text

12. HTML

HTML digunakan untuk menambahkan elemen-elemen

HTML, seperti HR, table, frame dan script.

Gambar 3.12 Tampilan Menu HTML

13. Application

Kategori ini digunakan untuk menambahkan elemen-

elemen dalam website dinamis, seperti database, procedure,

field dsb.

Gambar 3.13 Tampilan Menu Application

14. Flash elements

Kategori ini digunakan untuk menambahkan elemen

flash ke dalam situs.

Gambar 3.14 Tampilan Menu Flash Elements

15. Favorites

Pada bagian kategori ini dapat ditambahkan elemen-

elemen atau objek-objek sesuai keinginan. Untuk

 43

menambahkannya, klik kanan pada bar dan pilih submenu

Customize Favorite Objects...

Gambar 3.15 Tampilan Menu Favorite

3.11. 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).
banyak variasi dari fasilitas yang disedikan oleh Adobe Photoshop

Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat

lunak editor citra buatan Adobe Systems yang dikhususkan untuk

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 .

 44

3.12. 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

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.

 45

Gambar 3.16 Mozilla Firefox 9 (Ariona, 2013:3)

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 Webkipt,[ engine browser yang rata-rata

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

adalah kode utama dalam aplikasi untuk menampilkan halaman web,

contohnya Mozilla untuk Firefox dan Webkit untuk Google Chrome

dan Safari.

Gambar 3.17 Google Chrome 17 (Ariona, 2013:4)

 46

3. Safari

Safari adalah web browser dari Apple. Sama halnya dengan

Chrome, Safari menggunakan engine Webkit sehingga mendukung

fitur-fitur terbaru HTML dan CSS

Gambar 3.18 Safari 5 (Ariona, 2013:4)

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).
 47

Gambar 3.19 Internet Explorer 8

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.20 Opera