Browsing articles in "Blog"

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

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

2. Creating the Login Form Design

We will now create a form that our users can use to enter their details and submit them for processing. We will be using HTML and CSS for this part of the tutorial as PHP will not be necessary on this page.

Edit the index.html file with your favorite code editor and add the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Login</title>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<form action="authenticate.php" method="post">
				<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>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

If we navigate to the index page in our web browser, it will look like the following:

http://localhost/phplogin/index.html

Basic HTML Login Form Layout

Pretty basic right? Let’s edit our style.css file and implement code that will improve the appearance of the form.

Add the following code to the style.css file:

* {
  	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;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login 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;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

We need to include our stylesheet in our index.html file and therefore we must add the following code to the head section:

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

And now if we refresh the index.html page in our web browser, our login form will look more appealing:

http://localhost/phplogin/index.html

Awesome HTML Login Form Layout

That looks much better! Let’s narrow down the form elements, 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 authentication file. When the form is submitted, the form data will be sent to the authentication file for processing. In addition, the method is declared as post as this will enable us to process the form data using the POST request method.
    • Input (text/password) — We need to name our form fields so the server can recognize them. The value of the attribute name we can declare as username, which we can use to retrieve the post variable in our authentication file to get the data, for example: $_POST[‘username’].
    • Input (submit) — On form submission, the data will be sent to our authentication file for processing.

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

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

Secure Login System with PHP and MySQL

In this tutorial, I’ll be teaching you how you can create your very own secure PHP login system. A login form is what your website’s visitors can use to log in to your website to access restricted content, such as a profile page. We will leverage MySQL to retrieve account data from the database.

1. Getting Started

There are a few steps we need to take before we create our secure login system. We need to set up our web server environment and ensure we have the required extensions enabled.

1.1. Requirements

  • If you haven’t got a local web server set-up, I recommend you download and install XAMPP.
  • XAMPP is a cross-platform web server package that includes the essentials for back-end developers. It includes PHP, MySQL, Apache, phpMyAdmin, and more. It’s not necessary to install all the software separately with XAMPP.

1.2. What You Will Learn in this Tutorial

  • Form Design — Design a login form with HTML5 and CSS3.
  • Prepared SQL Queries — How to properly prepare SQL queries to prevent SQL injection and therefore preventing your database from being exposed.
  • Basic Validation — Validating form data that is sent to the server using GET and POST requests (username, password, email, etc.).
  • Session Management — Initialize sessions and store retrieved database results. Sessions are saved on the server and are associated with a unique ID that is saved in the browser.

1.3. File Structure & Setup

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

  • Open XAMPP Control Panel
  • Next to the Apache module click Start
  • Next to the MySQL module click Start
  • Navigate to XAMPP’s installation directory (C:\xampp)
  • Open the htdocs directory
  • Create the following directories and files:

File Structure

\– phplogin
|– index.html
|– style.css
|– authenticate.php
|– logout.php
|– home.php
|– profile.php

Each file will consist of the following:

  • index.html — The login form created with HTML5 and CSS3. We don’t need to use PHP in this file. Therefore, we can save it as plain HTML.
  • style.css — The stylesheet (CSS3) for our secure login system.
  • authenticate.php — Authenticate users, connect to the database, validate form data, retrieve database results, and create new sessions.
  • logout.php — Destroy the logged-in sessions and redirect the user to the login page.
  • home.php — Basic home page for logged-in users.
  • profile.php — Retrieve the user’s account details from our MySQL database and populate them with PHP and HTML.

How to upload your website files in cPanel?

Nov 2, 2020   //   by h05t5cr1pt3r   //   Blog, cPanel, Domain  //  1 Comment

Follow these steps on how to upload your website to your HostScripter Web hosting account running cPanel.

Step 1 of 10

Log into the customer (cPanel) portal at https://yourdomain.com/cpanel, Replacing yourdomain.com with your real domain as provided in your welcome email.

Step 2 of 10

You will then be logged into the customer (cPanel) portal for the account you wish to upload the files for.

Step 3 of 10

In the Files section click on the File Manager icon.

Step 4 of 10

Select the Web Root (public_html/www) option and press the Go button.

Step 5 of 10

You will now see the File Manager screen. If there were other files present, delete those files except for the cgi-bin.

Step 6 of 10

Click on the Upload icon.

Step 7 of 10

Press the Browse button to select the file you wish to upload.

Step 8 of 10

Navigate to the file you wish to upload and press the Open button. If uploading multiple files, zip your files.

Step 9 of 10

You will then see a status for the file upload.

Step 10 of 10

When the upload is complete click on the link Back to /home/customer/public_html.

You will now see your uploaded file in your File Manager screen.

Then repeat steps 6 to 10 until you have uploaded all the required files. If you uploaded a zip file, select the zip file and click extract here.

HostScripter migrates all student/budget hosting from cPanel to DirectAdmin access effective January 2020

Nov 29, 2019   //   by h05t5cr1pt3r   //   Blog, cPanel, Payments  //  No Comments

Previous months, cPanel license price hikes and sparks worldwide criticisms by the hosting industry.

Because of this, we regrettably announced to all our clients including future customers that effectively January 2020, we will be migrating all student and budget hosting packages into DirectAdmin based-server. Thus, we are terminating the use of cPanel  control panel for the package as stated.

Ever since we started on 2011, HostScripter has been a reliable choice for cheap and affordable web hosting especially for students and young professionals.

For those who still wanted to continue with the cPanel based-hosting, we encourage you to upgrade your account into premium and business packages. These packages were hosted in a different server with more reliable system resources!

As mentioned above, DirectAdmin application is one of the few alternatives for cPanel. This will not hinder us to use available applications in order to continue providing cheap and affordable hosting packages to our clienteles!

For your inquiries and comments, you can message us at https://www.facebook.com/hostscripter

Pages:«1234567...18»