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

试图在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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件
  • ¥15 不同系统编译兼容问题
  • ¥100 三相直流充电模块对数字电源芯片在物理上它必须具备哪些功能和性能？
  • ¥30 数字电源对DSP芯片的具体要求
  • ¥20 antv g6 折线边如何变为钝角
  • ¥30 如何在Matlab或Python中 设置饼图的高度
  • ¥15 nginx中的CORS策略应该如何配置
  • ¥30 信号与系统实验：采样定理分析