Table of Contents
Introduction
Data Encryption is very important in the present time. It is mainly required for security reasons. If we want to secure our data like passwords, messages, names from public, then we may use encryption method.
Encryption method actually shows our data in an unreadable form which can not be read by anyone before decoding it. We can reuse that data after decoding it in the previous form. So, in this way, we can keep our data safe from any other person.
Various popular platforms like WhatsApp use encryption method to keep our messages private. These messages can be read by the sender and the receiver only. No one will be able to read the messages instead of the sender and the receiver.
In this tutorial, I will mention a very popular and useful encryption method which is called base64 encoding. PHP use this method of encryption to encode data in an unreadable format and save it in MySQL database.
Base64 Encoding for Encrypt and Insert Data in MySQL
It is a very popular method of encryption. PHP use this method to encrypt data and insert it in MySQL database. This method of encryption is very popular among the developers and it very easy to use. This method uses base64_encode() function to encode data and base64_decode() function to decode data in a readable form. We can use this encryption method to encrypt passwords, usernames, payment information etc.
Requirement of Encrypt and Insert Data in MySQL
Data encryption is required in many cases. Before uploading or inserting data, it is very important to encrypt sensitive data like passwords, payment information etc. This will increase the security of data. No one will be able to access the data without permission.
Method of Using Base64 Encoding in PHP
Implementing base64 encoding in PHP, is very easy. This is not tough to do. PHP is a server side scripting language. It is very popular among the web developers. They use this language to create a dynamic website.
HTML for Designing UI to Insert Data in MySQL Database (index.html)
In this tutorial, I have used HTML5 and CSS to design the User Interface (UI). Under this interface, users will be able to insert registration data in MySQL database using PHP (Server Side Scripting Language). I have created a very simple design. You can design your own interface as per your convenience. This HTML5 code is given below –
<!DOCTYPE html> <html> <head> <title>Base64 Encryption</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <center> <div class="main"> <h2>Register</h2> <form method="post" id="frm" onsubmit="return submitFun()"> <input type="text" class="textbox" name="fName" placeholder="Enter Your Name" required> <input type="email" class="textbox" name="email" placeholder="Enter Your Email" required> <input type="password" name="pass" class="textbox" placeholder="Enter Your Password" required> <input type="submit" name="submit" value="Submit" class="btn"> </form> </div> </center> </body> </html>
In the above HTML5 code, I have inserted jQuery CDN. You can visit here to get the CDN. Just visit the website and copy the minified CDN for the latest version of jQuery. Paste the CDN within <head> and </head> tags.
CSS Code for Styling UI for Insert Data into MySQL
I have used CSS (Cascading Style Sheets) for the styling of the user interface. Look of a website is very important. It must look beautiful. For this purpose, you should use CSS code. This will give your interface an attractive look. Users will visit your website if they like it and it looks beautiful. So, look matters. You can paste the CSS code within <head> and </head> tags. The CSS code is given below –
<style type="text/css">
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
border-radius: 7px;
border: 1px solid #888;
margin-top: 150px;
}
.textbox{
width: 250px;
height: 30px;
outline: none;
border: 1px solid #888;
border-radius: 5px;
font-size: 14px;
padding-left: 5px;
margin-bottom: 20px;
}
.btn{
width: 100px;
height: 30px;
cursor: pointer;
outline: none;
border: 0;
background: orange;
color: #fff;
}
</style>
Creating INSERT.PHP file for Encrypt and Insert Data into MySQL
For inserting data, we need to create a PHP file. Here, I am creating insert.php. In this PHP file, I have written the code to get the data from <form> of index.html. After that, base64_encode() function will encode the data and then the data will be inserted into MySQL database. After successful insertion, it will generate a success message. If it fails to insert, then a failed message will be generated. The PHP code is given below:
<?php
$con = mysqli_connect("localhost", "root", "", "encrypt_data");
$name = $_POST['fName'];
$email = base64_encode($_POST['email']);
$pass = base64_encode($_POST['pass']);
$sql = "INSERT INTO encrypt_table (name, email, pass) VALUES ('$name', '$email', '$pass')";
if(mysqli_query($con, $sql)){
echo "success";
}else{
echo "failed";
}
?>
Inserting jQuery Code for Base64 Encryption and Insert Data
I am using a submit function on submitting the <form> from the index.html file. Here, I am using AJAX to connect with the insert.php file. AJAX will also fetch the form data from index.html file and bring the output from insert.php to index.html.
The AJAX will destroy the default <form> activity. This will obstruct the the form to get refreshed after submitting it. Instead of getting refreshed, it populates an alert to show the record inserted successfully. After populating the message, we will make it refresh from AJAX code.
The jQuery Code is written below –
<script type="text/javascript">
function submitFun(){
$.ajax({
type: 'POST',
url: 'insert.php',
data: $('#frm').serialize(),
success: function(data){
if(data == "success"){
alert("Record Inserted Successfully!");
location.reload();
}else{
alert("Failed...");
}
}
});
return false;
}
</script>
Overall HTML (index.html) Code
The Overall HTML code along with CSS and jQuery is given below –
<!DOCTYPE html>
<html>
<head>
<title>Base64 Encryption</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style type="text/css">
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
border-radius: 7px;
border: 1px solid #888;
margin-top: 150px;
}
.textbox{
width: 250px;
height: 30px;
outline: none;
border: 1px solid #888;
border-radius: 5px;
font-size: 14px;
padding-left: 5px;
margin-bottom: 20px;
}
.btn{
width: 100px;
height: 30px;
cursor: pointer;
outline: none;
border: 0;
background: orange;
color: #fff;
}
</style>
</head>
<body>
<center>
<div class="main">
<h2>Register</h2>
<form method="post" id="frm" onsubmit="return submitFun()">
<input type="text" class="textbox" name="fName" placeholder="Enter Your Name" required>
<input type="email" class="textbox" name="email" placeholder="Enter Your Email" required>
<input type="password" name="pass" class="textbox" placeholder="Enter Your Password">
<input type="submit" name="submit" value="Submit" class="btn">
</form>
</div>
</center>
<script type="text/javascript">
function submitFun(){
$.ajax({
type: 'POST',
url: 'insert.php',
data: $('#frm').serialize(),
success: function(data){
if(data == "success"){
alert("Record Inserted Successfully!");
location.reload();
}else{
alert("Failed...");
}
}
});
return false;
}
</script>
</body>
</html>
Conclusion
It can be concluded that data encryption is very useful and important in case of Web Development. We need this for Security purpose or making a data private. Base64 encryption is very popular in PHP language and it very easy to use. It converts data into unreadable form which can not be accessed by any one before decryption.
Thank you
You Also can Visit
How to Develop Image to PDF Converter in HTML
