our logo - study4details

comprehensive study approach

HTML, CSS and PHP

To create an HTML form that allows users to search data from a “people” database table based on a Registration Number input and display the query results with specified output elements, you would typically use HTML for the form structure and CSS for styling. Here’s how you can set it up:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search people Database</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Search people Database</h2>
        <form action="search.php" method="GET">
            <label for="classNo">Class Number:</label>
            <input type="text" id="classNo" name="classNo" placeholder="Enter class number...">
            <button type="submit">Search</button>
        </form>
    </div>
</body>
</html>

Explanation:

  • This HTML structure includes a simple form with an input field (classNo) and a submit button (Search).
  • The form is set to submit data using the GET method to a PHP script (search.php).
  • The <link> tag includes a CSS file (styles.css) for styling the form and results.
CSS (styles.css):
cssCopy code.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form {
    display: flex;
    align-items: center;
}

label, input, button {
    margin: 5px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
Explanation:
  • The CSS file (styles.css) styles the form container (div.container) to center it on the page, provide padding, and a border for visual separation.
  • The form (form) and its elements (label, input, button) are styled with margins, padding, background colors, borders, and hover effects to enhance usability.

PHP (search.php)

Assuming you have a PHP script (search.php) that connects to your database and retrieves search results based on the classNo input. Here’s a simplified example:

phpCopy code<?php
// Check if classNo is provided
if (isset($_GET['classNo'])) {
    $classNo = $_GET['classNo'];

    // Perform database query using $classNo
    // Replace with your actual database connection and query logic
    $servername = "localhost";
    $username = "username";
    $password = "password";
    $dbname = "your_database_name";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Example query (you should sanitize input to prevent SQL injection)
    $sql = "SELECT FirstName, MidName, Sirname, EnrollmentDate, Email, MobileNumber, ResidentArea, Fellowship, Teacher, timeAvailable 
            FROM people
            WHERE classNo = '$classNo'";
    $result = $conn->query($sql);

    // Display results in a form
    if ($result->num_rows > 0) {
        echo "<div class='container'>";
        echo "<h2>Search Results</h2>";
        echo "<form>";
        while($row = $result->fetch_assoc()) {
            echo "<label>First Name:</label> <input type='text' value='" . $row["FirstName"] . "' readonly><br>";
            echo "<label>Middle Name:</label> <input type='text' value='" . $row["MidName"] . "' readonly><br>";
            echo "<label>Surname:</label> <input type='text' value='" . $row["Sirname"] . "' readonly><br>";
            echo "<label>Enrollment Date:</label> <input type='text' value='" . $row["EnrollmentDate"] . "' readonly><br>";
            echo "<label>Email:</label> <input type='text' value='" . $row["Email"] . "' readonly><br>";
            echo "<label>Mobile Number:</label> <input type='text' value='" . $row["MobileNumber"] . "' readonly><br>";
            echo "<label>Resident Area:</label> <input type='text' value='" . $row["ResidentArea"] . "' readonly><br>";
            echo "<label>Fellowship:</label> <input type='text' value='" . $row["Fellowship"] . "' readonly><br>";
            echo "<label>Teacher:</label> <input type='text' value='" . $row["Teacher"] . "' readonly><br>";
            echo "<label>Time Available:</label> <input type='text' value='" . $row["timeAvailable"] . "' readonly><br>";
        }
        echo "</form>";
        echo "</div>";
    } else {
        echo "<div class='container'>";
        echo "<p>No results found for Class Number: $classNo</p>";
        echo "</div>";
    }

    $conn->close();
} else {
    echo "<div class='container'>";
    echo "<p>No class number provided.</p>";
    echo "</div>";
}
?>

Explanation:

  • The PHP script (search.php) receives the classNo from the HTML form via $_GET['classNo'].
  • It connects to the database and performs a SQL query (SELECT ... FROM people WHERE classNo = '$classNo') to retrieve data based on the provided classNo.
  • Results are displayed in a styled form using HTML <input> elements set to readonly to prevent editing.

Notes:

  • Security: Always sanitize and validate user input ($classNo) to prevent SQL injection attacks.
  • Database Connection: Ensure your PHP script (search.php) correctly connects to your database and handles errors appropriately.
  • Styling: Customize the CSS (styles.css) to match your design preferences and ensure usability.

This example provides a foundational setup for implementing a search functionality in a web application, retrieving data from a database, and displaying it in a styled form. Adjust the PHP SQL query and HTML structure as per your specific database schema and design requirements.

More posts