bk-tamu.php

<?php

// koneksi
require_once "config/koneksi.php";

// query user
$sql_komentar = mysqli_query($con, "SELECT * FROM komentar ORDER BY id DESC") or die(mysqli_error($con));

?>

<html>

<head>
    <title>Buku Tamu</title>
    <link rel="stylesheet" type="text/css" href="belajar2.css">
</head>

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }

    form {
        width: 400px;
        /* Lebar form sesuai kebutuhan Anda */
        margin: 0 auto;
        /* Untuk mengatur posisi form ke tengah halaman */
        padding: 20px;
        /* Spasi dalam form */
    }


    td {
        padding: 5px;
        /* Spasi dalam sel */
    }

    input[type="text"],
    textarea {
        width: 100%;
        padding: 8px;
        /* Spasi dalam input text dan textarea */
        margin-bottom: 10px;
        /* Jarak antar field */
    }

    input[type="submit"] {
        background-color: #007bff;
        /* Warna latar belakang tombol submit */
        color: #fff;
        /* Warna teks tombol submit */
        padding: 10px 20px;
        /* Spasi dalam tombol submit */
        border: none;
        /* Hapus border tombol submit */
        cursor: pointer;
        /* Ubah kursor menjadi tangan saat mengarahkan ke tombol submit */
    }

    table {
        border-collapse: collapse;
    }

    .tombol {
        display: inline-block;
        padding: 3px 5px;
        background-color: #007bff;
        /* Warna latar belakang tombol */
        color: #fff;
        /* Warna teks tombol */
        text-decoration: none;
        font-size: 12px;
        /* Menghapus garis bawah dari tautan */
        border: none;
        /* Menghapus border */
        border-radius: 5px;
        /* Membuat sudut tombol menjadi agak melengkung */
    }

    /* Gaya saat tombol diklik (opsional) */
    .tombol:hover {
        background-color: #063669;
        /* Warna latar belakang saat tombol dihover */
    }


    /* tabel tamu */
    .tamu {
        border-collapse: collapse;
        width: 100%;
    }

    .tamu th,
    .tamu td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }

    .tamu th {
        background-color: #f2f2f2;
    }

    .tamu tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .tamu tr:hover {
        background-color: #ccc;
    }

    .tamu a {
        text-decoration: none;
    }

    .edit {
        display: inline-block;
        padding: 3px 12px;
        background-color: #007BFF;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
    }

    .hapus {
        display: inline-block;
        padding: 3px 5px;
        background-color: #E92F2F;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
    }

    .edit:hover,
    .hapus:hover {
        background-color: #043161;
    }
</style>


<body>

    <table width="750" style=" border: 1px solid #60A1EB;" border="1" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="200">&nbsp;</td>
            <td colspan="2">
                <a href="index.php" class="tombol">Home</a> ||
                <a href="profile.php" class="tombol">Profile</a> ||
                <a href="kontak.php" class="tombol">Kontak</a> ||
                <a href="bk-tamu.php" class="tombol">Buku Tamu</a>
            </td>
        </tr>

        <tr>
            <td colspan="3">
                <marquee>Tidak ada kata terlambat untuk memulai hal baru.</marquee>
            </td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td width="500" style="padding: 10px;"><strong>
                    <h1>DAFTAR TAMU</h1>
                </strong>

                <table border="1" class="tamu">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Email</th>
                            <th>Komentar</th>
                            <th style="text-align:center;">Aksi</th>
                        </tr>
                    </thead>

                    <tbody>

                        <?php if (mysqli_num_rows($sql_komentar) > 0) { ?>
                            <?php
                            $i = 1;
                            while ($row = mysqli_fetch_array($sql_komentar)) { ?>

                                <tr>
                                    <td><?= $i ?>.</td>
                                    <td><?= $row['nama'] ?></td>
                                    <td><?= $row['email'] ?></td>
                                    <td><?= $row['komentar'] ?></td>
                                    <td>
                                        <a href="edit_bk_tm.php?id=<?= $row['id'] ?>" class="edit">Edit</a>
                                        <hr>
                                        <a href="hapus.php?id=<?= $row['id'] ?>" onclick="return confirm('apakah yakin akan menghapus data ini..?')" class="hapus">Hapus</a>
                                    </td>
                                </tr>

                            <?php $i++;
                            } ?>
                        <?php } ?>

                    </tbody>
                </table>

            </td>
            <td width="75">
                <img src="ikon/hello.gif" alt="">
            </td>
        </tr>

        <tr>
            <td colspan="3">
                <center>Copyright @ 2023 by Humaidi Zakaria, A.Md</center>
            </td>
        </tr>
    </table>
</body>

</html>