PHP MySQL Result displays twice why? - php

Question

I have this simple PHP Script to fetch results from the localhost WAMP server, and when I echo the query it displays one record twice for every record I have!
Result displayed as shown in picture:
Here is the PHP MySQL script
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
$movie_lists = "";
$no_result = "";
$servername = "localhost";
$username = "root";
$password = "localpass";
$dbname = "movieadventuredb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//$sql = "SELECT id, movie_quality, movie_release_date FROM movielisting";
$sql = "SELECT * FROM movielisting ORDER BY ID DESC LIMIT 10";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["movie_name"]. " " . $row["movie_quality"]. "<br>";
$id = $row["id"];
$movie_quality = $row["movie_quality"];
$release_date = strftime("%Y", strtotime($row["movie_release_date"]));
$movie_lists .= "<div class='item item-1'><a href='#'><img src='inventory_images/$id.jpg'/></a>
<a href='#'><div class='overlay'>
<p class='movie_quality $movie_quality'>$movie_quality</p>
<p class='movie_year year'>$release_date</p>
</div></a>
</div>";
}
} else {
$movie_lists = "";
}
$conn->close();
?>
Below is the code for CSS for the listing.
.recent_movies_slider .recent_movie_lists {float:left; width:97%;}
.slider-horizontal {width:90%; margin:25px auto; *background:#eee; height:240px; z-index:1;}
.slider-horizontal .item {height:200px; width:150px; margin:20px 10px 0;}
.slider-horizontal .item img {height:200px; width:150px;}
.slider-vertical {width:364px; margin:25px 0; float:left; background:#eee; height:300px;}
.slider-vertical .item {height:80px; width:324px; margin:10px 0 10px 20px;}
.overlay { position: relative; top:-204px; left:0; *right:0; *bottom:0; width:150px; height:200px; z-index:2; display:block; *background:red; *background-color: rgba(0,0,0,0.5); color:#fff;}
.overlay:hover {background:rgba(48, 160, 186, 0.43) url("../default_images/play-button.png") no-repeat; background-position:50% 50%;}
.movie_quality {
position: absolute;
bottom: 5px;
left: 5px;
text-transform:uppercase;
}
.hd {background:#B43104; padding:2px; border-radius:2px;}
.cam {background:#DBA901; padding:2px; border-radius:2px;}
.year {background:#086A87; padding:2px; border-radius:2px;}
.movie_year {
position: absolute;
bottom: 5px;
right: 5px;
}
and below is the HTML to echo out the result
<div class="recent_movie_lists">
<div id="slider" class="slider-horizontal">
<?php echo $movie_lists; ?>
</div>
</div>

Answer 1

Try setting this: $movie_lists = (all your code); instead of $movie_lists .= (all your code).
Sorry for all the stuff above, as allready answered in the comments. Why don't you just echo out the while loop in your div?
<div class="recent_movie_lists">
<div id="slider" class="slider-horizontal">
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//echo "id: " . $row["id"]. " - Name: " . $row["movie_name"]. " " . $row["movie_quality"]. "<br>";
$id = $row["id"];
$movie_quality = $row["movie_quality"];
$release_date = strftime("%Y", strtotime($row["movie_release_date"]));
echo "<div class='item item-1'><a href='#'><img src='inventory_images/$id.jpg'/></a>
<a href='#'><div class='overlay'>
<p class='movie_quality $movie_quality'>$movie_quality</p>
<p class='movie_year year'>$release_date</p>
</div></a>
</div>";
}
} else {
echo "";
}
?>
</div>
</div>
As I'm assuming your keeping the HTML and PHP in the same file.