Bookmarklet Storage Application

A couple days ago, I was growing frustrated with how tedious bookmarking had become. Whenever I wanted to bookmark a website I would save it, however I never got to use the link if I was on another computer. The method I used before was to save the link in Gmail and that is quite tedious. I decided I wanted to write a small application for myself that would save my links online.

Bookmarking on the web is nothing new. Sites like Instapaper and Delicious use a bookmarklet to run javascript that sends information to the servers in order to save information about the web site and the contents.

A bookmarklet runs javascript through the click of a bookmark on the browser. Using your favorite browser, you first create a bookmark and enter the name. On the second field where you would usually enter the URL, the code for your javascript behavior would be inserted instead. It would look something like this.

javascript: alert('hello');

Whenever you clicked on the bookmark you would then receive an alert saying hello. The real use in this is that you can grab information from the page you are currently on and do something with it.

In this case, I wanted to save the URL of the website and be able to go back to it later on any computer rather than just one machine.

Here where I had to figure out the work flow and also how application would be used.

1. Go to a web page.
2. Click on the bookmarklet.
3. Save the URL to a server.
4. Login to my database of links and view the URLs.

First going to a web page is not a problem. At this point javascript is enabled in most web browsers, so bookmarklets should work in most web browsers as well. Therefore steps one and two are pretty straight forward. Now I just needed the correct actions in javascript to send my URL to my server. After looking through some examples I figure this bit out. My javascript was something like this:

javascript:function mark(){

var prime=document,

ele=prime.createElement('script'), 

bod=prime.body,

locate=prime.location;

try{

if(!bod)throw(0); 

prime.title='-marked-'+prime.title;

ele.setAttribute('src','MYURL/?url='+encodeURIComponent(locate.href)+'&code=######');bod.appendChild(ele);}catch(e){alert('Please wait until the page has loaded.');

}

}

mark();

void(0)

Basically I am creating a new element in the web page I am browsing. Then I set the attribute with the web page URL I grabbed along with my special code as an unique identifier. As a last step, I append the information to the page. It's the last step which enables the URL to be evaluated. Notice the '/?url=' where I set the URL of the current web page. That is the information I want to save.

Once the information has been sent to my web server, I can run a php script to save the URL to my database.


$url = $_GET['url'];
$userCode = $_GET['code'];

if ($userCode == "######") {

$host = "127.0.0.1";
$username=""; // Mysql username
$password=""; // Mysql password

$db_name="database name"; // Database name
$tbl_name="table name"; // Table name

mysql_connect($host, database username, password)or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

$sql="INSERT INTO table_links (link) VALUE ('".$url."')";
$result=mysql_query($sql);

}


In order to view the links, I created a second page that would display them using a mysql query.

And that was it. I now have a personal application that I can use to bookmark web pages. I can do that without having to register to a social media site like delicious to catalog those links.