Grouping MySQL Output by Category
Question
My code below connects to my database and displays a list of images from my table in alphabetical order eg
Image A, Image B, Image C etc.
Instead I would like to display these images in alphabetical order and organised by the category associated with each image eg
Category 1 Image A, Image B
Category 2 Image C
I would also like to dynamically display the title of each category above each group of images.
The columns in my table are: Link_ID, Link_Image, Link_Text, Link_URL, Link_Category
I've found a similar question to this here: Output MySQL list of records, grouped by category? but I'm not sure how to use the solution given in this instance (or display a dynamic title).
$db_host = 'XXXX';
$db_user = 'XXXX';
$db_pwd = 'XXXX';
$database = 'XXXX';
$table = 'home';
if (!mysql_connect($db_host, $db_user, $db_pwd))
die("Can't connect to database");
if (!mysql_select_db($database))
die("Can't select database");
// sending query
$result = mysql_query("SELECT * FROM {$table} ORDER BY Link_Text ASC");
if (!$result) {
die("Query to show fields from table failed");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="robots" content="noindex">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
.linkcontent {
margin: auto;
width: 720px;
height: 714px;
}
.linkcontent a img {
float: left;
margin: 2px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.linkcontent a img:hover {
float: left;
border: 2px solid #999;
margin: 0px;
}
.linkcontent_title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #999;
text-align:left;
text-decoration: none;
padding-bottom: 5px;
float: left;
height: 24px;
width: 100%;
clear:right;}
</style>
</head>
<body><div class="linkcontent"><div class="linkcontent_title">Category Title</div>
<?php
while($row = mysql_fetch_array($result))
{?>
<a href="<?php echo $row['Link_URL']?>" ><img src="<?php echo $row['Link_Image']?>" alt="<?php echo $row['Link_Text']?>" width="175" height="175" border="0" /></a>
<?php }?>
</div>
</body>
</html>
<?php
mysql_close ();
?>
1 answers
solution1
1 ACCPTED 2015-11-22 17:06:51
First, change your query so that you order your results by the Link_Category , then by the Link_Text .
SELECT * FROM {$table} ORDER BY Link_Category ASC, Link_Text ASC
Then when you loop over your results, put your <div class="linkcontent_title">Category Title</div> inside your loop. To change the Link_Category when the category changes, just use a simple php var that stores the current category, ie. $currentCategory
<body>
<?php
$currentCategory = ""; //use this to change the Category Title
while($row = mysql_fetch_array($result))
{
if($row['Link_Category'] != $currentCategory) // was wrong on the first draft
{
if($currentCategory != "") //if this is not the 1st, close the last <div>
{ ?>
</div>
<?php } // ends not 1st Category Title if{} ?>
<div class="linkcontent">
<div class="linkcontent_title"><?php echo $row['Link_Category']?></div>
<?php $currentCategory = $row['Link_Category']; //Set the Current Category
} // ends the Category Title if{} ?>
<a href="<?php echo $row['Link_URL']?>" >
<img src="<?php echo $row['Link_Image']?>" alt="<?php echo $row['Link_Text']?>" width="175" height="175" border="0" />
</a>
<?php }?>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.