Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Yes some frameworks would have helped to create this kind of functionality but since your are not necessarily familiar with those framework it is simpler/faster for you to code it yourself.</p> <p>Here some advice of how you could implement it:</p> <h1>Backend</h1> <p>In <em>Laravel</em> create your API routes in <code>app/routes.php</code>:</p> <pre><code>Route::get('api/hotels/{ordering}/page/{page}', 'ApiController@order'); //todo Validate data with regular expression </code></pre> <p>Create your controller <code>app/controllers/ApiController.php</code>:</p> <pre><code>class ApiController extends BaseController { public function getOrder($ordering, $page){ $query = Hotel::select('*'); switch($ordering){ case "price": $query-&gt;orderBy('price', 'ASC'); break; case "review": //... break; default: //... break; } $query-&gt;take(10); //...paging $hotels = $query-&gt;get(); return Response::json($hotels); } } </code></pre> <h1>Frontend</h1> <p>In your HTML create your buttons with different ordering actions:</p> <pre><code>Filter by: &lt;div class="btn" data-action="price"&gt;Price&lt;/button&gt; &lt;div class="btn" data-action="review"&gt;Reviews&lt;/button&gt; Hotels: &lt;ul id="hotels"&gt;&lt;/ul&gt; </code></pre> <p>In Javascript when a button is clicked you fetch the data calling the Laravel API:</p> <pre><code>$('.btn').click(function() { var ordering = $(this).data('action'); $.ajax({ type: "get", url: "api/hotels/"+ordering+"/page/"+currentPage, dataType: "json", success: function(result){ var $list = $('#hotels'); $.each(result.hotels, function(idx, hotel) { $list.append('Hotel: '+hotel.name); //... }); }, error: function(xhr, desc, exceptionobj) { alert(xhr.responseText); } }); }); </code></pre> <p>I hope it will help you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload