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)
Embedding flash using SWFObject
Just to save some of you the headache . I spent a few hours on this today, and I couldn't figure it out, I've embedded flash many times before and I just couldn't figure out why this time it wasn't working.
Anyways
Using jquery found here: http://docs.jquery.com/Downloading_jQuery
and
jquery swfobject plugin found here: http://jquery.thewikies.com/swfobject/downloads
we can semantically embed flash.
Now a few things:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.swfobject.js"></script> <script type="text/javascript" src="jquery.myscript.js"></script>
Make SURE these are in this EXACT order.
Load Jquery>Load its plugins>Load your javascript file.
Now on your page somewhere you will have the div you want to load flash into like so:
<div id="myflashdiv"></div>
Open up jquery.myscript.js and type:
$("document").ready(function(){
$("#myflashdiv").flash({
swf: 'flash/myflash.swf'
});
});
Directory Structure:
flash -myflash.swf script -jquery.myscript.js index.html
This assumes you have a flash folder, and the file myflash.swf in that folder.
The path in this case is NOT relative to the script your working in. Think about it this way:
the flash method probably uses document.write to output the correct object tag for your flash.
If your page is on the root of your site and the script is in scripts/jquery.myscripts.js you would think the source for the swf would be "../flash/myflash.swf". But think about that..in index.html if you look at the output it would say: src="../flash/myflash.swf", you should be able to see why thats wrong if you look at the above directory structure.
Anyways, if you didn't know swfobject behaves this way, this could take you quite some time to figure out.
Hope I saved you that time
Troubleshooting
Tip 1: Make sure the load order is : jquery, jquery.swfobject.js, then your script.
Tip 2: Make sure the src you're passing in is relative to the page you're embedding on, NOT relative to the script file you're working in.
Wallpaper/Image Gallery Tutorial using HTML/CSS
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
<h1>Fruits</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
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 <div id="content"> we will add an unordered list as so...
<ul class="gallery">
<li>Image1</li>
<li>Image2</li>
<li>Image3</li>
</ul>
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 <style> tags, add these rules:
ul.gallery{
width: 100%; /*this can be changed, its at 80% for better visualization at the moment*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
border: 1px solid blue; /*this helps us visualize while were laying out, this will be removed in the final product*/
}
Alright, now that we have styled our outer container, lets style our list items.
ul.gallery li{
border: 1px solid red; /*visualization*/
float: left; /* what this does is place each li out of normal flow, and as far left as it can. Since each li is floated left they will sit next to each other*/
width: 30%; /*set a width*/
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
}
Heres what you should have at the moment (your list items will be higher)
Wallpaper CSS Layout Tutorial 1
The list items are right next to each other. We can add a margin-left on the li items to solve this. Lets do that now.
ul.gallery li{
/* keep all existing rules */
margin-left: 2%;
}
You can work in px, or %. If your working in a fixed width layout, it does not really matter. If you refresh and take a look, you'll notice were looking a lot better. Now, lets add our actual images.
Your unordered list will now look like this:
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper1"/></li>
<li><img src="wall.jpg" alt="Wallpaper2"/></li>
<li><img src="wall.jpg" alt="Wallpaper3"/></li>
</ul>
Dont worry about the images sticking out...we will fix this.
Ideally, you should have a full size image, and a thumbnail image. This allows for faster load times. By reducing the size of a pictures height and width in css, you do NOT reduce the load time, the full image is loaded, and then scaled, so best practice = have 2 sizes!
now we will add rules to style our image
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
You'll notice theres a little space beneath the image, dont get rid of it! We have plans for this 
. Also, a lot of the above was included because it looked nice. All of the above are optional, the image would just be aligned left with no padding/border.
Modify your markup so it looks like this
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
We will now style the p tag. Remember the margin-bottom on the img ? This will push this down 2pixels, so we have space
ul.gallery li p{
margin: 0 auto; /* center the box*/
text-align: center; /* center the text within the box*/
width: 192px; /*set a width for our label*/
border: 1px solid #ccc;
}
Copy and paste the li's. So that you double/triple them, like so.
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
</ul>
Here you'll notice that the spacing between rows is none.
We add this rule to ul.gallery li{ margin-bottom: 5px;}
Now, take out the borders from ul.gallery and ul.gallery li And were done
here is the full css
-------------------------------------------------------------------------
ul.gallery{
width: 100%; /*this can be changed*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
}
ul.gallery li{
width: 30%;
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
margin-left: 2%;
margin-bottom: 5px;
float: left;
}
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
ul.gallery li p{
border: 1px solid #ccc;
width: 192px; /*set a width for our label*/
text-align: center;
margin: 0 auto;
}
AND the final product:
CSS Wallpaper Tutorial
Hope you enjoyed.
Feel free to comment/make requests.
Download: wallpaper_tut.html
Right click and click Save Link As..to Download
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!