20

BAB III

LANDASAN TEORI

3.1. Website

Sebuah situs web (sering pula disingkat menjadi situs, website atau

site) adalah sebutan bagi sekolompok halaman web yang umumnya

merupakan bagian dari suatu nama domain atau subdomain 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.

Penemu Website adalah Sir Timothy John Tim Bernes-Lee,

sedangkan website yang tersambung 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 ditempat di bekerja 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 Text Markup

21

Language sebuah bahasa standar yang digunakan untuk membuat

halaman web dan menampilkan berbagai informasi didalam sebuah

browser internet. Sebuah website dinamis adalah website yang secara

berkala informasi didalamnya berubah atau website ini dapat berhubungan

dengan pengguna dengan berbagai macam cara atau metode. Ketika web

server menerima permintaan dari pengguna atau memberikan halaman

tertentu, maka halaman tersebut akan secara otomatis diambil dari media

penyimpanan sebagai respon dari permintaan yang diminta oleh

pengguna. Untuk membuat web, diperlukan beberapa komponen yang

harus ada (terinstall) didalam komputer yaitu:

1. Web browser merupakan perangkat lunak wajib yang harus terdapat di

komputer karena untuk menjalankan aplikasi web harus menggunakan

web browser. Beberapa contohnya: Internet Explorer, Mozilla Firefox,

Opera, Safari.

2. Web server merupakan perangkat lunak wajib jika membuat sebuah

halaman web dinamis. Dalam web server semua script-script web yang

dibuat diletakkan. biasanya diletakkan dalam “document root” 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).

Contoh: Web Server adalah IIS, Apache, Xitami.

22

3. Script digunakan untuk membuat web statis menggunakan client side

scripting (HTML, XML, CSS style sheet, java script). Untuk membuat

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

4. Database server merupakan tempat penyimpan data dalam sebuah

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

PostgreSQL.

5. 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 layout/ tampilan halaman web

secara instant. berikut contoh : web editor: Notepad, Macromedia

Dreamweaver, Ultra Edit, Adobe Go Live, NetBeans.

6. Image editor merupakan perangkat lunak yang digunakan untuk

mengelola gambar-gambar dan animasi yang nantinya akan digunakan

didalam halaman web yang akan dibuat. Berikut contohnya: Adobe

Photoshop, Corell Draw, Macromedia Flash.

3.2. Profil

Profil 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 di kertas atau di website ataupun

melalu email elektronik. Pemanfaatan profil belakangan ini sangat banyak,

23

bias dijadikan untuk lamaran kerja, untuk meminjam uang, untuk

memperkenalkan diri dan sebagainya. Ada bebarap contoh profil misalnya:

profil perusahaan, profil lembaga, profil sekolah dll.

3.3. Adobe Dreamweaver

Adobe dreamweaver atau yang biasa disebut dengan dreamweaver

merupakan software pengembangan web yang awalnya diciptakan oleh

macromedia pada tahun 1997, namun sekarang dimiliki oleh adobe, yang

mengakuisisi pada tahun 2005.

Adobe dreamweaver adalah script editor profesional yang

digunakan untuk melakukan desain secara visual dan mengolah halaman

web serta pembuatan aplikasi web. Para pengembang dan programer

aplikasi web lebih menyukai menggunakan dreamweaver. Karena

dreamweaver merupakan script editor yang berbasiskan WYSIWYG (

What You See Is What You Get ).

Dreamweaver adalah sebuah software desain web yang

menawarkan cara mendesain web dengan dua langkah sekaligus dalam

satu waktu, yaitu mendesain dan memprogram, membuat tabel dan proses

lainnya, script akan tertulis secara otomatis dan langsung mengisi program

pengaturan.

Dreamweaver mengendalikan pada fitur visual editing, sehingga

para pengguna dapat dengan cepat melakukan desain dan mengfungsikan

halaman web yang diinginkan tanpa harus menuliskan beberapa baris kode

24

pemrograman. Selain itu membantu para pengguna untuk membangun

jaringan aplikasi database dengan menggunakan bahasa server.

Gambar 3.1 jendela awal AdobeDreamweaver

3.3.1. Komponen – Komponen Adobe Dreamweaver

Komponen – komponen yang terdapat pada ruang kerja

Dreamweaver adalah :

Gambar 3.2 Halaman Kerja Adobe Dreamweave

25

Keterangan:

1. Menu Utama

Menu Utama berisi semua perintah yang dapat digunakan

untuk bekerja pada Dreamweaver.

