PHP / MySQL Users Display as a Thumbnail Grid

[davidfattore]

Hi Guys, 

 

I'm wondering if anyone knows how to design a users display page or can lead me to a tutorial on how to design a users display page that outputs the users in thumbnail form...

 

So like for instance.....

 

SELECT * FROM users WHERE state = Victoria;

 

and then showing all the users that are from the State of Victoria in, say, 108px by 108px thumbnails .... eight thumbnails wide, with their username showing up in a separate label when you hover over the thumbnails  ....

 

I'll clarify it further if need be, but I've managed to mock it up in HTML and Javascript, I've just forgotten how to get it done using PHP.

 

(I have the users my database already, just waiting there) 

 

Any help would be much appreciated!

 

Cheers

[ginerjm]

What do YOU mean by thumbnail?  Is this data in the form of an image?

[davidfattore]

yeah, an image (which is each user's display picture) ... 108px Wide by 108px high ... resting inside an AP Div Tag 980px wide

 

The thumbnail images spread out evenly 8 thumbnails wide over a width of 950px

with the 30px left over for my scrollbar.

[ginerjm]

So - it sounds like you have everything figured out.  What kind of help are you looking for?

[davidfattore]

You kidding? I initially said that I had it mocked up using HTML and JavaScript.

 

I need help on replicating it with PHP using a mysql database!

 

Dude if I had it all figured out, I wouldn't have started the thread! 

[ginerjm]

Alright.  I assume that you know how to set up the html since you have already done.  The only part you need to do is learn how to write a MySQL query and to choose the php interface that you will use to access the db.  Since MySQL_* functions are deprecated, your have mysqli or pdo to choose from, depending upon which your hoster supports.

 

The plan:

 

1 - write a query

2 - connect to your db and run the query 

3 - check that it ran

4 loop  thru the data and build your html code with the fields of each record you have retrieved.

 

Here's a brief template using the PDO extension.

$q = "select image_name, thumbnail from my_table";
$qrslts = $pdo->query($q);
if (!qrslts)
{
    echo "Could not run query";
    exit();
}
while ($row = $qrslts->fetch(PDO::FETCH_ASSOC)
{
    echo "<div id='mythumbnail_div'>" . $row['thumbnail'] . "<br>" . $row['image_name'] , "</div>";
}

You'll need to code the css to describe the div you need and modify the column names here to match yours, but this is the idea.  You'll need to do some research on db connecting too but there are lots of examples in the manual. 

 

Sample css:

#mythumbnail_div
{
   position:relative;
   float:left;
   width:???px;
   margin:10px 10px;
}

I don't know what you mean by " inside an AP Div Tag 980px wide".

Edited March 13, 2014 by ginerjm

[davidfattore]

I've got the database locked down. .... Regarding the AP Div Tag as it stands in the mock up I have the thumbnails inside a 980px wide div tag, which is CSS basically positioning the thumbnails on the page.

[ginerjm]

Then go for it!

[davidfattore]

To be honest its getting there, thanks for the help so far.....

 

 

Basically, this is what I'm after (this is my mock-up, sans the main CSS file)

 

http://www.davidfattore.com/temp/index.php

[davidfattore]

Ok I've been working on it and I have made some progress since my last post....

 

This is my logic so far from what has been posted here (thanks ginerjm)

<?php
include "../../mysql/db_config.php";
//default Query String
$queryString = "ORDER BY userID ASC";
//SQL Query
function SQL_Query() {
$query = "SELECT user_name, thumbnail, url FROM users WHERE city = 'Melbourne'";
$result = $pdo->query($query);
//$result2 = $pdo->query($query) or die($query."<br/><br/>".mysql_error());

if (!$result)
$row = mysql_fetch_array($result, MYSQL_NUM);
{
    echo "Could not run query";
    exit();
}
// Build the Output Section Here
$output = '';
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {	
	$user = $row["user_name"];
	$url = $row["url"];
	$thumb = $row["thumbnail"];
/*///////////////////////////////////////////////////////////////////////////////////////////
//			  	SET UP USER DISPLAY MECHANISM                              //
///////////////////////////////////////////////////////////////////////////////////////////*/
$output .=
    '<div id="user_grid">' . $thumb . '</div>';
}
}
?>

and in the <body>  section of my PHP document I have 

<?php print $output;?>

but for some reason (probably something silly that I've overlooked) it's still not printing anything within the body of my page

[mac_gyver]

you need to set php's error_reporting to E_ALL and display_errors to ON, in your php.ini, to get php to report and display all the errors it detects so that php will help you.

 

inside your function, the $pdo variable doesn't exist and would be throwing php errors to alert you to this problem.

 

you need to define your function with $pdo as a parameter and pass the $pdo variable into your function when you call your function.

 

next, are you even calling your SQL_Query(); function?

 

lastly, the $output variable you are assigning values to inside your function only exists inside the function. you would need to use return $output; inside the function to return that value so that you can use it at the point where you call your function, i.e. the place where you call the function will essentially be replaced by the value the function returns.

[davidfattore]

Thanks for the reply, regarding the alterations to the php.ini file I'm afraid that I don't have access to it.

 

But in regards to the rest of your post, if you'd be so kind as to step me through it with the code I've provided...

Sorry mate, it's been a while since I've used the PDO method...  

[mac_gyver]

if you are doing this on a web host, you will have the ability to put php settings into a local php.ini. you can also put the settings into your code (which won't show fatal parse errors, but will show all other errors in the code.)

 

all the issues i mentioned concern variable scope, which are local to php functions.

[davidfattore]

Mate, this is driving me crazy, I've altered the PHP.ini file, that fine. But the problems arise when I try to adjust my logic, based off what I can extrapolate from your post...

 

It's been a while since I've used PDO as in a 5 year window ...

 

Anyway I've revisited my usual method of getting this done successfully but normally the output is of a tabular fashion rather than what I want here....

 

Regardless, this is the code pertaining to my usual method

<?php
include "../../mysql/db_config.php";
//default Query String
$queryString = "ORDER BY userID ASC";
//SQL Query
$query = "SELECT user_name, thumbnail, url FROM users WHERE city = 'Melbourne'";
$result = @mysql_query($query);
//$result2 = @mysql_query($query) or die($query."<br/><br/>".mysql_error());

if (!$result)
$row = mysql_fetch_array($result, MYSQL_NUM);
{
    echo "Could not run query";
    exit();
}
// Build the Output Section Here
$outputList = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {	
	$character = $row["user_name"];
	$url = $row["url"];
	$thumb = $row["thumbnail"];
/*///////////////////////////////////////////////////////////////////////////////////////////
//				SET UP USER DISPLAY MECHANISM                              //
///////////////////////////////////////////////////////////////////////////////////////////*/
$output .=
    '<div id="user_grid">' . $thumb . '</div>';
}

?>
 

But now its displaying "Could not run Query"

Edited March 17, 2014 by davidfattore

[Ansego]

I assume you want to collect the data and output to an image: This might help: http://au2.php.net/imagejpeg

Edited March 17, 2014 by Ansego

[ginerjm]

So many problems......

 

1 - why do you assign querystring - you never use it.  Besides - it seems rather pointless.

2 - you do error suppression on your call to query().  Why? Why? Why would you NOT want to know about an error in that call?

3 - you check if your query ran, then pull one row from it and THEN show an error and quit.

 

I quit too. 

[davidfattore]

Ok, thank god, it's working....

 

this is the code

<?php
include "../../mysql/db_config.php";
//default Query String
$queryString = "ORDER BY userID ASC";
//SQL Query
$query = "SELECT user_name, thumbnail, url FROM users WHERE city = 'Melbourne' $queryString";
$result = @mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_NUM);
//$result2 = @mysql_query($query) or die($query."<br/><br/>".mysql_error());

if ($result)
{
	// Build the Output Section Here
$output = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {	
	$user = $row["user_name"];
	$url = $row["url"];
	$thumb = '<img src="' . $row["thumbnail"] . '"</img>';
/*///////////////////////////////////////////////////////////////////////////////////////////
//				SET UP USER DISPLAY MECHANISM                              //
///////////////////////////////////////////////////////////////////////////////////////////*/
$output .=
    '<div id="character_grid">' . $thumb . '</div>';
}
}
else {
    echo "Could not run query";
    exit();
}

?>

The only problem I'm having now is with the output in that it's just a row of user icons in a vertical line....

How then would I go about altering the output to replicate this?

Edited March 17, 2014 by davidfattore

[ginerjm]

Where is your definition of the id of character_grid?

[davidfattore]

below the php in the style tags, within the heads tags.... the php code is above everything on the page include the <DOCTYPE ......... >

[ginerjm]

None of you POSTED code even has a "<doctype...." in it, let alone any CSS.

 

You Do realize that some forum readers never open up any attached files or links to such?

[davidfattore]

No I didn't realise that, so thanks for the update, but with all respect... it shouldn't be a stretch to consider that if I've posted a link to an external file, in my post that pertains to my question in the thread, that someone with common sense would open it to further understand what I hope to accomplish....

[davidfattore]

Ok miracle of miracles, I've figured it out, regarding the CSS it was the fact that the declaration block that I was referring it to within my CSS file had to be prefaced with a period rather than a hash symbol (which is rather odd given that the entity in question was an id for an AP Div Tag)

 

Anyway now that that's done something else has popped up, more of a quandary than a problem but still nevertheless...

 

For some reason no matter what the query is, in this case its 

//SQL Query
$query = "SELECT user_name, thumbnail, url FROM users WHERE city = 'Melbourne'";
$result = @mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_NUM);
$num_records = $row[0];

It never shows the first record of the block of users  in the database, who are from Melbourne.

I'm 87% sure that it's something really silly that I'm overlooking in the code but I just can't seem to find it!

 

Here is my code

<?php
include "../../mysql/db_config.php";
//SQL Query
$query = "SELECT user_name, thumbnail, url FROM users WHERE city = 'Melbourne'";
$result = @mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_NUM);
$num_records = $row[0];
//$result2 = @mysql_query($query) or die($query."<br/><br/>".mysql_error());

if ($result)
{
	// Build the Output Section Here
$output = '';
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {	
	$character = $row["user_name"];
	$url = $row["url"];
	$thumb = '<img src="' . $row["thumbnail"] . '"</img>';

/*///////////////////////////////////////////////////////////////////////////////////////////
//				SET UP CHARACTER DISPLAY MECHANISM                         //
///////////////////////////////////////////////////////////////////////////////////////////*/
$output .=
    '<div id="character_grid" class="character-grid"><a href="'. $url .'">' . $thumb . '</a></div>';
}
}
else {
    echo "Could not run query";
    exit();
}

?>

[ginerjm]

You grab the first row of results and take its first element as your row count.  Errorneous as well as the reason you lose your first row of data for display.