How to develop Projects Using PHP and Mysql
Part 5
Register and login page (
after using bootstrap)
1. Register.php
|
<?php require_once '../database/db_config.php'; session_start(); $name = mysqli_real_escape_string($conn,
trim($_POST['name'])); $email = mysqli_real_escape_string($conn,
trim($_POST['email'])); $password
= trim($_POST['password']); $confirm_password
= trim($_POST['confirm_password']); $phone = mysqli_real_escape_string($conn,
trim($_POST['phone'])); $role = mysqli_real_escape_string($conn,
trim($_POST['role'])); if (empty($name)
|| empty($email) || empty($password) || empty($confirm_password) || empty($role))
{
$errors[] = "All fields except phone are required!"; }
$errors[] = "Invalid email format!"; }
$errors[] = "Invalid phone number!"; }
$errors[] = "Password must be at least 6 characters!"; }
$errors[] = "Passwords do not match!"; }
$admin_check_query = "SELECT id FROM users WHERE role =
'admin'";
$admin_result = mysqli_query($conn, $admin_check_query);
if (mysqli_num_rows($admin_result) > 0) {
$errors[] = "Only one admin is allowed!";
} } $email_result
= mysqli_query($conn, $email_check_query); if (mysqli_num_rows($email_result)
> 0) {
$errors[] = "Email already registered!"; } if (empty($errors))
{
$hashed_password = password_hash($password, PASSWORD_BCRYPT);
$insert_query = "INSERT INTO users (name, email, password, phone,
role)
VALUES
('$name', '$email', '$hashed_password', '$phone', '$role')";
if (mysqli_query($conn, $insert_query)) {
$_SESSION['success'] = "Registration successful!
You can now log in.";
header("Location: login.php");
exit();
} else {
$errors[] = "Registration failed! Please try
again.";
} } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>Register</title> <style>
body {
font-family: 'Arial', sans-serif;
background: url('../assets/images/1.jpeg') no-repeat center
center/cover;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 420px;
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.form-container {
max-height: 350px;
overflow-y: auto;
padding-right: 5px;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.form-group label {
flex: 1;
font-weight: 600;
font-size: 14px;
color: #555;
}
.form-group input,
.form-group select {
flex: 2;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.error, .success {
padding: 10px;
margin-bottom: 10px;
font-size: 14px;
border-radius: 5px;
}
.error {
background: #ffcccc;
border-left: 5px solid red;
color: #a00;
}
.success {
background: #ccffcc;
border-left: 5px solid green;
color: #060;
}
.form-group input:focus {
border-color: #007bff;
outline: none;
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background: #0056b3;
}
.login-link {
text-align: center;
margin-top: 15px;
font-size: 14px;
}
.login-link a {
color: #007bff;
text-decoration: none;
}
.login-link a:hover {
text-decoration: underline;
} </style> </head> <body> <h2>Register</h2>
<div class="error">
<?php foreach ($errors as $error): ?>
<p><?= $error ?></p>
<?php endforeach; ?>
</div> <?php endif;
?> <?php if
(isset($_SESSION['success'])): ?>
<div class="success">
<p><?= $_SESSION['success'] ?></p>
</div>
<?php unset($_SESSION['success']); ?> <?php endif;
?> <div class="form-container">
<form action="register.php" method="POST">
<div class="form-group">
<label for="name">Full
Name:</label>
<input type="text" name="name"
required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email"
required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password"
required>
</div>
<div class="form-group">
<label for="confirm_password">Confirm
Password:</label>
<input type="password" name="confirm_password"
required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="text" name="phone">
</div>
<div class="form-group">
<label for="role">Select
Role:</label>
<select name="role" required>
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit">Register</button>
</form> </div> <p class="login-link">Already
have an account? <a href="login.php">Login here</a>.</p> </div> </body> </html> |
Login.php
|
<?php require_once '../database/db_config.php'; session_start(); if ($_SERVER["REQUEST_METHOD"]
== "POST") { $email = trim($_POST['email']); $password
= trim($_POST['password']); $errors =
[]; //
Validate input fields if (empty($email)
|| empty($password)) {
$errors[] = "Email and Password are required!"; } elseif
(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Invalid email format!"; } if (empty($errors))
{
// Fetch user details from the database
$query = "SELECT * FROM users WHERE email = '$email'";
$result = mysqli_query($conn, $query);
if ($row = mysqli_fetch_assoc($result)) {
// Verify the hashed password
if (password_verify($password, $row['password'])) {
$_SESSION['user_id'] = $row['id'];
$_SESSION['user_name'] = $row['name'];
$_SESSION['user_email'] = $row['email'];
$_SESSION['user_role'] = $row['role'];
// Redirect user based on role
if ($row['role'] === 'admin') {
header("Location:
../admin/admin_dashboard.php");
} else {
header("Location:
../user/user_dashboard.php");
}
exit();
} else {
$errors[] = "Incorrect
password!";
}
} else {
$errors[] = "No account found with this
email!";
} } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>Login</title> <link rel="stylesheet"
href="../assets/css/style.css"> <style>
/* Page Styling */
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex-grow: 1; /* Push footer to the bottom */
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 120px); /* Adjust height between
navbar & footer */
padding: 20px;
}
.login-box {
background: white;
padding: 30px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 100%;
max-width: 400px;
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #333;
}
.error {
color: red;
margin-bottom: 15px;
}
form {
display: flex;
flex-direction: column;
}
label {
text-align: left;
font-weight: bold;
margin: 10px 0 5px;
}
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 15px;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
p {
margin-top: 10px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
} </style> </head> <body> <?php include '../includes/navbar.php';
?> <div class="container"> <div class="login-box">
<h2>Login</h2>
<?php if (!empty($errors)) { ?>
<div class="error">
<?php foreach ($errors as $error) {
echo "<p>$error</p>";
} ?>
</div>
<?php } ?>
<form action="login.php" method="POST">
<label for="email">Email:</label>
<input type="email" name="email" required>
<label for="password">Password:</label>
<input type="password" name="password"
required>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="register.php">Register
here</a>.</p> </div> </div> <?php include '../includes/footer.php';
?> </body> </html> |