Gambar 3.3 Menu Utama

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 Replace, dan menyediakan akses ke

Keyboard Shortcut Editor dan Tag Library Editor.

c. View Menu

Mengijinkan anda melihat tampilan dokumen dengan

beberapa cara (seperti Design view dan Code view) dan

untuk menampilkan atau menyembunyikan beberapa

elemen pada dokumen dan peralatan yang dimiliki

Dreamweaver 8.

26

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 table dan elemen tabel dan

menampilkan beberapa tindakan yang dapat dilakukkan

untuk item pada library di template.

f. Text Menu

Menyediakan perintah yang dibutuhkan untuk melakukan

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,

mengedit site.

i. Window Menu

Menyediakan akses kesemua panel, inspectors, dan jendela

pada Dreamweaver.

27

j. Help Menu

Menyediakan akses ke dokumentasi yang dimiliki oleh

dreamweaver termasuk cara penggunaan dreamweaver,

membuat ekstensi dan material lainya yang dapat

membantu anda menggunakan dreamweaver dengan lebih

baik.

2. 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 tampilan area kerja.

Untuk mengatur tampilan kita bisa memilih Code, Split dan

Design

Gambar 3.4 Toolbar Dokumen

a. Code : merupakan kumpulan kode program yang telah

disusun, dan berfungsi untuk mengedit listing dari program.

b. Split : digunakan untuk menampilkan tab dari code view

dan design view swcara bersamaan.

28

c. Design : digunakan sebagai tempat untuk meletakan objek-

objek ke dalam jendela dokumen, seperti Tabel, Form dan

lainnya.

3. Insert Bar

Insert bar merupakan tempat semua perangkat kerja (tombol)

yang digunakan untuk membuat halaman web. Insert bar

mempunyai dua jenis tampilan, yaitu tampilan sebagai menu

dan tampilan sebagai tab.

Gambar 3.5 Insert Bar

a. Hyperlink: Klik diatas dan akan membuat anda untuk link

ke lokasi lain dari halaman web, file atau lokasi pada

halaman yang sama.

b. Email Link: Email link mengijinkan pengunjung situs

mengirimkan seseorang email dengan mengklik pada

special link. Gunakan tool ini untuk mempermudah link.

c. Named Anchor: Tanda anchor ini adalah istimewa dalam

melakukan link, akan membawa user ke bagian lain pada

halaman yang sama. Klik nama tombol nama anchor untuk

mempercepat membuat link untuk anchor.

d. Insert Table: Ketika anda mengklik tool ini, akan muncul

29

jendela menanyakan jika anda ingin memasukkan informasi

dan membuat tabel. Ketika itu selesai, klik pada “OK” dan

akan muncul tabel dalam halaman web.

e. Draw Layer: Layer bisa membantu ketika mendesain layout

untuk halaman. Layer bukanlah tabel, tapi merupakan kotak

yang bisa diisi teks, gambar, atau apa saja, dan bisa

ditempatkan dimana saja dilayar. Ketika anda mengklik

tombol ini, kursor anda akan berubah menjadi salib, dan

anda bisa menarik layer pada halaman.

f. Image: Anda bisa dengan mudah menempatkan gambar

dalammhalaman web dengan mengklik tombol ini. Ketika

anda melakukannya, jendela baru akan muncul. Dari sini,

anda bisa membrowser komputer anda untuk mencari

gambar yang ingin dimasukkan ke dalam halaman web.

Ingat jika anda berencana untuk menempatkan halaman

anda dalam internet, anda harus menaruh semua gambar

yang digunakan dalam web dengan baik. Ini akan

diceritakan pada bagian “publishing”

g. Image Placeholder: Penempatan gambar bisa digunakan

secara efektif dalam web desain. Mereka akan terlihat

sederhana, tapi mereka sangat penting. “image”. Ini

merupakan pixel kosong yang bisa digunakan untuk

30

berbagai hal, seperti membuat ruang antar objek, atau

membuat garis dan kotak untuk layouts.

h. Fireworks HTML: Jika anda membuat halaman web

memakai Macromedia Fireworks, anda akan bisa

memasukkannya ke dalam halaman DreamweaverMX

dengan menggunakan tool ini.

i. Flash: Mengijinkan anda untuk memasukkan elemen flash

dalam halaman web.

j. Rollover image: Suatu efek khusus pada gambar, ketika

kursor mouse digerakkan pada gambar maka gambar akan

berubah.

k. Navigation Bar: Ini merupakan fungsi yang komplek dan

