Make your own URL shortener in PHP - Part 1
In this article I am going to show you how to make a URL shortener using PHP.
In this project we will:
SQL code to create table:
You can also watch this video if you are new to PHPMyAdmin:
How to make Table in PHPMyAdmin: https://youtu.be/DSUep2Lcuu0
The table contains three columns:
1) Id: It is an auto increment column which will be used to generate the short url.
2) Long URL: As the name suggest it will store the long URL.
3) Short URL: As the name suggest it will store the short URL.
I am assuming for now that you can make an HTML form. If you do not know about inserting the data of HTML form in database than you can refer this link.
As of now I have made an HTML form in a file called index.html as shown in the pic below
Moving on…. this form will get submitted to a PHP file which we have named: insert_url.php . On that Page we will handle submitted data i.e Long URL. Its simple logic will be:
If you have any query regarding this article you can surely mention in the comment section, I will try to reply as soon as possible.
Keep reading, keep practicing. Happy coding!
In this project we will:
- Use a MySQL database in which we will insert the information of URL and its short URL.
- We will use PHP for shortening the original URL.
- We will use few Directives / Apache .htaccess code lines to redirect short URL to original URL.
- For this article purpose I am using WAMP server on my local computer, but I have also implemented this on an online server at this URL : http://tx01.comeze.com/urlS . I know this URL itself is too long but it is only for the learning purpose.
- Here is one URL which I created : http://tx01.comeze.com/urlR/m
Database Part:
Let’s get started with making the database in our MySQL database section first. I am naming my database: urlShortener . After that I have made a table named: urlInfo . Below is the code to create that table. You can easily make that table using PHPMyAdmin of WAMP also.SQL code to create table:
1 2 3 4 5 | CREATE TABLE `urlinfo` ( `id` bigint(20) NOT NULL, `long_url` varchar(256) NOT NULL, `short_url` varchar(256) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; ALTER TABLE `urlInfo` ADD PRIMARY KEY (`id`); ALTER TABLE `urlInfo` MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT; |
You can also watch this video if you are new to PHPMyAdmin:
How to make Table in PHPMyAdmin: https://youtu.be/DSUep2Lcuu0
The table contains three columns:
1) Id: It is an auto increment column which will be used to generate the short url.
2) Long URL: As the name suggest it will store the long URL.
3) Short URL: As the name suggest it will store the short URL.
Front-End Part:
For the front end portion we just need a basic html form which has a text box to enter long URL. This form data will be submitted to a PHP page where that data will be inserted into the database table urlInfo which we created created.I am assuming for now that you can make an HTML form. If you do not know about inserting the data of HTML form in database than you can refer this link.
As of now I have made an HTML form in a file called index.html as shown in the pic below
- I have used bootstrap css just to get some good looks. But you can code without it if you want.
- First we will check that is there any data inserted in the text box before submitting. That means we are checking that is textbox not empty?
- This can be done using simple PHP function
- isset($_POST['long_url']) && !empty($_POST['long_url'])
- If the condition comes true than it means that the textbox has some value in it and we must continue with further logic hence now we will setup a connection with database urlShortener which we made at the starting of this tutorial.
- For this project we are going to use PDO Connection which is quiet secure in comparison with its alternate companion mysqli_connect().
- This can be done in only one line:
- $db = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8", $username, $password);
- Obviously we must put this code inside a try { } block so that in case if some error occurs we can catch the exception easily in the catch block.
- As our connection to DB is successful we can move on to insert our long URL to our database table urlInfo like:
1 2 3 | $stmt=$db->prepare("INSERT into `urlinfo` (`long_url`) VALUES (?)"); $stmt->bindParam(1,$_POST['long_url']); $stmt->execute(); |
- Now as I said earlier about the “id” column of our table urlInfo, we will use this column’s data to generate a short URL.
- Also in the same line I mentioned that Column “id” is an auto increment column, which means that its value increases by one each time a new value is inserted in the table.
- Hence when we inserted this Long URL in table urlInfo, a new auto increment Value would have been generated in that row’s “id” column.
- In order to get the value generated by last performed “insert” query, we can use the PDO function:
- $id=$db->lastInsertId(); //HERE $db is our connection variable to DB
- Now we will convert this id to its base 64 equivalent using this function:
1 2 3 4 5 6 7 8 9 10 11 | function returnShortURL($id){ $base="abcdefghijklmnopqrstuvwxyzABCDEFGHIJ KLMNOPQRSTUVWXYZ0123456789_-"; $url=""; while($id>0){ $rem=$id % 64; $id= ($id-$rem) / 64; $url=$base[$rem].$url; } return $url; } |
- We just have to call this function by passing $id value in it, to get our short URL.
- Then we can simply update the value of column “short_url” for that “long_url” row using our auto increment id. (Because auto increment column is always a Primary Key column and Primary key column contains unique and NOT NULL data).
- Using this:
- $stmt=$db->prepare("UPDATE `urlinfo` SET `short_url`=? WHERE `id`=?");
- After this simply use bindParam() method to bind the parameter values in the query and then use execute() method to execute the query.
- Also display the URL value on the landing page as I have done below to show it to the user.
- Here I end the first Part of this tutorial where we have successfully generated a short URL for Long URLs.
- In the upcoming article i.e part -2 I will show you how to capture that URL on our server and redirect it to its original Long URL.
If you have any query regarding this article you can surely mention in the comment section, I will try to reply as soon as possible.
Keep reading, keep practicing. Happy coding!
Comments
Post a Comment