dynamic display. with include files

Question

ellenski 0 Light Poster

13 Years Ago

hi,

the layout of my site is. there are five files (4 are inside the includes folder):
index.php , header.php , pageniavigation.php , thumbnail.php , footer.php

the header file is where you select the number of images you want to be displayed per page.

the pagenavigation file contains the page links. ex: PREV, PAGE-1, PAGE-2, PAGE-3, NEXT

the thumbnail file contains the pictures

and of course the footer file for the footer

my question is how to write in php code the following:

1.) when i select 4 images to be displayed per page, the number of pictures displayed will be changed from 3 to 4.
-how do i do this?- -and on which file do i put the code into?-

2.) when i click the page 2 or page 3, it will go to the next corresponding set of images. it should also be the same for the PREV and NEXT clickable link.
-how do i do this?- -and on which file do i put the code into?-

here's my code:

index.php

<html>

<head>

<link rel="stylesheet" type="text/css" href="index.css" />
<title></title>

</head>

<body>
<?php	
	include("includes/header.php");
	include("includes/pagenavigation.php");	
	include("includes/thumbnail.php");
	include("includes/footer.php");
?>	
</body>

</html>

here are the files inside the includes folder.

header.php

<html>

<head>

<title></title>

</head>

<body>
	<div id="upperbox">
        <b>Images Per Page</b>
		<select id="set" name="pages">			
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>			
		</select>
		<input name="new" type="submit" value="Set"/>
    </div>
</body>

</html>

pagenavigation.php

<html>

<head>

<title></title>

</head>

<body>
	<div><b><ul id="pagesbox">
		<li><a href="#">Prev</a></li>
		<li><a href="#">P-1</a></li>
		<li><a href="#">P-2</a></li>
		<li><a href="#">P-3</a></li>
		<li><a href="#">Next</a></li>
	<ul></b></div>
</body>

</html>

thumbnail.php

<html>

<head>

<title></title>

</head>

<body>	
	<div><b><ul id="images">		
		<li><img src="images/star-field.gif" id="pic"><p>This is pic 1</p></li>
		<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 2</p></li>
		<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 3</p></li>					
	<ul></b></div>		
</body>

</html>

footer.php

<html>

<head>

<title></title>

</head>

<body>	
	<div><b>TESTING 1 2 3.</b></div>		
</body>

</html>

I'm really confused on what to do & I hope someone can help me. Thanks! =)

php

2 Contributors
13 Replies
199 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by madCoder

madCoder 17 Junior Poster

13 Years Ago

Each of your include files is not a complete document, they are snippets/sections of a document that will be included in index.php. Therefore, those other files do not need doctype, html, head, and body tags. If you view the source of your current output, you'll find these are being repeated as though multiple html pages were included into one. This is not valid html.

1.) In header.php, make that dropdown its own form. (wrap form tags around it with appropriate action pointing back to index.php. Make the form method be "GET" since this puts the result into the URL (where it can be passed again and again as needed.)
The first time somebody visits the page, $_GET ( 'pages' is a vague name but it is what you have in your post) won't have a value, so set a default of 3 in index.php.

<?php
if(isset($_GET['per']))
{
   $perPage = intval($_GET['per']);
} else { $perPage = 3; }
?>

2. ) To keep track of what page you are on you can have a querystring variable that tracks pages. Let's call it 'page' for convenience and we access it as $_GET.
In index.php have code like this:

<?php
if(isset($_GET['page']))
{
	$page = intval($_GET['page']);
} else { $page = 1; }
?>

There's not enough in your code to tell me how you will use pages, but with the variables $page and $perpage in place you can construct a valid mysql query for example:

SELECT * FROM pics
LIMIT ($page-1)*$perPage, $perPage

Your pagination links can make use of these values:

<?php
$maxPages = 5;  // You'll need set this another way, like based on how many pictures you have in the database or in a folder.  I set it here just so the example 'works'.
$prevPage = $page > 1 ? $page - 1 : 1;
$nextPage = $page >= $maxPages ? $page + 1 : $maxPages;
?>
<a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a>
<a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a>

See also:
LIMIT in mysql: http://dev.mysql.com/doc/refman/5.0/en/limit-optimization.html

I hope this is enough info to get you started. Let me know if you need more help.

madCoder 17 Junior Poster

13 Years Ago

For displaying the thumbnails, you'll need a loop. If the image paths are stored in a database, query the database for the appropriate range of pictures and then loop over the results.

