Artikel ini memberikan delapan panduan untuk membangun website profesional dan berkelas, mulai dari logo, layout, slicing, editor, animasi Flash, client side coding, server side coding, hingga database.

1. 98 KNOW-HOW INTERNET 02/2008
PANDUAN
MEMBANGUN
WEBSITE
Jika pada detik ini Anda mulai membuat suatu alamat e-mail atau
menentukan nama domain untuk website, maka bersiaplah untuk
melakukan suatu pekerjaan yang menyita waktu cukup lama.
Joko Nurjadi
HAL INI DISEBABKAN Anda harus menentukan nama domain Ambil contoh logo Coca-Cola, yang memiliki bentuk tulisan
dan alamat e-mail yang unik, di antara jutaan pengguna Internet khas, atau lambang M pada McDonald’s yang nampak sangat
lainnya. Karena itu, menentukan nama yang umum tetapi unik bersahabat.
sebagai nama domain atau alamat e-mail adalah pekerjaan yang Tapi, bukankah karena mereka telah terkenal, maka logo
memerlukan perjuangan. mereka dikenal di mana-mana? Mungkin demikian pikir Anda,
Bagi mereka yang cepat menyerah, akhirnya membuat alamat dengan kata lain memang jika Anda bekerja tiga hari tiga malam
e-mail yang nyentrik, misalnya p4k_r4d3n (maksudnya Pak untuk menciptakan sebuah logo dengan konsep yang matang
Raden), joko_2007_10_30 (maksudnya si Joko membuat e-mail dan sangat berciri khas, tidak menjamin Anda akan terkenal 10
pada jam 10:30 tahun 2007) yang akhirnya membuat mereka tahun mendatang.
kerepotan menyebutkan alamat e-mail sendiri. Sebaliknya sebuah logo yang awalnya biasa-biasa saja, masih
Demikian juga untuk nama domain, terutama untuk yang memiliki kemungkinan akan terkenal dan menjadi luar biasa saat
berakhiran .com, di mana sudah umum diketahui semakin sing- produknya dikenal di mana-mana.
kat dan semakin mudah diingat sebuah nama domain, maka Tetapi, jelas lebih baik Anda harus mempersiapkan segala
semakin susah didapatkan saat ini. sesuatunya dengan baik, termasuk di dalamnya adalah mem-
Hal tersebut menunjukkan sedemikian menjamurnya website persiapkan logo dengan pertimbangan matang, sehingga di luar
sebagai “rumah virtual” sebuah perusahaan atau individu. hal-hal lainnya, logo itu sendiri telah memiliki nilai lebih.
Sebuah nama domain pada prinsipnya disediakan untuk Tools yang dapat Anda gunakan dalam membuat logo adalah
sebuah website, walau tidak semua nama domain telah me- software editor gambar berbasis vektor. Kelebihan gambar
miliki website. Website kadang kala mirip dengan seorang berbasis vektor adalah dalam di-scale (diperbesar maupun
bayi, Anda telah mempersiapkan nama bayi itu sebelum bayi diperkecil) tanpa mengalami pengurangan kualitas.
itu sendiri lahir. Hal ini berbeda dengan gambar berbasis bitmap, yang terdiri
Yang akan kita bahas pada artikel ini, adalah bagaimana mem- dari susunan pixel, jika gambar bitmap diperbesar maupun
buat “bayi” (baca: website) tersebut tumbuh menjadi website diperkecil, akan terjadi penurunan kualitas.
profesional dan berkelas. Hal ini jelas dibutuhkan karena website Masing-masing gambar berbasis vektor maupun berbasis
Anda harus bersaing dengan jutaan website lainnya. bitmap memiliki fungsinya sendiri, gambar berbasis vektor di-
gunakan untuk membuat bentuk-bentuk seperti garis, lengkung,
Panduan 1: Logo kotak, lingkaran, poligon dan bentuk-bentuk lainnya yang secara
Baik website Anda merupakan website perusahaan, institusi, matematis dapat dipetakan pada layar.
yayasan, klub, individu, dan lain sebagainya, tentunya memiliki Gambar bitmap digunakan untuk gambar yang lebih rumit,
satu tujuan. Sebuah logo yang baik akan menimbulkan brand menggunakan informasi warna dan bayangan yang luas.
image yang tidak mudah dilupakan. Hal ini tidak berarti gambar vektor tidak dapat digunakan untuk
Sebuah logo tidak harus rumit dan indah, yang lebih ter- gambar yang rumit, rata-rata software editor gambar berbasis
utama adalah mengandung konsep, mudah diingat, dan khas. vektor yang popular mampu memanipulasi gambar yang rumit,

2. 02/2008 INTERNET KNOW-HOW 99
tetapi semakin kompleks gambar tersebut maka akan semakin database, saat itu tentunya masalah design dan layout sudah
tinggi resource yang dibutuhkan oleh komputer Anda. kadaluarsa untuk dibahas.
Software editor gambar berbasis vektor yang popular adalah
Adobe Illustrator, CorelDRAW, dan lain-lain. Sedangkan soft- Panduan 3: Slice
ware editor gambar berbasis bitmap yang sangat popular Setelah gambar layout memenuhi keinginan Anda, langkah
adalah Adobe Photoshop. berikutnya adalah memotong (slice) gambar tersebut sehingga
Kembali pada pembuatan logo, dengan alasan-alasan di atas menghasilkan file HTML dan image yang menyertainya, hal ini
sebaiknya Anda menggunakan software editor gambar berbasis sangat memudahkan pekerjaan programer web selanjutnya.
vektor untuk menciptakan logo Anda. Tools untuk melakukan slicing dapat menggunakan Adobe
ImageReady, di mana link-nya telah terintegrasi pada menu
Panduan 2: Layout Adobe Photoshop. Dimulai dari Adobe ImageReady CS2,
Segalanya dimulai dari halaman pertama, karena itu sebaiknya ImageReady telah memiliki opsi untuk menghasilkan file CSS
Anda membuat dahulu gambar desain layout halaman awal (Cascading Style Sheets).
(front page) dengan menggunakan software editor gambar Tools lain yang cukup popular adalah Adobe Fireworks, yang
berbasis bitmap seperti Adobe Photoshop. didesain agar mudah diintegrasikan dengan produk lainnya
Mengapa bitmap? Karena elemen-elemen website Anda tidak seperti Adobe Dreamweaver dan Adobe Flash (dulu merupakan
akan mengalami perubahan skala yang signifikan. Lalu, men- produk Macromedia sebelum diakuisisi oleh Adobe).
gapa harus dibuat gambar terlebih dahulu? Mungkin beberapa
programer website lebih menyukai langsung mengetikkan baris Panduan 4: Editor
program, menciptakan table-table, menu-menu, mencomot Setelah mendapatkan file HTML atau CSS, diperlukan langkah
gambar sana-sini, dan jadilah sebuah website hanya dengan editing selanjutnya yang telah menyangkut proses pengodean.
bermodalkan sebuah text editor, misalnya NotePad. Dalam hal ini Anda membutuhkan sebuah text editor.
Sebuah website dapat saja diciptakan dengan cara demikian, Pada dasarnya text editor yang mampu menampilkan dan
tetapi Anda akan kekurangan nilai visualisasinya jika langsung menyimpan file teks merupakan syarat utama untuk melakukan
menerapkan kode-kode program tanpa layout. Anda akan pengkodean. Tetapi untuk pengkodean yang cukup kompleks,
mengalami kesulitan membuat bentuk-bentuk melengkung Anda mungkin akan lebih nyaman jika menggunakan text edi-
dan bentuk artistik lainnya. tor yang telah dilengkapi fitur-fitur khusus yang diperuntukkan
Terlebih lagi, dengan membuat layout akan memudahkan untuk web development.
Anda membayangkan website secara keseluruhan, karena Salah satu contohnya adalah Adobe Dreamweaver, yang
umumnya halaman-halaman website hanya memiliki perbedaan mendukung CSS, JavaScript, dan berbagai bahasa scripting,
pada content, sedangkan menu dan table-table utamanya tetap dalam hal ini text editor telah berfungsi sebagai IDE (Integrated
berada pada kerangka yang tetap. Development Environment) dalam pemrograman web, fitur
Jika Anda seorang developer profesional yang mengerjakan seperti WYSIWYG bahkan membuat orang yang tidak memiliki
website untuk pihak client, ada baiknya menunjukkan layout dasar pemrograman mampu membuat website sederhana.
sebelum masuk ke dalam tahap berikutnya. Mungkin pada bahasa pemrograman lain Anda pernah
Layout yang masih berupa gambar akan lebih mudah untuk menemukan dimana satu file mengandung dua bahasa pem-
dimodifikasi dibandingkan telah berupa HTML dan kode prog- rograman, seperti C++ yang dapat menuliskan bahasa Assembly
ram, apalagi jika telah menginjak pada tahap pemrograman secara inline assembler.
Pada pemrograman web, hal tersebut menjadi lebih unik
lagi karena di dalam satu file dapat terdiri berbagai macam
bahasa pemrograman/script. Tidak aneh jika sebuah file ASP
(Active Server Pages) atau PHP mengandung bahasa ASP/PHP
itu sendiri, HTML, CSS, JavaScript, ataupun VBScript.
Karena itu editor yang baik akan mampu menampilkan dan
membedakan berbagai bahasa tersebut dengan perbedaan
warna/highlight, yang akan mempermudah developer untuk
melakukan pengodean.
Panduan 5: Animasi Flash
Sejak diperkenalkan pada tahun 1996, teknologi Flash telah
menjadi metode yang popular untuk keperluan animasi dan
menghasilkan web yang interaktif.
Sebelum Flash dikenal, kebanyakan website menggunakan
GIF animasi untuk menghasilkan animasi, yang pada dasarnya
merupakana sekumpulan gambar diam yang ditampilkan frame
Adobe Illustrator. demi frame.

