Koneksi
PHP dengan MySQL
Berikut
ini tutorial sederhana untuk koneksi PHP dengan database MySQL. Kali ini
kita
akan membuat sebuah aplikasi web dengan PHP untuk menyimpan data Album.
Kira-kira
nanti hasil akhirnya seperti Gambar 1.
Gambar
1 Mini Album
Aplikasi
pada Gambar 1 masih sangat sederhana, nanti bisa teman-teman
kembangkan
sendiri lah,, tapi paling tidak kita bisa jadi tahu gimana caranya
menyambungkan
PHP dengan MySQL untuk 4 proses standar (select, insert, update dan
delete)
data.
Untuk
membuat aplikasi sederhana seperti pada Gambar 1, kita membutuhkan
beberapa
langkah yang harus dilalui supaya selamat sampai tujuan. Jadi kita ibaratkan
saja
kita akan memasak sop buntut, kita kan perlu belanja ke pasar, beli
bahanbahannya,
pulang
ke rumah trus mulai meracik bahan-bahan dan memulai untuk
memasak.
Berikut
ini langkah-langkah untuk membuat aplikasi mini album menggunakan PHP
MySQL:
1.
Kita kan pakai PHP, jadi kita butuh yang namanya web server. Web server ada
macem-macem,,
untuk kali ini kita pakai Apache aja yaw,, saya memakai Wamp
Server
2.0 yang di dalamnya sudah lengkap ada Apache, MySQL dan sudah support
PHP
5.2.8. Kalau belum punya bisa diunduh di http://www.wampserver.com/
2.
Dreamweaver, Netbeans atau Edit Plus untuk berkoding ria dengan PHP. Kalau
tidak
punya
pakai Notepad juga bisa.
3.
Oya satu lagi, kita juga butuh Browser (saya pake Mozilla Firefox).
4.
Setelah semua peralatan siap, coba aktifkan Wamp Server-nya dulu, caranya bisa
dilihat
pada Gambar 2.
Gambar
2 Start Wamp Server
5.
Kalau sudah diaktifkan, nanti akan muncul icon Wamp Server seperti Gambar 3.
Gambar
3 Icon Wamp Server
NB:
Icon Wamp Server yang bentuknya setengah lingkaran yang warnanya kuning.
Kalau
warnanya merah berarti masih non-aktif.
6.
Klik icon Wamp Server-nya lalu pilih phpMyAdmin.
Gambar
4 Menuju ke Halaman phpMyAdmin
7.
Untuk membuka halaman phpMyAdmin bisa pake cara pada Gambar 4, tapi bisa
juga
melalui web Browser kita, caranya buka Mozilla-nya lalu ketikkan:
http://localhost/phpmyadmin/. Nanti akan terbuka sebuah halaman web dengan
tampilan
seperti Gambar 5.
Gambar
5 Halaman phpMyAdmin
8.
Langkah selanjutnya, kita buat dulu database dengan nama db_album. Isikan pada
field
seperti pada Gambar 6.
Gambar
6 Bikin Database db_album
Kemudian
klik tombol Create
9.
Setelah itu kita buat sebuah tabel untuk menyimpan data-data album, caranya
terlihat
pada Gambar 7.
Gambar
7 Buat Tabel tbalbum
Kemudian
klik tombol Go
10.Kita
tambahkan field-field yang diperlukan pada tabel tbalbum yang baru saja kita
buat,
caranya terlihat pada Gambar 8.
Gambar
8 Buat Field pada Tabel tbalbum (1)
Jangan
lupa klik tombol Go
11.Akan
muncul halaman seperti Gambar 9.
Gambar
9 Buat Field pada Tabel tbalbum (2)
Contreng
pada bagian A_I lalu klik Save maka tabel sudah terbentuk.
Gambar
10 Tabel pada db_album
12.Untuk
mengisi data pada tabel tbalbum, coba klik pada tab Insert (lihat Gambar 10)
lalu
isikan datanya dan klik tombol Go.
13.Untuk
melihat tabel tbalbum beserta isi tabelnya, klik tab Browse (lihat Gambar 12).
Gambar
12 Browse Tabel
Gambar
13 Isi Tabel tbalbum
14.Database-nya
sudah siap,, selanjutnya kita koneksikan PHP dengan MySQL-nya.
Caranya
lewat koding. Ketik kodingnya bisa pake Dreamweaver, Netbeans atau pake
Notepad
juga bisa. Ketikkan Kode Program 1.
Kode
Program 1 Koneksi PHP – MySQL
<?php
$host = "localhost";
$username = "root";
$password = "";
$databasename = "db_album";
$connection = mysql_connect($host,
$username, $password) or die("Kesalahan Koneksi ... !!");
mysql_select_db($databasename,
$connection) or die("Databasenya Error");
?>
NB:
untuk username dan password, cara mengecek-nya klik pada tab Previleges
pada
saat pertama kali buka phpMyAdmin (lihat Gambar 14).
Gambar
14 Cek User dan Password pada phpMyAdmin
Simpan
Kode Program 1 dengan nama: db_connect.php, taruh dalam satu folder
(nama
folder: myalbum) lalu simpan pada www directory Wamp Server atau klo
mau
bikin alias dulu juga bisa dan simpan di alias tersebut.
15.Langkah
berikutnya, buatlah sebuah file .php yang nantinya akan di-load pertama
kali
ketika kita membuka aplikasi kita. Caranya ketik saja Kode Program 2.
klik
<?php
$host
= "localhost";
$username
= "root";
$password
= "";
$databasename
= "db_album";
$connection
= mysql_connect($host, $username, $password) or die("Kesalahan Koneksi ...
!!");
mysql_select_db($databasename,
$connection) or die("Databasenya Error");
?>
Kode
Program 2 File Index
Simpan
Kode Program 2 dengan nama: index.php.
File
ini nanti akan di-load pertama kali dan akan menghasilkan halaman seperti
terlihat
pada Gambar 15.
<?php
include
"db_connect.php";
$query=mysql_query
("SELECT * FROM tbalbum",$connection)or die (mysql_error());
$jumlah
= mysql_num_rows($query);
echo
"<html>";
echo
"<head>";
echo
"<link href='style.css' type='text/css' rel='stylesheet'>";
echo
"</head>";
echo
"<title>My Album By Ramos</title>";
echo
"<body>";
echo
"<font color='darkgreen' face='Tahoma' size=3><b><br>My
Albums</b></font><br><br>";
echo
"<a href='add.php' style=\"text-decoration:
none\"><font face='tahoma' size='2'>Add New
Album</font></a><br>";
echo
"<br><table border=\"0\" cellpadding=\"1\"
cellspacing=\"1\" bordercolor=\"blue\"
bgcolor=\"white\">
<tr
bgcolor='brown' height=\"30\"><font color='white'>
<th
align='left'><font color='white' face='Tahoma'
size=2>NO</font></th>
<th
align='left'><font color='white' face='Tahoma'
size=2>Title</font></th>
<th
align='left'><font color='white' face='Tahoma'
size=2>Artist</font></th>
<th
align='left'><font color='white' face='Tahoma'
size=2>Action</font></th>
</tr>";
$j=0;
while
($row=mysql_fetch_array($query)) {
echo
"<tr><td align='left' bgcolor='#CCFF66'>";echo
"<font face='Arial' size=1>";echo
$j+1;echo"</font>";echo"</td>";
echo
"<td align='left' bgcolor='#CCFF66'>";echo "<font
face='Arial' size=1>";echo
$row["title"];echo"</font>";echo"</td>";
echo
"<td align='left' bgcolor='#CCFF66'>";echo "<font
face='Arial' size=1>";echo
$row["artist"];echo"</font>";echo"</td>";
echo"<td
align='left' bgcolor='#CCFF66'>";echo "<a
href='delete.php?id=".$row['id']."'
style=\"text-decoration:
none\" title=\"Delete\"><font face='tahoma'
size='1'>Delete</font></a>
<a href='edit.php?id=".$row['id']."' style=\"text-decoration:
none\"
title=\"Edit\"><font face='tahoma'
size='1'>Edit</font></a>";
$j++;
}
echo"</table>";
echo
"</body>";
echo
"</html>";
?>
Gambar
15 Halaman Index
NB: pada Kode Program 2 pada baris ke 7 terdapat link untuk memanggil
file CSS,
untuk
itu tambahkan juga sebuah file CSS. Buat aja pake Notepad dan ketikkan:
body,html
{
margin:
0 5px;
font-family:
Verdana,sans-serif;
font-size:12px
}
h1 {
font-size:1.4em;
color:
#008000;
}
a {
color:
#008000;
}
th {
text-align:
left;
}
td,
th {
padding-right:
5px;
}
form
dt {
width:
100px;
display:
block;
float:
left;
clear:
left;
}
form
dd {
margin-left:
0;
float:
left;
}
form
#submitbutton {
margin-left:
100px;
}
Simpan
File CSS tersebut dengan nama: style.css dan taruh dalam folder myalbum
pada
www directory Wamp Server kalian.
16.Selanjutnya
kita buat untuk proses Add New Album atau menambahkan album baru.
Untuk
keperluan ini kita membutuhkan sebuah form yang akan digunakan untuk
memasukkan
data albumnya (title dan artist). Untuk itu buatlah sebuah file .php dan
ketikkan
Kode Program 3.
Kode
Program 3 Form Add New Album
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Add
New Album</title>
<link
href="style.css" type="text/css"
rel="stylesheet">
</head>
<body>
<form
action="insert_album.php" method="POST">
<font
face="Tahoma" color="green"
size="3"><b><br>Add New Album</b></font>
<table
align="left">
<tr>
<td><font
face="Tahoma" color="black"
size="2">Title</font></td>
<td>:</td>
<td><input
type="text" name="title" size="30"></td>
</tr>
<tr>
<td><font
face="Tahoma" color="black"
size="2">Artist</font></td>
<td>:</td>
<td><input
type="text" name="artist" size="30"></td>
</tr>
<tr>
<td></td><td></td>
<td><input
type="submit" value="Add">
<font
face="Tahoma" color="green" size="2">
<a
href="index.php"
style="text-decoration:none">BacK</font></a>
</td>
</tr>
</table>
</form>
</body>
</html>
Simpan
Kode Program 3 dengan nama: add.php dan simpan dalam folder myalbum
pada
www directory kalian.
Jika
kalian klik Add New Album, maka akan muncul form untuk menginput data
album
ke dalam database. Lihat Gambar 16.
Gambar
16 Form Add New
Jika
kalian isikan data pada Gambar 16 dan kalian tekan tombol Add, datanya tidak
akan
masuk ke database, karena kita belum membuat koding untuk melakukan
insert
ke tabel tbalbum. Oleh karena itu kerjakan langkah nomor 17.
17.Buat
sebuah file .php lagi, lalu ketikkan Kode Program 4.
Kode
Program 4 Insert Data
<?php
include
"db_connect.php";
$title
= $_POST['title'];
$artist
= $_POST['artist'];
$query=mysql_query
("INSERT INTO tbalbum(title, artist)
VALUES
('$title','$artist')",$connection)or die (mysql_error());
if($query)
{
?>
<script
language="JavaScript">
document.location='index.php'</script>
<?php
}
?>
Simpan
Kode Program 4 dengan nama: insert_album.php, simpan dalam folder
myalbum
yang terletak pada www directory.
Sekarang
coba kita tes untuk menginputkan album baru ke dalam database.
Caranya
ya tinggal ketik aja pada form Add New Album. Lihat nih Gambar 17.
Gambar
17 Add New Album
Setelah
kalian isikan pada textfield-nya, jangan lupa tekan tombol Add, maka data
akan
di-insert ke dalam tabel tbalbum dan setelah itu halaman akan langsung
dialihkan
ke halaman index (mengalihkannya pake Java Script) lihat aja di Kode
Program
4 di baris agak bawah kan ada Java Script-nya kan… Nih hasilnya:
Gambar
18 Halaman Index (Hasil Insert)
Data
baru yang barusan kita tambahkan sudah tersimpan dalam tabel tbalbum.
Kalian
bisa menambahkan album baru lainnya dengan memilih link Add New Album.
18.Kalo
kalian lihat, di halaman index kan ada link Delete dan Edit. 2 link itu ntar
buat
menghapus
dan meng-update album. Kita buat dulu untuk yang delete ya… Lakukan
langkah
nomor 19.
19.Buat
sebuah file .php dan ketikkan Kode Program 5.
Kode
Program 5 Kode untuk Delete Album
<?php
include
"db_connect.php";
$id
= $_GET['id'];
$query
= "DELETE FROM tbalbum WHERE id = $id";
mysql_query($query);
?>
<script
language="JavaScript">
document.location='index.php'</script>
<?php
?>
12
Simpan
Kode Program 5 dengan nama: delete.php, taruh dalam folder myalbum
pada
www directory.
Jika
kita ingin menghapus album, maka kita bisa menggunakan link Delete (misal
kita
ingin menghapus album “Small Town Girl” dari artist “Kellie Pickler”, tinggal
klik
aja
link Delete pada baris album yang akan dihapus):
20.Untuk
fungsi edit album, buat lagi 2 file .php dan ketikkan Kode Program 6 dan
Kode
Program 7.
Kode
Program 6 Edit Album
<?php
include
"db_connect.php";
$id
= $_GET['id'];
$query=mysql_query
("SELECT * FROM tbalbum WHERE id='$id'");
while
($row=mysql_fetch_array($query)){
$title
= $row['title'];
$artist
= $row['artist'];
echo
"<html>";
echo
"<body>";
echo
"<font face='tahoma' color='green' size=4><b>Update
Album</b></font>";
echo
"<table align='left'>";
echo
"<form method=\"post\" action=\"update.php?id=$id\"
enctype='multipart/form-data'>";
echo
"<br>";
echo
"<tr><td><font face='Tahoma' color='black' size=2>Title
</font></td><td>:</td><td><input
type='text' name='title' value='$title'
size='30'> </td></tr>";
echo
"<tr><td><font face='Tahoma' color='black' size=2>Nama
</font></td><td>:</td><td><input
type='text' name='artist' value='$artist'
size='30'> </td></tr>";
echo
"<tr><td></td><td></td><td><font
size='2'><input type='submit' name='submit'
value='Update'/></font></td></tr>";
echo
"</table></form></body></html>";
}
?>
Simpan
Kode Program 6 dengan nama: edit.php dan simpan dalam folder myalbum
pada
www directory kalian. Lanjutkan dengan Kode Program 7.
Kode
Program 7 Update Album
Simpan
Kode Program 7 dengan nama: update.php dan simpan dalam folder
myalbum
pada www directory.
<?php
include
"db_connect.php";
$id
= $_GET['id'];
$title
= $_POST['title'];
$artist
= $_POST['artist'];
$query=mysql_query
("UPDATE tbalbum SET title='$title', artist='$artist' WHERE
id='$id'",$connection)or
die (mysql_error());
if($query)
{
?>
<script
language="JavaScript">
document.location='index.php'</script>
<?php
}
?>
21.Cek
apakah sudah bisa update atau belum, misal kita ingin mengedit album dengan
title
“My World 2.0” dengan artist “Justin Bieber”, klik aja link Edit pada baris
yang
ingin
diedit dan akan muncul form untuk meng-update, ubah yang ingin diubah dan
tekan
tombol Update:
Jika
ingin menjalankan aplikasi ini, pastikan Wamp Server-nya sudah aktif kemudian
buka
browser dan ketikkan alamat: http://localhost/myalbum/
dan tekan enter. Nanti
akan
ditampilkan halaman utamanya (index).
