Untuk membuat buku tamu (guestbook) dengan PHP dan MySQL caranya sangat mudah sekali. Dengan membaca tutorial dibawah ini, saya yakin anda bisa mempraktekkannya dengan mudah. Banyak sekali manfaat yang bisa kita dapatkan dengan membuat buku tamu dalam website anda. Salah satunya yaitu bisa anda gunakan sebagai media komunikasi antara anda dengan pengunjung website. Selain itu, membuat buku tamu dapat membuat tampilan website anda menjadi lebih profesional. Show
Lalu, bagaimana cara membuat buku tamu dengan PHP dan MySQL? Sebelum ke tutorial membuat buku tamu dengan PHP dan MySQL ada beberapa requirements yang harus anda penuhi.
Ya, pada tutorial ini saya akan memanfaatkan framework CSS bootstrap agar tampilan website anda menjadi lebih menarik tanpa perlu membuat design dengan kode CSS. Untuk anda yang belum mengerti tentang bootstrap anda bisa membaca tutorial ini Cara menggunakan bootstrap untuk pemula. Baca Juga:
Seteleh mendownload bootsrap lalu ekstrak dan buat struktur foldernya seperti pada gambar dibawah ini: Tutorial Membuat Buku TamuMembuat Database di MySQL Sebelum membuat buku tamu, sebaiknya kita membuat database di mysql dengan nama db_bukutamu. Lalu dump query sql berikut: CREATE TABLE `bukutamu` ( `id` int(11) NOT NULL, `tanggal` date NOT NULL, `nama` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `website` varchar(50) NOT NULL, `judul` varchar(50) NOT NULL, `pesan` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; Jika sudah, maka akan terbentuk data seperti pada gambar berikut: Membuat Koneksi PHP ke Database Untuk koneksi kita menggunakan MySQLi, dikarenakan MySQL sudah tidak support lagi dengan PHP 5.5 keatas, sudah deprecated. buat file dengan nama config.php letakkan sejajar dengan folder bootstrap seperti pada gambar diatas. lalu masukkan kode dibawah ini pada file config.php <?php //mengabaikan pesan Notice error_reporting(E_ALL ^ (E_NOTICE)); //melakukan koneksi ke database dengan MySQLi $koneksi = new mysqli("localhost", "root", "", "db_bukutamu"); if($koneksi->connect_errno) { echo "Gagal melakukan koneksi ke MySQL: " . $koneksi->connect_error; } ?> Pada line ke-6 adalah database credentials anda. Jadi pastikan user dan password yang anda masukkan benar. Jika database mysql anda tidak menggunakan password, maka kosongkan saja.
Membuat Halaman Buku Tamu pada tahap ini, kita akan membuat tampilan halaman utama dan di halaman ini akan ditampilkan form buku tamu dan 5 data terakhir buku tamu. Buat file baru dengan nama index.php dan ketikkan script di bawah ini: <?php include("config.php"); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Buku Tamu || TutorialPedia.NET</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">TUTORIALPEDIA</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="index.php">Beranda</a></li> <li><a href="data.php">Data Buku Tamu</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container" style="margin-top: 50px"> <h1>Tulis Buku Tamu!</h1> <hr /> <form class="form-horizontal" method="post" action="index.php"> <div class="form-group"> <label class="col-sm-2 control-label">NAMA LENGKAP</label> <div class="col-sm-4"> <input type="text" name="nama" class="form-control" placeholder="tutorialpedia" required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">EMAIL</label> <div class="col-sm-4"> <input type="email" name="email" class="form-control" placeholder="[email protected]" required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">WEBSITE</label> <div class="col-sm-4"> <input type="url" name="website" class="form-control" placeholder="http://www.tutorialpedia.net"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">JUDUL PESAN</label> <div class="col-sm-6"> <input type="text" name="judul" class="form-control" placeholder="Senang banget dengan tutorialpedia.net" required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">ISI PESAN</label> <div class="col-sm-8"> <textarea name="pesan" class="form-control" placeholder="Hai, saya sangat senang dengan tutorial yang ada di tutorialpedia.net. Terima kasih." required></textarea> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-8"> <input type="submit" name="submit" class="btn btn-primary" value="KIRIM PESAN"> </div> </div> </form> <?php //definisikan variabel untuk tiap-tiap inputan $nama = $koneksi->real_escape_string($_POST['nama']); $email = $koneksi->real_escape_string($_POST['email']); $web = $koneksi->real_escape_string($_POST['website']); $judul = $koneksi->real_escape_string($_POST['judul']); $pesan = $koneksi->real_escape_string($_POST['pesan']); $tanggal = date('Y-m-d'); //jika di klik tombol kirim pesan menjalankan script di bawah ini if($_POST['submit']){ $input = $koneksi->query("INSERT INTO bukutamu(tanggal,nama,email,website,judul,pesan) VALUES('$tanggal','$nama','$email','$web','$judul','$pesan')") or die($koneksi->error); if($input){ echo '<div class="alert alert-success">Pesan anda berhasil di simpan!</div>'; }else{ echo '<div class="alert alert-warning">Gagal menyimpan pesan!</div>'; } } ?> <hr /> <h2>5 Buku tamu terakhir</h2> <?php //menampilkan 5 buku tamu terbaru $res = $koneksi->query("SELECT * FROM bukutamu ORDER BY id DESC LIMIT 5") or die($koneksi->error); if($res->num_rows){ while($row = $res->fetch_assoc()){ echo ' <table class="table table-condensed table-striped"> <tr> <th width="150">TANGGAL TULIS</th> <th width="10">:</th> <td>'.$row['tanggal'].'</td> </tr> <tr> <th width="150">NAMA LENGKAP</th> <th width="10">:</th> <td>'.$row['nama'].'</td> </tr> <tr> <th>EMAIL</th> <th>:</th> <td>'.$row['email'].'</td> </tr> <tr> <th>WEBSITE</th> <th>:</th> <td>'.$row['website'].'</td> </tr> <tr> <th>JUDUL PESAN</th> <th>:</th> <td>'.$row['judul'].'</td> </tr> <tr> <th>ISI PESAN</th> <th>:</th> <td>'.$row['pesan'].'</td> </tr> </table> '; } }else{ echo 'Belum ada data buku tamu'; } ?> <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> Penjelasan kode diatas: Baris ke 2 : untuk memasukkan file config.php
Menampilkan Semua data Buku Tamu Buat file dengan nama data.php lalu masukkan script dibawah ini: <?php include("config.php"); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Buku Tamu || TutorialPedia.net</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">TUTORIALPEDIA</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.php">Beranda</a></li> <li class="active"><a href="data.php">Data Buku Tamu</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container" style="margin-top: 50px"> <h1>Data Buku Tamu!</h1> <hr /> <?php //menampilkan data buku tamu $res = $koneksi->query("SELECT * FROM bukutamu ORDER BY id DESC") or die($koneksi->error); if($res->num_rows){ while($row = $res->fetch_assoc()){ echo ' <table class="table table-condensed table-striped"> <tr> <th width="150">TANGGAL TULIS</th> <th width="10">:</th> <td>'.$row['tanggal'].'</td> </tr> <tr> <th width="150">NAMA LENGKAP</th> <th width="10">:</th> <td>'.$row['nama'].'</td> </tr> <tr> <th>EMAIL</th> <th>:</th> <td>'.$row['email'].'</td> </tr> <tr> <th>WEBSITE</th> <th>:</th> <td>'.$row['website'].'</td> </tr> <tr> <th>JUDUL PESAN</th> <th>:</th> <td>'.$row['judul'].'</td> </tr> <tr> <th>ISI PESAN</th> <th>:</th> <td>'.$row['pesan'].'</td> </tr> </table> '; } }else{ echo 'Belum ada data buku tamu'; } ?> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> Penjelasan kode diatas: Baris ke 2 : sama yaitu untuk memasukkan file config.php agar bisa terhubung ke database Sekarang simpan semua perubahan dan jalankan. Selesai! Itulah tutorial tentang Membuat Buku Tamu dengan PHP dan MySQLi. Jika ada yang ingin ditanyakan dengan kode diatas silahkan tinggalkan komentar dibawah ini. Atau menghubungi admin melalui Live Chat di Pojok kanan bawah website ini. PHP Pengenalan OOP pada pemrograman PHP dan ImplementasinyaAdmin - April 23, 2019 Pengenalan OOP pada pemrograman PHP dan Implementasinya - Metode penulisan kode program dalam bahasa pemrograman PHP di bagi menjadi 2 yaitu Prosedural dan Object... Read more PHP Kumpulan Perintah Manipulasi String PHPAdmin - February 14, 2019 Kumpulan perintah manipulasi String PHP - Pada tutorial kali ini kita akan belajar tentang manipulasi string dengan fungsi-fungsi yang ada di PHP. Manipulasi string bertujuan... Read more PHP Panduan Laravel Untuk Pemula Hingga Mahir Lengkap!Admin - February 13, 2019 Panduan Laravel Untuk Pemula - Laravel merupakan Salah Satu Framework Bahasa Pemrograman PHP yang banyak digunakan oleh seorang Programer Indonesia maupun Luar Negeri. Framework Laravel... Read more PHP Tutorial Mengirim dan Membaca Pesan WhatsApp dengan PHPAdmin - January 30, 2019 Tutorial Mengirim dan Membaca Pesan WhatsApp dengan PHP - WhatsApp Messenger merupakan aplikasi pesan lintas platform yang memungkinkan kita bertukar pesan tanpa biaya SMS, karena... Read more PHP Cara Menampilkan List Printer dengan PHPAdmin - September 18, 2018 Pada tutorial sebelumnya saya telah membuat tutorial tentang Cetak data secara langsung dengan PHP. Namun, pada tutorial tersebut kita masih terbatas untuk melakukan pemilihan printer... Read more PHP Tutorial Cetak Data secara Langsung dengan PHPAdmin - September 5, 2018 Tutorial Cetak Data secara Langsung dengan PHP - Pada tutorial php kali ini saya akan memberikan sedikit tutorial tentang bagaimana cara melakukan cetak data secara... Read more 2 Comments
|