Hire a web Developer and Designer to upgrade and boost your online presence with cutting edge Technologies

Tuesday, September 21, 2021

How to Upload Files on Server using Ajax in PHP 8?

 

Hello Friends,

This tutorial will provide example of how to upload files on server using ajax in php 8?. if you have question about PHP 8 File Upload using Ajax MySQL Database Example then I will give simple example with solution. you can see How to Upload file using ajax jQuery PHP 8 and MySQL. this example will help you PHP 8 Upload & Store File in MySQL Tutorial.

This article will give you simple example of How to Insert Files into a MySQL Database Using PHP 8

So, let's see bellow solution:

index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to Upload Files on Server using Ajax in PHP 8?</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card m-auto w-75">
                    <div class="card-header text-center text-white bg-dark">
                        <h4>How to Upload Files on Server using Ajax in PHP 8? - Tuts-Station.com</h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success alert-dismissible" id="success" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                                File uploaded successfully
                        </div>
                        <form id="submitForm">
                            <div class="form-group">
                                <label><strong>Select File : </strong><span class="text-danger"> *</span></label>
                                <input type="file" class="form-control" name="file" id="file" multiple>
                             <span id="error" class="text-danger"></span><br>    
                            </div>
                            <div class="form-group d-flex justify-content-center">
                                <button type="submit" name="upload" class="btn btn-primary">Upload</button>
                            </div>  
                        </form>         
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").prop('required',true);
            $('#file').change(function () {
                var ext = this.value.match(/\.(.+)$/)[1];
                    switch (ext) {
                        case 'txt':
                        case 'pdf':
                        case 'docx':
                        case 'csv':
                        case 'xlsx':
                            $('#error').text("");
                            $('button').attr('disabled', false);
                            break;
                    default:
                        $('#error').text("File must be of type txt,pdf,docx,csv,xlsx.");
                        $('button').attr('disabled', true);
                        this.value = '';
                }
            });
            $("#submitForm").on("submit", function(e){
                e.preventDefault();
                $.ajax({
                    url  :"store.php",
                    type :"POST",
                    cache:false,
                    contentType : false, // you can also use multipart/form-data replace of false
                    processData : false,
                    data: new FormData(this),
                    
                    success:function(response){
                      $("#success").show();
                      $("#success").fadeOut(2800);
                    }
                });
            });
        });
    </script>
</body>
</html>
store.php
<?php 

    if (isset($_FILES['file'])) {
        
        $file_name = $_FILES['file']['name'];    
        $file_size = $_FILES['file']['size'];    
        $file_tmp = $_FILES['file']['tmp_name'];     
        $file_type = $_FILES['file']['type'];        

        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "tests";

        $conn = mysqli_connect($servername, $username, $password, $dbname);

        if (!$conn) {
            die("connection failed:" .mysqli_connect_error());
            echo "connection successfull";
        }
            
        $sql="INSERT INTO posts(file) VALUES('$file_name')";
            
        if ($conn->query($sql)===TRUE) {
            echo " ";
        }else{
            echo "<h5 class='alert alert-primary'>Error :".$sql."<br>".$conn->error."</h5>";
        }
            
        if (move_uploaded_file($file_tmp ,"uploads/".$file_name)) {
            echo "<h5 class='alert alert-primary'>File inserted Successfully!</h5>";
        }else{
            echo "<h5 class='alert alert-primary'>File Was Not inserted!</h5>";
        }
    }
?>

Cookieless Alternative To Embed HTML, CSS And JS Code Snippets

 Embedding code examples with third-party scripts often leads to tracking or cookies. We always wanted to have a simple website with a good UX, so setting cookies for no reason wasn’t an option for us. 

When we implement websites today, we are confronted by a lot of things we need to take care of. Ideally, we want to have a fast, secure, accessible, and fair website. At the same time, we want to have an interactive website with comments, polls, videos, code examples, and many more.

Together with a friend, I launched a tech blog last year and we ran exactly into that issue. We wanted to have a simple solution to embedding HTML, CSS, and JavaScript code examples but existing solutions often include tracking, cookies, a ton of features or bad performance. After some research, we realized that we had to build an alternative. Indiapen

Indiepen is a privacy-friendly, lightweight, and accessible solution to embed code examples. In fact, we don’t set any cookies or tracking!

Get Started

Indiepen can preview every website that follows a very simple convention. You need to provide a website with the following file structure:

.
├── index.html
├── main.js
└── styles.css

Deploy the code example with your favorite hosting provider (e.g. GitHub Pages, Netlify, or Vercel) and copy the URL. After that, go to our start page and use the code snippet generator.

The generated code looks like this:

<iframe class="indiepen"
  src="https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2F&tab=result"
  style="width: 100%; overflow: hidden; display: block; border: 0;"
  title="Indiepen Embed"
  loading="lazy"
  width="100%"
  height="450">
</iframe>

You can now use the code snippet and integrate it on your website. That’s it! You should now see your code example with an editor to discover the code.

Under The Hood

It sounds a bit strange nowadays but we haven’t used any JavaScript framework like React or Vue.js. It’s pure HTML, CSS and JavaScript with some help from Lea Verou’s Prism.js for syntax highlighting. Those libraries are very helpful to implement and maintain complex web applications but in our case, we just have three files we need to fetch and pass onto Prism.js.

Additionally, we have three buttons in the upper right corner to switch between the HTML, CSS, and JavaScript views. By introducing a UI framework, we couldn’t deliver a lightweight solution with less than 20 kb in size. For us, it was good learning, that UI libraries are important in our day-to-day business but we should carefully consider them and don’t forget the good old vanilla JavaScript.

 

Final Words 

Indiepen is open-source project and we are very excited to share our ideas with you. We would love to get feedback and have discussions about a fair web. Get in touch with me on Twitter or check out the project on GitHub.

Last but not least, I’d like to mention that Indiepen has a limited scope and we want to keep it simple by design. If you need to deal with more complex code examples, preprocessors for CSS or JavaScript, or you want to benefit from a platform to share your ideas, then please consider more sophisticated solutions like CodePen or JSFiddle.

Secure Registration System with PHP and MySQL

 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).

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:

HTML
<!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:


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

CSS
* {
  	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:

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

And now our registration form will look more appealing:


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.

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:

SQL Copy
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:


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

4. Registering Users with PHP & MySQL

Now we need to create the registration file that will process the form fields, check for basic validation, and insert the new account into our database.

The registration page will require a connection to our database and therefore we must include the necessary variables and MySQL functions. Edit the register.php file and add the following code:

PHP
<?php
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
	// If there is an error with the connection, stop the script and display the error.
	exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}

Don't forget to update the MySQL variables if your MySQL credentials do not reflect the declared values.

Next, we can add basic validation to ensure the user has entered their details and check for empty variables.

PHP 
// Now we check if the data was submitted, isset() function will check if the data exists.
if (!isset($_POST['username'], $_POST['password'], $_POST['email'])) {
	// Could not get the data that should have been sent.
	exit('Please complete the registration form!');
}
// Make sure the submitted registration values are not empty.
if (empty($_POST['username']) || empty($_POST['password']) || empty($_POST['email'])) {
	// One or more values are empty.
	exit('Please complete the registration form');
}

Now we need to check if the account already exists in the database. We can check this by selecting a record from our accounts table with the same username that the user has provided.

Add after:

PHP
// We need to check if the account with that username exists.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
	// Bind parameters (s = string, i = int, b = blob, etc), hash the password using the PHP password_hash function.
	$stmt->bind_param('s', $_POST['username']);
	$stmt->execute();
	$stmt->store_result();
	// Store the result so we can check if the account exists in the database.
	if ($stmt->num_rows > 0) {
		// Username already exists
		echo 'Username exists, please choose another!';
	} else {
		// Insert new account
	}
	$stmt->close();
} else {
	// Something is wrong with the sql statement, check to make sure accounts table exists with all 3 fields.
	echo 'Could not prepare statement!';
}
$con->close();
?>

Replace:

// Insert new account

With:

PHP
// Username doesnt exists, insert new account
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
	// We do not want to expose passwords in our database, so hash the password and use password_verify when a user logs in.
	$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
	$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);
	$stmt->execute();
	echo 'You have successfully registered, you can now login!';
} else {
	// Something is wrong with the sql statement, check to make sure accounts table exists with all 3 fields.
	echo 'Could not prepare statement!';
}

This will insert a new account into our accounts table.

As you can see in the code above we use the password_hash function, this will encrypt the user's password using the one-way algorithm — this will prevent your users passwords from being exposed if for somehow your database becomes vulnerable.

That's basically all we need to do to register accounts on our website.

5. Validating Form Data

We already have basic validation in our PHP script but what if we want to check if the email is actually an email or if the username and password should be a certain amount of characters long, you can do that with the codes below, add them in the register.php file before the following line:

if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {

Email Validation

PHP
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
	exit('Email is not valid!');
}

Invalid Characters Validation

PHP
if (preg_match('/^[a-zA-Z0-9]+$/', $_POST['username']) == 0) {
    exit('Username is not valid!');
}

Character Length Check

PHP 
if (strlen($_POST['password']) > 20 || strlen($_POST['password']) < 5) {
	exit('Password must be between 5 and 20 characters long!');
}

You should always implement your own validation, these are just basic examples.

6. Implementing Account Activation

The account activation system will send an email to the user with the activation link when the user has registered.

The first thing we need to do is to go into phpMyAdmin and select our database, in our case this would be phplogin, you can either add the column activation_code to the accounts table or execute the SQL statement below.

SQL
ALTER TABLE accounts ADD activation_code varchar(50) DEFAULT ''

Now we need to edit our register.php file, search for this line of code:

if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {

Replace with:

PHP Copy
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email, activation_code) VALUES (?, ?, ?, ?)')) {

Search for:

$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);

Replace with:

PHP Copy
$uniqid = uniqid();
$stmt->bind_param('ssss', $_POST['username'], $password, $_POST['email'], $uniqid);

The $uniqud variable will generate a unique ID that we'll use for our activation code, this will be sent to the user's email address.

Search for:

echo 'You have successfully registered, you can now login!';

Replace with:

PHP Copy
$from    = 'noreply@yourdomain.com';
$subject = 'Account Activation Required';
$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $from . "\r\n" . 'X-Mailer: PHP/' . phpversion() . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-Type: text/html; charset=UTF-8' . "\r\n";
// Update the activation variable below
$activate_link = 'http://yourdomain.com/phplogin/activate.php?email=' . $_POST['email'] . '&code=' . $uniqid;
$message = '<p>Please click the following link to activate your account: <a href="' . $activate_link . '">' . $activate_link . '</a></p>';
mail($_POST['email'], $subject, $message, $headers);
echo 'Please check your email to activate your account!';

Upon account registration, the user will need to activate their account using the activation link that is sent to their email address. You need to update both the $from and $activate_link variables.

Now we can proceed to create the activation file. The activation file will process the GET parameters and verify the email and code. The user's account will be activated if the code is valid.

Edit/create the activate.php file and add the following code:

PHP Copy
<?php
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
	// If there is an error with the connection, stop the script and display the error.
	exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
// First we check if the email and code exists...
if (isset($_GET['email'], $_GET['code'])) {
	if ($stmt = $con->prepare('SELECT * FROM accounts WHERE email = ? AND activation_code = ?')) {
		$stmt->bind_param('ss', $_GET['email'], $_GET['code']);
		$stmt->execute();
		// Store the result so we can check if the account exists in the database.
		$stmt->store_result();
		if ($stmt->num_rows > 0) {
			// Account exists with the requested email and code.
			if ($stmt = $con->prepare('UPDATE accounts SET activation_code = ? WHERE email = ? AND activation_code = ?')) {
				// Set the new activation code to 'activated', this is how we can check if the user has activated their account.
				$newcode = 'activated';
				$stmt->bind_param('sss', $newcode, $_GET['email'], $_GET['code']);
				$stmt->execute();
				echo 'Your account is now activated! You can now <a href="index.html">login</a>!';
			}
		} else {
			echo 'The account is already activated or doesn\'t exist!';
		}
	}
}
?>

If the code reflects the one in the database that is associated with the user's account then the value of the activation_code column will be updated to activated.

If we want to check if the user has activated their account, we can add the following code to the pages we want to restrict non-activated users:

PHP Copy
if ($account['activation_code'] == 'activated') {
	// account is activated
	// Display home page etc
} else {
	// account is not activated
	// redirect user or display an error
}

For the above code to work, you will need to connect to your MySQL database and select the user's account.

Also, take note PHP mail function will only work if your computer or server supports it. If it doesn't send an email, check your configuration or install a mail server such as Postfix.

Conclusion

Congratulations! You've successfully created a registration system with PHP and MySQL. You're free to use the code in this tutorial and adapt it for your own projects.

Remember that this is just a secure base that you should work from. Consider changing or implementing your own validation, and implement your own features.

If you would like more of this tutorial series, feel free to drop a comment and suggest to us what we could create next.

Enjoy coding!