CODEWITHSUNDEEP
phpmysql
user3220812
user3220812

Reputation: 197

Grouping MySQL Output by Category

My code below connects to my database and displays a list of images from my table in alphabetical order e.g.

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

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

Upvotes: 1

Views: 874

Answers (1)

Sean
Sean

Reputation: 12433

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>

Upvotes: 1

Related Questions