In this article we will see how to create web login, logout and dashbord .
Using the php, html, css languages.
Follow the steps create admin login page.
Install in the xamp application in your system.
Create a database name of Registration.
After enter how much colums you want.
>Here is Register page html code:
Save it index.html file.
<form action="index-login.php" method="post">
<h3>Personal Information</h3>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
<br>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<br>
<label for="state">State:</label>
<select id="state" name="state">
<option value="andhra_pradesh">Andhra Pradesh</option>
</select>
<br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<br>
<label for="phone">Phone:</label>
<input type="int" id="phone" name="phone" required>
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Register</button>
</form>
Registration form style code.
>Here is the css code.
pre {
font-family: 'Courier New', monospace;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
overflow-x: auto; /* Enable horizontal scrolling if needed */
white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
h3 {
color: #555;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
margin-bottom: 10px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Here its store the user input data in databse using the php code.
>Here is the php login page code.
Save it index-login.php file
<?php
$fullname = $_POST["fullname"];
$gender = $_POST["gender"];
$dob = $_POST["dob"];
$state = $_POST["state"];
$address = $_POST["address"];
$phone = $_POST["phone"];
$email = $_POST["email"];
$password = $_POST["password"];
$host = "localhost";
$dbname = "Registration";
$username = "root";
$password = "";
$conn = mysqli_connect(hostname: $host,
username: $username,
password: $password,
database: $dbname);
if (mysqli_connect_error()) {
die("Connection error : " .mysqli_connect_error());
}
$sql = "INSERT INTO root(fullname,gender,dob,state, address, phone, email, password)
VALUES(?, ?, ?, ?, ?, ?, ?, ?)";
$stmt = mysqli_stmt_init($conn);
if( ! mysqli_stmt_prepare($stmt, $sql)) {
die(mysqli_error($conn));
}
mysqli_stmt_bind_param($stmt, "ssississ",
$fullname,
$gender,
$dob,
$state,
$address,
$phone,
$email,
$password);
mysqli_stmt_execute($stmt);
echo "Record saved. ";
echo '<script>alert("Registration successful.");</script>';
// Redirect back to the registration page after a short delay
header("refresh:0.3;url=index.html");
?>
After creation of Registretion from page. Login page using the user name and phone number .
login page html code show in below.
Save it login page code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="logins.php" method="post">
<label for="fullname">fullname:</label>
<input type="text" id="fullname" name="fullname" required>
<br>
<label for="phone">phone:</label>
<input type="phone" id="phone" name="phone" required>
<br>
<button type="submit">Login</button>
</form>
</body>
</html>