Script php buku tamu

Question

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>

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>

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>

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
Karena banyak yang nanyain, boleh deh didownload saja codingnya disini

Update:
lihat demo programnya disini

Jangan lupa komentarnya ya..:)

kode php

Script php buku tamu

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social