Part 1: How to build a Job board with Vue js and the Laravel 5.5 API ?

Part 1: How to build a Job board with Vue js and the Laravel 5.5 API ?

Commissioning the back end series

Created on: December 20, 2017

Updated on: December 20, 2017

Introduction

Api based applications are used in a plethora of web development services applications and use case scenarios. As users we have become used to using API's in a wide variety of contexts. We use them within forms on bidding sites, they are used to feed vital information from the servers as a means to reduce the amount of data pollution that can occur if the users of your applications have open ended fields.

This effectively means that you have a certain amount of control of the web development services application user interface. In its simplest form an API is a set of requirements that govern how one application can talk to another.

We are going to create our own API in the following tutorial and we will do this in 3 parts. Part 1 is where we will concentrate on the back end, we will create an API using Laravel 5.5, we will create a series of routes that will be consumed by our views. Part 2 will be concerned with setting up our template and the jobs listing. And part 3 will be concerned with wiring up our applications so that the backend and front end talk to each other.

Please note that this 2 part tutorial on setting up an API and front end replaces the Laravel 5.2 API back end / front end tutorial that is currently on medium.com

As with all tutorials we are going to make an assumption here and it is that you already have Laravel Valet installed.

However if you don't, please check out the following link to install it:

https://laravel.com/docs/5.5/valet

To start with go to your command prompt and type the following:

laravel new jobboard

Now that we have created the jobboard directory we need to assign the correct permissions to this directory to ensure we can write to it.

At the command prompt type the following:

cd jobboard
sudo chmod -R 777 vendor storage

Please ensure that you create your database for your application and create a .env file. Within your, .env file make sure that the correct database name and password are added to the environmental variables.

Setting up your model

Create your Job class

At the command prompt type the following:

php artisan make:model Job -m

The job model is used to store all of the attributes that are associated with a job, such as title, type, description etc. We need to specify the fields we declared earlier within the database fields in order to prevent a mass exception violation from occurring.

The Controllers

We need to create a controller for our application and we will be using a RESTFUL controller as best practice.

At the command prompt type the following:

php artisan make:controller Api/JobsController

This will create the JobsController underneath the app\Http\Controllers\Api directory.

Go to the routes directory and edit the web.php file and add the following:

Web.php

Route::group(['prefix' => 'api'], function () {
Route::get('jobs', 'Api\[email protected]');
Route::get('jobs/{job}', 'Api\[email protected]');
Route::post('jobs','Api\[email protected]');
Route::patch('jobs/{jobs}','Api\[email protected]');
Route::delete('jobs/{job}', 'Api\[email protected]');
});
Route model binding on routes file
Notice that we have used implicit model binding to add the model (in this case Job) in to our routes file using the RESTFUL Api.
We now need to create a series of methods on the JobsController to ensure that the respective views will receive the correct data.
Firstly we are going to add the index method to the JobsController this will return a listing of all jobs and these will be returned to the view.
Http\Controllers\ApiJobsController.php

class JobsController extends Controller
{
/**

Display a listing of the resource.

@return \Illuminate\Http\Response
*/

public function index()
{
return Job::all();
}
}

Next we will add a show method this will search for a job using its ID and return it to the view. And we will add a store method this will create a new job using the Request and the view will be returned.
Http\Controllers\ApiJobsController.php