BAB III

LANDASAN TEORI

3.1 Website

Sebuah situs web (sering pula disebut menjadi situs, website atau site)
adalah sebutan bagi sekelompok halaman web yang umumnya merupakan
bagian dari suatu nama domain atau sub domain di World Wide Web
(WWW) di internet. WWW terdiri dari seluruh situs web yang tersedia
kepada publik. Halaman-halaman sebuah situs web diakses dari sebuah
URL yang menjadi “akar” (root) yang disebut homepage (halaman induk),
dan biasanya disimpan dalam server yang sama. Secara teknis web
merupakan sebuah sistem dengan informasi dalam bentuk teks, gambar,
suara dan lain – lain yang tersimpan dalam sebuah internet web server dan
dipresentasikan dalam bentuk hypertext. (Iskandar, 2009 : 4).

Penemu website adalah Sir Timothy John Tim Bernes-Lee, sedangkan

website yang tesambung dengan jaringan pertama kali muncul pada tahun

1991. Maksud dari Tim ketika membuat website adalah untuk

mempermudah tukar menukar dan memperbarui informasi kepada sesama

peneliti di tempat kerja. Pada tanggal 30 April 1993, CERN (tempat dimana

Tim bekerja) menginformasikan bahwa WWW dapat digunakan secara gratis

oleh semua orang.

Sebuah web page hampir selalu bisa diakses melalui HTTP (Hypertext

Transfer Protocol), yaitu protokol yang menyampaikan informasi dari

server website untuk ditampilkan kepada para pemakai melalui web

browser. Web page adalah dokumen yang ditulis atau secara dinamik

dikonversi menjadi format HTML (Hypertext Markup Language), sebuah

25
 26

bahasa standar yang digunakan untuk membuat halaman web dan

menampilkan berbagai informasi di dalam sebuah browser internet.

Informasi dalam web yang berupa teks umumnya ditulis dalam format

HTML (Hypertext Markup Language). Informasi lainnya disajikan dalam

bentuk grafis (dalam format GIF, JPG, PNG) dan suara (dalam format AU,

WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime

Movie, 3D World).

3.1.1. Komponen-Komponen Penyusun Website

Untuk membuat web, diperlukan beberapa komponen yang harus

Ada (terinstal) di dalam komputer, yaitu:

a. Web browser merupakan perangkat lunak wajib yang harus

terdapat di komputer karena untuk menjalankan aplikasi web

harus menggunakan web browser. Contohnya: Internet

Explorer, Mozilla Firefox, Opera, Safari.

b. Web server merupakan perangkat lunak wajib jika membuat

sebuah halaman web dinamis. Dalam web server semua script-

script web yang dibuat biasanya diletakkan dalam “document

tool” dalam web server tersebut. Dengan menggunakan web

server maka pembuat web dapat melakukan uji coba terhadap

halaman-halaman web yang dibuat tanpa harus mencobanya di

internet langsung (localhost). Contohnya: IIS, Apache, Xitami.

c. Script digunakan untuk membuat web statis menggunakan

client side scripting (HTML, XML, CSS, Java Script). Untuk

 27

membuat web dinamis menggunakan server side scripting

(ASP, PHP, JSP).

d. Database server merupakan tempat penyimpanan data dalam

sebuah web, contohnya: MySQL, Microsoft SQL Server,

Oracle, DB2 (IBM), PostgreSQL.

e. Web editor merupakan perangkat lunak yang digunakan untuk

mengetikkan perintah-perintah script yang digunakan baik itu

client side scripting ataupun server side scripting bahkan

beberapa web editor dapat digunakan untuk mengatur tampilan

(layout) halaman web secara instant. Berikut contohnya:

Notepad, Macromedia Dreamweaver, Ultra Edit, Adobe Go

Live, Netbean.

f. Image editor merupakan perangkat lunak yang digunakan

untuk mengelola gambar-gambar dan animasi yang nantinya

akan digunakan di dalam halaman web yang akan dibuat.

Berikut contohnya: Adobe Photoshop, Corel Draw,

Macromedia Flash.

3.1.2. Kategori Website

Website terbagi menjadi menjadi 2 kategori, yaitu Web Statis dan

Web Dinamis.

a. Website Statis

Merupakan jenis web dimana informasi yang ditampilkan

selalu tetap dan tidak terkoneksi ke dalam suatu database.

 28

Website ini memungkinkan user hanya bisa melihat isi dari

website tersebut tanpa bisa melakukan interaksi. Yang bisa

dilakukan user hanya mengklik link atau image yang ada untuk

berpindah dari halaman yang satu ke halaman yang lain.

Website jenis ini biasanya hanya berisi tag-tag HTML murni,

CSS, dan Java Script sebagai scripting language-nya.

b. Website Dinamis

Dibagi menjadi 2 bagian :

1. Client Site Tecnologies

