Special Project Photoshop

1. MEMBUAT WEB BLOG
MEMBUA
UAT 1
Edisi Khusus Dreamweaver MX 2004
dan Active Server Pages
Membuat
Web Blog
Kalau ada teknologi website yang sanggup menciptakan kehebohan dan trend,
itu pastilah web blog. Awal bulan Juni 2004 lalu diselenggarakan kopi darat para
blogger yang kali ini mengambil tempat di lereng Gunung Merapi Yogyakarta,
atau lebih tepatnya di Kaliurang. Acara ini diramaikan oleh kira-kira 100 lebih
blogger dari seantero pulau Jawa. Bahkan kabarnya, peserta yang berasal dari
Bandung Jawa Barat berani menumpang Pesawat Hercules hanya untuk mera-
maikan acara para pecandu “online diary” ini.

2. 2
Pendahuluan
Kurang jelas siapa yang pertama kali menemukan teknologi ini. Yang pasti, ditilik dari
teknik pembuatannya, web blog tidaklah berbeda jauh dibanding Guest Book atau Elec-
tronic News biasa.Tentu, di dalam buku ini Anda akan belajar banyak bagaimana mem-
buat Web Blog menggunakan Dreamweaver MX 2004 dan Active Server Pages.
Mencari Definisi kepada khayalak umum dan menjadi kon-
Definisi sumsi banyak orang. Dilihat dari sifatnya,
Web Blog web blog ini sangat mirip dengan buku ha-
rian pribadi. Hanya saja, kalau kita mau
Lantas, apa itu sebenarnya web blog? Defi- main perbandingan, buku harian pribadi
nisi web blog sangat mudah dicari di inter- online ini jelas beda jauh dengan buku ha-
net. Namun, dari segudang referensi yang rian pribadi biasa yang sering dimiliki
ada, semuanya pada mengacu ke satu isti- gadis-gadis SMP atau anak kecil.
lah yang sama, yaitu web blog adalah Dulu, kita sering melihat buku harian
online journal atau online diary (buku ha- pribadi yang dilengkapi gembok logam.
rian online) yang dipublikasikan lewat in- Kalau tidak bergembok, pasti buku terse-
ternet dan boleh dibaca oleh siapa saja. but disimpan di tempat yang paling rahasia
Coba Anda lihat definisi web blog yang di- yang hanya si pemiliknya saja yang tahu.
angkat dari kedua situs berikut ini: Tapi, web blog berbeda 180 derajat. Justru
“buku harian online” ini terbuka bagi
“On a Web site, a blog, a short form for siapapun—tanpa kecuali! Tak ada user-
weblog, is a personal journal that is fre- name password atau hidden link di dalam-
quently updated and intended for general nya, semua bisa membaca.
public consumption.” Lantas, bagaimana caranya membuat
—situs Whatis.Com web blog itu? Bagi orang awam, membuat
web blog merupakan angan-angan jika
“Short for Web log, a blog is a Web page mereka harus bersentuhan dengan bahasa
that serves as a publicly accessible personal pemrograman berbasis internet seperti
journal for an individual. Typically updated PHP atau ASP. Untuk itu, mereka butuh
daily, blogs often reflect the personality of layanan pembuatan web blog instan yang
the author.” gratis. Di internet, ada segudang alamat
—situs WebOpedia.Com website yang disediakan bagi mereka yang
ingin memiliki web blog pribadi namun ti-
Yang jelas, web blog punya beberapa dak tahu bagaimana melakukan scripting.
ciri khas yang unik. Pertama, isi web blog Beberapa di antaranya adalah Blogger.
di-update (diperbarui) setiap saat oleh si Com, Xanga.Com, LiveJournal.Com, dan
pemiliknya. Isi web blog bermacam-ma- masih banyak lagi.
cam, mungkin berisi pengalaman kese- Aturan mainnya, mereka tinggal regis-
harian si pemilik, unek-unek, cerita, atau ter (mendaftar) dan mereka akan menda-
keadaan jiwa si pemilik yang dicurahkan pat web blog pribadi secara gratis.

3. MEMBUAT WEB BLOG
MEMBUA
UAT 3
Mengumpulkan Teknologi
Teknologi Apa Saja
yang Anda Butuhkan?
Untuk membuat web blog sendiri, Anda
butuh beberapa teknologi. Semua teknolo-
gi ini mudah dicari dan ada di sekitar Anda.
Apa saja teknologi itu? Lihat point-point
berikut ini:
l Macromedia Dreamweaver MX 2004:
Software ini berfungsi untuk mendesain
tampilan web blog ini nantinya. Versi
yang kita pakai untuk membuat web
Blogger.Com: Bagi para pengguna awam atau
orang yang tidak terbiasa dengan web scripting, blog adalah versi MX 2004 yang dirilis
Blogger.Com merupakan pilihan yang menarik. kira-kira akhir 2003 lalu.
l MS Access: Aplikasi web blog membu-
Tentu, kurang seru rasanya kalau Anda tuhkan database. Di dalam database ini-
memanfaatkan fasilitas gratisan seperti di lah semua arsip web blog disimpan dan
atas. Bagi Anda yang tahu sedikit-sedikit sewaktu-waktu dapat dimunculkan
tentang web programming, Anda bisa kembali. Anda bebas menggunakan ver-
membuat web blog sendiri. Dalam buku si berapapun untuk software MS Access
Special Project ini, Anda akan belajar ba- ini.
gaimana memadukan software Dream- l MS Windows 9x/2000/2003: Untuk
weaver MX 2004, database MS Access, dan scripting, kita memilih Active Server
teknologi Active Server Pages untuk mem- Pages. Dan, teknologi ASP ini baru bisa
buat web blog yang tak kalah serunya de- bekerja dengan maksimal pada sistem
ngan web blog lain yang digarap oleh ka- operasi MS Windows yang sudah dileng-
langan profesional. kapi server, entah PWS atau IIS. Jadi,
pastikan sistem operasi Anda memiliki
salah satu jenis server di atas.
l Browser: Software ini berfungsi untuk
menguji script secara live dalam kompu-
ter Anda. Anda bisa menggunakan
browser Internet Explorer, Netscape
Navigator, atau Neoplanet sekalipun. Ti-
dak menjadi masalah tentang versi
browser yang dipakai sebab script ini be-
kerja secara server side.
Xanga.Com: Selain Blogger.Com, pilihan lain
yang tak kalah menarik adalah Xanga.Com yang
memiliki lebih banyak layanan.

