Tanggal :September 26, 2020

Membuat Website Corona seperti kawalcorona.com

Spread the love

Ditengah tengah maraknya wabah corona di indonesia , semua masyarakat indonesia saling membantu untuk terhindarnya wabah corona yang sudah dinyatakan pandemi oleh WHO, tak terkecuali para programmers di indonesia, salah satu bentuk bantuan seperti aplikasi atau website informasi mengenai corona seperti kawalcorona.com.

website kawal corona sendiri menyediakan api untuk para developers indonesia untuk memanfatkan data dampak corona yang ada di indonesia. kali ini kita akan belajar memanfaatkan data tersebut untuk membuat website seperti kawal corona.

pada postingan kali ini , saya berharap anda sudah mengerti cara membuat proyek baru di laravel, jika belum silahkan baca dokumentasi laravel disini .

setelah anda memiliki proyek laravel baru anda dapat langsung membuat tampilan seperti kawal corona dengan membuat file dengan covid19.blade.php

1. membuat file covid19.blade.php

seperti biasa anda dapat membuat file untuk view tampilan utama website kita.

2. mencopy file yang dibutuhkan

untuk desain front end web kita di website kawalcorona.com kita dapat menggunakan file yang digunakan website kawalcorona (saya harap jangan gunakan file tampilan ini untuk diperjual belikan atau membuat proyek untuk dijual dengan desain css tersebut untuk menghargai programmers cukup untuk belajar), adapun file seperti css dapat di download di website kawal corona dengan klik kanan lalu klik file css yang diperlukan dengan nama file newstyle.css atau seperti dibawah ini.

<link href=“{{ asset(‘bootstrap/css/bootstrap.min.css’)}}” rel=“stylesheet”>

<link href=“https://kawalcorona.com/data/css/newstyle.css” rel=“stylesheet”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

.
3. Ambil data api kawalcorona