Adalah teknologi web programming dimana Script

dijalankan di komputer client, tanpa berinteraksi dengan

server. Di client teknologi ini, kode Script bisa dilihat oleh

user.

2. Server Side Tecnologies

Adalah teknologi web dimana Script dijalankan di server,

kemudian hasil dari pemrosesan itu dikirim ke client

(browser) dalam bentuk HTML murni, sehingga bisa

ditampilkan oleh pengguna.

Beberapa keunggulan Server Side Tecnologies:

a. Tidak tergantung pada browser.

b. Lebih aman, karena Script di server tidak bisa dilihat

di browser.
 29

c. Waktu load lebih cepat karena yang di-download

adalah dokumen HTML murni.

3.2 PHP

PHP adalah singkatan dari Hypertext Preposesor. PHP merupakan bahasa

pemrograman untuk membuat web yang bersifat server side scripting.

Maksud dari server side scripting adalah sintaks dan perintah-perintah yang

diberikan sepenuhnya dijalankan di server tetapi disertakan pada dokumen

HTML. Pembuatan web ini merupakan kombinasi antara PHP sendiri

sebagai bahasa pemrograman dan HTML sebagai pembangun halaman web.

Menurut MACDOMS (2009 : 133) PHP adalah salah satu bahasa

pemrograman yang berjalan di dalam server, dan mampu membuat web

menjadi interaktif dan dinamis. PHP dapat mengolah data dari komputer

Client dan dari komputer Server itu sendiri, sehingga mudah disajikan

dalam browser.

PHP merupakan software yang open source dan mampu melintasi platform,

yaitu dapat digunakan dengan sistem operasi dan web server manapun. PHP

mampu berjalan di windows dan beberapa versi linux. PHP juga dapat

dibangun sebagai modul pada web server apache dan sebagai binary yang

dapat berjalan di CGI. PHP dapat mengirim HTTP header dan dapat juga

mengatur cookies, authentication dan redirect user. PHP menawarkan

koneksitas yang baik dengan beberapa basis data, antara lain Oracle,

Sybase, MySQL, Solid, PostgreSQL, Adabas, FilePro, Velocis, dBase, Unix

 30

dbm, dan tidak terkecuali semua database yang ber-interface ODBC. Juga

dapat berintegrasi dengan beberapa library eksternal yang mampu

melakukan segalanya mulai dari membuat dokumen PDF hingga memparse

XML.PHP mendukung komunikasi dengan layanan protocol IMAP, SNMP,

NNTP, POP3 atau bahkan lagi dibutuhkan pengembangan lingkungan

khusus atau direktori khusus. Hampir seluruh aplikasi berbasis web dapat

dibuat dengan PHP.

3.2.1. Penulisan Kode PHP

Berikut ini ada beberapa cara untuk memulai menuliskan script

PHP, yaitu :

<?php
Script PHP
?>
<?
Script PHP
?>
<script language =”php”>
Script PHP
</script>
Cara pertama merupakan format yang dianjurkan tetapi mungkin

cara kedua lebih sering digunakan karena lebih ringkas. Cara ketiga

digunakan untuk mengantisipasi editor dan web server yang tidak

dapat menerima kedua cara diatas.

 31

3.2.2. Kelebihan PHP

PHP memiliki beberapa kelebihan dibandingkan bahasa

pemrograman yang lain, yaitu :

a. PHP tidak melakukan sebuah kompilasi dalam

penggunaannya.

b. PHP mendukung banyak web server, diantaranya Apache,

Internet Information Server (IIS), Xitami, OmniHTTPd dan

masih banyak yang lainnya.

c. PHP adalah bahasa scripting yang paling mudah karena

memiliki banyak referensi.

3.2.3. Tipe Data pada PHP

Tabel 9 Tipe Data pada PHP

Tipe Data Keterangan

Integer Tipe data yang berguna untuk menyimpan

bilangan bulat, bukan desimal

Double Floating Tipe data yang berguna untuk menyimpan

bilangan desimal

Boolean Tipe data ini adalah tipe data yang paling

sederhana, hanya berupa TRUE atau FALSE

String Tipe data yang terdiri dari kata atau kalimat

yang diapit dengan tanda petik (‘ ‘) atau (“ ”)

Objek Tipe data objek bisa berupa bilangan,

variabel atau fungsi yang dimasukkan ke
dalam program dengan tujuan untuk
meringkas beberapa fungsi

Array Tipe data array digunakan untuk menyimpan

banyak data dalam satu variabel
 32

NULL Tipe data yang tidak memuat apapun

(kosong)

Resources Tipe data spesial yang satu ini dikhususkan

untuk menyimpan resorce, sumber atau
alamat

3.3 HTML

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.

HTML adalah file teks murni yang dapat dibuat dengan editor teks

sembarang. Dokumen ini dikenal sebagai web page. HTML merupakan

