BAB 1

SEJARAH DAN TEKNOLOGI WEB DESAIN

Web desain adalah sebuah lahan baru untuk para programmer dan graphic

designer yang dimulai sejak awal tahun 1990-an. Seiring dengan perkembangannya

web desain tumbuh dan terpisah dari graphic desain, dimana web desain memiliki

segmen pasar tersendiri yang terpisah dari graphic desain. Salah satu perbedaan

antara graphic desain dan web desain adalah pada sisi pemrogrammannya, dimana

saat orang berkecimpung di dunia web desain, maka ia tidak akan lepas dari

pemahaman akan beberapa bahasa pemrograman. Beberapa bahasa pemrograman

yang digunakan dalam web desain adalah HTML, PHP, javascript.

Pada masa sekarang terdapat dua macam golongan pekerja web deain, yaitu

orang yang dulunya adalah seorang programmer, dan orang yang dahulunya adalah

seorang graphic desainer. Orientasi masing-masing golongan tentu saja berbeda,

untuk seorang yang dulunya programmer akan mementingkan dari segi sistemnya,

sedangkan untuk orang yang dahulunya seorang graphic desainer akan mementingkan

dari sisi grafisnya. Keduanya memiliki kekuatan yang sama dan apabila bekerjasama

tentu akan menghasilkan web yang menarik dan sempurna.

Website pertama kali di dunia adalah website yang dibuat oleh Tim barners-

Lee pada tahun 1991. Website tersebut bernama World Wide Web yang dibuat murni

menggunakan bahasa HTML. Dari sinilah perkembangan dunia website dimulai. Pada

tahun 1994, World Wide Web Consortium (W3C) didirikan. W3C mengambil

keputusan bahwa bahasa HTML dijadikan sebagai script standar untuk semua

website. Pada perkembangannya, script HTML dikembangkan menjadi XHTML yang

memungkinkan untuk integrasi dengan berbagai plugin script diantaranya java, flash

dan ajax.

Pada tahun 1996, muncul tabel base layout website yang menggunakan tabel

sebagai basis layoutnya. Dengan menggunakan tabel base layout, web bisa dibuat

dalam beberapa kolom dengan setting layout yang lebih baik. Contoh web yang

menggunakan tabel base layout adalah Yahoo. Pada tahun 1996, flash yang sekarang

dikenal dengan adobe flash diintegrasikan dengan website. Sehingga tampilan website

lebih menarik dengan tambahan berupa objek beranimasi. Tetapi kelemahannya,

dengan adanya website yang memiliki tampilan objek flash di dalamnya, bila diakses

menjadi berat, dan computer harus terinstal plugin flash agar dapat menampilkan

objek flash dalam tampilan websitenya.

Perkembangan berikutnya adalah integrasi dengan objek 3 dimensi, yang

dimulai dengan diperkenalkannya script 3DML. Dengan menggunakan script 3DML,

memungkinkan web untuk menampilkan objek 3 dimensi di dalamnya. Tetapi dalam

perkembangannya, penambahan objek 3 dimensi ini jarang dipakai. Hal ini

dikarenakan sistem 3DML menggunakan XML non-standar serta hanya bisa dibuka

oleh satu jenis browser saja, yaitu Flatland Rover.

Pada tahun 2000, diperkenalkan Dynamic HTML atau DHTML, yang pada

awalnya merupakan gabungan antara script flash dan HTML yang kemudian

dikembangkan menjadi javascript. Tetapi kemudian masing-masing berkembang

menjadi platform yang berbeda-beda. Pada tahun 2000, script CSS atau yang dikenal

sebagai Cascading Style Sheet diperkenalkan. Dengan script CSS, script untuk

tampilan bisa dipisahkan dari script HTML induknya. Dengan menggunakan CSS,

template web bisa dibuat lebih rapi. CSS memungkinkan banyak fungsi tampilan yang

tidak mungkin dipenuhi oleh table-based layout. CSS akhir-akhir ini menjadi sangat

populer dengan diperkenalkannya platform CMS opensource seperti Joomla dan

Wordpress. Hampir semua template Wordpress dan Joomla menggunakan CSS

sebagai basis tampilannya.

CMS (Content Management System) CMS cocok digunakan untuk

membangun sebuah website baru yang menarik, handal, interaktif, fasilitas lengkap

dan tentu saja mudah dikelola. CMS tidak hanya bermanfaat bagi pengguna tingkat

menengah dan tingkat mahir, namun juga sesuai bagi pemula yang ingin membuat

