title: Filter results using php or javascript
body: <p>I'm new to developing in PHP, Smarty using MySQL. I would like an expert opinion on the following, or any good advise will do.</p>
  
  <p>So I made an <em>index.php</em> which connects to database(MySQL) also Smarty, reads my data through query and displays them from my <em>index.tpl</em> file. Same for my products, <em>product.php</em> connects to database, does a query, and displays my products on the <em>product.tpl</em> page.</p>
  
  <p>For my <em>index.php</em> I would like to add a filter displaying product by price from high-to-low or from low-to-high. </p>
  
  <p><strong>What do you suggest:</strong></p>
  
  <p>Do you suggest I use Javascript for the filter or just query it from database for when ever that select value is selected?</p>
  
  <p>Or how would be the best valid way of doing this? Any tips on this will do thanks in advance.</p>
  
  <p>My database for now have only like 3 products, I'm just testing.</p>
  
  <p><strong>.php</strong></p>
  
  <pre><code>&lt;?php
  
  $new = ['product_id','product_category','product_price','product_quantity','product_about','product_color'];
  
  //Database connection
  $db = mysqli_connect('xxx','xxx','xxx','xxx') or die('Error connecting to MySQL server.');
  
  //access Smarty template engine
  require_once('Smarty-3.1.30/libs/Smarty.class.php');
  
  $smarty = new Smarty();
  $smarty-&gt;template_dir = 'views';
  $smarty-&gt;compile_dir = 'tmp';
  
  
  //query product page
  $query = "SELECT * FROM cs_shop";
  
  if ($productPrice &gt; 0) {
      $query .= " WHERE `product_price` = ".$productPrice;
  }
  
  
  mysqli_query($db, $query) or die('Error querying database.');
  
  $result = mysqli_query($db, $query);
  
  if ( !empty($_GET['sort']) &amp;&amp; $_GET['sort'] == 'PriceAsc' ) {
      $result =" ORDER BY `product_price` ASC";
  } 
  if ( !empty($_GET['sort']) &amp;&amp; $_GET['sort'] == 'PriceDesc' ) {
      $result =" ORDER BY `product_price` DESC";
  }
  
  
  
  
  //query an array of products
  $rows = array();
  
   //loop start
   while ($row = mysqli_fetch_array($result)) {
      $rows[] = array(
          'product_id' =&gt; $row['product_id'],
          'product_category' =&gt; $row['product_category'],
          'product_price' =&gt; $row['product_price'],
          'product_quantity' =&gt; $row['product_quantity'],
          'product_about' =&gt; $row['product_about'],
          'product_color' =&gt; $row['product_color']
      );
  }
  
  //db collect data
  $smarty-&gt;assign('row', $rows); 
  //template
  $smarty-&gt;display('index.tpl');
  
  mysqli_close($db);
  
  ?&gt;
  </code></pre>
  
  <p><strong>.tpl</strong> (this is loop for displaying product-listing)</p>
  
  <pre><code>    &lt;form method="get" name="sort"&gt;
      &lt;select name="sort" id="sort"&gt;
                  &lt;option value=''&gt;--Select--&lt;/option&gt;
                  &lt;option value='PriceAsc'&gt;high to low&lt;/option&gt;
                  &lt;option value='PriceDesc'&gt;low to high&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="submit" value="Sort"/&gt;
      &lt;/form&gt;
  
  
  
  &lt;div class="test divider"&gt;
              {section name=prod loop=$row}
                  &lt;div class="colm3"&gt;
                      &lt;div class="col3 r1"&gt;
                          &lt;div class="products-container"&gt;
                              &lt;h5&gt;{$row[prod].product_name}&lt;/h5&gt;
                              &lt;a class="producy_img_link" href="#" &gt;
                                  &lt;img src="{$row[prod].prod_img}" style="width:auto; height:255px;"&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;a href="#"&gt;
                          &lt;div class="block-right"&gt;
                              &lt;h6&gt;{$row[prod].product_vintage}&lt;/h6&gt;
                              &lt;h5&gt;{$row[prod].product_veriatel}&lt;/h5&gt;
                              &lt;div&gt;
                                  &lt;span class="price"&gt;R {$row[prod].product_price}&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  {/section}
  &lt;/div&gt;
  </code></pre>
  
  <p>Now whenever I click on high to low I want the products to filter by price from high to low, I think there would be an easy way using a query but I'm stuck with this.</p>