madCoder 17 Junior Poster

13 Years Ago

Well, you set the navigation based on how many possible pages you might have. If $arr contains a list of all the possible images, you can determine how many pages there are: $totalPages = ceil(count($arr) / $perPage); Then use a for loop to create each link:

<ul id="pagesbox">
<li><a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a></li>
<?php
$totalPages = ceil(count($arr) / $perPage);  // ceil() rounds up.
for($i=1;$i<=$totalPages;$i++)
{
   echo '<li><a href="?page='.$i.'&per='.$perPage.'">'.$i.'</a></li>';
}
?>
<li><a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a></li>
</ul>

Edited 13 Years Ago by madCoder because: Added in missing previous/next links.

madCoder 17 Junior Poster

13 Years Ago

I've edited the code to include the prev/next buttons.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ellenski 0 Light Poster · Answer 1 · 2011-01-19T18:42:31+00:00

I think I understand what you are trying to explain to me. My last question is, what do I do with the thumbnail.php?

for example, the default is 3 pictures per page.
as you can see in my thumbnail.php file, i put there 3 images to be displayed.
if 4 images per page were selected, how do i add another pic to the page?
and not just displaying immediately the 3 pics?
because what i have there is only:

<div><b><ul id="images">		
	<li><img src="images/star-field.gif" id="pic"><p>This is pic 1</p></li>
	<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 2</p></li>
	<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 3</p></li>
<ul></b></div>

also, how do i set it so that when i click on page 2,
a different set of pics will be displayed.
meaning no pics that were displayed on page one would be displayed on page 2 and so on.

here's my final code using your suggestions above.

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title></title>
</head>
<body>
<?php
	if ( isset($_GET['page']) ) {
		$page = intval($_GET['page']);
	}
	else {
		$page = 1;
	}
?>
<?php	
	include("includes/header.php");
	include("includes/pagenavigation.php");	
	include("includes/thumbnail.php");
	include("includes/footer.php");
?>	
</body>
</html>

header.php

<div id="upperbox"><form action="index.php" method="get">
	<?php
	if ( isset($_GET['per']) ) {
		$perPage = intval($_GET['per']);
	}
	else {
		$perPage = 3;
	}
	?>
	<b>Images Per Page</b>
	<select id="set" name="pages">			
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>			
	</select>
	<input name="new" type="submit" value="Set"/></form>
</div>

pagenavigation.php

<div><b>
	<?php
	$maxPics = 5;
	$prevPage = $page > 1 ? $page - 1 : 1;
	$nextPage = $page >= $maxPics ? $page + 1 : $maxPics;
	?>
	<ul id="pagesbox">
		<li><a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a></li>
		<li><a href="#">P-1</a></li>
		<li><a href="#">P-2</a></li>
		<li><a href="#">P-3</a></li>
		<li><a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a></li>
	<ul>
</b></div>

thumbnail.php

<div><b><ul id="images">		
	<li><img src="images/star-field.gif" id="pic"><p>This is pic 1</p></li>
	<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 2</p></li>
	<li><img src="images/ff7wallpaper3.jpg" id="pic"><p>This is pic 3</p></li>					
<ul></b></div>

footer.php

<div>
	Blah..Blah..Blah..
</div>

ellenski 0 Light Poster · Answer 2 · 2011-01-20T00:08:55+00:00

i used an array in the thumbnail file. my only problem is how to get the number of items per page from the header file to the thumbnail file.

here's the code that works w/out fetching data from header file:
thumbnail.php

<div id="images">
<?php
	$arr=array();
	for ($i=1;$i<7;$i++) {
		$arr[$i]="images/pic$i.jpg";
		echo "<img src=".$arr[$i]." id=pic>";
	}	
?>
</div>

i then edited my code to fetch the number of images per page that was selected from header.php but it won't work. i'm a bit confused on what the correct code is supposed to be. here's what i've got:
thumbnail.php

<div id="images">
<?php
	if (isset ($_GET[$perPage])) {
		$perPage = intval($_GET['per']);
		$arr=array();
		for ($i=1;$i<$perPage;$i++) {
			$arr[$i]="images/pic$i.jpg";
			echo "<img src=".$arr[$i]." id=pic>";
		}
	}
?>
</div>

ellenski 0 Light Poster · Answer 3 · 2011-01-20T00:59:26+00:00

nevermind. i finally figured it out. here's what's in my header & thumbnail file:

header.php

