How to sign up HTML using PHP and validate the message
Step 1: db_user
CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
email VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);Execute the following SQL query to create the users table inside your MySQL database.
Step 2: config.php
After creating the table, we need to create a PHP script in order to connect to the MySQL database server. Let's create a file named "config.php" and put the following code inside it.
<?php
/* Database credentials. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '123456');
define('DB_NAME', 'login_system');
/* Attempt to connect to MySQL database */
$conection_db = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($conection_db === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>Step 3: php_register.php
Let's create another PHP file "register.php" and put the following example code in it. This example code will create a web form that allows users to register themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if the username entered by the user is already taken by another user.
<?php
// Define variables and initialize with empty values
$email = $password = $confirm_password = "";
$email_err = $password_err = $confirm_password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// Validate email
if(empty(trim($_POST["email"])))
{
$email_err = "Please enter a email.";
}
else
{
// Prepare a select statement
$sql = "SELECT id FROM users WHERE email = ?";
if($stmt = mysqli_prepare($conection_db, $sql))
{
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_email);
// Set parameters
$param_email = trim($_POST["email"]);
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt))
{
/* store result */
mysqli_stmt_store_result($stmt);
if(mysqli_stmt_num_rows($stmt) == 1)
{
$email_err = "This email is already taken.";
}
else
{
$email = trim($_POST["email"]);
}
}
else
{
echo "Oops! Something went wrong. Please try again later.";
}
// Close statement
mysqli_stmt_close($stmt);
}
}
// Validate password
if(empty(trim($_POST["password"])))
{
$password_err = "Please enter a password.";
}
elseif
(strlen(trim($_POST["password"])) < 6)
{
$password_err = "Password must have atleast 6 characters.";
}
else
{
$password = trim($_POST["password"]);
}
// Validate confirm password
if(empty(trim($_POST["confirm_password"])))
{
$confirm_password_err = "Please confirm password.";
}
else
{
$confirm_password = trim($_POST["confirm_password"]);
if(empty($password_err) && ($password != $confirm_password))
{
$confirm_password_err = "Password did not match.";
}
}
// Check input errors before inserting in database
if(empty($email_err) && empty($password_err) && empty($confirm_password_err))
{
// Prepare an insert statement
$sql = "INSERT INTO users (email, password) VALUES (?, ?)";
if($stmt = mysqli_prepare($conection_db, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "ss", $param_email, $param_password);
// Set parameters
$param_email = $email;
$param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt))
{
// Redirect to login page
header("location: login.php");
}
else
{
echo "Something went wrong. Please try again later.";
}
// Close statement
mysqli_stmt_close($stmt);
}
}
// Close connection
mysqli_close($conection_db);
}Step 4: sign-up.html
Let's create another PHP file "register.php" and put the following example code in it. This example code will create a web form that allows users to register themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if the username entered by the user is already taken by another user.
<?php
// Include config file
require_once 'config.php';
// Include register file
include 'php_register.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div class="login-form">
<form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign up</h1>
<p>Fill out the form to get started.</p>
</div>
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form" <?= (!empty($email_err)) ? 'has-error' : ''; ?>">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input" name="email"value="<?= $email; ?>" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
</div>
<span class="help-block"><?= $email_err; ?></span>
</div>
<div class="form-group" <?= (!empty($password_err)) ? 'has-error' : ''; ?>">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control" name="password" placeholder="Password" value="<?= $password; ?>">
</div>
<span class="help-block"><?= $password_err; ?></span>
</div>
<div class="form-group" <?= (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
</div>
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" value="<?= $confirm_password; ?>">
</div>
<span class="help-block"><?= $confirm_password_err; ?></span>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signup</button>
</div>
<div class="text-center mb-3">
<p type="submit" class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji