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
Comments
Post a Comment