Connecting a database to a web application is a fundamental process for creating dynamic and interactive websites. Databases store and manage the data your application relies on, ensuring smooth user experiences and efficient functionality. This guide provides a detailed, step-by-step explanation of how to connect a database to your web application.

Step 1: Understand Your Project Requirements.

  • install xamp server.
  • chose a text editor like a notepad, or sublime text editor.
  • now to xamp folder and open htdos folder
  • make basantlogon folder.

In basantlog folder make this files

Code for project

<?php
$servername =”localhost”;
$username =”root”;
$password =””;
$dbname =”learn”;
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ($conn) {
// echo “Connection successful”;
} else {
echo “Connection failed: ” . mysqli_connect_error();
}

?>

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>register</title>
<link rel=”stylesheet” type=”text/css” href=”css/register.css”>
   
</head>
  <div class=”container”>
  <div class=”title”>Login form </div>
  <hr>
  <div class=”form”> 
  <form action=”” method=”POST”>
  <div class=”input_field”>
  <label>First Name</label>
  <input type=”text” placeholder=”Enter your name” required name=”first_name”>
  </div>
  <div class=”input_field”>
  <label>Last Name</label>
  <input type=”text” placeholder=”Enter your name” required name=”last_name”>
    </div>
  <div class=”input_field”>
  <label>Email</label>
  <input type=”text” placeholder=”Enter your email” required name=”email”>
  </div>
  <div class=”input_field”>
  <label>password</label>
  <input type=”text” placeholder=”Enter your password” required name=”password”>
  </div>
  <div class=”input_field”>
  <label>Conform password</label>
  <input type=”text” placeholder=”Enter your conform password” required name=”cpassword”>
  </div>
  <div class=”input_field”>
  <label>Date of Birth</label>
  <input type=”Date” required name=”dobb”>
  </div>
  <div class=”input_field”>
  <label>Gender</label>
  <select name=”gender”>
  <option>Male</option>
  <option>Femail</option>
  </select>
  </div>
  <div class=”input_field”>
  <label>phone</label>
  <input type=”text” placeholder=”Enter your Phone” required name=”phone”>
  </div>
  <div class=”input_field”>
  <label>Address</label>
  <input type=”text” placeholder=”Enter your Address” required name=”address”>
  </div>
        <div class=”input_field”>
 
 
</div>
 
  <div class=”input_field”>
  <input type=”submit” name=”register” value=”Register” class=”btn”>
  </div>
  <div class=”input_field”>
  <p>Have already an Account<a href=”login.php”>Login Here</p>
  </div>
 
 
  </form>
  </div>
 
  </div>
<body>
 
</body>
</html>
<?php
error_reporting(0);
include(“connection.php”);
if($_POST[‘register’])
  {
$first_name =$_POST[‘first_name’];
$last_name =$_POST[‘last_name’];
$email =$_POST[’email’];
$password =$_POST[‘password’];
$cpassword =$_POST[‘cpassword’];
$dobb =$_POST[‘dobb’];
$gender =$_POST[‘gender’];
 
$phone =$_POST[‘phone’];
$address =$_POST[‘address’];
 
if ($password!== $cpassword) {
echo “Passwords do not match!”;
exit();
}
   $query = “INSERT INTO users (first_name, last_name, email, password, cpassword,dobb, gender, phone, address) VALUES(‘$first_name’ ,’$last_name’,’$email’, ‘$password’, ‘$cpassword’,’$dobb’,’$gender’, ‘$phone’, ‘$address’)”;
    $data = mysqli_query($conn, $query);
    if ($data) {
    //echo “Data send into databse”;
    }
    else {
    echo “sothing worng”.mysql_error($conn);
    }
}
 
?>

/* Google Font Import */
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap’);

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
/* Body Styling */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #74b9ff, #6c5ce7);
padding: 20px;
}
.container{
width: 100%;
max-width: 700px;
padding: 20px;
box-shadow:0px 5px 15px rgba(0, 0, 0, 0.2); ;
background: white;
border-radius: 20px;
border: 2px solid black;
margin: 20px auto;
}
.title{
font-size: 22px;
font-weight: 600;
color: darkorange;
text-align: center;
margin-bottom: 20PX;
}
/* Form Styling */
.form{
display: flex;
flex-direction: column;
gap: 12px;
}
.input_field {
display: flex;
flex-direction: column;
text-align: left;
}

.input_field label {
font-size: 20px;
font-weight: 500;
color: #333;
margin-bottom: 5px;
}
.input{
width: 100%;
padding: 20px;
font-size: 25px;
border: 1px solid #ccc;
border-radius: 5px;
transition: 0.3s;
}
.input_field p{
text-align: center;
font-size: 20px;
font-weight: 500;
color: #333;
margin-bottom: 5px;
}

.input: focus{
border-color: #6c5ce7;
outline: none;
box-shadow: 0px 0px 5px rgba(108, 92, 231, 0.5);
}
select {
width: 100%; /* Ensures full width */
padding: 5px;
border-radius: 5px;
font-size: 14px;
border: 1px solid #ccc;
}
.check {
display: flex;
align-items: center;
gap: 10px;
width: 25px;
height: 25px;
margin-top: 10px;
border-radius: 10px solid;

}
.btn{
background:#6c5ce7;
color: white;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
font-weight: 500;
margin-top: 10px;
}

.btn:hover {
background: #4834d4;
}

/* Responsive Design */
@media (max-width: 450px) {
.container {
max-width: 100%;
}
}

Register.php out put

Inserted data

Post Views: 126
Scroll to Top