I want a linked image and then the name of the game afterwards linked

First, on the Javascript which is actually JQuery… Open a new post on this as it is a new topic.
On it, though, the best way would be to use a DIV and lock that into one size using CSS.
Then, put put your data into it. Use the CSS to set the max size and scrolling. Just use JS/JQ to
load the data into it. Don’t use the JS/JQ to set the DIV’s settings. (That will lock in the box.)

Now, back to the display code. I took a little time to peek into how to create a grid using the
“row” data from a database. If you use a WHILE command, you have to do some complicated
counting system to be able to tell when to create a new row of the grid. So, I came up with a
more simpler version. This sticks to the two FOR’s that we had before. And, it takes out the
WHILE completely as it is not needed. Looking into how the reading of a row from a database
actually works (Never had to before.), I found that each time you grab a row of data, it does an
auto-increment in the database’s internal row-counter. So, that is great for your display. You just
have to place the command inside your FOR loops and you are all set. So, here is the next sample
to try. Hope it works… (Did not have time to create a test database to test it here!) Let me know…
[php]

<?php // Connected to table, now run a query to pull all the game names... if (!$results = mysqli_query($DB,"SELECT * FROM games LIMIT 0, 25")) { die("There was an error while running query: " . mysqli_error($DB)); } // No errors, now show game count... $rowcount = mysqli_num_rows($results); echo $rowcount . " Games were found!
"; // Start the table (Border for now so we can see if it is working correctly...) echo ""; // Now show up to 25 games... for ($x=0; $x<=4; $x++) { echo ""; for ($y=0; $y<=4; $y++) { // Get next row of game data from database... $game = mysqli_fetch_assoc($results); // Place each game inside a table's cell (Later on use CSS to make them fit nicely) echo ""; } echo ""; } echo "
"; // Check if there is a file. If not, leave an empty cell, if there is one, display it if (isset($game)){ // First get the name without the extension echo $game["name"] . "'s filename is: " . $game["file"] . "
"; // Set up HREF to point to HTML code for the entire table cell (any click inside will go there) echo ""; // Display the picture (inside the anchor to the html file) echo "
"; // Show the name of the game echo "" . $game["name"] . ""; } else { // Display whatever for a blank cell echo "New Game Coming Soon!"; } // End the cell no matter if empty or not echo "
"; // Close the connection which releases memory in the server... mysqli_close($DB); ?>

[/php]
Notice that I changed from loading the row of data as an array and used the “ASSOCIATED” version
instead. This allows the use of the field names instead of using numbers. A mistake in the previous
version. Works easier for your display…

Heh…was late, I know its jquery. :stuck_out_tongue: testing code soonly.

Works like a charm… I edited some things…have done a bit of css…

[php]<?php
// Connected to table, now run a query to pull all the game names…
if (!$results = mysqli_query($DB,“SELECT * FROM games LIMIT 0, 25”)) {
die("There was an error while running query: " . mysqli_error($DB));
}

  //  No errors, now show game count...
  $rowcount = mysqli_num_rows($results);
//echo $rowcount . " Games were found!<br>";

//  Start the table  (Border for now so we can see if it is working correctly...)
    echo "<table border='3'>";

//  Now show up to 25 games...
for ($x=0; $x<=4; $x++) {
	echo "<tr>";
    	for ($y=0; $y<=4; $y++) {
		//  Get next row of game data from database...
		$game = mysqli_fetch_assoc($results);
    		//  Place each game inside a table's cell (Later on use CSS to make them fit nicely)
    		echo "<td>";
    		//  Check if there is a file.  If not, leave an empty cell, if there is one, display it
    		if (isset($game)){
       		

        		// Set up HREF to point to HTML code for the entire table cell (any click inside will go there)
        		echo "<a href='games/" . $game["file"] . ".php'>";

        		//  Display the picture (inside the anchor to the html file) 
        		echo "<img src='games/" . $game["file"] . ".jpg' width='93px' height='74px' /><br />";

        		//  Show the name of the game
        		echo "<center><b>" . $game["name"] . "</b></center>";
		} else {
	  		//  Display whatever for a blank cell
	  		echo "New Game Coming Soon!";
		}
		// End the cell no matter if empty or not
    		echo "</td>";
	}
	echo "</tr>";

}
echo “”;

// Close the connection which releases memory in the server…
mysqli_close($DB);

?>[/php]

Well, I figured there would be a lot of fine-tuning such as CSS and all…

