Jump to content

displaying database across

Revolutsio

By Revolutsio
in PHP Coding Help

 Share

Recommended Posts

Revolutsio Regular Member

Revolutsio

Posted
Posted

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?

 

Link to comment
Share on other sites
Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted 
<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>

 

Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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

  • Like 1
Link to comment
Share on other sites
ginerjm Prolific Member

ginerjm

Posted
Posted

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.

Link to comment
Share on other sites
Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted

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>

image.png.62172faeeb51fef8b8cbc3ee00350db4.png

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

  • Like 1
Link to comment
Share on other sites
gizmola Prolific Member

gizmola

Posted
Posted

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;
}

 

css_grid_layout.png

 

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

  • Like 1
Link to comment
Share on other sites
Phi11W Advanced Member

Phi11W

Posted
Posted
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.

Link to comment
Share on other sites
Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted
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;
}

 

css_grid_layout.png

 

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

Thank you for your help.

Link to comment
Share on other sites
Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted 
<?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?

Link to comment
Share on other sites
gizmola Prolific Member

gizmola

Posted
Posted

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.  

Link to comment
Share on other sites
ginerjm Prolific Member

ginerjm

Posted
Posted

@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!

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.