Menggunakan Wikipedia API Dengan P5 JS dan Bootstrap

-
Pada postingan kali ini saya akan sharing menggunakan API wikipedia dengan P5.JS dan Bootstrap.

pertama-tama kita buat folder dengan nama wiki-api dan didalamnya buat file index.html seperti berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Wikipedia API</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="p5.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <script src="script.js"></script>
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="">Wikipedia - API</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  

  <div class="container mt-3">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="input-group mb-3">
          <input type="text" id="userinput" class="form-control" placeholder="Search..." aria-describedby="button-addon2">
          <div class="input-group-append">
            <button class="btn btn-primary ml-2" type="button" id="btn-search">Search <i class="fa fa-search"></i></button>
          </div>
        </div> 
      </div>
    </div>
    <hr>

    <div class="row"> 
      <h2 id="wiki-header"></h2>
      <ul class="list-group" style="width: 100%;" id="wiki-list">
        
      </ul>       

    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</body>
</html>


untuk P5.JS bisa di download DISINI setelah itu buat file script.js dan tuliskan source code seperti berikut :

let userInput;
let searchUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=";
// let contentUrl = 'https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=';
// let counter = 0;

function setup() {
  noCanvas();
  userInput = select('#userinput');
  userInput.changed(startSearch);

  function startSearch(){
    counter = 0;
    goWiki(userInput.value());
  }

  function goWiki(term){
      let url  = searchUrl + term;
      loadJSON(url, gotData, 'jsonp');
  }

  function gotData(ouput){
    console.log(ouput[3][1]);

    let results = ouput[1];

    if (results.length > 0){
      $('#wiki-list').html('');
      $('#wiki-header').html('');
      
      $('#wiki-header').append(userInput.value() + " results");

      $.each(results, function(i, data){
        $('#wiki-list').append(`
            <li class="list-group-item d-flex justify-content-between align-items-center form-control">
            `+ data +`
              <a href="`+ ouput[3][i] +`" target="_blank">
                <span class="badge badge-primary badge-pill">Lihat Detail</span>
              </a>
            </li> 
        `);
      })
    }else{
      $('#wiki-header').append("No results found for " + userInput.value());
    }
    userInput.value("");
  }
}


Jika sudah coba di jalankan, maka hasilnya akan seperti berikut :
jika kita langsung mengakses url API-nya tampilannya seperti berikut :




sekian postingan kali ini semoga bermanfaat :D


Comments

Post a Comment

Popular posts from this blog

IT Asset Management Dengan PHP MySQL

-
Image
Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih menu tra
Read more

PHP MySql CRUD Dengan Konsep MVC

-
Image
Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()
Read more

Cara Sederhana Multi Insert Data Dengan PHP - MySQL

-
Image
Pada postingan kali ini saya akan share cara melakukan insert lebih dari satu data dengan menggunaka PHP- Jquery dan MySQL. Pertama buat database di MySQL dan table, disini saya membuat database dengan nama db_latihan dan table dengan nama t_barang dengan struktur table seperti berikut : Setelah membuat database dan table selanjutnya membuat project PHP, project PHP nya saya buat dengan nama multi-insert, lalu didalam folder ini saya membuat dua file yaitu index.php dan insert.php . Source code index.php seperti berikut : <! 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.1/dist/css/bootstrap.min.css"   rel = "stylesheet"   integrity =
Read more