untuk mengambil data dari website kawal corona anda dapat menggunakan source code seperti dibawah ini :

    <?php
        $datapositif = file_get_contents(“https://api.kawalcorona.com/positif”);
        $positif = json_decode($datapositifTRUE);
        $datasembuh = file_get_contents(“https://api.kawalcorona.com/sembuh”);
        $sembuh = json_decode($datasembuhTRUE);
        $datameninggal = file_get_contents(“https://api.kawalcorona.com/meninggal”);
        $meninggal = json_decode($datameninggalTRUE);
        $dataid = file_get_contents(“https://api.kawalcorona.com/indonesia”);
        $id = json_decode($dataidTRUE);
        $dataidprovinsi = file_get_contents(“https://api.kawalcorona.com/indonesia/provinsi”);
        $idprovinsi = json_decode($dataidprovinsiTRUE);
        $dataduniafile_get_contents(“https://api.kawalcorona.com/”);
        $dunia = json_decode($dataduniaTRUE);
    ?>

letakkan source code tersebut dibawah </head>.

4. menampilkan data json dari api, dari langkah yang telah kita buat sebelumnya.

untuk menampilkan data yang ada di indonesia anda dapat menggunakan code php berikut :

Kasus Positif

<?php echo $id[0][‘positif’?>

Kasus Sembuh

<?php echo $id[0][‘sembuh’?>

Kasus Meninggal

<?php echo $id[0][‘meninggal’?>

untuk menampilkan data yang ada di dunia anda dapat menggunakan code php berikut :

Kasus Positif

<?php echo $positif[‘value’?>

Kasus Sembuh

<?php echo $sembuh[‘value’?>

Kasus Meninggal

<?php echo $meninggal[‘value’?>

5. Buatlah tampilan sekreatif mungkin.

jika anda telah tau cara menampilkan data api dari kawalcorona, anda dapat mengimprove tampilan anda sendiri.

namun jika anda tak ingin capek anda dapat mengcopy source code dibawah ini dan mengotak atiknya sedikit.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://kawalcorona.com/data/css/newstyle.css" rel="stylesheet">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title></title>

  </head>
  <body >


    

    <?php
        $datapositif = file_get_contents("https://api.kawalcorona.com/positif");
        $positif = json_decode($datapositif, TRUE);
        $datasembuh = file_get_contents("https://api.kawalcorona.com/sembuh");
        $sembuh = json_decode($datasembuh, TRUE);
        $datameninggal = file_get_contents("https://api.kawalcorona.com/meninggal");
        $meninggal = json_decode($datameninggal, TRUE);
        $dataid = file_get_contents("https://api.kawalcorona.com/indonesia");
        $id = json_decode($dataid, TRUE);
        $dataidprovinsi = file_get_contents("https://api.kawalcorona.com/indonesia/provinsi");
        $idprovinsi = json_decode($dataidprovinsi, TRUE);
        $datadunia= file_get_contents("https://api.kawalcorona.com/");
        $dunia = json_decode($datadunia, TRUE);
    ?>
  

  <div class="bg-light">
  <div class="container ">
            <div class="row">
                <div class="col-sm">
        <nav class="navbar navbar-light bg-white" style="background-color: #fff;">
        <span class="navbar-brand mb-0 h1">Title Website</span>
        <span class="navbar-text">
        <a class="btn_2 d-none d-lg-block" >Hotline 021-5210-411</a>
    </span>
        </nav>
  
    </div>
    </div>
         <div class="container " >
                <div class="row">
                        <div class="col-sm">
                        <div class="alert bg-success img-card box-secondary-shadow" role="alert">
                        <div class="text-white">
                        <p class="font-weight-bolder text-white mb-0"> Kasus Corona di Luwu Utara </p>
                            </div>
                        </div>
                        </div>
                    </div>
                    <br>
                    <p> Update terakhir : 22 Maret 2020 18:15 WITA </p>
                <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-success img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">Orang Dalam Pengawasan (ODP)</p>
            <h2 class="mb-0 number-font">19</h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/happy.png')}}" width="50" height="50" alt="Positif"> </div>
                                            </div>
         </div>
        </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-warning img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">Pasien Dalam Pengawasan (PDP)</p>
            <h2 class="mb-0 number-font">2</h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/happy.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-danger img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">Positif</p>
            <h2 class="mb-0 number-font">0</h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
                                            <div class="ml-auto"> <img src="{{asset('img/sad.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
                                </div>
                                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-secondary img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">MENINGGAL</p>
            <h2 class="mb-0 number-font">0</h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/cry.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
                                </div>
                </div>
                <br>
            <div class="row">
                <div class="col-sm">
                <div class="alert bg-success img-card box-secondary-shadow" role="alert">
                <div class="text-white">
                <p class="font-weight-bolder text-white mb-0"> Kasus Corona di Dunia </p>
                    </div>
                </div>
                </div>
            </div>
            <br>
            <div class="row">
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card bg-danger img-card box-primary-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL POSITIF</p>
            <h2 class="mb-0 number-font"><?php echo $positif['value'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/sad.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card bg-success img-card box-secondary-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL SEMBUH</p>
            <h2 class="mb-0 number-font"><?php echo $sembuh['value'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/happy.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-secondary img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL MENINGGAL</p>
            <h2 class="mb-0 number-font"><?php echo $meninggal['value'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/cry.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-primary img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
                                            <p class="text-white mb-0">TOTAL INFEKSI INDONESIA</p>
            <h2 class="mb-0 number-font"><h2><?php echo $id[0]['positif'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/indo.png')}}" width="50" height="50" alt="Positif"> </div>  
          </div>
         </div>
        </div>
       </div><!-- COL END -->
                            </div>
                            <br>
                         

                            <div class="row">
                <div class="col-sm">
                <div class="alert bg-success img-card box-secondary-shadow" role="alert">
                <div class="text-white">
                <p class="font-weight-bolder text-white mb-0"> Kasus Corona di Indonesia </p>
                    </div>
                </div>
                </div>
            </div>
            <br>
            <div class="row">
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card bg-danger img-card box-primary-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL POSITIF</p>
            <h2 class="mb-0 number-font"><?php echo $id[0]['positif'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/sad.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card bg-success img-card box-secondary-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL SEMBUH</p>
            <h2 class="mb-0 number-font"><?php echo $id[0]['sembuh'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/happy.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-secondary img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
            <p class="text-white mb-0">TOTAL MENINGGAL</p>
            <h2 class="mb-0 number-font"><?php echo $id[0]['meninggal'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/cry.png')}}" width="50" height="50" alt="Positif"> </div>
          </div>
         </div>
        </div>
       </div><!-- COL END -->
       <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <div class="card  bg-primary img-card box-success-shadow">
         <div class="card-body">
          <div class="d-flex">
           <div class="text-white">
                                            <p class="text-white mb-0">Infeksi <?php echo $idprovinsi[10]['attributes']['Provinsi'] ?></p>
            <h2 class="mb-0 number-font"><?php echo $idprovinsi[10]['attributes']['Kasus_Posi'] ?></h2>
            <p class="text-white mb-0">ORANG</p>
           </div>
           <div class="ml-auto"> <img src="{{asset('img/indo.png')}}" width="50" height="50" alt="Positif"> </div>  
          </div>
         </div>
        </div>
       </div><!-- COL END -->
                            </div>
                       
                <div class="row">
                    <div class="col-sm">
                    <div class="card">
      <div class="card-header ">
       <h3 class="card-title">Data Kasus Corona virus di Indonesia Berdasarkan Provinsi</h3>
       </div>
        <div class="card-body" >
                                <div style="height:600px;overflow:auto;margin-right:15px;">
                    <table class="table table-striped"  fixed-header  >
                    <thead>
                        <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>

                    @php
                        $no = 1;    
                    @endphp
                    <?php
                        for ($i= 0; $i <= 23; $i++){

                        
                        ?>
                    <tr>
                        <td> <?php echo $i+1 ?></td>
                        <td> <?php echo $idprovinsi[$i]['attributes']['Provinsi'] ?></td>
                        <td> <?php echo $idprovinsi[$i]['attributes']['Kasus_Posi'] ?></td>
                        <td> <?php echo $idprovinsi[$i]['attributes']['Kasus_Semb'] ?></td>
                        <td> <?php echo $idprovinsi[$i]['attributes']['Kasus_Meni'] ?></td>
                    </tr>
                        <?php 
                    
                    } ?>
                    </tbody>
                    </table>
                   
                  
        </div>
                    </div>
                    </div>
                    <div>
                    <br>
                    <div class="row">
       <div class="col-md-12 col-xl-6">
        <a href="https://www.unicef.org/indonesia/id/coronavirus">
        <div class="card text-white bg-orange">
         <div class="card-body">
          <h4 class="card-title">Novel coronavirus (COVID-19): Hal-hal yang perlu Anda ketahui</h4>
          <p class="card-text">Unicef Indonesia</p>
         </div>
        </div>
       </div></a><!-- COL END -->
       <div class="col-md-12 col-xl-6">
        <a href="https://www.kompas.com/tren/read/2020/03/03/183500265/infografik-daftar-100-rumah-sakit-rujukan-penanganan-virus-corona">
        <div class="card text-white bg-secondary">
         <div class="card-body">
          <h4 class="card-title">Daftar 100 Rumah Sakit Rujukan Penanganan Virus Corona</h4>
          <p class="card-text">Kompas</p>
         </div>
        </div>
       </div></a><!-- COL END -->
       <div class="col-md-12 col-xl-6">
        <a href="https://infeksiemerging.kemkes.go.id/">
        <div class="card text-white bg-success">
         <div class="card-body">
          <h4 class="card-title">Media Informasi Resmi Penyakit Infeksi Emerging</h4>
          <p class="card-text">Kementrian Kesehatan </p>
         </div>
        </div>
       </div></a><!-- COL END -->
       <div class="col-md-12 col-xl-6">
        <a href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019/advice-for-public">
        <div class="card text-white bg-danger">
         <div class="card-body">
          <h4 class="card-title">Coronavirus Disease (COVID-19) Advice for The Public</h4>
          <p class="card-text">WHO</p>
         </div>
        </div>
       </div></a><!-- COL END -->
                    </div>
                    <!-- FOOTER -->
                    </div>
                    <div class="container">
   <footer>
   <div class="footer border-top-0 footer-1">
          <div class="container">
           <div class="row align-items-center">
            <div class="social">
             <ul class="text-center">
              <li>
               <a class="social-icon" href="https://fb.me/ethicalhack.id" target="_blank"><i class="fa fa-facebook"></i></a>
              </li>
              <li>
               <a class="social-icon" href="https://instagram.com/ethicalhack.id" target="_blank"><i class="fa fa-instagram"></i></a>
              </li>
             </ul>
            </div>
            <div class="col-lg-12 col-sm-12 mt-3 mt-lg-0 text-center">
                                                    
             <br><a href=""><img src="{{asset('img/indo.png')}}" width="50" height="50" ></a><br><br>
             Use Cascading Style Sheets from Kawalcorona.com </a>. Made with <svg class="bi bi-heart-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z" clip-rule="evenodd"/>
</svg> by <a href="https://www.instagram.com/" target="_blank"></a>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div><!-- COL-END -->
     </div>
   </footer>
             </div>
                  
                              
        <!-- Optional JavaScript -->
        
        <script src="//code.jquery.com/jquery.js"></script>
        <!-- DataTables -->
        <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

jika ada beberapa file yg saya gunakan di directory sendiri, anda perlu mendownload nya di tempat resminya seperti bootstrap yang saya href di local direktory saya anda dapat menyesuaikan tempatnya dan icon icon dari kawalcorona. seperti link ini https://kawalcorona.com/uploads/happy-ipM.png.

maka hasilnya akan seperti ini :

maaf jika codenya sedikit berantakan semoga bermanfaat dan jangan lupa doakan untuk indonesia yang lebih baik, terimah kasih pula untuk developers kawalcorona yang telah menyediakan api.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *