Lumen Client App
Pada artikel kali ini kita akan melanjutkan membuat web service menggunakan PHP menggunakan framework Lumen dari Laravel. Untuk kali ini kita akan membuat Lumen Client App.
Sebelumnya kita membuat aplikasi Web Service menggunakan Lumen. Saat ini kita akan membuat aplikasi yang bisa mengakses Web Service menggunakan Lumen (kita sebut dengan aplikasi Client).
Pertama kita akan membuat aplikasi lumen dengan menggunakan composser kita akan menamakan aplikasi ini adalah LumenClientApp
jalankan ini "composer create-project --prefer-dist laravel/lumen LumenClientApp" pada terminal dan tunggu prosesnya sampai selesai
lalu jalankan LumenClientApp dengan command "php -S 127.0.0.1:9000 -t public" pada terminal dan untuk LumenServiceApp dengan comman "php -S 127.0.0.1:8000 -t public".
 |
| LumenServiceApp - 127.0.0.1:8000 |
 |
| LumenClientApp - 127.0.0.1:9000 |
lalu kita akan menambahkan endpoint baru untuk itu kita buka file "routes/web.php" dan menambahkan sintaks di bawah ini
Setelah itu kita buat controller baru dengan nama PostController dan buat seperti gambar dibawah ini
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PostController extends Controller
{
public function getRequestJson()
{
$token = $this->getToken();
$url = 'http://127.0.0.1:8000/post';
$headers = array();
$headers[] = 'Accept: application/json';
$headers[] = 'Content-Type: application/json';
$headers[] = 'Authorization: '.$token;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
curl_close($ch);
$response = json_decode($result, true);
return view('posts.getRequestJson', ['results' => $response]);
}
private function getToken()
{
$url = 'http://127.0.0.1:8000/auth/login';
$headers = ['Accept: application/json'];
$data = array(
'email' => 'user@mail.com',
'password' => 'password',
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$result = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
$response = json_decode($result, true);
if($httpcode == 200){
return $response["token_type"]." ".$response["token"];
}
else{
return null;
}
}
}
setelah itu kita akan membuat layout untuk tampilan data yang telah di panggil tadi . pertama kita akan membuat view template terlebih dahulu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LumenClientApp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
LumenClientApp
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url('/posts/get-request-json') }}">Get Request JSON</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/posts/get-request-xml') }}">Get Request XML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/posts/post-request-json') }}">Post Request JSON</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</html>
lalu save di "resources/views/layouts/app.blade.php". setelah itu kita akan membuat tampilan blade untuk isi dari content
@extends('layouts.app')
@section('content')
<div class="container">
<h3>Get Request JSON</h3>
<div class="table-responsive">
<table class="table table-primary table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">User ID</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Content</th>
<th scope="col">Created at</th>
<th scope="col">Updated at</th>
</tr>
</thead>
<tbody>
@foreach($results['data'] as $result)
<tr>
<td>{{ $result['id'] }}</td>
<td>{{ $result['user_id'] }}</td>
<td>{{ $result['title'] }}</td>
<td>{{ $result['status'] }}</td>
<td>{{ $result['content'] }}</td>
<td>{{ $result['created_at'] }}</td>
<td>{{ $result['updated_at'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection
lalu save di "resources/views/posts/getRequestJson.blade.php". dan kita coba buka di browser maka tampilannya akan seperti dibawah ini
lalu selanjutnya kita akan membuat fungsi untuk mengambil data XML
public function getRequestXml()
{
$token = $this->getToken();
$url = 'http://127.0.0.1:8000/post';
$headers = array();
$headers[] = 'Accept: application/xml';
$headers[] = 'Content-Type: application/xml';
$headers[] = 'Authorization: '.$token;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
curl_close($ch);
$parsedXml = new \SimpleXMLElement($result);
$response = [];
foreach ($parsedXml->children() as $item) {
array_push($response, array(
'id' => $item->id,
'user_id' => $item->user_id,
'title' => $item->title,
'content' => $item->content,
'status' => $item->status,
'created_at' => $item->created_at,
'updated_at' => $item->updated_at
));
}
return view('posts.getRequestXml', ['results' => $response]);
}
lalu selanjutnya kita akan membuat tampilan blade untuk data XML yang telah diambil tadi
@extends('layouts.app')
@section('content')
<div class="container">
<h3>Get Request XML</h3>
<div class="table-responsive">
<table class="table table-primary table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">User ID</th>
<th scope="col">Title</th>
<th scope="col">Status</th>
<th scope="col">Content</th>
<th scope="col">Created at</th>
<th scope="col">Updated at</th>
</tr>
</thead>
<tbody>
@foreach($results as $result)
<tr>
<td>{{ $result['id'] }}</td>
<td>{{ $result['user_id'] }}</td>
<td>{{ $result['title'] }}</td>
<td>{{ $result['status'] }}</td>
<td>{{ $result['content'] }}</td>
<td>{{ $result['created_at'] }}</td>
<td>{{ $result['updated_at'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection
lalu save di "resources/views/posts/getRequestXml.blade.php". dan kita coba buka di browser maka tampilannya akan seperti dibawah ini
dan terakhir kita akan mencoba mengakses rest api dengan menggunakan method post untuk mengrim data post, tambahkan fungsi di bawah ini pada PostController
public function postRequestJson()
{
$token = $this->getToken();
$url = 'http://127.0.0.1:8000/post';
$headers = array();
$headers[] = 'Accept: application/json';
$headers[] = 'Content-Type: application/json';
$headers[] = 'Authorization: '.$token;
$data = array(
'title' => 'Ini adalah Contoh Title',
'content' => 'Ini adalah Contoh Content',
'status' => 'draft',
);
$dataJSON = json_encode($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dataJSON);
$result = curl_exec($ch);
curl_close($ch);
$response = json_decode($result, true);
return view('posts.postRequestJson', ['result' => $response]);
}
Lalu kita akan buat tampilan untuk menampilakn respon dari API
@extends('layouts.app')
@section('content')
<div class="container">
<h3>Post Request JSON</h3>
<div class="table-responsive">
<table class="table table-primary table-striped table-hover">
<tbody>
<tr>
<th>ID</th>
<td>{{ $result['id'] }}</td>
</tr>
<tr>
<th>User ID</th>
<td>{{ $result['user_id'] }}</td>
</tr>
<tr>
<th>Title</th>
<td>{{ $result['title'] }}</td>
</tr>
<tr>
<th>Status</th>
<td>{{ $result['status'] }}</td>
</tr>
<tr>
<th>Content</th>
<td>{{ $result['content'] }}</td>
</tr>
<tr>
<th>Created at</th>
<td>{{ $result['created_at'] }}</td>
</tr>
<tr>
<th>Updated at</th>
<td>{{ $result['updated_at'] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
@endsection
Untuk tampilannya akan seperti gambar dibawah ini
Sekian tutorial mengenai Lumen Client App, mohon maaf apabila banyak sekali kekurangan
Terima kasih
