Link Shortcut

 

Short links save a lot of space when exhibited as they are small and clear. Also, it is difficult for users to mistype shorter links. How does a URL shortener work? The process of URL shortening is pretty simple. URL shorteners generate a random string, map the main URL to the shortcode and provide a new URL. The two URLs are put in the database. When you hit the shortened URL, the database checks the shortcode and redirects you to the main URL. The URL shortener gets a long URL and returns a short URL. In this scenario, we will create an input area to enter the long (original) URL. Upon hitting the button, the system will generate the short URL. Also, it will be possible to edit and save the shortened URL. The delete function will also be available. You can build a URL shortener with any programming language and database. In this tutorial, we will use HTML, JavaScript, PHP, and MySQL. Building a URL shortener To create a URL shortener, we’ll need a database and a server. In this guide, we’ll use a WAMP server, which means we will host the API in the Windows operating system. WAMP (Windows, Apache, MySQL, and PHP) can be explained as follows: Windows - specifies that the system is compatible with Windows devices. Apache - this is the program that hosts applications. MySQL - provides a database for your application’s content. PHP - a language that creates dynamic content. Step 1: Navigate to the WAMP server Navigate to the WAMP server. The directory is automatically created during installation, and is located in local disk C (c:\wamp\www). In the www directory, folders referred to as projects are created. These come in handy in storing HTML, CSS, JavaScript, and PHP files. To begin creating the project, create a folder and name it shorten-url. Step 2: Create a PHP file To create a URL shortener, we’ll need a text input area and a button, then add the script tag. Create the index.php file inside the shorten-url directory and open it using VS code. To create the text input area and the button, we will use the code below:

Total Links: 10 & Total Clicks

Shorten URL

Original URL

Clicks

Actions

Below is the input area: Step 4: Database configuration Create a file connect.php and add database credentials in it. connect_error) { die("Connection failed: " . $conn->connect_error); } ?> Step 5: Create a short URL with PHP In the input area, we enter the long URL, and after hitting the button, the short URL is generated. The following code creates a short URL using PHP and MySQL. $val){ $u = mysqli_real_escape_string($conn, $key); $new_url = str_replace('/', '', $u); } $sql = mysqli_query($conn, "SELECT original_url FROM url WHERE short_url = '{$new_url}'"); if(mysqli_num_rows($sql) > 0){ $sql2 = mysqli_query($conn, "UPDATE url SET clicks = clicks + 1 WHERE short_url = '{$new_url}'"); if($sql2){ $original_url = mysqli_fetch_assoc($sql); header("Location:".$original_url['original_url']); } } } ?> 0){; ?>

Shorten URL

Original URL

Clicks

Action

50){ echo $domain.substr($row['short_url'], 0, 50) . '...'; }else{ echo $domain.$row['short_url']; } ?>

60){ echo substr($row['original_url'], 0, 60) . '...'; }else{ echo $row['original_url']; } ?>

Shorten URL The following code generates a unique random id for the long URLs. This is how we can generate the unique id: 0){ echo "Something went wrong. Please generate again!"; }else{ //insert typed url into the table with short url $sql2 = mysqli_query($conn, "INSERT INTO url (original_url, short_url, clicks) VALUES ('{$original_url}', '{$ran_url}', '0')"); if($sql2){ $sql3 = mysqli_query($conn, "SELECT short_url FROM url WHERE short_url = '{$ran_url}'"); if(mysqli_num_rows($sql3) > 0){ $short_url = mysqli_fetch_assoc($sql3); echo $short_url['short_url']; } } } } ?> Step 7: Redirect to long URL The short URL should redirect to the long URL. The following code redirects a user from short URL to the long URL. let domain = "localhost/url/"; shortenURL.value = domain + data; copyIcon.onclick = ()=>{ shortenURL.select(); document.execCommand("copy"); }

50){ echo $domain.substr($row['short_url'], 0, 50) . '...'; }else{ echo $domain.$row['short_url']; } ?>

Step 8: Function save URL After creating the short url that generates a unique id. The unique id can be edited and saved. Create save-url.php file then copy and paste the code below: Below is how the save functionality works: Save URL Step 9: Function delete URL It is also possible to delete a shortened URL that is saved in the database. Create delete.php file, then copy and paste the code below: Below is how delete functionality works: Delete URL