🔧 1.
Create the Database and Table in phpMyAdmin
Open XAMPP → Start Apache and MySQL → Go to http://localhost/phpmyadmin
1. Create a New Database
Once phpMyAdmin opens:
Click the "New" option in the left sidebar.
Under "Create database":
o Enter a database name (e.g., studentdb)
o Choose Collation as utf8_general_ci (or leave as default).
Click Create
✅ You’ve now created a new MySQL database named studentdb.
2. Create a Table inside the Database
After the database is created:
Click on the newly created database name (e.g., studentdb) from the left panel.
Under "Create table", enter:
o Table name: students
o Number of columns: 3
Click Go
3. Define the Table Columns
Fill out the fields as follows:
Column Name Type Length/Values Extra
id INT (leave default) AUTO_INCREMENT (check this)
name VARCHAR 100
email VARCHAR 100
Then:
Set id as Primary Key (check the box under "A_I" or "Primary").
Click Save
✅ Table students is now created with columns: id, name, and email.
2. HTML + CSS Form (index.html)
Save this as index.html in your XAMPP htdocs folder (e.g., C:\xampp\htdocs\form\
index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Insert Student</title>
<style>
body { font-family: Arial; background: #f2f2f2; padding: 50px; }
form { background: white; padding: 20px; border-radius: 5px; width: 300px; margin: auto; }
input[type="text"], input[type="email"] {
width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc;
input[type="submit"] {
background: #4CAF50; color: white; padding: 10px; border: none; width: 100%;
cursor: pointer;
input[type="submit"]:hover { background: #45a049; }
</style>
</head>
<body>
<h2 align="center">Student Registration</h2>
<form action="insert.php" method="POST">
<label>Name:</label>
<input type="text" name="name" required>
<label>Email:</label>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. PHP Script (insert.php)
Save this file as insert.php in the same htdocs/form/ folder:
<?php
// Database configuration
$servername = "localhost";
$username = "root";
$password = ""; // default password in XAMPP is empty
$dbname = "studentdb";
// Create connection
$conn = new mysqli($servername, $username, $password,
$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get values from form
$name = $_POST['name'];
$email = $_POST['email'];
// Insert data into database
$sql = "INSERT INTO students (name, email) VALUES ('$name',
'$email')";
if ($conn->query($sql) === TRUE) {
echo "New record inserted successfully!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
▶️How to Run:
1. Save both files in a folder inside C:\xampp\htdocs\form\
2. Open browser and go to:
http://localhost/form/index.html
3. Fill out the form → Click Submit
4. You should see the success message.
5. Check phpMyAdmin to confirm the data is inserted.