<div id="upperbox">
	<form action="index.php" method="get">
	<?php
	if ( isset($_GET['per']) ) {
		$perPage = ($_GET['items']);
	}
	else {
		$perPage = 3;
	}
	?>
	<b>Images Per Page</b>
	<select id="set" name="items">			
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>			
	</select>
	<input name="per" type="submit" value="Set"/>
	</form>
</div>

thumbnail.php

<div id="images">
<?php
	$arr=array();
	for ($i=0;$i<$perPage;$i++) {			
		$arr[$i]="images/pic$i.jpg";
		echo "<img src=".$arr[$i]." id=pic>";
	}
?>
</div>

the only problem i have left is the pagenavigation.php
how do i make it go to another page? or in other words, how do i make it display a different set of images when i click the link "P-2"
here's the pagenavigation.php code:

<div><b>
	<?php
	$maxPics = 6;
	$prevPage = $page > 1 ? $page - 1 : 1;	
	$firstPage = ;   /*i don't know what to put here*/
	$secondPage = ;  /*i don't know what to put here*/
	$thirdPage = ;   /*i don't know what to put here*/
	$nextPage = $page >= $maxPics ? $page + 1 : $maxPics;
	?>
	<ul id="pagesbox">
		<li><a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a></li>
		<li><a href="?page=<?=$firstPage?>&per=<?=$perPage?>">P-1</a></li>
		<li><a href="?page=<?=$secondPage?>&per=<?=$perPage?>">P-2</a></li>
		<li><a href="?page=<?=$thirdPage?>&per=<?=$perPage?>">P-3</a></li>
		<li><a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a></li>
	<ul>
</b></div>

ellenski 0 Light Poster · Answer 4 · 2011-01-20T09:40:09+00:00

Thanks for replying so fast. I'll give this a try.

I am supposed to put the code you provided above in my "pagenavigation.php" file, right? I'm just making sure that I understood you right.

ellenski 0 Light Poster · Answer 5 · 2011-01-20T09:43:36+00:00

Another thing, if I use the code you provided above, where will I now put the $prevPage & nextPage?

because this is the order of how it the page navigation looks like:

"PREV" -- "P-1" -- "P-2" -- "P-3" -- "NEXT"

Another thing, I tried the code you provided above but it gave an error.
The error was this,

Notice: Undefined variable: arr in C:\wamp\www\sample\dynamic\includes\pagenavigation.php on line 4

ellenski 0 Light Poster · Answer 6 · 2011-01-20T10:23:34+00:00

here is my final code (without the prev and next yet):

<div><b>		
	<ul id="pagesbox">
	<?php				
	$totalPages = 3;
	for ( $j=1;$j<=$totalPages;$j++ ) {			
		echo '<li><a href="?page='.$j.'&per='.$perPage.'">P-'.$j.'</a></li>';
	}	
	?>
	</ul>		
</b></div>

It works fine.
The only problem is when I click the link for page 2,
the number of images displayed will be set back to 3 again.
Also, the same pics are displayed on the next page.

How do I fix this?

ellenski 0 Light Poster · Answer 7 · 2011-01-20T12:43:21+00:00

I finally figured out how to display different set of images per page.
The problem left are the ff:
1) PREV and NEXT. <--still won't work
2) the number of images displayed per page. like for example, i selected 4. i want 4 to be stored into $perPage instead of resetting back to 3 which is what your code did.

here's what i have now:

header.php

<div id="upperbox">	
	<form action="index.php" method="post">
	<?php
	
	if ( isset($_POST['per']) ) {
		$perPage = ($_POST['items']);		
	}	
	else {
		$perPage = 3; //this is the part I meant that will always be reset
				//to 3 even if i selected a different no. for
				//the images displayed per page
	}			
	?>
	<b>Images Per Page</b>
	<select id="set" name="items">			
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>			
	</select>
	<input name="per" type="submit" value="Set"/>
	</form>	
</div>

pagenavigation.php

<div><b>		
	<ul id="pagesbox">
		<?php
		$maxPics = 6;
		$prevPage = $page > 1 ? $page - 1 : 1;	
		$nextPage = $page >= $maxPics ? $page + 1 : $maxPics;
		?>
		<li><a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a></li>
		<?php		
		$totalPages = 3;
		for ( $j=1;$j<=$totalPages;$j++ ) {
			echo '<li><a href="?page='.$j.'&per='.$perPage.'">P-'.$j.'</a></li>';
		}
		?>
		<li><a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a></li>
	</ul>
