Web Blog Instant Menggunakan Macromedia DreamWeaver MX 2

Ok Bro kita lanjutkan lagi Tutorial kita, setelah kemarin berhasil membuat Database dan Tabel2 pendukungnya
Sekarang kita telah siap menggunakan Dreamweaver untuk membuat Weblog kita.

6. Buka dan jalankan aplikasi Macromedia Dreamweaver.

7. Buat sebuah site baru dengan nama My_Blogger.

Untuk Server Technology kita pilih PHPMySQL, folder kerja disamakan saja dengan testing
servernya yaitu ditempatkan langsung di root server atau di direktori c:/appserv/www dengan
nama folder My_Blogger.

8. Masuk mode Show Design View ( klik View lalu pilih Design ), masukan sebuah table, aturlah
width=800 pixel, columns=1, row=5, kemudian align = center.

• Baris pertama kita fungsikan sebagai header. Masukkan image banner yang sebelumnya
telah kita buat yang tersimpan dalam sub dir images.
• Baris kedua sisipkan sebuah garis horizontal. Caranya klik Insert - Horizontal Rule (garis
horizontal ini tidak harus ada, penulis hanya memfungsikannya sebagai pemisah saja )
• Pada baris ketiga, split menjadi 2 kolom. Atur kolom sebelah kiri width=200, horz=left dan
vert=top, lalu pada kolom kanan atur width = 600, horz=right dan vert=top.
Kolom kiri akan kita fungsikan sebagai navigasi, sedangkan sebelah kanan sebagai halaman
utama.
• Baris keempat sisipkan sebuah garis horizontal lagi
• Baris kelima adalah footer. Biasanya berupa lisensi atau nama pembuatnya. Contoh :
copyright © 2006 nama web designer.

9. Pada baris ketiga dari table di atas, pada kolom sebelah kiri masukan 1 buah table, aturlah
width=200 pixel, columns=1, row=11, kemudian align = left.
• Baris pertama dari table ini kita isikan text My Menu.
• Baris kedua sisipkan 1 buah garis horizontal.
• Baris ketiga, disini akan kita buat sebagai menu halaman. Caranya :
Buat sebuah dynamic table, caranya klik Insert – Aplications Object –Recordset.



Kolom Recordset – Name kita isikan sembarang nama untuk recordset yang akan kita buat.
Mudahnya namakan saja Menu.
Untuk menghubungkan dengan database yang kita buat tadi, bila dalam pilihan Connection
masih kosong ( None ), klik Define.
Bila konfigurasi server yang kita miliki belum dirubah ( default ) maka pada MySQL
Connection kita isikan saja data sebagaimana gambar berikut, lalu klik OK _ Done



Lalu kembali pada task Recordset, dalam pilihan Connection klik dan pilih nama koneksi
yang kita buat tadi ( blogg_conn )
Pada kolom Table, klik dan pilih table database my_menu.
Kolom Recordset – Columns pilih Selected, lalu blok field yang akan kita tampilkan.
Filter, dan Sort dapat kita biarkan apa adanya.
Terakhir klik OK.
Tetap dalam baris table ini, masukan sebuah tabel dinamis ( caranya klik Insert –
Application Objects – Dynamic Table ) sehingga muncul tampilan sebagai berikut :



Dalam Dynamic Table, default record yang ditampilkan adalah 10 record. Anda dapat
mengubahnya sesuai kebutuhan. Pilihan All Records adalah untuk menampilkan semuanya
dalam sekali waktu. Selesai itu lalu tekan OK.
Atur tampilan area kerja kita dalam mode Show Code & Design View.
Bila dalam mode Design kita klik record {Menu.target} , maka dalam mode Code, script
berikut akan ikut tersorot / terblok.

Klik kanan script tersebut, lalu potong ( Cut )
Kembali dalam mode Design, kita sorot record {Menu.link}. Pada Properties, tempelkan
script yang kita potong tadi ( klik kanan Paste ) dalam kolom link.


Hapus colom kedua dan baris pertama dari table yang kita buat tsb, lalu
dalam Properties, atur W ( width )=200.
• Baris keempat sisipkan 1 garis horizontal lagi
• Baris kelima isikan text My Blogg.
• Baris keenam sisipkan garis horizontal
• Baris ketujuh buat Dynamic Table lagi untuk database / table my_blogg. Langkah -
langkahnya sama seperti pada pembuatan dynamic table untuk table database my_menu
pada baris ketiga di atas. Atur recordset yang ada dalam table tersebut sehingga tampak
membujur vertikal. Dalam pilihan jumlah recordset yang akan ditampilkan, default 10 kita
rubah menjadi 1.
• Baris kedelapan sisipkan garis horizontal
• Baris kesembilan ketik My Articles.
• Baris kesepuluh sisipkan garis horizontal
• Baris kesebelas buat lagi Dynamic Table untuk my_articles. Atur juga tampilan recordset
dalam table ini sehingga tampak membujur vertical. Buatlah record {Articles.lokasi}
sebagai link dari record {Articles.judul} dengan cara yang sama seperti pembuatan link
{Menu.link} pada baris ketiga di atas.

10. Pada table utama baris ketiga kolom sebelah kanan, sisipkan sebuah table dengan properti
width=590 pixel, columns=1, row=1, kemudian align = right.
Dalam table ini, sisipkan sebuah obyek template berupa editable region. Caranya klik Insert –
Templates Objects – Editable Region. Namakan editable tersebut dengan Isi.

11. Pada table utama baris keempat sisipkan satu garis horizontal.

12. Baris kelima kita isikan footer dari web blog kita.

13. Kemudian simpan file ini sebagai template jenis php ( File - Save As Template ). Beri nama
My_Blog ( script ada di bagian akhir tulisan ini )



Sampai disini dulu yah gw mo ee dulu, dah kebelet nich………J J

Posted in: Blogger,Tutorial