Skip to main content

Menggunakan OMDB API Dengan HTML & JavaScript

Selamat malam coders...

pada postingan kali ini saya akan sharing cara menggunakan OMDb API, OMDb API merupakan API penyedia data-data film dari seluruh dunia, agar bisa menggunakan API dari OMDb ini kita harus generate API key terlebih dahulu di websitenya http://www.omdbapi.com/ setelah membuka websitenya pilih menu API Key dan pilih yang Free kemudian isikan email, nama dan untuk bagian Use isi saja dengan Education setelah itu klik submit maka teman-teman akan mendapatkan email dari OMDb nya berupa API key yang akan teman-teman gunakan untuk mengkses API-nya dan jangan lupa klik link activate yang di email dan API OMDb sudah siap kita akses.




selanjutnya kita buat folder baru dengan nama movie dan penyimpanan foldernya terserah teman-teman mau simpan di drive mana saja boleh, lalu didalam folder movie tambah folder assets dan didalam folder assets simpan file css dan js dari bootstrap karena kita akan menggunakan bootstrap untuk layout-nya.

tambah file dengan nama index.html di folder movie dan source codenya sperti berikut :


<!DOCTYPE html>
<html>
<head>
    <title>Rest API</title>
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="">Movie Zone</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="search-text" class="form-control" placeholder="Input Movie Title" aria-label="Recipient's username" 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" id="movie-list">        

    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Movie Details</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </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="assets/js/bootstrap.js"></script>
  <script src="assets/js/script.js"></script>
</body>
</html>


lalu didalam folder assets/js tambah file javascript baru dengan nama script.js


$('#search-text').on('keyup', function(e){
    if(e.keyCode == 13)
    { 
        searchMovies();
    }
})

$('#btn-search').on('click', function(e){
    searchMovies();
})

$('#movie-list').on('click', '#btn-details', function(e){
    $.ajax({
        url:'http://www.omdbapi.com',
        type:'GET',
        dataType:'json',
        data:{
            'apikey' : 'ec38fba9', //API Key
            'i' : $(this).data('id') //Parameter i untuk pencarian film berdasarkan id film  / omdbID
        },
        success: function(result){
            if(result.Response === "True"){
                $('.modal-body').html('');
                $('.modal-body').append(`
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-4">
                                <img src="` + result.Poster + `" class="img-fluid">
                            </div>
                            <div class="col-md-8">
                                <ul class="list-group">
                                  <li class="list-group-item"><h4>`+ result.Title +`</h4></li>
                                  <li class="list-group-item">Released : `+ result.Released +`</li>
                                  <li class="list-group-item">Genre : `+ result.Genre +`</li>
                                  <li class="list-group-item">Writer : `+ result.Writer +`</li>
                                  <li class="list-group-item">Actors : `+ result.Actors +`</li>
                                  <li class="list-group-item">Production : `+ result.Production +`</li>
                                  <li class="list-group-item">Plot : `+ result.Plot +`</li>
                                </ul>
                            </div>
                        </div>
                    </div>    
                `);
            }
        }
    });
})


function searchMovies(){
    $.ajax({
        url:'http://www.omdbapi.com',
        type:'GET',
        dataType:'json',
        data:{
            'apikey' : 'ec38fba9', //API Key
            's' : $('#search-text').val() //Parameter s pencarian film berdasarkan judul
        },
        success: function(result){
            let movies = result.Search;
            $('#movie-list').html('');
            if(result.Response == "True"){
                $.each(movies, function(i, data){
                    $('#movie-list').append(`<div class="col-md-4 mb-3">
                        <div class="card" style="width: 18rem;">
                        <img src="`+ data.Poster +`" class="card-img-top" height="300px">
                        <div class="card-body"><h5 class="card-title">`+ data.Title +`</h5>
                        <p class="card-text">Year : `+ data.Year +`</p>
                        <a href="#" class="btn btn-primary" id="btn-details" data-id="`+ data.imdbID +`" 
                        data-toggle="modal" data-target="#exampleModal">Show Details</a>
                        </div></div></div>
                    `);
                })
            }else{
                $('#movie-list').append(`
                    <div class="col-sm-12 text-center">
                        <h1>`+ result.Error +`</h1>
                    </div>
                `);
            }
        }
    });

    $('#search-text').val("");
}


untuk melihat parameter-parameter yang disediakan oleh OMDb API-nya bisa teman-teman lihat di menu Usage di website-nya.






jika sudah coba jalankan di browser dan lihat hasilnya :





untuk detailnya seperti berikut :



semoga bermanfaat sharing kali ini :D



Comments

  1. rds9 June 2020 at 18:09

    Saya sudah copy-paste sesuai dengan yang dimaksud hanya ganti API key tapi kok gak keluar hasil search-nya ya?

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Create a REST API in SAP ABAP — Step-by-step Guide

How to Create a REST API in SAP ABAP — Step-by-step Guide Summary: This tutorial shows how to build a REST API in SAP ABAP by creating a handler class, configuring SICF service, registering endpoints with cl_rest_router , implementing endpoint logic (example GET method), and testing the API. Based on an internal implementation reference. Why expose REST APIs from SAP? REST APIs allow SAP systems to integrate with web, mobile, and external services using standard HTTP and JSON payloads. Implementing REST endpoints in ABAP provides secure, reusable, and maintainable integration points for modern applications. Prerequisites Access to an SAP system with authorization to create classes (SE24) and SICF services (SICF). Familiarity with ABAP object-oriented concepts and basic SAP transaction codes. ABAP classes CL_REST_RESOURCE , CL_REST_ROUTER and utilities like /UI2/CL_JSON . High-level overview (4 steps) Create an API handler class (e.g. ZCL_API_HANDLER ). R...
Post a Comment
Read more

SAP ABAP - User Exit Set Batch Characteristic Value In MIGO Goods Receipt

Customer Exit  :  MBCFC004 ( EXIT_SAPMM07M_004) Set Up Customer Exit for Classification of User-Defined Characteristics You use SAP enhancement MBCFC004 EXIT_SAPMM07M_004, which contains function module exit EXIT_SAPMM07M_004 to classify user-defined characteristics automatically during goods movements in Inventory Management. This is only possible for characteristics which are not assigned values during quality inspection. Requirements 1. The class of the batch to be classified must be known.  This means that a class must be assigned either to the material or at least to one batch of this material. 2. The exit call must be activated for the respective movement type in activity Activate batch classification during goods movements in IM using indicator 'Extended classification' . Open tcode OMC...
Post a Comment
Read more

IT Asset Management Dengan PHP MySQL

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...
55 comments
Read more