How to Write a Basic PHP, HTML & .htaccess URL Shortener

Here’s how to write your very own URL shortening service in HTML and PHP.

Recently, I began looking for a self hosted URL system – but I couldn’t find a good one. They were all too heavy, too hard to install or just a royal pain in the arse. So, I decided to write my own very basic one.

All that this project does is take a couple of inputs through a form, and throw them into a .htaccess file along with a couple of other lines of code.

For this tutorial, I’ll be just putting the HTML and PHP – no CSS. I used Bootstrap on my URL shortener site, and it looks pretty good.

1. File Structure

In your folder, create the following files.

  • url.html
  • act.php
  • .htaccess

.htaccess may already be created but hidden – you do not need to worry if it does already exist.

2. The HTML Form – Frontend

url.html

The HTML form is super basic, add your own CSS!


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>New Short URL &laquo; URL Shortener</title>
	<meta name="description" content="URL Shortener">
	<meta name="author" content="jacobsammon.com">
</head>

<body>				
	<form autocomplete="off" role="form" action="act.php" method="post">
		<label for="longurl">http://</label>
		<input name="longurl" required="required" type="text" placeholder="google.com"/>
		<label for="shorturl">https://your-url-shortner.com/</label>
		<input name="shorturl" required="required" type="text" placeholder="ggl"/>
		<br>
		<input name="submit" type="submit" value="Shorten">
	</form>
</body>

</html>

3. PHP – Backend

act.php

Now it’s time to make everything work!

    <?php
    if(isset($_POST['submit']))
    {
    $long = $_POST['longurl']; // LONG URL
    $short = $_POST['shorturl']; // SHORT URL
    $space = " ";
    $enter = "\r\n";
    $slash = "/";
    $http = "http://";
        
    $myfile = fopen(".htaccess", "a") or die("Unable to open file!");
    fwrite($myfile, "Redirect 301");
    fwrite($myfile, $space);
    fwrite($myfile, $slash);
    fwrite($myfile, $short);
    fwrite($myfile, $space);
    fwrite($myfile, $http);
    fwrite($myfile, $long);
    fwrite($myfile, $enter);
    fclose($myfile);

    }
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Short URL Added &laquo; URL Shortener</title>
	<meta name="description" content="URL Shortener">
	<meta name="author" content="jacobsammon.com">
</head>

<body>				

<h1>Success</h1>
</body>

</html>

Optional Extra for Success Message

[OPTIONAL] act.php

We can change the success message easily… a good option is to print out the old and new URL, as seen below!

 <?php
    if(isset($_POST['submit']))
    {
    $long = $_POST['longurl']; // LONG URL
    $short = $_POST['shorturl']; // SHORT URL
    $space = " ";
    $enter = "\r\n";
    $slash = "/";
    $http = "http://";
        
    $myfile = fopen(".htaccess", "a") or die("Unable to open file!");
    fwrite($myfile, "Redirect 301");
    fwrite($myfile, $space);
    fwrite($myfile, $slash);
    fwrite($myfile, $short);
    fwrite($myfile, $space);
    fwrite($myfile, $http);
    fwrite($myfile, $long);
    fwrite($myfile, $enter);
    fclose($myfile);

    }
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Short URL Added &laquo; URL Shortener</title>
	<meta name="description" content="URL Shortener">
	<meta name="author" content="jacobsammon.com">
</head>

<body>				

<center><h1>Success!</h1><p><a href="https://your-url-shortener.com/<?php echo $short; ?>">https://your-url-shortener.com/<?php echo $short; ?></a> &#8594; <a href="https://your-url-shortener.com/<?php echo $short; ?>">http://<?php echo $long; ?><a></p><p><a href="url.html">	&#8592; Add Another</a></p></center>
</body>

</html>

Important Security Notice: This should only be used by you, personally. A hacker could write code directly into .htaccess or redirect all traffic heading to your website if they gained access – or worse. I recommend you use a PHP and MySQL password protected system to prevent unauthorised access; you can find a tutorial on how to set one of these up here.

Frequently Asked Questions

  1. How do I remove a link?
    • Go into the .htaccess file and delete the line
  2. How do I replace a link?
    • The same way you added it! It’ll just be replaced.
  3. Is this secure?
    • Please read the security notice!

Okay, that’s it! If you need any support with this, do get in touch by Twitter or Email!