Paging in PHP – PHP Paging Tutorial

Scott — Sun, 30 May 2010 01:56:07 +0000

PHP Paging & Automatic Pagination Tutorial - Paging made easy

I have written a php paging tutorial before. Admittedly, it wasn't the greatest. I don't think I was as clear as I wanted to be. SO I'm trying again. At the end of this tutorial, there is a file named php-automatic-pagination.php.txt
Please download it! It will help you understand the following.

Here is what we will be making..nice, simple pagers! (Dont worry about the Image #x text, thats really not part of the tutorial)

Paging in php and automatic pagination is something every coder has to deal with when coding in php. I mean, you COULD show all results on 1 page and skip the php paging, but paging is necessary to reduce bandwidth and organize content. Paging is very easy to do and I will walk you through it step by step.

PHP automatic paging comes with a few questions:
Paging 1 : Page Size - How many results would you like to display per page?
Paging 2 : How can we bring back proper results in mysql?
Paging 3 : How can we print a pager that will help show the next items.

Decide on your page size - 10, 15, 25, 50, 100. It really depends on what you would like to do. For this tutorial I will use 15.

//we want 15 results per page

$pgsize=15;

//if there is a p variable in the query string e.g: page.php?p=5 we will get this value, else we will use 1 (page 1)

$pg=(is_numeric($_GET["p"]) ? $_GET["p"] : 1);

//lets determine where we would like to get results from
//if $pg is 1, this calculation results in 0 (we want to start from the first record in the database)
//if $pg is 2, this calculation will result in 1*15..which means we will start at the 15th index of the database (row 16)

$start=($pg-1)*$pgsize;

//let us query the database for our results
//you will notice LIMIT and $start and $pgsize.
//On page 1, this query will be SELECT * FROM image_table LIMIT 0,15 - this means return 15 rows starting at row-index 0 (row 1)
//On page 2, this query will be SELECT * FROM image_table LIMIT 15, 15 - this means we will return 15 rows starting at row-index 15 (row 16)
//On page 3, this query will be SELECT * FROM image_table LIMIT 30,15 - this means we will return 15 rows starting at row-index 30 (row 31)
GET IT?!?!?!

$imgs=mysql_query("SELECT * FROM image_table LIMIT $start, $pgsize");

//we will also need the total number of records in our table
//notice there is no limit? we want to know how many records are in the entire table!
//we can use COUNT(*), COUNT(1), or COUNT(fieldname), they will all return the same result

$img_total=mysql_query("SELECT COUNT(1) FROM image_table");

//mysql_query returns a resource id, we can use this to get the row it has returned

$img_total=mysql_fetch_row($img_total);

//the count will be the first field in this row

$img_total=$img_total[0];

//lets determine how many pages we will need
//WRONG!, this will cut off results..why?
//say we have 31 images, and our page size is 15. 31/15= ~2.x...We need to round this result up!

$max_pages=$img_total / $pgsize;

//use this line instead

$max_pages=ceil($img_total/$pgsize);

Once we have all this information, we can use a handy little function I have written named printPager. This function will print out a neat little pager. It uses a helper function named add_querystring_var which was from Added Bytes here:
http://www.addedbytes.com/code/querystring-functions/

Copy/paste this function into your page or into one of your includes:
This will print out your awesome little pager!

PHP Automatic Pagination Function

function printPager($max_pages,$pg){
print '

';
print '';
print '

';
}

Print Pager is called like so:

PHP Pager Styles

We can style this pager using the following:
/*pagers*/

div.clear{clear:both;}
/spacing between numbers and sizes
ul.pager li {
float:left;
margin-right:5px;
font-size:8pt;
padding: 2px 5px 2px 5px;
}

//link color
ul.pager li a{
color:red;
}

//link hover style
ul.pager li a:hover{
text-decoration:underline;
color:red;
}

//current page styling
ul.pager li.current span{
color:red;
}

//previous and next stylings
ul.pager li.prev, ul.pager li.next{

}

Download this tutorials script! It will help you understand. Right click: php-automatic-pagination-tutorial.php and click Save as. Then get rid of the .txt extension and name it php if you would like to run it. You will need to setup a database table to use for the tutorial. It can have an id field and another field.

If you enjoyed this post please leave a comment! I like reading and responding to all my readers!
Thanks

Use HostGator 2010 Coupon Code: 994offhgpackage for $9.94 off your first month!
(First month will cost $0.01)

Wallpaper/Image Gallery Tutorial using HTML/CSS

Scott — Sun, 07 Jun 2009 06:41:51 +0000

One of the most important things ive learned while learning about html and css is the power of the unordered list. I was making a wallpaper gallery for my Death Note website and asked on Web Design Forums.net the best way to go about this. The answer I got changed the way I design and the way I layout my sites.

I'd like to thank Shadowfiend for showing me this technique. Learning it has changed the way i design. Check out his blog here: Shadowfiend | http://shadowfiend.posterous.com/

Unordered lists are a familiar topic of study in beginner html courses, however the markup often looks like

Fruits

Apples

Bananas

Oranges

However, this is not the only way to use them, nor is it the most powerful.
The unordered list is often used many times with Menus (both vertical and horizontal) as well as with image galleries.
I'm not going to show you the menu, because the wallpaper effect is harder, and if you learn it, you'll easily be able to make a menu.
For this, we are going to use any image. Find one on Google Images Search.
Alright now that we have our wallpaper, we will use a layout we created in my last post. If you want, you can go there and download layoutfooter.html, if you are comfortable with css you can just continue reading.

Now, between

we will add an unordered list as so...

Image1

Image2

Image3

For now, dont use actual images, well use those after.
The first thing you may notice previewing these in your browser is that there are bullets. This is the default behavior of the unordered list.
We will take these off.

Between your