Jump to content

PHP / MySQL Users Display as a Thumbnail Grid


davidfattore
Go to solution Solved by davidfattore,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by ginerjm
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...  

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by davidfattore
Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

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 by davidfattore
Link to comment
Share on other sites

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....

Link to comment
Share on other sites

  • Solution

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();
}

?>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.