JSON atau singkatan dari JavaScript Object Notation, adalah suatu format data ringkas pertukaran data komputer layaknya sebuah database, formatnya yang hanya dalam bentuk teks membuat manusia dapat membacanya dengan mudah tetapi dengan kondisi data json tersebut dibuat menjadi tersusun terlebih dahulu, data json ini biasanya digunakan oleh para developer untuk memberikan sebuah akses restfull api atau sebuah situs yang bertujuan untuk berbagi data yang dia miliki dalam bentuk json.
Fitur "Edit Toko"
Pertama kita tambahkan folder dengan nama "dashboard", didalam folder dashboard membuat folder editToko lalu buat file html biasa dengan nama index.html. didalam file tersebut cara mengambil data JSON menggunakan post dan get. berikut source code html:
import Head from 'next/head'
import Link from 'next/link'
export const getStaticProps = async (context) => {
const res = await fetch('http://localhost:3004/profile/');
const data = await res.json();
return {
props : { profile : data }
}
}
const Transaksi = ({ profile }) => {
return (
<div>
<Head>
<title>Edit Toko</title>
</Head>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="block my-0">
<div className="columns is-mobile is-centered is-flex btm
-bordergray m-1">
<Link href="/dashboard/editToko">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Edit Toko</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex btm
-bordergray m-1">
<Link href="/dashboard/transaksi">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Transaksi</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex btm
-bordergray m-1">
<Link href="/dashboard/pendapatan">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi" >Pendapatan</button>
</Link>
</div>
</div>
</div>
</div>
<div className="tile is-parent">
<div className="tile is-child">
<div className="has-text-centered is-flex-direction-column bg-green
m-5 p-5">
<div className="is-flex is-justify-content-center">
<figure className="image is-128x128">
<img className="is-rounded bg-white" src="/user.png"/>
</figure>
</div>
<div className="is-align-items-center py-3">
<Link href="#">
<a className="button is-size-6 green bg-gray">Ubah Profile
</a>
</Link>
</div>
</div>
{profile.map(x => (
<div className="m-5">
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">Nama Toko</div>
<div>
<a class="panel-block mx-0">
<div>{x.namaToko}</div>
<div className="is-flex is-align-items-center">
<span class="panel-icon">
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">No. Handphone</div>
<div>
<a class="panel-block">
<div>{x.noHp}</div>
<div className="is-flex is-align-items-center">
<span class="panel-icon">
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">Email</div>
<div>
<a class="panel-block">
<div>{x.email}</div>
<div className="is-flex is-align-items-center">
<span class="panel-icon">
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center btm-bordergray py-2">
<div className="mx-5">Atur Password</div>
<a class="panel-block">
<div>{x.pass}</div>
<span class="panel-icon">
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
);
}
export default Transaksi;
Kedua membuat file db.json yang berisikan untuk data.
"profile": [
{
"id": 1,
"namaToko": "ryan_wlijo",
"noHp": "+628*****11812",
"email": "nu***@gmail.com",
"pass": "********"
}
]
}
Output
Komentar
Posting Komentar