Archive for August 2010

SEO Correction in PEAR::Pager

August 20, 2010, 7:47 pm

Pagination is a common practice to show big volume of data. It is quite important if you are showing dynamically populated data.

For myself I mostly use PEAR::Pager to display paginated data. If you are familiar with this package then you know that you can use 2 types of pagination display, as – sliding and jumping. In case of sliding display with a common practice is to use it with constructor option append:true and urlVar:<variablename>.

Let me show an example of this kind of usage -

  1. $Params = array(
  2.           ‘itemData’ => $dataDetails,
  3.           ‘perPage’ => $ViewPerPage,
  4.           ‘append’ => true,
  5.           ‘separator’ => ‘|’,
  6.           ‘spacesBeforeSeparator’ => 1,
  7.           ‘spacesAfterSeparator’ => 1,
  8.           ‘clearIfVoid’ => false,
  9.           ‘urlVar’ => ‘page’,
  10.           ‘useSessions’ => true,
  11.           ‘closeSession’ => true,
  12.           ‘mode’  => ‘Sliding’,
  13.           ‘importQuery’ => true,
  14.           ‘linkClass’ => ‘LinkStyle’,
  15.           );
  16. $Pager = Pager::factory($Params);
  17. $DataDetailsInArray = $Pager->getPageData();
  18. $PaginationLinks = $Pager->getLinks();

Now if you print/echo the $PaginationLinks, then you will get pagination like 1 2 3 4 etc.

Now let me describe you the problem:
Say your page url is mydata.php. So mydata.php page will show the first page of paginated data. while using the pagination links you will get a page with url mydata.php?page=1. This page shows the first page of paginated data. Now you are having a page with 2 different url like mydata.php and mydata.php?page=1. In SEO this is known as duplicate content. This is not good if you are seriously deal with SEO.

Here is the correction for this. This is simple but effective.

  1. if(isset($_GET[‘page’]) && $_GET[‘page’] > 1)
  2. {
  3.    $PaginationLinks[‘all’] = str_replace(array(‘?page=1"’, ‘&amp;page=1"’), ‘"’, $PaginationLinks[‘all’]);
  4. }

Use this code section just after generating $PaginationLinks. Hope this will help you. As always comments/suggestions are welcome. But spammers please don’t waste your time. :)

Tags: , , , , ,
Category: Php Talk  |  Comment

PaginationSlider – a jQuery plugin

August 11, 2010, 3:20 pm

I have started using jQuery – JavaScript framework almost end of the last year. I have also used it for my last couple of projects. I find it very useful to design/develop complex type of functionality in the client-end. One of the interesting feature of jQuery is that it provides a large number of plugins designed by different developers. They are very useful too.

In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.

It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.

Code example:
Script section -

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2.    <script type="text/javascript" src="jquery.paginationslider.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.    $(‘#sliderMain’).paginationslider({
  6.                                     SliderLeft:‘LeftSlide’,
  7.                                     SliderRight:‘RightSlide’
  8.                                     });
  9. });
  10. </script>

Style section –

  1. .pgSlider {
  2.   width: 80px; overflow: auto; background:#fff; margin:0 auto; position:relative; border:1px solid orange; float:left; display:inline;
  3. }
  4. .pgSlider ul {
  5.   display: block; padding: 0; margin: 0; list-style: none; position:relative;
  6. }
  7. .pgSlider ul li {
  8.   display: block; float: left; background:#E3ECF4;
  9. }
  10. .pgSlider a {
  11.   display: block; text-decoration: none; text-align:center; padding: 5px 8px; color:#1079B1; font-weight:bold; border-right:1px solid #fff;
  12. }

HTML Section –

  1. <pre class="html" name="code">
  2. <div id="paginationContainer">
  3.    <div id="LeftSlide" class="sliderArrow">&lt;&lt;</div>
  4.    <div id="sliderMain" class="pgSlider">
  5.       <ul>
  6.          <li><a href="#1">1</a></li>
  7.          <li><a href="#2">2</a></li>
  8.          <li><a href="#3">3</a></li>
  9.          <li><a href="#4">4</a></li>
  10.          <li><a href="#5">5</a></li>
  11.          <li><a href="#6">6</a></li>
  12.          <li><a href="#7">7</a></li>
  13.          <li><a href="#8">8</a></li>
  14.          <li><a href="#9">9</a></li>
  15.       </ul>
  16.    </div>
  17.    <div id="RightSlide" class="sliderArrow">&gt;&gt;</div>
  18. </div>
  19. </pre>

I will eagerly wait for your reviews on this plugin. Here you can view the demo.

Tags: , , , ,
Category: development  |  Comment