All About Programming: JSON

Tuesday, 22 January 2019

Mengakses data JSON Menggunakan Javascript

pada posting Sebelumnya saya sudah sharing cara mengakses JSON dengan php kali ini saya akan sharing cara mengakses JSON menggunakan javascript, untuk projectnya kita menggunakan project yang sama, kita cuma menambahkan file baru yaitu produk.html

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <title>Javascript - JSON</title>
  <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.2.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">


</head>
<body class="container">
  <h1>Daftar Produk</h1><hr>

  <div class="row">
    <div class="input-group mb-3">
      <input type="text" id="produkname" class="form-control" placeholder="Cari Produk">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="btn-refresh">Refresh <i class="fa fa-refresh"></i></button>
      </div>
    </div> 
  </div>

  <div class="row" id="daftar-produk">        

  </div>

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

  <script src="script.js"></script>
</body>
</html>

dan kita tambahkan javascript seperit dibawah ini dengan nama script.js

this.getAllProduk();

$('#produkname').on('keyup', function(e){
    if(e.keyCode == 13)
    {        
        let namaproduk = $('#produkname').val(); 
        $.getJSON('data.json', function(data){
            let produk = data.produk;
            let content = '';

            $('#daftar-produk').html(content);

            $.each(produk, function(i, data){                
                var S = data.namaproduk.toLowerCase();
                if(S.includes(namaproduk.toLowerCase())){
                    $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> ');
                }
            });
        });
        $('#produkname').val("");
    }
})


$('#btn-refresh').on('click', function(){
    getAllProduk();
});

function getAllProduk(){
    $('#daftar-produk').html('');
    $.getJSON('data.json', function(data){
        let produk = data.produk;

        $.each(produk, function(i, data){
            $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> ');
        })
    });
}

dan silahkan di coba dan lihat hasilnya :D, semoga bermanfaat

Monday, 21 January 2019

Menampilkan JSON Dengan PHP

Selamat malam teman-teman...

Pada postingan kali ini saya akan sharing cara menampilkan data JSON dengan PHP, pertama kita buat folder baru di xampp htdocs dengan nama php-json lalu kita tambahkan folder img untuk gambar-gambar yang saya gunakan bisa di download DISINI lalu kita tambahkan file json didalam folder php-json dengan nama data.json

Berikut struktur data json yang akan kita gunakan :

{
    "produk":
    [
        {
            "kodeproduk" : "PRD001",
            "namaproduk" : "Kopi Susu Moca",
            "harga"         : 1500,
            "gambar"     : "kopiabcmoca.jpg"
        },
        {
            "kodeproduk" : "PRD002",
            "namaproduk" : "Indomie",
            "harga"         : 2500,
            "gambar"     : "indomie.jpg"
        },
        {
            "kodeproduk" : "PRD003",
            "namaproduk" : "Sari Roti",
            "harga"         : 3000,
            "gambar"     : "sariroti.jpg"
        },
        {
            "kodeproduk" : "PRD004",
            "namaproduk" : "Aqua 600 ml",
            "harga"         : 3500,
            "gambar"     : "aqua600ml.jpg"
        },
        {
            "kodeproduk" : "PRD005",
            "namaproduk" : "Teh Sariwangi",
            "harga"         : 12000,
            "gambar"     : "sariwangi.jpg"
        },
        {
            "kodeproduk" : "PRD006",
            "namaproduk" : "Tango",
            "harga"         : 5000,
            "gambar"     : "tango.jpg"
        },
        {
            "kodeproduk" : "PRD007",
            "namaproduk" : "Ice Cream Walls",
            "harga"         : 9000,
            "gambar"     : "icecream.jpg"
        },
        {
            "kodeproduk" : "PRD008",
            "namaproduk" : "Buavita",
            "harga"         : 7500,
            "gambar"     : "buavita.jpg"
        },
        {
            "kodeproduk" : "PRD009",
            "namaproduk" : "Mie Kremez Enak",
            "harga"         : 2500,
            "gambar"     : "miekremes.jpg"
        }
    ]
}

kemudian kita tambahkan file index.php seperti berikut :

index.php

<?php
  $data   = file_get_contents('data.json');
  $produk = json_decode($data, true);

  $produk = $produk["produk"];   
?>

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <title>PHP - JSON</title>
    <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.2.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">    
  </head>
  <body class="container">
    <h1>Daftar Produk</h1><hr>
      <div class="row"> 
        <?php foreach ($produk as $prd) : ?> 
          <div class="col-md-4 mb-3">
              <div class="card" style="width: 18rem;">
                <img src="img/<?= $prd['gambar']; ?>" class="card-img-top">
              <div class="card-body">
                <h5 class="card-title"><?= $prd['namaproduk']; ?></h5>
                <p class="card-text">Harga Rp. <?= $prd['harga']; ?></p>
                <a href="#" class="btn btn-primary">Beli</a>
              </div>
            </div>
          </div>
        <?php endforeach; ?>           
      </div>
    
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  </body>
</html>

dan hasilnya seperti berikut :

Sekian sharing kali ini semoga bermanfaat :D

Tuesday, 22 January 2019

Mengakses data JSON Menggunakan Javascript

Monday, 21 January 2019

Menampilkan JSON Dengan PHP

ABAP CDS View Part 10 : Authorization & DCL untuk ABAP CDS