Browsing articles in "Blog"

Part 3: Create your own Registration System using PHP and MySql

Nov 28, 2022   //   by h05t5cr1pt3r   //   Blog  //  No Comments

3. Creating the Database and setting-up Tables

You can skip this step if you followed the Secure Login System Tutorial.

For this part, you will need to access your MySQL database, either using phpMyAdmin or your preferred MySQL database management application.

If you’re using phpMyAdmin then follow these instructions:

  • Navigate to: http://localhost/phpmyadmin/
  • Click the Databases tab at the top
  • Under Create database, type in phplogin in the text box
  • Select utf8_general_ci as the collation
  • Click Create

You can use your own database name, but for this tutorial, we’ll use phplogin.

What we need now is an accounts table that will store all our accounts (usernames, passwords, emails, etc).

Click the database on the left side panel (phplogin) and execute the following SQL statement:

CREATE TABLE IF NOT EXISTS `accounts` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
  	`username` varchar(50) NOT NULL,
  	`password` varchar(255) NOT NULL,
  	`email` varchar(100) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

On phpMyAdmin this should look like:

http://localhost/phpmyadmin/

phpMyAdmin Accounts Table

The above SQL statement code will create the accounts table with the columns id, username, password, and email.

Part 2: Create your own Registration System using PHP and MySql

Nov 28, 2022   //   by h05t5cr1pt3r   //   Blog  //  No Comments

2. Creating the Registration Form Design

The registration form will be used by our websites visitors. They can use it to input their account information. We’ll be creating the registration form with HTML and CSS.

Edit the register.html file and add the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Register</title>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="register">
			<h1>Register</h1>
			<form action="register.php" method="post" autocomplete="off">
				<label for="username">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<label for="email">
					<i class="fas fa-envelope"></i>
				</label>
				<input type="email" name="email" placeholder="Email" id="email" required>
				<input type="submit" value="Register">
			</form>
		</div>
	</body>
</html>

Navigate to http://localhost/phplogin/register.html, our registration form will look like the following:

http://localhost/phplogin/register.html

Basic HTML Registration Form Layout

Pretty basic for a registration form, now let’s add some CSS, edit the style.css file and add the following:

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
  	margin: 0;
}
.register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.register h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
 	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
  	margin-top: 20px;
  	background-color: #3274d6;
 	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.register form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

We need to include our stylesheet in our register.html file, copy and paste the following code to the head section:

<link href="style.css" rel="stylesheet" type="text/css">

And now our registration form will look more appealing:

http://localhost/phplogin/register.html

Awesome HTML Registration Form Layout

Let’s narrow down the form so we can get a better understanding on what’s going on.

  • Form — we need to use both the action and post attributes, the action attribute will be set to the registration file. When the form is submitted, the form data will be sent to the registration file for processing. The method is to post, this will allow us to process the form data.
    • Input (text/password/email) — We need to name our form fields so the server can recognize them, so if we set the value of the attribute name to the username, we can use the post variable in our registration file to get the data, like this: $_POST[‘username’].
    • Input (submit) — On click the form data will be sent to our registration file.

That’s basically all we need to do on the client-side, next step is to set-up the database and create the registration file with PHP.

Part 1: Create your own Registration System using PHP and MySql

Nov 28, 2022   //   by h05t5cr1pt3r   //   Blog  //  No Comments

Secure Registration System with PHP and MySQL

This tutorial is a follow up to our previous tutorial Secure Login System with PHP and MySQL. In this tutorial, we’ll be creating a secure registration form and implementing basic validation.

A registration form is what your website’s visitors can use to register their details, which will subsequently be stored in a MySQL database.

1. Getting Started

There are a few steps we need to take before we create our secure registration system. We need to set-up our web server environment and make sure we have the required extensions enabled (skip if you followed the secure login system tutorial).

1.1. Requirements

  • If you haven’t got a local web server set-up, you will need to download and install XAMPP. XAMPP is a server-side web development environment that includes the essentials for back-end web developers.

1.2. What You Will Learn in this Tutorial

  • Form Design — Design a registration form with HTML5 and CSS3.
  • Prepared SQL Queries — How to prepare SQL queries to prevent SQL injection and insert new records into a MySQL database.
  • Basic Validation — Validating form data that is sent to the server (username, password, and email).

1.3. File Structure & Setup

We now need to start our web server and create the files and directories that we’re going to use for our registration system.

  • Open XAMPP Control Panel
  • Next to the Apache module click Start
  • Next to the MySQL module click Start
  • Navigate to XAMPPs installation folder (C:\xampp)
  • Open the htdocs folder
  • Create the following folders and files:

File Structure

\– phplogin
|– register.html
|– style.css
|– register.php
|– activate.php (optional)

Each file will contain the following:

  • register.html — Registration form created with HTML5 and CSS3. As this file doesn’t require us to use PHP, we’ll save it as plain HTML.
  • style.css — The stylesheet (CSS3) for our secure registration form.
  • register.php — Validate form data and insert a new account into the MySQL database.
  • activate.php — Activate the user’s account with a unique code (email based activation).

Part 7: Create your own Login System using PHP and MySql

Nov 28, 2022   //   by h05t5cr1pt3r   //   Blog  //  No Comments

7. Creating the Logout Script

Creating the logout script is straightforward. All you need to do is destroy the sessions that were declared in the authenticate file.

Edit the logout.php file and add the following code:

<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: index.html');
?>

Initialize sessions, destroy them, and redirect the user to the login page. We use sessions to determine whether the user is logged in or not, so by removing them, the user will not be logged in.

Conclusion

You should now have a basic understanding of how a login system works with PHP and MySQL. You’re free to use the source code and incorporate it into your own projects.

The next step is to create a registration system that will enable visitors to register.

Don’t forget to follow us and share the article as it will help us create future tutorials and update existing content with new features.

Next tutorial in this series: Secure Registration System with PHP and MySQL

Pages:«1234567...18»