Halooo... apa kabar semua,, sekarang saya akan memberikan sedikit tutorial untuk menjelaskan tentang materi hubungan antara database dengan php. Sebelum memulai, ada beberapa hal yang harus disiapkan, yaitu server (php, mysql), dan tentunya editor web, bisa menggunakan Adobe Dreamweaver atau Notepad ++, dan yang lainnya. Kira-kira ada 10 langkah yang akan kita lakukan, sabar yahh :D yuk kita mulai...!!
- Pertama, kita akan membuat beberapa file dan folder. Folder yang akan kita buat adalah folder bukutamu sebagai folder root dan beberapa folder didalamnya, sehingga tampak sebagai berikut.
 |
| Gambar susunan folder |
- Kedua, kita akan menyiapkan database di dalam phpmyadmin dengan rincian:
- nama database : db_latihan
- nama tabel : tbl_bukutamu
- primary key : id_bukutamu
- struktur tabel sebagai berikut:
 |
| Gambar sttruktur tabel |
- Ketiga, kita buat dulu file koneksi.php untuk menjembatani/mengirim data dari php ke mysql. Sebagai berikut:
1: <?php
2: $server = "localhost";
3: $username = "root";
4: $password = "password";
5: $database = "db_latihan";
6: $koneksi = mysql_connect($server,$username,$password) or die ('Koneksi gagal');
7: if($koneksi){
8: mysql_select_db($database) or die ('Database belum dibuat');
9: }
10: ?>
- Keempat, kita akan membuat coding untuk membuat form inputan dengan nama tambahBukuTamu.php , yang terdiri dari 3 label, 2 input (text), 1 text area, dan 2 tombol button, serta 1 link.
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head>
3: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4: <link rel="stylesheet" href="css/style.css" media="screen">
5: <title>Buku Tamu</title>
6: </head>
7: <body>
8: <div id="wrapper">
9: <form action="simpanBukuTamu.php" method="post" name="frmBukuTamu">
10: <table border="0" align="center" width="100%">
11: <caption>Buku Tamu</caption>
12: <tr>
13: <td>Nama</td>
14: <td>:</td>
15: <td><input type="text" name="nama" required="required" /></td>
16: </tr>
17: <tr>
18: <td>Email</td>
19: <td>:</td>
20: <td><input type="email" name="email" required="required" /></td>
21: </tr>
22: <tr>
23: <td valign="top">Pesan</td>
24: <td valign="top">:</td>
25: <td><textarea name="isi" cols="30" rows="15"></textarea></td>
26: </tr>
27: <tr>
28: <td> </td>
29: <td></td>
30: <td><input type="submit" name="proses" value="Kirim" class="button">
31: <input type="reset" name="batal" value="Batal" class="button">
32: <a href="lihatBukuTamu.php" class="button">Lihat Buku Tamu</a>
33: </td>
34: </tr>
35: </table>
36: </form>
37: </div>
38: </body>
39: </html>
Kira kira akan menghasilkan tampilan sebagai berikut:  |
| Gambar form input buku tamu |
- Kelima, kita akam membuat coding untuk membuat file untuk menyimpan data ke mysql. Nama file yang akan kita buat adalah simpanBukuTamu.php , Sebagai berikut:
1: <?php
2: include "koneksi.php";
3: $nama = $_POST['nama'];
4: $email = $_POST['email'];
5: $isiPesan = $_POST['isi'];
6: $input = mysql_query("insert into tbl_bukutamu values ('','$nama','$email','$isiPesan')",$koneksi);
7: if($input){
8: ?>
9: <script language="javascript">
10: alert('Berhasil menambahkan');
11: document.location="lihatBukuTamu.php";
12: </script>
13: <?php
14: }else{
15: ?>
16: <script language="javascript">
17: alert('Gagal menambahkan');
18: window.back();
19: </script>
20: <?php
21: }
22: ?>
- Keenam, kita akan membuat coding untuk membuat file untuk menampilkan data dari hasil inputan, yaitu file lihatBukuTamu.php , Sebagai berikut:
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head>
3: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4: <link rel="stylesheet" href="css/style.css" media="screen">
5: <title>Daftar Buku Tamu</title>
6: <script>
7: //membuat fungsi konfirmasi sebelum didelete
8: function konfirmasi(nama){
9: tanya = confirm('PERHATIAN !!! \n Anda akan menghapus " '+ nama + ' " \n Lanjutkan ?');
10: if (tanya == true)
11: return true;
12: else
13: return false;
14: };
15: </script>
16: </head>
17: <body>
18: <div id="wrapper_2">
19: <table border="0" width="100%" cellpadding="0" cellspacing="0">
20: <caption>Tampil Buku Tamu</caption>
21: <tr>
22: <th>No</th>
23: <th>Nama</th>
24: <th>Email</th>
25: <th>Isi</th>
26: <th>Aksi</th>
27: </tr>
28: <?php
29: include "koneksi.php";
30: $no=1;
31: $ambil_data = mysql_query("select * from tbl_bukutamu order by id_bukutamu desc",$koneksi);
32: while($hasil_data = mysql_fetch_array($ambil_data)){
33: ?>
34: <tr>
35: <td><?=$no;?></td>
36: <td><?=$hasil_data['nama'];?></td>
37: <td><?=$hasil_data['email'];?></td>
38: <td><?=$hasil_data['isi'];?></td>
39: <td>
40: <a href="hapusBukuTamu.php?id=<?=$hasil_data['id_bukutamu'];?>" class="button" onclick="return konfirmasi('<?=$hasil_data[nama];?>')"> Hapus </a>
41: <a href="editBukuTamu.php?id=<?=$hasil_data['id_bukutamu'];?>" class="button"> Edit </a>
42: </td>
43: </tr>
44: <?php
45: $no++;
46: }
47: ?>
48: </table>
49: <a href="tambahBukuTamu.php">Tambah Buku Tamu</a>
50: </div>
51: </body>
52: </html>
Kira-kira akan menghasilkan tampilan sebagai berikut:  |
| Gambar tampilan buku tamu |
- Ketujuh, kita akan membuat file hapusBukuTamu.php untuk menghapus data yang sudah diinput, sebagai berikut:
1: <?php
2: include "koneksi.php";
3: $hapus_data = mysql_query("delete from tbl_bukutamu where id_bukutamu = '$_GET[id]'",$koneksi);
4: if($hapus_data){
5: ?>
6: <script language="javascript">
7: alert('Berhasil menghapus');
8: document.location="lihatBukuTamu.php";
9: </script>
10: <?php
11: }else{
12: ?>
13: <script language="javascript">
14: alert('Gagal menghapus');
15: document.location="lihatBukuTamu.php";
16: </script>
17: <?php
18: }
19: ?>
- Kedelapan, kita akan membuat file untuk mengubah data jika terjadi kesalahan atau ada perubahan, dengan nama file editBukuTamu.php dan coding sebagai berikut:
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head>
3: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4: <link rel="stylesheet" href="css/style.css" media="screen">
5: <title>Buku Tamu</title>
6: </head>
7: <body>
8: <?php
9: include "koneksi.php";
10: $ambil_data = mysql_query("select * from tbl_bukutamu where id_bukutamu = '$_GET[id]'",$koneksi);
11: $hasil_data = mysql_fetch_array($ambil_data);
12: $hasil_id = $hasil_data['id_bukutamu'];
13: $hasil_nama = $hasil_data['nama'];
14: $hasil_email = $hasil_data['email'];
15: $hasil_isi = $hasil_data['isi'];
16: ?>
17: <div id="wrapper">
18: <form action="updateBukuTamu.php" method="post" name="frmBukuTamu">
19: <input type="hidden" name="id" value="<?=$hasil_id;?>">
20: <table border="0" align="center" width="100%">
21: <caption>Buku Tamu</caption>
22: <tr>
23: <td>Nama</td>
24: <td>:</td>
25: <td><input type="text" name="nama" required="required" value="<?=$hasil_nama;?>"/></td>
26: </tr>
27: <tr>
28: <td>Email</td>
29: <td>:</td>
30: <td><input type="email" name="email" required="required" value="<?=$hasil_email;?>"/></td>
31: </tr>
32: <tr>
33: <td valign="top">Pesan</td>
34: <td valign="top">:</td>
35: <td><textarea name="isi" cols="30" rows="15"><?=$hasil_isi;?></textarea></td>
36: </tr>
37: <tr>
38: <td> </td>
39: <td></td>
40: <td><input type="submit" name="proses" value="Kirim" class="button">
41: <input type="reset" name="batal" value="Batal" class="button">
42: <a href="lihatBukuTamu.php" class="button">Lihat Buku Tamu</a>
43: </td>
44: </tr>
45: </table>
46: </form>
47: </div>
48: </body>
49: </html>
Kira-kira akan menghasilkan tampilan sebagai berikut:  |
| Gambar form edit bukutamu |
- Kesembilan, kita akan membuat file untuk menerima hasil ubah data, yaitu file updateBukuTamu.php dan coding sebagai berikut:
1: <?php
2: include "koneksi.php";
3: $nama = $_POST['nama'];
4: $email = $_POST['email'];
5: $isiPesan = $_POST['isi'];
6: $update = mysql_query("update tbl_bukutamu set nama='$nama', email='$email', isi='$isiPesan' where id_bukutamu ='$_POST[id]'",$koneksi);
7: if($update){
8: ?>
9: <script language="javascript">
10: alert('Berhasil mengubah');
11: document.location="lihatBukuTamu.php";
12: </script>
13: <?php
14: }else{
15: ?>
16: <script language="javascript">
17: alert('Gagal menghapus');
18: window.back();
19: </script>
20: <?php
21: }
22: ?>
- Terakhir, kita akan mempercantik tampilan menggunakan CSS, dengan nama file style.css dan diletakkan didalam subfolder css. Codingnya sebagai berikut:
1: *{
2: margin:0;
3: padding:0;
4: }
5: #wrapper {
6: margin:50px auto;
7: padding:5px;
8: border:#999 solid 3px;
9: width:450px;
10: border-radius:10px;
11: box-shadow:#CCC 7px 7px 7px;
12: }
13: #wrapper_2 {
14: margin:50px auto;
15: padding:5px;
16: border:#999 solid 3px;
17: width:760px;
18: border-radius:10px;
19: box-shadow:#CCC 7px 7px 7px;
20: }
21: td{
22: border-top:#CCC solid 1px;
23: padding:2px;
24: height:35px;
25: }
26: th{
27: background-color:#999;
28: text-align:left;
29: }
30: caption{
31: font-family:"Courier New", Courier, monospace;
32: font-size:18px;
33: font-weight:bold;
34: }
35: a {
36: background-image: linear-gradient(to bottom,#2a95c5,#21759b);
37: background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
38: background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
39: background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
40: background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
41: background-color: #2e9fd2;
42: width: 86px;
43: min-width:86px;
44: height: 30px;
45: vertical-align: middle;
46: padding:5px;
47: color: #fff;
48: text-decoration: none;
49: border: 1px solid transparent;
50: border-radius: 5px;
51: }
52: .button {
53: background-image: linear-gradient(to bottom,#2a95c5,#21759b);
54: background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
55: background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
56: background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
57: background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
58: background-color: #2e9fd2;
59: width: 86px;
60: height: 30px;
61: vertical-align: middle;
62: color: #fff;
63: text-decoration: none;
64: border: 1px solid transparent;
65: border-radius: 5px;
66: cursor:pointer;
67: }
68: caption{
69: border-bottom:#CCC solid 1px;
70: padding:2px;
71: height:35px;
72: }
Ok, sampai disini dulu, yang belum jelas silahkan tanya via komentar. Terimakasih :D
