Jump to content

Dynamically Create Card Grid Using Forech In PHP


johnman
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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?

  • Thanks 1
Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

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

×
×
  • 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.