SPA Tutorial Update 4

So we are ready for another update! Lots of new features have been added and we are moving forward towards a much more powerful system and some more awesome tutorials! In these updates I include smaller features that I added to make the application more functional and user friendly, but not large enough to require a specific tutorial.

Here’s a few updates:

Added Editing Cafes

This was probably the biggest feature that was added, however there aren’t many differences between the functionality to add a cafe and to edit a cafe.

The big thing to note is that we use the PUT HTTP verb to edit a cafe. This is RESTFul for a proper update of a resource. When we submit this request, we should expect a 200 response or a 204 response code. We are using 200 since we return the edited cafe and any new locations back after the response is submitted.

The main changes included, adding a route to submit an edit to and a route to load a cafe with respect for the user’s data (individual tags added by the user) so they can edit the cafe and only the tags they added to the cafe.

The other unique situation is when editing a cafe and adding a location, we want to grab the right parent ID for the cafe. The new location will either have the parent of the cafe we edited or the cafe we edited will be the parent.

We also added a link to the Cafe.vue page to edit the cafe.

All code can be viewed here: GitHub – serversideup/roastandbrew: Helping the coffee enthusiast find their next cup of coffee. Also, helping aspiring web and mobile app developers build a single page app and converting it to a mobile hybrid. All tutorials can be found at https://serversideup.net

Fixed Error on Adding Cafe

When we add a cafe, we either get a successful notification or an un-successful notification. Before we had a successful notification appear when we had an unsuccessful response. This has been fixed in the NewCafe.vue page:

if( this.addCafeStatus == 3 ){
  $("#cafe-added-unsuccessfully").show().delay(5000).fadeOut();
}

Updated For Namespaced User Class

There were a few places where we need to update for the User class for it’s namespace in the /app/Models/ directory. First was in the /app/config/auth.php file:

'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,
        ],

Next we had to actually add the namespace on top of the User.php file:

<?php

namespace App\Models;

Then we had to add the use statement in the app/Http/Controllers/Web/AuthenticationController.php file:

use App\Models\User;

Fixed Delete Tag

In the /api/v1/cafes/{id}/tags/{tagID} route, I was using dashes instead of quotes causing MySQL to error out. I had to update to quotes and it worked seamlessly:

DB::statement('DELETE FROM cafes_users_tags WHERE cafe_id = "'.$cafeID.'" AND tag_id = "'.$tagID.'" AND user_id = "'.Auth::user()->id.'"');

Where We Are Going

The next tutorial is going to be huge. We will be opening up the cafe data to be public. This way users can find cafes without having an account, but make an account to add cafes and add edits. There will be a few things we will re-structure for this to happen. From there, we can make all sorts of cool updates and people can use the app more than before!

Of course, all code updates will be pushed here: https://github.com/serversideup/roastandbrew.

If you are interested in learning more about API driven development, we are writing a book! It will contain a more in-depth approach with more description and theory on how to develop an API driven application. Sign up here for more information and be the first to know when it’s released: Server Side Up General List