JAVASCRIPT
Pada artikel ini saya akan membuat program sederhana menggunakan fetch pada javascript. sedikit ilmu pengetahuan soal fetch, fetch ini bagi saya merupakan fitur javascript ketika kamu berurusan dengan API. jadi bagi saya menggunakan fetch itu mudah, memahami sebuah fetch pada javascript kamu harus mempunyai dasar dasar seperti promise pada javascript begitu juga kaitannya nanti dengan pending, fullfilled, rejected.
Pengetahuan dasar soal API (Application Programming Interface) juga penting, dengan menggunakan API kamu akan menjadi mudah dalam membangun sebuah aplikasi dengan API kita bisa menggabungkan satu aplikasi dengan aplikasi lain atau satu teknologi dengan teknologi lain. sebagai contoh ketika kamu menggunakan bahasa pemrograman PHP lalu kamu ingin menghubungkan database management system MYSQL itu pun ikut nya konsep API.
Di sini saya akan menggunakan API pengguna github seperti biasa kamu buat file dengan nama index.html program yang saya buat ketika saya memasukkan nama pengguna github lalu menekan tombol maka akan muncul data data pengguna github orang lain.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Github Users</title>
</head>
<body>
<br>
<br>
<!--Buat sebuah form-->
<form action="" method="post">
<!-- Buat sebuah kolom inputan ber tipe text-->
<div class="container">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</div>
<!-- Buat spasi-->
<br>
<!-- Buat sebuah tombol bertipe button-->
<center><button type="button" class="btn btn-primary">Tekan!</button></center>
</form>
<!-- Tampilkan data pengguna github-->
<br>
<br>
<br>
<h1>ID pengguna : <span id="id_pengguna"></span></h1>
<h1>Nama pengguna : <span id="nama_pengguna"></span></h1>
<h1>Bio pengguna : <span id="bio_pengguna"></span></h1>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Setelah itu kamu buat file javascript dengan nama script.js
//buat variabel
let id_pengguna = document.getElementById('id_pengguna');
let nama_pengguna = document.getElementById('nama_pengguna');
let bio_pengguna = document.getElementById('bio_pengguna');
let btn = document.querySelector('.btn');
let inputText = document.getElementsByTagName('input')[0];
//ketika tombol di klik
btn.addEventListener('click', function(){
//buat sebuah fetch
//dan ketika apapun yang di ketikan oleh saya
fetch('https://api.github.com/users/' + inputText.value)
//ambil data JSON pada API
.then(res => res.json())
//tangkap data API
.then(data=>{
//dan tampilkan
id_pengguna.innerHTML = `<span>${data.id}</span>`;
nama_pengguna.innerHTML = `<span>${data.name}</span>`;
bio_pengguna.innerHTML = `<span>${data.bio}</span>`;
});
});Program yang saya buat bisa di liat di sini. kamu bisa memasukkan nama pengguna github saya dulu bernama galihap76 hanya sebagai contoh, semoga bermanfaat :D
0 Komentar