langkah langkah membuat form buku tamu di website sekolah

 1. Buat File css-bukutamu.php

simpan di dalam folder c://xampp/htdocs/smk-digital.sch.id/css/css-bukutamu.php

 gambar 1. struktur folder css-bukutamu.php

nama file : css-bukutamu.php

<style>

    * {

      box-sizing: border-box;

      font-family: 'Segoe UI', Tahoma, sans-serif;

    }

    body {

      margin: 0;

      background: #f4f6f9;

      color: #333;

    }

    header {

      background: linear-gradient(135deg, #0d47a1, #1976d2);

      color: white;

      padding: 15px 30px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      flex-wrap: wrap;

    }

    .logo-box {

      display: flex;

      align-items: center;

      gap: 10px;

    }

    .logo img {

      width: 55px;

      height: auto;

    }

    nav a {

      color: white;

      text-decoration: none;

      margin: 0 12px;

      font-weight: 500;

    }

    nav a:hover {

      text-decoration: underline;

    }

    .hero {

      background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),

                  url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;

      color: white;

      padding: 80px 20px;

      text-align: center;

    }

    .hero h1 {

      font-size: 38px;

      margin-bottom: 10px;

    }

    .hero p {

      font-size: 18px;

      margin-bottom: 25px;

    }

    section {

      padding: 50px 20px;

      max-width: 1100px;

      margin: auto;

    }

    section h2 {

      text-align: center;

      margin-bottom: 30px;

      color: #0d47a1;

    }

    /* INFO BOX */

    .info-box {

      background: #e3f2fd;

      padding: 25px;

      border-radius: 12px;

      margin-bottom: 40px;

      line-height: 1.7;

    }

    .info-box ul {

      padding-left: 18px;

    }

    /* FORM */

    .form-container {

      background: white;

      padding: 35px 25px;

      border-radius: 12px;

      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      max-width: 900px;

      margin: auto;

    }

    .form-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

      gap: 18px;

    }

    .form-group {

      display: flex;

      flex-direction: column;

    }

    .form-group label {

      font-weight: 600;

      margin-bottom: 6px;

    }

    .form-group input,

    .form-group select,

    .form-group textarea {

      padding: 10px;

      border-radius: 6px;

      border: 1px solid #ccc;

      font-size: 14px;

    }

    .form-group textarea {

      resize: vertical;

      min-height: 80px;

    }

    .form-group input:focus,

    .form-group select:focus,

    .form-group textarea:focus {

      outline: none;

      border-color: #1976d2;

    }

    .form-full {

      grid-column: 1 / -1;

    }

    .btn-submit {

      background: #1976d2;

      color: white;

      border: none;

      padding: 12px 20px;

      border-radius: 6px;

      font-size: 16px;

      font-weight: bold;

      cursor: pointer;

      transition: 0.3s;

      width: 100%;

      margin-top: 15px;

    }

    .btn-submit:hover {

      background: #0d47a1;

    }

    footer {

      background: #0d47a1;

      color: white;

      text-align: center;

      padding: 15px;

      margin-top: 50px;

      font-size: 14px;

    }

    @media (max-width: 600px) {

      .hero h1 {

        font-size: 30px;

      }

    }

  </style>

2. Buat script form buku tamu di halaman index.php

<?php include"css/css-bukutamu.php"; ?>

    <center><h2>Buku Tamu</h2></center>

    <div class="form-container">

      <form action="proses-btamu.php" method="post">

        <div class="form-grid">

          <div class="form-group">

            <label>Nama Lengkap</label>

            <input type="text" name="nama" required>

          </div>

          <div class="form-group">

            <label>E-mail</label>

            <input type="text" name="email" required>

          </div>

          <div class="form-group">

            <label>Nomor HP/WA</label>

            <input type="text" name="nomor_hp" required>

          </div>

          <div class="form-group form-full">

            <label>Pesan</label>

            <textarea name="pesan" required></textarea>

          </div>

        </div>

        <button type="submit" class="btn-submit">Kirim</button>

      </form>

    </div>

3. buat halaman / file dengan nama proses-btamu.php

<?php

$host = "localhost";

$user = "root";

$pass = "";

$db   = "smk_digital";

$koneksi = mysqli_connect($host, $user, $pass, $db);

if (!$koneksi) {

  die("Koneksi gagal: " . mysqli_connect_error());

}

$nama      = $_POST['nama'];

$email     = $_POST['email'];

$nomor_hp  = $_POST['nomor_hp'];

$pesan     = $_POST['pesan'];

$query = "INSERT INTO tb_bukutamu  

          (nama, email, nomor_hp, pesan)

          VALUES

          ('$nama','$email','$nomor_hp','$pesan')";

if (mysqli_query($koneksi, $query)) {

  echo "<script>alert('Berhasil Terkirim'); window.location='index.php';</script>";

} else {

  echo "Gagal menyimpan data: " . mysqli_error($koneksi);

  echo "<script>alert('Gagal terkirim'); window.location='index.php';</script>";

}

?>

4. buat tabel dengan nama : tb_bukutamu

CREATE TABLE tb_bukutamu (

    id INT AUTO_INCREMENT PRIMARY KEY,

    nama VARCHAR(100) NOT NULL,

    email VARCHAR(100) NOT NULL,

    nomor_hp VARCHAR(20) NOT NULL,

    pesan TEXT NOT NULL,

    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

);