Ask a New Question
Menu

<!doctype HTML>

<html lang="en">

<?php
include('navbar.php');
session_start();
include('DBConn.php');
?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastimes - Admin Verify</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<?php
// Handle "Accept" or "Decline" action
if (isset($_POST['accept'])) {
$userId = $_POST['userId'];

// Update user to be verified (set verified = 1)
$updateQuery = "UPDATE tblUser SET verified = 1 WHERE user_id = ?";
$stmt = mysqli_prepare($conn, $updateQuery);
mysqli_stmt_bind_param($stmt, 'i', $userId);

if (mysqli_stmt_execute($stmt)) {
echo "<script>alert('User verified successfully!');</script>";
} else {
echo "<script>alert('Error verifying user: " . mysqli_error($conn) . "');</script>";
}
mysqli_stmt_close($stmt);
}

if (isset($_POST['delete'])) {
$userId = $_POST['userId'];

// Remove user from the table
$deleteQuery = "DELETE FROM tblUser WHERE user_id = ?";
$stmt = mysqli_prepare($conn, $deleteQuery);
mysqli_stmt_bind_param($stmt, 'i', $userId);

if (mysqli_stmt_execute($stmt)) {
echo "<script>alert('User deleted successfully!');</script>";
} else {
echo "<script>alert('Error deleting user: " . mysqli_error($conn) . "');</script>";
}
mysqli_stmt_close($stmt);
}

if (isset($_POST['revoke'])) {
$userId = $_POST['userId'];

// Update user to be unverified (set verified = 0)
$revokeQuery = "UPDATE tblUser SET verified = 0 WHERE user_id = ?";
$stmt = mysqli_prepare($conn, $revokeQuery);
mysqli_stmt_bind_param($stmt, 'i', $userId);

if (mysqli_stmt_execute($stmt)) {
echo "<script>alert('User revoked successfully!');</script>";

} else {
echo "<script>alert('Error revoking user: " . mysqli_error($conn) . "');</script>";
}
mysqli_stmt_close($stmt);
}

// Fetch all users
$query = "SELECT * FROM tblUser";
$result = mysqli_query($conn, $query);

if ($result) {
while ($userRow = mysqli_fetch_assoc($result)) {
echo '<div>';
echo 'First Name: ' . $userRow['first_name'] . ' - Last Name: ' . $userRow['last_name'] . ' - Username: ' . $userRow['username'] . ' - Address: ' . $userRow['address'] . ' - ' . ($userRow['verified'] ? 'Verified' : 'Not Verified');

// Create a form with action buttons
echo '<form method="POST" style="display:inline-block;">';
echo '<input type="hidden" name="userId" value="' . $userRow['user_id'] . '">';
if (!$userRow['verified']) {
echo '<button type="submit" name="accept">Accept</button>';
echo '<button type="submit" name="delete">Delete</button>';
} else {
echo '<button type="submit" name="revoke">Revoke</button>';
}
echo '</form>';

echo '</div><br>';
}
} else {
echo "Error in query: " . mysqli_error($conn);
}

// Close the connection
mysqli_close($conn);
?>

</body>
</html>

use the css styling sheet to fix the format of this web page

1 answer

To improve the visual formatting of your HTML webpage, we can add some CSS styles to enhance the layout, typography, and responsiveness of the elements. Below is a basic CSS stylesheet that you can include in your style.css file to achieve a cleaner and more user-friendly look:

CSS (style.css)

/* General Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;  /* Light background color */
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;  /* Dark text color */
    text-align: center;
}

/* Container for user entries */
.user-container {
    max-width: 800px;
    margin: 0 auto;  /* Centering the container */
    padding: 20px;
    background-color: #fff;  /* White background for contrast */
    border-radius: 8px;  /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
}

/* Individual user entry styles */
.user-entry {
    display: flex;  /* Flexbox for horizontal alignment */
    justify-content: space-between;  /* Space out items */
    align-items: center;  /* Center alignment */
    padding: 10px;
    border-bottom: 1px solid #ddd;  /* Separation between entries */
}

.user-entry:last-child {
    border-bottom: none;  /* Remove border from the last child */
}

/* Button styles */
button {
    padding: 8px 12px;
    margin-left: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

button[name="accept"] {
    background-color: #28a745;  /* Green button for acceptance */
    color: white;
}

button[name="delete"] {
    background-color: #dc3545;  /* Red button for deletion */
    color: white;
}

button[name="revoke"] {
    background-color: #ffc107;  /* Yellow button for revocation */
    color: black;
}

button:hover {
    opacity: 0.9;  /* Slightly transparent on hover */
}

HTML Modifications

You will also need to apply some classes to your HTML structure so that the styles are reflected correctly. Here's how to modify your PHP code that generates the user entries:

if ($result) {
    echo '<div class="user-container">'; // Start user container
    while ($userRow = mysqli_fetch_assoc($result)) {
        echo '<div class="user-entry">'; // User entry class
        echo 'First Name: ' . $userRow['first_name'] . ' - Last Name: ' . $userRow['last_name'] . ' - Username: ' . $userRow['username'] . ' - Address: ' . $userRow['address'] . ' - ' . ($userRow['verified'] ? 'Verified' : 'Not Verified');

        // Create a form with action buttons
        echo '<form method="POST" style="display:inline-block;">';
        echo '<input type="hidden" name="userId" value="' . $userRow['user_id'] . '">';
        if (!$userRow['verified']) {
            echo '<button type="submit" name="accept">Accept</button>';
            echo '<button type="submit" name="delete">Delete</button>';
        } else {
            echo '<button type="submit" name="revoke">Revoke</button>';
        }
        echo '</form>';
        
        echo '</div>'; // Close user entry
    }
    echo '</div>'; // Close user container
} else {
    echo "Error in query: " . mysqli_error($conn);
}

Summary

  • CSS file: The provided CSS styles enhance the background, text, layout, and button styles for better aesthetics.
  • HTML modifications: Implementing the appropriate class names will help your CSS apply correctly to each user entry.

Once you apply these styles and modifications, your webpage should look more organized and visually appealing. Feel free to adjust the styles to better fit your desired design!