Membuat CMS PHP MySQL Menggunakan

Dreamweaver CC, CS6, CS5, CS4, CS3

Dalam tutorial kali ini, Anda akan belajar membuat sebuah CMS sederhana dengan
menggunakan bahasa pemrograman PHP MySQL dan menggunakan Adobe Dreaweaver
S! "bisa juga digunakan pada S# dan S$%& Sebelum Anda memasuki tutorial ini
pastikan Anda telah mengikuti'
(& Membuat Site De)inition di Dreamweaver S! , dan
*& Membuat koneksi database PHP MySQL dengan Dreamweaver S!
#& Mendownload sour+e +ode cms_blog.rar dan mengesktraktnya ke dalam webroot
komputer Anda
,utorial ini akan menggunakan tiga "#% buah tabel MySQL, yaitu tabel' users, post dan
category& -erikut adalah rin+ian ketiga tabel tersebut'
users
CREATE TABLE IF NOT EXISTS `users` (
`ID` int(10) NOT NULL AUTO_INCREMENT,
`n!e` "r#$r(%&) NOT NULL,
`usern!e` "r#$r(%&) NOT NULL,
`'ss()r*` "r#$r(%&) NOT NULL,
`u'*te*` ti!est!' NOT NULL DEFAULT CURRENT_TIMESTAM+ ON U+DATE
CURRENT_TIMESTAM+,
+RIMAR, -E, (`ID`)
) EN.INE/M0ISAM DEFAULT C1ARSET/2tin1 AUTO_INCREMENT/1 3
post
CREATE TABLE IF NOT EXISTS `')st` (
`ID` 4i5int(60) unsi5ne* NOT NULL AUTO_INCREMENT,
`tit2e` te7t NOT NULL,
`#te5)r0` "r#$r(800) NOT NULL,
`#)ntent` te7t NOT NULL,
`u'*te*` ti!est!' NOT NULL DEFAULT CURRENT_TIMESTAM+ ON U+DATE
CURRENT_TIMESTAM+,
+RIMAR, -E, (`ID`)
) EN.INE/M0ISAM DEFAULT C1ARSET/2tin1 AUTO_INCREMENT/1 3
category
CREATE TABLE IF NOT EXISTS `#te5)r0` (
`ID` int(10) NOT NULL AUTO_INCREMENT,
`#te5)r0` "r#$r(100) NOT NULL,
+RIMAR, -E, (`ID`)
) EN.INE/M0ISAM DEFAULT C1ARSET/2tin1 AUTO_INCREMENT/1 3
MEMBUAT FORM TAMBAH ADMIN: add-admin.php
-uka program Adobe Dreamweaver Anda, lalu ikuti langkah.langkah di bawah ini'
/ava 0eb Media
(& -uka )ile add-admin.php
*& 1bah tulisan Edit admin menjadi Add admin
#& 2emudian hapus tulisan Form add-admin goes here, di sana Anda akan
membuat )orm tambah Admin
$& 2lik Insert > Data Objects > Insert Record > Record Insertion Form Wizard&
/endela baru akan mun+ul, lakukan beberapa kon)igurasi seperti di bawah ini&
!& Connection: cms_blog, bisa jadi berbeda dengan Anda "tergantung penamaan
koneksi pada saat Anda membuat koneksi database PHP MySQL%
3& Table: users
4& After inserting, go to: admin.php, Anda juga bisa mengklik Browse untuk
men+ari )ile admin.php
5& Pada menu Form fields Anda akan melihat tanda plus "6%, yang artinya Add
item dan minus ".% yang artinya emo!e item& Di sana Anda juga akan melihat
menu Column, Label, Display As dan Submit As& Column adalah kolom yang
ada di dalam tabel MySQL Anda, dalam hal ini tentunya tabel users.
7& Pada menu Column, klik kolom "#, lalu klik tanda minus ".%. Lakukan hal yang
sama pada kolom updated. 8ni artinya, yang tersisa hanya kolom name,
$a!a %eb &edia
$a!a %eb &edia
$a!a %eb &edia
$a!a %eb &edia
$a!a %eb &edia
$a!a %eb &edia

usernamedan pass'ord. (elan)utn*a Anda a+an merubah menu #ispla* As +olom
pass'ord, sehingga *ang semula berupa te,t field berubah men)adi pass'ord
field
(9& 2lik pada kolom pass'ord, lalu pada menu bagian bawah, Anda akan melihat
menu Display As:, klik pop.up menu yang ada, lalu ubah menjadi -ass'ord field
((& 2lik OK jika sudah selesai, )orm Anda akan mun+ul pada design view
(*& 2lik Split :iew, lakukan perubahan;penambahan kode dengan tangan Anda& ari
kode .table align/center0 lalu ubah menjadi .table align/center
class/data-table0. Lakukan juga perubahan pada button, +ari kode berikut
.input t*pe/submit !alue/"nsert record0 lalu ubah value.nya
menjadi .input t*pe/submit !alue/Add admin0
(#& opy +ode .input t*pe/submit !alue/Add admin0 tersebut, lalu -aste di
sampingnya lalu ubah menjadi' .input name/eset t*pe/reset
!alue/eset0. Perubahan;hasil akhir dari dua buah button tersebut
menghasilkan kode seperti ini' .input t*pe/submit !alue/Add
admin0.input name/eset t*pe/reset !alue/eset0
($& Sekarang Anda mempunyai dua buah button, yang satu untuk Add admin dan
yang satunya adalah tombol Reset
(!& Simpan kembali )ile add-admin.php, +obalah melalui browser& Anda telah
berhasil membuat dan mengakti)kan )orm tersebut&
(3& Lakukan uji+oba memasukkan bebeberapa nama, username dan password& Setiap
kali selesai menambahkan nama, username dan password, Anda akan dialihkan ke
halaman admin.php
/ava 0eb Media
MEMBUAT LISTING ADMIN, MENAMBAHKAN DYNAMIC LINK EDIT DAN
DELETE: admin.php
Langkah selanjutnya adalah menampilkan listing admin;user yang telah ditambahkan ke
dalam database sehingga Anda dapat mengaturnya, mengedit dan menghapusnya& -erikut
adalah langkah.langkahnya&
(& -uka )ile admin.php, bukalah dengan Design View
*& 1ntuk menyamakan persepsi, kita sama workspa+e terlebih dahulu& 2lik
Windows, lalu pastikan hanya menu Properties, Bindings, Appiclation Bar dan
)ile admin.php yang diberi tanda +he+k "+he+ked%, jika ada selain menu.menu
tersebut, silakan dinonakti)kan dengan mengklik;un+he+ked pada menu tersebut&
Menu Bindings akan mun+ul di sebelah kanan workspa+e Anda, di sana Anda
juga akan menemukan tombol tanda plus "6%&
#& 2lik tanda plus (+) tersebut, lalu pilih;klik Recordset (Query)& /endela
Recordset akan keluar& Lakukan beberapa kon)igurasi seperti pada langkah
berikut ini'
$& 1ame: rs2ser, penamaan re+ordset;<uery di sini adalah bebas, Anda diijinkan
untuk memberi nama yang berbeda
!& Connection: cms_blog
3& Table: users
4& (ort: name& 2lik pop.up menu pertama, lalu pilih kolom name, lalu pada pop.up
menu kedua, biarkan nilai A(CE1#"13 tetap seperti semula& 8ni artinya Anda
akan mengurutkan namanya berdasarkan abjad&
5& 2lik Test untuk mengetes <uery Anda, jika Anda telah memasukkan data
user4admin sebelumnya, maka Anda akan melihat nama user diurutkan
berdasarkan abjad& 2lik OK untuk menutup jendela Test
7& 2lik OK sekali lagi& Anda telah berhasil membuat <uery& Pada menu Bindings,
Anda akan melihat ecordset 5rs2ser6 telah mun+ul&
(9& 2lik i+on;tanda plus "yang berada dalam jendela ecordset 5rs2ser6 yang
berba+kground putih& Di sana Anda akan melihat kolom tabel user se+ara detail
yang terdiri atas ID, name, username, password, dan updated
((& ari tulisan 1ame 7 username go here, lalu hapus tulisan tersebut& Di sana
Anda akan mengisinya dengan dynami+ data yang telah Anda simpan dalam tabel
user&
(*& Melalui panel;menu Bindings dan Recordset (rsUser), klik kolom tabel name,
lalu drag;tarik;seret menuju teks yang telah Anda hapus "Langkah ((%
(#& Lalu +ari tulisan 899:-:9-88 9;:99<, kemudian hapus
($& Melalui panel;menu Bindings dan Recordset (rsUser), klik kolom tabel
password, lalu drag;tarik;seret menuju teks yang telah Anda hapus "Langkah (#%
(!& Seleksi tulisan Edit, lalu klik kanan > Make link kemudian jendela Select
File akan mun+ul& -uka )older admin, lalu klik )ile edit-admin.php
(3& Masih di jendela Select File, klik tombol Parameters. yang berada di sebelah
kanan bawah& 2lik tombol Parameters. tersebut& /endela Parameters akan
mun+ul yang otomatis akan membuka kolom Name
(4& Pada kolom Name, ketik edit, lalu klik pada kolom Value, sejajar dengan
tulisan edit& Anda akan diminta untuk mengisinya, klik i+on;tanda petir;listrik
untuk memberikan d*namic !alue dari tabel user. /endela #*namic #ata akan
keluar& Pilih kolom ID "/ika kolom 8D tidak keluar, klik tanda plus dari ecordset
5rs2ser6&
(5& 2lik OK sebanyak tiga kali untuk menyelesaikannya& Hasil dari langkah ini
nantinya akan menghasilkan link http:44localhost4cms_blog4admin4edit-
admin.php=edit/:
(7& Seleksi tulisan #elete, lalu klik kanan > Make link kemudian jendela Select
File akan mun+ul& -uka )older admin, lalu klik )ile edit-admin.php
*9& Masih di jendela Select File, klik tombol Parameters. yang berada di sebelah
kanan bawah& 2lik tombol Parameters. tersebut& /endela Parameters akan
mun+ul yang otomatis akan membuka kolom Name
*(& Pada kolom Name, ketik delete, lalu klik pada kolom Value, sejajar dengan
tulisan delete& Anda akan diminta untuk mengisinya, klik i+on;tanda petir;listrik
untuk memberikan d*namic !alue dari tabel user. /endela #*namic #ata akan
keluar& Pilih kolom ID "/ika kolom 8D tidak keluar, klik tanda plus dari ecordset
5rs2ser6&
**& 2lik OK sebanyak tiga kali untuk menyelesaikannya& Hasil dari langkah ini
nantinya akan menghasilkan link http:44localhost4cms_blog4admin4edit-
admin.php=delete/:
*#& Simpan kembali )ile admin.php
/ava 0eb Media
Membuat Repeat Region dan paging halaman
1ntuk membuat repeat region, +ari kode di bawah ini "ubah dalam tampilan Code View),
lalu seleksi kode berikut ini'
9tr:
9t* (i*t$/;80<;:9='$' e#$) >r)(_rsUser?@n!e@A3 =:9Bt*:
9t* (i*t$/;68<;:9='$' e#$) >r)(_rsUser?@'ss()r*@A3 =:9Bt*:
9t* (i*t$/;68<;:9 $reC/;e*itD*!inE'$'=e*it/9='$' e#$)
>r)(_rsUser?@ID@A3 =:;:E*it9B: F 9 $reC/;e*itD*!inE'$'=*e2ete/9='$'
e#$) >r)(_rsUser?@ID@A3 =:;:De2ete9B:9Bt*:
9Btr:
2emudian klik Insert > Data Objects > Repeat Region& /endela Repeat Region akan
keluar& Lalu pada menu tersebut'
ecordset: rs2ser
(ho': > ecords at a time, ubah nilai (9 menjadi !& 8ni artinya akan ditampilkan
! data user;admin dalam satu halaman
2lik OK untuk menyelesaikannya
Langkah selanjutnya adalah membuat paging halaman untuk menampilkan data user jika
ternyata user lebih dari ! orang& Melalui Code View, +ari kode dibawah ini'
<th colspan3">&nbsp;</th>
Lalu hapus kode &nbsp; tersebut dan biarkan kursor Anda tetap di sana& 2emudian klik
Insert > Data Objects > Recordset Paging > Recordset Navigation Bar, jendela
Recordset Navigation Bar akan keluar& Lakukan beberapa kon)igurasi di bawah ini'
ecordset: rs2ser
#ispla* using: Te,t
2lik OK untuk menyelesaikannya
/ava 0eb Media