This demo uses the POST method to pass an ID value between pages. The ID value is not visible in the URL, as it's handled via a form submission. You can increase or decrease the ID by submitting the form.
Current ID = 0
<?php
include('includes/header.php'); // Include header (if any)
error_reporting(E_ALL); // Enable error reporting for debugging
// Initialize the 'id' variable, default to 0 if not set via POST
$id = isset($_POST['id']) ? $_POST['id'] : 0;
// Check if form was submitted to update ID
if (isset($_POST['increase'])) {
$id++;
} elseif (isset($_POST['decrease'])) {
$id--;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Query Demo using POST</title>
<style>
/* Global reset for margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; /* Light background */
display: flex;
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
min-height: 100vh;
color: #333; /* Text color */
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
width: 100%;
max-width: 400px; /* Limit container width */
text-align: center;
}
h1 {
font-size: 2rem;
color: #333;
margin-bottom: 20px;
}
p {
font-size: 1rem;
color: #666;
margin-bottom: 15px;
}
.id-display {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
color: #007BFF; /* Blue color for the ID */
}
form {
display: flex;
justify-content: center; /* Center buttons */
gap: 20px;
}
button {
background-color: #007BFF;
color: white;
font-size: 1rem;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Binita's ID Query Demo using POST</h1>
<p>
This demo uses the POST method to pass an <strong>ID</strong> value between pages.
The ID value is not visible in the URL, as it's handled via a form submission.
You can increase or decrease the ID by submitting the form.
</p>
<p>
Current ID = <span class="id-display"><?php echo($id); ?></span>
</p>
<!-- Form to increase or decrease the ID -->
<form method="POST" action="query-post.php">
<input type="hidden" name="id" value="<?php echo($id); ?>" />
<button type="submit" name="decrease">Decrease ID</button>
<button type="submit" name="increase">Increase ID</button>
</form>
</div>
</body>
</html>
<?php
include('includes/footer.php'); // Include footer (if any)
?>