HowTo: Create your own Bit.ly website from Scratch – Part 1

Shortening a long URL into a short one is now becoming very famous and especially in sites like twitter and blogs. I was always think that i need to share something that is useful for people and finally decide to show you guys how to create a tiny url site like Bit.ly or Tinyurl.com

First the requirements:

If you are doing on your local machine:

You require the following
1. Apache
2. PHP
3. MySQL

or you can go for complete automation system like WAMP for Windows, MAMP for MAC and LAMP for Linux operating system.

In this whole tutorial i will be using WAMP.

If you are doing on a remote host, it should support:

1. PHP
2. MySQL
3. .HTACCESS

Coding Up:

I will not go in depth about installing the above servers but there are already lot of tutorials on this and still if you want to contribute a tutorial you can be a guest author.

I don’t want to make this post boring so i will go simple and easier for any users. I hope you are a bit familiar with PHP and mySQL and even if you are not you can download and run it but still it becomes like a copy and paste.

Phases that we develop:

1. Allowing User to add a long URL
2. Allowing user to add his own alias name
3. Validating the availability of Alias name
4. Storing the long URL into MySQL
5. Count system
6. Playing with .htaccess
7. Retrieving the long URL

Phases you can expand:
1. Log In System where register users can manage the URL’s added by them
2. Create a graph system using counts and date to let the user know visits to a particular URL

The 1st phase:

Here first let us create a MySQL database. I hope you guys know how to create a mysql data.

I will be creating the database name as “gotiny_base”  and let us Create a table called “url_tables”

These are all the fields a table must have.
Alias – Varchar[20]
URL – text
count – Integer
date – Timestamp

Here is the MySQL Code:

 CREATE TABLE `gotiny_base`.`url_tables` (
`alias` VARCHAR( 20 ) NOT NULL ,
`url` TEXT NOT NULL ,
`count` INT NOT NULL ,
`date` TIMESTAMP NOT NULL
) ENGINE = InnoDB

Now MySQL work is completed now let us goe to HTML and CSS Part.

Here is the CSS code “mystyle.css”:

body{
margin:0;
padding:0px 0 10px;
background:#616E76;
color:#999999;
font-family:"Lucida Grande","Lucida Sans Unicode",sans-serif;
font-size:11px;
}

#wrap{
margin:5em 10em 2em 25em;
width:500px;
}

#box-a{
width:100%;
height:auto;
background:#FFFFFF;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
overflow:hidden;
}

#forms{
padding:1em;
}

#formwhat{
clear:both;
color:#888888;
text-align:right;
}

#forms input.text{
font-size:1.5em;
width:98%;
}

#forms input.alias{
font-size:1em;
width:240px;
}

.button{
background:#2E5D79;
border-color:#DFF2FF #888888 #888888 #DFF2FF;
border-style:solid;
border-width:1px;
color:#FFFFFF;
cursor:pointer;
font-size:1.5em;
margin:0 0 0 1em;
padding:0.2em 8px;
}

.footer a{
color:#FFFFFF;
border-bottom:#FFFFFF 0.1em dotted;
text-decoration:none;
}

Now the HTML code “index.html”:

      Drop your long URL

      

Pick your Alias name (OPTIONAL):

        
      http://gotiny.co.cc/

      

      No white space and minimum 4 characters.




This code is written by Raghunath.J @ Infybit
| Download this Code for FREE

In the above html code we are using a for with two text field one is originaltext field and another one alias. Here in originaltext a user inputs the original URL and in alias he can put his own alias name so that he can remember, but we are making this as optional so that if he leaves that field blank then we must generate a random alias name

Here is the current front end view:

Now we have finished the front end it time to work on our main system. This system will store the original URL and create an alias name.

The PHP Part:
1st the cofiguration page “config.php”:

$Database_Username = "username";
$Database_Password = "password";
$Database_Name = "gotiny_base";
$Database_Host = "localhost";
$DBConn = mysql_connect($Database_Host, $Database_Username, $Database_Password) or die("Unable to connect to our database server. Check your settings.");
$DB_DB = mysql_select_db($Database_Name, $DBConn) or die("Could not connect to database ($Database_Name). Perhaps you don't have the right permissions on this DB. Check your settings");

In the above code we use it for connecting to the database please give you database information like mysql username, password and host. We can import this into our action page.

Now we have created our config page to connecting our website to our MySQL its time to create an action page which actually performs action in storing the original url, throwing errors, creating a random alias name.

Here is the 2nd part of this tutorial