akan membuat anda untuk mengendalikan bar situs anda,

dan mengubah gambar untuk link ke halaman lain.

l. Horizontal Rule: suatu garis sederhana yang bisa digunakan

untuk beberapa bagian isi halaman web. Klik tombol ini,

memutuskan panjang garis horizontal, dan ini akan

dimasukkan ke halaman.

m. Date: Klik tombol ini untuk memasukkan tanggal ke

halaman web.

n. Tabular Data: Memasukkan data ke dalam tabular

o. Comments: Komentar bisa digunakan dalam halaman web,

tanpa benar-benar muncul pada halaman web. Ini akan

31

membantu jika anda ingin mengingat sesuatu yang anda

desain

p. Tag Chooser: Memasukkan spesifik HTML tag dari daftar.

Biasanya digunakan oleh Web Developer yang sudah

mahir.

4. Panel Properties

Panel properties merupakan panel yang digunakan untuk

melihat dan mengubah property dari semua objek yang ada di

area kerja. Masing-masing objek mempunyai property yang

berbeda. Untuk melihat property dari objek yang diinginkan,

seleksi dulu objek tersebut.

Gambar 3.6 Panel Properties

5. Panel Group

Panel pada Adobe Dreamweaver CS3 merupakan suatu media

yang berfungsi sebagai fasilitator. Kumpulan berbagai panel

disebut panel group, terletak pada sebuah kanan layer kerja,

panel - panel tersebut di antaranya :

a. CSS atau Design Panel

Merupakan fasilitas untuk mempercantik tampilan dengan

menggunakan style CSS, pada kelompok CSS panel

terdapat dua bagian, yaitu Design Style dan Layer.

32

b. Application Panel

Merupakan fasilitas untuk membuat document web yang

dinamis, karena penggunaan panel application mengacu

pada server dan database.

c. Tag inspector

Di dalam tag inspector terdapat dua bagian, yaitu Attributes

dan Behaviours. Pada tag attributes terdapat berbagai

atribut suatu tag yang diseleksi, sedangkan tag behaviours

merupakan kumpulan yang mengaplikasikan perintah

menggunakan java script.

d. Files

Merupakan fasilitas untuk memudahkan dalam mengelola

file dokumen web. Pada panel files terdapat tiga tab, yaitu

Files, Asset dan Snippets.

e. History

Panel history akan menampilkan langkah - langkah yang

telah dikerjakan dalam membuat suatu document web.

Untuk mengoprasikan history, klik tanda panah pada

samping kiri ke bagian yang akan diulangi, dengan

demikian tidak perlu khawatir bila terdapat kesalahan

dalam melangkah.

33

f. Property Inspector

Dalam dokumen web pasti terdapat teks, gambar maupun

tabel yang memiliki aturan dalam mengelolanya. Atur

pengaturan tersebut dengan menggunakan jendela Property

Inspector, sangatlah mudah karena tinggal memasukan nilai

parameter yang sudah disediakan. Secara umum Property

Inspector terdiri dari :

g. Page Property Inspector

Property halaman untuk mengelola teks, paragraph atau

style CSS.

h. Table Property Inspector

Table property akan muncul apabila ada table yang

terdeteksi. Table property terdiri dari layout table dan

layout cell.

i. Image Property Inspector

Memuat pengaturan property untuk menyisipkan gambar

pada dokument web. Dalam menyisipkan gambar pada

dokumen, terdapat pengaturan pada image property

inspector.

k. Form Property Inspector

Form merupakan aplikasi interaktif dari website yang

berguna untuk memasukan data pemakai. Pada form sendiri

34

terdapat bagian-bagian form yang memiliki property

inspector sendiri.

3.4. PHP

PHP adalah bahasa pemrograman script yang paling banyak

dipakai saat ini. PHP banyak dipakai untuk memrogram situs web

dinamis, walaupun tidak tertutup kemungkinan digunakan untuk

pemakaian lain. Sejarah PHP dimulai pada Tahun 1995, ketika Rasmus

Lerdorf seseorang software development contractor mengembangkan

skrip Perl/CGI mengetahui jumlah pembaca online resume-nya. Pada

waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP

adalah sekumpulan script yang digunakan untuk mengolah data form dari

web. Perkembangan selanjutnya adalah Rasmus melepaskan kode sumber

tersebut dan menamakannya PHP/FI, pada saat tersebut kepanjangan dari

PHP/FI adalah Personal Home Page/Form Interpreter. Dengan pelepasan

kode sumber ini menjadi open source, maka banyak programmer yang

tertarik untuk ikut mengembangkan PHP.

Pada November 1997, dirilis PHP/FI 2.0. Pada PHP/FI 2.0 ini

interperter sudah diimplementasikan dalam C dan disertakan pula modul –

modulekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.

Pada Tahun 1997, sebuah perusahaan bernama Zend menulis ulang

interpreter PHP menjadi lebih bersih, lebih baik dan lebih cepat.

35

Kemudian pada Juni 1998 perusahaan tersebut merilis interpreter baru

untuk PHP dan meresmikan nama rilis tersebut menjadi PHP 3.0.

Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru

dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang

paling banyak dipakai. Versi ini banyak dipakai sebab mampu dipakai

untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan

proses dan stabilitas yang tinggi.

Pada Juni 2004, Zend merilis PHP 5.0. Versi mutakhir dari PHP.

Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar.

Dalam versi inijuga dikenalkan model pemrograman berorientasi objek

baru untuk menjawab perkembangan bahasa pemrograman kearah

pemrograman berorientasi objek.

Kelebihan PHP dari bahasa pemrograman lain :

a. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam penggunaannya.

b. Web Server yang mendukung PHP dapat ditemukan dimana-mana dari

mutasi IIS sampai dengan apache, dengan konfigurasi yang relatif

mudah.

c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis –

milis dan organisasi yang siap membantu dalam pengembangan.

d. Dalam sisi pemahaman, PHP adalah bahasa script yang paling mudah

karena referensi yang banyak.

36

e. PHP adalah bahasa open source yang dapat digunakan diberbagai

sistem operasi.

3.5. HTML

HTML (Hypertext Markup Language) merupakan suatu script

dimana kita bisa menampilkan informasi dan daya kreasi kita melalui

internet. HTML sendiri adalah suatu dokumen teks biasa yang mudah

untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya dan

karena bentuknya itu maka HTML dapat dibaca oleh platform yang

berlainan seperti Windows, Unix dan lainnya (Sampurna, 1996, h:6).

HTML merupakan bahasa pemrograman fleksibel di mana kita bisa

meletakkan script dari bahasa pemrograman lainnya seperti Java, Visual

Basic, C++, dan lainnya. Hypertext dalam HTML berarti bahwa kita dapat

menuju ke suatu tempat, misal website atau halaman homepage lain,

dengan cara memilih suatu link yang biasanya digaris bawahi atau

diwakili oleh suatu gambar. Selain link ke website atau homepage halaman

lain, hypertext ini juga mengizinkan kita untuk menuju ke salah satu

bagian dalam satu teks itu sendiri. HTML tidak berdiri sendiri, agar ia

dapat bertugas dalam membangun halaman web, ia harus ditulis dalam

software atau aplikasi tertentu yang dikenal sebagai HTML Editor. HTML

Editor inilah yang bertugas untuk “menerjemahkan” bahasa HTML

menjadi halaman web yang siap dilihat oleh para surfer diseluruh dunia.

Elemen pada HTML dapat didefinisikan sebagai suatu kode tertentu yang

37

akan menyediakan tempat untuk meletakkan beberapa kode didalamnya.

Berbeda dengan Tag yang menangani satu kode saja. Untuk lebih jelasnya

perhatikan skema di bawah ini .

Jadi jelas bahwa elemen merupakan satu bagian yang besar yang

terdiri dari banyak kode-kode yang disebut Tag itu. Dokumen HTML

diawali dengan Tag <HTML> dan diakhiri dengan Tag </HTML>. Elemen

pada HTML akan memisah dokumen menjadi dua bagian utama, antara

lain :

a. Elemen <HEAD>………</HEAD> : Merupakan bagian kepala, tempat untuk

menuliskan keterangan mengenai judul halaman web, nama pengarang

dan script atau program kecil.

b. Elemen <BODY>………</BODY> : Merupakan bagian badan atau isi, tempat

untuk menuliskan informasi yang akan ditampilkan pada browser. Tag

hanyalah bagian dari elemen. Tag adalah kode-kode yang digunakan

untuk men-setting dokumen HTML. Dari tiap-tiap teks programnya,

dimulai dengan tanda <Tag-awal> dan diakhiri dengan tanda </Tag-

akhir>. Untuk membuat dokumen HTML, perlu mengetahui dan

mempelajari elemen serta Tag- Tag yang digunakan untuk menandai

bagian-bagian dari suatu dokumen dengan menggunakan program

