Sp membuat web blog
0 likes2,865 views
Dokumen ini membahas cara membuat web blog menggunakan teknologi Dreamweaver MX 2004 dan Active Server Pages, serta mencakup acara pertemuan blogger di Yogyakarta. Dalam panduan ini, langkah-langkah yang diperlukan untuk mendesain dan mengelola database menggunakan MS Access serta cara memasukkan data ke dalam blog melalui script disajikan secara rinci. Terdapat juga informasi tentang fitur dan platform blog yang dapat digunakan oleh pengguna awam.
Sp membuat web blog
- 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.