Logo Universitas

Universitas ASA Indonesia

Program Studi: Teknologi Informasi

Mata Kuliah: Pengembangan Aplikasi Web Lanjut

SKS: 3 (2 teori, 1 praktikum)

Dosen Pengampu: Istiqomah Sumadikarta, S.T., M.Kom.

Beranda Mundur Maju

Pertemuan 4: RESTful API - Web

Membuat RESTful API Categories Web

Setelah sebelumnya belajar membuat RESTful API yang bersifat private (perlu otentikasi), maka sekarang kita akan lanjutkan belajar membuat RESTful API yang bersifat public, yang artinya API tersebut bisa diakses oleh siapa saja. Karena kita akan gunakan API tersebut untuk menampilkan data di halaman web.

Dan karena sebelumnya kita sudah pernah membuat CategoryResource, maka pada tahap ini kita tidak perlu membuatnya lagi, karena kita akan menggunakan Resource yang sudah ada.

Langkah 1 - Membuat Controller Category Web

Sekarang kita akan membuat controller baru untuk category web. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.

php artisan make:controller Api/Web/CategoryController

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama CategoryController.php yang berada di dalam folder app/Http/Controllers/Api/Web. Silahkan buka file tersebut, kemudian ubah semua kode-nya menjadi seperti berikut ini : 

<?php

namespace App\Http\Controllers\Api\Web;

use App\Models\Category;
use App\Http\Controllers\Controller;
use App\Http\Resources\CategoryResource;

class CategoryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //get categories
        $categories = Category::latest()->get();
        
        //return with Api Resource
        return new CategoryResource(true, 'List Data Categories', $categories);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($slug)
    {
        $category = Category::with('places.category', 'places.images')->where('slug', $slug)->first();
        
        if($category) {
            //return success with Api Resource
            return new CategoryResource(true, 'List Data Places By : '.$category->name, $category);
        }

        //return failed with Api Resource
        return new CategoryResource(false, 'Data Category Tidak Ditemukan!', null);
    }
}

Dari perubahan kode di atas, pertama kita melakukan import Model Category terlebih dahulu. Karena kita akan gunakan untuk mendapatkan data dari database.

use App\Models\Category;

Dan karena akan melakukan transformasi data ke dalam format JSON, maka kita juga akan import CategoryResource yang sudah pernah kita buat sebelumnya. 

use App\Http\Resources\CategoryResource;

Dan jika kita perhatikan, di dalam class CategoryController kita menambahkan 2 method baru, yaitu :

  1. function index - untuk menampilkan list data categories dari database.
  2. function show - untuk menampilkan detail data category berdasarkan slug.

function index

Method ini akan kita gunakan untuk menampilkan data categories dari database. Disini kita menggunakan Eloquent untuk mendapatkan data-nya. Dan akan kita urutkan data yang ditampilkan berdasarkan yang paling terbaru menggunakan method latest.

//get categories
$categories = Category::latest()->get();

Setelah data berhasil di dapatkan, maka selanjutnya kita akan ubah menjadi format JSON menggunakan CategoryResource.

//return with Api Resource
return new CategoryResource(true, 'List Data Categories', $categories);

function show

Method ini akan kita gunakan untuk menampilkan detail data category berdasarkan slug. Dimana kita juga akan memanggil relasi places menggunakan method with atau biasa disebut dengan Eager Loading. 

$category = Category::with('places.category', 'places.images')->where('slug', $slug)->first();

Di atas, dari Model Category memanggil relasi yang bernama places dan dari relasi place memanggil 2 relasi lagi yaitu category dan images. Jadi kalau di urutin kurang lebih seperti berikut ini :

Category 
	-> places 
		-> category
		-> images

Jika detail category ditemukan, maka kita akan ubah data-nya menjadi format JSON menggunakan CategoryResource.

//return success with Api Resource
return new CategoryResource(true, 'List Data Places By : '.$category->name, $category);

Tapi, jika data category tidak ditemukan, maka kita juga akan melakukan return menggunakan CategoryResource dengan status success false. 

//return failed with Api Resource
return new CategoryResource(false, 'Data Category Tidak Ditemukan!', null);

Langkah 2 - Menambahkan Route API Categories Web

Setelah berhasil membuat controller, maka sekarang kita lanjutkan untuk membuat route untuk categories. Silahkan buka file routes/api.php kemudian tambahkan route di bawah ini di luar prefix admin. 

//group route with prefix "web"
Route::prefix('web')->group(function () {

    //route categories index
    Route::get('/categories', [App\Http\Controllers\Api\Web\CategoryController::class, 'index', ['as' => 'web']]);

    //route categories show
    Route::get('/categories/{slug?}', [App\Http\Controllers\Api\Web\CategoryController::class, 'show', ['as' => 'web']]);
});