Glad it is working for you. Is this part finished? Now we can process the pagination section?

So, as you see inside the query, I used a LIMIT 0, 25. This means start at the #0 (first) entry
and load only 25 game rows. So, next we need to add some buttons. A previous and next.
These will move from one group of 25 games to the next… Not too complicated.

You create a new variable, let’s call it $page. So zero it out $page = 0;
And, then, replace the 0 in the query like this:

[php]

<?php // Start pagination at first page... $page = 0; // Connected to table, now run a query to pull all the game names... if (!$results = mysqli_query($DB,"SELECT * FROM games LIMIT " . $page . ", 25")) { die("There was an error while running query: " . mysqli_error($DB)); } [/php] As you see, it uses the variable to create the query instead of a hard-coded '0'... To test this, first you need more than 25 games listed. If you do not have that many, just duplicate some that you already have so there are 30 at least... Next, just change the page number in the $page variable to $page = 26; and see if the second page displays correctly. Now, you have to use the PREVIOUS button to subtract 25 from the current value of $page. Also, you will have to check to see if it is below zero. If so, set it to 0. Then, the NEXT button will add 25 to the current value. You do not add 25 if the current value plus 25 puts the beginning value above the row count of the database. Then, when they press the PREVIOUS or NEXT buttons, they calculate the new page and then refresh the display. This can be done by posting the page to itself or using JQuery to reload this section... Up to you to try to sort that out. If you can't figure it out let us know and we will help. So, hopefully, you have learned enough to handle the rest. Seems like it is getting there nicely!

Oh, forgot, you can take out the borders on the table if you do not need them.
I was just using them for testing…

Also, if you want to make this really interesting looking, you can use a CSS table system
instead of using HTML tables. And, that way, you can use some really cool looking CSS bordering
around the CSS tables. That way, you can fade out the borders between games and make it look
really cool ! Just an idea…

Ok so I got up to testing page with 31 with , 30 as my limit… I changed my display to 5x6… so it works… but I don’t know where to put the + to page and - to page and all in the pagination links.

Thanks. :slight_smile:

Well, placement is cosmetic. What I mean is it depends on the rest of your page.
If the 5x6 grid is in the middle of the page, you can place buttons at both the top and bottom
of the grid. If the grid fits on your monitor, will it fit on an iPad’s monitor? Or someone who’s
system is 12 years old and has 800x600 for a display? Or do they scroll up and down?

I have been using the BootStrap library to make my screens fit inside any size screen even phones.
But, that is another project… LOL

So, the easy way? Just add a table row at the top and bottom above and below your grid.
Since you know it is a set size, you know the number of columns. Just make it a colspan of that
number. So, if the table is 6 wide, colspan=‘6’… The line would look like this:

the two buttons here... You would place this just after the and just before the
... This would place the two buttons at the top and bottom of your display grid. And, the buttons can be whatever you wish. It can be simple text like: <--PREVIOUS PAGENEXT PAGE--> Or, a graphic, whatever....

Some programmers like buttons on the left and right of the page. So, if you wanted it that way, you
might want simple arrows on the left and right. In that case, you would need to add one extra row
using table headers and placing the arrows in the left and right columns. Something like this line just
after the opening

line:
<td colspan='5>Select your game
Note on this version that the buttons would be on the left and right. Doesn’t really matter. It’s however
you want it to be. You could even “FLOAT” buttons over the grid using CSS which would fade in and out
as the user moves the cursor over them. Lots of ways…
arrow button here points leftarrow button here points right

Oh i should have clarified, I mean the code to do the links, not placement. :slight_smile: you did give me a great idea though. I tried doing some googling to do the page code but it didn’t seem close enough to what we started and I couldn’t draw a connection. I’ve done pages based on ID before with mysql a couple years ago, never this type of paging.

Well, there are two ways to do the button’s coding…

  1. just post the page to itself using a form. This way, you would add a PHP code to pull out the button’s
    page number and when displaying the new page, you would alter the link inside the button to the
    next or previous 30 games.

  2. create a Javascript code routine linked to the buttons to alter the data on the page. More complicated.

Now, since your current code is PHP and it pulls the data from the database using the $page variable we
set up earlier, the first version would be very easy to set up.

So, outside of the entire page, you would create one form. The form would be simple. Just the start and finish of it. the two buttons would be submit buttons or just 's. The form would post to itself, so
just use “#” as the target of the form.

Add a small routine to the top of the page. A PHP routine that pulls the posted button. If it is the previous
button, subtract 30 from the current page. Check if it is already zero first, if so, do not subtract. If it is the
next button, add 30 to it. Check first if adding 30 would place it over the total number of games.

Now, the only other issue is saving the current page you are on. So, we have the total count of games.
(We got this from the QUERY!) So, total count / 30 gives us the page number. We can display this on the
page somewhere. But, in reality, we want to save the real number. Like 0,30,60… You might want to use
in the display something like: Games 30 out of 90 or whatever… You can figure that out later…
So, to save the current $page, we can use a HIDDEN field inside the form. Something like this will work:

When the page starts inside the new PHP routine, we would add a line that echo’s this field for us inside
the form. First, we would create the current page. Since you know the old page number and you know
which button was pressed, it would be loosely like this:
Load old page number
if previous button pressed, process new page number
if next button pressed, process new page number
echo new page’s hidden field…

So, this is simple code. You grab the old hidden page number with $_POST[“current_page”] and then do
the checks for the two buttons, adjusting the page as needed. Then, you echo out the hidden field which
now have the new page number in it something like:
echo “”;
Note that there is single quotes and double quotes used here…

Also, you would remove the $page=0; or whatever in the current code and use the new version…

Hope that all makes sense. Try it and show us what you come up with. I have to leave soon and will be
gone until around midnight, so might be awhile to respond. I think you get the process… Good luck!

Ok, I will try to figure this out. Honestly, my head is hurting reading it. I suck awfully at piecing things together like this. I don’t know if you mean “outside of the entire page” as in another file, or what. BLECH!

Haha…thank you.

Ok I am just getting frustrated and overwhelmed over here, too much for me to take at once and it isn’t making sense for me. I really have no idea what to start with and where to start it. I know how to do some of the bits of the code but I am just getting frustrated.

I am leaving for a couple hours. I will map it out for you when I get back…

But, a form outside what you have simply means…

  ALL your previous code....

Nothing more… But, anything inside your old code would then be in the form and could be posted…

I think I got it but my code doesn’t display new game soon anymore…will send code later. Map would be nice still, simple one…

My plans changed, I am gone shortly for the night. Will be around after midnight and all of tomorrow…

So, loosely, the form is like this: (This is still a PHP page…)


Rest of your code to display the games…

Change Page

So, as you see, one hidden field, two submit buttons…

Now at the top of the page you would have the form processing code which is in PHP.
It would be something loosely like this: (It is placed just after you load the games and get the rowcount)

<?PHP $current_page = $_POST["current_page"]; // grab the old value of the page... if (isset($_POST["previous"]) { // user pressed previous button, process it if ($current_page > 0) $current_page = $current_page - 30; // if zero, can not go below it... } if (isset($_POST["next"]) { // user pressed next button, process it if ($current_page + 30 < $rowcount) $current_page = $current_page + 30; // can not go above total number of games... } ?>

So, what this does is load the old current page number, add 30 to it or substract 30 from it and save it.
Since this is before the games are displayed, the hidden value is the new value. Actually, you would
have to do make some changes in the query. I called the sample page “$page” in an earlier post. Now,
I am calling it $current_page. Just want to be clear on that. Also, you would not use LIMIT this way.
Just read all of the games in. Get the rowcount. use that for the testing of previous/next buttons. Then,
you have the new current page number. Store that in the hidden field. And, do a seek to the correct
row number in the results array before displaying the 30 games. That is done with this code line:
mysql_data_seek($results, $current_page * 30); (This would go just before the

line)

So, loosely that is it. Try to put it together and when I get home I will see what you have. But, that
won’t be for many hours… Good luck…

Ok, I didn’t put that together yet, but I do have what I said I got together before you sent me that. There are two issues with this I have tried to but can’t resolve…I used a tutorial to help me along a tad bit since you were away and have already tried to explain so much to me, I thought it’d be good to get a base and get help from there…

1… Alphabetical sorting DOES NOT WORK for game entries from sql. The funny thing is, in my sql admin, they are even sorted, but on the page they won’t sort…? I have not tried number sorting… but in my comments, I say I have tried it all as far as alphabetically.
2… It doesn’t show new game coming soon when it’s an empty cell anymore.

[php]<?php
//db connect
$conn = mysql_connect(‘localhost’,’…’,’…’) or trigger_error(“SQL”, E_USER_ERROR);
$db = mysql_select_db(’…’,$conn) or trigger_error(“SQL”, E_USER_ERROR);

//find row # from table
$sql = “SELECT COUNT(*) FROM games”;
$result = mysql_query($sql, $conn) or trigger_error(“SQL”, E_USER_ERROR);
$r = mysql_fetch_row($result);
$numrows = $r[0];

//rows per page and total pages
$rowsperpage = 30;
$totalpages = ceil($numrows / $rowsperpage);

//get current page or set to default
if (isset($_GET[‘currentpage’]) && is_numeric($_GET[‘currentpage’])) {
// cast var as int
$currentpage = (int) $_GET[‘currentpage’];
} else {
//default page
$currentpage = 1;
} //end if

//if current page is greater than total page
if ($currentpage > $totalpages) {
//set current page to last page
$currentpage = $totalpages;
} //end if
// if current page is less than first page
if ($currentpage < 1) {
//set current page to first page
$currentpage = 1;
} //end if

//the offset of the list, based on current page
$offset = ($currentpage - 1) * $rowsperpage;

// get info from db
// ORDER DOESN’T WORK, I HAVE TRIED JUST FILE, OR NAME, OR BOTH, WITH AND WITHOUT ‘GAMES’ OR WITHOUT ASC… I have tried it all!
$sql = "
SELECT file, name FROM games
ORDER BY ‘games’.‘file’ ASC
LIMIT $offset, $rowsperpage";
$result = mysql_query($sql, $conn) or trigger_error(“SQL”, E_USER_ERROR);

// while there are rows to be fetched…
// echo data
echo “”;

//  Now show up to 25 games...
for ($x=0; $x<=5; $x++) {
	echo "<tr>";
    	for ($y=0; $y<=4; $y++) {
			$game = mysql_fetch_assoc($result);
			echo "<td>";
    		//  Check if there is a file.  If not, leave an empty cell, if there is one, display it
    		if (isset($game)){

        		// Set up HREF to point to HTML code for the entire table cell (any click inside will go there)
        		echo "<a href='games/" . $game["file"] . ".php'>";

        		//  Display the picture (inside the anchor to the html file) 
        		echo "<img src='games/" . $game["file"] . ".jpg' width='93px' height='74px' /><br />";

        		//  Show the name of the game
        		echo "<center><b>" . $game["name"] . "</b></center>";
		} else {
	  		//  Display whatever for a blank cell
	  		echo "New Game Coming Soon!";
		}
		// End the cell no matter if empty or not
    		echo "</td>";
	}
	echo "</tr>";

}
echo “

”;
// end while

//pagination, go!
//range of number links to display
$range = 3;

//don’t show back links if on page one
if ($currentpage > 1) {
//show << link to go back to page 1
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=1’><< ";
//get prev page num
$prevpage = $currentpage - 1;
//show < link to go back to 1 page
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$prevpage’>< ";
} //end if

//loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
//if it’s a valid page number…
if (($x > 0) && ($x <= $totalpages)) {
//if we’re on current page…
if ($x == $currentpage) {
//‘highlight’ it but don’t make a link
echo " [$x] ";
//if not current page…
} else {
//make it a link
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$x’>$x ";
} //end else
} //end if
} //end for

//if not on last page, show forward and last page links
if ($currentpage != $totalpages) {
//get next page
$nextpage = $currentpage + 1;
//echo forward link for next page
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$nextpage’>> ";
//echo forward link for lastpage
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$totalpages’>>> ";
}// end if

?>[/php]

Attatched is an image of how it works. Note: PAGING DOES WORK, but I removed dupes for now… and Sinjid is only an SQL entry for now, but you can see the sinjid: shadow of warrior isn’t working with sorting. 2nd image is my table.


OK I think I gave you the wrong code before but alphabetical sorting works fine now… I think I was working in the wrong file… LOL! Second issue still persists.

[php]<?php
//# rows in table
$sql = “SELECT COUNT(*) FROM games”;
$result = mysql_query($sql, $conn) or trigger_error(“SQL”, E_USER_ERROR);
$r = mysql_fetch_row($result);
$numrows = $r[0];

//rows per page
$rowsperpage = 30;
// find out total pages
$totalpages = ceil($numrows / $rowsperpage);

