REST API #4 BEKERJA DENGAN JSON
Setelah sebelumnya kita belajar mengenai JSON, kali ini kita akan mencoba membuat website sederhana untuk menampilkan data dari file JSON yang kita buat
—
Download File JSON & IMG :
https://www.dropbox.com/sh/vp5uovvzw5jansu/AABuvfxMA8GKLu-PX6k5sa7Ga?dl=0
—
VIDEO SEBELUMNYA
https://youtu.be/EluVFXu4GOU
—
Apa yang harus dipelajari sebelum ini :
– Javascript Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIWXagluzROrA-iBY9eeUt4w
– Javascript & DOM
https://www.youtube.com/playlist?list=PLFIM0718LjIWB3YRoQbQh82ZewAGtE2-3
– PHP DASAR
https://www.youtube.com/playlist?list=PLFIM0718LjIUqXfmEIBE3-uzERZPh3vp6
– OOPHP
https://www.youtube.com/playlist?list=PLFIM0718LjIWvxxll-6wLXrC_16h_Bl_p
– PHP MVC
https://www.youtube.com/playlist?list=PLFIM0718LjIVEh_d-h5wAjsdv2W4SAtkx
– CodeIgniter
https://www.youtube.com/watch?v=dMRCZGGAx74&list=PLFIM0718LjIVpXbAwu_Cg9PdJO1GvyvCn&index=10
https://www.youtube.com/watch?v=g5JT3EW38KM&list=PLFIM0718LjIVpXbAwu_Cg9PdJO1GvyvCn&index=11
https://www.youtube.com/watch?v=r-r6IhsE5vg&list=PLFIM0718LjIVpXbAwu_Cg9PdJO1GvyvCn&index=12
—
PLAYLIST LAIN:
– HTML Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIVuONHysfOK0ZtiqUWvrx4F
– CSS Dasar
https://www.youtube.com/playlist?list=PLFIM0718LjIUBrbm6Gdh6k7ZUvPIAZm7p
– Tutorial Sublime Text
https://www.youtube.com/playlist?list=PLFIM0718LjIWE-Ot9V9qcALx5OMAZY67c
– CSS Layouting
https://www.youtube.com/playlist?list=PLFIM0718LjIUu4Ju9GUL5zpLcuq08TKYr
—
MEDIA SOSIAL
– http://instagram.com/sandhikagalih
– http://twitter.com/sandhikagalih
– https://www.facebook.com/WebProgrammingUNPAS
– http://codepen.io/webprogrammingunpas
– https://github.com/webprogrammingunpas
—
UNIVERSITAS PASUNDAN BANDUNG
http://www.unpas.ac.id/
http://www.if.unpas.ac.id/
terimakasih dan selamat #ngoding!
@sandhikagalih
REST API #4 BEKERJA DENGAN JSON
REST API #4 BEKERJA DENGAN JSON
izin nambahin pak,
– sejak adanya ES6, append string html bisa pakai " ` " daripada " ' " karena bisa memasukkan string yg sama hanya menggunakan sintaks ${data} dan juga bisa mengabaikan enter, tapi beberapa browser lama ada yg gak support
– pada fungsi tampilkansemuamenu kurang script untuk menghapus data yg sudah ada sebelumnya, mungkin bisa ditambahkan $('#daftar-menu').empty(); tepat sebelum baris $.each di dalam fungsi tampilkansemuamenu
#janganlupatitikkoma
kalo alamat gambar nya udah sesui udah ikutin video dari awal
Maaf pak. saya ada kendala. sewaktu saya menampilkan di chrome untuk all menunya sudah tampil menunya. tiba2 beralih ke menu lain seperti pizza pasta dan minuman tidak muncul menunya padahal sudah masuk ke codingan script nya menggunakan if pada JSON. localhostnya juga sudah aktif. mohon sekali pak dengan jawabannya. codingan saya diabawah pak.
function tampilkanSemuaMenu() {
$.getJSON('data/pizzahut.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/pizza/'+ 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>Rp. '+ data.harga +'</h5><a href="#" class="btn btn-primary">Pesan Sekarang</a></div></div></div></div>');
});
});
}
tampilkanSemuaMenu();
$('.nav-link').on('click', function() {
$('.nav-link').removeClass('active'); // Jquery ambil class yang namanya nav-link kemudian lakukan fungsi hapus pada class active
$(this).addClass('active'); // Jquery ketika di klick tambahkan class active
let kategori = $(this).html(); // Buat variabel baru namanya kategori mengambil nama html
$('h1').html(kategori); // Gantikan isi dari tag h1 menjadi sama di kategori
if(kategori =='All Menu'){
tampilkanSemuaMenu();
return;
}
$.getJSON('data/pizzahut.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/pizza/'+ 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>Rp. '+ data.harga +'</h5><a href="#" class="btn btn-primary">Pesan Sekarang</a></div></div></div></div>';
}
});
$('#daftar-menu').html(content);
});
});
bang mohon bantuannya kendala saya pas kllik menu bar pizza nasi putih dll yang ada di menu bar pas saya klik gambarnya tidak tampil hanya tulisannya saja yg berubah. saya lihat di inspek console itu ga ada tulisan merahnya mohon bantuannya bang
assalamualaikum pak, mau tanyak nggeh. saya udah ngikutin dari awal tapi pas menit ke 41, kok pass saya klik salah satu kategori gk muncul ya pak datanya.
active link kok gak mau disaya ya,,, padahal udah sama $('.nav-link').on('click', function () {
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
Keren mas, terima kasih ilmu nya
dapet jsonnya pizza gimana
bagaimana jika kita ingin menggunakan api di datatables.net pak?
dengan pemilihan kategori juga?
mohon pencerahannya pak,
kalau mencari data berdasarkan keyword yang diinput gimana pak? kayak pencarian gitu
Selamat malam pak dika, pak ko script.js udah di jadiin komen ttp ga berubah di tampilan browsernya, ttp ada gambar, kan harusnya tidak ada gambar yg muncul, mohon penjelasan dan solusinya pak, terima kasih
kalau mencari data berdasarkan keyword dengan php nya gimana ya pak?? pakai method $_GET
permisi pak , maaf mau tanya barangkali ada yg tau solusinya . Kenapa judul h1 saya berubah sesuai dengan kategori menu yg sedang di click, tetapi datanya tidak berubah datanya sama seperti di all menu tidak berubah berdasarkan kategori . terima kasih
pak ko yang saya pas di klik all menu nya tidak muncul kenapa yah pak? padahal udh mirip sama kaya bapak,sarannya gimana yah pak?terimakasih
Saya make Vuejs tapi masih nonton 🙂
Terimkasih kak Dika. udah aq like subscribe dan berlangganan pula. mantull pokoknya
Maaf bang mau nanya di akhir video kan di jelasin ambil data dri server lain untuk di tampilin di web kita. Jdi saya harus buat json di server dimana data yg mau di ambil. Kemudian kita panggil dg json di web kita?? Kemudian bagaimana cara cek kalau server yg mau di ambil datanya itu sudah dikonfigurasi.
Maaf bang itu kan jsonya dibuat scara manual datanya gimana ya jika json nya ambil data dr database trus di panggil dg file_get_contens.
Di video seblumnya bisa ambil dr database tp dg format .php bukan .json saya coba file_get_contens('coba.php')
Json_decode tidak bisa.
Kok saya ngoding pas console keterangannya getJSON not a function?
pak klo result api dari db di CI gimana bikin dong tutorialnya
pas di menit 25:30 kok keluarnya {menu: Array(15)} ya? udah ngikutin tutornya. apa nggak apa2? atau ada yang salah?
The script from “http://localhost/rest-api/bootstrap-4.3.1-dist/css/bootstrap.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
None of the “sha384” hashes in the integrity attribute match the content of the subresource.
None of the “sha256” hashes in the integrity attribute match the content of the subresource
None of the “sha256” hashes in the integrity attribute match the content of the subresource
The script from “http://localhost/rest-api/bootstrap-4.3.1-dist/css/bootstrap.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
None of the “sha384” hashes in the integrity attribute match the content of the subresource.
ReferenceError: $ is not defined
Error ketika dijalankan tidak terkoneksi internet, mohon pemcerahan
Pak saya baru belajar, nanya donk kan biasanya json diawalin tulisan array, tapi output dari arduino sudah json, tapi diweb knp awalnya string ya, mohon petunjuk
Pak galih klo bikin program yg login via gmail, biar bisa reset password Melanie email. Sperti itu pakai teknik apa y pak. Saat ini saya menggunakan codeigniter
Terimkasih
bang, cara nambahin form login untuk masuk kedalam website gimana??? mksih bang..
Luar biasa detail sekali, enak banget cara jelasinnya kang hatur nuhun!🙏
maaf mau tanya pa dika dan temen", itu kan ada button pesan sekarang nah itu buat hrefnya di JSONnya gimana yah?terimakasih
https://danar90jr.github.io/wpu-hut/
tlng dikoreksi pak
bapak menggunakan php native lalu bagaimana jika menggunakan ci pak?, gambar saya tidak keluar . terima kasih
Ternyata file JSON tidak boleh dikasih komentar didalamnya -_-
kok jadi laper yahh liat phd
Saya error Uncaught SymtaxError: Invalid or unexpected token script.js:4
Malah lebih enak belajar disini daripada di kampus wkwk
The explanation was crystal clear(ada sedikit part bahasa indonesia yg saya tidak berapa faham, tapi overall saya faham content nya), very informative and not to mention a perfect pace of learning for me!
Thank you for sharing your knowledge. I like the content and your channel so much <3
Terima kasih.
buat yg error di if(data.kategori==kategori.toLowerCase()) , perhatikan pada element menu lalu pastikan tidak ada white space atau spasi di akhir kata tulisan menu.
misal :
"Semua Menu " (salah)
"Semua Menu" (benar)
Data saya yang buat kategori kok nggak masuk gimana ya pak
Paling masuk banget ke otak kalo nonton video pak sandhika, thanks pak.
pak punya saya nggak bisa keluar tiap tiap kategorinya. kira kira kesalaham saya dimana ya pak