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 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler