Web Blog Instant Menggunakan Macromedia Dreamweaver Mx 3

Nah sekarang saatnya kita membuat scrift pendukung untuk webblog kita supaya lebih dinamis
Tentunya kita menggunakan scrift PHP, buat temen – temen yang belum bisa atau yang sama sekali
Ga bisa ga perlu berkecil hati terus aja ikuti oce……:)

14. Langkah selanjutnya adalah membuat file untuk halaman utama dengan mengaplikasikan template
yang telah kita buat tadi. Caranya File – New kemudian dalam pilihan yang muncul sorot tab
Template lalu pilih file template kita tadi dan Create



15. Dalam Editable Region ( Isi ) kita masukan obyek untuk ditampilkan. Setelah itu simpan file ini
dalam sub direktori Blogger dengan nama My_Blogg.php

16. Buat file php baru. Simpan dalam direktori induk ( My_Blogger ) dengan nama index.php
File ini adalah file yang akan pertama tampil ketika web blogg kita diakses orang. Kita jadikan file
ini sebagai gerbang ke web blogg kita. Juga sekaligus sebagai buku tamu.

17. Masukan table, aturlah width=200 pixel, columns=1, row=9, kemudian align = center. Dalam
Properties Cell, atur Horz=Center dan Vert=Top.
• Baris pertama dapat anda isikan salam pembuka sebagai header.
• Baris kedua masukan garis horizontal
• Baris ketiga buat text link ke halaman utama
• Baris keempat masukan garis horizontal lagi
• Baris kelima masukan text Buku Tamu
• Baris keenam masukan garis horizontal
• Baris ketujuh buat form buku tamu. Caranya sebagai berikut :
Dalam baris ini, kita masukan form untuk memasukan record. Caranya klik Insert –
Aplications Object – Record Insertion Forms.

Setelah muncul tampilan tersebut, Connection kita pilih blogg_conn
Table kita pilih my_guest karena table database ini yang akan kita buat sebagai form.
After inserting Go To kita isikan nama file tujuan apabila selesai mengisikan form. Kita
arahkan saja ke file utama yang telah kita buat pada langkah sebelumnya.
Kolom – kolom selanjutnya adalah pengaturan tampilan form. Khusus untuk fields ‘pesan’,
dalam kolom Display As kita pilih Text Area.
Setelah itu klik OK
• Baris kedelapan masukan garis horizontal.
• Baris kesembilan masukan text Daftar Tamu
• Baris kesepuluh buat view dari table database my_guest. Caranya seperti langkah nomor 9
pada pengisian table di baris ketiga.
• Baris kesebelas masukan garis horizontal
• Baris terakhir adalah footer anda.



18. Buat file php baru dari template My_Blog.dwt.php. Simpan dalam sub direktori Blogger dengan
nama admin.php.
File ini berisi data form untuk table – table database kita yang lainnya, yaitu table my_blogg (data
catatan harian / online diary ), my_articles ( data artikel dalam halaman blogg kita ) dan
my_menu (data link dan target). Caranya sama seperti kita membuat form buku tamu di atas.
Form – form tersebut kita buat dalam Editable Region ( Isi ).
Untuk proteksi sederhana, copykan script ini dan simpan dengan nama protek.php. Kemudian
dalam file admin.php, include-kan nama file yang kita buat tsb.


19. Sebagai percobaan, kita test menggunakan browser kita file Ins_Menu.php
(http:/localhost/My_Blogger/Blogger/admin.php).
Test : Dalam kolom link coba kita isikan text home dengan target My_Blogg.php, dan
administrator dengan target admin.php.

20. Setelah itu cobalah untuk test web blog itu dengan mengetikan alamat
http:/localhost/My_Blogger/
Apabila tidak ada error, berarti anda telah sukses menyelesaikan hampir separuh dari proyek
pembuatan web blog ini. Masih ingatkah anda, berapa kali anda menulis kode PHP tadi?
Link ke Blogger/My_Blogg.php
Link ke record alamat Mail-nya

Untuk pengaturan style text, kita dapat membuat file CSS menggunakan template yang sudah ada
dalam Macromedia Dreamweaver.
Contoh CSS Style:
body {
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #FFFFFF;
margin: 5px;
}
td, th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
text-decoration: none;
text-align: justify;
}
a {
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
background-color: #999999;
color: #FFFFFF;
height: 115px;
text-align: center;
vertical-align: middle;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-color: #999999;
height: 50px;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
hr {
color: #999999;
line-height: 3px;
}
.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #999999;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
text-align: center;
vertical-align: middle;
height: 25px;
}
.subtitle {
text-align: center;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
background-color: #CCCCCC;
color: #000000;
}
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
background-color: #CCCCCC;
}

Copy dan paste contoh script CSS tersebut, lalu simpan dalam sub dir Templates dengan nama
My_Styles.css. Lalu file template php yang sudah kita buat kita link dengan file css tersebut atau copy
saja script ini ke head file tersebut.
Kalau kita preview hasilnya seperti ini :
Tahap selanjutnya adalah penambahan komponen - komponen lain dari halaman blogg kita. Penulis
tidak akan membahas tahapan ini lebih rinci lagi. Penulis hanya menyarankan untuk membaca tulisan
Endy Muhardin tentang PHP Programming dan My SQL Fundamental pada bab yang terakhir
tentang konsep Session, Yeni Setiawan tentang Hit Counter Sederhana dengan PHP, atau Stieven
Kalengkian dalam kalengkian-kalender apabila anda ingin menambahkan kalender didalamnya.
SELAMAT MENCOBA.


Special Thanks buat mas IB Kustanto buat Tutorial yang sangat berharga ini, pokonya kereeeen banget dech!

Posted in: Blogger,Tutorial