当您从 mysql 数据库上传图片时,如何显示最近 5 篇带图片的帖子?

How to show the last 5 posts with image when you upload it from a mysql database?

总体目标是在将最后 5 个帖子上传到 MySQL 数据库时显示它们的图片。我有 4 个文件:

我不明白的主要问题是为什么我在 index.php 中看到多张卡片? 我的猜测可能是 while 循环和 bootstrap 之间的冲突。我在 mysql 中只有 4 个数据。

这里是 index.php:

<?php
require 'conexion.php';
$conexion = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
?>

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<img src="https://placeimg.com/720/200/arch" id="banner"/>

<div class="container" id="principal">
    <h1>Bienvenido a mi blog!</h1>
    <a href="new_post.php" class="btn btn-primary btn-add">Agregar post</a>
    <h2>Ultimos 5 posts</h2>
    <div id="card-list">

        <div class="card">
            <?php
            $sql = "SELECT * FROM blogtp_1";
            $result = mysqli_query($conexion, $sql);
            while ($row = mysqli_fetch_array($result)) {
                echo  '<img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                       <div class="card-body">
                         <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                         <p class="card-text">' . $row["contenido_del_post"] . '</p>
                         <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                       </div> ';
            };
            ?>
        </div>

        <div class="card">
            <?php
            $sql = "SELECT * FROM blogtp_1";
            $result = mysqli_query($conexion, $sql);
            while ($row = mysqli_fetch_array($result)) {
                echo  '<img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                       <div class="card-body">
                         <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                         <p class="card-text">' . $row["contenido_del_post"] . '</p>
                         <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                       </div> ';
            };
            ?>
        </div>

        <div class="card">
            <?php
            $sql = "SELECT * FROM blogtp_1";
            $result = mysqli_query($conexion, $sql);

            while ($row = mysqli_fetch_array($result)) {
                echo  '<img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                       <div class="card-body">
                         <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                         <p class="card-text">' . $row["contenido_del_post"] . '</p>
                         <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                       </div> ';
            };
            ?>
        </div>

        <div class="card">
            <?php
            $sql = "SELECT * FROM blogtp_1";
            $result = mysqli_query($conexion, $sql);

            while ($row = mysqli_fetch_array($result)) {

                echo  '<img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                       <div class="card-body">
                         <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                         <p class="card-text">' . $row["contenido_del_post"] . '</p>
                         <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                       </div> ';
            };
            ?>
        </div>

        <div class="card">
            <?php
            $sql = "SELECT * FROM blogtp_1";
            $result = mysqli_query($conexion, $sql);

            while ($row = mysqli_fetch_array($result)) {
                echo  '<img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                       <div class="card-body">
                         <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                         <p class="card-text">' . $row["contenido_del_post"] . '</p>
                         <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                       </div> ';
            };
            ?>
        </div>
    </div>
</div>
</body>
</html>

如果你能帮助我,我将不胜感激!

您只需迭代一次,然后将每个 post 显示在不同的卡片中。

你的index.php

<?php

require 'conexion.php';

$conexion = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);

function show_posts() {
    global $conexion;
    $sql = "SELECT * FROM blogtp_1";
    $result = mysqli_query($conexion, $sql);
    while ($row = mysqli_fetch_array($result)) {
        echo '<div class="card">
                <img class="card-img-top" src="imagen/' . $row["imagen_upload"] . '"/>
                <div class="card-body">
                     <h5 class="card-title">' . $row["titulo_del_post"] . '</h5>
                     <p class="card-text">' . $row["contenido_del_post"] . '</p>
                     <a href="ver.php?id=' . $row["id"] . '" class="btn btn-primary">Ver</a>
                </div> 
              </div>';
    };
}
?>

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<img src="https://placeimg.com/720/200/arch" id="banner"/>

<div class="container" id="principal">
    <h1>Bienvenido a mi blog!</h1>
    <a href="new_post.php" class="btn btn-primary btn-add">Agregar post</a>
    <h2>Ultimos 5 posts</h2>
    <div id="card-list">
        <?php show_posts(); ?>
    </div>
</div>
</body>
</html>