Create a sort by function in HTML that allows you to choose Popular, A to Z, Z to A, Low Price to High or High Price to Low, mostly done

Question

I am trying to create a sort by function on my webpage that can allow a set of products stored in an SQL Database, to be sorted by some different options as shown in the title. I have created the dropdown list and part of an if else list but I can't get the two to work together. Ideally, when you click a different option, I want the order of the list to change to the selected choice (on click, so no submit button). I have a submit button there and would also like help making the selections happen on click. Any help would be greatly appreciated.

Here is the code I am working with

<?php // <--- do NOT put anything before this PHP tag
    include('functions.php');
    $cookieMessage = getCookieMessage();
?>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8" /> 
    <title>Product List</title>
    <link rel="stylesheet" type="text/css" href="shopstyle.css" />
</head>
<body>
<div id = "container">
    <div id="header">
        <h1>Product List</h1>
    </div>
    <div id = "navbar">
        <ul>
            <li><a href="Homepage.php">Home</a></li>
            <li><a href="ProductList.php">Product List</a></li>
            <li><a href="ViewCart.php">View Cart</a></li>
            <li><a href="CustomerList.php">Customer List</a></li>
            <li><a href="OrderList.php">Order List</a></li>
            <li><a href="SignUp.php">Sign Up</a></li>
        </ul>
    </div>

    <?php 
        
        // if the user provided a search string.
        
        if(isset($_GET['search']))
        {
            $searchString = $_GET['search'];
        }
        
        // if the user did not provide a search string, assume an empty string
        
        else
        {
            $searchString = "";
        }
        
        
        $safeSearchString = htmlspecialchars($searchString, ENT_QUOTES,"UTF-8");
        
        echo "<div class='SearchButton'>";
        echo "<form>";
        echo "<input name = 'search' type = 'text' value = '$safeSearchString' placeholder = 'Search for Products'/>  ";
        echo "<input type = 'submit'/>";
        echo "</form>";
        echo "</div>";
        
        echo "<form id = 'mainForm' method = 'GET'>";
        echo "<div class = 'SortBy'>";
        echo "<label for = 'Sorting'>Sort By: </label>";
        echo "<select name = 'Sort'>"; 
        echo "<option value='Popularity'>Popularity</option>";
        echo "<option value='AToZ'>A to Z</option>";
        echo "<option value='ZToA'>Z to A</option>";
        echo "<option value='LowToHigh'>Low Price to High Price</option>";
        echo "<option value='HighToLow'>High Price to Low Price</option>";
        echo "</select>";
        echo "</div>";
        echo "<div class = 'submit'>";
        echo "<button type = 'submit' value = 'submit'>Submit</button>";
        echo "</div>";
        echo "</form>";
        
        if(isset($_GET['page']))
        {
            $currentPage = intval($_GET['page']);
        }
        
        else
        {
            $currentPage = 0;
        }
        
        $nextPage = $currentPage + 1;
        $previousPage = $currentPage - 1;
        
        // connect to the database using our function (and enable errors, etc)
        $dbh = connectToDatabase();
        
        
        //FIGURE OUT IF STATEMENTS FOR THIS TO WORK
    if(isset($_GET['Sort']))
    {       
        if $_GET['Sort'] = 'Popularity'
        {
        $sql1 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                GROUP BY Products.ProductID 
                ORDER BY count(OrderProducts.OrderID) DESC 
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql1);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
        elseif $_GET['Sort'] = 'AToZ'
        {
            $sql2 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                ORDER BY Products.Description ASC 
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql2);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
        elseif $_GET['Sort'] = 'ZToA'
        {
            $sql3 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                ORDER BY Products.Description DESC
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql3);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
        elseif $_GET['Sort'] = 'LowToHigh'
        {
            $sql4 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                ORDER BY Products.Price ASC 
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql4);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
        elseif $_GET['Sort'] = 'HighToLow'
        {
            $sql5 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                ORDER BY Products.Price DESC 
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql5);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
        else
        {
            $sql1 = ("SELECT * 
                FROM Products 
                LEFT JOIN OrderProducts 
                ON Products.ProductID = OrderProducts.ProductID 
                WHERE Description 
                LIKE ? 
                GROUP BY Products.ProductID 
                ORDER BY count(OrderProducts.OrderID) DESC 
                LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql1);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
        }
    else
    {
        $sql1 = ("SELECT * 
            FROM Products 
            LEFT JOIN OrderProducts 
            ON Products.ProductID = OrderProducts.ProductID 
            WHERE Description 
            LIKE ? 
            GROUP BY Products.ProductID 
            ORDER BY count(OrderProducts.OrderID) DESC 
            LIMIT 10 OFFSET $currentPage*10");
        
        // select all the products.
        $statement = $dbh->prepare($sql1);
        $statement ->bindValue(1,"%".$safeSearchString."%",PDO::PARAM_STR);
        
        //execute the SQL.
        $statement->execute();
    }

        // get the results
        while($row = $statement->fetch(PDO::FETCH_ASSOC))
        {
            // Remember that the data in the database could be untrusted data. 
            // so we need to escape the data to make sure its free of evil XSS code.
            $ProductID = htmlspecialchars($row['ProductID'], ENT_QUOTES, 'UTF-8'); 
            $Price = htmlspecialchars($row['Price'], ENT_QUOTES, 'UTF-8'); 
            $Description = htmlspecialchars($row['Description'], ENT_QUOTES, 'UTF-8'); 
            
            // output the data in a div with a class of 'productBox' we can apply css to this class.
            echo "<div class = 'productBox'>";
            echo "<a href='ViewProduct.php?ProductID=$ProductID'><img src = 'IFU_Assets/ProductPictures/$ProductID.jpg' /></a>";
            echo "$Description <br/><br/>";
            echo "$$Price <br/>";
            echo "</div> \n";           
        }
    
        echo "<div class = 'PreviousButton'><a href = '?page=$previousPage&search=$safeSearchString'>Previous Page</a></div>";
        echo "<div class = 'NextButton'><a href = '?page=$nextPage&search=$safeSearchString'>Next Page</a></div><br>";
    ?>
    <div id="footer">
        &copy; Nicholas Toumbas - 2023
    </div>
</div>
</body>
</html>

This is the part I am trying to connect to the sort by list. //FIGURE OUT IF STATEMENTS FOR THIS TO WORK

And just above that, in the echo statements is where I have created a sort by list. I hope that answers all your questions.

Currently if I run the code, I get an error saying Parse error: syntax error, unexpected '$_GET' (T_VARIABLE), expecting '(' on line 90

score 0 · Answer 1 · answered Mar 19 '23 at 23:34

if $_GET['Sort'] = 'Popularity'

it should be:

if ($_GET['Sort'] == 'Popularity')

The same goes for all other if statements in the code. Use parentheses in conditional statements

Regarding the sorting functionality, you can use JavaScript to achieve the sorting without requiring a submit button:

Remove the submit button from your form
Add an id attribute to the select element (example: echo "<select name = 'Sort' id='sort-by'>";)
Add the following JavaScript code to the bottom of your page, after the </div> tag for the container div

<script>
    const sortSelect = document.getElementById('sort-by');
    sortSelect.addEventListener('change', function() {
        const sortValue = sortSelect.value;
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        urlParams.set('Sort', sortValue);
        window.location.search = urlParams.toString();
    });
</script>

This code listens for changes to the value of the select element with the id sort-by. When the value changes, it constructs a new query string with the new sort value, and sets the current page's URL to the new URL with the updated query string. This will cause the page to reload with the new sort order applied

Create a sort by function in HTML that allows you to choose Popular, A to Z, Z to A, Low Price to High or High Price to Low, mostly done

1 Answers1