dongmu3187
2019-02-27 08:36
采纳率: 0%
浏览 44
已采纳

试图在php中创建一个循环的bootstrap卡

im fairly new in php and mysqli and trying to make some basic website.

basically i want to make a looping statement in php to create cards in the same row with same size and col without myself creating the cards manually in html.

using bootstrap, php and mysqli

the database that i use contains itemname(varchar),itemprice(varchar), and itemimage(mediumblob)

the code is successfully running, but the output doesnt match the bootstrap cards, and they refuse to be in the same row

can anyone help me ? thank you

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<?php

require 'dbh.inc.php';

$sql = "SELECT * FROM item";
$stmt = mysqli_stmt_init($conn);

    if (!mysqli_stmt_prepare($stmt,$sql)) {
        echo "error";
    }   else{
        mysqli_stmt_execute($stmt);
        $result = $stmt->get_result();
            if ($result->num_rows > 0) {
                print '<div class="row">';
                while ($row = $result->fetch_assoc()) {
                        print'  <div class="col-4">';
                        print'              <div class="card">';
                        print'                  <img height="250" width="250" class="card-img-top" src="data:image/jpeg;base64,'.base64_encode( $row['itemimage'] ).'">';
                        print'                      <div class="card-body">';
                        print'                          <h5 class="card-title">'.$row["itemname"].'</h5>';
                        print'                          <p class="card-text">Price : '.$row["itemprice"].'</p>';
                        print'                      </div>';
                        print'              </div>';
                        print'          </div>';
                }   
            }   else {
                print' </div>';
                }
        }
$conn->close();
?>

    <script src="bootstrap/js/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="bootstrap/js/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="bootstrap/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
</div>
</body>
</html>

The Result

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doubi2014 2019-02-27 08:47
    已采纳

    I'm going on the assumption you've tested that there actually is data in your query result.

    Copied and updated your code a bit. Few things:

    • You close a div (for the row) in the else of the if() statement, but you open it in the if() side.
    • You could close PHP and use plain HTML within functions/loops, so long as you properly use <?php or <?= and ?>

    <?php function createCard(array $row) { ?>
        <div class="col-4">
            <div class="card">
                <img height="250"
                     width="250"
                     class="card-img-top"
                     src="data:image/jpeg;base64,<?= base64_encode($row['itemimage']) ?>">
                <div class="card-body">
                    <h5 class="card-title"><?= $row["itemname"] ?></h5>
                    <p class="card-text">Price : <?= $row["itemprice"] ?></p>
                </div>
            </div>
        </div>
    <?php } ?>
    
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
            <?php
    
            require 'dbh.inc.php';
    
            $sql  = "SELECT * FROM item";
            $stmt = mysqli_stmt_init($conn);
    
            if (!mysqli_stmt_prepare($stmt, $sql)) {
                echo "error";
            } else {
                mysqli_stmt_execute($stmt);
                $result = $stmt->get_result();
                if ($result->num_rows > 0) {
                    while ($row = $result->fetch_assoc()) {
                        createCard($row);
                    }
                }
            }
            $conn->close();
            ?>
            </div>
    
            <script src="bootstrap/js/jquery-3.3.1.min.js"
                    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
                    crossorigin="anonymous"></script>
            <script src="bootstrap/js/popper.min.js"
                    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                    crossorigin="anonymous"></script>
            <script src="bootstrap/js/bootstrap.min.js"
                    integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp"
                    crossorigin="anonymous"></script>
        </div>
    </body>
    </html>
    
    点赞 评论

相关推荐 更多相似问题