Tanggal :4 Agustus 2020
Menampilkan Data Sebaran covid-19 dengan Laravel 7

Menampilkan Data Sebaran Covid-19 Dengan Laravel 7 dan API Kawal Corona

Akhir akhir ini di sosial media lagi trending teman-teman yang mencari API tentang informasi penyebaran pandemi covid-19. Dan ingin menampilkannya di website masing-masing dengan memanfaatkan API Kawal Corona.

Dalam tutorial ini kita akan sama-sama belajar bagaimana cara menampilkan data sebaran covid-19 dengan memanfaatkan API yang disediakan oleh kawalcorona.com.

langsung saja kita mulai langkah pertama dengan membuat sebuah controller baru, kita beri nama InfoController.

php artisan make:controller InfoController

selanjutnya pada InfoController yang baru saja kita buat, tambahkan sebuah function baru dengan nama index.

public function index()
{
    $response = Http::get('https://api.kawalcorona.com/indonesia/provinsi');
    $data = $response->json();
    return view('index',compact('data'));
}

Pada fungsi diatas, kita menggunakan fitur baru dari laravel 7 yaitu Http Client. Kemudian data yang didapat dari API Kawal Corona kita jadikan sebagai data Json . untuk dokumentasi API dari Kawal Corona bisa dilihat disini

Jangan lupa untuk menggunakan Facades Http seperti berikut:

use Illuminate\Support\Facades\Http;

pada fungsi index di InfoController kita gunakan sebuah view dengan nama index. maka kita buat sebuah file baru dengan nama index.blade.php pada resources/views. Kita tambahkan CDN dari Bootstrap di bagian head seperti berikut:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>

kemudian pada bagian <body> kita tambahkan seperti berikut untuk menampilkan datanya

<div class="container">
            <table class="table">
                    <thead class="thead-dark">
                      <tr>
                        <th scope="col">No</th>
                        <th scope="col">Provinsi</th>
                        <th scope="col">Positif</th>
                        <th scope="col">Sembuh</th>
                        <th scope="col">Meninggal</th>
                      </tr>
                    </thead>
                    <tbody>
                    @foreach ($data as $datas)   
                      <tr>
                        <th scope="row">1</th>
                        <td>{{ $datas['attributes']['Provinsi'] }}</td>
                        <td>{{ $datas['attributes']['Kasus_Posi'] }}</td>
                        <td>{{ $datas['attributes']['Kasus_Semb'] }}</td>
                        <td>{{ $datas['attributes']['Kasus_Meni'] }}</td>
                      </tr>
                    @endforeach 
                    </tbody>
                  </table>
    </div>

Langkah yang terakhir adalah buat route seperti berikut:

Route::get('/','Api\DataController@index');

sekarang teman-teman bisa cek hasilnya di browser. tutorial versi vidionya tonton vidio berikut:

baik sekian dulu tutorial menampilkan data sebaran covid-19 dengan laravel 7 dan API dari kawalcorona ini. semoga bermanfaat

Programmer, Pengajar, Penulis Tutorial, Content Creator dan Kontributor di Kawan Koding

19 Comments

  1. Faisal Reply

    mas ini saya ada error seperti kaya gini ( Illegal string offset ‘Provinsi’ )kenapa ya mas padahal nama variabelnya udah sama.

  2. ZefianAlfian Reply

    Halo mas, saya boleh request ga?
    Menampilkan data info corona provinsi indonesia di javascript(js) gimana ya? Maaf pemula

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *