Skip to main content

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


 
Labels:

Comments

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

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()...
22 comments
Read more

Cara Sederhana Multi Insert Data Dengan PHP - MySQL

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

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...
14 comments
Read more