Complete Example of a Student Form Fsing PHP (backend), MySQL...

841 Views

Complete Example of a Student Form Fsing PHP (backend), MySQL (database), and HTML/CSS (frontend)

Posted 2025-08-04 13:24:57 · Uncategorized

1. Project Structure:

student-form/
├── index.html
├── style.css
├── submit.php
└── database.sql

2. `database.sql` – MySQL Database and Table

-- Create the database
CREATE DATABASE IF NOT EXISTS student_db;

-- Use the database
USE student_db;

-- Create student table
CREATE TABLE students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    fullname VARCHAR(100),
    email VARCHAR(100),
    age INT,
    gender ENUM('Male', 'Female', 'Other'),
    course VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. `index.html` – Frontend Form (HTML + CSS link)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Student Registration Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Student Registration</h2>
    <form action="submit.php" method="POST">
      <label>Full Name</label>
      <input type="text" name="fullname" required>

      <label>Email</label>
      <input type="email" name="email" required>

      <label>Age</label>
      <input type="number" name="age" required>

      <label>Gender</label>
      <select name="gender" required>
        <option value="">Select</option>
        <option>Male</option>
        <option>Female</option>
        <option>Other</option>
      </select>

      <label>Course</label>
      <input type="text" name="course" required>

      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>

4. `style.css` – Basic Styling

body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  padding: 50px;
}

.form-container {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input, select, button {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background: #28a745;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background: #218838;
}

5. `submit.php` – Backend Script (PHP)

<?php
// DB connection
$host = "localhost";
$user = "root"; // or your DB username
$pass = ""; // your password
$db = "student_db";

$conn = new mysqli($host, $user, $pass, $db);

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

// Get form data safely
$fullname = $conn->real_escape_string($_POST['fullname']);
$email    = $conn->real_escape_string($_POST['email']);
$age      = (int)$_POST['age'];
$gender   = $conn->real_escape_string($_POST['gender']);
$course   = $conn->real_escape_string($_POST['course']);

// Insert into database
$sql = "INSERT INTO students (fullname, email, age, gender, course)
        VALUES ('$fullname', '$email', $age, '$gender', '$course')";

if ($conn->query($sql) === TRUE) {
    echo "Registration successful!";
} else {
    echo "Error: " . $conn->error;
}

$conn->close();
?>

Final Steps:

Create the MySQL database using the database.sql file (via phpMyAdmin or MySQL CLI).
Place all files in the same folder (inside htdocs for XAMPP or www for WAMP).
Start Apache and MySQL via XAMPP/WAMP.
Open in browser:
http://localhost/student-form/index.html

student-form.zip

If you want enhancements like:

Input validation (JS/PHP)
File upload
Admin panel to view records

Let me know in the comment section, and I’ll build those next.

#php

Please log in to like, share and comment!

Complete Example of a Student Form Fsing PHP (backend), MySQL (database), and HTML/CSS (frontend)

1. Project Structure:

2. `database.sql` – MySQL Database and Table

3. `index.html` – Frontend Form (HTML + CSS link)

4. `style.css` – Basic Styling

5. `submit.php` – Backend Script (PHP)

Final Steps:

Upgrade to Pro

Categories

Read More

Complete Example of a Student Form Fsing PHP (backend), MySQL (database), and HTML/CSS (frontend)

1. Project Structure:

2. database.sql – MySQL Database and Table

3. index.html – Frontend Form (HTML + CSS link)

4. style.css – Basic Styling

5. submit.php – Backend Script (PHP)

Final Steps:

Upgrade to Pro

Categories

Read More

2. `database.sql` – MySQL Database and Table

3. `index.html` – Frontend Form (HTML + CSS link)

4. `style.css` – Basic Styling

5. `submit.php` – Backend Script (PHP)