PHP Lumen Client App

Hai sobat bukan ngoding, kali ini saya akan membagikan tutorial bagaimana cara membuat aplikasi client. Sebelumnya kita membuat  aplikasi web service REST API server, kali ini kita akan buat aplikasi client nya dan bagaimana cara mengakses data dari server tersebut.

Pertama install terlebih dahulu project lumen client app menggunakan composer seperti dibawah ini.

Disini saya membuat project dengan nama lumen-client-app, kemudian masuk ke directory aplikasi client tersebut, dan jalankan servernya pada port 9000.

Coba akses localhost:9000 pada browser, jika tampilannya seperti dibawah ini maka telah berhasil.

Membuat Fungsi Untuk Mengakses Web Service JSON (Get Request)

Setelah jalankan servernya, kita buka project lumen-client-app pada text editor kita, buka file routes/web.php dan buat routing seperti berikut.

Buat controller dengan nama app/Http/Controllers/PostsController.php, kemudian buat function getRequestJson dengan code nya seperti dibawah ini.

Masuk kedalam folder resource/views, buat sebuah folder dengan nama posts kemudian buat file getRequestJson.php di dalam folder posts tersebut.

Dalam getRequestJson.php ini kita akan membuat struktur HTML, tambahkan script berikut di dalam getRequestJson.php.

Sebelum kita test di browser tentunya kita perlu menjalankan terlebih dahulu server web servicenya. Teman-teman bisa masuk ke project sebelumnya, yaiut “php-lumen-service-app” dan buka terminalnya, disini saya menggunakan text editor visual studio code yang di dalamnya sudah tersedia fitur terminal untuk memudahkan kita dalam menjalankan servernya. Untuk menjalankan web service nya kita gunakan port 8000 seperti berikut.

Sekarang kita masuk lagi ke project lumen-client-app, untuk mengecek terlebih dahulu apakah data nya sudah berhasil diambil dari web service kita bisa menggunakan function dd() atau biasa disebut dump, kita lihat isian data dari respon dengan menambahkan function dd() sebelum return view.

Lalu akses endpoint http://localhost:9000/posts/get-request-json, jika respon nya seperti berikut maka data telah berhasil di get dari web service.

Bisa dilihat isi dari response adalah 4 data berbentuk array yang didapat dari web service. Selanjutnya kita hapus kembali function dd tersebut atau bisa di berikan comment saja, kemudian akses kembali endpoint http://localhost:9000/posts/get-request-json, jika berhasil tampilan akan seperti berikut.

Membuat Fungsi Untuk Mengakses Web Service XML (Get Request)

Sekarang kita akan membuat request client yang sama, namun menggunakan format XML. Tambahkan routing baru pada file web.php.

Buat function baru getRequestXml() pada PostsController.

Untuk format xml kita perlu menginstall terlebih dulu library simple xml.

composer require ext-simplexml

Seperti biasa sebelum kita akses endpoint http://localhost:9000/posts/get-request-xml, kita lakukan dump terlebih dahulu untuk melihat isian dari response, jika tampilan seperti berikut maka sudah berhasil di get.

Hapus kembali function dump atau berikan comment, lalu akses kembali endpointnya.

Membuat Fungsi Untuk Mengakses Web Service JSON (PostRequest)

Sekarang kita akan melakukan post data atau mengirimkan data dari client, pertama buat terlebih dahulu routing nya.

Kemudian buat function postRequsetJson() pada PostsController.

Selanjutnya kita buat tampilan view pada folder posts/postRequestJson seperti berikut.

Jika berhasil, maka tampilan akan seperti berikut.

Cek juga di database kita apakah data tersebut sudah berhasil di create atau belum.

Implementasi CRUD akses Rest API menggunakan Dummy API

Kali ini kita akan melakukan CRUD namun tidak mengakses pada web service yang sudah kita buat, melainkan menggunakan dummy api yang kita akses di http://dummy.restapiexample.com/

Pertama kita buat terlebih dahulu routingnya untuk melakukan get data.

Buat Controller dengan nama EmployeeController, kemudian buat function index seperti berikut.

Buat folder employee pada resources/views dan buat file index.php di dalamnya, kemudian buat tampilan html seperti berikut.

Selanjutnya test endpoint http://localhost:9000/employee, jika berhasil maka tampilan akan seperti berikut.

Berikutnya kita akan buat endpoint untuk akses detail employee nya, tambahkan routing untuk akses detail employee.

Buat method baru dengan nama show pada EmployeeController.

Selanjutnya buat file view nya, buat file baru dengan nama show.php dan tuliskan code html seperti berikut.

Langsung saja kita akses endpointnya dengan mengirimkan parameter id 1 http://localhost:9000/employee/1, jika berhasil, maka tampilan akan seperti berikut.

Berikutnya kita akan buat endpoint untuk membuat data employee baru, tambahkan routing untuk create employee.

Buat method baru dengan nama store pada EmployeeController.

Di controller kita membuat data statis dengan mengirimkan data seperti diatas. Selanjutnya buat file view baru dengan nama store.php pada folder resouces/views/employee.

Akses endpoint http://localhost:9000/create, jika berhasil maka tampilan akan seperti berikut.

Untuk memastikan apakah data yang kita create sudah berhasil dibuat kita bisa akses endpoint http://localhost:9000/employeekembali lalu lihat data paling akhir.

Selanjutnya kita akan melakukan update data, buat routing baru seperti berikut.

Buat function update pada EmployeeController seperti berikut.

Dalam update data juga kita mengirimkan data statis pada variabel $data, yang mana akan kita data employee yang sebelumnya baru saja kita buat dengan id ‘270968’.

Selanjutnya buat file view dengan nama update.php pada folder resources/views/employee.

Kita akan update data dengan id 270968, maka kita akses endpoint http://localhost:9000/update/270968, jika berhasil maka tampilan akan seperti berikut.

Untuk memastikan kita bisa akses endpoint http://localhost:9000/employee, lalu check id ‘270968’ yang awalnya kita create dengan nama ‘Ryadi’ kemudian kita update dengan nama ‘Muhamamd Harisz Ryadi’.

Yang terakhir kita akan melakukan delete data, buat routing baru seperti berikut.

Buat function baru dengan nama destroy, dan tuliskan code seperti berikut.

Pada return kita tidak arahkan ke views, kita hanya return dengan nilai balik json sesuai isi dari dummy api.

Sekarang kita akan delete data yang telah kita update sebelumnya yaitu dengan id ‘270968’ maka kita akses endpoint http://localhost:9000/delete/270968, jika berhasil maka respon akan seperti berikut.

Untuk lebih memastikan kita akses kembali endpoint http://localhost:9000/employee lalu cek apakah id ‘270968’ sudah terhapus atau belum.

Sekian tutorial kali ini, selamat mencoba.