sebuah situs web baru dengan fasilitas lengkap, tanpa memerlukan pengetahuan teknis

serta pemrograman yang mendalam tentang cara pembuatan sebuah situs web. Ada

berbagai jenis website, diantaranya portal, Website Shopping/E-Commerce, Website

Sales Letter, Website Profile, Blog, dan Website Community.

Website tipe Portal adalah sebuah website yang memberikan bermacam

macam informasi dalam satu domain. Informasi yang diberikan ini bisa spesifik

seputar satu topik saja, misalnya portal games, portal berita, ataupun yang bersifat

general. Umumnya sebagian besar informasi yang diberikan oleh Portal ini bersifat

searah, dari webmaster kepada user, walaupun pada perkembangannya banyak yang

mulai menyajikan user generated contents. Pendapatan utama website tipe Portal

adalah dari Iklan. Contoh website portal yang kita kenal diantaranya adalah,

Yahoo.com, KapanLagi.com, Plasa.com, EraMuslim.com, dan masih banyak lainnya.

Website Shopping/E-Commerce adalah sebuah website yang bertujuan untuk

menjual barang barang riil melalui internet. Umumnya barang yang dijual lebih dari

satu, dan menggunakan sistem shopping cart. Sumber pendapatan utamanya adalah

dari penjualan barang-barang. Contoh website Shopping misalnya Amazon.com,

PernikMuslim.com, KutuKutubuku.com

Website Sales Letter serupa dengan website Shopping. Perbedaan utamanya

adalah jumlah barang/jasa yang dijual. Biasanya fokus pada satu produk dan biasanya

pula disertai dengan begitu banyak bonus. Sumber pendapatannya dari penjualan

produk/jasa tersebut. Contohnya AsianBrain.com, FormulaBisnis.com, dll.

Website Profile sendiri adalah sebuah website yang fungsi utamanya adalah

sebagai portofolio online sebuah perusahaan. Biasanya memuat informasi mengenai

perusahaan tersebut beserta latar belakang, produk, penghargaan, dan informasi

informasi lainnya yang berkaitan dengan perusahaan pemilik website profile tersebut.

Sumber pendapatannya tidak ada, karena website profile biasanya dirancang untuk

mendukung bagian marketing perusahaan. Contoh website profile adalah

BabaRafi.com, Virtual.co.id, CoffeeToffeeIndonesia.com dll.

Blog, sebutan populer dari Weblog adalah sebuah website yang dirancang

untuk menjadi katalog/arsip/kumpulan artikel/tulisan yang ditulis oleh

seorang/sekelompok penulis tertentu. Biasanya disertai dengan fitur komentar oleh

pembaca tulisan/artikel tersebut. Engine blog yang paling populer saat ini adalah

Blogger dan WordPress. Sementara itu, blog juga sering dimanfaatkan oleh pebisnis

UMKM sebagai website profile dengan menaruh foto produk dan info perusahaan

mereka di blog. Sebagian orang yang lain memanfaatkan blog untuk mencari

penghasilan via adsense ataupun varian iklan lainnya. Contoh Blog adalah

PecasNdahe.com, dan masih buaanyak lagi lainnya.

Website Community, seperti namanya dibangun berdasarkan atas komunitas.

Contentnya biasanya user generated. Sifatnya dari user untuk user. Jenisnya banyak

sekali, mulai dari yang menyediakan tempat untuk saling berbagi info makanan,

kemudian untuk ajang memasang foto foto dan profile beserta testimonial, sampai

ajang berbagi dan unjuk kreasi dari gambar/desain, sampai karya flash. Pendapatan

utamanya adalah dari iklan, baik iklan umum, maupun adsense (PPC/PPV) dan

variannya. Contoh dari website community adalah Friendster.com,

SendokGarpu.com, DeviantArt.com, Multiply.com, NewGrounds.com, dll.

Server web adalah sebuah perangkat lunak server yang berfungsi menerima

permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan

mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya

berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah Apache dan

Microsoft Internet Information Service (IIS).

Web Server adalah sebuah program computer yang menyampaikan konten,

seperti halaman web, menggunakan Hypertext Transfer Protokol. Pengertian web

server juga dapat menunjuk pada computer atau virtual machine yang menjalankan

program tersebut.

BAB II

MEMULAI MENDESAIN WEB DI DALAM SERVER LOKAL

Sebelum website yang kita buat dapat berfungsi dengan baik setelah kita

lakukan hosting ke internet, maka perlulah terlebih dahulu kita mendesain serta

mengujinya di dalam computer kita yang kita setting sebagai web server. Banyak

aplikasi yang dapat kita gunakan sebagai web server. Dalam hal ini kita akan

menggunakan salah satu aplikasi web server untuk windows yaitu XAMPP sebagai

local server.

Web server adalah sebuah perangkat keras dan perangkat lunak dan

merupakan aplikasi utama untuk menyimpan dan mengirimkan dokumen web

(HTML, PHP,ASP,JSP). Untuk menyiapkan/ melakukan instalasi web server

diperlukan beberapa perangkat, antara lain :

1. Perangkat Keras

a. Unit PC Calon Server Web

b. Perangkat Jaringan (Kabel UTP, Switch/Hub,Ethernet)

2. Perangkat Lunak

a. Sistem Operasi (WindowsXP, Windows 2000, Windows 2003, Linux)

b. Perangkat Lunak ( XAMPPS, Appserv, PHPTriads)

Sistem operasi

Hampir semua sistem operasi mampu menjalankan aplikasi web dan sekaligus

dapat dijadikan webserver. Kali ini kita akan memakai sistem operasi Microsoft

Windows XP service pack 2. Windows dipilih karena keluasan penggunaan oleh

masyarakat pengguna komputer di Indonesia, untuk menjadi sebuah web server

sebuah personal komputer perlu kita tambahkan sebuah aplikasi server web, misalnya

; XAMPP.

1. Instalasi ( PHP , MySQL, Apache) dengan menggunakan XAMPP

Sebelum melakukan instalasi, kita siapkan software paket XAMPP terlebih

dahulu, software XAMPP ini dapat di download secara gratis melalui internet.

Langkah-langkahnya adalah sebagai berikut :

a. Double Klik xampp-win32-1.6.4-installer.exe, maka akan muncul dialog

pemilihan bahasa, secara default adalah : English.

b. Biarkan dalam kondisi default saja

c. Klik OK

d. Kemudian muncul dialog XAMPP Basic

e. Klik Next

Maka akan muncul dialog, untuk menempatkan XAMPP ke dalam folder yang

kita kehendaki. Secara default C:\xampp

f. Klik Next

g. Setelah muncul dialog

Check paket Desktop, Start Menu, dan Service yang akan kita pasang pada

server web kita.

h. Klik Install

i. Tunggu system XAMPP di extract ke dalam computer server kita sampai 100

% ( complete)

j. Kemudian klik Finish

k. Klik Yes

l. Pastikan semua kondisi modules pada XAMPP Control Panel dalam keadaan

running.

Saat ini, Web Server kita telah siap digunakan untuk menerima file web.

Untuk mengujinya silahkan buka browser : Internet Explorer, Mozilla FireFox atau

browser lain.

Pilihlah bahasa yang digunakan yaitu English. Kemudian akan muncul

tampilan sebagai berikut :

Kemudian klik pada phpMyAdmin untuk membuat database baru. Buat sebuah

database baru dengan mengisikan pada kolom create new database. Sebagai contoh, kita akan

membuat database untuk server wordpress, maka kita ketik “wordpress” pada nama

databasenya dan “utf8_unicode_ci” pada type databasenya.

Kemudian klik tombol “create”.

Silahkan Copy dan Paste-kan File-file Web Anda pada folder C:\xampp\htdocs\

Proses instalasi web server sampai tahap ini telah selesai.

BAB III

WEBSITE BERBASIS CMS

(WORDPRESS)

1. Instalasi wordpress

Langkah menginstalasi wordpress pada server local adalah sebagai berikut :

a. Extract-lah file wordpress yang telah kita download melalui

www.wordpress.org ke dalam folder C:\xampp\htdocs.

b. Bukalah folder wordpress yang telah kita paste-kan tadi. Kemudian ubahlah

nama file wp-config-sample.php menjadi wp-config.php.

c. Bukalah file wp-config.php tersebut dengan menggunakan aplikasi Notepad.

d. Gantilah penamaan pada DB_NAME, DB_USER, DB_PASSWORD, seperti

gambar berikut :

Penamaan pada DB_NAME haruslah sama dengan penamaan pada database pada

phpMyAdmin yang telah kita buat sebelumnya yaitu dengan nama “wordpress”.

Untuk DB_USER isikan dengan root, dan DB_PASSWORDnya dikosongkan.

e. Save file tersebut dengan klik pada menu File => Save.

f. Kemudian klik close.

g. Agar saat kita mengakses localhost dapat langsung terkoneksi dengan file web

