Browsing articles from "November, 2022"

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

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

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

6. Creating the Profile Page

The profile page will display the account information for the logged-in user.

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

<?php
// We need to use sessions, so you should always start sessions using the below code.
session_start();
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
	header('Location: index.html');
	exit;
}
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
	exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
// We don't have the password or email info stored in sessions so instead we can get the results from the database.
$stmt = $con->prepare('SELECT password, email FROM accounts WHERE id = ?');
// In this case we can use the account ID to get the account info.
$stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($password, $email);
$stmt->fetch();
$stmt->close();
?>

The above code retrieves additional account information from the database, as before with the home page, we didn’t need to connect to the database because we retrieved the data stored in sessions.

We’re going to populate all the account information for the user and therefore we must retrieve the password and email columns from the database. We don’t need to retrieve the username or id columns because we’ve them stored in session variables that were declared in the authenticate.php file.

After the closing tag, add the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Profile Page</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body class="loggedin">
		<nav class="navtop">
			<div>
				<h1>Website Title</h1>
				<a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
				<a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
			</div>
		</nav>
		<div class="content">
			<h2>Profile Page</h2>
			<div>
				<p>Your account details are below:</p>
				<table>
					<tr>
						<td>Username:</td>
						<td><?=$_SESSION['name']?></td>
					</tr>
					<tr>
						<td>Password:</td>
						<td><?=$password?></td>
					</tr>
					<tr>
						<td>Email:</td>
						<td><?=$email?></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

A simple layout that will populate account information. If you navigate to the profile.php file, it will look like the following:

http://localhost/phplogin/profile.php

PHP Loggedin Profile Page

Remember, the passwords are encrypted, so you cannot see the decrypted password unless you create a new session variable and store the password in the authenticate.php file.

Pages:«1234»