<HTML><HEAD><TITLE> tempat untuk menempatkan judul halaman web</TITLE></HEAD><BODY> tempat untuk menempatkan informasi</BODY></HTML>

38

editor teks biasa yaitu Notepad, atau dengan program editor lainnya

seperti Macromedia Dreamweaver dan Microsoft FrontPage.

3.6. MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis

data SQL (database management system) atau DBMS yang multithread,

multi user, yang bersifat terbuka atau open source dan berjalan disemua

platform dengan sekitar 6juta instalasi di seluruh dunia. MySQL adalah

RDMS (Relational Database Management System) yang didistribusikan

sebagai perangkat lunak gratis dibawah lisensi GPL (General Public

License). Dimana setiap orang bebas untuk menggunakan MySQL, namun

tidak boleh disajikan produk turunan bersifat komersial.

MySQL sebenarnya merupakan turunan salah satu konsep utama

dalam database sejak lama, yaitu SQL (Structued Query Language). SQL

adalah sebuah konsep pengoperasian database, terutama untuk pemilihan

atau seleksi dan pemasukan data, yang memungkinkan pengoperasian data

dikerjakan dengan mudah secara otomatis. Kehandalan suatu sistem

database (DBMS) dapat diketahui dari cara kerja optimizer-nya dalam

melakukan proses perintah-perintah SQL, yang dibuat oleh user maupun

program-program aplikasinya.

39

3.7. XAMPP

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

mendapatkanya dapat mendownload langsung dari web resminya.

XAMPP dikembangkan dari sebuah tim proyek bernama Apache

Friends, yang terdiri dari Tim Inti (Core Team), Tim Pengembang

(Development Team) & Tim Dukungan (Support Team). XAMPP adalah

singkatan yang masing-masing hurufnya adalah:

X: Program ini dapat dijalankan dibanyak sistem operasi, seperti

Windows, Linux, Mac OS, dan Solaris.

A: Apache, merupakan aplikasi web server. Tugas utama Apache

adalah menghasilkan halaman web yang benar kepada user berdasarkan

kode PHP yang dituliskan oleh pembuat halaman web. jika diperlukan

juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu

database diakses terlebih dahulu (misalnya dalam MySQL) untuk

mendukung halaman web yang dihasilkan.

40

M: MySQL, merupakan aplikasi database server.

Perkembangannya disebut SQL yang merupakan kepanjangan dari

Structured Query Language. SQL merupakan bahasa terstruktur yang

digunakan untuk mengolah database. MySQL dapat digunakan untuk

membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan

MySQL untuk menambahkan, mengubah, dan menghapus data yang

berada dalam database.

P: PHP, bahasa pemrograman web. Bahasa pemrograman PHP

merupakan bahasa pemrograman untuk membuat web yang bersifat

server-side scripting. PHP memungkinkan kita untuk membuat halaman

web yang bersifat dinamis. Sistem manajemen basis data yang sering

digunakan bersama PHP adalah MySQL. Namun PHP juga mendukung

sistem manajement database Oracle, Microsoft Access, Interbase, d-base,

PostgreSQL, dan sebagainya.

P: Perl, bahasa pemrograman.

Bagian penting XAMPP yang biasa digunakan pada umumnya:

a. Htdoc adalah folder tempat meletakkan berkas-berkas yang akan

dijalankan, seperti berkas PHP, HTML dan skrip lain.

b. PHPMyAdmin merupakan bagian untuk mengelola basis data MySQL

yang ada dikomputer. Untuk membukanya, buka browser lalu ketikkan

alamat http://localhost/PHPMyAdmin, maka akan muncul halaman

PHPMyAdmin.

41

c. Control Panel yang berfungsi untuk mengelola layanan (service)

XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai

(start).

3.8. JavaScript

JavaScript pertama kali dikembangkan oleh Brendan Eich dari

Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi

Live Script, dan akhirnya menjadi JavaScript. Navigator sebelumnya telah

mendukung Java untuk lebih bisa dimanfaatkan para programmer yang

non-Java. Maka dikembangkanlah bahasa pemrograman bernama Live

Script untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah

yang akhirnya berkembang dan diberi nama Java Script, walaupun tidak

ada hubungan bahasa antara Java dengan JavaScript.

Bahasa server-side seperti PHP atau Perl adalah cara terbaik untuk

memodifikasi halaman sebelum loading, meskipun ada beberapa kasus

Server-JavaScript (SJS). Tidak semua browser memiliki juru Java Script

(seperti browser hanya teks Lynx), atau menjalankan versi terbaru. Selain

itu, beberapa pengguna mematikan kemampuan JavaScript dengan pilihan.

Umumnya, halaman web harus menggunakan JavaScript untuk

meningkatkan pengalaman pengguna, bukan bergantung padanya. Hal ini

sering disebut sebagai degradasi anggun (yaitu jika pengguna telah

dimatikan JavaScript, halaman harus selalu masih beban, menyajikan

42

informasi yang sama tetapi tanpa fungsi tambahan yang disediakan oleh

JavaScript.)

3.9. Database

Database atau basis data adalah kumpulan data yang di

sempurnakan secara sistematis di dalam komputer dan dapat diolah atau

dimanipulasi menggunkan perangkat lunak (program aplikasi ) untuk

menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi

berupa tipe data, struktur, dan juga batasan – batasan data yang disimpan.

Basis data merupakan aspek yang sangat penting karena dapat

menghindari duplikasi data, hubungan antar data yang tidak jelas,

organisasi data, dan juga update yang rumit.

Proses memasukan dan mengambil data kedalam dari media

penyimpanan data memerlukan perangkat lunak yang disebut dengan

sistem manajemen basis data (Database management / DBMS).DBMS

merupakan sistem perangkat lunak yang memungkinkan user untuk

memelihara, mengontrol, mengakses data secara praktis dan efisien.

Dengan kata lain semua akses ke basis data akan ditangani oleh DBMS.

Ada beberapa fungsi yang harus ditangani DBMS yaitu mengelola

pendefinisian data, dapat menangani permintaan pemakai untuk

mengakses data, memeriksa sekuriti dan integriti data yang didefinisikan

oleh DBA (Database Administrator), menangani kegagalan dalam

43

pengaksesan data yang disebabkan oleh kerusakan sistem maupun diks,

dan menangani untuk kerja semua fungsi secara efisien.

Tujuan utama dari DBMS adalah untuk memberikan tinjauan

abstrak data kepada user (pengguna). Jadi sistem memyembunyikan

informasi tentang bagaimana data disimnpan, dipelihara, dan tetap dapat

diambil (diakses) secara efisien. Pertimbangan efisien di sini adalah

bagaimana merancang struktur data yang kompleks tetapi masih tetap

buisa digunakan oleh pengguna awam tanpa mengetahui komplesitas

strukturnya.

3.10. Flowchart

Flowchart merupakan gambar atau bagan yang memperlihatkan

urutan dan hubungan antar proses beserta instruksinya. Gambaran ini

dinyatakan dengan simbol. Dengan demikian setiap simbol

menggambarkan proses tertentu. Sedangkan hubungan dengan garis

penghubung antar proses digambarkan penghubung. Flowchart ini

merupakan langkah awal pembuatan program. Jika ada penambahan

proses maka akan dapat dilakukan dengan mudah. Setelah selesai disusun

selanjutnya pemrogram menerjemahkan ke bentuk program dengan bahasa

pemrograman.

Tabel 3.1 Simbol - simbol Flowchart

Simbol KeteranganTerminal point Symbol. Digunakanuntuk menunjukan awal dan akhir suatuproses

44

Simbol KeteranganPreperation Symbol. Simbol persiapandigunakan untuk memberi nilai awalsuatu besaran atau variabel (hargaawal).Procces Symbol. Simbol proses,pengolahan digunakan untukmewakili suatu proses, sepertiaritmatika atau pemindahan data.

Predefined Procces Symbol. Simbolterdefinisi digunakan untuk menunjukansuatu operasi yang rinciannyaditunjukan di tempat lain atau untukproses yang detailnya dijelaskanterpisah.Decision symbol. Simbol keputusandigunakan untuk mewakili operasiperbandingan logika atau penyeleksiankondisi di dalam program.

Input/Output Symbol. Digunakan untukmenyatakan data masukan ataukeluaran.

Simbol Penghubung. Digunakan untukmenunjukan sambungan dari bagan aliryang terputus di halaman yang masihsama.

Simbol Penghubung. Halaman laindigunakan untuk menunjukan hubunganarus proses yang terputus dengansambunganya ada di halaman yang lain.

Simbol Garis Alir. Digunakan untukmenunjukan aliran atau arus dari proses.

45

3.11. DFD ( Data Flow Diagram )

DFD sering digunakan untuk menggambarkan suatu sistem yang

telah ada atau sistem baru yang akan dikembangkan secara logika tanpa

mempertimbangkan lingkungan fisik dimana data tersebut mengalir

(misalnya lewat telepon, surat dan sebagainya) atau lingkungan fisik

dimana data tersebut akan disimpan (misalnya file kartu, microfile,

harddisk, tape, dan lain sebagainya).

DFD merupakan alat yang akan digunakan pada metodologi

pengembangan sistem yang terstruktur (structured analysis and design).

DFD merupakan alat yang cukup popular saat ini, karena dapat

menggambarkan arus data di dalam sistem dengan struktur. DFD

merupakan dokumentasi jadi sistem yang baik.

Tabel 3.2 Simbol Data Flow Diagram

Simbol Keterangan

Kesatuan Luar atau External Entity.Merupakan sumber atau tujuan data atau suatubagian atau orang yang berada di luar sistemtetapi berhubungan dengan sistem tersebut,baik itu memasukan data maupun mengambildata dari sistem.

Proses. Simbol ini digunakan untuk melakukanproses pengolahan data di dalam DFD, yangmenunjukan suatu kegiatan yang mengubahaliran data keluar (output).

Penyimpanan data atau data storage.Berfungsi sebagai tempat penyimpanandokumen - dokumen atau file - file yangdibutuhkan dalam suatu sistem informasi.

46

Simbol Keterangan

Aliran data.Menunjukan arus dalam proses, dimana simbolaliran data ini mempunyai nama sendiri.

3.12. ERD (Entity Relationship Diagram )

ERD adalah model konseptual yang mendeskripsikan hubungan

antara penyimpanan. ERD digunakan untuk memodelkan struktur data dan

hubungan antar data. ERD pertama kali dideskripsikan oleh Peter Chen

yang dibuat sebagai bagian dari perangkat lunak CASE. Simbol yang

digunakan pada ERD bisa dilihat pada tabel di bawah ini :

Tabel 3.3 Simbol – simbol ERD

Simbol KeteranganEntitas adalah suatu objek yang dapat diidentifikasikan dalam lingkungan pemakai

Relasi adalah untuk menunjukan adanyahubungan di antara sejumlah entitas yangberbeda

Atribut adalah untuk mendeskripsikankarakter entitas (atribut yang berfungsi keydiberi garis bawah)Garis adalah sebagai penghubung antararelasi dengan entitas.

3.13. Adobe Photshop

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

47

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 dan versi yang terakhir (keduabelas) adalah Adobe

Photoshop CS5. Photoshop tersedia untuk Micorosoft Windows, Mac OS

X dan Mac OS; versi 9 ke atas juga dapat digunakan oleh sistem operasi

lain Linux dengan bantuan perangkat lunak tertentu seperti Crossover.

Photoshop dapat menerima penggunaan beberapa model warna :

1. RGB color model

2. Lab color model

3. CMYK color model

4. Grayscale

5. Bitmap

6. Duotone

Versi terakhirnya dilengkapi dengan Adobe Camera RAW, sebuah

plugin yang di kembangkan oleh Thomas Knoll yang dapat membaca

beberapa format File RAW dari kamera digital dan mengimpornya

langsung ke Photoshop.

48

Gambar 4.1 Tampilan Adobe Photoshop CS 5

Tool dalam Adobe Photoshop adalah alat yang dapat memantu pengguna

dalam mengedit. Tool – tool tersebut terdiri dari berbagai macam tool

dengan kegunaan yang spesifik. Beberpa tool – tool yang ada di

Photoshop antara lain:

a. Move tool : alat ini digunakan untuk memindahkan posisi layer dalam

satu foto ataupun memindahkan sebuah foto atau layer dalam sebuah

foto ke foto yang lain / foto yang berbeda.

b. Rectangular Marquee Tool : alat ini digunakan untuk menyeleksi

objek yang berbentuk kotak. Klik kanan diatas alat ini maka akan

muncul alat lain dari kelompok marquee tool seperti Eliptical Marquee

Tool, Single Row Marquee tool dan Single Column Marquee Tool.

c. Eliptical Marquee Tool : alat ini digunakan untuk menyeleksi objek

yang berbentuk lingkaran seperti menyeleksi lingkaran mata, ban

49

mobil dan objek lain. Alat ini masih satu kelompok dengan

Rectangular Marquee Tool.

d. Lasso Tool : digunakan untuk menyeleksi objek dengan bentuk bebas,

alat ini akan membentuk seleksi sesuai dengan gerakan mouse,

penggunaan alat ini sangat bergantung dengan gerakan mouse

sehingga cukup sulit mengendalikan dan mencapai hasil yang

maksimal.

e. Polygonal Lasso Tool : digunakan untuk menyeleksi objek dengan

bentuk bebas bersudut, alat ini membentuk seleksi melalui titik-titik

point yang dibuat dengan menggunakan klik kiri mouse. Alat ini juga

dapat digunakan untuk memotong dan mengubah background foto.

f. Magnetic Lasso Tool : digunakan untuk menyeleksi objek dengan

bentuk bebas, cara kerja alat ini adalah menempel pada tepi objek yang

akan dipotong ketika mouse bergerak mengelilingi tepian objek,

selama proses seleksi alat ini membentuk titik-titik penghubung

seleksi.

g. Magic Wand Tool : digunakan untuk menyeleksi satu jenis warna

(warna solid) pada foto. Alat ini dapat menyeleksi dengan pengaturan

nilai tolerance atau nilai cakupan warna, semakin besar nilai tersebut

maka semakin luas cakupan warna yang di seleksi.

h. Crop Tool: digunakan untuk memotong gambar, foto ataupun canvas

(kertas kerja). Pemotongan dengan alat ini dilakukan secara permanen

mengubah bentuk dimensi lebar dan tinggi foto. Pemotongan

50

dilakukan dengan menentukan area potong berbentuk kotak dari

sebuah foto.

i. Slice Tool : digunakan untuk kebutuhan website dengan cara

memotong hasil desain yang telah dibuat di Photoshop menjadi

potongan yang lebih kecil.

j. Eyedropper Tool : digunakan untuk mengambil sample warna dari

sebuah gambar ataupun foto, sample warna diambil dengan cara

mengklik warna target yang kemudian secara otomatis akan mengubah

warna depan (foreground color) pada toolbox.

k. Ruler Tool : digunakan untuk mengukur dimensi lebar dan tinggi. alat

ini biasanya digunakan untuk kebutuhan website seperti mengukur dan

memperkirakan interface tinggi & lebar tombol, header ataupun area

website lainnya. Satuan yang digunakan biasanya pixels.

l. Note tool : digunakan untuk memberikan catatan pada hasil desain

yang telah di buat. Catatan ini berguna sebagai pengingat dalam proses

pembuatan desain ataupun dapat berguna sebagai media untuk

penyampaian sebuah pesan ketika bekerja secara team.

m. Hand Tool: digunakan untuk menggeser/memindah bidang pandang

foto atau gambar di dalam window view area atau dalam kondisi

gambar sedang di perbesar (zoom in). Cukup tekan dan tahan tombol

spasi untuk meminjam alat ini.

51

n. Zoom Tool : digunakan untuk memperbesar ataupun memperkecil

tampilan foto atau gambar. Pengaturan zoom in atau zoom out dapat

dilakukan melalui option pada bar.

o. Spot Healing : digunakan untuk menghapus noda pada sebuah foto

ataupun gambar, alat ini juga biasanya digunakan untuk

menghilangkan noda di wajah ataupun menghilangkan jerawat

diwajah.

p. Patch Tool : digunakan untuk memperbaiki foto dengan cara

memanfaatkan pola yang terdapat pada foto tersebut. Perbaikan

dilakukan dengan menyeleksi kerusakan area kemudian menarik

seleksi tersebut diatas pola target untuk menutupi area kerusakan.

q. Brush Tool : digunakan untuk melukis foto atau gambar dengan

goresan kuas berdasarkan warna depan (foreground color) yang telah

dipilih.

r. Gradient Tool : digunakan untuk mengecat area yang dipilih (selected

area) dengan perpaduan dua warna atau lebih. Gradient ini juga

memiliki beberapa pengaturan dan tipe untuk menghasilkan efek

perpaduan warna yang sesuai dengan keinginan.

s. Paint Bucket Tool : digunakan untuk mengecat atau mewarnai area

tertentu atau layer tertentu berdasarkan warna depan (foreground

color) yang telah dipilih.

t. Path Selection Tool : digunakan untuk menyeleksi path yang telah

dibuat dengan menggunakan pen tool.

52

u. Horizontal Type Tool : digunakan untuk membuat teks secara

horizontal. Selain alat ini ada juga Vertical Type Tool untuk membuat

teks secara vertical dan type mask untuk membuat teks dalam bentuk

seleksi.

v. Pen Tool: digunakan untuk menggambar path sudut ataupun lengkung.

Alat ini biasa juga digunakan untuk menyeleksi objek. Selain alat ini

ada kumpulan alat lain untuk menambah titik point, mengurangi dan

memodifikasi path yang telah dibuat.