Cara buat web info covid-19 dengan php dan javascript

Halo sobat-sobatku semua,apakabar kalian semua hari ini, tengah wabah Corona Virus (COVID-19) ini kita semua diwajibkan untuk tetap tinggal dirumah saja. Nah bagi kalian temna-temanku yang suka banget dengan coding, mungkin kalian bisa menggunakan waktu kalian dirumah ini dengan membuat web info covid-19. 

Memang sudah banyak web pantau covid-19 yang telah dibuat oleh pemerindah dan juga Developer handal lainnya, tapi tiada salahnya jugakan kita membuatnya sendiri sekalian untuk meningkatkan pemahaman kita tentang php dan juga API KEY. Iya kita membuat web ini dengan menggunakan API KEY. Apa itu API KEY ? silahkan buat teman-teman yang belum paham tentang apa itu API KEY  silahkan kalian baca di link samping ini APA ITU API KEY ?


Oleh karenaitu kali ini saya akan membagikan script web info covid-19 yang sudah saya buat. Memang web yang saya buat ini tidaklah sebagus buatan developer handal namun inikan hanya untuk belajar. Web tersebut dibuat dengan menggunakan bahasa pemrograman php dan javascript, lalu untuk sudah pasti menggunakan HTML dan CSS. Silahkan temna-teman copy Script di bawah ini.

Silahkan teman-teman buat file index.php dengan text editor yang kalian sukai, kali ini saya menggunakan Sublime Text.

HTML & PHP :
<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.kawalcorona.com/indonesia/provinsi/",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

$data = json_decode($response, true);

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="img/virus.png">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="PORTAL BERITA TENTANG UPDATE-AN COVID-19" />
    <meta name="author" content="OMJUAN" />
    <title>INFORMASI COVID-19 DIINDONESIA</title>
    <meta content='COVID-19 INDONESIA' name='keywords'/>
<meta content='COVID-19 OMJUAN.COM' property='og:title'/>
<meta content='website' property='og:type'/>
<meta content='OMJUAN.COM' property='og:site_name'/>
<link href='omjuan.com' rel='publisher'/>
<link href='omjuan.com' rel='author'/>
<link href='omjuan.com' rel='me'/>
<meta content='#' name='google-site-verification'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Omjuan.com' name='Author'/>
<meta content='id' name='geo.country'/>
<meta content='OMJUAN.COM' name='twitter:site'/>
<meta content='@juanmatheus37' name='twitter:creator'/>
<meta content='568317640669874' property='fb:admins'/>
<meta content='112012170205896' property='fb:pages'/>
<meta content='568317640669874' property='fb:app_id'/>