3. 100 KNOW-HOW INTERNET 02/2008
Flash sendiri tidak selalu menggantikan keberadaan GIF Jika bekerja dengan Client Side Coding, maka Anda masih
animasi, tetapi tentu saja Flash memiliki banyak keunggulan. tidak lepas dari tahap layout dan design.
Contohnya Flash mampu berinteraksi dengan pengguna seperti Sebelum CSS dikenal, atau lebih tepatnya saat Anda hanya
menghasilkan opsi, musik, bahkan game. mengenal HTML, Anda memberikan warna, layout, maupun
Flash dapat digunakan untuk keperluan pada website, mi- jenis font dengan murni menggunakan HTML. Keberadaan
salnya sebagai berikut: CSS adalah untuk menggantikan HTML dalam mendefinisikan
1. Button. layout atau presentasi dokumen.
Dengan Flash, Anda dapat memberikan efek animasi CSS dengan efisien dapat mendefinisikan presentasi doku-
pada sebuah tombol saat melalui event tertentu, seperti men (bahkan dalam file terpisah berekstensi *.css yang di-
mouseover dan click. panggil dari HTML), sehingga HTML khusus digunakan untuk
2. Banner. menampilkan isi dokumen.
Untuk banner sederhana Anda masih dapat memanfaatkan JavaScript mungkin merupakan yang tersulit dalam kumpulan
GIF animasi, tetapi jika diperlukan banner yang lebih inter- Client Side Coding, karena struktur dan sintaksnya yang menye-
aktif, tentunya Flash akan lebih mampu mengakomodasi rupai bahasa C atau Java. JavaScript sering digunakan di dalam
kebutuhan tersebut. website untuk proses validasi form/input, melakukan perubahan
3. Video/Movie. image/animasi saat terjadi event tertentu, membuka window
Saat ini telah banyak dikenal file dengan format *.flv, yang baru dengan pengaturan ukuran, posisi, dan tampilan.
tidak lain merupakan file Flash Video yang digunakan dari Karena berjalan pada sisi client, JavaScript berinteraksi
dalam file *.swf. melakukan respon dengan pengguna dengan cepat. Pem-
4. Mini Site. rograman Ajax bahkan menggali lebih dalam lagi kemampuan
Kemampuan Flash bahkan dapat digunakan untuk men- JavaScript.
ciptakan sebuah website secara keseluruhan, membentuk
sebuah website mini dari Flash. Panduan 7: Server Side Coding
Server Side Coding mencakup bahasa pemrograman/teknologi
Action Script pada Flash membuat Flash tidak melulu sebagai seperti ASP/ASP.NET, PHP, CGI/Perl, Java, Phyton, Ruby, Cold-
tools grafik dan animasi, tetapi juga sebagai tools pemrogram- Fusion, Lotus Domino, dan lain-lain.
an. Terkadang dengan melakukan scripting akan lebih efisien Masuk ke dalam Server Side Coding, berarti Anda telah me-
untuk menghasilkan animasi dibandingkan dengan mengatur ninggalkan tahap layout dan design sebuah website, masuk ke
animasi tersebut secara manual. dalam tahap membangun fungsi website dan sistem back end.
Ikuti kaidah-kaidah pemrograman seperti pemrograman mo-
Panduan 6: Clien Side Coding dular/OOP (Object Oriented Programming) yang didukung oleh
Berbicara tentang bahasa pemrograman website, kita membaginya bahasa pemrograman yang digunakan, karena akan memper-
dua kategori, yaitu Client Side Coding dan Server Side Coding. mudah proses pemeliharaan dan pengembangan lebih lanjut.
Sesuai dengan namanya, Client Side berjalan pada sisi cli- Suatu terobosan dalam pemrograman Server Side Coding yang
ent/browser sehingga tidak membebani server, bahasa/script signifikan pada era ini adalah diperkenalkannya .NET Framework
yang digunakan adalah CSS, HTML/XHTML, JavaScript, Flash, oleh Microsoft, sehingga dengan teknologi ASP.NET programer
Silverlight, dan lain sebagainya. dapat membuat aplikasi web ataupun XML web services.
Cara development website pada .NET menawarkan apa yang
biasa kita lakukan saat mengembangkan aplikasi Windows,
dengan pengaturan controls seperti button atau label pada
halaman web, membangun website dengan paradigma event-
driven GUI (Graphics User Interface).
Kuncinya dalam melakukan Server Side Coding (dan pem-
rograman pada umumnya) adalah memanfaatkan sebaik mung-
kin apa yang dapat ditawarkan oleh bahasa pemrograman/
teknologi yang Anda gunakan.
Ingat bahwa pengguna atau konsumen Anda hanya perlu
merasa nyaman dan ingat untuk mengunjungi website Anda
kembali.
Panduan 8: Database
Database merupakan satu topik besar tersendiri yang tidak akan
pernah habis dikupas. Walaupun tidak semua website harus me-
miliki database, tetapi untuk membuat sebuah website menjadi
dinamis, database merupakan unsur yang sangat penting.
Tampilan Adobe Dreamweaver.
Untuk melakukan pengaturan isi database dari sisi administra-

