How to display image saved in image folder and path in mysql database in bootstrap div

See more:

PHP

bootstrap

am build a newsletter website and am having issues with display image saved in folder and path in database below is my code to insert image and other required data and is working fine

<?php
date_default_timezone_set('Africa/lagos');
if(isset($_POST['save']))
{    
    
    $getId=mysqli_fetch_row(mysqli_query($con,"select max(id) from berita"));
    
    if(!empty($_FILES['foto']['tmp_name']))
    { 
        $ext=strtolower(substr($_FILES['foto']['name'],-3));
        if($ext=='gif')
            $ext=".gif";
        else
            $ext=".png";
        move_uploaded_file($_FILES['foto']['tmp_name'], "../img/" . basename(($getId[0]+1).$ext));
    }
    
    mysqli_query($con,"insert into berita values('','".date('y-m-d')."','".($getId[0]+1).$ext."','$judul','$konten')");
    
      echo "
    <script>
    location.assign('index.php?page=berita&ps=true1');
    </script>
    ";
}
elseif(isset($_POST['update']))
{
    if(!empty($_FILES['foto']['tmp_name']))
    { 
        unlink("../img/$gambar");
        $ext=strtolower(substr($_FILES['foto']['name'],-3));
        if($ext=='gif')
            $ext=".gif";
        else
            $ext=".png";
        move_uploaded_file($_FILES['foto']['tmp_name'], "../img/" . basename(($_GET['id']).$ext));
        
        mysqli_query($con,"update berita set judul='$judul',gambar='".$_GET['id'].$ext."',konten='$konten' where id='".$_GET['id']."'");
    }
    else
        mysqli_query($con,"update berita set judul='$judul',konten='$konten' where id='".$_GET['id']."'");
    
    echo "
    <script>
    location.assign('index.php?page=berita&ps=true2');
    </script>
    ";
}

/*pesan berhasil update*/
if(isset($_GET['ps'])=='true2')
    echo "<div class='alert alert-success' role='alert'>Data Berhasil Terupdate</div>";
elseif(isset($_GET['ps'])=='true1')
    echo "<div class='alert alert-success' role='alert'>Data Berhasil Terimpan</div>";

if(isset($_GET['id']))
$data=mysqli_fetch_row(mysqli_query($con,"select * from berita where id='".$_GET['id']."'"));

?>
    <style>
        #image-holder {
            margin-top: 8px;
        }
        
        #image-holder img {
            border: 8px solid #DDD;
            max-width:100%;
        }
    </style>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">Form Input Berita</h3>
                </div>
                <form class="form-horizontal" method="post" enctype="multipart/form-data">
                   <input type="hidden" name="id" value="<?php echo isset($_GET['id'])?$_GET['id']:''; ?>">
                   <input type="hidden" name="gambar" value="<?php echo isset($data[2])?$data[2]:''; ?>">
                    <div class="box-body">

                        <div class="form-group">
                            <label for="dua" class="col-sm-2 control-label">Tanggal</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="dua" value="<?php echo isset($_GET['id'])?$data[1]:date('d-m-Y'); ?>" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tiga" class="col-sm-2 control-label">Judul Berita</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="Judul" name="judul" id="tiga" value="<?php echo isset($data[3])?$data[3]:''; ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tiga" class="col-sm-2 control-label">Isi Berita</label>
                            <div class="col-sm-10">
                                <textarea class="form-control konten" placeholder="Isi Berita" name="konten"><?php echo isset($data[4])?$data[4]:''; ?></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tiga" class="col-sm-2 control-label">Gambar</label>
                            <div class="col-sm-10">
                                <input type="file" accept="image/*" name="foto" class="form-control" id="foto">
                                <div id="image-holder">
                                   <?php
                                    if(isset($_GET['id']))
                                        echo "<img src='../img/$data[2].'?rand='".rand()."' alt=''>";
                                    ?>
                                </div>
                                <script>
                                    $("#foto").on('change', function () {

                                        //Get count of selected files
                                        var countFiles = $(this)[0].files.length;

                                        var imgPath = $(this)[0].value;
                                        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                                        var image_holder = $("#image-holder");
                                        image_holder.empty();

                                        var x = document.getElementById("foto");
                                        var file = x.files[0];

                                        if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "gif") {
                                            if (typeof (FileReader) != "undefined") {

                                                //loop for each file selected for uploaded.
                                                for (var i = 0; i < countFiles; i++) {

                                                    var reader = new FileReader();
                                                    reader./>", {
                                                            "src": e.target.result,
                                                            "class": "thumb-image"
                                                        }).appendTo(image_holder);
                                                    }

                                                    image_holder.show();
                                                    reader.readAsDataURL($(this)[0].files[i]);
                                                }

                                            } else {
                                                alert("This browser does not support FileReader.");
                                            }
                                        } else {
                                            alert("hanya boleh foto bertype PNG, JPG dan GIF");
                                            var control = $("#foto");
                                            control.replaceWith(control.val('').clone(true));
                                        }
                                    });
                                </script>
                            </div>
                        </div>
                        <!--input image awal-->
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <input onclick="change_url()" type="submit" class="btn btn-info pull-right" value="Save" name="<?php echo isset($_GET['id'])?'update':'save'; ?>">
                    </div>
                    <!-- /.box-footer -->
                </form>
            </div>
        </div>
        <!--/.col (right) -->
    </div>
    <!-- /.row -->

