Bookmark web page using Codeigniter and jQuery

This tutorial shows how to bookmark a current URL. We have already built-in functionality in most of the browsers and we can bookmark a URL there but it’s also like you have to go to the menu option. The below code do the same thing just in one click on the web page. User is given a link to bookmark the current URL on any web page. This application logic is written in Codeigniter PHP framework but it’s very easy to understand the logic of the code and you can use the logic in simple PHP also. If you have any doubt or query then let me know.

Model

The below model class saves the bookmark info to the database table.

<?php

if (!defined('BASEPATH'))
exit('No direct script access allowed');

/**
* Description of bookmark_model
*
* @author www.roytuts.com
*/
class Bookmark_Model extends CI_Model {

private $bookmark = 'bookmark';

function __construct() {
}

function bookmark($title, $url) {
$ip = $this->input->server('REMOTE_ADDR');
$browser = $this->agent->agent_string();
$data = array(
'ip_address' => $ip,
'bookmark_title' => $title,
'bookmark_url' => $url,
'browser' => $browser,
'created_date' => date('Y-m-d H:i:s')
);
if ($this->db->insert($this->bookmark, $data)) {
return TRUE;
}
return FALSE;
}

}

/* End of file bookmark_model.php */
/* Location: ./application/models/bookmark_model.php */

 

Controller

The below controller class holds the action method and gets executed when a user triggers click on the Bookmark link on a view.

<?php

if (!defined('BASEPATH'))
exit('No direct script access allowed');

/**
* Description of bookmark
*
* @author www.roytuts.com
*/
class Bookmark extends CI_Controller {

function __construct() {
parent::__construct();
$this->load->model('bookmark_model', 'bookmark');
}

function index() {
if (isset($_POST)) {
$title = $_POST['title'];
$url = $_POST['url'];
if (strlen(trim($title)) && strlen(trim($url))) {
$resp = $this->bookmark->bookmark($title, $url);
if ($resp === TRUE) {
echo 'Page successfully bookmarked';
} else {
echo 'Error occurred while bookmarking this page';
}
}
}
}

}

/* End of file bookmark.php */
/* Location: ./application/controllers/bookmark.php */

 

View

In the view we need to place a link for allowing user click on the link to bookmark the URL. Generally the bookmark link should be placed on the template page but if you don’t use template page then don’t worry, you have to place bookmark link on every page wherever you want to place.

Step 1. include jQuery libraries in the header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

 

Step 2. place the Bookmark link generally in the header section so that people can easily find the link.

<form id="bookmark_form" name="bookmark_form" action="#" method="post" style="height: 90px;">
<?php echo form_hidden($this->security->get_csrf_token_name(), $this->security->get_csrf_hash()); ?>
<a class="bookmark" style="color: #0077b3;" href="#" rel="sidebar">Add to Favourite</a>
</form>

The below line

<?php echo form_hidden($this->security->get_csrf_token_name(), $this->security->get_csrf_hash()); ?>

 

In the above code snippets we have a hidden input field with security token value. This is needed only when we have changed the default value(FALSE) for csrf_protection to TRUE at location application/config/config.php

jQuery

This jquery part where actually the URL gets bookmarked and data gets saved to the database. We need the below jquery code when a user clicks on the Bookmark link to bookmark the URL.

$(document).ready(function() {
$("a.bookmark").click(function(e) {
e.preventDefault(); // this will prevent the anchor tag from going the user off to the link
// var bookmarkUrl = this.href;
// var bookmarkTitle = this.title;
var bookmarkUrl = window.location.href;
var bookmarkTitle = document.title;
var cct = $("input[name=csrf_token_name]").val();
var token = $('#bookmark_form').serialize();
var url = "http://localhost/blog/bookmark";
var data = token + "&title=" + bookmarkTitle + "&url=" + bookmarkUrl;

if (window.sidebar) { // For Mozilla Firefox Bookmark
// alert(window.sidebar);
window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "");
$.ajax({
type: "POST",
//async: false,
url: url,
data: data,
dataType: "html",
cache: false,
csrf_token_name: cct,
success: function(resp) {
alert(resp);
}
});
} else if (window.external || document.all) { // For IE Favorite
window.external.AddFavorite(bookmarkUrl, bookmarkTitle);
$.ajax({
type: "POST",
//async: false,
url: url,
data: data,
dataType: "html",
cache: false,
csrf_token_name: cct,
success: function(resp) {
alert(resp);
}
});
} else if (window.opera) { // For Opera Browsers
$("a.bookmark").attr("href", bookmarkUrl);
$("a.bookmark").attr("title", bookmarkTitle);
$("a.bookmark").attr("rel", "sidebar");
$.ajax({
type: "POST",
//async: false,
url: url,
data: data,
dataType: "html",
cache: false,
csrf_token_name: cct,
success: function(resp) {
alert(resp);
}
});
} else { // for other browsers which does not support
alert('Your browser does not support this bookmark action');
return false;
}
});
});

 

In the above code everything is very easy to understand so I will not explain everything but a few.

var url = "http://localhost/blog/bookmark";

 

In the above variable we don’t have index.php because index.php has been removed using htaccess file. For more information click on how to remove index.php.
We have blog segment in the above URL, it means it is the root directory of the project. We have bookmark segment in the URL, it means it is the controller name and after the controller name there is no more segment, so it means that the controller bookmark executes default action method index.

var cct = $("input[name=csrf_token_name]").val();
var token = $('#bookmark_form').serialize();

 

In the above code snippets we are fetching security token value. This is needed only when we have changed the default value(FALSE) for csrf_protection to TRUE for below line at location application/config/config.php

$config['csrf_protection'] = FALSE;

 

Thanks for your reading. Please do not forget to leave a comment.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *