Sort movies with dropdown - php

Question

I'm new to PHP and I'm having some trouble with a sort by with a dropdown.
I have a page of movies already sorted by genre and within that page I want to be able to sort by title, rating and year and I don't know how to do it.
In the index page I was able to sort the movies easily because they weren't already sorted by genre, so I just had to put ORDER BY something in the query and it returned what I wanted.
The problem now is that I have to check which genre is chosen at that moment and associate it with what I choose from the dropdown list and I dont know how to do it...
I don't know if this is explicit enough, but if you have any doubt please ask me...
I have the following code which I copied from an existing question here:
<form class="sortby_form" action="">
<div class="sortby" method="POST">
<select name="sort_by" class="drop-box">
<option selected hidden <?php if(isset($_POST['sort_by']) && $_POST['sort_by'] == 'option') echo 'selected="selected"'; ?> value="option">Sort by</option>
<option <?php if(isset($_POST['sort_by']) && $_POST['sort_by'] == 'title') echo 'selected="selected"'; ?> value="title">Title</option>
<option <?php if(isset($_POST['sort_by']) && $_POST['sort_by'] == 'year') echo 'selected="selected"'; ?> value="year">Year</option>
<option <?php if(isset($_POST['sort_by']) && $_POST['sort_by'] == 'rating') echo 'selected="selected"'; ?> value="rating">Rating</option>
</select>
</div>
<form>
This is the code that I have which returns the movies ordered by genre:
<?php
if (isset($_REQUEST["g"])) {
$g = $_REQUEST["g"];
} else {
$g=0;}
$q_sortg = "SELECT id_movie, title, image, plot, rating, id_genre, genre
FROM movie_genre AS mg
INNER JOIN movie AS m ON mg.movie_id_movie = m.id_movie
INNER JOIN genre AS g ON mg.genre_id_genre = g.id_genre
WHERE id_genre = '$g'";
$r_sortg = mysqli_query($dbc, $q_sortg);
$i=0;
echo '<div class="row row-eq-height">';
while ($row_sortg = mysqli_fetch_array($r_sortg)) {
if($row_sortg['id_genre'] == $g) {
echo '<div class="col-sm-3 col-lg-3 col-md-3 column">';
echo '<div class="thumbnail movie-box">';
echo '<img src="data:image/jpg;base64,'.base64_encode($row_sortg['image']).'" width="250px" height="300px" />';
echo '<div class="caption">';
echo "<h4 class=\"title-subs\"><a href='movies_info.php?m=".$row_sortg['id_movie']."'>".$row_sortg['title']."</a></h4>";
echo "<p class=\"title-subs\">".$row_sortg['plot']."</p>";
echo "</div>";
echo '<div class="ratings align-center">';
echo '<p>';
$ratings = $row_sortg['rating'];
$rates = array('$row_sortg' => $ratings);
foreach ($rates as $r => $value) {
if($value <= 1.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star-half-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 2.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 3.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-half-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 4.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 5.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-half-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 6.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 7.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-half-o" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 8.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-o" aria-hidden="true"></i>';
}
else if($value <= 9.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star-half-o" aria-hidden="true"></i>';
}
else if($value <= 10.0){
echo '<p>'.$value.'</p>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
echo '<i class="fa fa-star" aria-hidden="true"></i>';
}
}//fecha o foreach
echo '</p>';
echo '</div>';
echo "</div>";
echo "</div>";
$i++;
if ($i%4 == 0){
echo '</div><div class="row row-eq-height">';
} //fecha o if
} //fecha o While
}
?>
Here's the link to the current website:
http://www.zoomlab.pt/2016-web2/pub/grupo4/index.php
In the first page that appears its possible to sort by with no problem.
The problem is when you click in one of the genres in the left column. They appear ordered by genre and then I cant get the sort by to work...
I was initially trying to use bootstrap dropdown but it uses <li><a> instead of <select> and <option>, so I didn't know if it was possible.
Thanks in advance for any help possible.

Answer 1

It looks like you just need to resubmit the form once a user changes the sort option? If so, you'd need to use JavaScript to add an onchange event on your <select>, which will resubmit the form:
<script>
window.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('form.sortby_form'),
select = form.querySelector('select[name="sort_by"]');
select.addEventListener('change', function () {
form.submit();
});
});
</script>
Also, if this is for a production web site, you really should not use raw user input as part of a SQL query. See: http://php.net/manual/en/mysqli-stmt.bind-param.php