Di atas kita membuat prefix baru untuk route yang kita gunakan, yaitu bernama web. Dan di dalamnya kita menambahkan 2 route, yaitu /categories dan /categories/{slug}. Jika file routes/api.php di tulis secara lengkap, maka kurang lebih seperti berikut ini : 

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

//group route with prefix "admin"
Route::prefix('admin')->group(function () {

    //route login
    Route::post('/login', App\Http\Controllers\Api\Admin\LoginController::class, ['as' => 'admin']);

    //group route with middleware "auth:api"
    Route::group(['middleware' => 'auth:api'], function() {

        //route user logged in
        Route::get('/user', function (Request $request) {
            return $request->user();
        })->name('user');

        //route logout
        Route::post('/logout', App\Http\Controllers\Api\Admin\LogoutController::class, ['as' => 'admin']);

        //dashboard
        Route::get('/dashboard', App\Http\Controllers\Api\Admin\DashboardController::class, ['as' => 'admin']);

        //categories resource
        Route::apiResource('/categories', App\Http\Controllers\Api\Admin\CategoryController::class, ['except' => ['create', 'edit'], 'as' => 'admin']);
    
        //places resource
        Route::apiResource('/places', App\Http\Controllers\Api\Admin\PlaceController::class, ['except' => ['create', 'edit'], 'as' => 'admin']);
    
        //sliders resource
        Route::apiResource('/sliders', App\Http\Controllers\Api\Admin\SliderController::class, ['except' => ['create', 'show', 'edit', 'update'], 'as' => 'admin']);
    
        //users resource
        Route::apiResource('/users', App\Http\Controllers\Api\Admin\UserController::class, ['except' => ['create', 'edit'], 'as' => 'admin']);
    });

});

//group route with prefix "web"
Route::prefix('web')->group(function () {

    //route categories index
    Route::get('/categories', [App\Http\Controllers\Api\Web\CategoryController::class, 'index', ['as' => 'web']]);

    //route categories show
    Route::get('/categories/{slug?}', [App\Http\Controllers\Api\Web\CategoryController::class, 'show', ['as' => 'web']]);
});

Setelah itu, untuk memastikan apakah route yang sudah kita buat di atas berhasil, maka kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :

php artisan route:list

Langkah 3 - Uji Coba API Categories Web

Sekarang kita lanjutkan untuk melakukan uji coba dari setiap method yang sudah kita buat di atas. Disini kita akan melakukan uji coba di 2 method yang ada di dalam controller CategoryController.

Uji Coba Method Index

Sekarang kita akan melakukan uji coba menampilkan list data categories. Silahkan buka aplikasi Postman dan masukkan URL berikut ini http://localhost:8000/api/web/categories dan untuk method-nya silahkan pilih GET.

Jika sudah sekarang silahkan klik Send. Jika berhasil, maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi list data categories.

Uji Coba Show

Sekarang kita lanjutkan untuk melakukan uji coba proses show, disini untuk parameternya akan diambil menggunakan data slug. Silahkan buka aplikasi Postman kemudian masukkan URL berikut ini http://localhost:8000/api/web/categories/pelabuhan dan untuk method-nya silahkan pilih GET.

CATATAN ! : pelabuhan merupakan salah satu slug yang saya miliki di dalam table pelabuhan, jadi silahkan disesuaikan dengan slug yang teman-teman punya.

Jika sudah, silahkan klik Send dan jika berhasil maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi list data places berdasarkan data category.

INFORMASI : di atas, untuk key places masih bernilai array kosong [], karena kita belum memiliki data places yang sesuai dengan category tersebut.

Membuat RESTful API Places Web

Pada materi kali ini kita akan belajar membuat RESTful API untuk menampilkan data places. Dimana API yang akan kita buat ini bersifat public, jadi tidak perlu melakukan otentikasi untuk dapat mengakses isi data di dalamnya.

Di dalam RESTful API kali ini kita akan membuat beberapa method yang fungsinya kurang lebih seperti berikut ini :

  1. menampilkan list data places menggunakan pagination.
  2. menampilkan detail data place.
  3. menampilkan list data places tanpa menggunakan pagination.

INFORMASI : untuk yang point ke 3 nantinya akan kita gunakan untuk menampilkan semua data places di dalam maps. Jadi kita tidak membutuhkan fitur pagination.

Langkah 1 - Membuat Controller Place Web

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan teman-teman menjalankan perintah tersebut di dalam project Laravel-nya.

php artisan make:controller Api/Web/PlaceController

Jika perintah di atas berhasil di jalankan, maka kita akan mendapatkan 1 file controller baru dengan nama PlaceController.php yang berada di dalam folder app/Http/Controllers/Api/Web. Setelah itu, silahkan buka file tersebut dan ubah semua kode-nya menjadi seperti berikut ini : 

<?php

namespace App\Http\Controllers\Api\Web;

use App\Models\Place;
use App\Http\Controllers\Controller;
use App\Http\Resources\PlaceResource;

class PlaceController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //get places
        $places = Place::with('category', 'images')->when(request()->q, function($places) {
            $places = $places->where('title', 'like', '%'. request()->q . '%');
        })->latest()->paginate(8);
        
        //return with Api Resource
        return new PlaceResource(true, 'List Data Places', $places);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($slug)
    {
        $place = Place::with('category', 'images')->where('slug', $slug)->first();
        
        if($place) {
            //return success with Api Resource
            return new PlaceResource(true, 'Detail Data Places : '.$place->title, $place);
        }

        //return failed with Api Resource
        return new PlaceResource(false, 'Data Place Tidak Ditemukan!', null);
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function all_places()
    {
        //get places
        $places = Place::with('category', 'images')->latest()->get();
        
        //return with Api Resource
        return new PlaceResource(true, 'List Data Places', $places);
    }
}

Dari perubahan kode di atas, pertama kita melakukan import Model Place terlebih dahulu, karena kita akan gunakan untuk mendapatkan data dari database.

use App\Models\Place;

Karena kita akan mengubah data menjadi format JSON, maka kita akan melakukan import PlaceResource yang sudah kita buat sebelumnya. 

use App\Http\Resources\PlaceResource;

Jika kita perhatikan, di dalam class PlaceController kita menambahkan 3 method baru, yaitu :

  1. function index - menampilkan list data places (pagination).
  2. function show - menampilkan detail data palce.
  3. function all_places - menampilkan list data places (tanpa pagination).

function index

Method ini akan kita gunakan untuk menampilkan list data places dari database. Disini kita juga akan memanggil 2 relasi menggunakan method with, relasi tersebut adalah category dan images. 

$places = Place::with('category', 'images')...

Kita juga menggunakan method when untuk membuat sebuah kondisi pencarian data. Jika ada sebuah request dengan nama q maka kita akan menjalankan kode di dalamnya, yaitu proses pencarian berdasarkan title dari data place.

->when(request()->q, function($places) {

	//proses pencarian

})

Jika tidak ada request dengan nama q, maka proses pencarian data akan dilewati. Setelah itu kita akan urutkan data yang ditampilkan berdasarkan yang paling terbaru menggunakan method latest. Dan kita akan batasi data yang ditampilkan perhalaman menggunakan method paginate. 

->latest()->paginate(8);

Setelah data di dapatkan, maka kita akan ubah menjadi format JSON dengan cara melakukan parsing ke dalam PlaceResource. 

//return with Api Resource
return new PlaceResource(true, 'List Data Places', $places);

function show

Method ini akan kita gunakan untuk menampilkan detail data place berdasarkan slug yang di dapatkan dari URL browser. Disini kita memanggil 2 relasi yaitu category dan images. 

$place = Place::with('category', 'images')->where('slug', $slug)->first();

Jika data place ditemukan, maka kita akan ubah menjadi format JSON menggunakan PlaceResource. 

//return success with Api Resource
return new PlaceResource(true, 'Detail Data Places : '.$place->title, $place);

Tapi, jika data place tidak ditemukan, maka kita akan return menggunakan PlaceResource dengan status success false. 

//return failed with Api Resource
return new PlaceResource(false, 'Data Place Tidak Ditemukan!', null);

function all_places

Method ini sama seperti method index, bedanya kita tidak akan menambahkan fitur pagination disini.

//get places
$places = Place::with('category', 'images')->latest()->get();

Di atas, kita juga akan memanggil 2 relasi, yaitu category dan images. Setelah data didapatkan, maka kita akan ubah menjadi format JSON menggunakan PlaceResource.

//return with Api Resource
return new PlaceResource(true, 'List Data Places', $places);

Langkah 2 - Menambahkan Route API Places Web

Sekarang kita akan lanjutkan membuat route untuk places. Silahkan buka file routes/api.php, kemudian tambahkan route berikut ini di dalam prefix web dan tepatnya di bawah route /categories/{slug?}. 

//route places index
Route::get('/places', [App\Http\Controllers\Api\Web\PlaceController::class, 'index', ['as' => 'web']]);

//route places show
Route::get('/places/{slug?}', [App\Http\Controllers\Api\Web\PlaceController::class, 'show', ['as' => 'web']]);

//route all places index
Route::get('/all_places', [App\Http\Controllers\Api\Web\PlaceController::class, 'all_places', ['as' => 'web']]);

Di atas, kita menambahkan 3 route baru, dimana route tersebut akan mengarah ke dalam method-method yang sudah kita buat di dalam controller sebelumnya.

