Bootstrap MySQL PHP

Membuat Fasilitas Buku Tamu dengan PHP, MySQLi dan Bootstrap

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.

struktur-folder-buku-tamu

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:

Jika sudah sobah akan mendapakan beberapa tabel seperti gambar di bawah ini:

table-buku-tamu

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:

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:

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:

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.

About the author

Fatoni

Programming is my hobby, not my job.

6 Comments

Leave a Comment