This simple code is how to register and log in on my website.
HTML FILE (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration and Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.container {
width: 400px;
margin: 50px auto;
border: 1px solid #ddd;
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
.message {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration</h2>
<div id="register-message" class="message"></div>
<form id="register-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" required>
</div>
<div class="form-group">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" required>
</div>
<div class="form-group">
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" required>
</div>
<div class="form-group">
<label for="birthdate">Birthdate:</label>
<input type="date" name="birthdate" id="birthdate" required>
</div>
<div class="form-group">
<label for="birthplace">Birthplace:</label>
<input type="text" name="birthplace" id="birthplace" required>
</div>
<div class="form-group">
<label for="religion">Religion:</label>
<input type="text" name="religion" id="religion" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select name="gender" id="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit">Register</button>
</form>
<h2>Login</h2>
<div id="login-message" class="message"></div>
<form id="login-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
<script>
$(document).ready(function() {
// Registration form submission via AJAX
$("#register-form").submit(function(e) {
e.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var birthdate = $("#birthdate").val();
var birthplace = $("#birthplace").val();
var religion = $("#religion").val();
var gender = $("#gender").val();
$.ajax({
url: "register.php", // Replace with your actual script path
type: "POST",
data: {
register: true,
username: username,
password: password,
first_name: first_name,
last_name: last_name,
birthdate: birthdate,
birthplace: birthplace,
religion: religion,
gender: gender
},
success: function(response) {
$("#register-message").html(response);
$("#register-form")[0].reset(); // Reset form after successful registration
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("Registration AJAX error:", textStatus, errorThrown);
}
});
});
// Login form submission via AJAX
$("#login-form").submit(function(e) {
e.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "login.php", // Replace with your actual script path
type: "POST",
data: {
login: true,
username: username,
password: password
},
success: function(response) {
$("#login-message").html(response);
// Handle successful login (e.g., redirect to another page)
if (response.indexOf("Welcome") !== -1) {
// Replace with your desired redirection logic
window.location.href = "welcome.html";
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("Login AJAX error:", textStatus, errorThrown);
}
});
});
});
</script>
</body>
</html>
PHP FILE FOR REGISTRATION
(register.php):
<?php
// Check request method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Check if registration request
if (isset($_POST["register"])) {
$username = trim($_POST["username"]); // Trim username
$password = $_POST["password"];
$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$birthdate = $_POST["birthdate"];
$birthplace = $_POST["birthplace"];
$religion = $_POST["religion"];
$gender = $_POST["gender"];
$servername = "ignorethis";
$username = "ignorethis";
$password = "ignorethis";
$dbname = "ignorethis";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE TABLE IF NOT EXISTS users (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
hashed_password VARCHAR(255) NOT NULL,
first_name VARCHAR(50) NOT NULL,
last_name VARCHAR(50) NOT NULL,
birthdate DATE NOT NULL,
birthplace VARCHAR(100) NOT NULL,
religion VARCHAR(50) NOT NULL,
gender VARCHAR(10) NOT NULL
)";
if ($conn->query($sql) === TRUE) {
//echo "Table created successfully<br>"; // Not required for AJAX response
}
// Secure password hashing before storing in database
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
// Insert user data
$sql = "INSERT INTO users (username, hashed_password, first_name, last_name, birthdate, birthplace, religion, gender)
VALUES ('$username', '$hashed_password', '$first_name', '$last_name', '$birthdate', '$birthplace', '$religion', '$gender')";
if ($conn->query($sql) === TRUE) {
$response = "Registration successful!";
} else {
$response = "Error: " . $conn->error;
}
$conn->close();
echo $response; // Send response back to AJAX request
}
}
?>
PHP FILE FOR LOG IN
(login.php):
<?php
// Check request method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Check if login request
if (isset($_POST["login"])) {
$login_username = trim($_POST["username"]); // Trim username
$login_password = $_POST["password"];
$servername = "ignorethis";
$username = "ignorethis";
$password = "ignorethis";
$dbname = "ignorethis";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Validate username existence first
$sql = "SELECT * FROM users WHERE username = '$login_username'";
$result = $conn->query($sql);
if ($result->num_rows == 1) {
$row = $result->fetch_assoc();
$hashed_password = $row["hashed_password"]; // Retrieve hashed password
// Verify password using password_verify (never reverse hash)
if (password_verify($login_password, $hashed_password)) {
// Login successful
$response = "Welcome, " . $row["first_name"] . " " . $row["last_name"] . "!<br>";
} else {
$response = "Invalid login credentials";
}
} else {
$response = "Username not found";
}
$conn->close();
echo $response; // Send response back to AJAX request
}
}
?>
EXPLANATION
The Registration Form is works perfectly then all data inserted is uploaded successfully on database. Upon submitted both forms (register and log in form), the header of respective form display the response through echo from php. (e.g. “Registration Successful”).
Then in log in form, it only allows username and password to log in, then if the username and password is correct, all data on that associated username or id is retrieved.
PROBLEM
My problem is only on log in form, even I have created or already registered any info like “username: user1” and “password: pass1” it says, “Invalid Credentials” to notify you that the function is executed against the statement. I think the problem for this is “password_verify”.
Source: Gemini, the Powerful AI of Google