displaying database across

Revolutsio · April 7, 2020

I want my mysql database to be displayed across the screen similar to the below

Entry 1 Entry 2 Entry 3 Entry 4 Entry 5

eventually with a image above the name, but for now just as above.

How would I go about this?

ginerjm · April 7, 2020

How are you displaying it currently? How many fields do you have to display? Have you any CSS in use for your current display?

Revolutsio · April 7, 2020

I am currently displaying in a table and no css also there will be 5 across and 28 in total

Edited April 7, 2020 by Revolutsio
wrong info

chhorn · April 7, 2020

So what's the problem then?

Revolutsio · April 7, 2020

At the moment the field are displaying downwards and I want to display horizontal

ginerjm · April 7, 2020

If you have setup an html table I don't know how you can't be getting them to display across. Perhaps you can show us the table layout?

Are you perhaps using too many <tr> tags?

Edited April 7, 2020 by ginerjm

Revolutsio · April 7, 2020

<table>
    <thead>
        <tr>
            
            <th>Game</th>
            <th>Date Finished</th>
        </tr>
    </thead>
<?php
 $sql= "SELECT * 
 FROM
        games
WHERE 
		completed=1 
	ORDER BY 
		Game_Name;";

$result = mysqli_query($conn, $sql) or die("Bad Query: $sql");
$num_rows = mysqli_num_rows($result);?>
<?php
$counter = 1;
while ($row = mysqli_fetch_assoc($result)):
?>
    <tr>
<!--    <td style="text-align:center"><?php echo $row['ID']; ?></td> -->
    <td style="text-align:center"><?php echo $row['Game_Name']; ?></td>
<!--    <td style="text-align:center"><?php echo date ('d F Y', strtotime($row['Date_Finished'])); ?></td> -->
    <?php $counter++;?>
    </tr>  
    <?php endwhile; ?>
</body>
</table>
</html>

Barand · April 7, 2020

It's much easier with CSS and divs than it is with a table.

<?php
$output = '';
for ($i=1; $i<=28; $i++) {
    $output .= "<div class='db-entry'>Entry $i</div>\n";
}
?>
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
</head>
<style type="text/css">
    .db-entry {
        width: 18%;
        height: 50px;
        padding: 20px 2px;
        border: 1px solid gray;
        margin: 0 2px 2px 0;
        float: left;
    }
</style>
<body>
    <?=$output?>
</body>
</html>

image.png.62172faeeb51fef8b8cbc3ee00350db4.png

ginerjm · April 7, 2020

While using divs is the more modern way of doing tables, the old stand-by html table still works - when coded well. Your sample only shows one item being output on each row since you have commented out 2 of the td elements. This is what your html table really looks like:

while ($row = mysqli_fetch_assoc($result)):
{
	echo "<tr>
		<td style='text-align:center'>{$row['Game_Name']}</td>
		</tr>";
}

Note how much easier it is to read when you don't switch in and out of php mode all the time.

Revolutsio · April 7, 2020

Yes that is what I want

13 minutes ago, Barand said:

It's much easier with CSS and divs than it is with a table.


<?php
$output = '';
for ($i=1; $i<=28; $i++) {
    $output .= "<div class='db-entry'>Entry $i</div>\n";
}
?>
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
</head>
<style type="text/css">
    .db-entry {
        width: 18%;
        height: 50px;
        padding: 20px 2px;
        border: 1px solid gray;
        margin: 0 2px 2px 0;
        float: left;
    }
</style>
<body>
    <?=$output?>
</body>
</html>

This is the way i would like to do it how would i put in the select query into the code?

Barand · April 7, 2020

My code contains a loop to output the divs.

Your code contains a loop.

Work it out.

gizmola · April 7, 2020

I thought I would present a modern solution based on Barand's that uses css grid. Same basic idea however, you need to replace the test output with your output loop.

index.php

