Export and call the image information from the database.

slug: 73
title: Exporting and Calling Image Information from a Database
date: 2021-07-09 21:03:00
updated: 2021-12-01 14:23:49
categories:
- Technology
tags:
- ajax
- database
- image hosting

>Interface link: http://121.196.166.173/img/img.php
>Demo: http://121.196.166.173/img

Introduction#

In order to write blog posts and for other purposes, I have set up a web page that connects to a GitHub repository using a server. I also record the uploaded information in a database, such as the thumbnail name, timestamp, and image link. These correspond to the images in the GitHub repository. However, I found it awkward to view the images on GitHub, so I decided to create a web page that can display the images by linking them from the GitHub repository. Fortunately, we don't have to copy them one by one, thanks to the database.

Let's take a look at the specific content.

Create an Interface#

Great, we have the fields we need. Without further ado, here is the completed interface code.

<?php

header('Content-Type:application/json; charset=utf-8');
header("Access-Control-Allow-Origin:*");

$servername = "localhost";
$username = "imgbed";
$password = "imgbed";
$dbname = "imgbed";

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

// imgmd5 name converted to md5
// imguploadtime upload timestamp
// imgurl link
// upload ip
$sql = "SELECT imgmd5, imguploadtime, imgurl, imguploadip FROM remote_imgs";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // Output data
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
    
    $json = json_encode($data, JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT); // Convert data to JSON.
    
    exit($json);
} else {
    echo "No results found!";
}

$conn->close();

?>

The thumbnail name, timestamp, image link, and upload IP are exported in JSON format. Interface link: http://121.196.166.173/img/img.php

Use ajax for Calling#

Then, we just need to call the interface in the frontend and create a simple page. Here is the HTML code that calls the interface using ajax.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hosting</title>
    <style>
        .container {
            max-width: 1000px;
            margin: 40px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .item {
            width:300px;
            /* height: 300px; */
            overflow: hidden;
            border: 2px solid #bbb;
            margin-bottom: 24px;
        }

        .item a{
            display: block;
            width: 300px;
            /* height: 300px; */
            overflow: hidden;
        }
        .item img{
            max-width: 300px;
            max-height: 300px;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="https://cdn.shuxhan.com/jquery3.6.0.js"></script>
    <script>
        var str = '';
        $.ajax({
            url: 'http://121.196.166.173/img/img.php',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (data) {
                $.each(data, function (i, item) {
                    console.log(item)
                    list = "<div class='item'><p>Thumbnail Name: " + item.imgmd5 + "</p>" +
                        "<p>Timestamp: " + item.imguploadtime + "</p>" +
                        "<a target='_blank' href='"+ item.imgurl +"'><img src='" + item.imgurl + "'></a>" +
                        "<p>Upload IP: " + item.imguploadip + "</p></div>"

                    str += list;
                }),
                $(".container").html(str);
                console.log('Data request successful')

            },
            error: function () {
                console.log('Data request failed')
            }

        });
    </script>
</body>

</html>

Finally, I uploaded this page to my server. You can see the result here: http://121.196.166.173/img

Due to time constraints, I didn't optimize the UI further. This is just a rough outline of the process. When I use it in the future, I will further optimize the page for displaying images.