Retrieving image names from MySQL DB in HTML using PHP functions - php

Question

I'm new to coding.
I have to make a website, where images are retrieved from MySQL database using PHP functions, but I can't store images in the DB, only their names, and I can't manually put in the id as in getImage(1) etc.
So I have these two functions:
function getImage($imgid) {
$sql_command = "SELECT * FROM images WHERE id=$imgid;";
$result = mysqli_query(getConnection(), $sql_command);
if($result) {
$result = mysqli_fetch_assoc($result);
return $result;
} else {
echo "Error <br /> " . mysqli_error(getConnection());
return NULL;
}
}
function getImages() {
$sql_command = "SELECT * FROM images;";
$result = mysqli_query(getConnection(), $sql_command);
if($result) {
return $result;
} else {
echo "Error.";
return NULL;
}
}
I then included the file in my index.php but, honestly, I lack understanding on how to actually apply these functions and specify the name of the image, since it's a variable.
I don't expect someone to solve this problem for me, just to explain the logic or maybe share a link to a useful resource that would explain a situation like this.

Answer 1

Typically the image will be in a directory. And the name of the image will be saved in the database. You can then make a query to receive all image names and display them using a loop
$sql = "SELECT * FROM images";
$imageresult1 = mysql_query($sql);
while($rows=mysql_fetch_assoc($imageresult1))
{
$image = $rows['image'];
echo "<img src=/path/to/'$image' >";
echo "<br>";
}

Answer 2

I'm not sure if I understand exactly what you want to do, but in the database you have to save the path where it will be saved imagine on the server, then you can list them.
<?php
function getImages() {
$sql_command = "SELECT * FROM images;";
$result = mysqli_query(getConnection(), $sql_command);
if($result) {
$imgs = [];
while($rows=mysql_fetch_assoc($result)) {
$imgs[] = $rows;
}
return $imgs;
} else {
echo "Error.";
return NULL;
}
}
// list imgs
$imgs = getImages();
foreach($imgs as $img) {
echo "<img src'{$img['path']}' />";
}

Answer 3

Hopefully the following might give an idea how to use the functions you already have and, with a little work, implement the use of getImage($id) by using ajax. The code below will display the images found by querying the db ( assuming the db table has a structure similar to this )
+-------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+-------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(512) | YES | | NULL | |
+-------------+------------------+------+-----+---------+----------------+
And also assuming that the column name stores the fullpath to the image rather than just the image name itself.
<?php
function getConnection(){
$dbhost = 'localhost';
$dbuser = 'root';
$dbpwd = 'xxx';
$dbname = 'xxx';
$db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
return $db;
}
function getImages(){
/*
query the database to return the ID and name of ALL images
*/
try{
/* two named fields - these will be returned later */
$sql='select `id`,`name` from `images`';
/* Get the db conn object */
$db=getConnection();
/* throw exception if we are unable to bind to db */
if( !$db or !is_object( $db ) ) throw new Exception('Failed to bind to database');
/* query the db */
$res=$db->query( $sql );
/* throw an exception if the query failed */
if( !$res ) throw new Exception('sql query failed');
/* prepare results and iterate through recordset */
$results=array();
while( $rs=$res->fetch_object() ) $results[ $rs->id ]=$rs->name;
/* return the array of results */
return $results;
}catch( Exception $e ){
echo $e->getMessage();
return false;
}
}
function getImage( $id=false ){
/*
Query the database to return single image based upon ID
*/
try{
/* If the id is not specified or empty throw exception */
if( !$id )throw new Exception('Image ID was not specified');
/* sql statement to execute */
$sql='select `name` from `images` where `id`=?';
/* get db conn object */
$db=getConnection();
/* throw exception if we are unable to bind to db */
if( !$db or !is_resource( $db ) ) throw new Exception('Failed to bind to database');
/* Create a "Prepared Statement" object - avoid SQL injection !! */
$stmt=$db->prepare( $sql );
/* If the statement failed, throw exception */
if( !$stmt )throw new Exception('Failed to prepare sql query');
/* Bind the supplied ID to the sql statement */
$stmt->bind_param( 'i', $id );
/* Execute the query */
$res=$stmt->execute();
if( $res ){
/* Prepare results */
$stmt->store_result();
$stmt->bind_result( $name );
$stmt->fetch();
/* return the name of the image */
return $name;
} else {
throw new Exception('sql query failed');
}
}catch( Exception $e ){
echo $e->getMessage();
return false;
}
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Images</title>
<style>
#images{
width:90%;
float:none;
display:block;
margin:1rem auto;
}
#images > img {
float:none;
margin:1rem;
padding:1rem;
border:1px dotted gray;
}
</style>
<script>
document.addEventListener( 'DOMContentLoaded', function(){
var col=Array.prototype.slice.call( document.getElementById('images').querySelectorAll('img') );
col.forEach(function(img){
img.onclick=function(e){
alert('You could send an ajax request, using the ID:' + this.dataset.imgid + ' and then use PHP at the server side to process the ajax request and return the specific image using "getImage(id)"')
}
});
}, false );
</script>
</head>
<body>
<div id='images'>
<?php
$images = getImages();
if( !empty( $images ) ){
foreach( $images as $id => $name ){
echo "<img data-imgid='$id' src='$name' title='This image is called $name and has db ID $id' />";
}
}
?>
</div>
</body>
</html>