PrakSister Tugas2

Nama : Anggi Jihan Putri Rumadhan
Nim : 16650004
Kelas : Praktikum Sistem Terdistribusi ( E )
TUGAS 2
Class json
{
"menu": [
{
"kategori": "pizza",
"nama": "Meat Lover",
"deskripsi": "Irisan sosis sapi, daging
sapi cincang, burger sapi, sosis ayam.",
"harga": 49500,
"gambar": "meat-lover.jpg"
},
{
"nama": "Super Supreme",
"deskripsi": "Daging ayam dan sapi asap,
daging sapi cincang, burger sapi, jamur, paprika merah
dan paprika hijau.",
"harga": 49500,
"gambar": "supreme.jpg"
},
{
"nama": "Tuna Melt",
"deskripsi": "Irisan daging ikan tuna,
butiran jagung, saus mayonnaise.",
"harga": 49500,
"gambar": "tuna-melt.jpg"
},
{
"nama": "American Favourite",
"deskripsi": "Pepperoni sapi, daging sapi
cincang, jamur.",
"harga": 49500,
"gambar": "american-favourite.jpg"
},
{
"kategori": "pasta",
"nama": "Beef Spaghetti",
"deskripsi": "Pepperoni sapi, daging sapi
cincang, jamur.",
"harga": 43000,
"gambar": "beef-spaghetti.jpg"
},
{
"nama": "Beef Lasagna",
"deskripsi": "Dipanggang, daging sapi
cincang. krim putih lembut di tiap lapisan.",
"harga": 48000,
"gambar": "beef-lasagna.jpg"
},
{
"nama": "Creamy Beef Fettuccine",
"deskripsi": "Daging sapi asap dan jamur,
ditumis dengan saus krim lembut.",
"harga": 43000,
"gambar": "creamy-beef-fettuccine.jpg"
},
{
"kategori": "nasi",
"nama": "Meatballs Beef Mushroom",
"deskripsi": "Bola daging sapi dengan saus
daging sapi cincang dan jamur.",
"harga": 40000,
"gambar": "meatballs-beef-mushroom.jpg"
},
{
"kategori": "nasi",
"nama": "Black Pepper Chicken",
"deskripsi": "Ayam dengan saus lada
hitam.",
"harga": 40000,
"gambar": "black-pepper-chicken.jpg"
},
{
"kategori": "nasi",
"nama": "Oriental Chicken",
"deskripsi": "Daging ayam berpadu dengan
saus oriental.",
"harga": 40000,
"gambar": "oriental-chicken.jpg"
},
{
"kategori": "minuman",
"nama": "Choco Mint",
"deskripsi": "",
"harga": 24000,
"gambar": "choco-mint.jpg"
},
{
"nama": "Toffee Coffee",
"deskripsi": "",
"harga": 24000,
"gambar": "toffee-coffee.jpg"
},
{
"nama": "Green Tea Shake",
"deskripsi": "",
"harga": 24000,
"gambar": "green-tea-shake.jpg"
},
{
"nama": "Strawberry Milkshake",
"deskripsi": "",
"harga": 24000,
"gambar": "strawberry-milkshake.jpg"
},
{
"nama": "Chocolate Milkshake",
"deskripsi": "",
"harga": 24000,
"gambar": "chocolate-milkshake.jpg"
}
]
}
Class script.js
function tampilkanSemuaMenu(){
$.getJSON('data/pizza.json', function (data) {
let menu = data.menu;
$.each(menu, function (i, data) {
$('#daftar-menu').append(' <div class="col-md-4"><div
class="card mb-3"><img src="img/menu/'+ data.gambar +'"
class="card-img-top"><div class="card-body"><h5
class="card-title">'+ data.nama +'</h5><p class="card-
text">'+ data.deskripsi +'</p><h5 class="card-
title">Rp. '+ data.harga +'</h5><a href="#" class="btn
btn-primary">Pesan Sekarang</a></div></div></div>');
});
});
}
tampilkanSemuaMenu();
$('.nav-link').on('click', function () {
$('.nav-link').removeClass('active');
$(this).addClass('active');
let kategori = $(this).html();
$('h1').html(kategori);
if(kategori == 'All Menu') {
$('#daftar-menu').html('');
tampilkanSemuaMenu();
return;
}
$.getJSON('data/pizza.json', function(data) {
let menu = data.menu;
let content = '';
$.each(menu, function (i, data) {
if(data.kategori == kategori.toLowerCase()) {
content += '<div class="col-md-4"><div class="card mb-
3"><img src="img/menu/'+ data.gambar +'" class="card-
img-top"><div class="card-body"><h5 class="card-
title">'+ data.nama +'</h5><p class="card-text">'+
data.deskripsi +'</p><h5 class="card-title">Rp. '+
data.harga +'</h5><a href="#" class="btn btn-
primary">Pesan Sekarang</a></div></div></div>';
}
});
});
$('#daftar-menu').html(content);
});
Class Makanan.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.
2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDG
MN5t9UJ0Z" crossorigin="anonymous">
<title>WPU HUT</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-
dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo.png" width="120"></a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navbarNavAltMarkup"><div class="navbar-nav">
<a class="nav-item nav-link active" href="#">All
Menu</a>
<a class="nav-item nav-link active" href="#">Pizza</a>
<a class="nav-item nav-link active" href="#">Pasta</a>
<a class="nav-item nav-link active" href="#">Nasi</a>
</div></div>
</div>
</nav>
<div class="container">
<div class="row mt-3" >
<div class="column">
<h1>All Menu</h1>
</div>
</div>
<div class="row" id="daftar-menu">
</div>
</div>

<!-- jQuery first, then Popper.js, then Bootstrap JS --
>
<script src="https://code.jquery.com/jquery-
3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist
/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7ni
u735Sk7lN" crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2
/js/bootstrap.min.js" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfY
iJOMMV+rV" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>

PrakSister Tugas2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

PrakSister Tugas2

Diunggah oleh

Hak Cipta:

Format Tersedia

Nama : Anggi Jihan Putri Rumadhan

Anda mungkin juga menyukai