4. 4
Langkah 1: Selanjutnya, pilih Create Table in De-
sign View jika Anda sudah masuk ke tam-
Membuat
pilan seperti gambar berikut ini:
Database
Pertama-tama, kita harus membuat data-
base terlebih dulu tempat arsip-arsip web
blog diletakkan. Aplikasi yang kita butuh-
kan hanyalah MS Access yang sebagian besar
dari Anda memilikinya.
Langkah pertama adalah meluncurkan
aplikasi MS Access yang ada di komputer
Anda sampai Anda menjumpai tampilan
seperti berikut ini:
First Step:
Tampilan
seperti
gambar di Create Table in Design View: Supaya Anda tidak
samping ini kesulitan saat mendesain tabel database, pilihlah
akan dijumpai option ‘Create Table in Design View’.
segera
setelah Anda Sekarang, Anda tinggal mendesain ta-
meluncurkan
bel database seperti contoh tabel berikut
MS Access.
ini:
Field
Field Data Type
Nomor
Kemudian pilihlah Option Blank Ac- AutoNumber
cess Database. Setelah itu tekan tombol BlogID Text
OK. Sebelum Anda mendesain tabel data- Tanggal Date/Time
base, Anda harus menciptakan file data- Waktu Date/Time
base terlebih dulu. Simpan dengan nama Nama Text
Blog. mdb dan simpanlah di folder Judul Text
C:InetPubwwwrootWebblog. Jika folder Blog Memo
ini belum ada, buatlah terlebih dahulu.
Jika Anda sudah mendesain tabel se-
perti di atas, pilihlah field Nomor dan jadi-
kan ia Primary Key.
Kemudian, tekan tombol File > Save.
Sejenak akan muncul jendela di mana
Anda harus memberi nama pada tabel ter-
sebut. Beri nama ‘Webblog’.
Blog.mdb: Sebelum mendesain tabel database,
Anda harus membuat filenya terlebih dulu. Buat
dengan nama blog.mdb dan simpan di folder
C:InetPubwwwrootWebblog.

5. MEMBUAT WEB BLOG
MEMBUA
UAT 5
<form action=”insertblog.asp”
method=”post”>
Itu artinya, begitu tombol Submit di-
tekan, data-data yang ditulis oleh para pe-
ngunjung akan terkirim ke script
Save As: Berilah nama untuk tabel ini dengan
nama ‘Webblog’.
insertblog.asp yang nanti akan kita buat
belakangan.
Setelah itu, kita buat sekali lagi sema-
Langkah 2: cam headline dengan ukuran lebih kecil.
Membuat Aplikasi Pertama, Fungsinya untuk menegaskan agar pe-
CreateBlog.asp ngunjung memasukkan data-datanya pada
form yang telah tersedia. Caranya yaitu de-
Karena baru pertama kali dibuat, database ngan menulis potongan berikut:
web blog yang tadi telah kita ciptakan ma-
sih dalam kondisi kosong. Untuk itu, kita <h4>Tulislah curahan hatimu pada Form
harus mengisinya dengan record-record berikut ini:
agar website ber-blog ini memiliki content </h4>
seperti yang kita harapkan. Bagaimana
mengisi record ke dalam database itu? Kita Kalau sudah begini, kita tinggal mema-
bisa melakukannya lewat script Active sukkan semua komponen yang diperlukan
Server Pages. ke dalam halaman web. Inilah script leng-
Pertama kali, kita akan buat script kapnya untuk memasukkan komponen-
yang nanti kita beri nama CreateBlog.asp. komponen itu.
Aplikasi ini akan menghasilkan form tem-
pat para pengunjung (blogger) mencurah- Tanggal:
kan isi hatinya. <input type=”text” name=”tanggal”
Mari kita ciptakan script CreateBlog. value=”<%=Date%>”>
asp lewat bahasan-bahasan berikut ini. <br>
Langkah pertama adalah membuat head- Pukul:
line untuk memberi tahu pengunjung bah- <input type=”text” name=”pukul”
wa form ini berfungsi untuk membuat blog value=”<%=Time%>”>
baru. Tekniknya cukup sederhana, yaitu de- <br>
ngan menggunakan potongan berikut ini: Namamu:
<input type=”text” name=”nama”>
<html> <br>
<body> Judul:
<h3>Creating New Web Blog <input type=”text” size=25
</h3> name=”judul”>
<br>
Tentu Anda bisa mengubah headline di Isi Hatimu (Blog):
atas sesuka hati Anda. Kemudian, kita cip- <textarea name=”blog”>
takan form. Mengapa? Karena tanpa
</textarea>
form, pengunjung tidak bisa mengisi
<br>
nama, isi hati, serta data-data lainnya.
<input type=”submit”>
Langkah pertama untuk membuat form
adalah dengan pernyataan berikut:

6. 6
Lihatlah masing-masing komponen base ‘blog.mdb’ secara tepat. Sebab jika
form di atas. Tampak hanya text-box meleset, script pasti akan error. Potongan
‘Tanggal’ dan ‘Pukul’ yang sudah terisi oleh baris berikut ini berfungsi untuk menen-
data di dalamnya. Data yang masuk adalah tukan lokasi file ‘blog.mdb’ secara tepat,
data tanggal sekarang ‘<%=Date%>’ dan yaitu menggunakan Server.Mappath:
data waktu sekarang ‘<%=Time%>’. Selain
itu, masing-masing text-box dan text area <% letakfile =
belumlah terisi oleh data apa pun. Ingat server.mappath(“blog.mdb”) %>
bahwa Anda harus memberi nama pada
masing-masing text-box secara spesifik. Setelah itu, kita ciptakan koneksi lewat
metode DSN-less Connection seperti ini:
Langkah 3:
Membuat Aplikasi Kedua, <% Set oConn =
InsertBlog.asp Server.CreateObject(“ADODB.Connection”)
%>
Kalau seorang blogger sudah memasukkan <% oConn.Open “DRIVER={Microsoft
data-datanya pada form di atas, ke- Access Driver (*.mdb)}; DBQ=” & letakfile
manakah data-data itu akan pergi? Tentu, %>
data-data itu akan masuk dan tersimpan
rapat ke dalam database. Hanya saja, siapa Kini, koneksi menuju database telah
yang bertugas untuk menyimpan data- terjalin. Sekarang, kita butuh akses menuju
data itu ke dalam database? Kali ini kita record yang ada di dalam database itu entah
akan membuat script yang bertanggung ja- untuk keperluan menambah record baru,
wab untuk mengemban tugas itu. Kita menghapus, atau memodifikasinya. Kali ini,
memberinya nama Insertblog.asp. kita butuh akses seperti itu untuk menambah
Pertama kali, kita mengikutsertakan record baru. Caranya yaitu dengan menggu-
file adovbs.inc lewat satu baris pernyataan nakan recordset object seperti ini:
di bawah ini:
<% Set objRs =
<!—#include file=”adovbs.inc”—> Server.CreateObject(“ADODB.Recordset”)
%>
File ini sendiri berisi konstanta-kon- <% objRs.Open “webblog”, oConn,
stanta yang dibutuhkan script untuk me- adOpenKeySet, adLockOptimistic %>
nangani manipulasi database. Langkah be-
rikutnya adalah membuat variabel-variabel Pada pernyataan kedua, kita akan
yang diperlukan dalam script meskipun membuka tabel database bernama
langkah ini sebenarnya tidak mutlak harus ‘Webblog’ yang dulu kita buat. Selanjut-
dilakukan. ASP mengizinkan Anda mem- nya, kita pilih recordset parameter untuk
buat script tanpa mendeklarasikan variabel Cursor Type berjenis ‘adOpenKeySet’ dan
terlebih dulu. Lock Type berjenis ‘adLockOptimistic’. Pa-
sangan cursor type dan lock type ini sangat
<% Dim oConn, objRs, letakfile %> ideal untuk penambahan record baru.
Sebelum kita memasukkan record
Kita akan segera melakukan koneksi baru ke dalam database, kita akan berma-
menuju database lewat metode DSN-less in-main dengan bilangan acak. Tentu
Connection. Yang paling penting kita la- Anda ingat bahwa dalam tabel database
kukan adalah menentukan letak file data- ‘Webblog’ terdapat field ‘BlogID’. Field ini

7. MEMBUAT WEB BLOG
MEMBUA
UAT 7
bertugas untuk merekam nomor ID setiap yang telah dimasukkan oleh pengunjung
web blog yang masuk. Dan, seperti layak- ke dalam masing-masing komponen form
nya nomor ID yang lain, nomor ID web (text-box, text area dan lain-lain).
blog ini unik satu dengan lainnya. Lantas, Setelah itu, kita pakai metode Update
bagaimana cara membuatnya? Di sini, saya seperti ini agar record-record tadi benar-
akan menciptakan angka acak yang diha- benar tersimpan di dalam database.
silkan lewat pernyataan berikut ini:
<% objRs.Update %>
<% randomize %>
<% acak = round(rnd * 1234567890) %> Lantas, apakah record-record itu berha-
<% acak = “Blog” & acak %> sil masuk ke dalam database? Untuk mem-
buktikannya, kita akan memunculkan isi
Pertama kali, angka acak akan tersim- database ke dalam jendela browser.
pan di dalam variabel ‘acak’. Semakin ba- Pertama kali, kita munculkan isi dari
nyak rentetan angka yang kita tuliskan di field ‘Judul’ ke layar browser lewat pernyata-
atas, semakin besar pula kombinasi nomor an berikut ini:
ID yang akan dihasilkan. Setelah angka
acak berhasil diciptakan, di depan angka <b>”<%=objRs(“judul”)%>”</b>
itu akan disisipi kata ‘Blog’ seperti tampak
pada baris ketiga di atas. Dengan begitu, sa- Jika sudah, kita munculkan pula field-
lah satu record yang ada di field ‘BlogID’ field yang lain seperti ‘Tanggal’, ‘Waktu’,
mungkin seperti ini: “Blog4231953106”. ‘Nama’ dan sebagainya:
Baru setelah itu, kita ciptakan record baru
ke dalam database menggunakan metode Tanggal: <%=objRs(“tanggal”)%>
AddNew dari Recordset seperti ini: Pukul: <%=objRs(“waktu”)%>
Dibuat oleh: <%=objRs(“nama”)%>
<% objRs.AddNew %>
Terakhir, kita munculkan isi blog ke jen-
Lantas, record-record itu akan masuk dela browser lewat cara yang sama seperti ini:
dalam rupa apa? Lihat potongan-potongan
<%=objRs(“blog”)%>
baris berikut ini:
Setelah selesai memakai database, kita
<% objRs(“BlogID”) = acak %> tutup akses menuju record-record itu lewat
<% objRs(“tanggal”) = pernyataan ini:
request.form(“tanggal”) %>
<% objRs(“waktu”) = <% objRs.Close %>
request.form(“pukul”) %>
<% objRs(“judul”) = request.form(“judul”) Langkah 4:
%> Uji Coba Script CreateBlog.asp
<% objRs(“nama”) = dan InsertBlog.asp
request.form(“nama”) %>
<% objRs(“blog”) = request.form(“blog”) %> Sekarang, mari kita uji kedua script di atas
langsung menggunakan browser. Langkah
Itu artinya, field ‘BlogID’ akan terisi pertama yaitu luncurkan browser (IE,
oleh nilai yang ada di dalam variabel ‘acak’. Netscape, NeoPlanet). Kemudian, ketik
Sedang field ‘tanggal’, ‘waktu’, ‘judul’, URL berikut ini: http://localhost/webblog/
‘nama’, dan ‘blog’ akan terisi oleh data-data createblog.asp.

8. 8
Anda akan melihat tampilan web ber-
Beberapa Catatan Kecil
form tempat Anda membuat blog baru.
Isikan data-data Anda ke dalam form yang 1. Buatlah minimal lima blog sekaligus
telah tersedia seperti gambar di bawah ini. dengan mengulangi proses pembu-
atan blog lewat browser seperti tadi
telah kita lakukan. Jika Anda mem-
buat kurang dari lima blog maka
script ‘blog.asp’ yang akan kita buat
setelah ini akan menghasilkan error.
2. Kedua script yang tadi telah kita
buat, yaitu createblog.asp dan
insertblog.asp, dapat Anda temukan
di dalam CD dalam versi lengkap.
Membuat Web Blog Baru: Form di samping ini
berfungsi untuk membuat web blog baru yang
dapat dimanfaatkan oleh siapa saja.
Setelah itu, tekan tombol Submit.
Server akan memproses script insert- Langkah 5:
blog.asp dan akan merekam semua data Membuat Script
yang Anda tuliskan dalam komponen Blog.asp
form ke dalam database. Dan kini, data-
data yang telah tersimpan itu muncul Apa yang tadi telah kita buat? Tadi, kita
kembali ke hadapan Anda lewat jendela membuat dua buah script, yaitu create-
browser seperti gambar di bawah ini: blog.asp dan insertblog.asp yang berfungsi
untuk merekam atau menyimpan blog
baru yang ditulis seorang blogger ke dalam
database. Tentu, perjalanan kita tidak ha-
nya berhenti sampai di sini saja. Kita harus
memuaskan rasa ingin tahu blogger-
blogger yang lain tentang isi pikiran rekan-
rekan mereka. Caranya? Kita munculkan
record para blogger itu ke halaman web.
Dengan kata lain, kita ingin membuat
halaman utama web blog ini. Di sini, blog-
blog terbaru akan dimunculkan dalam ha-
laman utama agar semua orang, entah par-
tisan atau pembaca setia, dapat menikmati
blog-blog itu. Untuk mewujudkan hal ini,
kita butuh sebuah script yang akan kita
Menengok Blog Baru: Blog yang telah berhasil
dibuat akan dimunculkan ulang ke jendela
beri nama Blog.asp.
browser agar Anda sebagai si pengarangnya bisa Marilah kita telusuri langkah demi
melihat kembali apa yang baru saja Anda tulis. langkah pembuatan script Blog.asp ini.

9. MEMBUAT WEB BLOG
MEMBUA
UAT 9
Pertama kali, kita tentukan dulu judul ‘Webblog’. Nanti, record-record yang ada
dari website ini. Judul ini akan muncul di di semua field itu akan ditampilkan ke jen-
jendela browser. Teks yang diapit tag dela browser. Bagaimana dengan urutan-
<Title>…</Title> dari HTML akan men- nya? Record-record itu akan diurutkan
jadi judul website ini. Ubahlah sesuai selera berdasarkan field ‘Tanggal’. Lantas? Meto-
Anda jika perlu. de pengurutan yang kita ambil adalah
DESC yang artinya record terbaru yang
<html> memiliki tanggal atau waktu paling baru
<head> akan muncul di atas disusul record-record
<title> yang memiliki tanggal atau waktu lebih
::Welcome to My Web Blog! :: lama. Dengan begitu, blog-blog yang mun-
</title> cul di halaman ini akan selalu baru.
</head> Sekarang, kita akan atur berapa blog
yang akan muncul di halaman utama.
Langkah kedua adalah menciptakan Ingat bahwa dengan semakin banyak blog
koneksi menuju database. Cara ini pernah yang masuk ke halaman utama, akses web
kita pakai saat membuat insertblog.asp. menuju situs ini akan lebih melambat. Ca-
Tekniknya sama persis, yaitu dengan ranya yaitu dengan mengatur PageSize se-
menggunakan DSN-Less Connection: perti contoh di bawah ini:
<% Dim oConn, objRs, letakfile %> <% objRs.PageSize = 5 %>
<% letakfile =
server.mappath(“blog.mdb”) %> Kalau kita isi dengan angka 5 maka
<% Set oConn= blog yang akan muncul di halaman utama
Server.CreateObject(“ADODB.Connection”) ini berjumlah lima buah. Kalau kita ubah
%> menjadi angka 2 maka hanya ada dua blog
<% oConn.Open “DRIVER={Microsoft saja seperti gambar di samping.
Access Driver (*.mdb)}; DBQ=” & letakfile Ingat bahwa Anda paling tidak harus
%> memiliki jumlah blog lebih besar dari ang-
ka yang Anda set di PageSize. Itu artinya,
Kalau koneksi sudah terjalin, kita buka kalau Anda set PageSize sama dengan 5
akses menuju record-record yang ada di da- maka minimal Anda harus punya lima
lam database menggunakan Recordset Ob- record blog terlebih dulu di dalam data-
ject seperti ini. base. Jika tidak maka script di atas akan er-
ror.
<% Set objRs = Setelah pengaturan di atas selesai, kita
Server.CreateObject(“ADODB.Recordset”) akan tulis judul untuk halaman web di
%> atas. Judul ini diatur oleh baris-baris script
<% objRs.Open “SELECT * FROM Webblog di bawah ini:
ORDER BY Tanggal DESC”, oConn %>
<font face=”arial” size=6 color=”red”>
Lihat perintah SQL di atas yang berbu- <p align=”center”>
nyi “SELECT * FROM Webblog ORDER <b>MY WEB BLOG</b>
BY Tanggal, Waktu DESC”. Itu artinya, </p>
kita akan mengambil semua field dari tabel </font>

10. 10
Sekarang, kita akan munculkan blog-
blog yang ada di dalam database ke jendela
browser. Berapa blog yang akan kita
munculkan? Dan bagaimana cara kita
memunculkannya? Ada beragam teknik
memunculkan record-record yang ada di
dalam database ke jendela browser, salah
satunya adalah dengan menggunakan
pengulangan For… Next berikut ini:
<% for i = 1 to objRs.PageSize %>
Pengulangan di atas memiliki makna
lebih luas, yaitu ia akan memanggil record
sejumlah angka yang tersimpan di dalam
variabel ‘i’. Dalam contoh di atas karena
PageSize bernilai 5 maka pengulangan ter-
sebut hanya berjalan lima kali. Dengan
Mengatur PageSize: Jika Anda mengatur kata lain, record blog yang akan muncul
PageSize sama dengan 2 maka hanya ada dua berjumlah lima buah. Selanjutnya, kita
blog dalam halaman utama seperti gambar di akan munculkan judul blog terlebih dulu
atas. Berapa jumlah blog yang akan muncul
bergantung pada angka yang Anda masukkan di
sebelum data-data lain muncul di jendela
sini. browser seperti tanggal, waktu, nama si
pembuat, dan isi blog itu sendiri.
Jika Anda ingin menggantinya dari Cara untuk memunculkan judul blog
‘MY WEB BLOG’ menjadi teks Anda sen- adalah dengan menggunakan potongan
diri, ubahlah bagian itu sesuai keinginan script berikut ini:
Anda.
Kini, kita akan membuat tabel 1 ko- <font face=”arial” size=4 color=”blue”>
lom dan 1 baris. Tujuannya, agar teks blog <b><%=objRs(“judul”)%></b>
yang muncul nanti tidak terlalu meman- </font>
jang ke kanan dan ke kiri. Artinya, kita
membatasi rentang teks blog agar tampak Karena berupa judul maka huruf-huruf
lebih rapi dan artistik. Untuk membuat ta- yang memoles judul itu haruslah berukur-
bel, kita butuh tag HTML berikut ini: an khas atau lebih besar dari yang lain. Da-
lam contoh di atas, besarnya huruf yang
<table border=”0" width=”60%”> saya pilih adalah 4 point dengan warna
<tr> blue.
<td> Langkah berikutnya, kita bubuhkan
data-data terkait dengan blog itu seperti
Anda bisa atur sendiri berapa besar ta- tanggal pembuatan, pukul pembuatan,
bel yang akan memagari teks blog dengan dan siapa yang membuatnya. Data-data ini
cara mengubah angka yang ada di atribut berfungsi sebagai pelengkap dan terkadang
Width di atas. Anda bisa mengisinya baik teramat penting bagi orang lain karena
dalam satuan persen maupun pixel. mereka bisa tahu siapa orang di balik

11. MEMBUAT WEB BLOG
MEMBUA
UAT 11
Memunculkan Judul: Langkah pertama, kita
Data-data Lainnya: Meskipun kecil, namun data-
munculkan judul Blog terlebih dulu ke jendela
data pendukung seperti tanggal dan waktu
browser seperti pada contoh di atas.
pembuatan serta siapa yang mencurahkan isi
hatinya itu memiliki peranan yang penting.
curahan hati tersebut. Tapi, supaya tampil-
annya tidak timpang, huruf yang memoles
teks ini dibuat lebih kecil dari yang lain. Setelah itu, kita tulis dua baris script di
Cara untuk menampilkan data-data bawah ini. Tujuannya, agar ketika script se-
tersebut adalah sebagai berikut: lesai dengan record pertama, ia akan
membaca record kedua, ketiga, dan sete-
<font face=”arial” size=1 color=”black”> rusnya sampai pengulangan For…Next ini
Dibuat oleh: <%=objRs(“nama”)%> berhenti.
Tanggal: <%=objRs(“tanggal”)%>
Pukul: <%=objRs(“waktu”)%> <% objRs.MoveNext %>
</font> <% Next %>
Terakhir, baru kita munculkan isi blog Seperti skema di atas, hanya ada kira-
ke dalam halaman web. Sampai langkah kira lima blog yang akan muncul di hala-
ini, semua isi blog beserta data lainnya su- man utama ini. Lantas, bagaimana nasib
dah muncul seluruhnya. blog terakhir jika muncul blog ke enam?
Otomatis, blog yang paling lama akan
<br> tergeser dengan yang baru. Namun jangan
<br> khawatir sebab nasib blog yang terakhir ini
belumlah tamat. Seperti layaknya web blog
<font face="arial" size=2 color="black"> lainnya, blog-blog yang lama akan masuk
<%=objRs("blog")%> ke dalam arsip. Dan, arsip-arsip blog ini
</font> akan diatur oleh script khusus. Para