and below is my code to display information from database.every thing is working fine just that the image does not display it only display a small image default icon below is my code to index.php code to display data

			<pre lang="PHP">	//load all news from the database and then OREDER them by newsid
        //you will notice that newlly added news will appeare first.
        //also you can OREDER by (dtime) instaed of (news id)

$sql = "SELECT * FROM berita ORDER BY id DESC LIMIT 0, 1";
$result = mysqli_query($conn, $sql);

while ($row = mysqli_fetch_assoc($result)) {
	
	
	$image= $row['gambar'];
	$title = $row['judul'];
    $description = $row['konten'];
    $time = $row['tanggal'];
	
	
	echo"&lt;html&gt;";
	echo"&lt;head&gt;";
echo"&lt;title&gt;Business_Blog  | Home &lt;/title&gt;";
echo"&lt;meta name='viewport' content='width=device-width, initial-scale=1'&gt;";
echo"&lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8' /&gt;";
echo"&lt;meta name='keywords' content='Business_Blog Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design' /&gt;";
echo "&lt;script type='applijewelleryion/x-javascript'&gt; addEventListener('load', function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } &lt;/script&gt;";
echo	"&lt;link href='css/bootstrap.css' rel='stylesheet' type='text/css' /&gt;";
//&lt;!-- Custom Theme files --&gt;
echo	"&lt;link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'&gt;";
echo	"&lt;link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;";
echo "&lt;link href='css/style.css' rel='stylesheet' type='text/css' /&gt;";	
echo	"&lt;script src='js/jquery-1.11.1.min.js'&gt;&lt;/script&gt;";
echo	"&lt;script src='js/bootstrap.min.js'&gt;&lt;/script&gt;";
echo"   &lt;/head&gt;";


 echo"      <div class="tc-ch">";
echo"         <div class="tch-img">";
echo"            <a href="singlepage.html">&lt;img src='images/$image' class='img-responsive' alt=''/&gt;</a>";
echo			"</div>";
//echo"               <a class="blog blue" href="singlepage.html"> Technology</a>";
echo"               <h3><a href="singlepage.html">$title</a></h3>";
echo"                  <p>".substr($description,0,200)."<a href="articles.php?id="> Read more</a></p>";
echo"                     <div class="blog-poast-info">";
echo"                        <ul>";
echo"                           <li> <i class="glyphicon glyphicon-user"> </i><a class="admin" href="#">Admin </a><li>";
echo"                        <li> <i class="glyphicon glyphicon-calendar"> </i>$time</li>";
echo"                        <li> <i class="glyphicon glyphicon-comment"> </i><a class="p-blog" href="#">3 comments</a></li>";
echo"                           <li> <i class="glyphicon glyphicon-heart"> </i><a class="admin" href="#">5 favourites</a></li>";
echo"                           <li> <i class="glyphicon glyphicon-eye-open"> </i>1.128</li>";
echo"                           </li></li></ul>";
echo"                           </div> ";
echo"                        </div>";
echo"                        <div class="clearfix"></div>";
					//&lt;!-- technology-top --&gt;
			//&lt;!-- technology-top --&gt;
echo"                     <div class="soci">";
echo"                     <ul>";
echo"                     <li><a href="#" class="facebook-1"> </a></li>";
echo"                     <li><a href="#" class="facebook-1 twitter"> </a></li>";
echo"                     <li><a href="#" class="facebook-1chrome"> </a></li>";
echo"                     <li><a href="#"><i class="glyphicon glyphicon-envelope"> </i></a></li>";
echo"                     <li><a href="#"><i class="glyphicon glyphicon-print"> </i></a></li>";
echo"                     <li><a href="#"><i class="glyphicon glyphicon-plus"> </i></a></li>";
echo"                     </ul>";
echo"                        </div>";
//echo "&lt;img src=".$row['gambar']." /&gt;";
//echo "<p>".substr($row['konten'],0,200)."<a href="articles.php?id="> Read more</a></p>";
  echo"&lt;/html&gt;";  
}

$conn-&gt;close();
			?&gt;

What I have tried:

have tried putting the image from database into a variable but it does not work,have also tried to echo the image row from database but it does not work