dokumen yang disajikan dalam browser web. Dokumen ini umumnya berisi

informasi atau interface aplikasi di dalam internet.

Ada dua cara untuk membuat sebuah web page : dengan web editor

(misalnya : Macromedia Dreamweaver atau Microsoft Frontpage) atau

dengan editor teks biasa (misalnya notepad).

Dokumen HTML disusun oleh elemen – elemen. Elemen merupakan

istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Untuk

menandai berbagai elemen dalam suatu dokumen HTML, digunakan tag.

Tag HTML terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil),

sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag
 33

umumnya berpasangan (misalnya <H1> dengan </H1>), tag yang menjadi

pasangan selalu diawali dengan karakter gais miring. Tag yang pertama

menunjukkan tag awal yang berarti awal elemen, dan yang kedua

menunjukkan tag akhir, berarti akhir elemen.

Dalam membuat suatu dokumen HTML dibutuhkan elemen yang dinyatakan

dengan tag <html>, <head> dan <body> berikut tag-tag pasangannya.

Setiap dokumen terdiri atas tag head dan body. Elemen head berisi

informasi tentang dokumen tersebut, dan elemen body berisi teks yang

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

Sebagai contoh penggunaannya adalah sebagai berikut:

<HTML> dan untuk mengakhiri </HTML>.

Penulisan Tag HTML adalah incansesensitive. Artinya <HTML> akan sama

dengan <html> atau <Html>. Untuk selanjutnya akan dibagi menjadi 2

seksi yaitu head dan body.

<HEAD> atau header akan berfungsi sebagai tanda pengenal pada halaman

yang akan buat. Untuk mendefinisikan header dalam Tag HTML maka

harus menambahkan <HEAD> dan </HEAD> Tag di bawah Tag HTML dan

akan menjadi seperti berikut:

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

merupakan bagian dimana anda dapat menuliskan berbagai text yang ingin

tampilkan pada halaman web. Untuk mendefinisikan body harus diketikan

 34

Tag <BODY> dan ditutup dengan Tag </BODY> di bawah Tag

<HEADER>, sehingga akan terlihat:

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

Untuk menamai atau memberi judul pada halaman web yang anda buat

maka digunakan Tag <TITLE> dan </TITLE>. Judul akan terlihat pada

sudut kiri atas pada halaman web. Tag <TITLE> akan berada di dalam Tag

<HEAD>. Berikut contoh membuat halaman website sederhana. Bukalah

Notepad dan ketik kode html di bawah ini, kemudian simpanlah di C:\My

Cocuments\hello.html.

<HTML>
<HEAD>
<TITLE>Selamat Datang</TITLE>
</HEAD>
<BODY>
Halo semuanya ini web saya…
</BODY>
</HTML>

Untuk melihat tampilannya tinggal membuka brouser dan ketikan seperti

penyimpanan di atas tadi.

3.4 MySQL

Prasetyo (2004 :18) “MySQL merupakan salah satu database server yang

berkembang di lingkungan open source dan didistribusikan secara free

(gratis) dibawah lisensi GPL”.

 35

MySQL termasuk jenis RDBMS (Relational database Management

System). MySQL memdukung bahasa pemrograman PHP. MySQL juga

mempunyai query atau Bahasa SQL (Structured Query language) yang

mudah dan menggunakan escape character yang sama dengan PHP.

MySQL memiliki beberapa keistimewaan, antara lain;

1. Portabilitas. MySQL dapat berjalan stabil pada berbagai system operasi

seperti Windows, Linux, FreeBSD, Mac Os X server, Solaris, Amiga,

dan masih banyak lagi.

2. Perangkat lunak open source. MySQL didistribusikan sebagai

perangkat lunak open source, dibawah lisensi GPL sehingga dapat

digunakan secara gratis.

3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam

waktu yang bersamaan tanpa mengalami masalah atau konflik.

4. Performance tuning. MySQL memiliki kecepatan yang menakjubkan

dalam menangani query sederhana, dengan kata lain dapat memproses

lebih banyak SQL per satuan waktu.

5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya,

seperti signed / unsigned integer, float, double char, text, date,

timestamp, dan lain-lain.

6. Perintah dan fungsi. MySQL memiliki operator dan fungsi secara penuh

yang mendukung perintah Select dan where dalam perintah (query).

 36

7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level

subnetmask, nama host, dan izin akses user dengan sistem perizinana

yang detail serta sandi terenkripsi.

8. Skalabilitas dan pembatasan. MySQL mampu menangani basis data

dalam skala besar, dengan jumlah tekaman (records) lebih dari 50 juta

dan 60 ribu table serta 5 milyar baris. Selain itu batas indexs yang dapat

ditampung mencapai indexs pada tiap tabelnya.

9. Konektivitas. MySQL dapat melakukan koneksi dengan klien

menggunakan protocol TCP/IP, UNIX, atau Named Pipes(NT).

10. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien

dengan menggunkan lebih dari dua puluh bahasa. Meskipun demikian,

bahasa Indonesia belum termasuk didalamnya.

11. Antar muka. MySQL memiliki antar muka terhadap berbagai aplikasi

dan bahasa pemroraman dengan menggunakan API (application

Programming Interface).

12. Klien dan peralatan. MySQL dilengkapi dengan berbagai peralatan

yang dapat digunakan untuk administrasi basis data, dan pada setiap

peralatan yang dapat disertakan petunjuk online.

13. Struktur table. MySQL memiliki struktur table yang lebih fleksibel

dalam menangani ALTER TABLE, dibandingkan basis data lainnya

semacam PostgreSQL ataupun Oracle.

 37

MySQL memiliki banyak sekali perintah-perintah yang memiliki fungsi

berbeda, berikut adalah contoh perintah yang ada pada MySQL yang

sering digunakann.

a. SELECT nama_field1, nama_field2, .. FROM nama_tbl; berfungsi

menampilkan data field dari table

b. SELECT nama_field1, nama_field2, .. FROM nama_tbl WHERE

[kondisi]; berfungsi menampilkan data field dari table bersyarat atau

dengan filter

c. UPDATE nama_tbl SET nama_field=’[data]’ WHERE nama-

field=’[data]’; berfungsi untuk memperbaharui data field dalam table

d. DELETE FROM nama_tbl WHERE nama_field=’[data]’ berfungsi

menghapus data dalam table.

3.5 XAMPP

Menurut Oetomo (2006:16) “XAMPP adalah perangkat lunak bebas yang

mendukung banyak sistem operasi, merupakan kompilasi dari beberapa

program”. 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 danPerl.

Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun),

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

License dan bebas, merupakan web server yang mudah digunakan yang

dapat melayani tampilan halaman web yang dinamis.

 38

Bagian – bagian yang biasa digunakan pada tool XAMPP adalah :

1. htdocs adalah folder tempat meletakan berkas – berkas yang akan

dijalankan, seperti berkas PHP, HTML dan skrip lainnya.

2. Phpmyadmin merupakan bagian untuk mengelola basis data MySQL

yang ada di komputer. Untuk membukanya, buka browser lalu ketikan

alamat http://localhost/phpmyadmin, maka akan muncul halam

phpmyadmin.

3. Kontrol panel yang berfungsi untuk mengelola layanan (service)

XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai

(start).

3.6 Pengertian Macomedia Dreamweaver 8

Macromedia Dreamweaver merupakan sebuah software yang menangani

tata letak (layout) halaman web. Macromedia Dreamweaver adalah program
aplikasi professional untuk merubah HTML secara visual dan mengelola
Website serta pages. Karena tampil secara visual, aplikasi Macromedia
Dreamweaver 8 mudah dioperasikan. Program ini menyediakan banyak
perangkat yang dapat meningkatkan kemampuan user di dalam membuat
Web (Bunafit, 2008 : 1)
Dreamweaver 8 mencakup banyak fitur baru untuk membantu anda

membuat dan memelihara situs web yang berkisar dari halaman rumah dasar

untuk aplikasi canggih yang mendukung praktek-praktek terbaik dan

teknologi terbaru.

Dengan menggunakan macromedia dreamweaver, seorang

programer web dapat dengan mudah membuat dan mendesain web-nya,

 39

karena bersifat WYSUWYG (What You See Is What You Get).

Dreamweaver selain editor yang komplit juga dapat digunakan untuk

membuat animasi sederhana yang berbentuk layer dengan bentuk Javascript

yang didukungnya. Dengan adanya program ini kita tidak akan susah-susah

untuk mengetik script-script format HTML, PHP, JSP, Asp, JavaScript, CSS

maupun kode program lainnya.

Versi terakhir Macromedia Dreamweaver sebelum Macromedia

dibeli oleh Adobe System yaitu versi 8. versi terakhir Dreamweaver

keluaran Adobe System adalah Adobe Dreamweaver CS5 yang ada dalam

Adobe Suite 5.

a. Open a Recent Item

Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah

dibuka dengan menggunakan Dreamweaver 8. Atau paling bawah ada

menu Open yang dapat digunakan untuk membuka file yang lain.

b. Create New

Pada menu ini dapat memilih dokumen baru apa yang akan dibuat

dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya

Html, Coldfusion, PHP, ASP, Javascript, CSS.

c. Create From Samples

Pada menu ini berfungsi untuk membuat file berdasarkan contoh yang

sudah diberikan oleh Dreamweaver.

 40

Gambar 3.1 Tampilan Awal Macromedia Dreamweaver 8

Komponen dan Area Kerja Macromedia Dreamweaver 8

Gambar 3.2 Lembar Kerja Macromedia Dreamweaver 8

Keterangan :

