Paging in PHP – PHP Paging Tutorial
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
print '<div class="clear"></div>';
print '<ul class="pager">';
$i=1;
if($pg!=1){
$url=$_SERVER["SCRIPT_NAME"];
$url.=add_querystring_var("?".$_SERVER["QUERY_STRING"], "p", $pg-1);
print '<li class="prev"><a href="'.$url.'"><<</a></li>';
}
while($i<=$max_pages){
$url=$_SERVER["SCRIPT_NAME"];
$url.=add_querystring_var("?".$_SERVER["QUERY_STRING"], "p", $i);
if($pg==$i){
print '<li class="current">';
print '<span>'.$i.'</span>';
print "</li>";
}else{
print "<li>";
print '<a href="'.$url.'">'.$i.'</a>';
print "</li>";
}
$i++;
}
if($pg!=$max_pages){
$url=$_SERVER["SCRIPT_NAME"];
$url.=add_querystring_var("?".$_SERVER["QUERY_STRING"], "p", $pg+1);
print '<li class="next"><a href="'.$url.'">>></a>';
}
print '</ul>';
print '<div class="clear"></div>';
}
function add_querystring_var($url, $key, $value) { $url = preg_replace('/(.*)(\?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&'); $url = substr($url, 0, -1); if (strpos($url, '?') === false) { return ($url . '?' . $key . '=' . $value); } else { return ($url . '&' . $key . '=' . $value); } }
Print Pager is called like so:
PHP Pager Styles
/*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)
Tableless Design – Basic Fixed-width layouts using HTML and CSS
Tableless Design - Basic Layout using HTML and CSS
Alright, well it seems a lot of people are still using table-full layouts on their websites.
Now, for cross browser compatibility tables actually work a little better, however, they are NOT the proper way to lay something out.
Tables should only be used for data display and not for layout purposes.
Using CSS for layout is nothing to be scared of, its actually a lot easier than figuring out all the tables.
Take a look at one of my websites: Death Note Online . This website was entirely layed out with CSS, every last bit of it.
This tutorial assumes you have some basic knowledge of marking up pages using HTML and styling them using CSS.
Lets get started:
Most websites use a header + 2 column layout. So that's what were going to be marking up. Open up your favorite editor (I recommend Notepad++ if you want a really light editor) and lets start. I'm not going to bother including doctype, but any page created for the web SHOULD have it.
<html>
<head>
<title>Hello, CSS Layout!</title>
<style>
</style>
</head>
<body>
</body>
</html>
The style tags really shouldnt be in your head, you should put them in a stylesheet and link to the stylesheet with this tag
<link href="styles/styles.css" rel="stylesheet" type="text/css">
Now that we got our basic structure you should know how to mark up the sections.
The <div> tag, which stands for division, is a way to divide your site into sections.
As you know you can add a class to any item and in your css style that class using .className{ /*css styles here*/}, you can also add
a UNIQUE id to any item on the page and style that id using #idName{ /* css styles here */}. We're going to add sections to our website and give them id's of wrapper, header, content, leftMenu, and footer.
Note: Since these items only occur once per page, we're using ID's not classes.
WRAPPER
In the body section, we're going to add our wrapper. Since this is fixed width, we are going to give this wrapper a defined width. This will allow it to display properly across resolutions. We are going to support 1024x768 and above.
Add this between your body tags
<div id="wrapper">
</div>
BORDER, this property is your friend! When i lay out pages i ALWAYS turn borders on on my divs, it just lets you visualize better. When you're done you can take them off.
Between the style tags add these styles
#wrapper{
margin: 0 auto; /*center in compliant browsers*/
width: 960px; /*960px is good for 1024x768 with no horizontal scrollbar appearing*/
border: 1px solid blue;
}
If you open this in Firefox, you will see a blue border, dont worry about the height, this will expand as we add more stuff to it! If you open this in IE7 you'll notice its not centered properly. That's because IE uses text-align to center elements. Basically, if a container has text-align: center applied to it, any items in that container will be centered. How do we fix this??
Between styles we add
body{text-align: center;} /* this will center the div, but it ALSO centers text inside it..so to counteract this we apply a text align to our wrapper*/
#wrapper{
margin: 0 auto;
text-align: left;
width: 960px;
border: 1px solid blue;
}
If we open it up in IE and FF, we'll see they look pretty similar, but not the same...WHY!??!?!
Browser differences.
We add this to our css
*{margin: 0; padding: 0;}
This resets margin and padding on all elements, and normalizes the look across browsers.
Ok, so next steps! Now that we have our wrapper, we need a header!
The Header
In between our wrapper div tags, were going to add our header markup.
<div id="header">
<p>THIS IS OUR HEADER</p>
</div>
Styling between the style tags
#header{
width: 960px; /* width of our wrapper, you can also use 100%*/
height: 100px;
border: 1px solid red;
}
We should now have something like this:
The Menu
We're going to add our menu bar.
Add this after your header div like so:
<div id="header"></div>
<div id="leftMenu">LEFT MENU</div>
NOW THE STYLING :O
#leftMenu{
width: 150px;
height: 400px;
border: 1px solid orange;
}
You should be able to see the layout coming together a little better if you preview it with your browser. The reason I add the borders is because it lets you do this. Just seeing words is not enough sometimes, you need to know exactly where a box is , and be able to see its outer bounds.
I intentionally left certain styles out of the left menu, because it is gonna give you a better idea of layouts and how they work.
Next, we will put our content div in
Add this below the ending tag of the leftMenu div.
<div id="content"></div>
Your body should look like this:
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="leftMenu">
Left MENU
</div>
<div id="content">
CONTENT
</div>
</div>
</body>
Now we style the content div!
The wrapper is 960px and our left menu is 150px.
960-150 = 810px.
We have 810 pixels to work with, and to be safe we're gonna leave 10 out for margins and paddings.
#content{
width: 800px;
border: 1px solid purple;
}
We're now left with:
You will notice that the content div is underneath the menu and not to the right of it. The reason for that is that block elements (div are block elements) take up their own line. Since the leftMenu takes up its own line, anything that comes after it will get put on the next available line. To have the content div be on the same line as the leftMenu we will float the leftMenu left. This takes it out of normal flow.
Add this style:
#leftMenu{
keep all styles already
float: left;
}
You'll notice that in IE the site looks ok, and firefox it looks awful.
...well believe it or not firefox is acting appropriately and IE is acting bad.
Lets fix this. Since our menu is 150px wide, we will have to push the content div left 150px + extra if you want space in between (remember the 10pixels i left out so we can play with them?
Add this style:
#content{
margin-left: 155px;
}
Looking a little better.
One thing youll notice is that in Firefox, the orange menu sticks out of the wrapper.
The reason for this is that the leftMenu is floated left, and floated elements are not part of normal flow, therefore their height does NOT expand its parent container. The reason IE works is because they have programmed it to look at the left floated height, and expand the divs themselves, dont ask me why.
At this point, you got a pretty decent layout and the content div will stretch based on the elements you put into it. Try adding <p>This is text</p> into the content div, and copy paste it about 10-15 times. You'll notice the div stretch. If you want to leave this layout (without a footer) you can. Add this after the content div.
<div class="clear"></div>
Now in your css add this:
.clear{clear: both;}
The options for clear: are ...left, right, both.
What this does is put a div in that clears any left and right floated divs. Since it clears the left floated leftMenu, it will be put underneath it (allowing the wrapper div to expand properly).
FINAL LAYOUT WITHOUT FOOTER
Download layoutnofooter.html
(Right click and click Save Link As...)
Now, what if we want a footer. Change the <div class="clear"> to <div id="footer"></div>.
Then style it
#footer{
clear: both; /*placed under any floated elements*/
width: 960px; /* entire width of our wrapper */
height: 50px;
border: 1px solid yellow;
}
FINAL PRODUCT WITH FOOTER:
Download layoutfooter.html
(right click and click save link as...)
Once you have this layout, you can add a banner to the header div, menu links to the leftMenu div, content to the content div, and copyright information to the footer.
Dont forget to turn borders off
Enjoy and comment!
upcoming tutorials
: Simple menus using unordered lsts
: Wallpaper/image gallery using unordered lists and slimbox!
Rounded Corners Using CSS Technique
This is a neat lil trick, that doesnt take to long to do, but makes a site look that much more professional.
It works across browsers, and is used quite often.
It may become obsolete once IE and other browsers decide to support the new set of CSS3 specs. Until then this is a good technique to depend on. If designing for Mozilla based browsers, there is a css property in the making named border-radius.
-moz-border-radius will allow you to set a rounded border on any block object.
This technique however, involves using 4 images and 3 divs.
Here are the images we will be using:
Top Left
Top Right
Bottom Left
Bottom Right
Open up notepad, or notepad++, or whichever editor you use.
Type
<html>
<head>
<title>Rounded Corner Tutorial</title>
</head>
<body>
<body>
<html>
In the head section add:
<style>
body{background-color: #e0e0e0;} //these are zeros not o's
</style>
Save as .html and view it in your browser. You should have a gray page.
Now, between your body tags type this
<div id="roundDiv">
This is the content
</div>
And add this to your style definition
#roundDiv{background-color: white; width: 800px;}
Now, previewing in browser you should see a gray page with a white div containing the words "this is content".
We are going to add a div to roundDiv. Since this is the first item in round div, it starts at the top left corner.
In this top div, we will add the image for the top left corner.
Add this to roundDiv Before "this is content"
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
After this line would come the content.
Add this to roundDiv After "this is content"
This holds your bottom left image
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
Now, between your style tags add this definition
.corner{display: block; width: 16px; height: 16px;} //use your actual values here, for this example our images are 16x16
So far our html page should look like this:
<html>
<head>
<style>
body{background-color: #e0e0e0;}
#roundDiv{width: 800px; background-color: white;}
.corner{display: block; width: 16px; height: 16px;}
</style>
</head>
<body>
<div id="roundDiv">
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
This is content
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
</div>
</body>
</html>
If you preview this in your browser you should see a white div, with rounded corners on the left side.
This in itself is a neat div and you don't have to add the right corners. This effect is good in itself.
To get the rounded corners we really want, we are gonna set a background image on the top and bottom divs.
We will set a background image url, set it to not repeat/tile, and set its position accordingly.
To your style tags add this definition for the top right corner
.roundTop{
background-image: url('tr.gif');
background-repeat: no-repeat;
background-position: top right; // specify to align top, and to the right of the div
}
Now for the bottom right corner
.roundBottom{
background-image: url('br.gif');
background-repeat: no-repeat;
background-position: bottom right; // specify to align bottom, and to the right of the div
}
Your entire html file should look like this:
<html>
<head>
<style>
body{background-color: #e0e0e0;}
#roundDiv{width: 800px; background-color: white;}
.corner{display: block; width: 16px; height: 16px;}
.roundTop{
background-image: url('tr.gif');
background-repeat: no-repeat;
background-position: top right; // specify to align top, and to the right of the div
}
.roundBot{
background-image: url('br.gif');
background-repeat: no-repeat;
background-position: bottom right; // specify to align top, and to the right of the div
}
</style>
</head>
<body>
<div id="roundDiv">
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
This is content
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
</div>
</body>
</html>
This is the result (low-quality pic):
And there you have it, easy rounded corners!