Dalam
tutorial kali ini, Anda akan belajar bagaimana membuat aplikasi berita
sederhana berbasis PHP MySQL dengan menggunakan Dreamweaver. Tutorial
ini menggunakan Dreamweaver CS4 dan XAMPP. Anda dapat menggunakan versi
sebelum atau sesudahnya.
Pastikan Anda sudah terbiasa menggunakan PHP dan MySQL. Sebelum Anda
masuk ke tutorial ini, pastikan Anda telah menyelesaikan tutorial:
- Membuat
Site Definition di Dreamweaver CS5
- Membuat
Koneksi Database PHP MySQL di Dreamweaver
Tutorial ini akan menggunakan 6 file utama untuk menampilkan berita,
file-file tersebut adalah. Simpan ke-6 file tersebut dalam satu web root
atau folder yang sama. Script awal dari ke-6 file ini akan disertakan
di bawah:
- index.php, digunakan untuk menampilkan berita secara keseluruhan
- detail.php, digunakan untuk membaca dan melihat detail berita
- add_berita.php, digunakan untuk menambah dan menghapus berita
- edit_berita.php, digunakan untuk mengedit berita
- list_berita.php, digunakan untuk menampilkan listing berita
- delete_berita.php, digunakan untuk menghapus berita
Tutorial ini juga menggunakan satu tabel data yang disebut
tabel berita yang disimpan dalam database blogs:
CREATE TABLE IF NOT EXISTS `berita` (
`id_post` int(5) NOT NULL AUTO_INCREMENT,
`judul` varchar(500) NOT NULL,
`kategori` varchar(100) NOT NULL,
`berita` text NOT NULL,
`updated` timestamp NOT NULL DEFAULT
CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id_post`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1
AUTO_INCREMENT=1 ;
PERSIAPAN:
add_berita.php
Pastikan Anda telah membuat Site Definition dan koneksi database PHP
MySQL (lihat script berita_conn.php di bawah). Langkah pertama kita akan
mengerjakan file add_berita.php terlebih dahulu. Berikut ini adalah
langkah-langkahnya:
- Buka file add_berita.php melalui Dreamweaver. Pastikan Anda bekerja
dengan Design View
- Seleksi tulisan ”Form tambah berita di sini”, lalu hapus tulisan
tersebut.
- Klik Insert > Data Objects > Insert Record > Record
Insertion Form Wizard. Lalu masukkan beberapa parameter berikut ini.
- Pilihlah menu-menu sesuai dengan berikut ini, Connection:
berita_conn,lalu Table: berita, lalu After insertion, go to:
list_berita.php (atau dengan mengklik Browse lalu pilih
file list_berita.php.
- Pada pilihan Form fields, Anda akan melihat tanda plus (+) dan minus
(-). Kita akan menggunakannya nanti. Di bawah Form field tersebut Anda
akan melihat id_post, judul, kategori, berita dan updated.
- Pilih id_post, lalu klik tanda minus (-) karena kita tidak
membutuhkannya.
- Lakukan hal yang sama pada updated. Kedua field tersebut tidak akan
kita butuhkan karena secara otomatis akan digenerate oleh MySQL.
- Biarkan field judul sesuai default.
- Klik pada field kategori. Pada bagian bawah Anda akan melihat
menuDisplay as: Text field, ubah Text field tersebut
menjadi Menu melalui pop-up menu. Maka secara otomatis tulisan Menu
Properties akan muncul di bawahnya. Klik Menu Properties tersebut, maka
window Menu Propeties akan keluar.
- Pada Label: secara otomatis akan terisi Item1. Ubah
tulisan Item1tersebut menjadi Teknologi, lalu pada Value: Teknologi.
Selanjutnya klik tanda plus (+) yang hanya ada satu di window tersebut
(Jika terjadi kesalahan Anda dapat mengklik tanda minus (-) untuk
menghapus). Tambahkan lagi beberapa item, misalnya: Label:
Komputer, lalu Value: Komputer, lalu klik tanda plus (+) lagi. Ulangi
lagi dengan menambahkan beberapa kategori berita yang Anda inginkan.
Lalu Klik OK, jika Anda telah selesai menambahkan kategori berita.
- Klik pada pada field berita, maka di bagian menu Display as: secara
otomatis akan memilih Textfield, ubahlah menjadi Text
area sehinggaDisplay as: Text area
- Klik OK lalu simpan file add_berita.php tersebut.
- Selamat, Anda telah berhasil menyelesaikan form untuk menambah
berita
edit_berita.php
Pada halaman ini, Anda akan mengedit berita yang sudah
dipublikasikan. Berikut langkah-langkahnya:
- Buka file edit_berita.php melalui Dreamweaver. Pastikan Anda bekerja
dengan Design View
- Klik Insert > Data Objects > Recordset. Pastikan
jendela Recordsetakan keluar dan pastikan tampil dalam format Simple
Recordset, jika belum maka klik Simple. Masukkan beberapa parameter ini:
- Pada menu Name:, secara otomatis akan muncul tulisan Recordset1,
ubahlah menjadi rsEditBerita (maksudnya adalah recordset untuk
mengupdate berita, Anda dapat memberi nama yang berbeda).
- Lalu Connection: berita_conn, lalu Table: berita.
- Pada menu Columns: All, biarkan sesuai default.
- Pada menu Filter:, ubahlah yang
bernilai None menjadi id_post. Secara default Dreamweaver akan
memilih URL Parameter, tanda sama dengan(=) dan id_post. Hal ini sudah
benar, karena memang hal inilah yang kita butuhkan.
- Klik OK jika sudah selesai (Jika muncul peringatan ”A recordset has
been added….” klik OK saja.
- Anda akan melihat tulisan ”Form edit berita di sini”, hapus tulisan
tersebut.
- Klik Insert > Data Objects > Update Record > Record Update
Form Wizard. Jendela Record Update Form akan muncul, lalu masukkan
beberapa parameter ini.
- Connection: berita_conn, lalu Table to update: berita, lalu Select
record from: rsEditBerita (ini adalah recordset yang tadi telah kita
buat), lalu Unique key columns: id_post dan Numeric ditanda checked.
- After updating, go to: list_berita.php, ketik secara manual atau
Anda mencari filenya dengan mengklik Browse.
- Lakukan hal sama seperti pada file add_berita.php dari langkah ke-5
sampai dengan ke-11. Hal utama yang berbeda
dari Record insertionform dan Record update form adalah pada Default
value: yang mana pada update record otomatis akan di-assign seperti yang
disimpan dalam database.
- Klik OK dan simpan kembali file edit_berita.php
- Anda telah menyelesaikan halaman untuk mengedit berita
list_berita.php
Halaman list_berita.php digunakan untuk menampilkan listing berita
yang telah dimasukkan ke dalam database. Berikut langkah-langkah
aktivasinya:
- Buka file list_berita.php melalui Dreamweaver. Pastikan Anda bekerja
dengan Design View
- Lakukan langkah ke 2-5 pada halaman edit_berita.php. Lalu lakukan
modifikasi yang berbeda seperti berikut ini.
- Pada menu Sort: maka akan bernilai None, ubahlah
menjadiupdated melalui Pop-up menu yang ada. Lalu nilai Ascending,
ubahlah menjadi Descending melalui Pop-up menu yang ada.
- Klik OK jika sudah selesai
- Pada Design View Anda akan melihat tulisan ”id”, seleksi tulisan
tersebut lalu hapus.
- Lalu klik Insert > Data Objects > Dynamic Data > Dynamic
Text. Jendela Dynamic Text akan muncul. Pada menu Field, Anda akan
melihat tulisan Recordset (rsEditBerita).
- Klik tanda plus (+), lalu pilih id_post (yang bertanda petir).
Klik OK jika sudah selesai.
- Seleksi lagi tulisan ”Judul Berita”, lalu hapus. Lakukan langkah
ke-6, lalu pilih field judul (yang bertanda petir). Klik OK, lalu
tekan Ctrl+B untuk menebalkan judul berita.
- Lalu lakukan hal yang sama sesuai fieldnya
untuk Kategori dan Tanggal
- Di sini Anda akan melihat tulisan Edit yang sudah ada linknya
menujuedit_berita.php.
- Selesik tulisan Edit tersebut, lalu Klik Kanan > Change
Link. WindowSelect File akan muncul.
- Carilah menu URL: dan Parameters.
Klik Parameters. WindowParameters link akan muncul.
- Klik area berwarna putih di bawah menu Name, lalu ketik id_post.
Lalu di klik area putih di bawah Value, maka akan muncul tanda petir.
Klik tanda petir tersebut, dari Window Dynamic Data pilih field id_post.
- Klik OK sebanyak tiga kali untuk menyelesaiakan penambahan dynamic
link.
- Seleksi tulisan ”Lihat Berita”, di sana sudah ada link
menuju detail.php.
- Ulangi langkah 12-13 untuk menyelesaikan dynamic link ini.
- Seleksi tulisan ”Hapus”, di sana sudah ada link menuju
file delete_berita.php, di sini kita akan membuat parameter link yang
memungkinkan kita untuk menghapus berita yang tidak diinginkan.
- Lakukan langkah ke-12. HATI-HATI PADA LANGKAH KE-19, DI SINI ANDA
AKAN MENTRANSFER PARAMETER LINK BERNILAI hapus.
- Klik area berwarna putih di bawah menu Name, lalu ketik hapus. Lalu
di klik area putih di bawah Value, maka akan muncul tanda petir. Klik
tanda petir tersebut, dari Window Dynamic Data pilih
field id_post. Klik OK tiga kali.
- Seleksi kode di bawah ini (lihat nomor 21)
- <tr> <td width=”10%” align=”center” valign=”top”>
<?php echo $row_rsEditBerita['id_post']; ?></td> <td
width=”60%” align=”left”
valign=”top”><p><strong><?php echo
$row_rsEditBerita['judul']; ?></strong><br/>
Kategori berita:<em> <?php echo $row_rsEditBerita['kategori'];
?></em>, Diupdate pada tanggal: <em><?php echo
$row_rsEditBerita['updated'];
?></em></p><hr/></td> <td align=”left”
valign=”top”><p><a href=”edit_berita.php?id_post=<?php
echo $row_rsEditBerita['id_post']; ?>”>Edit</a> | <a
href=”list_berita.php?hapus=<?php echo $row_rsEditBerita['id_post'];
?>”>Hapus</a> | <a href=”detail.php?id_post=<?php echo
$row_rsEditBerita['id_post']; ?>”>Lihat
Berita</a></p></td> </tr>
- Klik Insert > Data Objects > Repeat Region
- Pastikan Anda memilih Recordset (rsEditBerita) dan Show: 10 at a
time. Klik OK
- Cari tulisan ”Recordset navigation bar”, hapus tulisan tersebut
- Klik Insert > Data Objects > Recordset Paging > Recordset
Navigation Bar.
- Pastikan Anda memilih Recordset (rsEditBerita) dan pilih yang
berformat Text. Klik OK
- Simpan file list_berita.php.
- Anda telah berhasil menyelesaikan file list_berita.php
delete_berita.php
Ini berisi script untuk menghapus berita. Berikut langkah-langkahnya:
- Klik File > New > Create
- Simpan nama file tersebut dengan nama delete_berita.php
- Klik Insert > Data Objects > Delete Record. Jendela Delete
Record akan keluar. Masukkan beberapa parameter ini.
- First check if variable is defined: Primary key
value,laluConnection: berita_conn, lalu Table: berita, dan Primary key
column: id_post, Numeric (dengan tanda centang/checked)
- Pada tahap ini, ANDA HARUS BERHATI-HATI, ingat kita telah
mendefinisikan variabel/parameter link bernilai hapus sebelumnya. Maka
pastikan Primary key value: URL Parameter, lalu tulisan id_post, ubahlah
menjadi hapus.
- After deleting, go to: list_berita.php (atau dengan klik Browse
untuk mencari file tersebut).
- Klik OK jika sudah selesai.
- Simpan file delete_berita.php
detail.php
Halaman detail berita akan kita gunakan untuk menampilkan detail
per-item berita. Berikut ini langkah-langkahnya:
- Buka file detail.php melalui Dreamweaver
- Buatlah Recordset seperti pada file edit_berita.php (langkah ke-2
sampai ke-7)
- Hapus tulisan ”Detail judul berita”
- Klik Insert > Data Objects > Dynamic Data > Dynamic
Text. Lalu pilih Recordset (rsEditKategori), lakukan expand dengan
mengklik tanda plus (+) jika memang belum keluar semua detail fields.
- Pilih field judul yang bertanda petir lalu klik OK
- Lakukan hal yang sama untuk kategori, updated dan berita (dengan
menghapus terlebih dahulu tulisan Kategori, Tanggan dan Isi Berita.
- MySQL secara umum tidak dapat membaca paragraph dengan baik. Untuk
mengatasi hal ini, PHP telah menyediakan fasilitas nl2br (New Line to
Break).
- Cari kode ini <?php echo $row_rsEditBerita['berita']; ?>, lalu
ubah menjadi <?php echo nl2br($row_rsEditBerita['berita']); ?>.
NL2BR ini berfungsi untuk memisahkan antar paragraph yang Anda ketik.
- Simpan kembali file detail.php
- Anda telah selesai mengerjakan file detail.php
index.php
Pada file ini, Anda akan melihat listing semua berita. Untuk
mengerjakannya ikuti langkah berikut ini:
- Buka file index.php melalui Design View
- Buat Recordset baru seperti pada file list_berita.php (lihat langkah
ke-2 sampai dengan ke-4)
- Lakukan langkah seperti pada file detail.php (lihat langkah ke-3
sampai dengan ke-8)
- Cari kode ini: <?php echo $row_rsEditBerita['judul']; ?>, lalu
seleksi kode tersebut. Lalu klik Insert > Hyperlink. Pada
menu Hyperlink, klik tanda folder pada menu Link, maka ini akan membuka
window Select File.
- Pilih file detail.php
- Carilah menu URL: dan Parameters.
Klik Parameters.WindowParameters link akan muncul.
- Klik area berwarna putih di bawah menu Name, lalu ketik id_post.
Lalu di klik area putih di bawah Value, maka akan muncul tanda petir.
Klik tanda petir tersebut, dari Window Dynamic Data pilih field id_post.
- Klik OK sebanyak tiga kali untuk menyelesaiakan penambahan dynamic
link.
- Cari kode berikut ini (lihat nomor 10)
- <h2><a href=”detail.php?id_post=<?php echo
$row_rsEditBerita['id_post']; ?>”><?php echo
$row_rsEditBerita['judul'];
?></a><br/> <span>Kategori Berita:
<em><?php echo $row_rsEditBerita['kategori']; ?></em>,
Tanggal update:<em> <?php echo $row_rsEditBerita['updated'];
?></em></span></h2><p> <?php echo
nl2br($row_rsEditBerita['berita']); ?></p><hr/>
- Klik Insert > Data Objects > Repeat Region
- Pastikan Anda memilih Recordset (rsEditBerita) dan Show: 10 at a
time. Klik OK
- Cari tulisan ”Recordset navigation bar”, hapus tulisan tersebut
- Klik Insert > Data Objects > Recordset Paging > Recordset
Navigation Bar.
- Pastikan Anda memilih Recordset (rsEditBerita) dan pilih yang
berformat Text. Klik OK
- Simpan kembali file index.php
Selamat yaaa….!!!
Anda telah menyelesaikan sebuah aplikasi berita sederhana.
SCRIPT FILE AWAL:
index.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Aplikasi Berita</title>
<style type=”text/css”>
<!–
.bawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
}
.konten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
width: 800px;
margin: auto;
padding: 10px;
background-color: #FFF;
}
body {
background-color: #666;
}
–>
</style>
</head>
<body>
<div>
<h1>Aplikasi Berita Sederhana Java Web Media</h1>
<hr/>
<p><a href=”add_berita.php”>Tambah Berita</a> |
<a href=”list_berita.php”>Listing
Berita</a></p><hr/>
<h2>Judul Berita<br/>
<span>Kategori Berita: <em>Kategori</em>, Tanggal
update: <em>Tanggal</em></span></h2>
<p>Isi Berita</p><hr/>
<p>Recordset navigation bar </p>
</div>
</body>
</html>
add_berita.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Aplikasi Berita</title>
<style type=”text/css”>
<!–
.bawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
}
.konten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
width: 800px;
margin: auto;
padding: 10px;
background-color: #FFF;
}
body {
background-color: #666;
}
–>
</style>
</head>
<body>
<div>
<h1>Aplikasi Berita Sederhana Java Web Media</h1>
<hr/>
<h2>Tambah Berita Baru</h2>
<p>Form tambah berita di sini</p>
<hr/>
<a href=”index.php”>Kembali ke halaman utama</a> | <a
href=”list_berita.php”>Listing Berita</a> | <a
href=”add_berita.php”>Tambah Berita </a>
</div>
</body>
</html>
edit_berita.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Aplikasi Berita</title>
<style type=”text/css”>
<!–
.bawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
}
.konten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
width: 800px;
margin: auto;
padding: 10px;
background-color: #FFF;
}
body {
background-color: #666;
}
–>
</style>
</head>
<body>
<div>
<h1>Aplikasi Berita Sederhana Java Web Media</h1>
<hr/>
<h2>Edit Berita</h2>
<p>Form edit berita di sini</p>
<hr/>
<a href=”index.php”>Kembali ke halaman utama</a> | <a
href=”list_berita.php”>Listing Berita</a> | <a
href=”add_berita.php”>Tambah Berita </a></div>
</body>
</html>
list_berita.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Aplikasi Berita</title>
<style type=”text/css”>
<!–
.bawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
}
.konten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
width: 800px;
margin: auto;
padding: 10px;
background-color: #FFF;
}
body {
background-color: #666;
}
–>
</style>
</head>
<body>
<div>
<h1>Aplikasi Berita Sederhana Java Web Media</h1>
<hr/>
<h2>Daftar Berita Terpublikasi</h2>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<th width=”10%” align=”center” valign=”middle” bgcolor=”#CCCCCC”
scope=”col”><h2>No</h2></th>
<th width=”60%” align=”left” valign=”top” bgcolor=”#CCCCCC”
scope=”col”><h2>Detail Berita</h2></th>
<th align=”left” valign=”top” bgcolor=”#CCCCCC”
scope=”col”><h2>Action</h2></th>
</tr>
<tr>
<td width=”10%” align=”center”
valign=”top”><p>id</p></td>
<td width=”60%” align=”left”
valign=”top”><p><strong>Judul
Berita</strong><br/>
Kategori berita: <em>Kategori</em>, Diupdate pada
tanggal: <em>Tanggal</em></p><hr/></td>
<td align=”left” valign=”top”><p><a
href=”edit_berita.php”>Edit</a> | <a
href=”delete_berita.php”>Hapus</a> | <a
href=”detail.php”>Lihat Berita</a></p></td>
</tr>
<tr>
<td colspan=”3″ align=”left” valign=”top”
bgcolor=”#CCCCCC”><hr/>
<blockquote><a href=”index.php”>Kembali ke halaman
utama</a> | <a href=”add_berita.php”>Tambah Berita
Baru</a></blockquote><hr/></td>
</tr>
</table>
<p>Recordset navigation bar</p>
</div>
</body>
</html>
detail.php
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>Detail Judul Berita</title>
<style type=”text/css”>
<!–
.bawah {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
}
.konten {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto;
width: 800px;
margin: auto;
padding: 10px;
background-color: #FFF;
}
body {
background-color: #666;
}
–>
</style>
</head>
<body>
<div>
<h1>Aplikasi Berita Sederhana Java Web Media</h1>
<hr/>
<h2>Detail Judul Berita<br/>
<span>Kategori Berita: <em>Kategori</em>, Tanggal
update: <em>Tanggal</em></span></h2>
<p>Isi Berita</p><hr/>
<p><a href=”edit_berita.php”>Edit Berita Ini</a> |
<a href=”index.php”>Kembali ke halaman utama</a> | <a
href=”add_berita.php”>Tambah Berita</a> | <a
href=”list_berita.php”>Listing Berita</a></p>
</div>
</body>
</html>
File koneksi:
berita_conn.php
<?php
# FileName=”Connection_php_mysql.htm”
# Type=”MYSQL”
# HTTP=”true”
$hostname_berita_conn = “localhost”;
$database_berita_conn = “blogs”;
$username_berita_conn = “root”;
$password_berita_conn = “”;
$berita_conn = mysql_pconnect($hostname_berita_conn,
$username_berita_conn, $password_berita_conn) or
trigger_error(mysql_error(),E_USER_ERROR);
?>
CREATE TABLE IF NOT EXISTS `berita` (`id_post` int(5) NOT NULL
AUTO_INCREMENT,`judul` varchar(500) NOT NULL,`kategori` varchar(100) NOT
NULL,`berita` text NOT NULL,`updated` timestamp NOT NULL DEFAULT
CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,PRIMARY KEY (`id_post`))
ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