Untuk memastikan apakah route di atas berhasil ditambahkan, kita bisa mencoba menjalankan perintah berikut ini di dalam terminal/CMD :

php artisan route:list

Langkah 3 - Uji Coba API Places Web

Sekarang kita lanjutkan untuk melakukan uji coba dari setiap method yang sudah kita buat di atas. Disini kita akan melakukan uji coba di 3 method yang ada di dalam controller PlaceController.

Uji Coba Method Index

Sekarang kita akan melakukan uji coba menampilkan list data places. Silahkan buka aplikasi Postman dan masukkan URL berikut ini http://localhost:8000/api/web/places dan untuk method-nya silahkan pilih GET.

Jika sudah sekarang silahkan klik Send. Jika berhasil, maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi list data places.

INFORMASI : jika teman-teman belum menampilkan data, silahkan lakukan proses insert data place baru di RESTful API admin places.

Uji Coba Method Show

Sekarang kita akan lakukan uji coba proses menampilkan detail data place. Disini saya akan menggunakan slug simpang-lima-semarang, jadi untuk slug silahkan disesuaikan dengan data-nya masing-masing.

Silahkan buka aplikasi Postman, kemudian masukkan URL berikut ini : http://localhost:8000/api/web/places/simpang-lima-semarang dan untuk method-nya silahkan pilih GET.

Jika sudah sekarang silahkan klik Send. Jika berhasil, maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi detail data place.

Uji Coba Method All_Place

Terakhir kita akan lakukan uji coba untuk menampilkan semua list data places tanpa pagination. Silahkan buka aplikasi Postman, kemudian masukkan URL berikut ini : http://localhost:8000/api/web/all_places dan untuk method-nya silahkan pilih GET.

Jika sudah sekarang silahkan klik Send. Jika berhasil, maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi list data places.

Membuat RESTful API Sliders Web

Pada materi kali ini kita akan belajar bagaimana cara membuat RESTful API untuk menampilkan data sliders dari database. Dan Rest API yang akan kita buat adalah public, artinya siapa saja bisa mengakses Rest API tersebut.

Langkah 1 - Membuat Controller Slider

Sekarang silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan teman-teman berada di dalam project Laravel-nya.

php artisan make:controller Api/Web/SliderController

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama SliderController.php yang berada di dalam folder app/Http/Controllers/Api/Web. Silahkan buka file tersebut kemudian ubah kode-nya menjadi seperti berikut ini : 

<?php

namespace App\Http\Controllers\Api\Web;

use App\Models\Slider;
use App\Http\Controllers\Controller;
use App\Http\Resources\SliderResource;

class SliderController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //get sliders
        $sliders = Slider::latest()->get();
        
        //return with Api Resource
        return new SliderResource(true, 'List Data Sliders', $sliders);
    }
}

Dari perubahan kode di atas, pertama-tama kita melakukan import Model Slider terlebih dahulu, karena kita akan menggunakan Model tersebut untuk mendapatkan data dari database. 

use App\Models\Slider;

Karena kita akan mengubah data tersebut menjadi JSON, maka kita akan melakukan import SliderResource. 

use App\Http\Resources\SliderResource;

Dan di dalam class SliderController kita hanya menambahkan 1 method baru, yaitu index. Dimana method tersebut akan kita gunakan untuk menampilkan list data sliders dari database menggunakan Eloquent. 

//get sliders
$sliders = Slider::latest()->get();

Setelah data berhasil di dapatkan, maka sekarang kita akan ubah menjadi format JSON dengan cara memparsingnya ke dalam SliderResource.

//return with Api Resource
return new SliderResource(true, 'List Data Sliders', $sliders);

Langkah 2 - Membuat Route API Sliders Web

Sekarang kita akan lanjutkan membuat route untuk sliders. Silahkan buka file routes/api.php, kemudian tambahkan route berikut ini di dalam prefix web dan tepatnya di bawah route /all_places. 

//route sliders
Route::get('/sliders', [App\Http\Controllers\Api\Web\SliderController::class, 'index', ['as' => 'web']]);

Untuk memastikan apakah route tersebut berhasil ditambahkan, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :

php artisan route:list

Langkah 3 - Uji Coba API Sliders Web

Sekarang kita akan melakukan uji coba Rest API sliders web. Silahkan buka aplikasi Postman kemudian masukkan URL berikut ini : http://localhost:8000/api/web/sliders dan untuk method-nya silahkan pilih GET.

Jika sudah sekarang silahkan klik Send. Jika berhasil, maka kita akan mendapatkan sebuah response dalam format JSON yang berisi informasi list data sliders.

INFORMASI : di atas, jika key data masih bernilai array kosong [], itu karena di dalam table sliders belum ada data-nya. Jadi silahkan bisa melakukan proses insert di Rest API admin sliders.

Beranda Mundur Maju