CODEWITHSUNDEEP
phphtmltwitter-bootstrapcodeigniter
ClassyKidder
ClassyKidder

Reputation: 25

Bootstrap cards in codeigniter

I am working on my second project however for this i am stuck and have literally not found anything online else where so it's come down to me asking the crowd of Stackoverflow. I am using Codeigniter to work on a games review website. I have managed to load my data of dummy reviews from the database to the website. However I would like to use Bootstrap cards to hold the data of the game reviews such as image, game title and short description of the review. This is my code below:

<div class="container">
    <div class="row">
        <?php
        foreach ($result as $row)
        {


             $thisImage = $row->ReviewImage;
             echo "<tr>";
             echo "<td>". "<img src='application/images/$thisImage'".$row->ReviewImage."</td>";
             echo "<td>".$row->GameName."<br>"."<td>";
             echo "<td>".$row->GameBlurb."<br>"."<td>";
             echo "<td>".$row->GameReview."<br>"."<td>";
             
            // Look into the image properties library in CodeIgniter for more help on images:

        }
        ?>
    </div>
</div>
</body>

If anyone who has worked with Bootstrap cards before know how to implement it into code igniter I could really use help on this as I have tried all methods and yet have failed at it.

Upvotes: 1

Views: 1318

Answers (2)

ROOT
ROOT

Reputation: 11622

Your code have some issues:

  1. you don't need <tr> and <td> since you are not printing out HTML table
  2. in your image src attribute you are using $row->ReviewImage twice you can just omit $thisImage = $row->ReviewImage;
  3. when using PHP in HTML template use Alternative syntax for control structures for more readability, to implement card in your app just follow documentation for bootstrap card, here is a suggested code:
<div class="container">
  <div class="row">
    <?php foreach ($result as $row): ?>
      <div class="card" style="width: 18rem;">
        <img src="<?php echo '/games-rev/images/' . $thisImage; ?>" class="card-img-top" alt="title goes here" />
        <div class="card-body">
          <h5 class="card-title"><?php echo $row->GameName; ?></h5>
          <p class="card-text">
            <?php echo $row->GameBlurb; ?>
            <?php echo $row->GameReview; ?>
          </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

Upvotes: 0

Serghei Leonenco
Serghei Leonenco

Reputation: 3507

Here is a default Bootstrap card template, Source:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Try this:

...

<div class="row">
        <?php foreach ($result as $row):?>
             <div class="card" style="width: 18rem;">
                 <img src="application/images/<?= $row->ReviewImage ?>" class="card-img-top" alt="<?= $row->GameName ?>">
                 <div class="card-body">
                      <h5 class="card-title"><?= $row->GameName ?></h5>
                      <p class="card-text"><?= $row->GameBlurb . ' ' . $row->GameReview ?></p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                 </div>
             </div>
        <?php endforeach; ?>
    </div>
...

Hope it helps.

Upvotes: 2

Related Questions