Dynamically Create Card Grid Using Forech In PHP

[johnman]

Good day

I am trying to create a three column bootstrap card that will dynamically display data using php and mysql
my challenge is instead of dispaying in a grid it is displaying linearly. see the code below

<?php
              require "database/dbconfig.php";
              //include_once __DIR__.'/core-php-admin/database/dbconfig.php';
              $query = "SELECT * FROM users";
              $query_run = mysqli_query($connection, $query);

              if (mysqli_num_rows($query_run) >0)
              {
                foreach ($query_run as $row)
                {
                  ?>

  <div class="container py-5">

    <div class="row mt-3">

      <div class="col-xs-12 col-sm-6 col-md-4">
                <div class="frontside">
                    <div class=" my-card card shadow-sm p-3 mb-5 bg-white rounded">
                      <div class="row">
                        <div class="col-sm-3">
                          <img class="card-img user-img d-none d-sm-block" src="img/participants/bizlogo.png"  alt="Card image"/>
                          &nbsp;
                          <img class="card-img user-img user-img d-none d-sm-block" src="img/participants/bizlogo.png" alt="Card image"/>
                        </div>
                        <div class="col-sm-9">
                          <div class="card-body-right">
                            <p class="card-title" style="font-family:Montserrat; font-size:15px"><strong>Maramoja Transport</strong>
                              <br>
                              <span class="sub-title" style="line-height:17px">Founder: Nasiru Mustapha </span>
                            </p>
                            <p class="card-text" style="font-family:Montserrat; font-size:15px">
                                Maramoja Transport
                              
                            </p>
                            <a href="#trasteaprofile" data-toggle="modal" data-target="#trasteaprofile"><p style="font-family:Montserrat; font-size:15px">See More</p></a>

                          </div>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
        
      </div>

  </div>

  <?php
        }
      }
      else
      {
        echo "No record found";
      }
      ?>

 

kindly help

[ginerjm]

Wherever did you find this antiquated piece of html?  It is such a mess of out-dated things as well as a hugely complex mass of div tags and class values. 

Aren't you simply trying to produce an html table?

Anyway - you started a loop after your query.  Fine.  Then you output a whole set to html.  But nowhere did you output the values from your query.

Read up on how to use css to stylize your html.  Stop using p tags inside of a tags.  Get rid of the strong tag.  Set your font choice in the css body tag. Once.

And perhaps read up on using the stand-by html table method.

Sorry - but you have spent a lot of time either searching for this mess of code or writing this mess of code.  And it is a mess.  

[requinix]

You're doing a new container/row for each result from the query. Shouldn't you be using a single container/row and then a new card for each result?

[Strider64]

I personally don't use bootstrap, but I'm assuming it has grids? Anyways, I use grids and HTML for a two column format. A third column would be easy as well using CSS grids.

 

Here's the two column form using grids:

<main  class="content">
    <div class="container">
        <?php foreach ($cms as $record) { ?>
            <article class="cms">
                <img class="article_image"
                     src="<?= htmlspecialchars($record['image_path']) ?>" <?= getimagesize($record['image_path'])[3] ?>
                     alt="article image">
                <h2><?= $record['heading'] ?></h2>
                <span class="author_style">Created by <?= $record['author'] ?> on
                    <time datetime="<?= htmlspecialchars(CMS::styleTime($record['date_added'])) ?>"><?= htmlspecialchars(CMS::styleDate($record['date_added'])) ?></time>
                </span>
                <p><?= nl2br($record['content']) ?></p>
            </article>
        <?php } ?>
    </div>
</main>

Here's a small section of the CSS:

/* Approximately the size of a 1248px large display monitor */
@supports (grid-area: auto) {

  @media screen and (min-width: 78em) {
    .site {
      display: grid;
      grid-template-columns: 1fr minmax(23.4em, 54.6em);
      grid-template-areas:
				"header header"
				"nav nav"
				"main main"
                "sidebar sidebar"
                "footer footer";
      justify-content: center;
      width: 75em;
      margin: 0 auto;
    }
    .masthead {
      grid-area: header;
      background-image: url(../images/img-header-001pg.jpg);
      background-repeat: no-repeat;
    }
    .checkStyle {
      grid-area: main;
      font-size: 1.2em;
    }

    .sidebar {
      grid-area: sidebar;
      justify-content: center;
    }


  } // End of Screen Size
} // End of Last Grid Area

Using grids cuts down on the CSS as well as the HTML, plus CSS really should be in a separate file and not inline. I'm assuming it's your CSS, but I'm sure you can have CSS from bootstrap that is an external fire as well that you can change?

[jarvis]

Using Bootstrap 4 cards, something like:

<?php

require "database/dbconfig.php";
//include_once __DIR__.'/core-php-admin/database/dbconfig.php';
$query = "SELECT * FROM users";
$query_run = mysqli_query($connection, $query);

if (mysqli_num_rows($query_run) >0){ ?>
<div class="container py-5">
	<div class="row">
	<?php foreach ($query_run as $row){ ?>

        <div class="col-4">
            <div class="card">
                <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Card body</p>                    
                </div><!-- /card-block -->
				<div class="card-footer">
				Card footer
				</div><!-- /card-footer -->
            </div><!-- /card -->
        </div><!-- /col-4 -->

	<?php } ?>     
	</div><!-- /row -->
</div><!-- /container -->
<?php } else {
	echo "No record found";
}
?>