abdul-halim-muklis / client-api-resep

Client API Resep

1. APi Server yang digunakan adalah refullAPI yang sebelumnya saya buat Resep

2. Membuat daftar Resep mengunakan metod GET

• resepurl = url mengakses resep
• hal = merupakan halaman
• fetchHeader = berisi headet terdapat Token

     fetch(resepurl+'?page='+hal, fetchHeader)
        .then(res => res.json())
        .then(data => {
            ... bagian ini bisa di lihat pada projek
        }).catch(err => {
            console.error(err);
        })

• Hasil Tampilan :

  

3. Membuat tampilan menambah Resep dan di kirim dengan metod POST

• data = berisi pengambilan value pada inputan
• if = mengecek jika ada inputan kosong
• Pada fetch membawa data yang sudah di baca dan di kirim melalui body dengan mengunakan metod POST

     const data = {
			... bagian ini bisa di lihat pada projek
		};
    if ( ... bagian ini bisa di lihat pada projek
    }else{
        fetch(resepurl,{
                method : 'POST',
                headers: {
                    'API-TOKEN': '13412352135235234',
                    'Content-type': 'application/json'
                },
                body : JSON.stringify(data)			
            }
        )
        .then(res => res.json())
        .then(teks => {
            alert(teks.msg);
        })
        .catch(err => console.log(err));
    }

• Hasil Tampilan :

  

3. Membuat tampilan Edit dan meng update dengan metod PUT berdasarkan ID

• Pada if else mengecek gambar dengan url lama atau baru
• Di kirim dengan Metod PUT

    var data = {
			... bagian ini bisa di lihat pada projek
		};
    if ( ... bagian ini bisa di lihat pada projek
    }else if (data.gambar == gambar){
        console.log('gambar sama');
        fetch(resepurl,{
                method : 'PUT',
                headers: {
                    'API-TOKEN': '13412352135235234',
                    'Content-type': 'application/json'
                },
                body : JSON.stringify(data)			
            }
        )
        .then(res => res.json())
        .then(teks => alert(teks.msg))
        .catch(err => console.log(err));
    }else {
        console.log('gambar berbeda');
        databaru = {
            'gambar' : gambar
        }
        Object.assign(databaru, data);
        fetch(resepurl,{
                method : 'PUT',
                headers: {
                    'API-TOKEN': '13412352135235234',
                    'Content-type': 'application/json'
                },
                body : JSON.stringify(databaru)			
            }
        )
        .then(res => res.json())
        .then(teks => alert(teks.msg))
        .catch(err => console.log(err));
    }

• Hasil Tampilan :

  

4. Pada tampilan Detail terdapat tombol Hapus Resep dengan metod DELETE dengan berdasarkan ID

• Menghapus dengan metod DELETE berdasarkan ID

    fetch(resepurl,{
                method : 'DELETE',
                headers: {
                    'API-TOKEN': '13412352135235234',
                    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body : new URLSearchParams({
                    'id': idhapus,
                })
            }
        )
        .then(res => res.json())
        .then(teks => {
                alert(teks.msg);
                getListResep(1);
            })
        .catch(err => console.log(err));

• Hasil Tampilan :

  

5. Membuat Detail Resep dengan metod GET dengan berdasarkan ID

• pemangilan seperti point 1 tetapi berdasarkan ID

    fetch(resepurl+'?id='+id, fetchHeader)
        .then(res => res.json())
        .then(data => {
            ... bagian ini bisa di lihat pada projek
        }).catch(err => {
            console.error(err);
        })

• Hasil Tampilan :

  

6. Membuat search berdasarkan asal kota masakan mengunakan metod GET

• pemangilan seperti point 1 tetapi berdasarkan asal
• search = adalah hasil inputan pada tag input

    fetch(resepurl+'?asal='+search, fetchHeader)
        .then(res => res.json())
        .then(data => {
            ... bagian ini bisa di lihat pada projek
        }).catch(err => {
            console.error(err);
        })

• Hasil Tampilan :

  

Lebih detail bisa lihat pada Project