Special Project Membuat Web Blog PDF
Special Project Membuat Web Blog PDF
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
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.
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.
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:\InetPub\wwwroot\Webblog. 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’.
<form action=”insertblog.asp”
method=”post”>
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
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:
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
<%=objRs(“BlogID”)%>”>
<%=objRs(“judul”)%>
</a>
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.