4. 02/2008 INTERNET KNOW-HOW 101
VARIASI WEBSITE
Skill membuat website dapat dianalogikan seperti keahlian koki
dalam memasak, yang mampu menghasilkan berbagai jenis
masakan dengan cita rasa yang lezat.
Seperti menu-menu masakan yang bervariasi, masing-masing
website tampil dengan fungsi dan keunikannya sendiri. Beberapa
variasi website dapat digolongkan sebagai berikut:
1. Website Jaringan Sosial.
Dikenal juga dengan istilah social networking, website jaringan
sosial fokus pada jaringan komunitas dari para pengguna
website yang saling berbagi pada bidang atau kegiatan ter-
tentu.
Interaksi antar pengguna dapat diciptakan melalui chat, pesan,
e-mail, video, grup diskusi, dan lain-lain.
Contoh website jaringan sosial yang popular di Asia adalah
Friendster, sehingga menanyakan Friendster seseorang
hampir sama lazimnya dengan menanyakan e-mail atau ID
Action Script pada Flash.
messenger-nya.
tor web, umumnya developer membuat sebuah website Con- 2. Website Perusahaan.
tent Management System, yang memungkinkan administrator Dimulai sejak era dotcom, kurang lengkap rasanya jika se-
melakukan pemeliharaan database. buah perusahaan belum memiliki website, atau setidaknya
Sebagaimana bahasa pemrograman, database juga memiliki domain.
banyak alternatif vendor dengan kelebihan dan kekurangannya Bahkan ada yang beranggapan jika sebuah e-mail berisi lo-
masing-masing. wongan pekerjaan dimana contact person-nya menggunakan
Pada umumnya, antara Server Side Coding dan database me- e-mail gratisan (tidak menggunakan domain sendiri), maka
miliki hubungan erat, misalnya ASP.NET lazimnya menggunakan kemungkinan ada udang di balik e-mail.
database Microsoft SQL Server, sedangkan PHP umumnya meng- Sebuah website perusahaan umumnya memiliki menu seperti
gunakan database MySQL. Hal ini tentunya karena tersedianya misi dan visi, sejarah, news, link, customer/client, dan sete-
library dan dukungan yang saling menunjang antara keduanya. rusnya.
3. Portal.
Panduan 9: Lain-lain Seperti namanya, sebuah web portal merupakan gerbang
Setelah melewati panduan-panduan sebelumnya, tentunya kini masuk untuk mendapatkan sekumpulan informasi. Sebuah
Anda telah memiliki sebuah website yang spesifik, di sinilah search engine merupakan salah satu ciri khas standar web
Anda menyesuaikan website Anda sesuai dengan kebutuhan portal.
lebih lanjut. Sebuah web portal dapat dikhususkan mengambil informasi
Misalnya jika website Anda merupakan sebuah website e- sebatas domain tertentu, regional, ataupun seluruh dunia.
commerce yang mengizinkan pembayaran melalui kartu kredit, Umumnya kategori yang lebih rinci yang dapat mengarahkan
maka sisi sekuritas dan fitur payment gateway akan menjadi pengguna untuk mendapatkan informasi yang lebih spesifik.
tugas selanjutnya.
Atau jika website Anda membutuhkan lebih banyak iklan, Masih banyak lagi variasi website lainnya, dari yang sederhana
dapat memanfaatkan program seperti Google AdSense. hingga kompleks. Anda selalu dapat mengawali sebuah website
Software atau tools lainnya juga dapat Anda integrasikan dari hal yang sederhana, tetapi tetap memiliki perencanaan dan
sesuai kebutuhan website Anda, misalnya software CMS, forum, pengerjaan yang matang.
Rich Text Editor, dan lain sebagainya. Dengan memiliki dasar panduan membuat website yang baik,
membuat berbagai jenis website diatas akan relatif lebih mudah
Penutup bagi Anda. Apalagi didukung dengan semangat terus mempelajari
Membuat sebuah website profesional memang memerlukan teknologi dan perkembangannya, yang akan relatif mudah diserap
berbagai disiplin ilmu seperti bahasa pemrograman dan desain jika Anda telah memiliki pemahaman fundamental yang baik.
grafik/web, bahkan juga dapat melibatkan pengetahuan arsitek-
tur informasi, copywriting, security, search engine optimazition
dan project management.
Walaupun terlihat cukup kompleks, tetapi hal tersebutlah LEBIH LANJUT
yang membuat sebuah website yang mengimplementasikan hal
http://en.wikipedia.org/wiki/Macromedia_Dreamweaver
tersebut mampu memiliki nilai tambah dibandingkan sebuah
http://en.wikipedia.org/wiki/Adobe_flash
website yang tidak memiliki dasar konsep yang kuat.