1. Toolbar Dokumen

Jendela kerja dokumen terdiri atas layar kerja serta fasilitasnya. Yang

dimaksud dengan fasilitasnya adalah tool untuk mengatur layar kerja

atau sering disebut toolbar document antara lain coding tool dan zoom

& guide tool. Disamping itu tersedia fasilitas lain yaitu tag selection.

a. Toolbar Document
 41

Dapat mengatur segala yang berhubungan dengan pengaturan layer

kerja dokumen menggunakan Toolbar Dokumen, untuk mengatur

layer kerja yang berupa kode atau desain dapat menggunakan

toolbar show code view, show design view, show code and design

view.

Gambar 3.3 Tool Toolbar Dokumen

b. Tag Selection

Tag merupakan suatu kode dalam script yang menentukan format

halaman website. Penulisan kode tag HTML diawali dengan tag

pembuka (<…>) dan ditutup dengan tag penutup (</…>). Tag

selection merupakan fasilitas untuk memudahkan dalam mencari

lokasi suatu tag pada halaman web. Urutan tag selection ini

didasarkan atas urutan struktur penulisan tag. Sebagai contoh jika

akan memilih tag dalam suatu struktur tabel, maka bisa melihat

struktur dari baris (<tr>) dan kolom (<td>) dari tabel dengan

memilih salah satu tag-nya.

2. Menu Utama

Menu Utama berisi tentang semua perintah yang dapat digunakan untuk

bekerja pada Dreamweaver.

3. Insert Bar

Insert bar merupakan tool yang digunakan untuk menyisipkan

objek ke dalam dokumen web. Ada beberapa kategori yang digunakan

 42

untuk Insert Bar seperti Common, Layout, Form, Text, HTML, dan

Aplication.

Gambar 3.4 Tampilan Insert Bar

4. Tab Common

Secara otomatis, tampilan pertama Macromedia Dreamweaver 8 akan

memunculkan Insert Bar. Pada kelompok ini terdapat tool yang sering

digunakan untuk mendesain seperti hyperlink, berikut ini adalah gambar

yang terdapat pada tool Tab common :

2 4 6 8 10

1 3 5 7 9

Gambar 3.5 Tool Tab Common

Keterangan fungsi tool pada tab common :

Tabel 3.2 Fungsi tool Tab common

No Nama Fungsi
1 Hyperlink Untuk menambahkan hyperlink
2 Email Link Untuk memberikan link ke email
Untuk memberikan nama link pada
3 Named Anchor
suatu tempat
 43

No Nama Fungsi
4 Table Untuk membuat table
5 Images Untuk menyisipkan gambar
Untuk menyisipkan media, seperti flash,
6 Media
flash movie, flash botton dan lain-lain
7 Date Untuk menyisipkan tanggal
Untuk memberikan komentar pada
8 Comment
script
9 Templates Untuk membuat templates
Untuk memasukan tag seperti HTML,
10 Tag Chooser
PHP, ASP, dan lain-lain

5. Tab Layout

Pada kelompok layout terdapat tool yang sangat membantu dalam

pembentukan sebuah halaman dokumen website. Diantara tool tersebut

ada yang berfungsi untuk pembuatan table, layer, maupun frame.

2 4 6 8 10

1 3 5 7 9 11

Gambar 3.6 Tool Tab Layout

Berikut adalah keterangan fungsi tool pada Tab Layout.

Tabel 3.3 Tool Tab Layout

No Nama Fungsi
1 Table Untuk membuat table
2 Insert Div Tag Untuk menyisipkan tag div
3 Draw Layer Untuk membuat layer
Untuk membuat layout pada
4 Layout Table
halaman website
 44

No Nama Fungsi
Untuk membuat cell ke dalam
5 Draw Layout Cell
layout table
Untuk menyisipkan baris pada
6 Insert Row Above
atasnya
Untuk menyisipkan baris pada
7 Insert Row Below
bawahnya
Untuk menyisipkan baris pada
8 Insert Column to the Left
kirinya
Insert Column to the Untuk menyisipkan baris pada
9
Right kananya
Untuk membuat frame pada
10 Frames
dokumen website
11 Tabular Data Untuk memasukan data

6. Tab Form
Form adalah suatu aplikasi dimana pengguna memberikan input

kepada sistem. Dapat menggunakan tool pada kelompok form ini untuk

membuat aplikasi website lebih interaktif.

2 4 6 8 10 12 14

1 3 5 7 9 11 13

Gambar 3.7 Tool Tab Form

Berikut adalah keterangan fungsi tool pada Form Insert Bar.

Tabel 3.4 Fungsi Tool Tab Form

No Nama Fungsi
1 Form Untuk memulai form
2 Text Field Untuk memasukkan text field pada form
3 Hidden Field Untuk memasukkan hidden field pada form
 45

No Nama Fungsi
4 Text Area Untuk memasukkan text area pada form
5 Checkbox Untuk memasukkan checkbox pada form
6 Radio Button Untuk memasukkan radio button pada form
Untuk memasukkan radio button secara
7 Radio Group
group pada form
Untuk membuat daftar atau list menu pada
8 List/Menu
form
9 Jump Menu Untuk membuat jump menu pada form
Untuk membuat pencarian gambar pada
10 Image Field
form
11 File Field Untuk membuat pencarian file pada form
Untuk membuat tombol submit dan reset
12 Button
pada form
13 Label Untuk membuat label pada form
14 Fieldset Untuk membuat fieldset pada form

7. Tab Text

Bagian terpenting dari website adalah teks yang merupakan inti

dari informasi. Format teks, paragraf maupun karakter teks lain dapat

diatur pada Tab Text.

2 4 6 8 10 12 14 16

1 3 5 7 9 11 13 15

Gambar 3.8 Tool Tab Text

 46

Berikut keterangan fungsi tool pada Tab Text.

Tabel 3.5 Fungsi Tool Tab Text

No Nama Fungsi
1 Font Tag Editor Untuk memunculkan font tag
editor
Untuk membuat teks menjadi
2 Bold dan Italic
tebal dan miring
Untuk membuat teks menjadi
3 Strong
tebal (strong)
Untuk membuat teks menjadi
4 Emphasis
miring
5 Paragraph Untuk mengatur paragraf
Untuk membuat teks seperti
6 Block Quote
catatan penting
Membentuk paragraf seperti
7 Preformatted
adanya pada script
Untuk membentuk teks dalam
8 Heading 1,2,3
Heading 1,2 atau 3
Format membuat daftar dalam
9 Unordered List
bentuk simbol
Format membuat daftar dalam
10 Ordere
bentuk nomor atau abjad
11 List Item Untuk memasukkan daftar

12 Definition List Untuk mendefinisikan sesuatu

13 Definition Term, dan Untuk memasukkan definisi
Definition Description term dan untuk memberikan
penjelasan
Untuk memberi penjelasan
14 Abbreviation mengenai singkatan pada teks
yang ditunjuk
15 Acronim Untuk memberikan akronim
Karakter yang berfungsi
16 Line Break
uantuk ganti baris

8. Tab HTML
Kelompok HTML Insert Bar memuat tool yang memudahkan dalam

memasukkan tag HTML, tag tersebut antara lain untuk membuat garis

horizontal, head, table, frame, dan java script.

 47

2 4

1 3 5

Gambar 3.9 Tool Tab HTML

Berikut adalah keterangan dari fungsi tool pada Tab HTML.

Tabel 3.6 Fungsi Tool Tab HTML

No Nama Fungsi
1 Horizontal Rules Untuk menyisipkan tag <hr>
Untuk menyisipkan tag yang ada pada
2 Head
head
Untuk menyisipkan tag pada
3 Tables
pembuatan table
Untuk menyisipkan tag pada
4 Frames
pembuatan frames
Untuk memasukkan java script pada
5 Script
HTML

9. Tab Application

Tool Aplication berfungsi untuk menambahkan server behaviour

pada dokumen website. Versi terakhir Macromedia Dreamweaver

sebelum Macromedia dibeli oleh Adobe System yaitu versi 8. versi

terakhir Dreamweaver keluaran Adobe System adalah Adobe

Dreamweaver CS5 yang ada dalam Adobe Suite 5.

 48

3.7. Adobe Photoshop

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

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.8. UML

UML (Unified Modelling Language) adalah alat bantu yang

menyediakan bahasa pemodelan visual yang memungkinkan bagi
pengembang sistem untuk membuat cetak biru atas visi dalam bentuk yang
baku, mudah dimengerti serta dilengkapi dengan mekanisme yang efektif
untuk berbagi (sharing) dan mengkomunikasikan rancangan dengan yang
lain. (Munawar, 2005 : 17)
 49

Unified Modelling Language (UML) adalah sebuah "bahasa" yang

telah menjadi standar dalam industri untuk visualisasi, merancang dan

mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar

untuk merancang model sebuah sistem. UML mendefinisikan diagram-

diagram sebagai berikut:

3.8.1 Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan

dari sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat

sistem, dan bukan “bagaimana”. Sebuah use case

merepresentasikan sebuah interaksi antara aktor dengan sistem. Use

case merupakan sebuah pekerjaan tertentu, misalnya login ke

sistem, meng-create sebuah daftar belanja, dan sebagainya.

Seorang/sebuah aktor adalah sebuah entitas manusia atau mesin

yang berinteraksi dengan sistem untuk melakukan pekerjaan-

pekerjaan tertentu.

Daftar Simbol Diagram Use Case :

Tabel 1 Simbol Diagram Use Case

Simbol Notasi Keterangan

Actor adalah pengguna
sistem. Actor tidak
terbatas hanya manusia
saja, jika sebuah sistem
Actor berkomunikasi dengan
aplikasi lain dan
membutuhkan input
atau memberikan
output, maka aplikasi
tersebut juga bisa
 50

Simbol Notasi Keterangan

dianggap sebagai actor.

Use case digambarkan

sebagai lingkaran elips
Use Case dengan nama use case
dituliskan didalam elips
tersebut.

Asosiasi digunakan
Association untuk menghubungkan
actor dengan use case.

3.8.2 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas dalam

sistem yang sedang dirancang, bagaimana masing-masing alir

berawal, decision yang mungkin terjadi, dan bagaimana mereka

berakhir. Activity diagram juga dapat menggambarkan proses

paralel yang mungkin terjadi pada beberapa eksekusi.

Activity diagram merupakan state diagram khusus, di mana

sebagian besar state adalah action dan sebagian besar transisi di-

trigger oleh selesainya state sebelumnya (internal processing).

Oleh karena itu activity diagram tidak menggambarkan behaviour

internal sebuah sistem (dan interaksi antar subsistem) secara eksak,

tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas

dari level atas secara umum.

 51

Sebuah aktivitas dapat direalisasikan oleh satu use case atau lebih.

Aktivitas menggambarkan proses yang berjalan, sementara use

case menggambarkan bagaimana aktor menggunakan sistem untuk

melakukan aktivitas.

Daftar Simbol Diagram Activity :

Tabel 2 Simbol Diagram Activity

Simbol Notasi Keterangan

Titik awal, untuk

Initial memulai suatu
aktivitas.

Titik akhir, untuk

Final
mengakhiri aktivitas.

Menandakan sebuah
Activity aktivitas

Pilihanuntuk
Decision
mengambil keputusan

Digunakan untuk
menunjukkan kegiatan
yang dilakukan secara
Fork/Join paralel atau untuk
menggabungkan dua
kegiatan paralel
menjadi satu.

Menunjukkan adanya
Rake
dekomposisi

Time Tanda waktu

Send Tanda pengiriman

 52

3.8.3 Class Diagram

Class adalah sebuah spesifikasi yang jika diinstansiasi akan

menghasilkan sebuah objek dan merupakan inti dari pengembangan

dan desain berorientasi objek. Class menggambarkan keadaan

(atribut/properti) suatu sistem, sekaligus menawarkan layanan

untuk memanipulasi keadaan tersebut (metoda/fungsi).

Class diagram menggambarkan struktur dan deskripsi class,

package dan objek beserta hubungan satu sama lain seperti

containment, pewarisan, asosiasi, dan lain-lain.

Class memiliki tiga area pokok :

a. Nama (dan stereotype)

b. Atribut

c. Metoda

Atribut dan metoda dapat memiliki salah satu sifat berikut :

a. Private, tidak dapat dipanggil dari luar class yang

bersangkutan

b. Protected, hanya dapat dipanggil oleh class yang bersangkutan

dan anak- anak yang mewarisinya

c. Public, dapat dipanggil oleh siapa saja.

Class dapat merupakan implementasi dari sebuah interface, yaitu

class abstrak yang hanya memiliki metoda. Interface tidak dapat

langsung diinstansiasikan, tetapi harus diimplementasikan dahulu

 53

menjadi sebuah class. Dengan demikian interface mendukung

resolusi metoda pada saat run-time.

Sesuai dengan perkembangan class model, class dapat

dikelompokkan menjadi package. Juga dapat membuat diagram

yang terdiri atas package.

Hubungan Antar Class :

a. Asosiasi, yaitu hubungan statis antar class. Umumnya

menggambarkan class yang memiliki atribut berupa class lain,

atau class yang harus mengetahui eksistensi class lain. Panah

navigability menunjukkan arah query antar class.

b. Agregasi, yaitu hubungan yang menyatakan bagian (“terdiri

atas..”).

c. Pewarisan, yaitu hubungan hirarkis antar class. Class dapat

diturunkan dari class lain dan mewarisi semua atribut dan

metoda class asalnya dan menambahkan fungsionalitas baru,

sehingga disebut anak dari class yang diwarisinya. Kebalikan

dari pewarisan adalah generalisasi.

d. Hubungan dinamis, yaitu rangkaian pesan (message) yang di-

passing dari satu class kepada class lain.

Hubungan dinamis dapat digambarkan dengan menggunakan

sequence diagram yang akan dijelaskan kemudian.

Daftar Simbol Diagram Class :

Tabel 3 Simbol Diagram Class

 54

Simbol Notasi Keterangan

Class adalah blok-blok
pembangun pada
pemrograman berorientasi
objek. Sebuah class
digambarkan sebagai sebuah
kotak yang terbagi atas 3
Class bagian. Bagian atas adalah
bagian nama dari class.
Bagian tengah
mendefinisikanproperty/atrib
ut class. Bagian akhir
mendefinisikan method-
method dari sebuah class.
Sebuah asosiasi merupakan
sebuah relationship paling
umum antara 2 class, dan
dilambangkan oleh sebuah
garis yang menghubungkan
antara 2 class. Garis ini bisa
Assosiation melambangkan tipe-tipe
relationship dan juga dapat
menampilkan hukum-hukum
multiplisitas pada sebuah
relationship (Contoh: One-
to-one, one-to-many, many-
to-many).
Jika sebuah class tidak bisa
berdiri sendiri dan harus
merupakan bagian dari class
yang lain, maka class
tersebut memiliki relasi
Composition terhadap class
Compositin
tempat dia bergantung
tersebut. Sebuah relationship
composition digambarkan
sebagai garis dengan ujung
berbentuk jajaran genjang
berisi/solid.
Kadangkala sebuah class
menggunakan class yang
lain. Hal ini disebut
Dependency dependency. Umumnya
penggunaan dependency
digunakan
untukmenunjukkan operasi
 55

Simbol Notasi Keterangan

pada suatu class yang
menggunakan class yang
lain. Sebuah dependency
dilambangkan sebagai
sebuah panah bertitik-titik.
Aggregation mengindikasikan
Keseluruhan bagian dari
relationship dan biasanya
disebut sebagai relasi
“mempunyai sebuah” atau
Aggregation
“bagian dari”. Sebuah
aggregation digambarkan
sebagai sebuah garis dengan
sebuah jajaran genjang yang
tidak berisi/tidak solid.
Sebuah relasi generalization
sepadan dengan sebuah relasi
inheritance pada konsep
berorientasi objek. Sebuah
Generalizatin generalization dilambangkan
dengan sebuah panah dengan
kepala panah yang tidak solid
yang mengarah ke kelas
“parent”-nya/induknya.

3.8.4 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek di

dalam dan di sekitar sistem (termasuk pengguna, display, dan

sebagainya) berupa message yang digambarkan terhadap waktu.

Sequence diagram terdiri atar dimensi vertical (waktu) dan dimensi

horizontal (objek-objek yang terkait).

Sequence diagram biasa digunakan untuk menggambarkan

skenario atau rangkaian langkah-langkah yang dilakukan sebagai

respons dari sebuah event untuk menghasilkan output tertentu.

Diawali dari apa yang men-trigger aktivitas tersebut, proses dan

 56

perubahan apa saja yang terjadi secara internal dan output apa yang

dihasilkan.

Masing-masing objek, termasuk aktor, memiliki lifeline

vertikal. Message digambarkan sebagai garis berpanah dari satu

objek ke objek lainnya. Pada fase desain berikutnya, message akan

dipetakan menjadi operasi/metoda dari class. Activation bar

menunjukkan lamanya eksekusi sebuah proses, biasanya diawali

dengan diterimanya sebuah message.

Daftar Simbol Sequence Diagram :

Tabel 4 Simbol Sequence Diagram

Simbol Notasi Keterangan

Object atau biasa juga
disebut partisipan
merupakan instance dari
sebuah class dan
dituliskan tersusun secara
Objek
horizontal. Digambarkan
(Partisipan)
sebagai sebuah class
(kotak) dengan nama
objek didalamnya yang
diawali dengan sebuah
titik koma.

Actor juga dapat

berkomunikasi dengan
Actor object, maka actor juga
dapat diurutkan sebagai
kolom.

Lifeline mengindikasikan
keberadaan sebuah object
Lifeline dalam basis waktu.
Notasi untuk Lifeline
adalah garis putus-putus
vertikal yang ditarik dari
 57

Simbol Notasi Keterangan

sebuah objek.

Activation dinotasikan
sebagai sebuah kotak
segi empatyang digambar
pada sebuah lifeline.
Activation
Activationmengindikasik
an sebuah objek yang
akan melakukan sebuah
aksi.

Boundary terletak di
antara sistem dengan
dunia sekelilingnya.
Semua form, laporan-
laporan, antar muka
Boundary
keperangkat keras seperti
printer atau scanner dan
antar muka ke sistem
lainnya adalah termasuk
dalam kategori

Control berhubungan
dengan fungsionalitas
seperti pemanfaatan sum
Control
berdaya, pemrosesan
terdistribusi, atau
penanganan kesalahan.

Entity digunakan
menangani informasi
yang mungkin akan
disimpan secara
Entity
permanen. Entity bisa
juga merupakan sebuah
tabel pada struktur basis
data.

Message, digambarkan
dengan anak panah
horizontal antara
Massage
Activation. Message
mengindikasikan
komunikasi antara
 58

Simbol Notasi Keterangan

object-object.

Self-message atau
panggilan mandiri
mengindikasikan
SelfMessae
komunikasi kembali
kedalam sebuah objek itu
sendiri.