Deka YuLiarTi: Juni 2012

Tutorial Koneksi PHP - MySQL(PEMROGRAMAN WEB1)

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");

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\">

<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

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>

<title>Add New Album</title>

</head>

<body>

<font face="Tahoma" color="green" size="3"><b><br>Add New Album</b></font>

<tr>

<td><font face="Tahoma" color="black" size="2">Title</font></td>

</tr>

<tr>

<td><font face="Tahoma" color="black" size="2">Artist</font></td>

</tr>

<tr>

</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) {

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

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);

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) {

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

Senin, 11 Juni 2012

Tutorial Koneksi PHP - MySQL(PEMROGRAMAN WEB1)

Tutorial Koneksi PHP - MySQL(PEMROGRAMAN WEB1)