</b></div>

thumbnail.php

<div id="images">
<?php
	$arr=array();	
	for ($i=0;$i<=$perPage-1;$i++) {			
		$arr[$i]="images/pic$i.jpg";		
		if ( $page==1 ) {
			$a = $i;
			$b = 0;
			$arr[$b]="images/pic$a.jpg";
			echo "<img src=".$arr[$b]." id=pic>";
			$a++;
			$b++;
		}
		else if ( $page==2 ) {					
			$c = $i+$perPage;
			$d = 0;
			$arr[$d]="images/pic$c.jpg";
			echo "<img src=".$arr[$d]." id=pic>";
			$c++;
			$d++;
		}
		else if ( $page==3 ) {
			$e = $i+($perPage*2);
			$f = 0;
			$arr[$f]="images/pic$e.jpg";
			echo "<img src=".$arr[$f]." id=pic>";
			$e++;
			$f++;
		}
		else {
			echo "<img src=".$arr[$i]." id=pic>";
		}						
	}
?>
</div>

ellenski 0 Light Poster · Answer 8 · 2011-01-20T12:43:36+00:00

I finally figured out how to display different set of images per page.
The problem left are the ff:
1) PREV and NEXT. <--still won't work
2) the number of images displayed per page. like for example, i selected 4. i want 4 to be stored into $perPage instead of resetting back to 3 which is what your code did.

here's what i have now:

header.php

<div id="upperbox">	
	<form action="index.php" method="post">
	<?php
	
	if ( isset($_POST['per']) ) {
		$perPage = ($_POST['items']);		
	}	
	else {
		$perPage = 3; //this is the part I meant that will always be reset
				//to 3 even if i selected a different no. for
				//the images displayed per page
	}			
	?>
	<b>Images Per Page</b>
	<select id="set" name="items">			
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>			
	</select>
	<input name="per" type="submit" value="Set"/>
	</form>	
</div>

pagenavigation.php

<div><b>		
	<ul id="pagesbox">
		<?php
		$maxPics = 6;
		$prevPage = $page > 1 ? $page - 1 : 1;	
		$nextPage = $page >= $maxPics ? $page + 1 : $maxPics;
		?>
		<li><a href="?page=<?=$prevPage?>&per=<?=$perPage?>">Prev</a></li>
		<?php		
		$totalPages = 3;
		for ( $j=1;$j<=$totalPages;$j++ ) {
			echo '<li><a href="?page='.$j.'&per='.$perPage.'">P-'.$j.'</a></li>';
		}
		?>
		<li><a href="?page=<?=$nextPage?>&per=<?=$perPage?>">Next</a></li>
	</ul>
</b></div>

thumbnail.php

<div id="images">
<?php
	$arr=array();	
	for ($i=0;$i<=$perPage-1;$i++) {			
		$arr[$i]="images/pic$i.jpg";		
		if ( $page==1 ) {
			$a = $i;
			$b = 0;
			$arr[$b]="images/pic$a.jpg";
			echo "<img src=".$arr[$b]." id=pic>";
			$a++;
			$b++;
		}
		else if ( $page==2 ) {					
			$c = $i+$perPage;
			$d = 0;
			$arr[$d]="images/pic$c.jpg";
			echo "<img src=".$arr[$d]." id=pic>";
			$c++;
			$d++;
		}
		else if ( $page==3 ) {
			$e = $i+($perPage*2);
			$f = 0;
			$arr[$f]="images/pic$e.jpg";
			echo "<img src=".$arr[$f]." id=pic>";
			$e++;
			$f++;
		}
		else {
			echo "<img src=".$arr[$i]." id=pic>";
		}						
	}
?>
</div>

madCoder 17 Junior Poster · Answer 9 · 2011-01-21T03:29:32+00:00

Thumbnail.php is complete rubbish. Delete it and start over.

In header.php I see I made a mistake (was just meant to show the concept of how to do it, I never actually tested it. We are using GET not POST in the form and in our links:

if ( isset($_GET['per']) ) {
    $perPage = intval($_GET['per']);

That should replace lines 5 and 6 in header.php.

For thumbnail.php, read up on arrays and what they are for. If all the images are going to be numbered, then it doesn't really matter since you can generate the filename automatically. The problem you face then, though, is knowing how many total images you have automatically (you don't want to have to edit the code each and every time new picture(s) are added to your gallery.)

Good luck!