Vue.js CRUD: Membuat backend REST API laravel 8

wahyunanangwidodo

wahyunanangwidodo Kamis, 15 April 2021

Vue.js CRUD: Membuat backend REST API laravel 8

Tutorial ini teruntuk yang sedang mempelajari Vue - lanjutan dari Belajar Vue.js Pemula: Membuat Aplikasi CRUD.

Setelah mempelajari dan memahami beberapa metode, fungsi, fitur vue.js serta menyelesaikan pembuatan aplikasi CRUD pada postingan sebelumnya, kita akan melanjutkan aplikasi CRUD yang telah dibuat untuk dihubungkan ke backend API membuat permintaan, panggilan dengan penyimpanan basis data yang sebenarnya.

Yang akan dibuat:

  • Laravel API Resource -- Menjadikan laravel sebagi backend API
  • Membuat Permintaan / Panggilan API -- Menjadikan vue sebagi frontend
  • Menggunakan Axios untuk konsumsi API
  • Menggunakan MySQL sebagai database

Persyaratan

Membuat Backend: Instalasi Laravel

Mari kita mulai mengerjakan bagian backend membuat API laravel. Kita awali dengan melakukan instalasi laravel.

laravel new laravel-api

#atau

composer create-project laravel/laravel laravel-api

Database, Tabel, dan Kolom

Silahkan membuat database MySQL baru dan hubungkan dengan project.

//mysql command line
MariaDB [(none)]> create database laravel_api;
//.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_api
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya kita buat file migrasi baru untuk membuat tabel. Kita gunakan perintah untuk membuat model sekaligus membuat file migrasi.

php artisan make:model Customer --migration

Setelah file migrasi terbuat, kita buka file tersebut dan tambahkan kolom.

public function up()
{
  Schema::create('customers', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email');
    $table->string('address');
    $table->timestamps();
  });
}

Kemudian jalankan perintah migrasi.

php artisan migrate
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (626.81ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (431.88ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (555.49ms)
Migrating: 2021_04_11_203610_create_customers_table
Migrated:  2021_04_11_203610_create_customers_table (260.65ms)

Database, tabel, dan kolom selesai dibuat.

Model: Mass Assigment

Kita lanjutkan dengan membuka file model Customer.php dan tambahkan kolom di dalam properti $fillable.

//Models/Customer.php
class Customer extends Model
{
    use HasFactory;

    protected $fillable = [
        'name',
        'email',
        'address'
    ];
}

Membuat API Resources

Kita akan membuat respon model dalam bentuk JSON menggunakan fitur API resources. Jalankan perintah dibawah untuk membuat file resource.

php artisan make:resource CustomerResource

Setelah file resource dibuat silahkan buka file tersebut lalu pada method toArray buat seperti dibawah ini.

//Http/CustomerResource.php
public function toArray($request)
{
   return [
     'id' => $this->id,
     'name' => $this->name,
     'email' => $this->email,
     'address' => $this->address,
     'created_at' => $this->created_at,
     'updated_at' => $this->updated_at,
  ];
}

Membuat Controller dan Route

Kita lanjutkan dengan membuat sebuah controller. Kita buat controller dengan fitur resource untuk generate / membuat method otomatis.

php artisan make:controller CustomerController --resource

Kemudian kita tambahkan route di routes > api.php. Kita buat resource route.

use App\Http\Controllers\CustomerController;

Route::resource('customers', CustomerController::class);

Berikut route yang kita miliki.

@laravel-api ➜ php artisan route:list
+--------+-----------+-------------------------------+-------------------+-------------------------------------------------+------------+
| Domain | Method    | URI                           | Name              | Action                                          | Middleware |
+--------+-----------+-------------------------------+-------------------+-------------------------------------------------+------------+
|        | GET|HEAD  | /                             |                   | Closure                                         | web        |
|        | GET|HEAD  | api/customers                 | customers.index   | App\Http\Controllers\CustomerController@index   | api        |
|        | POST      | api/customers                 | customers.store   | App\Http\Controllers\CustomerController@store   | api        |
|        | GET|HEAD  | api/customers/create          | customers.create  | App\Http\Controllers\CustomerController@create  | api        |
|        | GET|HEAD  | api/customers/{customer}      | customers.show    | App\Http\Controllers\CustomerController@show    | api        |
|        | PUT|PATCH | api/customers/{customer}      | customers.update  | App\Http\Controllers\CustomerController@update  | api        |
|        | DELETE    | api/customers/{customer}      | customers.destroy | App\Http\Controllers\CustomerController@destroy | api        |
|        | GET|HEAD  | api/customers/{customer}/edit | customers.edit    | App\Http\Controllers\CustomerController@edit    | api        |
|        | GET|HEAD  | api/user                      |                   | Closure                                         | api        |
|        |           |                               |                   |                                                 | auth:api   |
+--------+-----------+-------------------------------+-------------------+-------------------------------------------------+------------+

Permintaan API Resource

Sekarang kita mengerjakan metode permintaan / panggilan resource model pada controller. Kita membuat permintaan Insert New Resource, Edit, Update, Delete dan mengambil daftar resource dengan Collection.

Silahkan buka CustomerController.php dan buat seperti dibawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Resources\CustomerResource;
use App\Models\Customer;

class CustomerController extends Controller
{
    public function index()
    {
      return CustomerResource::collection(Customer::all());
    }

    public function create()
    {
       //
    }

    public function store(Request $request)
    {
        $input = $request->all();

        $customer = Customer::create($input);

        return new CustomerResource($customer);
    }

    public function show($id)
    {
       //
    }

    public function edit($id)
    {
       //
    }

    public function update(Request $request, $id)
    {
        $customer = Customer::find($id);

        $customer->update($request->all());
 
        return new CustomerResource($customer);
    }

    public function destroy($id)
    {
        $customer = Customer::find($id);

        $customer->delete();
        
        return response()->json(null);
    }
}

Untuk method create(), show() dan edit() tidak kita buat karena kita tidak membutuhkan / menggunakannya.

Berikut contoh respon permintaan insert new resource membuat data baru menggunakan aplikasi postman.

  • Method: POST
  • Url: http://localhost:8000/api/customers
Vue.js CRUD: Membuat backend REST API laravel 8

Frontend: Install Axios

Kita beralih ke project satunya untuk mengerjakan bagian frontend. Kita akan install depedensi Axios ke project Vue.

Silahkan buka / masuk ke path folder vue pada terminal dan lakukan instalasi axios.

npm install axios --save

#atau

yarn add axios

Setelah instalasi selesai, kita buka file App.vue kemudian kita import axios.

...
<script>

import axios from 'axios';

import CustomerTable from '@/components/CustomerTable.vue'
import CustomerForm from '@/components/CustomerForm.vue'
...

Setelah melakukan import axios, selanjutnya kita hapus contoh data array customers pada properi data.

data() {
 return { 
   customers: []
       
   // customers: [
   //   {
   //     id: 1,
   //     name: 'Bambang',
   //     email: 'bambang@mail.com',
   //     address: 'Jl.Kenanga',
   //   },
   //   {
   //     id: 2,
   //     name: 'Dika',
   //     email: 'dika@mail.com',
   //     address: 'Jl.Mangga',
   //   },
   //   {
   //     id: 3,
   //     name: 'Agus',
   //     email: 'agus@mail.com',
   //     address: 'Jl.Mataram',
   //   },
   // ],
  }
},

Axios Http Request

Selanjutnya kita akan membuat permintaan http menggunkan axios ke backend API dengan menyesuaikan route dan request method yang digunakan.

Hal pertama yang akan kita lakukan adalah menjalankan server kedua project pada terminal terlebih dahulu.

//frontend
npm run serve

//backend
php artisan serve
Vue.js CRUD: Membuat backend REST API laravel 8

Axios POST Request: Membuat Data Baru

Kita kerjakan terlebih dahulu untuk membuat metode permintaan meyimpan data ke database. Pada method addCustomer() silahkan ubah menjadi seperti dibawah ini.

addCustomer(customer) {
  axios.post('http://localhost:8000/api/customers', customer)
    .then(response => {
      console.log(response);
      this.customers = [...this.customers, response.data.data]
    })
},

Kita gunakan Spread Operator untuk menambahkan respon data object ke daftar array yang ditampilkan pada DOM secara reactive.

Axios GET Request: Menampilkan Data

Selanjutnya kita buat permintaan menggunkan GET untuk mengambil data; dan kita gunakan created lifecycle hook.

...
data() {
    return {
      customers: []
    }
  },
  created() {
    axios.get(`http://localhost:8000/api/customers`)
      .then(response => {
        this.customers = response.data.data
      })
  },
...

Sampai disini kita bisa coba untuk membuat data baru dan melihat data yang di tampilkan.

Vue.js CRUD: Membuat backend REST API laravel 8
MariaDB [laravel_api]> select * from customers;
+----+---------+------------------+------------+---------------------+---------------------+
| id | name    | email            | address    | created_at          | updated_at          |
+----+---------+------------------+------------+---------------------+---------------------+
|  1 | Bambang | bambang@mail.com | Jl.Kenanga | 2021-04-13 20:21:58 | 2021-04-13 20:21:58 |
|  2 | Dika    | dika@mail.com    | Jl.Mangga  | 2021-04-13 20:22:18 | 2021-04-13 20:22:18 |
|  3 | Agus    | agus@mail.com    | Jl.Mataram | 2021-04-13 20:22:31 | 2021-04-13 20:22:31 |
+----+---------+------------------+------------+---------------------+---------------------+
3 rows in set (0.000 sec)

Axios PUT Request: Edit Data

Kita lanjutkan untuk mengerjakan bagian edit membuat permintaan untuk memperbaharui data, dengan method yang digunakan adalah PUT. Pada method editCustomer() silahkan buat seperti dibawah ini.

editCustomer(id, data) {
  axios.put(`http://localhost:8000/api/customers/${id}`, data)
    .then(response => {
      console.log(response.data.data);
      this.customers = this.customers.map(customer => (customer.id === id ? data : customer))
    })
},

Kemudian silahkan mencobanya.

Vue.js CRUD: Membuat backend REST API laravel 8

Axios DELETE Request: Hapus Data

Kita di bagian terakhir membuat permintaan penghapusan data. Pada method deleteCustomer silahkan buat seperti dibawah ini.

deleteCustomer(id) {
  axios.delete(`http://localhost:8000/api/customers/${id}`)
    .then(() => {
      const customerId = this.customers.indexOf(id)
      this.customers.splice(customerId, 1)
    });
}

Kita gunakan splice untuk menghapus satu element pada tabel sesuai index yang dipilih. Kita buat ini untuk memperbaharui daftar data yang ditampilkan tanpa melakukan refresh halaman.

Selesai

Kita telah menyelesaikan pembuatan backend API dan konsumsi API pada frontend. Sekarang aplikasi CRUD kita memiliki database untuk manajeman data yang nyata.

Silahkan dibuat dan dikembangkan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.