How to create a MD5 generator in PHP

Let’s create an MD5 generator, If you don’t known what MD5 is you can visit read this Wikipedia article over MD5.

Requirements.

PHP 5.
Web server (Apache, Nginx, Lighttpd).
Writable web root.
First create a new file, you can name it what ever you want but to keep it simple I am naming it index.php.

We now have to write some HTML that would have an input and a submit button, lets do that.

<!DOCTYPE html>  
<html lang="en-US">  
<head>  
    <meta charset="utf-8" />
    <title>{{ MD5 Generator }}</title>
</head>  
<body>  
    <div class="container">
        <h1 class="title">MD5 Generator</h1>
        <form action="index.php" method="post">
            <input type="text" name="content" placeholder="Enter some text" />
            <input type="submit" name="submit" value="Hash!">
        </form>
        <div>
            <p class="output"></p>
        </div>
    </div>
</body>  
</html>  

Once you have written the basic HTML we require, you can add the PHP below in the top of the page that we will be using to check if the input isset or empty and hash the text.

The code below check if the input isset and checks if the input is left blank before the text is submitted , if not then the md5 function will continue and process the text and convert it into md5 hash

<?php

if (isset($_POST['content'])) {  
    if (!empty($_POST['content'])) { 
        $hash = md5($_POST['content']);
    }

}

?>

Now we need to echo the hash by adding these lines.

<?php echo $hash ?>  

We can add the line above to the <p class="output"></p> that we had left empty, it should look something like this.

<p class="output"><?php echo $hash; ?></p>  

Now the code should look something like this.

<?php

if (isset($_POST['content'])) {  
    if (!empty($_POST['content'])) { 
        $hash = md5($_POST['content']);
    }

}

?>
<!DOCTYPE html>  
<html lang="en-US">  
<head>  
    <meta charset="utf-8" />
    <title>{{ MD5 Generator }}</title>
</head>  
<body>  
    <div class="container">
        <h1 class="title">MD5 Generator</h1>
        <form action="index.php" method="post">
            <input type="text" name="content" placeholder="Enter some text" />
            <input type="submit" name="submit" value="Hash!">
        </form>
        <div>
            <p class="output"><?php echo $hash; ?></p>
        </div>
    </div>
</body>  
</html>  

We can now style the web page using CSS.

<style type="text/css">  
        body, input { font: 0.9em Tahoma, sans-serif; }
        .title { font-weight: normal; }
        .container { width: 100%; max-width: 600px; text-align: center; margin: 0 auto; }
        input { padding: 10px; background: #ffffff; border:  1px solid #ccc; margin: 0;}
        input[type="text"] { width: 300px; }
        .output { border: 1px solid #ccc; padding: 10px;}
</style>  

Now that we have our page styled the code should look something like this.

<!DOCTYPE html>  
<?php 

if (isset($_POST['content'])) {  
    if (!empty($_POST['content'])) { 
        $hash = md5($_POST['content']);
    }

}

?>
<!DOCTYPE html>  
<html lang="en-US">  
<head>  
    <meta charset="utf-8" />
    <title>{{ MD5 Generator }}</title>
    <style type="text/css">
        body, input { font: 0.9em Tahoma, sans-serif; }
        .title { font-weight: normal; }
        .container { width: 100%; max-width: 600px; text-align: center; margin: 0 auto; }
        input { padding: 10px; background: #ffffff; border:  1px solid #ccc; margin: 0;}
        input[type="text"] { width: 300px; }
        .output { border: 1px solid #ccc; padding: 10px;}
    </style>
</head>  
<body>  
    <div class="container">
        <h1 class="title">MD5 Generator</h1>
        <form action="index.php" method="post">
            <input type="text" name="content" placeholder="Enter some text" />
            <input type="submit" name="submit" value="Hash!">
        </form>
        <div>
            <p class="output"><?php echo $hash; ?></p>
        </div>
    </div>
</body>  
</html>  

You can find the source on GitHib

Now we have successfully created an md5 generator. If you have any questions feel free to leave a comment below