Tanggal :13 Juni 2024
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

Tinggalkan Balasan