Dalam tutorial kali ini, Anda akan belajar membuat sebuah CMS sederhana dengan menggunakan bahasa pemrograman PHP MySQL dan menggunakan Adobe Dreaweaver CS5 (bisa juga digunakan pada CS3 dan CS4). Sebelum Anda memasuki tutorial ini pastikan Anda telah mengikuti:
- Membuat Site Definition di Dreamweaver CS5, dan
- Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
- Mendownload source code cms_blog.rar dan mengesktraktnya ke dalam webroot komputer Anda
Tutorial ini akan menggunakan tiga (3) buah tabel MySQL, yaitu tabel: users, post dan category. Berikut adalah rincian ketiga tabel tersebut:
users
CREATE TABLE IF NOT EXISTS `users` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(64) NOT NULL, `username` varchar(64) NOT NULL, `password` varchar(64) NOT NULL, `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
post
CREATE TABLE IF NOT EXISTS `post` ( `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `title` text NOT NULL, `category` varchar(500) NOT NULL, `content` text NOT NULL, `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
category
CREATE TABLE IF NOT EXISTS `category` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `category` varchar(100) NOT NULL, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
MEMBUAT FORM TAMBAH ADMIN: add-admin.php
Buka program Adobe Dreamweaver Anda, lalu ikuti langkah-langkah di bawah ini:
- Buka file add-admin.php
- Ubah tulisan “Edit admin” menjadi “Add admin”
- Kemudian hapus tulisan “Form add-admin goes here”, di sana Anda akan membuat form tambah Admin
- Klik Insert > Data Objects > Insert Record > Record Insertion Form Wizard. Jendela baru akan muncul, lakukan beberapa konfigurasi seperti di bawah ini.
- Connection: cms_blog, bisa jadi berbeda dengan Anda (tergantung penamaan koneksi pada saat Anda membuat koneksi database PHP MySQL)
- Table: users
- After inserting, go to: admin.php, Anda juga bisa mengklik Browse untuk mencari file admin.php
- Pada menu Form fields Anda akan melihat tanda plus (+), yang artinya Add item dan minus (-) yang artinya Remove 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.
- Pada menu Column, klik kolom ID, lalu klik tanda minus (-). Lakukan hal yang sama pada kolom updated. Ini artinya, yang tersisa hanya kolom name,
usernamedan password. Selanjutnya Anda akan merubah menu Display As kolom password, sehingga yang semula berupa text field berubah menjadi password field
- Klik pada kolom password, lalu pada menu bagian bawah, Anda akan melihat menu Display As:, klik pop-up menu yang ada, lalu ubah menjadi Password field
- Klik OK jika sudah selesai, form Anda akan muncul pada design view
- Klik Split View, lakukan perubahan/penambahan kode dengan tangan Anda. Cari kode <table align=”center”> lalu ubah menjadi <table align=”center” class=”data-table”>. Lakukan juga perubahan pada button, cari kode berikut <input type=”submit” value=”Insert record”> lalu ubah value-nya menjadi <input type=”submit” value=”Add admin”>
- Copy code <input type=”submit” value=”Add admin”> tersebut, lalu Paste di sampingnya lalu ubah menjadi: <input name=”Reset” type=”reset” value=”Reset”>. Perubahan/hasil akhir dari dua buah button tersebut menghasilkan kode seperti ini: <input type=”submit” value=”Add admin”><input name=”Reset” type=”reset” value=”Reset”>
- Sekarang Anda mempunyai dua buah button, yang satu untuk Add admin dan yang satunya adalah tombol Reset
- Simpan kembali file add-admin.php, cobalah melalui browser. Anda telah berhasil membuat dan mengaktifkan form tersebut.
- Lakukan ujicoba memasukkan bebeberapa nama, username dan password. Setiap kali selesai menambahkan nama, username dan password, Anda akan dialihkan ke halaman admin.php
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. Berikut adalah langkah-langkahnya.
- Buka file admin.php, bukalah dengan Design View
- Untuk menyamakan persepsi, kita sama workspace terlebih dahulu. Klik Windows, lalu pastikan hanya menu Properties, Bindings, Appiclation Bar dan file admin.php yang diberi tanda check (checked), jika ada selain menu-menu tersebut, silakan dinonaktifkan dengan mengklik/unchecked pada menu tersebut. Menu Bindings akan muncul di sebelah kanan workspace Anda, di sana Anda juga akan menemukan tombol tanda plus (+).
- Klik tanda plus (+) tersebut, lalu pilih/klik Recordset (Query). Jendela Recordset akan keluar. Lakukan beberapa konfigurasi seperti pada langkah berikut ini:
- Name: rsUser, penamaan recordset/query di sini adalah bebas, Anda diijinkan untuk memberi nama yang berbeda
- Connection: cms_blog
- Table: users
- Sort: name. Klik pop-up menu pertama, lalu pilih kolom name, lalu pada pop-up menu kedua, biarkan nilai ASCENDING tetap seperti semula. Ini artinya Anda akan mengurutkan namanya berdasarkan abjad.
- Klik Test untuk mengetes query Anda, jika Anda telah memasukkan data user/admin sebelumnya, maka Anda akan melihat nama user diurutkan berdasarkan abjad. Klik OK untuk menutup jendela Test
- Klik OK sekali lagi. Anda telah berhasil membuat query. Pada menu Bindings, Anda akan melihat Recordset (rsUser) telah muncul.
- Klik icon/tanda plus (yang berada dalam jendela Recordset (rsUser) yang berbackground putih. Di sana Anda akan melihat kolom tabel user secara detail yang terdiri atas ID, name, username, password, dan updated
- Cari tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic 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 11)
- Lalu cari tulisan “2001-10-22 09:00”, kemudian hapus
- Melalui panel/menu Bindings dan Recordset (rsUser), klik kolom tabel password, lalu drag/tarik/seret menuju teks yang telah Anda hapus (Langkah 13)
- Seleksi tulisan “Edit”, lalu klik kanan > Make link kemudian jendela Select File akan muncul. Buka folder admin, lalu klik file edit-admin.php
- Masih di jendela Select File, klik tombol Parameters… yang berada di sebelah kanan bawah. Klik tombol Parameters… tersebut. Jendela Parameters akan muncul yang otomatis akan membuka kolom Name
- Pada kolom Name, ketik edit, lalu klik pada kolom Value, sejajar dengan tulisan edit. Anda akan diminta untuk mengisinya, klik icon/tanda petir/listrik untuk memberikan dynamic value dari tabel user. Jendela Dynamic Data akan keluar. Pilih kolom ID (Jika kolom ID tidak keluar, klik tanda plus dari Recordset (rsUser).
- Klik OK sebanyak tiga kali untuk menyelesaikannya. Hasil dari langkah ini nantinya akan menghasilkan link http://localhost/cms_blog/admin/edit-admin.php?edit=1
- Seleksi tulisan “Delete”, lalu klik kanan > Make link kemudian jendela Select File akan muncul. Buka folder admin, lalu klik file edit-admin.php
- Masih di jendela Select File, klik tombol Parameters… yang berada di sebelah kanan bawah. Klik tombol Parameters… tersebut. Jendela Parameters akan muncul 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 icon/tanda petir/listrik untuk memberikan dynamic value dari tabel user. Jendela Dynamic Data akan keluar. Pilih kolom ID (Jika kolom ID tidak keluar, klik tanda plus dari Recordset (rsUser).
- Klik OK sebanyak tiga kali untuk menyelesaikannya. Hasil dari langkah ini nantinya akan menghasilkan link http://localhost/cms_blog/admin/edit-admin.php?delete=1
- Simpan kembali file admin.php
Membuat Repeat Region dan paging halaman
Untuk membuat repeat region, cari kode di bawah ini (ubah dalam tampilan Code View), lalu seleksi kode berikut ini:
<tr> <td width="50%"><?php echo $row_rsUser['name']; ?></td> <td width="25%"><?php echo $row_rsUser['password']; ?></td> <td width="25%"><a href="edit-admin.php?edit=<?php echo $row_rsUser['ID']; ?>">Edit</a> | <a href="edit-admin.php?delete=<?php echo $row_rsUser['ID']; ?>">Delete</a></td> </tr>
Kemudian klik Insert > Data Objects > Repeat Region. Jendela Repeat Region akan keluar. Lalu pada menu tersebut:
- Recordset: rsUser
- Show: 5 Records at a time, ubah nilai 10 menjadi 5. Ini artinya akan ditampilkan 5 data user/admin dalam satu halaman
- Klik OK untuk menyelesaikannya
Langkah selanjutnya adalah membuat paging halaman untuk menampilkan data user jika ternyata user lebih dari 5 orang. Melalui Code View, cari kode dibawah ini:
<th colspan=”3″> </th>
Lalu hapus kode tersebut dan biarkan kursor Anda tetap di sana. Kemudian klik Insert > Data Objects > Recordset Paging > Recordset Navigation Bar, jendela Recordset Navigation Bar akan keluar. Lakukan beberapa konfigurasi di bawah ini:
- Recordset: rsUser
- Display using: Text
- Klik OK untuk menyelesaikannya
BERSAMBUNG
Mas part kedua’y di kasih saya selalu membaca artikel anda dan sudah sampai di bagian ini tolong lanjutkan donk.. atau saya minta artikel lengkap tentang membuat dreamweaver ini kalo bisa kirim ke email saya Thanks
Tunggu ya mas, masih sibuk banget. Hehe… nanti pasti keluar…
4. Klik Insert > Data Objects > Insert Record > Record Insertion Form Wizard. Jendela baru akan muncul, lakukan beberapa konfigurasi seperti di bawah ini.
Connection: cms_blog, bisa jadi berbeda dengan Anda (tergantung penamaan koneksi pada saat Anda membuat koneksi database PHP MySQL)
Table: users
1. pertanyaan saya Table: yang keluar “no table found”, masalahnya ada dimana pakbro mohon penjelasnya. 2. apakah komentar dijawab utk siswa-sisiwi saja?.
Part 4 sudah keluar (form tambah berita). Silakan dibaca
wah thaks banget?bermanfaat..jdi semakin semangat belajar nie..
Teriamakasih
Suhu, saya butuh pencerahan !!
untuk meng impor file cms_javawebmedia_db.sql ke localhost ada keterangan
Error,
SQL query:
—
— Database: `test`
—
— ——————————————————–
—
— Struktur dari tabel `category`
—
CREATE TABLE IF NOT EXISTS `category` (
`ID` int( 10 ) NOT NULL AUTO_INCREMENT ,
`category` varchar( 100 ) NOT NULL ,
PRIMARY KEY ( `ID` )
) ENGINE = MYISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT =1;
MySQL said:
#1046 – No database selected
mohon pencerahan suhu !!!
Pastikan mas sudah membuat dan menyeleksi database yang akan dijadikan tempat untuk import tabel MySQL
webroot tempatnya dimna bro?
Mas sudah install XAMPP atau WAMP apa belum? Jika pake XAMPP web root ada di folder htdoc klo pke WAMP di www
gan file cms_blog.rar di upload di 4shared dong gan,,klo di ziddu ane susah downloadnya,,,atu tmpat lain yg pnting jgn di ziddu,,,tanks
Akan dipertimbangkan Mas. Terimakasih atas sarannya.
Mas File cms nya ndak bisa didownload
bisa ditaruh di 4shared atau yang lain selain ziddu…..,
terimaksih Mas ^_^
Iya, banyak keluhan yang sama. Nanti saya upload ke site lain…
mz ko aQ ikuti langkah Insert > Data Objects > Insert Record > Record Insertion Form Wizard, ko tampilan jendela barunya g ad pengaturan connectionnya?
Sudah bikin koneksi database apa belum? Silakan dibaca prolog dari tutorial ini…
mz ko pilihan table usersnya g ad?ap perlu d bikin tabel dlu po?
Iya, silakan buat tabel dulu…
mas, kan saya udah masuk langkah ke 4. nah saya udah buat table, tp ko tetep ga bisa yah ? di table ada tulisan “no table found”. trus kan saya klik ok aja tuh mas, eh kluar tulisan “please select a connection that contains tables for updatign, or click cancel”. bisa dibantu ga mas ? saya bingung bangat mas. trima kasih
Buka menu Site > Manage Sites
Lalu hapus salah satu site yang saat ini Anda kerjakan. Selanjutnya buat Site Definition lagi dari nol. Selamat mencoba
mz, klu mw ganti bagian atas desaignnya gmn?itu pake photoshop y?
Iya, silakan diganti file header.png yang ada dalam folder images…
sy g bs photoshop,,,bkiny g bs pke selain photoshop?
Cari tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic data yang telah Anda simpan dalam tabel user
itu yg d desaign dreamweavernya?
Lalu cari tulisan “2001-10-22 09:00″, kemudian hapus
itu tulisannya d mana mz?ko sy g menemukan
ko yg d file admin.php,g ad d temukan yg ad tulisan tanggalnya y mz?yg ad d file index.php
mas ko di saya data yang muncul cuma satu user ya?? padahal di database usernya ada banyak, bingung saya
nice tutorial….
thanks…
Terimakasih juga Mas…
Pada bagian repeat region, saya sudah mengikuti langkahnya dengan benar.
namun saat saya uji coba dengan memasukan admin sampai lebih dari 10, kenapa pada admin.php semua username admin muncul semua, harusnya kan muncul 5 saja mas.
bagaimana?
mas… mohon bantuannya ko saya sudah membuat kolom user dan passwordnya ga masuk ke file admin.php ya mas.. padahal semua langkah sudah saya ikuti… makasih
mas mau nanya.. cara buat tabel user di database itu bagaimana ya???
mas ,,cr bwt pesan di DW cs 5 dengan java script gmn ya,,,,?
misal nya keluar pesan,,”Nama User telah di entri”
mas ini ko setelah aku coba test halaman admin.php di browser ko record/data yang aku input ngga keluar, tapi aku check di database data user ada mas, mohon bantuannya. Ini aku dah coba berapa kali tetap ngga muncul di browser
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\css\admin\add-admin.php:1) in C:\xampp\htdocs\css\admin\add-admin.php on line 53
ada yang bantu ndak ?? dah coba pake
ndak bisa, di tambah pake
tambah ndak bisa ??
Tambahkan kode: di awal kode.
mas tetep gak bisa giama nih padahal udh di tambah
Warning: Cannot modify header information – headers already sent by (output started at D:\xampp\htdocs\admin\add-admin.php:2) in D:\xampp\htdocs\admin\add-admin.php on line 52
mas kan di dreamweaver ada fungsi repeat region,, nah untuk penomoran otomatis 1,2,3,dst, tidak bisa malah jadi 1 semua… pada tabel admin, index, dll saya ingin menambahkan no 1,2,3 dst,,,bagaimana cara nya..
Hehe…betull. Ada beberapa trik yang bisa diterapkan sebenarnya. Nanti saya buat posting aja kali yah jawabannya
wah sangat bermanfat, biar bisa park selanjutnya. trimakasih
Terimakasih, senang bisa menjadi manfaat
Thanks yah mas , akhirnya dapat juga tutorial kaya gini ..
Setelah bertapa di google .. :D :D
blog.rar-nya koq nggak bisa didownload ya
webroot itu buat apa sih?
maz, saya Mendownload source code cms_blog.rar knapa gk bisa smua y ? … mohon mnta link download yg lain y.. :D
Silakan download script terakhir di Part 12
gan ane yang paling kesusahan tuh dibagian edit dan delete..ane lgi ngerjain website..ane pake cara agan di atas buat input admin dan input iklan jga .. nah kedua”nya lancar gan..yg bikin ane bingung tuh saat nambahin link edit dan delete..udah beres tp saat mau ngehapus ma edit kagak bisa.. mandeuk gan ane..tolong pencerahanya..knp saat klik tuh del ma edit kagak ke hapus ataupun kagak bisa ke edit
Silakan dilanjut pada tutorial selanjutnya… Ada 12 part untuk tutorial ini
Kaka cms_blog.rar nya gak bisa di download di ziddu.. jadi gmn downloadnya?
Nanti akan saya upload di blog saja langsung
link file yang baru mana kak? yg selain di ziddu
petunjuk nomor 11 sy bingung maksudnya (Cari tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic data yang telah Anda simpan dalam tabel user).
tolong dibantu mas, klik dimana, buka yg mana. soalnya tanggu, udah sampai sini.
sebelumnya, terima kasih atas jawabanya dan bantuannya.
Silakan Anda download source codenya. Lalu buka file dalam mode Design View
source codenya ga bisa di download mas
mas source code ga bisa di donload ni
15. Seleksi tulisan “Edit”, lalu klik kanan > Make link kemudian jendela Select File akan muncul. Buka folder admin, lalu klik file edit-admin.php
mas saya lagi stuck nih
kan saya udah nyeleksi tulisan “Edit” dan saya klik kanan kemudian tidak muncul perintah Make link
mohon pencerahannya mas ^^
Mas? kok file rarnya nggk bisa di download sih?
padahal kan sayang banget tutorialnya bagus tapi filenya nggk bisa di download..
jadi sedih :(
Mas, minta petunjuk.. bikin table users nya gimana? :(
kakak, bisa ga cms nya diganti sama cms yang lain? supaya lebih profesional gitu…
mas tombol parameternya dimana nyari ampe susah amet :(
Tinggal cari di bagian bawah mas
Mas, ga ada tutorial klo databasenya menggunakan xml yah?soalnya referensi php dan xml khususnya menampilkan gambar (bukan looping) masih sangat minim
Sebenarnya ada.. Cuma belum sempat nulis tutorialnya.
Mas, mau tanya kalo cara menampilkan data yang berelasi gmana???
kurang paham gue apa lagi gambarnya gk ada heran gue bingung sendiri
Mas, itu ko gmbarnya pda ilang….
pdahal sya pengin bljr buat cms mas,..?
Iya, segera diupload lagi yah
mas web root gak ada padahal dah instal xampp gmn solusix?
om tolong di upload lg gambarnya dunk om ,,,
biar kita yg newbie lebih jelas gt om ,,,
tks
ass. mas ko screenshot nya ga terlihat sih? tolong upload kembali dong mas step by step gambar2 nya, soalnya kalau saya ikutin tutornya tanpa gambar merasa sulit please sebagai media belajar smoga ilmu mas bermanfaat untuk kemashlatan umat
trmks
Itu sampai langkah 11 kok jadi bingung dimana ada tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic data yang telah Anda simpan dalam tabel user. Dimana …dimana …dimana ….
ahhhh gambarnya gan gk ada percuma aja kalo gini, gk ngerti jdinya gan… plss diupload ulang gambarnya gan.. thx
Mas Link Download CMS_Blog.rar Kadaluarsa, Perbaharui lagi mas
mas link cms_blog.rar nya gak bisa di download mas…
mohon di perbarui ya mas…
makasih…
Ok… segera diperbaiki yaah
Mantep kang artikelnya
Terimakasih…
assalamu’alaikum mas saya sudah menyelesaikan step by stepnya pas aku preview in mozilla firefox tampilannya bukan tombol submit reset tapi
kolom 1 tulisan â€Add
kolom 2 tulisan â€Resetâ€
gimana ngatasinnya mas???
Apakah step-stepnya sudah bener?
Iya sudah bener dan sudah tested. Banyak yg sudah mencoba kok mas
mas link nya mati ndak bs donlot
bos tolong bikin kan website dengan menggunakan dreamafer, tapi pakek databassse juga,
tolong bos ya
MAS UNTUK NAMBAHIN KOLOM SEARCH GMANA
MISAL DATA BANYAK… MASAK HARUS NYARI SATU SATU PER PAGE
BISA GK TUH MAS HWEHEHEEH
mas pada langkah ini tolong diperjelas lagi atau lebih detail lagi
1.Buka file add-admin.php——> maksunya apa??
2.Ubah tulisan “Edit admin” menjadi “Add admin”——> maksunya apa??
3.Kemudian hapus tulisan “Form add-admin goes here”, di sana Anda akan membuat form tambah Admin ——> maksunya apa??
wah masih bingung nih,,
SUMBER REFERENSI MAKALAH
tolong di pindah ke mediafire om Mendownload source code cms_blog.rarnya, please…
gan kok nggk bisa di download ??
Pada menu Column, klik kolom ID, lalu klik tanda minus (-). Lakukan hal yang sama pada kolom updated. Ini artinya, yang tersisa hanya kolom name,
berarti smuanya dihapus kecuali kolom name maksudnya gitu mas??
lah kalo name doang username dan passwordnya? gada dong?
nanti login nya gimana? mohon ralat lagi tulisannya mas!
” Cari tulisan “Name & username go here”, lalu hapus tulisan tersebut. Di sana Anda akan mengisinya dengan dynamic 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 11)
Lalu cari tulisan “2001-10-22 09:00″, kemudian hapus”
pada bagian step diatas, saya bingung untuk mencari “name & username go here” soalnya pas saya buat recordsetnya itu gak ada apa2 di layar desain viewnya, itu apa harus ada form atau gimana ? ada petunjuk visualnya kah ?
Ini tutorial yang part berapa ya?
Broken Link Report
untuk download file cms_blog.rar via Ziddu.. mohon diperbaiki kang..
lg pngen nyoba nih soalnya.. :)
lam kenal..
akhirnya jadi bisa pakai dream weaver, saya notepad user. makasih mas admin hasilnya keren.
dead link om…. tolong perbaiki yah…
newbie ingin bertanya nih mas… itu di gambar paling atas di bawah nya kan ada tulisan “admin” tu…
jadi kalo admin mo login klik di sana ya ?
Nyimak Link
Terima kasih atas sharig ilmunya. Saya tertarik untuk belajar ini.
untuk file CMS_blogger.rar tidak bisa, mungkin ada link lain ?