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 website folder.
- inside web site forder make index.php fileÂ
- inside web site folder make css folder, and inside the css folder make index.css file
Code for project
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb, #2575fc);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Glassmorphic form container */
.form-container {
background: rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
width: 400px;
padding: 40px 30px;
color: #fff;
animation: fadeIn 1s ease-in-out;
}
/* Title */
.title {
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 25px;
text-transform: capitalize;
}
/* Input fields */
form div {
position: relative;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #e0e0e0;
}
input[type=”email”],
input[type=”password”] {
width: 100%;
padding: 12px 40px 12px 15px;
border-radius: 10px;
border: none;
outline: none;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 15px;
}
input::placeholder {
color: #ddd;
}
.fas {
position: absolute;
right: 15px;
top: 38px;
color: #fff;
}
/* Options */
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 14px;
}
.options a {
color: #f1f1f1;
text-decoration: none;
transition: 0.3s;
}
.options a:hover {
color: #ffd369;
}
/* Button */
.btn {
width: 100%;
background: #00c6ff;
background: linear-gradient(45deg, #00c6ff, #0072ff);
border: none;
color: white;
padding: 12px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
transform: translateY(-3px);
background: linear-gradient(45deg, #0072ff, #00c6ff);
}
/* Divider */
.divider {
text-align: center;
margin: 20px 0;
position: relative;
color: #ccc;
font-size: 14px;
}
.divider span {
background: rgba(0, 0, 0, 0.3);
padding: 0 10px;
border-radius: 5px;
}
/* Social buttons */
.social-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-btn {
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
transition: 0.3s;
}
.social-btn.google {
background: #db4437;
}
.social-btn.facebook {
background: #3b5998;
}
.social-btn.apple {
background: #000;
}
.social-btn:hover {
transform: scale(1.1);
}
/* Footer link */
.footer-links {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.footer-links a {
color: #00c6ff;
text-decoration: none;
font-weight: 500;
}
.footer-links a:hover {
text-decoration: underline;
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design */
@media (max-width: 450px) {
.form-container {
width: 90%;
padding: 30px 20px;
}
.title {
font-size: 24px;
}
}
Code for project
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f6f9;
}
/* Sidebar */
.sidebar {
width: 250px;
height: 100vh;
background: #0f1f38;
color: #fff;
position: fixed;
left: 0;
top: 0;
overflow-y: auto;
}
.sidebar .profile {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #223457;
}
.sidebar img {
width: 70px;
height: 70px;
border-radius: 50%;
border: 2px solid #fff;
}
.sidebar h3 {
margin: 10px 0 5px;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
padding: 14px 20px;
cursor: pointer;
border-bottom: 1px solid #1a2d4e;
}
.sidebar ul li i {
margin-right: 10px;
}
.sidebar ul li:hover {
background: #1a2d4e;
}
/* Header */
.header {
margin-left: 250px;
background: #0f1f38;
color: #fff;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Dashboard content */
.content {
margin-left: 250px;
padding: 30px;
}
.table-container {
margin-top: 25px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0px 5px 18px rgba(0,0,0,0.1);
}
<?php
include(“connection.php”);
/* 1. Validate ID */
if (!isset($_GET[‘id’]) || !is_numeric($_GET[‘id’])) {
die(“Invalid user ID”);
}
$id = (int) $_GET[‘id’];
/* 2. Fetch existing user data */
$query = “SELECT * FROM users WHERE id = $id”;
$data = mysqli_query($conn, $query);
if (mysqli_num_rows($data) != 1) {
die(“User not found”);
}
$user = mysqli_fetch_assoc($data);
/* 3. Handle update */
if (isset($_POST[‘update’])) {
$fname = mysqli_real_escape_string($conn, $_POST[‘fname’]);
$lname = mysqli_real_escape_string($conn, $_POST[‘lname’]);
$email = mysqli_real_escape_string($conn, $_POST[’email’]);
$dob = mysqli_real_escape_string($conn, $_POST[‘dob’]);
$gender = mysqli_real_escape_string($conn, $_POST[‘gender’]);
$phone = mysqli_real_escape_string($conn, $_POST[‘phone’]);
$address = mysqli_real_escape_string($conn, $_POST[‘address’]);
$update = “UPDATE users SET
fname = ‘$fname’,
lname = ‘$lname’,
email = ‘$email’,
dob = ‘$dob’,
gender = ‘$gender’,
phone = ‘$phone’,
address = ‘$address’
WHERE id = $id”;
if (mysqli_query($conn, $update)) {
header(“Location: dashboard.php”);
exit;
} else {
$error = “Update failed: ” . mysqli_error($conn);
}
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Update User</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css”>
<link rel=”stylesheet” href=”css/register.css”>
</head>
<body>
<div class=”container”>
<div class=”title”>Update Account</div>
<?php if (isset($error)) echo “<p style=’color:red;’>$error</p>”; ?>
<form method=”post”>
<div class=”input_field”>
<label>First Name</label>
<input type=”text” name=”fname” value=”<?= htmlspecialchars($user[‘fname’]) ?>” required>
</div>
<div class=”input_field”>
<label>Last Name</label>
<input type=”text” name=”lname” value=”<?= htmlspecialchars($user[‘lname’]) ?>” required>
</div>
<div class=”input_field”>
<label>Email</label>
<input type=”email” name=”email” value=”<?= htmlspecialchars($user[’email’]) ?>” required>
</div>
<div class=”input_field”>
<label>Date of Birth</label>
<input type=”date” name=”dob” value=”<?= htmlspecialchars($user[‘dob’]) ?>”>
</div>
<div class=”input_field”>
<label>Gender</label>
<select name=”gender” required>
<option value=”male” <?= ($user[‘gender’]==”male”)?’selected’:” ?>>Male</option>
<option value=”female” <?= ($user[‘gender’]==”female”)?’selected’:” ?>>Female</option>
<option value=”other” <?= ($user[‘gender’]==”other”)?’selected’:” ?>>Other</option>
</select>
</div>
<div class=”input_field”>
<label>Phone</label>
<input type=”text” name=”phone” value=”<?= htmlspecialchars($user[‘phone’]) ?>” required>
</div>
<div class=”input_field”>
<label>Address</label>
<input type=”text” name=”address” value=”<?= htmlspecialchars($user[‘address’]) ?>” required>
</div>
<div class=”input_field”>
<input type=”submit” name=”update” value=”Update” class=”btn”>
</div>
</form>
</div>
</body>
</html>
<?php
include(“connection.php”);
if (!isset($_GET[‘id’]) || !is_numeric($_GET[‘id’])) {
die(“Invalid ID”);
}
$id = (int) $_GET[‘id’];
$query = “DELETE FROM users WHERE id = $id”;
if (mysqli_query($conn, $query)) {
header(“Location: dashboard.php”);
exit;
} else {
echo “Delete failed: ” . mysqli_error($conn);
}
?>
<?php
session_start();
session_unset();
session_destroy();
header(“Location: index.php”);
exit();
?>