Add Pagination to your Yahoo! BOSS search engine

Ted — Fri, 12 Sep 2008 15:07:52 +0000

Yahoo’s BOSS search API makes it easy for you to create a customized search engine. Yahoo! also has a Design Pattern lLibrary to save time designing your pages. They’ve put a lot of effort into creating the best user experience for search pagination.

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

Display the navigation controls as a row of links.

Present links in the following order: ‘Prev’, page links, ‘Next’.

Display a left arrow after the label ‘Prev’.

Display a right arrow before the label ‘Next’.

Make the arrow(s) clickable.

The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.

When on pages 1-6, the page links should always start at ’1′.

Search Pagination

The rationale for these rules is also interesting:

Displaying arrow graphics helps differentiate the links and provides larger click targets.

Disabled controls add little value in this context since

These links often appear blow the fold.

The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.

Although a “First” link has value, it competes with the functionality presented in the random-access links.

The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.

if(!empty($searchQuery)) { require '/include/pagination.php'; if(isset($_REQUEST['page'])) { $page = $_REQUEST['page']; } else { $page = '1'; } $limit = $count; $targetpage = 'results.php'; $pagestring = '?page='; $summary_name = 'articles'; $placement = 'summary'; // start pagination echo getPaginationString($page, $totalhits, $limit, $targetpage, $pagestring, $summary_name, $placement); }

Here’s what you are working with:

require ‘/include/pagination.php’: Where does the pagination file sit on your server
$page logic: First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.
$limit: How many results will appear on the page
$targetpage: what is the name of your results page? index.php, results.php?
$pagestring: I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…
$summary_name: This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library
$placement: You’ll probably want to use summary. This function also allows “footer” for a simplified output
echo getPaginationString(…): Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST['query']“. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST['query']).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted

The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn

//text strings in strings.php


function getPaginationString($page = 1, $totalitems, $limit = 15, $targetpage = '/', $pagestring = '?page=', $summary_name = 'items', $placement = 'summary',$safeQuery)

