Description

Langkah-Langkah:

1. Membuat Database menggunakan MySQL dengan nama ‘pengiriman’

2. Membuat Tabel di Database

Data yang diambil dari API ExternalRajaOngkir adalah Ongkos Kirim.

3. Membuat Backend yang terhubung dengan Database dan API External RajaOngkir menggunakan Python Flash

Menggunakan mysql.connector untuk menyambungkan dengan Database MySql. CORS diaktifkan untuk memungkinkan permintaan lintas domain (cross-origin requests), yang berguna untuk frontend (misalnya ReactJS) berkomunikasi dengan API tanpa masalah CORS

Setelah itu membuat koneksi dengan memasukan host, user, password dan nama database yang ingin disambungkan.

Dalam Backend ini terdapat 3 endpoint, yaitu:

GET : untukmendapatkan Data dari Database

POST : Untukmenambahkan Data ke dalam Database

PUT : Untukmelakukan perubahan/memperbaharui data ke dalam Database

Aplikasi Flask dijalankan dengan app.run() pada host="0.0.0.0" dan port=2904.

4. Membuat Frontend yang terhubung dengan Backend menggunakan ReactJS dan Bootstrap
App.js

Komponen utama yang mengatur tampilan aplikasi.

Memuat dua form: PengirimanForm untuk menambah pengiriman dan OngkirForm untuk mengecek ongkir.

Di bawah form, ada daftar pengiriman yang ditampilkan menggunakan komponen PengirimanList.

PengirimanList.js

Mengambil data pengiriman dari API menggunakan getPengiriman dan menampilkan daftarpengiriman dalam tabel.

Menyediakan fungsi untuk mengedit pengiriman (dengan mengisi form edit), lalu memperbarui data menggunakan updatePengiriman.

Data yang sudahdiupdate langsung disinkronkan dengan tampilan di frontend.

PengirimanForm.js

Menyediakan form untuk menambah pengiriman baru.

Form data dikirimkan ke APImenggunakan fungsi addPengiriman.

Setelah berhasil, form akan direset dan pengguna diberi tahu bahwa pengiriman telah ditambahkan.

OngkirForm.js

Meskipun kode di sini mirip dengan PengirimanForm.js, ini dirancang untuk mengecek ongkos kirim (ongkir).

Akan mengirimkan data keAPI untuk memeriksa ongkir (endpoint /cek_ongkir), tetapi kode form ini tidak sepenuhnya diberikan di sini.

5. Membuat Fungsi API menggunakan Axios untuk berinteraksi dengan backend.

Menyediakan fungsi API menggunakan Axios untuk berinteraksi dengan backend. Dengan Empat fungsi utama:

• getPengiriman: Mengambil daftar pengiriman.
• addPengiriman: Menambahkan pengiriman baru.
• updatePengiriman: Memperbarui pengiriman berdasarkan ID.
• cekOngkir: Mengecekongkos kirim berdasarkan data yang diberikan

6. Tampilan hasil Akhir 

Frontend ini memungkinkan pengguna untuk mengelola pengiriman barang, termasuk menambah, mengedit, dan menampilkan pengiriman. Juga memungkinkan pengecekan ongkos kirim menggunakan API RajaOngkir. Semua interaksi dilakukan melalui API backend yang disediakan oleh Flask.