Web Development Practical Report 5

Membuat Restful API dan Testing API

1

Buatlah Project Laravel Baru

Ketiklah Code berikut pada CLI VSCode atau CLI lainnya

 composer create-project laravel/laravel=^12 api --prefer-dist
Opening Visual Studio Code
2

Membuat Model dan Migrasi

Kita akan buat API untuk entitas Book

Ketiklah Code berikut pada CLI VSCode atau CLI lainnya

php artisan make:model Book -m

Edit file Migrasi nya seperti gambar berikut :

Opening Folder in VS Code

Jalankan Migrasi dengan cara mengetikkan code berikut pada CLI

php artisan migrate
3

Membuat Controller

Ketiklah Code berikut pada CLI VSCode atau CLI lainnya

php artisan make:controller BookController --api

dan Pergi ke direktori app/Http/Controllers/BookController.php dan ketiklah code seperti di gambar :

Creating HTML File
4

Membuat Routes

buat file baru pada direktori routes dengan nama api.php dan ketiklah code seperti di gambar :

HTML Structure Setup
5

Menambahkan Fillable ke Model

Pergi ke direktori app/Models/Book.php dan ketiklah code seperti di gambar :

Creating CSS File
6

Testing API dengan Postman

Download Postman https://www.postman.com/downloads/ dan lakukan instalasi hingga proses login.pada menu collections, klik Create Collections dan beri nama sesuai kebutuhan

jangan lupa menjalankan servernya dengan cara :

php artisan serve
7

Mengambil semua data dengan Method GET

Klik kanan Collections yang telah dibuat tadi, dan pilih Add Request, pilih Method GET dan isikan URL nya dengan : http://127.0.0.1:8000/api/books dan klik SEND, jika berhasil, dia akan mengembalikan Array kosong dan mengapa array kosong? karena kita belum menginputkan data apapun ke dalam database.

Designing Navigation Bar
8

Menambahkan Data dengan Method POST

Klik kanan Collections yang telah dibuat tadi, dan pilih Add Request, pilih Method POST dan isikan URL nya dengan : http://127.0.0.1:8000/api/books dan pergi ke tab Body, centang raw, dan isikan code ini :

{
  "title": "Tutorial JS",
  "author": "Budi"
}
Creating Hero Section
9

Menampilkan data berdasarkan ID

Klik kanan Collections yang telah dibuat tadi, dan pilih Add Request, pilih Method GET dan isikan URL nya dengan : http://127.0.0.1:8000/api/books/1, dan jika berhasil dia akan menampilkan data sesuai dengan ID yang dicari

Implementing Glitch Effect
10

Mengupdate Data dengan Method PUT

Klik kanan Collections yang telah dibuat tadi, dan pilih Add Request, pilih Method PUT dan isikan URL nya dengan : http://127.0.0.1:8000/api/books/1, dan pergi ke tab headers dan edit Key Content-Type nya menjadi Value application/json dan edit Key Accept nya menjadi Value application/json

Adding About Section
11

Menghapus Data dengan Method DELETE

Klik kanan Collections yang telah dibuat tadi, dan pilih Add Request, pilih Method DELETE dan isikan URL nya dengan : http://127.0.0.1:8000/api/books/1, dan jika berhasil dia akan menghapuskan data sesuai ID URL

Designing Projects Section