Assalamualaikum Warohmatullahi
Wabarokatuh J
Haloo halooo…
Sahabat informatikaJ J di seluruh Indonesia, semoga sehat selalu yahJ .
Nah pada artikel kali ini aku bakal jelasin tentang “Implementasi
3 Tier”. Untuk studi kasus yang akan di gunakan yaitu penyebaran COVID-19. Kita akan diminta untuk menampilkan data
orang yang positif covid, meninggal dan juga sembuh, menggunakan JSON dan link
api.
Sebelum lanjut , yuk pahamin dulu
konsep 3 tier berikut
Konsep pemrogramman
three tier (3 tier) atau yang biasa disebut dengan
konsep client server programming merupakan konsep
pemrograman yang terdiri dari 3 komponen logic layer yang saling berkaitan.
Berikut gambaran secara umum untuk arsitektur pemrogramman model three-tier
memiliki 3 fungsionalitas sistem yang independent, yaitu
1. Komponen klien (Client application) yaitu
komponen yang berjalan diatas local komputer user / client. (tier 1) Pada layer
ini , akses tidak bisa sampai pada RDBMS layer jika tidak ada koneksi ke
aplikasi server (layer 2 / tier 2) .
2. Aplikasi server (Aplication server) yaitu
komponen yang berjalan pada remote server yang berfungsi sebagai koneksi antara
klien dengan database system. (Tier 2). Pada layer ini , merupakan layer yang
menghubungkan antara layer client (tier 1) dengan layer RDBMS Application (tier
3). layer ini berisi package, objek, method, fungsi dan segala aktifitas query
yang akan dijalankan pada layer 3 / tier 3 (RDBMS Application).
3. Aplikasi RDBMS (RDBMS Application) yaitu
kumpulan database , data resource manager dan aplikasi mainframe (Tier 3). Pada
layer ini, berisi kumpulan database dan data resource manager yang merupakan
pusat database suatu sistem. Layer 3 / tier 3 atau aplikasi RDBMS , tidak bisa
diakses secara langsung melalui layer 1 / tier 1 atau aplikasi klien. jika
aplikasi klien tidak terkoneksi ke layer 2 / tier 2 atau aplikasi server .
Kalau sudah dipahami , lets go ke PEMBAHASAN. OKEY…J
-
Siapkan
text editor (sublime text)
-
XAMPP
-
Browser
dan koneksi internet
Kebutuhan Web API
-
Jumlah Kasus Konfirmasi Hari
ini
-
Jumlah yang meninggal tahun
ini
-
Jumlah yang sembuh hingga
saat ini
-
Jumlah Kasus positif, sembuh
dan meninggal sejak 2 Maret 2020
“LANGKAH-LANGKAH
IMPLEMENTASI 3 TIER MENGGUNAKAN JSON”
1) Pertama, kita buka XAMPP
terlebih dahulu, XAMPP nantinya berfungsi sebagai web server. Maka dari itu aktifkan bagian apache saja
untuk kasus ini
2)
Buatlah folder covid pada htdocs yang ada di
XAMPP seperti berikut
3)
Lalu kita buka di text
editor folder yang sudah kita buat sebelumnya. Disini aku menggunakan sublime text sebagai text editor.
4)
Kemudian kita akan
memasukkan folder gambar ke dalam folder covid, dengan nama img
5)
Lalu buat file index.php sebagai tempat code
script nya
6. Selanjutnya kita akan menggunakan bootstrap4. Bisa di ambil
melalui link berikut :
https://getbootstrap.com/docs/4.5/getting-started/introduction/.
7. Kita juga menggunakan Jumbotron yang berguna sebagai
tampilan webnya
Fluid
Jumbotron
https://getbootstrap.com/docs/4.5/components/jumbotron/
8. Kemudian buka file index.php, lalu ketikkan coding berikut
Supaya lebih jelas, teman-teman bisa melihat coding gambar diatas, di bawah ini
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Tracking Penyebaran Covid-19</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid bg-dark text-white">
<div class="container text-center">
<h1 class="display-4">VIRUS CORONA</h1>
<p class="lead">
<h2>
DATA PENYEBARAN COVID-19 DI DUNIA DAN INDONESIA
<br> SECARA REAL DAN AKURAT
<br> AYO UTAMAKAN KEBERSIHAN DAN JAGA KESEHATAN TUBUH KITA
</h2>
</div>
</div>
9. Hasil coding nya
seperti berikut ini :
10. Untuk menampilkan
data global orang yang positif covid, meninggal,sembuh gunakan coding berikut:
Dibawah ini coding yang lebih terlihat
<style type="text/css">
.box{
padding: 30px 40px;
border-radius: 50px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bg-secondary box text-white">
<div class="row">
<div class="col-md-6">
<h5>Positif</h5>
<h2 id="data-kasus"> 1234</h2>
<h5>Orang</h5>
</div>
<div class="col-md-4">
<img src="img/sad.svg" style="width:100px" >
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-dark box text-white">
<div class="row">
<div class="col-md-6">
<h5>Meninggal</h5>
<h2 id="data-mati"> 1234</h2>
<h5>Orang</h5>
</div>
<div class="col-md-4">
<img src="img/cry.svg" style="width:100px" >
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg-info box text-white">
<div class="row">
<div class="col-md-6">
<h5>Sembuh</h5>
<h2 id="data-sembuh"> 1234</h2>
<h5>Orang</h5>
</div>
<div class="col-md-4">
<img src="img/happy.svg" style="width:100px" >
</div>
</div>
</div>
</div>
11. Hasil nya
akan menjadi seperti ini
Note : gambar bisa menyesuaikan , simpan dengan format .svg
12) Berlanjut ke coding yang berikut nya, untuk menampilkan data positif, meninggal dan
sembuh di Indonesia
Coding yang lebih terlihat
<div class="col-md-12 mt-3">
<div class="bg-info box text-white">
<div class="row">
<div class="col-md-3">
<h2>INDONESIA</h2>
<h5 id="data-id"> positif : 12 orang <br> meninggal : 20 orang <br> sembuh : 3 orang</h5>
</div>
<div class="col-md-4">
<img src="img/indonesia.svg" style="width:150px" >
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-dark text-center text-white mt-3 bt-2 pb-2" >
Create By Lusi santika
</footer>
Hasilnya seperti ini
Gunakan coding berikut
Coding yang lebih terlihat di bawah ini
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
</body>
</html>
<script>
$(document).ready(function() {
// panggil fungsi menampilkan data global
semuaData();
dataNegara();
setInterval(function(){
semuaData();
dataNegara()
}, 3000);
function semuaData(){
$.ajax({
url : 'https://coronavirus-19-api.herokuapp.com/all',
success : function(data){
try{
var json = data;
var kasus = data.cases;
var Meninggal = data.deaths;
var Sembuh = data.recovered;
$('#data-kasus').html(kasus);
$('#data-mati').html(Meninggal);
$('#data-sembuh').html(Sembuh);
}catch{
alert('Errorr');
}
}
});
}
14. Ambil data di link https://coronavirus-19-api.herokuapp.com/countries. Lalu cari negara
Indonesia
Lalu ketikkan coding berikut
Coding yang lebih terlihat
function dataNegara(){
$.ajax({
url : 'https://coronavirus-19-api.herokuapp.com/countries',
success : function(data){
try{
var json = data;
var html = [];
if(json.length > 0){
var i;
for (i = 0; i <json.length; i++){
var dataNegara = json[i];
var namaNegara = dataNegara.country;
if(namaNegara === 'Indonesia'){
var kasus = dataNegara.cases;
var mati = dataNegara.deaths;
var sembuh = dataNegara.recovered;
$("#data-id").html('positif : '+kasus+' orang <br> meninggal : '+mati+' orang <br> sembuh : '+sembuh+' orang')
}
}
}
}catch{
alert('Errorr');
}
}
});
}
});
</script>
15.Terakhir coding untuk
membuat Footernya seperti berikut : 
Hasilnya seperti berikut :
16) Setelah semua
coding selesai dan di simpan maka
tampilan full akan menjadi seperti ini
NAH
SELESAI DEH PROJECT KITA ……
CARA-CARA
NYA BISA DI IKUTI DENGAN MUDAH KAN GUYSS :D.
SEMANGAT
DAN SELAMAT MENCOBA :D J
Wassalamualaikum
Warohmatullahi Wabarokatuh
Komentar
Posting Komentar