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
- Menyelesaikan pembuatan aplikasi CRUD vue.js atau Download Source Code
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
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
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.
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.
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.