Gambar 1. Mockup up Form BukutamuPada kesempatan kali ini, saya ingin berbagi tutorial cara membuat form bukutamu yang sangat simpel dan sederhana dan tentunya semoga tutorial ini bisa memberikan gambaran dan motivasi kepada teman-teman yang sedang atau baru belajar membuat form beserta fungsi insert kedalam database dengan metode yang sangat sederhana dan insya Allah mudah dipahami. untuk membuat bukutamu ini hanya ada 4 parameter saja yaitu nama, email, no hp dan pesan. dan untuk design interface menggunakan html biasa dan tentu nantinya akan ditambahkan CSS untuk mempercantik tampilan ditutorial selanjutnya. teknologi yang saya gunakan untuk bahasa pemrogramman menggunakan HTML dan PHP versi 8, dan untuk database menggunakan MariaDB dan local development environment menggunakan Laragon, tentunya teman-teman boleh menggunakan environment selain laragon diantaranya ada XAMPP, AppServe dll. mari langsung saja kita buat bukutamunya ikuti langkah-langkahnya dengan seksama.
Langkah 1. Membuat Tabel Database
Buatlah sebuah tabel di database MariaDB dengan field yang nama field sebagai berikut, nama, email, no_hp, dan pesan.
CREATE TABLE buku_tamu (
id INT AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(50) NOT NULL,
email VARCHAR(50) NOT NULL,
no_hp VARCHAR(20) NOT NULL,
pesan TEXT NOT NULL
);
Penjelasan langkah pertama Membuat Tabel Database
Langkah pertama dalam membuat aplikasi "Buku Tamu" adalah membuat tabel database menggunakan MariaDB. Pada langkah ini, kita membuat sebuah tabel dengan nama "buku_tamu" yang akan menyimpan informasi dari setiap tamu yang mengisi buku tamu tersebut.
- CREATE TABLE: Ini adalah perintah SQL untuk membuat tabel baru dalam database.
- buku_tamu: Nama tabel yang ingin kita buat. Tabel ini akan digunakan untuk menyimpan data tamu.
- id INT AUTO_INCREMENT PRIMARY KEY: Ini adalah kolom pertama dalam tabel, yaitu kolom untuk ID.
- INT: Tipe data kolom, dalam hal ini Integer, yang berarti angka bulat.
- AUTO_INCREMENT: Ini adalah properti yang akan memberikan nilai unik secara otomatis untuk setiap baris yang ditambahkan ke tabel. Setiap kali baris baru ditambahkan, nilai ID akan otomatis bertambah.
- PRIMARY KEY: Menandakan bahwa kolom ID adalah kunci utama (primary key) untuk tabel ini. Kunci utama adalah kolom yang unik untuk setiap baris data dan akan digunakan untuk mengidentifikasi baris secara unik.
- nama VARCHAR(50) NOT NULL: Ini adalah kolom kedua dalam tabel, yaitu kolom untuk nama tamu.
- VARCHAR(50): Tipe data untuk menyimpan teks dengan panjang maksimum 50 karakter.
- NOT NULL: Menandakan bahwa kolom ini tidak boleh kosong (harus diisi).
- email VARCHAR(50) NOT NULL: Ini adalah kolom ketiga dalam tabel, untuk alamat email tamu.
- VARCHAR(50): Tipe data untuk menyimpan teks dengan panjang maksimum 50 karakter.
- NOT NULL: Menandakan bahwa kolom ini tidak boleh kosong (harus diisi).
- no_hp VARCHAR(20) NOT NULL: Ini adalah kolom keempat dalam tabel, untuk nomor telepon tamu.
- VARCHAR(20): Tipe data untuk menyimpan teks dengan panjang maksimum 20 karakter.
- NOT NULL: Menandakan bahwa kolom ini tidak boleh kosong (harus diisi).
- pesan TEXT NOT NULL: Ini adalah kolom terakhir dalam tabel, untuk pesan atau komentar tamu.
- TEXT: Tipe data untuk menyimpan teks panjang.
- NOT NULL: Menandakan bahwa kolom ini tidak boleh kosong (harus diisi).
Tampilan menjalankan kode SQL untuk membuat tabel buku_tamu pada Phpmyadmin
Tampilan tabel buku_tamu berhasil dibuat setelah menjalankan kode SQL diatas
Langkah 2. Membuat Form HTML
Buatlah form HTML sederhana untuk mengirim data ke PHP. berikut script HTML untuk membuat form bukutamu jangan lupa simpan form ini dalam file dengan nama form_bukutamu.html.
<!DOCTYPE html>
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h2>Form Buku Tamu</h2>
<form action="simpan_bukutamu.php" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="no_hp">Nomor HP:</label><br>
<input type="text" id="no_hp" name="no_hp" required><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" required></textarea><br><br>
<input type="submit" value="Kirim">
<p><a href="tampil_bukutamu.php">Lihat Data Bukutamu</a></p>
</form>
</body>
</html>
Penjelasan langkah kedua dalam membuat form HTML
Untuk buku tamu ini adalah membuat form HTML sederhana yang akan mengirim data yang diinput oleh pengguna ke dalam file PHP yang akan menangani proses penyimpanan data tersebut. Berikut adalah penjelasan singkat terkait dengan script HTML di atas:
- DOCTYPE HTML: Ini adalah deklarasi dokumen HTML untuk menunjukkan versi HTML yang digunakan dalam dokumen.
- <html>: Tag pembuka untuk elemen HTML.
- <head>: Bagian ini berisi informasi-informasi terkait dengan dokumen HTML, seperti judul halaman.
- <title>: Tag ini digunakan untuk menentukan judul halaman yang akan ditampilkan di tab browser.
- <body>: Bagian ini berisi elemen-elemen yang akan ditampilkan di halaman web.
- <h2>: Ini adalah tag untuk membuat heading atau judul level 2. Di sini, digunakan untuk judul "Form Buku Tamu
- <form>: Ini adalah tag untuk membuat sebuah form. Atribut action menentukan ke mana data akan dikirim setelah form disubmit, dalam hal ini adalah ke simpan_bukutamu.php. Atribut method menentukan metode pengiriman data, dalam hal ini menggunakan metode POST.
- <label>: Tag ini digunakan untuk membuat label untuk elemen form yang terkait. Misalnya, "Nama:", "Email:", "Nomor HP:", "Pesan:".
- <input>: Tag ini digunakan untuk membuat field input dalam form. Atribut type menentukan jenis input, seperti text untuk input teks, email untuk input alamat email, dan required digunakan untuk menandakan bahwa field tersebut wajib diisi sebelum form disubmit.
- <textarea>: Tag ini digunakan untuk membuat area teks yang lebih besar, biasanya untuk input teks yang lebih panjang seperti pesan atau komentar.
- <input type="submit">: Ini adalah tombol "Kirim" yang ketika ditekan akan mengirimkan data yang telah diinput oleh pengguna.
- Tambahkan hyperlink ke tampil_bukutamu.php menggunakan tag <a href="tampil_bukutamu.php">
Dengan form ini, pengguna dapat mengisi nama, email, nomor HP, dan pesan pada form, kemudian ketika tombol "Kirim" ditekan, data tersebut akan dikirimkan ke simpan_bukutamu.php untuk diproses lebih lanjut, misalnya disimpan ke dalam database atau diolah sesuai kebutuhan lainnya.
Tampilan Desain form buku tamu
Langkah 3. Membuat File PHP untuk Menyimpan kedalam Database
Buatlah file PHP koneksi database yang akan selalu dipanggil setiap ada file fungsi PHP yang bersangkutan transaksi kedalam database, namakan file tersebut koneksi.php, jangan lupa sesuaikan username, password dan database pada mysqli_connect dengan settingan database local development environment kamu ya!
// Koneksi ke database
$koneksi = mysqli_connect("localhost", "username", "password", "nama_database");
// Periksa koneksi
if (mysqli_connect_errno()) {
echo "Koneksi database gagal: " . mysqli_connect_error();
exit();
}
Buatlah file PHP yang akan digunakan untuk menyimpan data yang dikirim dari form bukutamu ke dalam database. Simpan file ini sebagai simpan_bukutamu.php.
// Koneksi ke database
include "koneksi.php";
// Ambil data dari form buku tamu
$nama = $_POST['nama'];
$email = $_POST['email'];
$no_hp = $_POST['no_hp'];
$pesan = $_POST['pesan'];
// Query untuk menyimpan data
$query = "INSERT INTO buku_tamu (nama, email, no_hp, pesan) VALUES ('$nama', '$email', '$no_hp', '$pesan')";
// Jalankan query
if (mysqli_query($koneksi, $query)) {
echo "Data berhasil disimpan.";
} else {
echo "Error: " . $query . "
" . mysqli_error($koneksi);
}
// Tutup koneksi
mysqli_close($koneksi);
Penjelasan langkah ketiga Membuat File PHP untuk Menyimpan kedalam Database
Langkah 3 dalam membuat form buku tamu adalah membuat file PHP yang akan digunakan untuk menyimpan data yang dikirim dari form ke dalam database. Berikut adalah penjelasan singkat terkait dengan script PHP di atas
- Koneksi ke Database: Pertama, kita membuat koneksi ke database MySQL menggunakan fungsi mysqli_connect(). Dalam contoh ini, kita menggunakan localhost sebagai host, username dan password adalah kredensial untuk mengakses database, dan nama_database adalah nama database yang digunakan.
- Periksa Koneksi: Setelah koneksi dibuat, kita periksa apakah koneksi berhasil atau gagal menggunakan mysqli_connect_errno(). Jika koneksi gagal, pesan error akan ditampilkan.
- Ambil Data dari Form: Data yang dikirimkan dari form sebelumnya akan diambil menggunakan $_POST[] untuk setiap field pada form, yaitu nama, email, no_hp, dan pesan.
- Query untuk Menyimpan Data: Selanjutnya, kita membuat query SQL untuk menyimpan data yang telah diambil ke dalam tabel buku_tamu. Query ini menggunakan perintah INSERT INTO untuk memasukkan data ke dalam tabel sesuai dengan nilai yang telah diambil dari form sebelumnya.
- Jalankan Query: Query yang telah dibuat kemudian dijalankan menggunakan fungsi mysqli_query(). Jika query berhasil dijalankan, maka pesan "Data berhasil disimpan." akan ditampilkan.
- Tutup Koneksi: Terakhir, kita menutup koneksi ke database menggunakan fungsi mysqli_close() untuk menghemat sumber daya server.
Dengan script PHP ini (simpan_bukutamu.php), ketika pengguna mengisi form dan mengklik tombol "Kirim", data yang diisi akan disimpan ke dalam tabel buku_tamu pada database yang telah ditentukan. Pastikan untuk mengganti username, password, dan nama_database sesuai dengan konfigurasi database lokal development environment masing-masing.
Langkah 4. Uji Coba Form Bukutamu
- Pastikan MySQL sudah berjalan dan database serta tabel sudah dibuat.
- Buka file form_bukutamu.html dalam browser.
- Isi form bukutamu dengan data yang sesuai.
- Tekan tombol "Kirim" untuk menyimpan data kedalam database.
Uji coba mengisi form buku tamu dengan data, dan mengirimkannya ke dalam database tabel buku_tamu.
Tampilan pesan yang menunjukan data yang dikirim berhasil disimpan kedalam database
Pengecekan Record data buku tamu di Phpmyadmin yang dikirimkan melalui form bukutamu, terlihat data berhasil disimpan
Penjelasan Singkat
- File form_bukutamu.html berisi form sederhana dengan metode POST yang akan mengirimkan data ke simpan_bukutamu.php saat tombol "Kirim" ditekan.
- File simpan.php akan mengambil data yang dikirimkan, menyimpannya ke dalam database, dan memberikan pesan konfirmasi.
Langkah 5. Tampilan tabel data yang sudah disimpan kedalam database
Pada langkah ini kita akan tampilkan data buku tamu yang sudah tersimpan didalam database dan akan kita tampilkan dalam format tabel HTML, buatlah file dan simpan dengan nama tampil_bukutamu.php, kita akan memulai membuat script yang akan melakukan loop PHP untuk mengulang setiap baris data dan memasukkannya ke dalam baris tabel HTML.
<!DOCTYPE html>
<html>
<head>
<title>Data Buku Tamu</title>
</head>
<body>
<h2>Data Buku Tamu</h2>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
<th>No. HP</th>
<th>Pesan</th>
</tr>
<?php
include "koneksi.php";
// Query untuk mengambil data buku tamu
$sql = "SELECT id, nama, email, no_hp, pesan FROM buku_tamu";
$result = $koneksi->query($sql);
// Tampilkan data dalam tabel
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"] . "</td><td>" . $row["nama"] . "</td><td>" . $row["email"] . "</td><td>" . $row["no_hp"] . "</td><td>" . $row["pesan"] . "</td></tr>";
}
} else {
echo "<tr><td colspan='5'>Tidak ada data</td></tr>";
}
$koneksi->close();
?>
</table>
<p>
<a href="form_bukutamu.html">Kembali ke Form Buku Tamu</a>
</p>
</body>
</html>
Tampilan tabel data buku tamu
Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat form bukutamu simpel, sederhana dan mudah dipahami menggunakan HTML, PHP dan MariaDB. Pastikan untuk memahami setiap bagian dari script yang digunakan. Semoga tutorial ini membantu kamu dalam memahami dasar-dasar pembuatan form buku tamu! Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya dikolom komentar. Selamat mencoba! 🚀
Ingin berdiskusi lebih lanjut tentang topik ini? Bergabunglah dengan grup Telegram Komunitas #TukangBikinWeb, klik link dibawah ini, dan jangan lupa support blog ini dengan klik tombol Trakteer yang berwarna merah dibawah ya, terima kasih