12. 12
blogger bisa masuk ke halaman khusus ar- Langkah 6:
sip ini jika ia mengklik link ‘Arsip Blog’.
Membuat Script
Lantas, ke mana blogger-blogger itu akan
BlogArchieves.asp
pergi?
Lihat link berikut ini:
Seperti telah disinggung di atas, koleksi
<a href=”blogarchieves.asp”> blog yang telah ‘usang’ janganlah kita bu-
<b>Arsip Blog</b> ang begitu saja. Terkadang, banyak blogger
</a> suka membaca blog-blog yang justru sudah
lama di-posting. Lantas, di mana kita me-
Jika link ini diklik, pengunjung akan letakkan koleksi blog yang lama itu? Da-
masuk ke script blogarchieves.asp seperti lam halaman web utama, Anda melihat
tampak pada belahan script di atas. link bertuliskan ‘Arsip Blog’. Jika link itu
diklik, pengunjung akan dibawa ke script
BlogArchieves.asp. Nah, script ini bertugas
untuk mengoleksi serta mendata semua
arsip blog yang ada di dalam database un-
tuk selanjutnya dimunculkan ke jendela
browser.
Berbeda dengan halaman utama, hala-
man yang nanti akan dihasilkan oleh script
BlogArchieves.asp ini terkesan lebih ring-
kas. Hal ini terjadi karena kita tidak me-
munculkan semua isi blog. Yang kita
munculkan hanyalah judul serta data-data
pendukung seperti tanggal dan waktu
pembuatan serta nama orang yang
mengarangnya.
Lantas, bagaimana caranya para blog-
ger membaca blog-blog itu? Caranya, di se-
Tahap Akhir: Kini, halaman web blog ini tampil
tiap judul blog itu kita sisipi link yang akan
seutuhnya.Anda boleh memodifikasi script
Blog.asp untuk menghasilkan output yang mengarah ke script lain, dalam hal ini ber-
beragam dan beraneka rupa. nama blogdetail.asp yang akan kita buat
belakangan. Script ini bertugas untuk
mendeteksi BlogID yang dikirim oleh
blogArchieves.asp untuk selanjutnya isi
blog itu dimunculkan ke jendela browser.

13. MEMBUAT WEB BLOG
MEMBUA
UAT 13
Bagaimana membuat BlogArchieves. </p>
asp itu? Pada prinsipnya, 40% isi script </font>
BlogArchieves.asp menyerupai script
Blog.asp. Pada tahap pertama, Anda buat Setelah kita membuat tabel agar pena-
terlebih dulu judul halaman web ini meng- taan lay out halaman ini lebih rapi, kita
gunakan baris-baris HTML berikut: akan memulai proses mengambil record-
record yang ada di dalam database ke jen-
<html> dela browser. Teknik yang akan kita pakai
<head> ini berbeda dengan teknik yang kita pilih
<title> untuk script Blog.asp. Setelah kita membu-
::Welcome to My Web Blog! :: at tabel agar penataan lay out halaman ini
</title> lebih rapi, kita akan memulai proses meng-
</head> ambil record-record yang ada di dalam da-
tabase ke jendela browser. Teknik yang
Setelah itu, kita ciptakan koneksi me- akan kita pakai ini berbeda dengan teknik
nuju database menggunakan DSN-Less yang kita pilih untuk script Blog.asp.
Connection. Kalau sudah terjalin koneksi Di sini, kita menggunakan pengulang-
itu, kita buka akses menuju record-record an Do…Loop untuk membaca semua
yang ada di dalam database menggunakan record yang ada di dalam database untuk
Recordset Object. kemudian dimunculkan ke jendela browser.
Pengulangan itu kita tuliskan seperti ini:
<% Set oConn =
Server.CreateObject(“ADODB.Connection”) %> <% Do While NOT objRs.EOF %>
<% oConn.Open “DRIVER={Microsoft Access Driver
(*.mdb)}; DBQ=” & letakfile %> Itu artinya, pengulangan akan terus di-
<% Set objRs = lakukan sampai record terakhir dan kursor
Server.CreateObject(“ADODB.Recordset”) %> menyentuh akhir file (End Of File). Atau
<% objRs.Open “SELECT * FROM Webblog ORDER dengan kata lain, lewat pengulangan di
BY Tanggal DESC”, oConn %> atas, kita ingin menampilkan semua
record yang ada di dalam database ke jen-
Di sini, kita masih menggunakan pe- dela browser.
rintah SQL yang sama dengan perintah Setelah itu, kita munculkan judul blog
SQL yang kita pakai pada script Blog.asp. ke jendela browser. Tekniknya cukup se-
Selanjutnya, kita set judul halaman derhana. Hanya saja, seperti tadi telah kita
web yang nanti akan muncul di jendela singgung, di dalam judul blog ini tertanam
browser sama seperti script Blog.asp di atas. sebuah link. Link ini jika diklik akan mem-
Caranya seperti ini: bawa si blogger itu ke script lain, yaitu
BlogDetail.asp. Caranya seperti berikut ini:
<font face=”arial” size=6 color=”red”>
<p align=”center”> <a href=
<b>MY WEB BLOG ARCHIEVES</b> ”blogdetail.asp?blogID=

14. 14
<%=objRs(“BlogID”)%>”>
<%=objRs(“judul”)%>
</a>
Apakah cukup berhenti di sini? Tidak.
Lihat teknik penulisan URL di atas pada
atribut href. Jika link di atas diklik maka
akan terjadi dua akibat yang akan muncul.
Pertama, pengunjung akan dibawa ke
script blogdetail.asp. Kedua, script blogar-
chieves.asp ini akan mengirim sebuah nilai
yang tersimpan di dalam variabel ‘BlogID’
seperti tampak pada penulisan alamat link
di atas ke script blogdetail.asp. Apa isi nilai
yang tersimpan di dalam variabel ‘BlogID’
ini? Isinya adalah record yang ada di field Arsip Blog: Lewat script khusus, kita munculkan
arsip-arsip blog yang dulu pernah ditulis oleh
‘BlogID’ dalam database. Lantas, apa fung- blogger dalam periode sekarang sampai waktu
si nilai itu? Kita akan membahasnya saat paling lama.
membuat script blogdetail.asp.
Setelah kita memunculkan judul blog,
kita tayangkan data-data pendukung se- Langkah 7:
perti tanggal, waktu dan sebagainya. Tek- Membuat Script
niknya sama dengan teknik yang telah kita BlogDetail.asp
pelajari waktu lalu:
Tiba waktunya untuk membuat script tera-
Dibuat oleh: <%=objRs(“nama”)%> khir, yaitu BlogDetail.asp. Script ini akan
Tanggal: <%=objRs(“tanggal”)%> muncul saat seorang blogger masuk ke ha-
Pukul: <%=objRs(“waktu”)%> laman arsip dan mengklik salah satu judul
yang ada di sana. Begitu mereka melaku-
Kini, kita memasuki langkah-langkah kan hal tersebut, ia akan membaca isi blog
terakhir. Pertama, setelah selesai dengan secara lengkap. Bagaimana hal ini bisa ter-
satu record, kita gerakkan kursor ke record jadi? Kita akan telusuri satu demi satu ba-
selanjutnya menggunakan MoveNext se- ris-baris script yang ada di dalam tubuh
perti ini. BlogDetail.asp ini.
Pada prinsipnya, baris-baris pertama
<% objRs.MoveNext %> yang ada di dalam BlogDetail.asp ini sama
dengan yang lain. Coba tengok potongan
Kedua, kita perintahkan server agar berikut ini:
melakukan pengulangan kembali sampai
kursor menyentuh End Of File (EOF: <html>
akhir dari file). <head>

15. MEMBUAT WEB BLOG
MEMBUA
UAT 15
<title> Perintah SQL hanya akan mengambil
::Welcome to My Web Blog! :: record yang memiliki nilai pada field
</title> ‘BlogID’ sama dengan nilai yang dikirim
</head> oleh script blogarchieves.asp lewat URL. Li-
<body> hat link yang ada di dalam script
<% Dim oConn, objRs, letakfile %> blogarchieves.asp berikut ini:
<% letakfile =
server.mappath(“blog.mdb”) %> <a href=
<% Set oConn= ”blogdetail.asp?blogID=
Server.CreateObject(“ADODB.Connection”) <%=objRs(“BlogID”)%>”>
%>
<% oConn.Open “DRIVER={Microsoft Ingat, begitu link diklik, variabel
Access Driver (*.mdb)}; DBQ=” & letakfile ‘blogID’ di atas akan menyimpan nilai se-
%> perti yang ada di record ‘BlogID’. Dan, de-
ngan menggunakan QueryString, kita am-
Perbedaan baru muncul tatkala kita bil nilai itu untuk menyeleksi record.
bekerja dengan perintah SQL. Lihat 2 baris Setelah record terseleksi, semuanya
script berikut ini: menjadi lebih mudah. Kita tinggal melaku-
kan persiapan-persiapan awal untuk me-
<% Set objRs = moles tampilan halaman web ini. Pertama
Server.CreateObject(“ADODB.Recordset”) kali, kita atur ulang judul halaman web ini
%> lewat tag-tag HTML berikut:
<% objRs.Open “SELECT * FROM Webblog
WHERE BlogID= <font face=”arial” size=6
’” & Request.QueryString(“BlogID”) & “‘“,
oConn %> color=”red”>
<p align=”center”>
Di situ tampak satu baris perintah SQL <b>MY WEB BLOG DETAIL</b>
yang fungsinya untuk mengambil record </p>
dari database. Lantas pertanyaannya, </font>
record mana yang akan diambil? Tentu,
halaman web ini hanya akan memuncul- Selanjutnya, kita munculkan judul
kan blog yang masih memiliki ikatan de- blog terlebih dulu ke jendela browser lewat
ngan judul yang telah dipilih oleh seorang potongan baris di bawah ini:
blogger. Bagaimana mendeteksinya? Kita
bisa menggunakan pernyataan WHERE <font face=”arial” size=4 color=”blue”>
untuk menyeleksi record. Lihat potongan <b><%=objRs(“judul”)%></b>
perintah SQL di bawah ini: </font>
WHERE BlogID=’” & Kemudian, baru disusul record-record
Request.QueryString(“BlogID”)&”’” lainnya termasuk record yang bertindak

16. 16
sebagai blog itu sendiri. Semuanya kita
Catatan Kecil
munculkan di jendela browser lewat bebe-
Ketiga script, yaitu blog.asp, blogar-
rapa pernyataan di bawah ini:
chieves.asp, dan blogdetail.asp ada da-
lam CD pendamping buku.
<font face=”arial” size=1 color=”black”>
Dibuat oleh: <%=objRs(“nama”)%>
Tanggal: <%=objRs(“tanggal”)%> Mempercantik Blog
Pukul: <%=objRs(“waktu”)%> Memoles Blog dengan
</font> Dreamweaver MX 2004
<br><br>
<font face=”arial” size=3 color=”black”>
Kini, kita sudah punya script web blog siap
<%=objRs(“blog”)%>
pakai yang dapat Anda modifikasi sesuai
</font>
selera sendiri. Kalau boleh jujur, tampilan
wajah web blog yang baru saja kita buat ma-
Sekarang kalau perlu, kita cantumkan sih sangat “mentah” dalam hal desain. Un-
link untuk kembali ke halaman arsip atau tuk itu, kita akan mempercantiknya de-
halaman awal lewat pernyataan ini: ngan cara yang paling efektif dan efisien,
yaitu menggunakan Macromedia Dream-
<a href=”blogarchieves.asp”>Kembali ke
weaver MX 2004—satu-satunya software
Arsip</a>
desain web paling lengkap dan canggih.
<br>
Kali ini, kita tidak bicara tentang
<a href=”blog.asp”>Kembali ke Halaman
scripting ASP menggunakan Dreamweaver
Utama</a>
MX 2004 meskipun hal itu bisa saja dilaku-
kan. Sebaliknya, kita bicara tentang
Dreamweaver MX 2004 dalam kaitannya
dengan desain web blog ini. Saya berharap
Anda sudah punya software ciptaan
Macromedia ini sehingga proses latihan
kali ini bisa berjalan tanpa masalah.
Langkah pertama, luncurkanlah Ma-
cromedia Dreamweaver MX 2004 yang ada
dalam sistem komputer Anda sampai
Anda melihat tampilan gambar seperti
pada gambar halaman 17 (kiri atas).
Blog Detail: Begitu judul salah satu arsip blog
diklik, seorang blogger bisa melihat isi blog
secara lengkap lewat script yang sengaja kita
rancang untuk itu, yaitu blogdetail.asp.

17. MEMBUAT WEB BLOG
MEMBUA
UAT 17
Di jendela itu muncul icon kuning
bertuliskan ‘ASP’. Janganlah Anda sentuh
atau malah dihapus sebab icon-icon itu
mewakili kode-kode ASP yang tak dapat
diterjemahkan secara visual oleh
Dreamweaver MX. Kali ini, kita akan bela-
jar untuk mengganti warna latar belakang
web blog di atas dari putih menjadi warna
lain.
Caranya, klik menu Modify dan pilih-
lah Page Properties sampai Anda masuk ke
jendela seperti gambar di bawah ini.
Page Properties:
Untuk mengatur
Tampilan Utama Dreamweaver MX 2004: warna latar belakang
Begitu Anda me-launch software yang masih halaman web, pilihlah
saudara kandung Flash MX 2004 ini, Anda akan Page Properties (kiri).
menjumpai tampilan seperti gambar di atas. Sedangkan gambar di
bawah adalah gambar
jendela Page
Klik pilihan Open dan bukalah script Properties untuk
Blog.asp sehingga script tersebut muncul pengaturan banyak
hal yang berkaitan
dalam jendela Dreamweaver MX 2004 se-
dengan halaman web.
perti gambar di bawah ini.
Pastikan dalam bagian Category Anda
memilih Appearance. Selanjutnya, klik ko-
tak kecil yang ada di samping kanan Back-
ground. Pilihlah salah satu warna favorit
ASP dalam Jendela Dreamweaver MX 2004:
Tampak pada gambar di samping, script
Anda segera setelah Anda melihat jendela
Blog.asp kita munculkan dalam jendela warna. Jika sudah, tekan OK. Sekarang, ha-
Dreamweaver MX 2004 seperti gambar di laman web blog.asp sudah memiliki warna
samping. latar belakang seperti gambar di bawah ini:

18. 18
Kemudian, tekan menu Insert dan pi-
lih Image. Selanjutnya, carilah file gambar
yang ingin Anda abadikan sebagai judul
web blog ini. Dalam contoh kali ini, Anda
bisa memanfaatkan file title.gif yang ada di
dalam CD.
Blog.asp dengan Wajah Baru: Anda bisa
mendesain sendiri warna latar belakang favorit
Anda.
Sekarang, kita akan mengganti judul
web blog tersebut yang semula teks ‘MY
WEB BLOG’ menjadi grafis. Sebelumnya
Anda harus mendesain terlebih dulu gam-
Insert Image: Untuk memasukkan gambar ke
bar yang akan menjadi judul web blog itu.
dalam halaman web, salah satu cara yang
Sebagai pedoman buat Anda, di dalam CD sering dipakai yaitu dengan menggunakan
tersedia file title.gif yang dapat Anda jadi- menu Insert > Image seperti diperlihatkan pada
gambar di atas ini.
kan contoh latihan. Bukalah file tersebut
dan Anda akan melihat contoh gambar se-
perti tampilan berikut ini:
Judul Berbentuk Grafis: Untuk mempercantik
tampilan halaman web, terkadang kita harus
melibatkan file grafis meskipun di dalamnya ia
berbentuk teks seperti gambar di atas.
Yang pertama kali harus kita lakukan
adalah menghapus teks ‘MY WEB BLOG’
terlebih dulu agar nanti bisa diganti de- Wajah Baru Blog.asp: Setelah diberi judul dalam
ngan file gambar di atas. Hapuslah dengan wujud gambar, halaman web blog.asp di atas
cara memblok atau menghilangkan satu tampak lebih bagus meskipun kita baru bisa
menikmati secara utuh lewat jendela browser.
demi satu huruf yang ada di situ.