How to display images from mysql table at below after selection of dropdown category

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • Monomita Har
    New Member
    • Jan 2013
    • 21
    #1

    How to display images from mysql table at below after selection of dropdown category

    I want to show a category based shopping items with images on web page that can be found in the most Online shopping sites.I crated two mysql tables: Ist with id, category_name and 2nd with id, category_name, product, image_path. I am able to display all product images at a time on page, but I don't know how to show product images of a single category selected from a dropdown list with submit button at the top of the page. I hope my point is clear to all otherwise feel free to ask me.

    Below I attached my code that shows all the product images on my php page at a time without any dropdown list. Any ideas and advice on doing this is welcome.

    Code:
    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul, li {
list-style-type:none;
}

ul.display {
width: 500px;
}

ul.display li { 
  float: left;  
  width: 100px; 
  height: 120px;
  margin-left: 5px; 
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  vertical-align:middle;
  text-align:center;
}
ul.display li a img {
	width: 94px; 
  height: 114px;
  display: inline; 
  
}

</style>
</head>

<body>

<div align="center">
	 <?php  
	include('connect.php'); 
	$SQL = "SELECT * from becuart";
        $result = mysql_query( $SQL );
	echo "<ul class='display'>";
        while( $row = mysql_fetch_array( $result ) ) {
        $filepath = $row["path"];
				  
        echo "<li>";
        echo "<a href=\"$filepath\"><img src=\"$filepath\" border=\"0\"></a>";
	echo "</li>";
	}
        echo "</ul>";
?>
</div>

</body>
</html>
    Tags: None
    • Monomita Har
      New Member
      • Jan 2013
      • 21
      #2
      Here is the code for product.php page where a dropdown list is populated from database:
      Code:
      <body>
<form name="product" method="post" action="">
<table align="center" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Shoplist</td>
<td>
<select name="shoplist">
<?php 

$sql = mysql_query("SELECT art_name FROM category");

while ($row = mysql_fetch_array($sql)){

?>
<option value="shoplist1"><?php echo $row['art_name']; ?></option>

<?php
// close while loop 
}
?>
</select>
</td>
<td><input name="go" type="button" value="Go" /></td>
</tr>
</table>
</form>
</body>

        Comment

        • Rabbit
          Recognized Expert MVP
          • Jan 2007
          • 12517
          #3
          Do the same thing you did to display all the images, except include a WHERE clause to filter for the category you want to display.

            Comment

            • Monomita Har
              New Member
              • Jan 2013
              • 21
              #4
              Can you elaborate a little please? I have two database tables. One with id, category name and another with id, category id, image path.

                Comment

                • Rabbit
                  Recognized Expert MVP
                  • Jan 2007
                  • 12517
                  #5
                  In your image display, you're using the query
                  Code:
                  $SQL = "SELECT * from becuart";
                  To get just the images for a category, you would use the WHERE clause
                  Code:
                  $SQL = "SELECT * from becuart WHERE catetoryField = '$categoryVariable'";

                    Comment

                    • Monomita Har
                      New Member
                      • Jan 2013
                      • 21
                      #6
                      Ok I understand your point, but what to set in $categoryVariab le? Now I totally confused because still I tried a lot of things to work it out. Sorry for any silly question.
                      Here I have two database tables. The dropdown list of category will populate from table1 which have id and 5 category names. The images belong to a particular category will fetch in web page from table2 which have id,category id, image path. The becuart table is a demo table which I tried to fetch all images at a time. Hope I am able to explain clearly.

                        Comment

                        • Monomita Har
                          New Member
                          • Jan 2013
                          • 21
                          #7
                          My requirement is urgent, please do me a favour.

                            Comment

                            • Monomita Har
                              New Member
                              • Jan 2013
                              • 21
                              #8
                              Here I use single image according to each category, so use only one table with id,art_name and path fields. this works fine with a dropdown list of art_names.
                              Code:
                              <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul, li {
list-style-type:none;
}

ul.display {
width: 500px;
}

ul.display li { 
  float: left;  
  width: 100px; 
  height: 120px;
  margin-left: 5px; 
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  vertical-align:middle;
  text-align:center;
}
ul.display li a img {
	width: 94px; 
  height: 114px;
  display: inline; 
  
}

</style>
</head>

<body>
<?php
include ('connect-db.php');
?>

<form name="product" method="post" action="">
<table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Category</td>
<td>
<select name="category">

<?php
$sql = "SELECT id, art_name, path FROM category;";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>

<option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>


<?php } ?>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="go" type="submit" value="Go" /></td>
</tr>
</table>
   </form>
   
<div align="center">

 <ul class="display">
 <?php
 $id = (int)$_POST['category'];
 $sql_search = "SELECT id, art_name, path FROM category WHERE id = $id";
 $search = mysql_query($sql_search);
 if (isset($_POST['go'])) {
 while ($row = mysql_fetch_assoc($search)) {
     ?>


<li><a href="<?= $row['path']; ?>"><img src="<?= $row['path']; ?>" border="0"></a></li>
<?php }

}

else {

}


?>
</ul>
</div>
</body>
</html>
                              But I have to show multiple images according to each category, so I have to use two database tables as I mentioned in my last post. Hope I can explain clearly.

                                Comment

                                • Rabbit
                                  Recognized Expert MVP
                                  • Jan 2007
                                  • 12517
                                  #9
                                  What you populate in the category varable will be whatever is passed to your page. Meaning the category that the user chose.

                                    Comment

                                    • Monomita Har
                                      New Member
                                      • Jan 2013
                                      • 21
                                      #10
                                      Ok thanks. I have done this. My problem is solved.:) Below is the complete code:
                                      Code:
                                      <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul, li {
list-style-type:none;
}

ul.display {
width: 500px;
}

ul.display li { 
  float: left;  
  width: 100px; 
  height: 120px;
  margin-left: 5px; 
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  vertical-align:middle;
  text-align:center;
}
ul.display li a img {
	width: 94px; 
  height: 114px;
  display: inline; 
  
}

</style>
</head>

<body>
<?php
include ('connect-db.php');
?>

<form name="product" method="post" action="">
<table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Category</td>
<td>
<select name="category">

<?php
$sql = "SELECT id, art_name FROM category;";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>

<option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>


<?php } ?>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="go" type="submit" value="Go" /></td>
</tr>
</table>
   </form>
   
<div align="center">

 <ul class="display">
 <?php
 $id = (int)$_POST['category'];
 $sql_search = "SELECT id, categoryid, path FROM list WHERE categoryid = $id";
 $search = mysql_query($sql_search);
 if (isset($_POST['go'])) {
 while ($row = mysql_fetch_assoc($search)) {
     ?>


<li><a href="<?= $row['path']; ?>"><img src="<?= $row['path']; ?>" border="0"></a></li>
<?php }

}

else {

}


?>
</ul>
</div>
</body>
</html>

                                        Comment

                                        • Rabbit
                                          Recognized Expert MVP
                                          • Jan 2007
                                          • 12517
                                          #11
                                          Glad you got it working, good luck with the rest of your project.

                                            Comment

                                            • Monomita Har
                                              New Member
                                              • Jan 2013
                                              • 21
                                              #12
                                              Is there any way to display the 1st category images on page load? i.e when the web page will load first time, the images from Featured art list will be on page as Featured art is the first category.

                                                Comment

                                                • Rabbit
                                                  Recognized Expert MVP
                                                  • Jan 2007
                                                  • 12517
                                                  #13
                                                  Load that as the default if there is no category submitted.

                                                    Comment

                                                    • Monomita Har
                                                      New Member
                                                      • Jan 2013
                                                      • 21
                                                      #14
                                                      How to do that? can you show me a little?

                                                        Comment

                                                        • Monomita Har
                                                          New Member
                                                          • Jan 2013
                                                          • 21
                                                          #15
                                                          I use this option tag by replacing previous one, but same result! No images on page before clicking 'go' button! Is there any solution which display images of first category on page load?
                                                          thanks in advance!

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...