<!-- Theme Name       : omjuan.com
Theme Version    : v1.0.0 (Maret 2020)
Designer         : Juan Karly Matheus
URL Designer     : https://www.OMJUAN.com -->

    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap" rel="stylesheet">
    <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
    <!-- Third party plugin CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
        <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">

    <link href="css/styles.css" rel="stylesheet" />
    <style>
        .virecard-body{margin:0;padding:20px;font-weight:500;position:relative;z-index:1}
        .virelogoindo{position:relative;top:0;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.05);overflow:hidden}
        .vireorange{position:relative;background:#f6f7fa;color:#000;margin:0 auto 20px auto;border-radius:10px}
        .vireorange svg{position:absolute;bottom:0;left:0;right:0}
        .virecountry{font-size:26px;font-weight:500;margin:0}
        .virecorona{padding:10px 0 0 0;margin:0;font-size:14px;line-height:30px}
        .vireupdate{font-size:14px;margin:0 auto 10px auto}
        .virepositif,.viresembuh,.viremeninggal{padding:3px 10px;color:#fff;border-radius:99em;margin:0 7px 0 0}
        .virepositif{background:#f39c12}.viresembuh{background:#54a0ff}.viremeninggal{background:#ee5253}
        .virewords{padding:5px 7px 5px 5px;background:#333333;border-radius:10px;align:center}
    </style>
</head>
<body id="page-top">
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
        <div class="container">
            <a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="https://3.bp.blogspot.com/-5x3v-pc9u2o/XoBetcn49BI/AAAAAAAAB8A/_w0cwuniPdIMgMPrymQ8i0BGQ-KpkLlTQCLcBGAsYHQ/s36/indonesia-flagg.png" width="36" height="24" alt="Positif" style="border-radius: 10px;" /> INFO COVID-19</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto my-2 my-lg-0">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">BERDASARKAN PROVINSI DIINDONESIA</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">TENTANG VIRUS KORONA
</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">GAMBAR</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Masthead-->
    <header class="masthead">
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-lg-10 align-self-end">
                    <h1 class="text-uppercase text-white font-weight-bold">KASUS TERKONFIRMASI COVID-19 DI INDONESIA</h1>
                    <hr class="divider my-4" />
                </div>
                <div class="col-lg-8 align-self-baseline">
                    <p class="text-white-75 font-weight-light mb-5">
                        <div class="indonesia">
                            <div class="virelogoindo"> <img src="https://3.bp.blogspot.com/-5x3v-pc9u2o/XoBetcn49BI/AAAAAAAAB8A/_w0cwuniPdIMgMPrymQ8i0BGQ-KpkLlTQCLcBGAsYHQ/s36/indonesia-flagg.png" width="36" height="24" alt="Positif" /> </div>
                            <!-- Mohon untuk tidak menghapus link dibawah, Terimakasih untuk tidak menghapus link di bawah -->
                            <p class="vireupdate">Update Hari ini: <span id="date"/></span></p>
                            <p class="virecountry">Info COVID-19</p>
                            <p class="virecorona"> <span id="terjangkit" class="virepositif"/></span>Positif&nbsp;&nbsp;&nbsp;&nbsp;<span id="sembuh" class="viresembuh"/></span>Sembuh&nbsp;&nbsp;&nbsp;&nbsp;<span id="meninggal" class="viremeninggal"/></span>Meninggal</p>
                                #LawanBersamaCovid19
                                #DiRumahAja
                                #JagaJarak
                                #MaskerUntukSemua
                        </div>
                    </p>
                    <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Lihat berdasarkan Provinsi</a>
                </div>
            </div>
        </div>
    </header>
    <!-- About-->
    <section style="background: linear-gradient(to right, #F24179, #8B41F5);" class="page-section bg-primary" id="about">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 text-center">
                    <h2 class="text-white mt-0">KASUS TERKONFIRMASI BERDASARKAN PROVINSI DIINDONESIA</h2>
                    <hr class="divider light my-4" />
                        <table style="color: #fff;" border="1" cellspacing="0" cellpadding="5">
                            <thead style="color: #fff">
                                <th>NO</th>
                                <th>PROVINSI</th>
                                <th>POSITIF</th>
                                <th>SEMBUH</th>
                                <th>MENINGGAL</th>
                            </thead>
                            <?php $i=1;  foreach ($data as $key): ?>
                            <tbody>
                                <tr>
                                    <td><?php echo $i++; ?></td>
                                    <td align="left"><?php echo $key['attributes']['Provinsi'];  ?></td>
                                    <td><?php echo $key['attributes']['Kasus_Posi'];  ?></td>
                                    <td><?php echo $key['attributes']['Kasus_Semb'];  ?></td>
                                    <td><?php echo $key['attributes']['Kasus_Meni'];  ?></td>
                                </tr>
                            </tbody>
                            <?php endforeach ?>
                        </table>
                        <br>
                        <br>
                    <a class="btn btn-light btn-xl js-scroll-trigger" href="#services">VIRUS KORONA</a>
                </div>
            </div>
        </div>
    </section>
    <!-- Services-->
    <section class="page-section" id="services">
        <div class="container">
            <h2 class="text-center mt-0">TENTANG VIRUS KORONA</h2>
            <hr class="divider my-4" />
            <hr>
            <h4>Gambaran :</h4>
            <p align="justify">Pеnуаkіt соrоnаvіruѕ (COVID-19) adalah penyakit menular yang dіѕеbаbkаn oleh соrоnаvіruѕ уаng baru ditemukan. 
 
Sеbаgіаn bеѕаr оrаng yang terinfeksi vіruѕ COVID-19 akan mеngаlаmі реnуаkіt pernapasan rіngаn hіnggа ѕеdаng dаn sembuh tаnра memerlukan реrаwаtаn khuѕuѕ. Orаng уаng lеbіh tuа, dan mеrеkа уаng mеmіlіkі masalah mеdіѕ mendasar seperti реnуаkіt kаrdіоvаѕkulаr, dіаbеtеѕ, penyakit реrnараѕаn krоnіѕ, dan kаnkеr lеbіh mungkіn mеngеmbаngkаn реnуаkіt serius. <br/><br/>
 
Cara tеrbаіk untuk mencegah dаn mеmреrlаmbаt penularan diberitahukan dеngаn bаіk tеntаng vіruѕ COVID-19, реnуаkіt yang disebabkannya dаn bаgаіmаnа penyebarannya. Lіndungі diri Andа dan оrаng lain dаrі іnfеkѕі dengan mencuci tаngаn atau sering mеnggunаkаn alkohol bеrbаѕіѕ gosok dаn tіdаk menyentuh wаjаh Anda.<br/><br/>
 
Virus COVID-19 mеnуеbаr tеrutаmа mеlаluі tеtеѕаn аіr lіur аtаu keluar dаrі hidung ketika orang уаng tеrіnfеkѕі bаtuk atau bеrѕіn, jаdі реntіng bаhwа Anda jugа bеrlаtіh еtіkеt pernapasan (mіѕаlnуа, dengan bаtuk раdа ѕіku уаng tertekuk).<br/><br/> 
 
Sааt іnі, tіdаk ada vаkѕіn аtаu perawatan khusus untuk COVID-19. Namun, аdа banyak uji klіnіѕ yang ѕеdаng berlangsung mеngеvаluаѕі реrаwаtаn роtеnѕіаl. WHO akan tеruѕ mеmbеrіkаn іnfоrmаѕі tеrbаru ѕеgеrа setelah temuan klinis tersedia. 
</p>
<hr>
<h4>Pencegahan :</h4>
            <p align="justify">Untuk mеnсеgаh infeksi dаn memperlambat trаnѕmіѕі COVID-19, lаkukаn hal bеrіkut: <br>
 <ul>
     <li>Cuci tаngаn Andа ѕесаrа teratur dеngаn sabun dan аіr, atau bеrѕіhkаn dеngаn uѕараn bеrbаѕіѕ аlkоhоl. </li>
     <li>Pеrtаhаnkаn jаrаk minimal 1 meter аntаrа Andа dan orang уаng bаtuk аtаu bеrѕіn. </li>
     <li>Hindari mеnуеntuh wajah Andа. </li>
     <li>Tutuрі mulut dаn hіdung Andа saat bаtuk аtаu bersin.</li>
     <li>Tеtар dі rumаh jіkа Anda mеrаѕа tіdаk ѕеhаt. </li>
     <li>Jаngаn mеrоkоk dаn аktіvіtаѕ lаіn уаng mеlеmаhkаn paru-paru.</li>
     <li>Bеrlаtіh mеnjаgа jаrаk dеngаn menghindari perjalanan уаng tіdаk perlu dan menjauh dаrі kеlоmроk besar оrаng.</li>
 </ul> 
</p>
<hr>
<h4>Gejala :</h4>
            <p align="justify">Virus COVID-19 mеmреngаruhі оrаng уаng bеrbеdа dengan саrа уаng bеrbеdа. COVID-19 аdаlаh реnуаkіt реrnараѕаn dan ѕеbаgіаn besar orang уаng tеrіnfеkѕі аkаn mеngаlаmі gеjаlа ringan hingga sedang dan sembuh tаnра mеmеrlukаn реrаwаtаn khuѕuѕ. Orаng уаng mеmіlіkі kondisi medis yang mеndаѕаrіnуа dаn mеrеkа yang berusia di atas 60 tаhun memiliki rіѕіkо lebih tinggi tеrkеnа penyakit раrаh dan kеmаtіаn. <br> <br>
 
Gеjаlа umum mеlірutі: <br>
 <ul>
     <li>dеmаm</li>
     <li>kеlеlаhаn</li>
     <li>batuk kеrіng.</li>
 </ul>
 Gеjаlа lain tеrmаѕuk:
 <ul>
     <li>sesak nараѕ</li>
     <li>ѕаkіt dаn nyeri </li>
     <li>ѕаkіt tenggorokan</li>
     <li>dan ѕаngаt sedikit оrаng akan mеlароrkаn dіаrе, mual аtаu pilek. </li>
 </ul>
Orаng dеngаn gеjаlа ringan уаng dіnуаtаkаn sehat hаruѕ mеngіѕоlаѕі dіrі dаn mеnghubungі penyedia medis mеrеkа аtаu ѕаlurаn іnfоrmаѕі COVID-19 untuk nаѕіhаt tentang реngujіаn dan rujukan. <br>
 
Orang dеngаn dеmаm, batuk аtаu kеѕulіtаn bеrnараѕ hаruѕ menghubungi dokter mеrеkа dan mеnсаrі реrhаtіаn medis. 
<hr>
</p>
        </div>
    </section>
    <!-- Portfolio-->
    <section id="portfolio">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/1.jpg" alt="" />
                    <div class="portfolio-box-caption">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/2.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/2.jpg" alt="" />
                    <div class="portfolio-box-caption">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/3.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/3.jpg" alt="" />
                    <div class="portfolio-box-caption">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/4.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/4.jpg" alt="" />
                    <div class="portfolio-box-caption">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/5.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/5.jpg" alt="" />
                    <div class="portfolio-box-caption">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a class="portfolio-box" href="assets/img/portfolio/fullsize/6.jpg"
                    ><img class="img-fluid" src="assets/img/portfolio/thumbnails/6.jpg" alt="" />
                    <div class="portfolio-box-caption p-3">
                        <div class="project-category text-white-50">Category</div>
                        <div class="project-name">Project Name</div>
                    </div></a
                    >
                </div>
            </div>
        </div>
    </section>
    <!-- Contact-->
    <section class="page-section" id="contact">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h2 class="mt-0">Let's Get In Touch!</h2>
                    <hr class="divider my-4" />
                    <p class="text-muted mb-5">Ready to start your next project with us? Give us a call or send us an email and we will get back to you as soon as possible!</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
                    <img src="assets/img/whatsapp.png" sizes="50%">
                    <br>
                    <div><a href="https://wa.me/6282399585050?text=Hai%20Juan%20Matheus%2C%20saya%20mau%20bertanya%3F">+62 82399585050</a></div>
                </div>
                <div class="col-lg-4 mr-auto text-center">
                    <img src="assets/img/gmail.png" sizes="50%"><!-- Make sure to change the email address in BOTH the anchor text and the link target below!--><a class="d-block" href="mailto:juankarlymatheus@gmail.com">juankarlymatheus@gmail.com</a>
                    </div>
                <div class="col-lg-4 mr-auto text-center">
                    <img src="assets/img/instagram.png" sizes="50%"><!-- Make sure to change the email address in BOTH the anchor text and the link target below!--><a class="d-block" href="https://www.instagram.com/juanomatheus">フひム刀 ᄊムイん乇ひ丂 イム刀</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Footer-->
        <footer class="bg-light py-5">
            <div class="container"><div class="small text-center text-muted">Copyright © 2020 - <a href="https://omjuan.com">OMJUAN.COM</a></div></div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <!-- Third party plugin JS-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
        <script>
            $(document).ready(function(){var t=new Date;$("#date").html(t.getDate()+"/"+(t.getMonth()+1)+"/"+t.getFullYear()),$.ajax({url:"https://api.kawalcorona.com/indonesia/",success:function(t){$("#terjangkit").html(t[0].positif),$("#sembuh").html(t[0].sembuh),$("#meninggal").html(t[0].meninggal)}})});
        </script>
        <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
        <script type="text/javascript">
            particlesJS.load('particles-js','json/particles.json', function() {
                console.log('json/particles.json loaded...');
            })
        </script>
    </body>
    </html>


Pada codingan PHP yang saya taruh di atas HTML tersebut itu untuk mengambil data yang telah disediakan oleh website penyedia info covid-19 secara update setiap hari. Dengan kita menggunakan API KEY yang telah disediakan oleh website tersebut makan kita tidak perlu menganti jumlah pasien yang positif, sembuh, dan meninggal secara manual. Melainkan semua data tersebut akan terganti dengan otomatis. Siapa yang menganti data-data tersebut? semua data tersebut diganti oleh penyedia API KEY COVID-19 tersebut. Silahkan temna-teman lihat Script phpnya dibawah ini:
&lt;?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL =&gt; &quot;https://api.kawalcorona.com/indonesia/provinsi/&quot;,
CURLOPT_RETURNTRANSFER =&gt; true,
CURLOPT_FOLLOWLOCATION =&gt; true,
CURLOPT_ENCODING =&gt; &quot;&quot;,
CURLOPT_MAXREDIRS =&gt; 10,
CURLOPT_TIMEOUT =&gt; 30,
CURLOPT_HTTP_VERSION =&gt; CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST =&gt; &quot;GET&quot;,
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

$data = json_decode($response, true);

?&gt;
Tidak hanya php saja yang saya gunakan dalam membuat web info COVID-19 ini. Saya juga menggunakan bahasa pemrograman JavaScript. Saya menggunakan JavaScript untuk mengambil data juga dari API KEY yang telah disediakan. Silahkan temna-teman lihat Script phpnya dibawah ini :
<script>
            $(document).ready(function(){var t=new Date;$("#date").html(t.getDate()+"/"+(t.getMonth()+1)+"/"+t.getFullYear()),$.ajax({url:"https://api.kawalcorona.com/indonesia/",success:function(t){$("#terjangkit").html(t[0].positif),$("#sembuh").html(t[0].sembuh),$("#meninggal").html(t[0].meninggal)}})});
        </script>
Jika teman-teman ingin untuk mendownload file lengkapnya silahkan teman-teman hubungi saya di kontak yang telah saya sediakan di About Us atau Contact Us saya akan kirimkan file .zip..rar lengkapnya secara gratis.

Demikian artikel yang telah saya buat tentang Cara buat web info covid-19 dengan php dan JavaScipt. Semoga artikel ini dapat bermanfaat untuk teman-teman semua. 

0 Comments

Post a Comment

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih