Tutorial CRUD Laravel 7 & Vue JS #1 : Membuat Restful API Dengan Laravel 7 - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan membahas bagaimana cara memebuat CRUD dengan Laravel 7 dan Vue JS dan kita akan menerapkan konsep SPA atau Single Page Application.
Pada artikel kali ini kita semua akan belajar membuat Restful API dengan Laravel 7 terlebih dahulu, karena nanti kita akan full membuat proses CRUD dengan API di Vue JS.
Langkah 1 - Install Laravel
Silahkan teman-teman jalankan perintah dibawah ini untuk menginstall Framework Laravel.
composer create-project --prefer-dist laravel/laravel:^7.0 lara-vue-spa
Dari perintah di atas, kita akan membuat sebuah project Laravel baru dengan nama lara-vue-spa.
Silahkan tunggu proses installasi sampai selesai, setelah proses installasi selesai kita lanjutkan untuk mengatur konfigurasi database.
SIlahkan buka file .env dan silahkan cari kode berikut ini :
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
SIlahkan teman-teman ubah menjadi seperti berikut ini :
DB_DATABASE=db_lara_vue_spa
DB_USERNAME=root
DB_PASSWORD=
Jadi kita akan menggunakan nama database “db_lara_vue_spa". Dan untuk password silahkan teman-teman sesuaikan dengan konfigurasi MySQL di komputernya.
Langkah 2 - Membuat Database & Migration
Siekarang kita akan membuat database terlebih dahulu sebelum membuat file migration kita, silahkan teman-teman buka http://localhost/phpmyadmin dan silahkan buat database baru dengan nama “db_lara_vue_spa”.
Setelah proses membuat database selesai, kita akan lanjutkan membuat model sekaligus migration untuk tabel kita nanti.
php artisan make:model Post -m
Perintah di atas akan membuat sebuah model baru dengan nama Post.php di dalam folder App dan file migration baru dengan nama 2020_03_04_002819_create_posts_table.php di dalam folder database/migrations.
SIlahkan teman-teman buka file model Post.php dan ubahlah kodenya menjadi seperti berikut ini :
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'title', 'content'
];
}
Sekarang, silahkan teman-teman buka file migration 2020_03_04_002819_create_posts_table.php dan pada function up silahkan ganti menjadi seperti berikut ini :
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
Di atas kita sudah menambahkan 2 kolom baru yaitu title dan content. Oke setelah itu kita bisa menjalankan migration kita dengan cara :
php artisan migrate
Jika berhasil, kurang lebih hasilnya seperti berikut ini :
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (0.04 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated: 2019_08_19_000000_create_failed_jobs_table (0.02 seconds)
Migrating: 2020_03_04_002819_create_posts_table
Migrated: 2020_03_04_002819_create_posts_table (0.03 seconds)
Langkah 3 - Membuat Controller
Sekarang kita akan membuat sebuah controller baru untuk operation CRUD nanti, silahkan teman-teman jalankan perintah dibawah ini :
php artisan make:controller PostsController
Dari perintah di atas, kita akan mendapatkan sebuah file controller baru dengan nama PostsController.php di dalam folder App/Http/Controllers.
Silahkan buka file PostsController.php kemudian masukkan dan ubah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class PostsController extends Controller
{
public function index()
{
$posts = Post::latest()->get();
return response([
'success' => true,
'message' => 'List Semua Posts',
'data' => $posts
], 200);
}
public function store(Request $request)
{
//validate data
$validator = Validator::make($request->all(), [
'title' => 'required',
'content' => 'required',
],
[
'title.required' => 'Masukkan Title Post !',
'content.required' => 'Masukkan Content Post !',
]
);
if($validator->fails()) {
return response()->json([
'success' => false,
'message' => 'Silahkan Isi Bidang Yang Kosong',
'data' => $validator->errors()
],400);
} else {
$post = Post::create([
'title' => $request->input('title'),
'content' => $request->input('content')
]);
if ($post) {
return response()->json([
'success' => true,
'message' => 'Post Berhasil Disimpan!',
], 200);
} else {
return response()->json([
'success' => false,
'message' => 'Post Gagal Disimpan!',
], 400);
}
}
}
public function show($id)
{
$post = Post::whereId($id)->first();
if ($post) {
return response()->json([
'success' => true,
'message' => 'Detail Post!',
'data' => $post
], 200);
} else {
return response()->json([
'success' => false,
'message' => 'Post Tidak Ditemukan!',
'data' => ''
], 404);
}
}
public function update(Request $request)
{
//validate data
$validator = Validator::make($request->all(), [
'title' => 'required',
'content' => 'required',
],
[
'title.required' => 'Masukkan Title Post !',
'content.required' => 'Masukkan Content Post !',
]
);
if($validator->fails()) {
return response()->json([
'success' => false,
'message' => 'Silahkan Isi Bidang Yang Kosong',
'data' => $validator->errors()
],400);
} else {
$post = Post::whereId($request->input('id'))->update([
'title' => $request->input('title'),
'content' => $request->input('content'),
]);
if ($post) {
return response()->json([
'success' => true,
'message' => 'Post Berhasil Diupdate!',
], 200);
} else {
return response()->json([
'success' => false,
'message' => 'Post Gagal Diupdate!',
], 500);
}
}
}
public function destroy($id)
{
$post = Post::findOrFail($id);
$post->delete();
if ($post) {
return response()->json([
'success' => true,
'message' => 'Post Berhasil Dihapus!',
], 200);
} else {
return response()->json([
'success' => false,
'message' => 'Post Gagal Dihapus!',
], 500);
}
}
}
Dari kode di atas kita sudah menambahkan beberapa function diantaranya
-
index - fungsi ini kita akan gunakan untuk menampilkan data dari database dengan format JSON.
-
store -fungsi ini akan kita gunakan untuk menyimpan data, dan di fungsi ini kita juga menggunakan validasi untuk setiap inputan yang dimasukkan.
-
show - fungsi ini nanti akan kita gunakan sebagai edit data di Vue JS berdasarkan ID.
-
update - fungsi ini akan kita gunakan untuk mengupdate data ke dalam database, disini kita juga menambahkan validasi untuk setiap inputannya.
-
destroy - fungsi ini akan kita gunakan untuk menghapus data dari database.
Langkah 4 - Menambahkan Route
Terakhir, sekarang kita akan menambahkan route untuk setiap function yang ada di dalam controller yang sebelumnya sudah kita buat.
Silahkan teman-teman buka file api.php di dalam folder routes dan tambahkan kode berikut ini :
Route::get('/posts', 'PostsController@index');
Route::post('/posts/store', 'PostsController@store');
Route::get('/posts/{id?}', 'PostsController@show');
Route::post('/posts/update/{id?}', 'PostsController@update');
Route::delete('/posts/{id?}', 'PostsController@destroy');
Langkah 5 - Uji Coba Restful API
Oke setelah teman-teman sudah mengikuti step by step langkah di atas, dan dia atas kita sudah berhasil membuat Model, Migration, Controller dan juga Route. Maka sekarang kita akan mencoba menguji Restful API kita apakah sudah berjalan dengan baik atau belum.
Untuk pengujian API kali ini kita akan menggunakan Tools yang bernama Postman, untuk teman-teman yang belum mempunyai, silahkan bisa mengunduhnya disini : https://www.postman.com/
Uji Coba Memasukkan Data ke Database
Silahkan teman-teman jalankan aplikasinya dengan cara :
php artisan serve
Sekarang kita akan menguji untuk memasukkan data ke dalam database menggunakan Postman, silahkan buka Postman dan masukkan http://localhost:8000/api/posts/store pada bagian URL dan jangan lupa menggunakan method POST.
Silahkan klik Send, maka teman-teman akan menemukan sebuah pesan validasi error berupa format JSON seperti berikut ini:
{
"success": false,
"message": "Silahkan Isi Bidang Yang Kosong",
"data": {
"title": [
"Masukkan Title Post !"
],
"content": [
"Masukkan Content Post !"
]
}
}
Pesan itu muncul karena kita belum menambahkan form-data dengan kolom title dan content, silahkan klik tab body pada Postman dan pilih form-data, dan tambahkankey dengan nama title dan content beserta valunya.
Jika sudah kita bisa klik Send, jika berhasil teman-teman akan mendapatkan format JSON sepertiti berikut ini :
{
"success": true,
"message": "Post Berhasil Disimpan!"
}
Atau seperti gambar berikut ini :
Uji Coba Menampilkan Data Dari Database
Sekarang teman-teman bisa mencobanya langsung dengan Postman, silahkan masukkan http://localhost:8000/api/posts/ pada bagian URL dan jangan lupa menggunakan method GET.
Jika berhasil, teman-teman akan melihat response dengan format JSON kurang lebih seperti berikut ini :
{
"success": true,
"message": "List Semua Posts",
"data": [
{
"id": 4,
"title": "Test Post 2",
"content": "Test Content Post 2",
"created_at": "2020-03-05T00:41:14.000000Z",
"updated_at": "2020-03-05T00:41:14.000000Z"
},
{
"id": 3,
"title": "Test Post 1",
"content": "Test Content Post 1",
"created_at": "2020-03-05T00:38:40.000000Z",
"updated_at": "2020-03-05T00:38:40.000000Z"
}
]
}
Uji Coba Update Data ke Database
Sekarang teman-teman bisa mencobanya langsung dengan Postman, silahkan masukkan http://localhost:8000/posts/update/ pada bagian URL dan jangan lupa menggunakan method POST.
Sebelum kita klik Send, silahkan klik tab body pada Postman dan pilih form-data, dan tambahkan key dengan nama id, title dan content beserta valunya.
Misalkan disini kita akan meng-update dengan ID 3, maka kurang lebih seperti gambar berikut ini :
Jika berhasil, teman-teman akan melihat response dengan format JSON seperti berikut ini :
{
"success": true,
"message": "Post Berhasil Diupdate!"
}
Uji Coba Hapus Data Dari Database
Sekarang teman-teman bisa mencobanya langsung dengan Postman, silahkan masukkan http://localhost:8000/posts/3 pada bagian URL dan jangan lupa menggunakan method DELETE.
Misalkan disini kita akan menghapus dengan ID 3, maka kurang lebih seperti gambar berikut ini :
Jika berhasil, teman-teman akan melihat response dengan format JSON seperti berikut ini :
{
"success": true,
"message": "Post Berhasil Dihapus!"
}
KESIMPULAN
Pada artikel kali ini kita semua sudah berhasil membuat project baru dengan Laravel 7 dan kita sudah berhasil membuat Restful API dan sekaligus kita juga sudah menguji API kita.
Di artikel selanjutnya kita akan mencoba menginstall Vue JS, Vue Router, Vue Axios dan membuat sebuah component Vue untuk proses CRUD kita nanti.
Terima Kasih.