Membuat Fasilitas Buku Tamu Dengan PHP

Membuat Fasilitas Buku Tamu
dengan PHP, MySQLi dan

Bootstrap
2 tahun ago
9 Comments
by Fatoni
1.351 Views
Written by Fatoni
Membuat Fasilitas Buku Tamu dengan PHP, MySQLi dan Bootstrap. Bagi sobat
tutorialweb yang aktif baca tutorial di sini pasti sudah tahu kalau dulu sudah pernah ada tulisan
tentang bagaimana cara membuat buku tamu dengan PHP dan MySQL. Nah, sekarang ini ada
tutorial yang sama tentang buku tamu, bedanya sekarang lebih update aja dalam hal template
yang menggunakan bootstrap, dan query yang menggunakan MySQLi dan tentu saja
menggunakan PHP untuk bahasa pemrogramannya.
Disini nanti akan dijelaskan bagaimana membuat fasilitas buku tamu atau bahasa kerennya
guestbook di dalam website sobat, dimana nanti akan ada form untuk pengisian buku tamu,
kemudian di bawah form tersebut akan menampilkan 5 tulisan buku tamu terakhir, dan juga ada
menu di navbar untuk melihat semua isi buku tamu yang pernah di tulis oleh pengunjung website
sobat.
Sebelum dimulai, ada gambar di bawah ini bagaimana struktur folder yang nantinya akan sobat
buat.
Langsung aja ya sob kita mulai tutorialnya.
Persiapan
Pertama karena ini menggunakan framework bootstrap, maka silahkan download dahulu di
website resminya. Bisa klik disini untuk menuju download link.
Setelah di download sobat akan mendapat sebuah file dengan extensi .zip, silahkan di ekstrak
dahulu.
Sekarang sudah ada kan sebuah folder, di dalamnya ada 3 buah folder seperti gambar di atas tadi
(css, fonts, js) 3 folder ini yang dibutuhkan. Silahkan buat folder baru di htdocs (jika
menggunakan xampp) atau di folder www (jika menggunakan appserv).
Database
Setelah itu langsung kita masuk dulu ke bagian database. Buat sebuah database baru,
misal tutorialweb. Kemudian masuk menu SQL dan jalankan query di bawah ini:
SQL
MySQL
1 CREATE TABLE `bukutamu` (
2 `id` int(11) NOT NULL,
3 `tanggal` date NOT NULL,
4 `nama` varchar(50) NOT NULL,
5 `email` varchar(50) NOT NULL,
6 `website` varchar(50) NOT NULL,
7 `judul` varchar(50) NOT NULL,
8 `pesan` text NOT NULL
9 ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Jika sudah sobah akan mendapakan beberapa tabel seperti gambar di bawah ini:
Jika sudah sama persis maka lanjut ke tahap selanjutnya.
Koneksi ke Database
Lanjut kita buat koneksi ke databasenya, koneksi menggunakan mysqli ya sob. soalnya kalau
masih pakek mysql sudah tidak support lagi.
Buat file config.php dan ketikkan script di bawah ini:
config.php
PHP
1 <?php
2 //mengabaikan pesan Notice
3 error_reporting(E_ALL ^ (E_NOTICE));
4
5 //melakukan koneksi ke database dengan MySQLi
6 $koneksi = new mysqli("localhost", "root", "", "tutorialweb");
7 if($koneksi->connect_errno) {
8 echo "Gagal melakukan koneksi ke MySQL: " . $koneksi->connect_error;
9 }
10 ?>
Jangan lupa disimpan ya..
Untuk baris ke 3 ada baris kode error_reporting(E_ALL ^ (E_NOTICE)); ini maksudnya
digunakan untuk mengabaikan pesan kesalahan Notice. Pesan ini bisa di abaikan saja
Halaman Buku Tamu

Tahap ini adalah yang utama yaitu membuat tampilan halaman utama, nanti disini akan
ditampilkan form buku tamu dan 5 data terakhir buku tamu.
Buat file baru dengan nama index.php dan ketikkan script di bawah ini:
index.php
1 <?php
2 include("config.php");
3 ?>
4 <!DOCTYPE html>
5 <html lang="en">
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <title>Buku Tamu || Tutorialweb.net</title>
11
12 <link href="css/bootstrap.min.css" rel="stylesheet">
13
14 
18 </head>
19 <body>
20 <nav class="navbar navbar-default navbar-fixed-top">
21 <div class="container">
22 <div class="navbar-header">
23 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-
24 collapse-1" aria-expanded="false">
25 <span class="sr-only">Toggle navigation</span>
26 <span class="icon-bar"></span>
29 </button>
30 <a class="navbar-brand" href="#">TUTORIALWEB</a>
31 </div>
32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
33 <ul class="nav navbar-nav">
34 <li class="active"><a href="index.php">Beranda</a></li>
35 <li><a href="data.php">Data Buku Tamu</a></li>
36 <li class="dropdown">
37 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
38 expanded="false">Dropdown <span class="caret"></span></a>
39 <ul class="dropdown-menu">
40 <li><a href="#">Action</a></li>
41 <li><a href="#">Another action</a></li>
42 <li><a href="#">Something else here</a></li>
43 <li role="separator" class="divider"></li>
44 <li><a href="#">Separated link</a></li>
46 <li><a href="#">One more separated link</a></li>
47 </ul>
48 </li>
49 </ul>
50 </div>
51 </div>
52 </nav>
53
54 <div class="container" style="margin-top: 50px">
55 <h1>Tulis Buku Tamu!</h1>
56 <hr />
57
58 <form class="form-horizontal" method="post" action="index.php">
59 <div class="form-group">
60 <label class="col-sm-2 control-label">NAMA LENGKAP</label>
61 <div class="col-sm-4">
62 <input type="text" name="nama" class="form-control" placeholder="Tutorialweb" required>
63 </div>
64 </div>
66 <label class="col-sm-2 control-label">EMAIL</label>
68 <input type="email" name="email" class="form-control" placeholder="support@tutorialweb.net" required>
69 </div>
70 </div>
72 <label class="col-sm-2 control-label">WEBSITE</label>
74 <input type="url" name="website" class="form-control" placeholder="http://tutorialweb.net">
75 </div>
76 </div>
78 <label class="col-sm-2 control-label">JUDUL PESAN</label>
80 <input type="text" name="judul" class="form-control" placeholder="Senang banget dengan tutorialweb.net"
81 required>
82 </div>
83 </div>
85 <label class="col-sm-2 control-label">ISI PESAN</label>
87 <textarea name="pesan" class="form-control" placeholder="Hai, saya sangat senang dengan tutorial yang ada
88 di tutorialweb.net. Terima kasih." required></textarea>
89 </div>
90 </div>
92 <label class="col-sm-2 control-label"></label>
94 <input type="submit" name="submit" class="btn btn-primary" value="KIRIM PESAN">
95 </div>
96 </div>
97 </form>
98
99 <?php
100 //definisikan variabel untuk tiap-tiap inputan
101 $nama = $koneksi->real_escape_string($_POST['nama']);
102 $email = $koneksi->real_escape_string($_POST['email']);
103 $web = $koneksi->real_escape_string($_POST['website']);
104 $judul = $koneksi->real_escape_string($_POST['judul']);
105 $pesan = $koneksi->real_escape_string($_POST['pesan']);
106 $tanggal = date('Y-m-d');
107
108 //jika di klik tombol kirim pesan menjalankan script di bawah ini
109 if($_POST['submit']){
110 $input = $koneksi->query("INSERT INTO
111 bukutamu(tanggal,nama,email,website,judul,pesan) VALUES('$tanggal','$nama','$email','$web','$judul','$pesan')") or
112 die($koneksi->error);
113 if($input){
114 echo '<div class="alert alert-success">Pesan anda berhasil di simpan!</div>';
115 }else{
116 echo '<div class="alert alert-warning">Gagal menyimpan pesan!</div>';
117 }
118 }
119 ?>
120
121 <hr />
122 <h2>5 Buku tamu terakhir</h2>
123
124 <?php
125 //menampilkan 5 buku tamu terbaru
126 $res = $koneksi->query("SELECT * FROM bukutamu ORDER BY id DESC LIMIT 5") or
127 die($koneksi->error);
128
129 if($res->num_rows){
130 while($row = $res->fetch_assoc()){
131 echo '
132 <table class="table table-condensed table-striped">
133 <tr>
134 <th width="150">TANGGAL TULIS</th>
135 <th width="10">:</th>
136 <td>'.$row['tanggal'].'</td>
137 </tr>
138 <tr>
139 <th width="150">NAMA LENGKAP</th>
140 <th width="10">:</th>
141 <td>'.$row['nama'].'</td>
142 </tr>
143 <tr>
144 <th>EMAIL</th>
145 <th>:</th>
146 <td>'.$row['email'].'</td>
147 </tr>
148 <tr>
149 <th>WEBSITE</th>
150 <th>:</th>
151 <td>'.$row['website'].'</td>
152 </tr>
153 <tr>
154 <th>JUDUL PESAN</th>
155 <th>:</th>
156 <td>'.$row['judul'].'</td>
157 </tr>
158 <tr>
159 <th>ISI PESAN</th>
160 <th>:</th>
161 <td>'.$row['pesan'].'</td>
162 </tr>
163 </table>
164 ';
165 }
166 }else{
167 echo 'Belum ada data buku tamu';
168 }
169
170 ?>
<p><a class="btn btn-primary btn-sm" href="data.php">Lihat semua data</a></p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Disimpan ya, jangan sampai lupa.
Sedikit penjelasan untuk kode di atas.
Baris ke 2 : untuk memasukkan file config.php

Baris 56 93 : Kode HTML standart untuk form inputan, tentu saja dengan framework bootstrap
Baris 97 102 : mendefinisikan variabel dari inputan form di atas
Baris 105 112 : memulai proses input data ke database, query mysqli
Baris 120 : query ke database untuk menampilkan 5 data terakhir dengan urutan id paling besar
dahulu
Baris 122 : Jika ditemukan data di database, maka data akan di tampilkan
Baris 123 : perulangan while untuk menampilkan data dari query baris ke 120
Baris 124 157 : menampilkan data dari perulangan while di atas, dengan format table bootstrap
Baris 159 : jika query baris 120 tidak ada data maka menampilkan pesan baris ke 160
Selebihkan saya rasa hanya koding biasa tentang HTML.
Menampilkan semua data buku tamu

Untuk menampilkan butu tamu, sudah saya masukkan link pada navbar pada baris ke 34. Yaitu
file yang di buka adalah data.php. Jadi silahkan buat file baru data.php. Dan isinya seperti kode
di bawah ini:
data.php
1 <?php
2 include("config.php");
3 ?>
4 <!DOCTYPE html>
5 <html lang="en">
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <title>Buku Tamu || Tutorialweb.net</title>
11
12 <link href="css/bootstrap.min.css" rel="stylesheet">
13
14 
18 </head>
19 <body>
20 <nav class="navbar navbar-default navbar-fixed-top">
21 <div class="container">
22 <div class="navbar-header">
23 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-
24 collapse-1" aria-expanded="false">
25 <span class="sr-only">Toggle navigation</span>
29 </button>
30 <a class="navbar-brand" href="#">TUTORIALWEB</a>
31 </div>
32 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
33 <ul class="nav navbar-nav">
34 <li><a href="index.php">Beranda</a></li>
35 <li class="active"><a href="data.php">Data Buku Tamu</a></li>
36 <li class="dropdown">
37 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
38 expanded="false">Dropdown <span class="caret"></span></a>
39 <ul class="dropdown-menu">
40 <li><a href="#">Action</a></li>
41 <li><a href="#">Another action</a></li>
42 <li><a href="#">Something else here</a></li>
44 <li><a href="#">Separated link</a></li>
46 <li><a href="#">One more separated link</a></li>
47 </ul>
48 </li>
49 </ul>
50 </div>
51 </div>
52 </nav>
53
54 <div class="container" style="margin-top: 50px">
55 <h1>Data Buku Tamu!</h1>
56 <hr />
57 <?php
58 //menampilkan data buku tamu
59 $res = $koneksi->query("SELECT * FROM bukutamu ORDER BY id DESC") or die($koneksi-
60 >error);
61
62 if($res->num_rows){
63 while($row = $res->fetch_assoc()){
64 echo '
65 <table class="table table-condensed table-striped">
66 <tr>
67 <th width="150">TANGGAL TULIS</th>
68 <th width="10">:</th>
69 <td>'.$row['tanggal'].'</td>
70 </tr>
71 <tr>
72 <th width="150">NAMA LENGKAP</th>
73 <th width="10">:</th>
74 <td>'.$row['nama'].'</td>
75 </tr>
76 <tr>
77 <th>EMAIL</th>
78 <th>:</th>
79 <td>'.$row['email'].'</td>
80 </tr>
81 <tr>
82 <th>WEBSITE</th>
83 <th>:</th>
84 <td>'.$row['website'].'</td>
85 </tr>
86 <tr>
87 <th>JUDUL PESAN</th>
88 <th>:</th>
89 <td>'.$row['judul'].'</td>
90 </tr>
91 <tr>
92 <th>ISI PESAN</th>
93 <th>:</th>
94 <td>'.$row['pesan'].'</td>
95 </tr>
96 </table>
97 ';
98 }
99 }else{
100 echo 'Belum ada data buku tamu';
101 }
102
103 ?>
104 </div>
105
106 <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Silahkan disimpan. Isinya tidak jauh beda dengan file sebelumnya. Jadi akan saya jelaskan
sedikit biar sobat gak bingung.
Baris ke 2 : sama yaitu untuk memasukkan file config.php agar bisa terhubung ke database
Baris ke 57 : query mysqli untuk mendapatkan data dari database dengan urut id paling besar
dahulu
Baris 59 : jika data dari query baris ke 57 ada datanya, maka akan menjalankan baris ke 60 95
Baris 60 : perulangan while untuk menampilkan data dari query baris ke 57
Baris 61 94 : menampilkan data dari perulangan baris ke 60, dan ditampilkan dengan table
bootstrap
Baris 96 : jika dari query baris ke 57 tidak ditemukan data di database, maka menampilkan pesan
di baris 97
Selesai
Lumayan panjang ya.. jadi capek juga..
Saya rasa cukup untuk tutorial membuat buku tamu atau guestbook dengan PHP, MySQLi dan
Bootstrap ini, semoga bisa membantu buat sobat-sobat yang lagi belajar dalam pemrograman
PHP.

Membuat Fasilitas Buku Tamu Dengan PHP

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Fasilitas Buku Tamu Dengan PHP

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Fasilitas Buku Tamu Dengan PHP

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat Fasilitas Buku Tamu

dengan PHP, MySQLi dan

Langsung aja ya sob kita mulai tutorialnya.

Jika sudah sama persis maka lanjut ke tahap selanjutnya.

Buat file config.php dan ketikkan script di bawah ini:

Untuk baris ke 3 ada baris kode error_reporting(E_ALL ^ (E_NOTICE)); ini maksudnya

Halaman Buku Tamu

Sedikit penjelasan untuk kode di atas.

Baris ke 2 : untuk memasukkan file config.php

Selebihkan saya rasa hanya koding biasa tentang HTML.

Menampilkan semua data buku tamu

Lumayan panjang ya.. jadi capek juga..

Anda mungkin juga menyukai