Description

Fitur Utama

1. Manajemen Data Produk:
   • Tambah, ubah, hapus data martabak (jenis, harga, dan stok).
   • Tampilkan seluruh data produk dalam bentuk tabel.
2. Cek Ongkos Kirim:
   • Hitung ongkos kirim berdasarkan parameter origin, destination, weight, dan courier yang disediakan oleh API RajaOngkir.
3. Tampilan User-Friendly:
   • Antarmuka yang responsif dan menarik dengan form input, tabel data, dan visualisasi JSON untuk hasil ongkos kirim.

Teknologi yang Digunakan

• Backend: Flask (Python) dengan koneksi ke MySQL sebagai database untuk penyimpanan data martabak.
• Frontend: React.js untuk interaksi dengan pengguna dan mengelola tampilan UI.
• API Eksternal: RajaOngkir untuk pengecekan ongkos kirim.
• Database: MySQL, dengan tabel list_martabak yang menyimpan detail produk martabak (kolom: id, jenis_martabak, harga, stok).
• Styling: Custom CSS untuk tampilan modern.

Tahap pengerjaan

Membuat database “willy” dan tabel “list_martabak” dengan isi jenis martabak, harga, dan stok

Kemudian isi tabel tersebut

Membuat backend flask

Kode flask:

Kemudian jalankan flask dengan cara:

Sebelum membuat front end nya, mari kita cek dahulu apakah flask berjalan dengan baik atau tidak menggunakan postman

Sekarang buat front end nya, disini saya menggunakan reactjs, install package reactjs terlebih dahulu

Setelah di install masuk ke dalam direktori package

Jangan lupa install axios

Sekarang, masukkan kode dibawah untuk src/App.js

Kemudian isi src/App.css untuk mempercantik tampilan web 

Setelah itu, jalankan react

Tampilan Web

Demo Antarmuka

Form Manajemen Martabak:

• Input untuk jenis martabak, harga, dan stok.
• Tombol untuk menambah, mengubah, dan menghapus martabak.

Tabel Daftar Martabak:

• Menampilkan data martabak yang sudah ada di database dengan opsi edit dan hapus.

Form Shipping Cost:

• Input untuk kota asal, tujuan, berat, dan kurir.
• Hasil perhitungan ongkos kirim ditampilkan dalam bentuk JSON yang terstruktur dan mudah dibaca.