473,395 Members | 1,468 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > php > questions > how to display images from mysql table at below after selection of dropdown category

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. ul, li {
  8. list-style-type:none;
  9. }
  10.  
  11. ul.display {
  12. width: 500px;
  13. }
  14.  
  15. ul.display li { 
  16.   float: left;  
  17.   width: 100px; 
  18.   height: 120px;
  19.   margin-left: 5px; 
  20.   margin-right: 5px;
  21.   margin-bottom: 5px;
  22.   position: relative;
  23.   vertical-align:middle;
  24.   text-align:center;
  25. }
  26. ul.display li a img {
  27.     width: 94px; 
  28.   height: 114px;
  29.   display: inline; 
  30.  
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <body>
  37.  
  38. <div align="center">
  39.      <?php  
  40.     include('connect.php'); 
  41.     $SQL = "SELECT * from becuart";
  42.         $result = mysql_query( $SQL );
  43.     echo "<ul class='display'>";
  44.         while( $row = mysql_fetch_array( $result ) ) {
  45.         $filepath = $row["path"];
  46.  
  47.         echo "<li>";
  48.         echo "<a href=\"$filepath\"><img src=\"$filepath\" border=\"0\"></a>";
  49.     echo "</li>";
  50.     }
  51.         echo "</ul>";
  52. ?>
  53. </div>
  54.  
  55. </body>
  56. </html>
  57.  
Apr 1 '13 #1

✓ answered by Rabbit

What you populate in the category varable will be whatever is passed to your page. Meaning the category that the user chose.

15 5494
Here is the code for product.php page where a dropdown list is populated from database:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <form name="product" method="post" action="">
  3. <table align="center" width="10%" border="0" cellspacing="0" cellpadding="0">
  4. <tr>
  5. <td>Shoplist</td>
  6. <td>
  7. <select name="shoplist">
  8. <?php 
  9.  
  10. $sql = mysql_query("SELECT art_name FROM category");
  11.  
  12. while ($row = mysql_fetch_array($sql)){
  13.  
  14. ?>
  15. <option value="shoplist1"><?php echo $row['art_name']; ?></option>
  16.  
  17. <?php
  18. // close while loop 
  19. }
  20. ?>
  21. </select>
  22. </td>
  23. <td><input name="go" type="button" value="Go" /></td>
  24. </tr>
  25. </table>
  26. </form>
  27. </body>
Apr 1 '13 #2
Rabbit
12,516 Expert Mod 8TB
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.
Apr 1 '13 #3
Can you elaborate a little please? I have two database tables. One with id, category name and another with id, category id, image path.
Apr 2 '13 #4
Rabbit
12,516 Expert Mod 8TB
In your image display, you're using the query
Expand|Select|Wrap|Line Numbers
  1. $SQL = "SELECT * from becuart";
To get just the images for a category, you would use the WHERE clause
Expand|Select|Wrap|Line Numbers
  1. $SQL = "SELECT * from becuart WHERE catetoryField = '$categoryVariable'";
Apr 2 '13 #5
Ok I understand your point, but what to set in $categoryVariable? 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.
Apr 2 '13 #6
My requirement is urgent, please do me a favour.
Apr 2 '13 #7
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.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. ul, li {
  8. list-style-type:none;
  9. }
  10.  
  11. ul.display {
  12. width: 500px;
  13. }
  14.  
  15. ul.display li { 
  16.   float: left;  
  17.   width: 100px; 
  18.   height: 120px;
  19.   margin-left: 5px; 
  20.   margin-right: 5px;
  21.   margin-bottom: 5px;
  22.   position: relative;
  23.   vertical-align:middle;
  24.   text-align:center;
  25. }
  26. ul.display li a img {
  27.     width: 94px; 
  28.   height: 114px;
  29.   display: inline; 
  30.  
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <?php
  38. include ('connect-db.php');
  39. ?>
  40.  
  41. <form name="product" method="post" action="">
  42. <table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
  43. <tr>
  44. <td>Category</td>
  45. <td>
  46. <select name="category">
  47.  
  48. <?php
  49. $sql = "SELECT id, art_name, path FROM category;";
  50. $result = mysql_query($sql);
  51. while ($row = mysql_fetch_assoc($result)) {
  52. ?>
  53.  
  54. <option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>
  55.  
  56.  
  57. <?php } ?>
  58. </select>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>&nbsp;</td>
  63. <td><input name="go" type="submit" value="Go" /></td>
  64. </tr>
  65. </table>
  66.    </form>
  67.  
  68. <div align="center">
  69.  
  70.  <ul class="display">
  71.  <?php
  72.  $id = (int)$_POST['category'];
  73.  $sql_search = "SELECT id, art_name, path FROM category WHERE id = $id";
  74.  $search = mysql_query($sql_search);
  75.  if (isset($_POST['go'])) {
  76.  while ($row = mysql_fetch_assoc($search)) {
  77.      ?>
  78.  
  79.  
  80. <li><a href="<?= $row['path']; ?>"><img src="<?= $row['path']; ?>" border="0"></a></li>
  81. <?php }
  82.  
  83. }
  84.  
  85. else {
  86.  
  87. }
  88.  
  89.  
  90. ?>
  91. </ul>
  92. </div>
  93. </body>
  94. </html>
  95.  
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.
Apr 2 '13 #8
Rabbit
12,516 Expert Mod 8TB
What you populate in the category varable will be whatever is passed to your page. Meaning the category that the user chose.
Apr 2 '13 #9
Ok thanks. I have done this. My problem is solved.:) Below is the complete code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. ul, li {
  8. list-style-type:none;
  9. }
  10.  
  11. ul.display {
  12. width: 500px;
  13. }
  14.  
  15. ul.display li { 
  16.   float: left;  
  17.   width: 100px; 
  18.   height: 120px;
  19.   margin-left: 5px; 
  20.   margin-right: 5px;
  21.   margin-bottom: 5px;
  22.   position: relative;
  23.   vertical-align:middle;
  24.   text-align:center;
  25. }
  26. ul.display li a img {
  27.     width: 94px; 
  28.   height: 114px;
  29.   display: inline; 
  30.  
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <?php
  38. include ('connect-db.php');
  39. ?>
  40.  
  41. <form name="product" method="post" action="">
  42. <table align="right" width="10%" border="0" cellspacing="0" cellpadding="0">
  43. <tr>
  44. <td>Category</td>
  45. <td>
  46. <select name="category">
  47.  
  48. <?php
  49. $sql = "SELECT id, art_name FROM category;";
  50. $result = mysql_query($sql);
  51. while ($row = mysql_fetch_assoc($result)) {
  52. ?>
  53.  
  54. <option value="<?= $row['id']; ?>"><?= $row['art_name']; ?></option>
  55.  
  56.  
  57. <?php } ?>
  58. </select>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>&nbsp;</td>
  63. <td><input name="go" type="submit" value="Go" /></td>
  64. </tr>
  65. </table>
  66.    </form>
  67.  
  68. <div align="center">
  69.  
  70.  <ul class="display">
  71.  <?php
  72.  $id = (int)$_POST['category'];
  73.  $sql_search = "SELECT id, categoryid, path FROM list WHERE categoryid = $id";
  74.  $search = mysql_query($sql_search);
  75.  if (isset($_POST['go'])) {
  76.  while ($row = mysql_fetch_assoc($search)) {
  77.      ?>
  78.  
  79.  
  80. <li><a href="<?= $row['path']; ?>"><img src="<?= $row['path']; ?>" border="0"></a></li>
  81. <?php }
  82.  
  83. }
  84.  
  85. else {
  86.  
  87. }
  88.  
  89.  
  90. ?>
  91. </ul>
  92. </div>
  93. </body>
  94. </html>
  95.  
Apr 3 '13 #10
Rabbit
12,516 Expert Mod 8TB
Glad you got it working, good luck with the rest of your project.
Apr 3 '13 #11
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.
Apr 3 '13 #12
Rabbit
12,516 Expert Mod 8TB
Load that as the default if there is no category submitted.
Apr 3 '13 #13
How to do that? can you show me a little?
Apr 4 '13 #14
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!
Apr 4 '13 #15
My problem is solved! I create another table column in database for this.
Apr 4 '13 #16

Sign in to post your reply or Sign up for a free account.

Similar topics

5
Display Images vertically via web service
by: Peter Lapic | last post by:
I have to create a image web service that when it receives an imageid parameter it will return a gif image from a file that has been stored on the server. The client will be an asp.net web page...
ASP.NET
9
Mysql table rows delete HELP
by: Dejan | last post by:
Hy, Sorry for my terreble english I have this simple code for deleting rows in mysql table... Everything works fine with it. So, what do i wanna do...: my sql table looks something like...
PHP
10
Loading png images into a mysql table/database
by: eholz1 | last post by:
Hello Members, I am setting up a photo website. I have decided to use PHP and MySQL. I can load jpeg files into the table (medium blob, or even longtext) and get the image(s) to display without...
PHP
2
Display Images in a Combobox
by: Randy | last post by:
Hi, I have a small table - 2 columns, 5 rows. Col 1 is the key column and has integer values of 1 through 5. Column 2 is a varbinary(MAX) column and has jpg images loaded in it. What I want...
Visual Basic .NET
3
w33nie
HTML Sorting of a MySQL Table
by: w33nie | last post by:
What I want is for my MySQL database to be printed on a mostly html based page, with links on the top of each column, saying what information is contained in the columns below. Then all I want is...
PHP
3
How to change text/cell colour in data display from mysql table
by: amyj | last post by:
I have a page that displays all of the entries from the mqsql database table . the insert page has a field for status . I wanting if the entry is submitted with the field being high for the...
MySQL Database
1
osward
How to customize paging links for mysql table
by: osward | last post by:
Hi all, I got code over the net for paging mysql table, it provides Prev pages Next link at the bottom of the table. However, I have a pretty large table to display (average over 400+ rows). Even...
PHP
3
displaying specific data from mysql table using php
by: printline | last post by:
Hello All I need a little help with a phph script to display some specific data from a mysql table. I have a mysql table with 4 columns and 10 rows. I want to display fx. data from row 4, 6, 8...
PHP
14
anfetienne
upload and display images
by: anfetienne | last post by:
Hi, i went through a tutorial on how to display images stored with a directory and it came out good but i have a problem.....when i upload less than 5 files it displays the 1 image and then shows...
PHP
1
Table formatted foreach loop to display images.
by: harish81 | last post by:
Hi, Please help me to get images in table format. I'm new to PHP. I have written code to display images in a table format and it displays only 9 images in a single page. when i click Next Url to...
PHP
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!