Sign Up

Tutorial to create a login system using HTML, PHP, and MySQL

This is a tutorial for creating a login system with the help of HTML, PHP, and MySQL. Your website needs to be dynamic and your visitors need to have instant access to it. Therefore, they want to log in as many times as possible. The login authentication system is very common for any web application. It allows registered users to access the website and members-only features. It is also helpful when we want to store information for users. It covers everything from shopping sites, educational sites, and membership sites, etc.

This tutorial is covered in 4 parts.

Table of Contents

1) Building a Signup system

In this part, We will create a signup system that allows users to create a new account to the system. Our first step is to create a HTML registration form. The form is pretty simple to create. It only asks for a name, email, password, and confirm password. Email addresses will be unique for every user. Multiple accounts for the same email address are not allowed. It will show an error message to the users who try to create multiple accounts with the same email address.

Step 1: Creating Registration Form in HTML

We will create a PHP file named register.php with the following code in it. This is a simple HTML form with some basic validation. If you are not familiar with HTML then you can get it from many online sites who give ready-made html5 login form templates.

       
 
 
Register
 
Please fill this form to create an account.
 
 
Full Name 
Email Address 
 
Password 
Confirm Password 
Already have an account? Login here.
  
 
 
  

The output of the above HTML form will look like this.

All the input fields are required by adding the «required» attribute which is the default HTML attribute. The use of type=»email» will validate the email address provided by users and gives an error if the email address is not valid. For the registration form, we have used bootstrap for rapid development. If you want to save your time on HTML code you can always use some free html5 templates for your project.

Step 2: Creating the MySQL Database Table

You will need to create a new database with any suitable name you want. After that please execute the below SQL query to create the user’s table inside your newly created MySQL database.

CREATE TABLE `users` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(75) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(100) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `email` (`email`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

Step 3: Creating Database Configuration File

Now, we have created the users table. Let’s create a new PHP file named config.php to connect with the MySQL database. Paste the following code in the config.php file and change the database name to whatever you choose while creating the database.

Step 4: Creating a Session File

Let’s create a file named session.php. In this file, we will start the session and check if a user is already logged in, if yes then we will redirect the user to welcome.php file.

Step 5: Create Registration Form in PHP

Finally, it’s time to create a PHP code that allows users to register their accounts into the system. This PHP code will alert users with an error if any user is already registered with the same email address.

Replace the following code in the register.php file.

prepare("SELECT * FROM users WHERE email = ?")) < $error = ''; // Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s" $query->bind_param('s', $email); $query->execute(); // Store the result so we can check if the account exists in the database. $query->store_result(); if ($query->num_rows > 0) < $error .= '
The email address is already registered!
'; > else < // Validate password if (strlen($password ) < 6) < $error .= '
Password must have atleast 6 characters.
'; > // Validate confirm password if (empty($confirm_password)) < $error .= '
Please enter confirm password.
'; > else < if (empty($error) && ($password != $confirm_password)) < $error .= '
Password did not match.
'; > > if (empty($error) ) < $insertQuery = $db->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?);"); $insertQuery->bind_param("sss", $fullname, $email, $password_hash); $result = $insertQuery->execute(); if ($result) < $error .= '
Your registration was successful!
'; > else < $error .= '
Something went wrong!
'; > > > > $query->close(); $insertQuery->close(); // Close DB connection mysqli_close($db); > ?>       
 
 
Register
 
Please fill this form to create an account.
   
 
Full Name 
Email Address 
 
Password 
Confirm Password 
Already have an account? Login here.
  
 
 
   

Once user click on submit button it will check if $_SERVER[«REQUEST_METHOD»] == «POST» and $_POST[‘submit’] variable has been set. For security concerns, we always suggest not to store the password as plain text in the database. We have used password_hash() function which creates a new password hash using a strong one-way hashing algorithm.

The above PHP script will validate that no user is registered with the same email address and also validate password. After validation is confirmed we store the user-provided information in the users’ table and alert the user that registration was successful.

2) Building a Login System

In this part, we will create a login form to allow users to access the restricted area of the system. In our case, the restricted area is a welcome page which we will cover in the next part.

Step 1: Creating a Login Form in HTML

Below is the Login Form in HTML. Paste it in a file named login.php

       
 
 
Login
 
Please fill in your email and password.
 
 
Email Address 
 
Password 
Don't have an account? Register here.
  
 
 
  

The output of the above code will look like this

Step 2: Creating a Login System in PHP

After creating the login form in HTML, we will write a code to validate login credentials. On form submit we will check that the email and password are filled. If they filled then we will execute a SELECT query to find the record in a database on the basis of email and password. If any record found, then we will store the «userID» in session and the user is redirected to the welcome.php file, otherwise, the user is alerted with an error message.

Let’s replace the following code in the login.php file.

Please enter email.
'; > // validate if password is empty if (empty($password)) < $error .= '
Please enter your password.
'; > if (empty($error)) < if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) < $query->bind_param('s', $email); $query->execute(); $row = $query->fetch(); if ($row) < if (password_verify($password, $row['password'])) < $_SESSION["userid"] = $row['id']; $_SESSION["user"] = $row; // Redirect the user to welcome page header("location: welcome.php"); exit; >else < $error .= '
The password is not valid.
'; > > else < $error .= '
No User exist with that email address.
'; > > $query->close(); > // Close connection mysqli_close($db); > ?>       
 
 
Login
 
Please fill in your email and password.
  
 
Email Address 
 
Password 
Don't have an account? Register here.
  
 
 
   

3) Creating a Welcome Page

Below is the code for the welcome.php file. Users will be redirected to this page after a successful login process. We have added some code at the top of the page to check if the user is not logged in, then redirect the user to the login page.

Let’s create a welcome.php file and paste the following code in it.

 ?>    Welcome   
 
 
Hello, . Welcome to demo site.
 
 
Log Out 
 
 
  

4) The Logout script

Finally, Let’s create a logout.php file with the following code in it.

Once the user clicks on the Log Out link, the above script, will be called to destroy the session and redirect user to the login.php file.

Conclusion

In this tutorial, I explained how you can create a Login System using HTML, PHP and MySQL. Once you understand how simple it is to create a login system you can add other features like reset password, forgot password, verify email address, edit user’s profile, etc.

Источник

How to Create Login Page in HTML?

We’ll design a login page using HTML and CSS. A login page in HTML collects information from the user and has a submit button to send the details for server-side operations. However, our objective here is to design a login page and not to deal with the backend tasks.

Pre-requisites

To begin with the login page in HTML, we need to know the following:

What Are We Creating?

The login page uses HTML and CSS for the structuring and styling. We’ll first create the simple structure with HTML and then move to make it look great with CSS. This is what our final output will look like:

At first, we’ll go through the HTML code for the login page and then switch to CSS to make it look better.

Creating the Login Page Structure with HTML

Basically, we are going to make use of the tag in HTML. Forms are readily available in HTML to gather information from a user.

You can provide server-side operations as well with the action attribute, but this is beyond the scope of our discussion. You can learn more about forms here.

Let’s just start with writing the basic HTML structure in the first place.

Output

As already mentioned, we are designing the login page without any server-side operations, so the action attribute will be left empty. Following it will be the container that collects and lets the user submit their username and password. The form container will be styled later, but the initial structure shall be provided first.

There will be two elements; one contains the form headings and another for collecting information from the user.

Output

Although the div containers aren’t visible, you’ll soon notice the changes once we add input fields in the form.

Inside the main container, tags will be used to define the input for the user. In our case, we need input types such as text (for username) and password. To define these input fields, we’ll use tags but make sure that the contains the same name as the name attribute of its tag. It is because any form control (input fields) can be associated with only one element. It is important to provide the same name to bind the and elements together.

For the username, the input type is text , and we’ll put because the user must put their username and password.

Output

Output

Since we used the required attribute, it ensures that the input must be provided to the input fields when we the Login button.

Inside the main container, there will be another sub-container to keep a checkbox and forgot password link at the same level. For the same, the basic use of flexbox is needed.

Output This is our final structure.

However, it doesn’t look good yet. Since we are done with the HTML code for the login page, we’ll now cover the styling part in the next section.

Styling the Login Page with CSS

We’ll create a separate style sheet for the login page. So, we need to link this new stylesheet with the HTML login page. The link can be added inside the tag.

Here’s a screenshot provided for reference.

Let’s get a linear-gradient background for the entire login page. Here’s a link to another page if you want to learn more about it.

Output

We also want the form to comprise only 35 relative units of its root element. Plus, it should be placed at the center horizontally, which can be done with margin: auto; .

Since we have used two tags (for username and password), we can style them as follows:

box-sizing has been set to border-box because we need to restrict the input’s width inside the total width of the form container.

Now let’s style the button according to the page. You can choose your own background-color and the color of the text. Additionally, on hovering the button, the opacity (transparency) of the button will be set to 0.6, and the mouse cursor will be shown as a pointer.

By far, this is our CSS code (along with styling the button).

Output

Let’s give the form a good translucent look.

Output

Shouldn’t the elements inside the form have a little space between them and the form’s extreme ends? We’ll need to provide padding for that.

Output

For the sub-container, we need display: flex; and the elements inside it need to be aligned in a row ( flex-direction: row; ). To center them vertically, align-items: center; will be used, and they should be put at both ends of the form, so justify-content: space-between; will be used.

Output

You can use the following code for stylings links.

Output

To make the page responsive, we need to use media queries that make the page adaptive according to the screen resolution. This makes the page useful for not only a desktop but a mobile phone as well. We just want the form to shrink horizontally with the decreasing width of the screen.

So, we are now at the final stage of our code for the login page. Also, let’s just provide a bit more padding to the main container.

Output

Moreover, the page has also become responsive.

Conclusion

• In this article, we created a simple login form in HTML.
• Additionally, we can also handle the events by integrating JavaScript code along with HTML and CSS.
• We have used concepts like flexbox and media queries in CSS to make the page adapt to different screen resolutions.
• The tag has been majorly used to create the login page in HTML with CSS code.

Источник