<?php
  $output = '';
  for ($i=1; $i<=28; $i++) {
      $output .= "<div class='entry'>Entry $i</div>\n";
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Grid Layout</title>
  </head>
  <body>
    <h1>CSS Grid Table</h1>
    <div class="grid">
      <?= $output ?>
    </div>
  </body>
</html>

styles.css

body {
  margin: 1em;
}

.grid {
  display: grid;

  padding 1em;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  /* Start at 100px height, stretch if content in a cell exceeds the 100px; */
  grid-auto-rows: minmax(100px, auto);
}

.entry {
  background: #eee;
  padding: 1em;
}

Here's the rendered html and css moved to a codepen if you want to experiment.

Phi11W · April 8, 2020

18 hours ago, Revolutsio said:


while ($row = mysqli_fetch_assoc($result)):
. . . 
    <tr>
. . . 
    <td style="text-align:center"><?php echo $row['Game_Name']; ?></td>
. . . 
    </tr>  
    <?php endwhile; ?>

Lots of good alternatives, but here's the basic problem with your code.

You're creating a new tr ("Table Row") element for for every item so yes, they will appear on separate rows.

Try creating a "tr" before starting the loop, then add a pair of "/tr", "tr" elements after every fifth item, and remember to close the last row after the loop.

Regards,
Phill W.

Revolutsio · April 9, 2020

On 4/7/2020 at 8:55 PM, gizmola said:

I thought I would present a modern solution based on Barand's that uses css grid. Same basic idea however, you need to replace the test output with your output loop.

index.php


<?php
  $output = '';
  for ($i=1; $i<=28; $i++) {
      $output .= "<div class='entry'>Entry $i</div>\n";
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Grid Layout</title>
  </head>
  <body>
    <h1>CSS Grid Table</h1>
    <div class="grid">
      <?= $output ?>
    </div>
  </body>
</html>

styles.css


body {
  margin: 1em;
}

.grid {
  display: grid;

  padding 1em;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  /* Start at 100px height, stretch if content in a cell exceeds the 100px; */
  grid-auto-rows: minmax(100px, auto);
}

.entry {
  background: #eee;
  padding: 1em;
}

Here's the rendered html and css moved to a codepen if you want to experiment.

Thank you for your help.

Revolutsio · April 9, 2020

<?php include('dbh.php'); ?>
<?php
 $sql= "SELECT * 
 FROM
        games
WHERE 
		completed=1 
	ORDER BY 
		Game_Name;";

$result = mysqli_query($conn, $sql) or die("Bad Query: $sql");
while ($row = mysqli_fetch_assoc($result)):?>
<?php
  $output = '';
  for ($i=1; $i<=28; $i++) {
      $output .=  $row['Game_Name']; $i;
   
  }
?>
<?php endwhile; ?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
    <link rel="stylesheet" type="text/css" href="table.css">
    <title>My Collection</title>
  </head>
  <body>
    <h1 align:center>#</h1>
    <div class="grid">
      <?= $output ?>
    </div>

  </body>
</html>

As you can see I have added the database entries, but only get the last entry in the database printed horizontal with no spaces, is this correct for a start?

gizmola · April 9, 2020

It looks like you really didn't try and understand what Barand's code did.

The for loop simulated your data.

You do not need nor want to simulate data, but rather, you want to use the data from your query instead of the for loop.

You need a counter variable (I used $i) if you want to display a number for each row, and you need to increment that variable each time. Your code wasn't even syntactically correct from what I could see. Does this look like valid code to you?

$output .=  $row['Game_Name']; $i;

You have to actually understand the operators you are using and what they do. Do you understand what the .= operator does? What do you think this code does then, which is what you had?

$output .=  $row['Game_Name']; 
$i;

The reason you are only getting the data for one row is that you are re-initializing $output inside your while clause.

Also you didn't wrap the data for each row in a div. If you don't do that how do you expect that the grid elements would appear?

Last but not least, you don't need to keep going in and out of php blocks. You start with a PHP block and stay with that until you need to output the HTML.

Here is your code fixed. It probably works but I make no guarantees.

<?php 
 include('dbh.php');
 $sql= "SELECT * 
 FROM games
 WHERE completed=1 
 ORDER BY Game_Name;";

 $result = mysqli_query($conn, $sql) or die("Bad Query: $sql");
 $output = '';
 $i = 1; 
 while ($row = mysqli_fetch_assoc($result))
   $output .= "<div class='entry'>$i. {$row['Game_Name']}</div>\n";
   $i++;
 }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
    <link rel="stylesheet" type="text/css" href="table.css">
    <title>My Collection</title>
  </head>
  <body>
    <h1 align:center>#</h1>
    <div class="grid">
      <?= $output ?>
    </div>

  </body>
</html>

I hope this helps you but honestly I'm concerned that it won't. When there's an example provided like the one you got from Barand, and then the version I provided, you have to go through the code and make sure you understand every line. If you don't you won't ever be able to program things adequately for yourself.

ginerjm · April 9, 2020

@Gizmola - careful. You're starting to sound like me!

@Revolusio(?) - you do need to do some reading - of the tips you are being given and in a manual of some kind that helps you to learn PHP. I actually wanted to respond earlier today about that dangling statement in your loop that did ABSOLUTELY NOTHING but held off. Figured it wouldn't really help to comment on it or to even ask why. So - you need to learn if you want to do this stuff. It's takes some work but the amazing thing is once you start to understand what you are trying to do, it will that much easier to actually do it!

Sign In

displaying database across

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information