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:
- 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.
- Kelima, kita akam membuat coding untuk membuat file untuk menyimpan data ke mysql. Nama file yang akan kita buat adalah simpanBukuTamu.php , Sebagai berikut:
- Keenam, kita akan membuat coding untuk membuat file untuk menampilkan data dari hasil inputan, yaitu file lihatBukuTamu.php , Sebagai berikut:
- Ketujuh, kita akan membuat file hapusBukuTamu.php untuk menghapus data yang sudah diinput, sebagai berikut:
- Kedelapan, kita akan membuat file untuk mengubah data jika terjadi kesalahan atau ada perubahan, dengan nama file editBukuTamu.php dan coding sebagai berikut:
- Kesembilan, kita akan membuat file untuk menerima hasil ubah data, yaitu file updateBukuTamu.php dan coding sebagai berikut:
- Terakhir, kita akan mempercantik tampilan menggunakan CSS, dengan nama file style.css dan diletakkan didalam subfolder css. Codingnya 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: ?>
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>
 |
| Gambar form input buku tamu |
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: ?>
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>
 |
| Gambar tampilan buku tamu |
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: ?>
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>
 |
| Gambar form edit bukutamu |
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: ?>
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: }
Karena banyak yang nanyain, boleh deh didownload saja codingnya disini
Update:
lihat demo programnya disini
Jangan lupa komentarnya ya..:)
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
