Buat
teman-teman terutama
yang sedang kuliah Pengembangan Web, berikut ini
saya
buatkan 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.
Namun untuk
membuat aplikasi pada Gambar 1, kita tidak perlu pergi ke
pasar…
Langsung aja ya
daripada banyak basa-basi….
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.
Klo
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.
Gambar 11 Insert Data
klik
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");
?>
6
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;
}
8
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
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.
<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
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.
<?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.
11
19.Buat
sebuah file .php
dan ketikkan Kode Program 5.
Kode Program 5 Kode untuk Delete Album
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.
<?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
?>
Kode Program 6 Edit Album
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'];
$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>";
}
?>
<?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
}
?>
Simpan Kode Program 7 dengan nama: update.php
dan
simpan dalam folder
myalbum pada www directory.
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).
Ya
pokoknya gitu lah,,
selamat mencoba ya teman-teman,, semoga jadi dan tidak
error.
Hehehe.. Ini hanya
tutorial sederhana untuk select, insert, update dan delete
menggunakan
PHP - MySQL,
ntar bisa teman-teman kembangkan sendiri untuk
membuat
aplikasi web yang
lebih lengkap. Mohon maaf jika ada kata-kata dalam
tutorial
ini yang kurang
berkenan, saya memang tidak pandai dalam merangkai kata…
Hehehe…
Bye bye…
Nama : Deka Yuliarti
Nim : 10.11.400
Kelas : Mi.4e
