Membuat Program sederhana dengan PHP – MYSQL / Part II

Pada postingan sebelumnya, kita sudah belajar bagaimana membuat database dan tabel sebagai tempat penyimpanan data. Di postingan kali ini, kita akan belajar mengimplementasi CRUD  artikel.

  • Buat folder baru di dalam htdocs anda, dengan nama ‘artikel’

Buat file baru dengan nama ‘index.php’, di dalam file ini kita akan membuat script untuk menampilkan data-data artikel yang tersimpan dalam tabel yang telah kita buat sebelumnya.

<?php
$server 	= "localhost";
$username 	= "root";
$password 	= "";
$database 	= "project";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

$query = mysql_query("SELECT * FROM artikel ORDER BY id_artikel DESC");
?>

<html>
	<head>
		<title>Artikel</title>
	</head>
	<body>
		<h3>Daftar Artikel</h3>
		<table cellpadding="5" cellspacing="5">
			<tr>
				<td>No</td>
				<td>Judul Artikel</td>
				<td>Isi Artikel</td>
				<td>Waktu Posting</td>
				<td>Aksi</td>
			<tr>
			<?php
			$no = 1;
			while($artikel = mysql_fetch_array($query)){
				echo "<tr>";
				echo "<td>$no</td>";
				echo "<td>$artikel[judul]</td>";
				echo "<td>$artikel[isi]</td>";
				echo "<td>$artikel[waktu_posting]</td>";
				echo "<td><a href='edit.php?id=$artikel[id_artikel]'>Edit</a> ||
						  <a href='delete.php?id=$artikel[id_artikel]'>Delete</a></td>";
				echo "</tr>";
				$no++;
			}
			?>
		</table>
		<hr/>
		<br/>
		<a href="tambah.php">Tambah Artikel</a>
	</body>
</html>

Penjelasan:

  1. Script dari line 2-5 adalah inisialisasi untuk connect ke database.
  2. Script dari line 8-9 adalah proses koneksi ke database lokal, bisa kita lihat bahwa server yang kita gunakan adalah server lokal (localhost), dengan username “root”, password kosong, dan nama database “project”.
  3. Script pada line 11, adalah proses pengambilan data dari tabel ‘artikel’. Dilihat dari SELECT FROM artikel…. artikel di sini maksudnya adalah nama tabel yang ingin kita tampilkan datanya.
  4. Script dari line 14-47 adalah proses menampilkan data
  5. Line ke-29 merupakan inisialisasi variabel ‘$no’. Yang nantinya akan ditampilkan sebagai keterangan nomor artikel.
  6. Line ke-30 merupakan proses mengkonversi query yang disimpan dalam variabel ‘$query’ ke dalam bentuk array. Agar data bisa ditampilkan.
  7. Sehingga pada line 32-35 kita bisa memanggil tiap-tiap data artikel dengan cara pemanggilan array, ‘$artikel[judul]’. Ini berarti mengambil data ‘$artikel’ dengan index ‘judul’
  8. Pada line ke-39 ada proses iterasi variabel ‘$no’, ini gunanya agar kolom No pada Daftar Artikel bertambah satu.

Untuk melihat hasilnya, ketikkan ‘localhost/artikel‘ di URL browser anda, maka tampilannya akan seperti berikut ini:

list-artikel

  • Berikutnya kita akan membuat script untuk menambah artikel

Masih dalam folder ‘htdocs/artikel’, buat file baru dengan nama ‘tambah.php‘, lalu ketikkan script berikut:

<?php
$server 	= "localhost";
$username 	= "root";
$password 	= "";
$database 	= "project";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

if(isset($_POST['submit'])){
	$judul 	= $_POST['judul'];
	$isi 	= $_POST['isi'];
	mysql_query("INSERT INTO artikel(judul,isi) VALUES('$judul','$isi')");
	header('location:index.php');
}

?>

<h3>Tambah Artikel</h3>
<form method="POST">
<table>
	<tr>
		<td>Judul</td>
		<td>: <input type="text" name="judul" size="50"></td>
	</tr>
	<tr>
		<td>Isi</td>
		<td>: <textarea name="isi" rows="20" cols="50"></textarea></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="Save" name="submit"></td>
	</tr>
</table>
</form>

Penjelasan:

  1. Line 20-34 adalah script untuk tampilan form artikel
  2. Proses yang terpenting adalah line 11-16. Pada line 11, dilakukan pengecekan: Jika ada(isset) button submit, <input type=”submit” name=”submit” value=”Save” /> maka, jalankan script dibawahnya.
  3. Line 12 adalah inisialisasi ‘judul’ artikel yang dimasukkan oleh user
  4. Line 13 adalah inisialisasi ‘isi’ artikel yang dimasukkan oleh user
  5. Line 14 adalah proses memasukkan data ke tabel artikel (input data)
  6. Line 15 adalah script untuk mengarahkan sistem ke halaman ‘index.php’, yaitu halaman awal (Daftar artikel).

