Langkah pertama yang perlu kita kerjakan adalah membuat
databasenya terlebih dahulu. Dengan
asumsi bahwa aplikasi server AppServ 2.4.4a ( dapat anda download di
http://www.AppServNetwork.com
) sudah terinstall dan sudah running di PC anda, buatlah sebuah
database dengan nama blogg_project
1. Buka browser anda, ketik alamat http://localhost
2. Klik phpMyAdmin Database
Manager Version 2.5.7-pl1.
3. Nama database kita tulis dalam kolom isian Create new database, lalu klik Create
4. Berikutnya adalah membuat tabel – tabel pendukungnya.
Tabel pertama yang akan kita buat adalah tabel catatan harian,
kita namakan saja dengan
my_blogg.
Kolom field kita ketik angka 3 yang berarti ada 3 kolom yang
akan kita buat dalam table tersebut.
Kemudian klik tombol Go.
Properti my_blogg yang perlu anda konfigurasi adalah sebagai berikut :
Setelah selesai lalu simpan / save
5. Ulangi langkah nomor empat di atas untuk membuat table - tabel
lainnya.
Tabel untuk data artikel kita beri nama my_articles, table buku tamu dengan nama my_guest dan
yang terakhir tabel link menu dengan nama my_menu.
Pengaturan propertinya sebagai berikut :
Tabel my_articles :
Tabel my_guest :
Tabel my_menu :
Setelah database dan tabel –
tabel pendukungnya selesai dibuat, maka kita telah siap untuk memulai
pembuatan web blog menggunakan Macromedia Dreamweaver.
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.
<?php echo $row_Menu['target']; ?>
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 )
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.
<?
function Login($Uid, $Password) {
if (($Uid== "root") && ($Password==
"")) {return true;
} else {return false;}
}function validasi(){
Header( "WWW-authenticate: basic realm=Login");
Header( "HTTP/1.0 401 Unauthorized");
echo "Pasword yang anda masukan salah\n";
exit;
}if (! (Login($PHP_AUTH_USER, $PHP_AUTH_PW))) {
validasi();
exit;
}
?>
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?
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 <link
href="../templates/my_styles.css" rel="stylesheet"
type="text/css"> 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.
Tidak ada komentar:
Posting Komentar