Wednesday, February 13, 2013

membuat aplikasi berita sederhana berbasis PHP MySQL menggunakan

membuat aplikasi berita sederhana berbasis PHP MySQL menggunakan Dreamweaver

Apr. 22 Dreamweaver, Dynamic Website, PHP MySQL, Web Server, Website 49 comments
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:
  1. Membuat Site Definition di Dreamweaver CS5
  2. 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:
  1. index.php, digunakan untuk menampilkan berita secara keseluruhan
  2. detail.php, digunakan untuk membaca dan melihat detail berita
  3. add_berita.php, digunakan untuk menambah dan menghapus berita
  4. edit_berita.php, digunakan untuk mengedit berita
  5. list_berita.php, digunakan untuk menampilkan listing berita
  6. 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:
  1. Buka file add_berita.php melalui Dreamweaver. Pastikan Anda bekerja dengan Design View
  2. Seleksi tulisan ”Form tambah berita di sini”, lalu hapus tulisan tersebut.
  3. Klik Insert > Data Objects > Insert Record > Record Insertion Form Wizard. Lalu masukkan beberapa parameter berikut ini.
  4. 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.
  5. 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.
  6. Pilih id_post, lalu klik tanda minus (-) karena kita tidak membutuhkannya.
  7. Lakukan hal yang sama pada updated. Kedua field tersebut tidak akan kita butuhkan karena secara otomatis akan digenerate oleh MySQL.
  8. Biarkan field judul sesuai default.
  9. 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.
  10. 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.
  11. Klik pada pada field berita, maka di bagian menu Display as: secara otomatis akan memilih Textfield, ubahlah menjadi Text area sehinggaDisplay as: Text area
  12. Klik OK lalu simpan file add_berita.php tersebut.
  13. 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:
  1. Buka file edit_berita.php melalui Dreamweaver. Pastikan Anda bekerja dengan Design View
  2. 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:
  3. Pada menu Name:, secara otomatis akan muncul tulisan Recordset1, ubahlah menjadi rsEditBerita (maksudnya adalah recordset untuk mengupdate berita, Anda dapat memberi nama yang berbeda).
  4. Lalu Connection: berita_conn, lalu Table: berita.
  5. Pada menu Columns: All, biarkan sesuai default.
  6. 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.
  7. Klik OK jika sudah selesai (Jika muncul peringatan ”A recordset has been added….” klik OK saja.
  8. Anda akan melihat tulisan ”Form edit berita di sini”, hapus tulisan tersebut.
  9. Klik Insert > Data Objects > Update Record > Record Update Form Wizard. Jendela Record Update Form akan muncul, lalu masukkan beberapa parameter ini.
  10. 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.
  11. After updating, go to: list_berita.php, ketik secara manual atau Anda mencari filenya dengan mengklik Browse.
  12. 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.
  13. Klik OK dan simpan kembali file edit_berita.php
  14. 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:
  1. Buka file list_berita.php melalui Dreamweaver. Pastikan Anda bekerja dengan Design View
  2. Lakukan langkah ke 2-5 pada halaman edit_berita.php. Lalu lakukan modifikasi yang berbeda seperti berikut ini.
  3. 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.
  4. Klik OK jika sudah selesai
  5. Pada Design View Anda akan melihat tulisan ”id”, seleksi tulisan tersebut lalu hapus.
  6. Lalu klik Insert > Data Objects > Dynamic Data > Dynamic Text. Jendela Dynamic Text akan muncul. Pada menu Field, Anda akan melihat tulisan Recordset (rsEditBerita).
  7. Klik tanda plus (+), lalu pilih id_post (yang bertanda petir). Klik OK jika sudah selesai.
  8. 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.
  9. Lalu lakukan hal yang sama sesuai fieldnya untuk Kategori dan Tanggal
  10. Di sini Anda akan melihat tulisan Edit yang sudah ada linknya menujuedit_berita.php.
  11. Selesik tulisan Edit tersebut, lalu Klik Kanan > Change Link. WindowSelect File akan muncul.
  12. Carilah menu URL: dan Parameters. Klik Parameters. WindowParameters link akan muncul.
  13. 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.
  14. Klik OK sebanyak tiga kali untuk menyelesaiakan penambahan dynamic link.
  15. Seleksi tulisan ”Lihat Berita”, di sana sudah ada link menuju detail.php.
  16. Ulangi langkah 12-13 untuk menyelesaikan dynamic link ini.
  17. 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.
  18. Lakukan langkah ke-12. HATI-HATI PADA LANGKAH KE-19, DI SINI ANDA AKAN MENTRANSFER PARAMETER LINK BERNILAI hapus.
  19. 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.
  20. Seleksi kode di bawah ini (lihat nomor 21)
  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>
  22. Klik Insert > Data Objects > Repeat Region
  23. Pastikan Anda memilih Recordset (rsEditBerita) dan Show: 10 at a time. Klik OK
  24. Cari tulisan ”Recordset navigation bar”, hapus tulisan tersebut
  25. Klik Insert > Data Objects > Recordset Paging > Recordset Navigation Bar.
  26. Pastikan Anda memilih Recordset (rsEditBerita) dan pilih yang berformat Text. Klik OK
  27. Simpan file list_berita.php.
  28. Anda telah berhasil menyelesaikan file list_berita.php

delete_berita.php

Ini berisi script untuk menghapus berita. Berikut langkah-langkahnya:
  1. Klik File > New > Create
  2. Simpan nama file tersebut dengan nama delete_berita.php
  3. Klik Insert > Data Objects > Delete Record. Jendela Delete Record akan keluar. Masukkan beberapa parameter ini.
  4. 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)
  5. 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.
  6. After deleting, go to: list_berita.php (atau dengan klik Browse untuk mencari file tersebut).
  7. Klik OK jika sudah selesai.
  8. Simpan file delete_berita.php

detail.php

Halaman detail berita akan kita gunakan untuk menampilkan detail per-item berita. Berikut ini langkah-langkahnya:
  1. Buka file detail.php melalui Dreamweaver
  2. Buatlah Recordset seperti pada file edit_berita.php (langkah ke-2 sampai ke-7)
  3. Hapus tulisan ”Detail judul berita”
  4. 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.
  5. Pilih field judul yang bertanda petir lalu klik OK
  6. Lakukan hal yang sama untuk kategori, updated dan berita (dengan menghapus terlebih dahulu tulisan Kategori, Tanggan dan Isi Berita.
  7. MySQL secara umum tidak dapat membaca paragraph dengan baik. Untuk mengatasi hal ini, PHP telah menyediakan fasilitas nl2br (New Line to Break).
  8. 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.
  9. Simpan kembali file detail.php
  10. Anda telah selesai mengerjakan file detail.php

index.php

Pada file ini, Anda akan melihat listing semua berita. Untuk mengerjakannya ikuti langkah berikut ini:
  1. Buka file index.php melalui Design View
  2. Buat Recordset baru seperti pada file list_berita.php (lihat langkah ke-2 sampai dengan ke-4)
  3. Lakukan langkah seperti pada file detail.php (lihat langkah ke-3 sampai dengan ke-8)
  4. 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.
  5. Pilih file detail.php
  6. Carilah menu URL: dan Parameters. Klik Parameters.WindowParameters link akan muncul.
  7. 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.
  8. Klik OK sebanyak tiga kali untuk menyelesaiakan penambahan dynamic link.
  9. Cari kode berikut ini (lihat nomor 10)
  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>&nbsp;<?php echo nl2br($row_rsEditBerita['berita']); ?></p><hr/>
  11. Klik Insert > Data Objects > Repeat Region
  12. Pastikan Anda memilih Recordset (rsEditBerita) dan Show: 10 at a time. Klik OK
  13. Cari tulisan ”Recordset navigation bar”, hapus tulisan tersebut
  14. Klik Insert > Data Objects > Recordset Paging > Recordset Navigation Bar.
  15. Pastikan Anda memilih Recordset (rsEditBerita) dan pilih yang berformat Text. Klik OK
  16. 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 ;

Diposkan oleh di

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)