//get the current page or set a default
if (isset($_GET[‘currentpage’]) && is_numeric($_GET[‘currentpage’])) {
//cast var as int
$currentpage = (int) $_GET[‘currentpage’];
} else {
// default page num
$currentpage = 1;
} //end if

//if current page > than total pages
if ($currentpage > $totalpages) {
// set current page to last page
$currentpage = $totalpages;
} // end if
//if current page < than first page
if ($currentpage < 1) {
// set current page to first page
$currentpage = 1;
} // end if

//offset of the list, based on current page
$offset = ($currentpage - 1) * $rowsperpage;

//get info from the db
$sql = “SELECT file, name FROM games ORDER BY file LIMIT $offset, $rowsperpage”;
$result = mysql_query($sql, $conn) or trigger_error(“SQL”, E_USER_ERROR);

//while there are rows to be fetched…
//echo data
echo “

”;
// Now show up to 25 games...
for ($x=0; $x<=5; $x++) {
	echo "<tr>";
    	for ($y=0; $y<=4; $y++) {
			$game = mysql_fetch_assoc($result);
			echo "<td>";
    		//  Check if there is a file.  If not, leave an empty cell, if there is one, display it
    		if (isset($game)){

        		//  Set up HREF to point to HTML code for the entire table cell (any click inside will go there)
        		echo "<a href='games/" . $game["file"] . ".php'>";

        		//  Display the picture (inside the anchor to the html file) 
        		echo "<img src='games/" . $game["file"] . ".jpg' width='93px' height='74px' /><br />";

        		//  Show the name of the game
        		echo "<center><b>" . $game["name"] . "</b></center>";
		} else {
	  		//  Display whatever for a blank cell
	  		echo "New Game Coming Soon!";
		}
		// End the cell no matter if empty or not
    		echo "</td>";
	}
	echo "</tr>";

}
echo “

”;
// end while

//range of number links to show
$range = 3;

//if not on page 1, don’t show back links
if ($currentpage > 1) {
//show << link to go back to page 1
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=1’><< ";
//get previous page num
$prevpage = $currentpage - 1;
//show < link to go back to 1 page
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$prevpage’>< ";
} //end if

//loop to show links to range of pages around current page
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
//if it’s a valid page number…
if (($x > 0) && ($x <= $totalpages)) {
//if we’re on current page…
if ($x == $currentpage) {
//‘highlight’ it but don’t make a link
echo " [$x] ";
//if not current page…
} else {
//make it a link
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$x’>$x ";
} //end else
} //end if
} //end for

//if not on last page, show forward and last page links
if ($currentpage != $totalpages) {
//get next page
$nextpage = $currentpage + 1;
//echo forward link for next page
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$nextpage’>> ";
//echo forward link for lastpage
echo " <a href=’{$_SERVER[‘PHP_SELF’]}?currentpage=$totalpages’>>> ";
} //end if
?>[/php]

and here we go…


Haven’t heard from you, everything OK?

Sorry, was swamped with paying work and not home much until now…

So, your sort is messed up. the line:
$sql = “SELECT file, name FROM games ORDER BY file LIMIT $offset, $rowsperpage”;
Should be:
$sql = “SELECT file, name FROM games ORDER BY name LIMIT $offset, $rowsperpage”;

Well, I mean, you can sort it by the file name, but, isn’t the text name better to sort on?
Or perhaps you wanted it that way? Looking good so far.

As far as the game-coming-soon problem. You normally “fetch-assoc” once and then use that
array in the loop. You reload it inside your loop. Not sure why you changed it to that way, but,
if it works… So, you are grabbing data from the “fetch-assoc” and use the info in $games[“file”].
But, you test for $games… So, I think you need to change your test in line #51 from:
if (isset($game)){
to:
if (isset(trim($game[“file”]))){
And, in this way you are looking for the data inside of the array, not the array itself…
Note I added in a trim() just in case blank data is inside the array.

Hope that helps. Looks pretty good from your pixes…

I did file because in name, there are a lot of The’s…

Imagine having like 20 games that START with The but the following word is A*****… Especially games where people normally omit the A when mentioning them to others, you know?

Ok, so I changed it to the way I did just because the tutorial was going that way so I tried to incorporate what we had into the tutorial’s content and wasn’t too sure on what I was changing but had a vague understanding. I tried changing it to that and get this error:

Fatal error: Cannot use isset() on the result of a function call (you can use “null !== func()” instead) in games.php on line 66

Sponsor our Newsletter | Privacy Policy | Terms of Service