Untuk melihat hasilnya, klik link ‘Tambah Artikel‘ di bagian bawah Daftar Artikel, maka akan muncul tampilan berikut:

tambah-artikel

Untuk test apakah script yang kita buat berjalan atau tidak, coba isi judul dan isi, lalu klik tombol ‘Save’. Jika script sudah benar, maka artikel baru akan ada di Daftar Artikel, seperti berikut:

tambah-artikel-sukses

  • Berikutnya kita akan membuat script untuk mengedit artikel

Masih dalam folder ‘htdocs/artikel’, buat file baru dengan nama ‘edit.php‘, lalu ketikkan script berikut:

<?php
$server 	= "localhost";
$username 	= "root";
$password 	= "";
$database 	= "project";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

$id_artikel = $_GET['id'];
if(isset($id_artikel)){
	$query  = mysql_query("SELECT * FROM artikel WHERE id_artikel = '$id_artikel'");
	$detail = mysql_fetch_array($query);
}

if(isset($_POST['update'])){
	$judul 	= $_POST['judul'];
	$isi 	= $_POST['isi'];
	mysql_query("UPDATE artikel SET judul = '$judul', isi = '$isi' WHERE id_artikel = '$id_artikel'");
	header('location:index.php');
}

?>

<h3>Edit Artikel</h3>
<form method="POST">
<table>
	<tr>
		<td>Judul</td>
		<td>: <input type="text" name="judul" size="50" value="<?php echo "$detail[judul]";?>"></td>
	</tr>
	<tr>
		<td>Isi</td>
		<td>: <textarea name="isi" rows="20" cols="50"><?php echo "$detail[isi]";?></textarea></td>
	</tr>
	<tr>
		<td colspan="2"><input type="submit" value="Update" name="update"></td>
	</tr>
</table>

Penjelasan:

  1. Line 26-40 adalah script untuk menampilkan form artikel.
  2. Line 11-15 adalah script untuk mengambil data artikel sebelumnya (artikel yang ingin kita edit). Nantinya data ini akan ditampilkan di form edit.
  3. Line 17-22 adalah script untuk mengupdate/mengedit data artikel ke database, sesuai dengan inputan user.

Untuk mencoba, klik link ‘Edit’ pada kolom aksi, di Daftar Artikel. Maka akan muncul tampilan berikut:

edit-artikel

Coba ubah judul dan isinya, lalu klik tombol ‘Update’, maka data artikel telah terupdate, berikut tampilannya:

edit-artikel-sukses

Sampai di sini, ada yang bingung? Hehe kalo ada yang kurang jelas dan agak sulit dimengerti, tanyakan saja ya lewat komentar🙂

Kita lanjutkan lagi ya….

  • Sekarang kita akan membuat script untuk menghapus artikel:

Masih di dalam folder ‘htdocs/artikel’, buat file baru dengan nama ‘delete.php‘, dan ketikkan script berikut:

<?php
$server 	= "localhost";
$username 	= "root";
$password 	= "";
$database 	= "project";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

$id_artikel = $_GET['id'];
mysql_query("DELETE FROM artikel WHERE id_artikel = '$id_artikel'"); //delete artikel
header('location:index.php');

Penjelasan:

  1. Line 11, adalah script untuk mengambil ‘id’ atau id_artikel yang ingin kita hapus, sekaligus inisialisasinya ke variabel $id_artikel.
  2. Line 12, adalah script untuk menghapus artikel dari database.

Untuk mencobanya, klik link ‘Delete’ pada kolom aksi di Daftar Artikel, maka artikel yang ingin kita hapus akan terhapus, dan tidak akan tampil di Daftar Artikel. Berikut tampilannya:

delete-artikel

Setelah diklik maka, Artikel Baru Edit akan terhapus dan tidak muncul di Daftar Artikel.

Sukses ga?

Sekian ya postingan kali ini, semoga bermanfaat🙂

11 thoughts on “Membuat Program sederhana dengan PHP – MYSQL / Part II

  1. pak punya saya hasil posting artikelnya jadi 1 paragraf gimana agar pas bikin artikel tanpa perlu menambah script tapi hanya dengan enter ,

    terima kasih mohon bantuannya..

  2. mau nanya nih, kalo mau hapus data apa mesti pake id dari data itu ?? soalnya aku udah baca-baca artikel lainnya , semuanya pake id jika mau hapus data . kalo gak pake id bisa gak ? langsung data dari username sama password aja ?

    terima kasih🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s