Laravel: How To Create A Favourite or Short List Feature

So we’re going to assume you have a web app, something like RightMove. You can browse properties and if you like them, you can click a little heart icon which will add a particular property to your favourites list. But we’re not going to refresh the search page every time the user clicks the heart.

As per my usual stack, I’ll be using Laravel and vanilla JavaScript.

So here’s what’s going to happen. We’re going to have a clickable element on the webpage. When this element is clicked, it’s going to call a JavaScript function that’s going to asynchronously call an API endpoint that we’ll create in Laravel. When this endpoint is triggered, it’s going to run some PHP code that makes a change to our database, adding the item to our user’s favourites list.

We’re then going to use some more JavaScript to detect the database change and reflect it in the DOM.

onClick=”addToFavourites()”

So first we stick this in the a tag in order to fire the JavaScript function called addtoFavourites() whenever the element is clicked.

We’d better continue by writing the function.

function addToFavourites() {
// use axios to call the endpoint
// use fetch to call the endpoint
}

Now we need to create the endpoint in laravel.

This is just a route that points to a controller method.

So routes folder >> api

Route::get('/favourite/{property_id}', 'App\Http\Controllers\Controller@add_to_favourites');

What we’ve done here is created a route that involves a variable.

So for example, if we point our browser at domain.com/favourite/1, 1 will be used as the property_id. as you’ll see in the following code in the controller, the function requires a property_id value in order to work.

So now, go to Controller.php and add the method:

public function add_to_favourites($property_id){
DB::table('favourites')->insert([
'user_id' => Auth::id(),
'property_id' => $property_id,
]);
}

So this code will run any time we call the route in the previous code.

The final step, then, is to call that api endpoint WITHOUT using a hyperlink, because a hyperlink will result in a page refresh and, since we haven’t told the add_to_favourites function to return anything, we’ll also get a blank screen.

So how do we call a route without a hyperlink? There are several ways. But in this case, we’re going to use an XMLHttpRequest object in Javascript.

var request = new XMLHttpRequest();
request.open 

So what this code does is calls our route in the background. There will be no indication in the browser or to our user that this route has been called.

Now we can package this Javascript code inside javascript function and call it when the user clicks the clickable element that we started with.

So we’re going to assume you have a web app, something like RightMove. You can browse properties and if you like them, you can click a little heart icon which will add a particular property to your favourites list. But we’re not going to refresh the search page every time the user clicks the heart.…