Adding Sort by Price and Sort by Name - php

Question

I created a website selling components. Each component has 9 products. How can I add a dropdown button which can arrange the product showing by its Price or Name?
<?php
$query = "SELECT * FROM products ORDER BY id ASC";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
?>
<div class="col-md-4">
<form method="post" action="shop.php?action=add&id=<?php echo $row["id"]; ?>">
<div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
<h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
<img src="<?php echo $row["image"]; ?>" class="img-responsive">
<h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
<div class="col-xs-8">
<input type="text" name="quantity" class="form-control" value="1">
</div>
<input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
<input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
<input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
</div>
</form>
</div>
<?php
}
}
?>
<?php
}
?>
</div>
</div>

Answer 1

Perhaps you could use Javascript as well and add a few select boxes to give Users the chance to choose the Attribute they want to sort by and also the Direction of the Sorting as in ASC or DESC. The Code Snippet below might shed some light:
<?php
$query = "SELECT * FROM products ORDER BY id ASC";
$result = mysqli_query($connect, $query);
// CREATE VARIABLES TO HOLD THE SELECT OPTIONS VALUES FOR THE SORTING...
$sortParam1 = 'price';
$sortParam2 = 'name';
$sortDir1 = 'ASC';
$sortDir2 = 'DESC';
// START BUILDING THE OUTPUT...
$output = "<div class='col-md-12'>"; //<== WRAPPER FOR SORING & DIRECTION BOXES
$output .= "<form method='post' action='' id='sorting_form'>"; //<== FORM FOR THE SORTING: SUBMITS TO SAME SCRIPT
// SORTING
$output .= "<div class='col-md-6'>";
$output .= "<select name='sorting' id='sorting'class='form-control'>";
$output .= "<option value='id'>Sorting</option>";
$output .= "<option value='{$sortParam1}'>{$sortParam1}</option>";
$output .= "<option value='{$sortParam2}'>{$sortParam2}</option>";
$output .= "</select>";
$output .= "</div>";
// DIRECTION
$output .= "<div class='col-md-6'>";
$output .= "<select name='direction' id='direction'class='form-control'>";
$output .= "<option value='ASC'>Sort Direction</option>";
$output .= "<option value='{$sortDir1}'>{$sortDir1}</option>";
$output .= "<option value='{$sortDir2}'>{$sortDir2}</option>";
$output .= "</select>";
$output .= "</div>";
$output .= "</form>"; //<== CLOSE SORTING FORM...
$output .= "</div>"; //<== CLOSE WRAPPER...
$rowData = "";
// WE USE JQUERY BELOW TO SUBMIT THE SORTING FORM ONCE USER
// SELECTS ANY OPTION FROM.... SO WE NOW HANDLE THAT SCENARIO HERE USING PHP
if(isset($_POST['sorting']) || isset($_POST['direction']) ){
$sortDirection = isset($_POST['direction']) ? $_POST['direction'] : $sortDir1; // DEFAULTS TO ASC
$sortField = isset($_POST['sorting']) ? $_POST['sorting'] : 'id'; // DEFAULTS TO id
$query = "SELECT * FROM products ORDER BY {$sortField} {$sortDirection}";
$result = mysqli_query($connect, $query);
}
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)) {
// USE HEREDOC TO CAPTURE THE DATA WITHIN THE LOOP...
$rowData .=<<<R_DATA
<div class="col-md-4">
<form method="post" action="shop.php?action=add&id={$row["id"]}">
<div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
<h5 class="text-info">{$row["p_name"]}</h5>
<img src="{$row["image"]}" class="img-responsive">
<h5 class="text-danger">\$ {$row["price"]}</h5>
<div class="col-xs-8">
<input type="text" name="quantity" class="form-control" value="1">
</div>
<input type="hidden" name="hidden_name" value="{$row["p_name"]}">
<input type="hidden" name="hidden_price" value={$row["price"]}">
<input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
</div>
</form>
</div>
R_DATA;
} // CLOSE WHILE LOOP
} // CLOSE IF CONDITIONAL LOGIC
// ADD THE DATA GATHERED FROM WHILE LOOP ($rowData) TO THE OUTPUT: $output
$output .= $rowData;
$output .= "</div>\n</div>"; // THESE APPEAR IN YOUR CODE BUT SEEM IRRELEVANT HERE...
// DISPLAY THE OUTPUT
echo $output;
?>
<!-- ENTER JAVASCRIPT: JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(e){
var sortForm = $("#sorting_form");
var sortBox = $("#sorting");
var directionBox = $("#direction");
var bothBoxes = sortBox.add(directionBox);
// IF EITHER OF THE SORTING OR DIRECTION IS CHANGED
// JUST SUBMIT THE FORM
bothBoxes.on("change", function(evt){
sortForm.submit();
});
});
})(jQuery);
</script>