尝试在 php 中创建循环引导卡答案

【问题标题】：Trying to create a looping bootstrap cards in php尝试在 php 中创建循环引导卡
【发布时间】：2019-07-20 22:04:48
【问题描述】：

我是 php 和 mysqli 的新手，正在尝试制作一些基本的网站。

基本上我想在 php 中创建一个循环语句以在同一行中创建具有相同大小和 col 的卡片，而无需自己在 html 中手动创建卡片。

使用 bootstrap、php 和 mysqli

我使用的数据库包含 itemname(varchar)、itemprice(varchar) 和 itemimage(mediumblob)

代码运行成功，但输出与引导卡不匹配，拒绝在同一行

谁能帮助我？谢谢

<!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

【问题讨论】：

您尝试过什么调试问题？您是否尝试过检查预期的输出，将其与您的 PHP 代码进行匹配，并查看缺少的内容 - 因为我们无法猜测
我试图“手动”在 html/css 中创建卡片，而不使用数据库，以防我的 html 语法错误。在输出符合我的愿望后，我尝试创建循环以从 mysql 数据库中提取变量和图像并将其实现为 html。并成功读取数据库、表和内容。但结果不对。我确实在我的问题中上传了输出。你可以看看
好吧，您没有提供预期的标记结构。此外，您是否尝试过将当前标记与预期标记进行比较？
已解决，我忘记更改此 php 文件中的引导目录...抱歉。

标签： php html bootstrap-4

【解决方案1】：

我假设您已经测试过您的查询结果中确实有数据。

复制并更新了您的代码。几件事：

您在if() 语句的else 中关闭了一个div（用于行），但您在if() 一侧打开它。
您可以关闭 PHP 并在函数/循环中使用纯 HTML，只要您正确使用 <?php 或 <?= 和 ?>

<?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>

【讨论】：