从数据库中选择图像并显示在网页(PHP)上

时间:2019-03-14 18:01:16

标签: php html css sql database

我正在SELECT从数据库中访问images列以显示在HTML <table>中。我不确定下面的$sql = "SELECT Images" . "FROM koop";代码是否可以加载图像。

My page

Example page how it should look like

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "woodstocks";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT Type, Prijs, Adres, Woonopp, Grondopp, Slaapkamers, Badkamers, Bebouwing, Bouwjaar, Images, Text "
        . "FROM koop";

$htmlTabel = "Er is niks gevonden terug te vinden!";

$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    $htmlTabel = "<table class='table'>";
    $htmlTabel .= "<tr class='thead-dark'>";
    $htmlTabel .= "<th>Type</th>" .
            "<th>Prijs</th>" .
            "<th>Adres</th>" .
            "<th>Woonopp</th>" .
            "<th>Grondopp</th>" .
            "<th>Slaapkamers</th>" .
            "<th>Badkamers</th>" .
            "<th>Bebouwing</th>" .
            "<th>Bouwjaar</th>" .
            "<th>Images</th>" .
            "<th>Text</th>";
    $htmlTabel .= "</tr>";
    while ($row = $result->fetch_assoc()) {
        $htmlTabel .= '<tr>';
        $htmlTabel .= '<td>' . $row['Type'] . '</td>' .
                '<td>' . $row['Prijs'] . '</td>' .
                '<td>' . $row['Adres'] . '</td>' .
                '<td>' . $row['Woonopp'] . '</td>' .
                '<td>' . $row['Grondopp'] . '</td>' .
                '<td>' . $row['Slaapkamers'] . '</td>' .
                '<td>' . $row['Badkamers'] . '</td>' .
                '<td>' . $row['Bebouwing'] . '</td>' .
                '<td>' . $row['Bouwjaar'] . '</td>' .
                '<td>' . $row['Images'] . '</td>' .
                '<td>' . $row['Text'] . '</td>';
        $htmlTabel .= '</tr>';
    }
    $htmlTabel .= "</table>";
}

$conn->close();
?>


<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


        <!--BOOTSTRAP-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <!-- COSTUM STYLE.CSS -->
        <link href="Classes/Model/Koop.css" rel="stylesheet" type="text/css"/>

        <title>Woodstocks Immo</title>
        <link rel="shortcut icon" type="image/png" href="img/Woodstocks.png">
    </head>
    <body class="d-flex flex-column">
        <nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: rgba(0,0,0,0.3);">
            <a href="http://www.facebook.com" style="margin-left: 15px;"><img width="50" src="img/facebook.png" alt=""/></a>
            <a href="http://www.instagram.com" style="margin-left: 15px;"><img width="40" src="img/instagram.png" alt=""/></a>
            <a href="http://www.twitter.com" style="margin-left: 15px;"><img width="50" src="img/twitter.png" alt=""/></a>
            <a style="color: mintcream; margin-left: 15px;" class="navbar-brand" href="#">Woodstocks</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="navb" class="navbar-collapse collapse hide">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Huur">Huur</a>
                    </li>
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Koop">Koop</a>
                    </li>
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Verkoop-Verhuur">Verkopen/Verhuren</a>
                    </li>
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Team">Team</a>
                    </li>
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Contact">Contact</a>
                    </li>
                </ul>

                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item">
                        <a style="color: mintcream; padding-left: 45px; padding-right: 45px;" class="nav-link" href="Login">Inloggen/Registreren</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="background-item">
            <img src="img/pexels-photo-453201.jpeg" style="height: auto; max-height: 400px; object-fit: cover; width: 100%;" alt=""/>
            <div class="col-md-12" style="width: 100%;">
            </div> 
        </div>

        <div class="container" style="margin-top: 25px;">
            <?php echo $htmlTabel ?>
        </div>
    </body>
</html>

2 个答案:

答案 0 :(得分:0)

  

我不确定$ sql =“ SELECT Images”。 “ FROM koop”;我有的代码   下面将用于加载图像。

您必须继续尝试一下,看看它是否可以工作,但是如果您的数据库详细信息正确且查询正确,它应该可以工作。

如果图像放在名为Koop的表中,并且图像的url(可能)存储在同一表的Images列下,则查询SELECT Images FROM koop;应该工作。

答案 1 :(得分:0)

因此,我制作了下一个示例,并上传图像并显示图像,但是我接近它了PICTURE 1 UPLOAD Picture 2 HTML

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "woodstocks";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['Upload'])) {

    $target = "img/" . basename($_FILES['images']['name']);

    $image = $_FILES['images']['name'];

    $sql = "INSERT INTO huur (images) VALUES ('$images')";

    mysqli($conn, $sql);

    if (move_uploaded_file($_FILES['images']['tmp_name'], $target)) {
        $msg = "Image uploaded successfully";
    } else {
        $msg = "There was a problem uploading image";
    }
}
?>

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form enctype="multipart/form-data" action="upload" method="POST">
            <p>Upload van een bestand</p>
            <input type="file" name="images"/>
            <br>
            <input type="submit" value="Upload"/>
        </form>
        <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "woodstocks";

// Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }


        $sql = "SELECT images" . "FROM images";
        $result = msqli($conn, $sql);

        while ($row = mysqli_fetch_all($result)) {
            echo "<img src='img/".$row['images']."'>";
        }
        ?>
    </body>
</html>