STEP 1: Add HTML code name it register.php
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Register to our company</h2>
</div>
<form method="post" action="register.php">
<?php include('errors.php');?>
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="<?php echo $username;?>">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $email;?>">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="reg_user">Register</button>
</div>
<p>
Already A Have An Account? <a href="login.php">Sign in</a>
</p>
</form>
</body>
</html>STEP 2: DATABASE CONNECTION
After you have created the registration form, you will need to create a database connection between your form and phpMyadmin, first you need to create a database and name it “Registration”, after that you will need to create a table and name it “members”, to add data to the form you may insert manually the three columns for username, email and password; or just enter this code into your SQL to create your table;
CREATE table members(
id int(11) not null PRIMARY KEY AUTO INCREMENT,
username VARCHAR(255) not null,
email VARCHAR(255) not null,
password int(11) not null,
)After you have created table in your database you may proceed to the next step and create database connection between the form and your table in your phpmyadmin by including the following codes into your text editor and name it as server.php;
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
// REGISTER USER
if (isset($_POST['reg_user'])) {
// receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// form validation: ensure that the form is correctly filled ...
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) { array_push($errors, "Username is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password_1)) { array_push($errors, "Password is required"); }
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// first check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // if user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1);//encrypt the password before saving in the database
$query = "INSERT INTO users (username, email, password)
VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now a member for Learntechphilloh thank you for
registering with us!";
header('location: index.php');
}
}
// LOGIN USER
if (isset($_POST['login_user'])) {
$email = mysqli_real_escape_string($db, $_POST['email']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE email='$email' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['email'] = $email;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong email/password combination");
}
}
}
?>
// ... You can check whether the database have connected successfully using the codes below; which you type into your text editor and name it as; dbconnect.php
if($db){
echo "success";
}else{
die("Error". mysql_connect_error();
}STEP 3: Add Index.php
It will be used to show whether you have already logged in or not, it will give out some notification, so you will add the codes in your text editor as follows and name it index.php;
<?php
session_start();
if (!isset($_SESSION['email'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['email']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Groceries company</h2>
</div>
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<!-- logged in user information -->
<?php if (isset($_SESSION['email'])) : ?>
<p>Welcome! <strong><?php echo $_SESSION['email']; ?></strong></p>
<p> <a href="index.php?logout='1'" style="color: red;">logout</a> </p>
<?php endif ?>
</div>
</body>
</html>STEP 4: CREATE A SIGN IN FORM;
After you have created the index validation, you can now create a sign form, where the already registered members should add their details and login to their accounts, the login form is created using the codes below which are inserted into your text editor and save it as login.php;
<?php include('server.php') ?>
<!DOCTYPE html>
<html>
<head>
<title>Registration form/title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Login to your Acount!</h2>
</div>
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<!--<div class="input-group">
<label>Username</label>
<input type="text" name="username" >
</div>-->
<div class="input-group">
<label>Email</label>
<input type="email" name="email">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="input-group">
<button type="submit" class="btn" name="login_user">Login</button>
</div>
<p>
Don't have an Account? <a href="register.php">Register Now</a>
</p>
</form>
</body>
</html>STEP 5: CHECK ERRORS IN YOUR FORM
You will need to add a file which will be used to check for errors in your whole form, there errors file is added as follows in your text editor, and name it as errors.php
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>STEP 6: ADD CSS CODES
Using css you can format the whole structure of the form and its background, therefore you will add the css codes in your text editor as follows, you may name it as style.css
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: smokewhite;
text-align: center;
border: 1px solid brown;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid brown;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid brown;
margin-bottom: 20px;
}NB: Remember all the php files should be held in folder and give it a particular name such mycompany;
With that you will create a very nice submittable form, thanks for reading through my tutorial see you there in my next tutorial, remember to leave your opinion in the section below and follow my blogs for more updated articles in my channel;