CODEWITHSUNDEEP
phphtmlmysqlbootstrap-4badge
Bagus Amrullah Fikri
Bagus Amrullah Fikri

Reputation: 395

bootstrap badge color based data on mysql

i want to ask if it possible to change the bootstrap badge color based on mysql using PHP ONLY?

As you can see i have a data that has 'status = 1' the datatype for that column is TINYINT , there is 3 status available , so i want each number will effect the color of badges that i use in html

Below is my html look like for the status = 2

enter image description here

and this color is what i want for the status = 1

enter image description here

is it possible so that if member upload an item and choose the status type , it will automatically choose the right badge color ?

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <span class="badge badge-success">Item Found</span>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Upvotes: 1

Views: 2513

Answers (4)

ScaisEdge
ScaisEdge

Reputation: 133370

You could use a switch and manage the proper text too 

  ....
  <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
  <hr>
  <? php 
    switch ( $record ['status']){
      case 1:
        $badge ='badge badge-success';
        $msg = 'Item Found';
        break;
      case 2:
        $badge ='badge badge-warning';
        $msg = 'Item Lost';
        break;     

      case 3:
        $badge ='badge badge-info';
        $msg = 'Item some....';
        break;  

      default:
        $badge ='badge badge-primary';
        $msg = 'Item other';
        break;


    }

   echo  '<span class="<'. $badge . '"><badge badge-success">'. $msg. '</span>';

?>

<p class="card-text"><?php echo $record ['description']; ?></p>
....

Upvotes: 2

Nova
Nova

Reputation: 364

Try this:

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <?php if( $record ['status']==1) echo '<span class="badge badge-success" style="background-color:red">Item Found</span>' ; 
    elseif( $record ['status']==2) echo '<span class="badge badge-success" style="background-color:yellow">Item Found</span>' ; 
    else echo '<span class="badge badge-success" style="background-color:green">Item Found</span>' ; ?>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Use if and else condition.

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <?php if($record['status'] == 2){ ?>
    <span class="badge badge-warning">Item lost</span>
    <?php }else if($record['status'] == 1){ ?>
      <span class="badge badge-success">Item Found</span>
    <?php } ?>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Upvotes: 2

Gowri
Gowri

Reputation: 1856

Use if else to check current status of item. Assign whatever class you need for that status.

if($record['status'] == 1)
{
    $stsCls = 'badge-success';
}
else if($record ['status'] == 2)
{
    $stsCls = 'badge-warning';
}
else
{
    $stsCls = 'badge-primary';
}

add that class to item status tag.

<span class="badge <?=$stsCls;?>">Item Found</span>

Upvotes: 1

Related Questions