yang telah kita pastekan tadi. Maka bukalah file index.php yang ada pada folder

C:\xampp\htdocs dengan menggunakan aplikasi Notepad, kemudian gantilah text

“header('Location: '.$uri.'/xampp/');” dengan “header('Location:

'.$uri.'/wordpress/');”. Save file yang telah kita ubah tadi.

h. Bukalah browser (internet explorer, Mozilla firefox, dll) dan ketikan “localhost”

pada bagian address-nya. Sekarang kita akan memulai untuk mensetting website

berbasis wordpress yang telah kita install-kan.

i. Isikan nama dan e-mail address pada kolom yeng telah disediakan.

j. Jangan lupa klik pilihan “Allow my blog to appear in search engines like Google

and Technorati.” Kemudian klik Install WordPress.

k. Apabila proses instalasi berhasil, maka akan terdapat tampilan sebagai berikut :

l. Catatlah password yang diberikan oleh wordpress untuk dapat masuk sebagai

admin. Kemudian klik Log In.

m. Untuk masuk sebagai administrator Ketik username dan password yang diberikan

tersebut pada kolom yang telah disediakan. Kemudian klik Log In.

2. Mengganti Password

Pertama kali yang harus dilakukan dalam mengoperasikan Wordpress ini

adalah mengganti password dengan kata yang mudah kita ingat. Caranya adalah

sebagai berikut: Klik tombol Users => Your Profile sehingga muncul tampilan seperti

gambar. Kemudian kita naikkan tampilan tersebut sehingga menemukan kolom untuk

mengganti password, kemudian klik tombol ”Update Profile”.

3. Mengganti Template

Kita dapat mengganti tampilan web blog kita dengan cara sebagai berikut :

a. Kita login sebagai admin.

b. Klik Appearance.

Saat ini kita baru memiliki 2 buah template yang secara default telah diberikan

saat kita menginstal wordpress, yaitu WordPress Default 1.6 dan WordPress

Classic 1.5.

c. Untuk menambahkan theme yang dapat kita peroleh dari mendownload lewat

internet (file tersebut dalam format zip), pertama pilih pada bagian appearance =>

Add New Theme, klik pada bagian upload.

d. Klik browse untuk memilih file zip dari theme yang telah kita download.

e. Kemudian klik Open.

f. Klik Install Now. Hasilnya akan terdapat keterangan yang dapat dilihat pada gambar

berikut.

g. Klik Preview untuk melihat tampilan halamannya. Kemudian klik Activate apabila Theme

tersebut digunakan dalam tampilan web kita.

h. Untuk mengganti dengan tampilan theme yang lain, dilakukan dengan cara klik

Appearane => theme, kemudian pilih theme yang akan diaktifkan. Naikkan

tampilannya dan pilih satu dari gambar yang ada. Sehingga muncul gambar berikut

ini:

i. Kita lihat tampilan untuk user dengan mengetik pada Address Bar

http://localhost/wordpress dan enter, maka akan muncul seperti ini:

j. Tampilan web telah berubah.

Bila kita ingin merubah tata letak dari link-link yang ada, kita dapat mulai

dari gambar 11. Klik Appearance – Widgets, sehingga muncul tampilan seperti:

k. Kolom Sidebar 1 menunjukkan keadaan pengaturan saat ini. Sedangkan pada

Available Widgets adalah komponen-komponen yang tersedia. Bila akan

merubah tampilan, kita dapat melakukan darf and drop komponen yang

diperlukan pada Available Widgets ke kolom Sidebar 1. Kemudian klik tombol

Save Changes. Sebagai contoh, klik kemudian drag widgets Calendar dan Links

pada Sidebar 1, Search dan Categories pada Sidebar 2. Klik Save untuk

menyimpan pengaturan pada masing-masing komponen.

4. Menambah Halaman

Halaman atau page adalah ruangan yang dapat diisi dengan materi, dimana

judul materi sekaligus dapat muncul sebagai link yang muncul pada halaman Home

Page. Link tersebut dapat diatur secara herarki. Cara penambahan halaman adalah

sebagai berikut :

a Kita login sebagai admin.

b Klik Page – Add New, sehingga muncul tampilan seperti gambar ini:

c Kita isi Page Title

Untuk menyimpan ada 2 macam. Tombol

ketikan, tetapi tidak dimunculkan di halaman web. Yang kedua adalah tombol

Publish, gunanya adalah menyimpan ketikan dan hasil ketikan akan muncul di

halaman web. Bila kita klik tombol

web dengan klik Visit Site

d Bila kita klik link BERITA

e Tambahkan halaman

yaitu mulai dari point

Page Title dan Page Content, kemudian kita atur letak parent linknya.

Untuk menyimpan ada 2 macam. Tombol Save berguna untuk menyimpan hasil

idak dimunculkan di halaman web. Yang kedua adalah tombol

, gunanya adalah menyimpan ketikan dan hasil ketikan akan muncul di

halaman web. Bila kita klik tombol Publish, kemudian kita lihat

Visit Site, maka akan muncul tampilan seperti ini:

BERITA , maka akan muncul tampilan seperti diatas.

Tambahkan halaman-halaman yang lain dengan cara yang sama seperti di atas,

yaitu mulai dari point b. Misalnya halaman PROFILE dan GALLERY

, kemudian kita atur letak parent linknya.

berguna untuk menyimpan hasil

idak dimunculkan di halaman web. Yang kedua adalah tombol

, gunanya adalah menyimpan ketikan dan hasil ketikan akan muncul di

, kemudian kita lihat pada halaman

ini:

seperti diatas.

halaman yang lain dengan cara yang sama seperti di atas,

GALLERY.

f Bila halaman BERITA mempunyai link anak bernama SIGMA BULLETIN,

pembuatannya: Klik Page-Add New, tulis Title Page dan Page Content, atur Page Parent

link disebelah kanan halaman yang mengarah pada halaman BERITA.

g Klik tombol Publish, maka ketikan akan tersimpan dan ditampilkan di halaman web.

Seperti yang ada pada gambar. Terlihat bahwa Link SIGMA BULETIN berada didalam

Link BERITA.

5. Menambah Post

Post adalah ruangan yang dapat diisi dengan materi atau artikel, dimana tampilannya

akan langsung berada di Home Page. Postingan terakhir selalu muncul pada halaman paling

atas, sedangkan judul materi/artkel tidak muncul sebagai link. Link-link tersebut akan

menambah jumlah pada link yang berupa kategori. Cara penambahan post adalah sebagai

berikut :

a Kita login sebagai admin.

b Klik Post-Add New, sehingga muncul tampilan seperti berikut:

Isikan Title dan Content pada Post tersebut, kemudian klik Publish. Lihat

hasilnya dengan klik visit site.

c Kita tambah kategori Fashion melalui tombol Categories, caranya kita ketik pada

kolom kategories ”LINUX”, terus klik tombol Add. Buatlah sebuah Posting yang

baru dengan Add New Post, isilah Title dan Post, pilih pada Categories nya

dengan “LINUX” kemudian klik tombol Publish. Kemudian kita buka Home

Page dari webblog ini.

d Artikel dengan judul “INSTALASI LINUX” muncul dihalaman Home Page.

Sedangkan disebelah kanan terlihat kategori LINUX memiliki 1 buah artkel.

6. Menampilkan Gambar

Untuk memasukkan gambar pada Halaman dan Post caranya sama. Langkah-

langkahnya adalah sebagai berikut :

a Kita login sebagai admin.

b Klik Page - edit, pilih edit pada page SIGMA BULLETIN.

c Klik tombol Add an Image, kemudian pilih gambarnya menggunakan Browse.

d Klik Upload kemudian Insert into Post.

e Klik tombol Update Page, maka hasil ketikan dan gambar akan tersimpan dan pada

tampilan:

7. Menampilkan Link

Sebuah Web akan lebih lengkap kalau dilengkapi dengan link-link web yang sejenis.

Pada Wordpress, link ini diberi nama Blogroll. Kita dapat merubah nama Blogroll tersebut

dan menambahkan lagi dengan nama yang lain. Cara membuat link tersebut adalah sebagai

berikut :

a Kita login sebagai admin.

b Klik Link – Link Categories, sehingga muncul tampilan seperti berikut:

c Kita akan merubah nama ”Blogroll” menjadi ”Link ICT Learning Center”,

caranya klik link Edit, sehingga tampilannya seperti ini:

d Setelah Category name dan Category slig kita ganti, terus klik tombol Update

Category. Tampilan yang muncul di Home Page adalah seperti ini:

e Kemudian, klik Link – edit, sehingga muncul tampilan ini:

f Silahkan pilih link yang akan di edit, kemudian pilih Edit untuk link yang akan

dirubah, sehingga muncul tampilan seperti di bawah ini.

g Edit Name dan Web Address, kemudian klik tombol Update Link. Tampilan user

akan seperti pada gambar berikut ini: