md5 is a hash function that generates the md5 hash of an input string. This is used for the encoding process. Though it is not used as password encryption, it is widely used to store sensitive data using 128-bit hash value.
In this topic, we will see how we can generate the md5 hash of a string using PHP and Ajax. A user can enter an input string and by hitting a button md5 hash value can be displayed.
Folders and Files
We will use a folder called 'md5' under 'xampp/htdocs'.
'css' folder is for custom stylesheet.
'js' folder is for our JavaScript file.
index.php is the main program and get_md5.php generates md5 hash and it is called by Ajax.
We will design a small screen that will have an input box. Users can enter the string for which the md5 hash is to be generated. There will be an output box where the generated md5 hash will be displayed. See the below screenshot:
Let's look at the code below:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>MD5 Hash Generator</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">
<link rel = "stylesheet" href="css/style.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "js/md5.js"></script>
</head>
<body>
<div class="container">
<h2>Generate MD5 Hash</h2>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h4>Enter the string below you want to generate md5 hash for:</h4>
<textarea class="form-control" id ="inputStr" autofocus></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-primary" onclick="genearte_md5()">Generate md5 hash</button>
<button class="btn btn-warning" onclick="clear_str()">Clear</button>
</div>
</div>
<div class="col-md-6 hash-1">
<div class="form-group">
<h4>Generated md5 hash:</h4>
<p id = "md5hash"></p>
</div>
</div>
</div>
</div>
</body>
</html>
We are calling generate_md5() JavaScript function on onclick event of the button. These functions are defined in md5.js file.
Let us now write the JavaScript function generate_md5(). We will make an Ajax request with the input value entered by the user. Response from the Ajax call will be displayed as the output. Let's see the below code:
md5.js
function genearte_md5() {
var x = document.getElementById("inputStr").value;
x = x.trim();
if (x !="") {
$.ajax({
type:"post",
data:"str="+x,
url:"get_md5.php",
success: function (response){
$("#md5hash").html(response);
}
});
}
else alert("Please enter a string");
}
function clear_str() {
$("#inputStr").val("");
$("#md5hash").html("");
}
In the function generate_md5(), we are calling get_md5.php using Ajax with the input string. The other function clear_str() simply removes the data from the input textarea field and clears the generated md5 hash.
We will take the value of the input string sent by Ajax as a parameter and then call the md5() function on the input string. Then display it using an echo statement.
get_md5.php
<?php
$str = $_POST['str'];
$md5hash = md5($str);
echo $md5hash;
This is simple code. We are calling md5() PHP function on $str which is the input string and displaying it.
Let us add the below styles. We have already added style.css in index.php.
style.php
h2 {
text-align: center;
padding: 50px 50px;
}
h4{
font-size: 17px;
color:#1818c8;
text-align: center;
}
textarea {
height:100px !important;
resize:none;
}
.hash-1{
padding-left: 20px;
}
p {
padding-left:5px;
height:100px;
width:100%;
border:solid 1px #d7bebe;
}
Test the ApplicationMake sure services are running in your XAMPP control panel. Run localhost/md5 in the browser. You will see the page displayed.
Enter some string in the left input box and click on the "Generate md5 hash" button. You will see the hash generated and displayed on the right side. I entered 123 and clicked the blue button. I got the output as below:
Hope you could develop and test it successfully.
Notemd5() hash is not recommended to use for password encryption. For training or testing purpose you may use it, but not in actual project. For password encryption you can use password_hash() and password_verify() functions.
ConclusionThis was also an example of using Ajax without submitting a form. So, this gives you an idea on how you can use Ajax with PHP. In this case, we generated an md5 hash using Ajax in PHP. I hope it will be useful for you.
Download Source Code
Post a Comment