How to display data record in database from vertical to horizontal

PHP
1

see my database attached below.

image
image593×827 76.4 KB

then i need to display like this one.

image
image1155×159 16.3 KB

here’s my code

<?php
        	$sql_topic="SELECT * FROM topic";
			$result_topic=mysqli_query($conn,$sql_topic);
			$resultCheck_topic = mysqli_num_rows($result_topic);

			if ($resultCheck_topic>0){
				while($row=mysqli_fetch_assoc($result_topic)){
		?>
        			<ul class="sub_menu">
                    	<!-- Main topics starts here -->
						<li><?php
								echo $row['topic_name'];

                        		$parent_topic=$row['topic_id'];
									$sql_subtopic="SELECT * FROM sub_topic WHERE  topic_id=$parent_topic";
									$result_subtopic=mysqli_query($conn,$sql_subtopic);
									$resultCheck_subtopic = mysqli_num_rows($result_subtopic);

									if ($resultCheck_subtopic>0){
										while($row=mysqli_fetch_assoc($result_subtopic)){
										?>
											<ul>
                                            	<li> <!-- Sub topic here-->
												<?php echo $row['topic_name']; ?>
                                                </li> <!-- Sub topic ends here -->
											</ul>
                                         <?php
										}
									}
							?>
                        </li> <!-- Main topic ends here -->
                    </ul>
		<?php
					}
				}
		?>
2

How do topic_id and topic_name relate to one another? You have several rows with the same id but a different name. Makes no sense.

3

Hi @Gandalf i have a purpose for the topic_id. but my question is how can i display record looks like in the image above?

4

It is somewhat confusing. It looks as though topic_name relates to the sub_topic_id. Assuming this is the case, then I would use a single <ul> for the sub-topics rather than a <ul> for each sub-topic, with each <li> set as display: inline-block.

I’m wondering if this is more an HTML/CSS question than PHP…

1 Like
5

I think I’d be playing with an INNER JOIN rather than running all those individual queries. Maybe something like

SELECT * from sub_topic inner join topic on topic.topic_id = sub_topic.topic_id order by topic.topic_id

then loop through the result set and throw a new HTML list every time the main topic_id changes. Obviously also only retrieve the columns required rather than all of them, but I can’t remember the syntax off the top of my head. Pseudo-code:

last-id = ""
run query
while there are results, get next result {
  is the topic-id different to last-id?
    yes {
      if last-id <> "", close the previous list
      show the topic header, open the list
      }
    show the sub-topic 
    last-id = topic-id
   }
if last-id <> "", close the previous list

As for vertical vs. horizontal, that’s definitely HTML/ CSS rather than anything to do with the PHP code.

6

Would column-count help you do this?

Here’s a Codepen I did demonstrating a simple example a few years back - Turning an Unordered List Into Two Columns

8

In theory yes, but it won’t know how the topics belong together I think?

9

I didn’t get a sense of any sort of grouping from the original post, just an alphabetical sort. Perhaps that comes out of reading the PHP, but that’s not my forte.

1 Like
10

You show an image of your intended result which looks to me like nothing more a single <ul>
Though the PHP code looks like it’s trying to make multiple nested <ul>s with some kind of hierarchy and structure.
What would be more helpful would be to see (at least a sample of) the intended HTML output illustrating the structure of the data.

2 Likes
11

Mabe we need to clarify exactly what the problem is we are trying to solve here.

It this meant to be a single list without any hierarchy or nesting, just split over several columns?
If that be the case then semantically it should simply be one single list, then use CSS columns as Chris suggests. That does make it a CSS/layout question.

Or it there meant to be some heirarchy and nesting to the list and you are struggling with the logic to produce that? Which would make it a PHP question?

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.