Display database record in a list/grid.

[Achhitra]

I have a database which includes Id, Name, Description and image. I have managed to extract the data and place it in a table which has around 8 fields. I would like to know what's the best way to place each item in a separate list or grid. So that it looks like a online shop. Thanks in advance

[ginerjm]

You said that you have placed your data in a table already.  Is that not what you want?  I don't know what you mean about making it look like an online shop.  Perhaps you want to output each row of data in a separate html table?  Or place each set of data in a separate div tag to help arrange them on the page?

[Achhitra]

I want each item displayed on its own. Not within a table. What i meant by online shop is, when you visit a online store you can see thumbnails with a description etc. You mentioned divs. I think that will be the best practise. Any ideas how i could do this. Thanks

[ginerjm]

Ideas on how to what?  Use the <div> tag?  Sure - check out an html resource and learn what it does and then learn some css and set the div up the way you want.

[Achhitra]

Thanks for your help... NOT!

[ginerjm]

Is that sarcasm? 

 

This is a forum for helping those who help themselves.  You asked me to design your page - which is not the purpose of a PHP forum, but an HTML/CSS one wiseguy.

 

This forum helps those who have made the effort to do something and have run into a roadblock.  When  you have some code to show us and ask for help on (not CSS either!), come back and you'll be amazed at how much help you'll receive.

 

[Psycho]

You do realize that there is not one format for how things are displayed in an "online shop", don't you? You have an idea in your head on how you want the output to be, but you are using generalized terms to explain it to us. I've seen many, many different ways that items are displayed on shopping sites - and some do use a simple table display. Perhaps if you were to link to a site with a similar format that you want to use. But, if that was the case you could inspect the HTML source yourself to see how they accomplish it.

 

But, if I think what you want is correct, yes DIVs is the way to go. But, there are still other considerations that you have to decide before we could even propose something. For example, do you want the number of items per row to be fixed or would you want the number of items per row to increase/decrease as the window size is expanded/reduced by the user? If you want the former, then enclose the X numebr of product DIVs in a parent div.

<div class="product_row">
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
</div>
<div class="product_row">
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
    <div class="product">Details of product go here</div>
</div>

If you don't want a fixed number of products for each row don't use the "product_row" divs.

 

Then, whichever format you use, you will need to create CSS classes for the divs used to define the style properties. For example the 'product' divs will have a specified height and width, maybe certain colors, etc. etc.

 

Then, inside each product div you will include all the details about the product you want displayed: image, name, description, price, buy button, etc., etc. So, one product dive might look like this

<div class="product">
    <img src="image.jpg" class="prod_img" />
    <div class="title">Title of product</div>
    <div class="description">Description of product</div>
    <div class="price">$15.00</div>
    <div class="buy"><a href="buy.php?id=12">Buy</a></div>
</div>

You then need to define the classes and properties for all those elements. To do that you need to understand CSS and all the relevant properties you need to use. If you don't know CSS you will need to do some research.

 

Since this is NOT a PHP issue, I am moving this thread to the CSS forum.

Edited March 26, 2014 by Psycho