{
$countnum = '15';
	// inurl or intitle

	// it should only be three digits long, int, inu, or nox anything else could be a vulnerability

	//int=intitle, inu=inurl, nox=no setting

	if (isset($_REQUEST['inx']) && strlen($_REQUEST['inx']) == 3){

	$inxv = $_REQUEST['inx'];

	}

	else {

	$inxv = '';

	}
	// type of query

	// request type should only be 2 chars, if not we are dealing with an xss attack

	// type options: rc, lo, ve... these represent recipes, local, buzz for insider sites.

	if (!empty($_REQUEST['t']) && strlen($_REQUEST['t']) <= 2) {

		$tid = $_REQUEST['t'];

	}

	else{

	$tid = 've';}

// count should only be a number. don't allow text for xss protection

if (!empty($_REQUEST['count'])) {

	$countnum = number($_REQUEST['count']);

	$limit = $countnum;

}

	// DEFAULTS

	$adjacents = 10;

	//$targetpage = .'.html';

	// VARS

	if(substr($pagestring, 0, 1) != '?') $pagestring = '?' . $pagestring; // If query string is lacking start, add it

	if(substr($pagestring, strlen($pagestring) - 5) != 'page=') $pagestring .= '&page='; // If query string is lacking page var, add it

	$prev = $page - 1;

	$next = $page + 1;

	$firstpage = 1;

	$lastpage = ceil($totalitems / $limit);

	$fiop = ($limit * $page) - $limit + 1; //# of first item displayed in current page

	$liop = min($limit * $page, $totalitems); //# of last item displayed in current page

	$searchstring = "&t=$tid&inx=$inxv";

	$nicetotal = number_format($totalitems);
	/*

		DRAW PAGINATOR

	*/
	// Give it the right class (the footer paginator has no summary and the current page has a different gfx)

	if($placement == 'summary')

		$type = 'summary';

	else

		$type = 'footer';
	// Draw summary

	if($placement == 'summary')

		$pagination .= "

$string_results_page

";
	if($lastpage > 1) // Paginator page selection is drawn only if more than 1 pages are there

	{	
		$pagination .= '

';
		// First page selector

		if ($page > 2) 
		// Previous page selector

		if ($page > 1)

			$pagination .= "
$string_next
";	
		// Page selectors

		if ($page < 4)	//not enough pages to bother

		{

			for ($counter = 1; $counter <= min(5, $lastpage); $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}

		elseif ($page > $lastpage - 3)

		{

			for($counter = $lastpage - min(5, $lastpage); $counter <= $lastpage; $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}

		else

		{

			for($counter = $page - 2; $counter <= $page + 2; $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}
		//next button

		if ($page < $lastpage)

			$pagination .= "
$string_next
";
		//last button

		if ($page < $lastpage - 1) 
		$pagination .= '

';

	}
	$pagination = "
$pagination
";
	return $pagination;
} ?>

//This allows user to easily try the search with different options
// strings are translated defined in separate file for localization

//$string_try_diff_type   = "Try a different type of search";

//$string_try_diff_header = "Didn't find what you were looking for?";

//$string_try_inx         = "Try searching for $safeQuery only in page titles";
function trySomethingelse($safeQuery, $searchQuery, $inx, $tid,$string_try_diff_header, $string_try_diff_type, $string_try_inx, $string_buzz_tab, $string_local_tab,$string_recipes_tab){

if($inx==''){

$tryinx = "
$string_try_inx";

}

$trydiff='';

switch ($tid){

case "rc":

$trydiff = "
$string_try_diff_type $string_local_tab or

$string_buzz_tab";

break;

case "lo":

$trydiff = "
$string_try_diff_type $string_recipes_tab or

$string_buzz_tab";

break;

default:

$trydiff = "

$string_try_diff_type $string_recipes_tab or

$string_local_tab";

}
?>





print 	$tryinx;

print  	$trydiff;

?>




}

?>

I’ve added a few classes to the final output. The previous and next links have class”nextlink” or class=”prevlink”. The current page has the number within a strong tag with class=”current”. Finally, the parent module has class=”pagelinks mod”. This makes it pretty simple to style

Pagination CSS

I’m using the YUI Sam Skin sprite for the tabbed search box. I’ve added a couple arrows to this sprite for my search pagination.

.pagelinks { text-align:center; border:1px solid #ccc; padding:5px 0 0 0; } .pagelinks ul li { display:inline; } .pagelinks ul a, .pagelinks ul strong { display;block; padding:3px 5px; } .pagelinks ul strong { background-color:green; color:#fff; } .pagelinks li.nextlink a,.pagelinks li.prevlink a { padding-right:15px; font-size:120%; font-wieght:bold; background:url(/images/sprite.png) no-repeat 100% -1943px; } .pagelinks li.prevlink a { padding-right:0px; padding-left:15px; background-position:0 -1973px; }

I am also not a PHP expert and welcome suggestions on improving the code.

Download files

Pagination functionality for a BOSS site (.txt) – the php code and sample to insert the pagination.

Background image for visited links

Ted — Fri, 07 Apr 2006 02:42:46 +0000

I’ve been a recent convert to Design Meltdown. The site disects a visual theme and gives examples on how to use them and where they are being used. While exploring the latest post about sketches for the web, I noticed an interesting approach to the visited pages.

The Breakdown

The site has a series of floated divs to display the screenshots. The screenshot is applied as the background image of the div with an inline style. Inside the div is a link that is given display:block and a transparent background image.





SCREENSHOT

Great idea – room for improvement?

While I think the visual design for these screenshots is well thought-out. I don’t like the underlying code. The screenshots are content; miniature representations of other sites. Adding them to the CSS is treating them as decorative elements. The text for each link is: “SCREENSHOT, ” making the page unusable with the styles disabled. To give this page more structure and semantic strength, I would modify the underlying code as such:

HTML Code









Visit www.outhousecomm.com to see how they've used this technique



...

CSS Code

.screenshotlist {float:left; list-style-type:none;} .screenshotlist li {float:left; margin:9px; } .screenshotlist a {display:block; width:146px; height:130px; position:relative; } .screenshotlist a strong {text-indent:-1000em; z-index:20; position: absolute; top:0; left:0; width:100%; height:100%; background:url(screenshot.png) no-repeat -154px 0; } .screenshotlist a:visited strong {background-position:0 0;} .screenshotlist a img {margin:5px 0 0 5px; border:none; z-index:1;}

Benefits of the new code

The screenshots now have some structure; an unordered list with links full of good, crunchy content. Screenreaders and those without CSS will have access to the information. Javascript can be used to target links within the screenshotthumb div to open a new window without the need of inline scripting.

Cavaets: I haven’t tested this code yet. It’s very possible the z-index styles are not required. As an alternative, remove the margin on the image and replace it with a border. Add a rule to change the border color on hover and visited.

Design Meltdown is a great site for learning about design concepts. I’ve gleaned a number of nice ideas from them and would love to say I gave a bit of help back to them.