Description

Jelajah Cuaca merupakan website interaktif dengan tujuan utama pemesanan destinasi wisata oleh pengguna berdasarkan daftar destinasi wisata dan cuaca terkini di setiap destinasinya yang diambil dari OpenWeather API. Project ini menampung data dalam database, mengintegrasi backend dan frontend, serta mengaplikasikan API eksternal untuk mengambil data cuaca. Dalam proses pembuatan websiter terdapat 3 langkah utama yaitu:

1. Membuat Database dengan MySQL di VM. Dalam database ada 3 entitas yaitu
   • USER -→ entitas yang menampung data pengguna. Terdapat 4 atribut di dalamnya yaitu id_user (primary key), username (unik), email (unik), dan password.
   • DESTINATION -→ entitas yang menampung data tempat wisata. Terdapat 6 atribut di dalamnya yaitu id_destination (primary key), destination_name, city, rating, latitude, dan longitude. 
   • TRIP -→ entitas yang menampung data perjalanan pengguna. Terdapat 5 atribut didalamnya yaitu id_trip (primary key), id_user (foreign key), id_destination (foreign key), start_date, dan end_date.
     Relational Schema
     
     API yang telah dibuat dapat diuji terlebih dahulu apakah berfungsi dengan baik di Postman.
2. Membuat Backend dengan Framework Python Flask di VM. Backend berfungsi untuk menghubungkan ke database, mengolah data dan membuat API untuk integrasi dengan Frontend. Dalam menyusun backend, terdapat beberapa endpoint dan API yang perlu dideklarasikan yaitu
   • Endpoint: GET|POST|PUT, API: /api/user -→ API yang berhubungan dengan entitas user. GET digunakan untuk mendapatkan seluruh data pengguna yang telah diinputkan di database, melalui query SELECT. POST digunakan untuk menginputkan data pengguna ke database, yang akan digunakan pada saat registrasi, melalui query INSERT. Password yang diinputkan pengguna diamankan dengan hashing yang mana password diubah menjadi suatu kode, sehingga tidak dapat dilihat oleh siapapun nilanya di database. PUT digunakan untuk mengubah data pengguna, misalnya memperbarui password, melalui query UPDATE. 
   • Endpoint: POST, API: /api/login -→ API yang digunakan untuk proses login. Pengguna menginputkan username dan password, yang selanjutnya  sistem akan meng-hash kata sandi yang dimasukkan dan mencocokannya dengan hash password yang tersimpan di database. Jika cocok, pengguna dianggap berhasil terotentikasi, server membuat token JWT dengan masa aktif 1 jam dan mengirimkannya ke pengguna. Pengguna berhasil login. Token JWT digunakan untuk mengelola sesi pengguna secara efisien, memungkinkan otentikasi dan otorisasi otomatis selama masa berlaku token. 
   • Endpoint: GET|POST|PUT, API: /api/destination -→ API yang berhubungan dengan entitas destination. GET digunakan untuk menampilkan daftar destinasi wisata yang telah diinputkan ke database, melalui query SELECT. POST digunakan untuk menambahkan destinasi wisata, melalui query INSERT. PUT digunakan untuk memperbarui atau mengubah data destinasi wisata, melalui query UPDATE.
   • Endpoint: GET, API: /api/destination/weather -→ API yang berhubungan dengan pengambilan data cuaca dari API eksternal OpenWeather. Data cuaca diambil berdasarkan koordinat (langitude dan lotitude) tempat wisata, melalui query SELECT. Format URL untuk permintaan data ke API OpenWeather yaitu http://api.openweathermap.org/data/2.5/weather?lat={latitude}&lon={longitude}&appid={API_KEY}&units=metric. Data yang berhasil terambil akan ditampilkan bersama dengan daftar destinasi. Data cuaca ini tidak dihimpun ke database. 
   • Endpoint: GET|POST|PUT/DELETE, API: /api/trip -→ API yang berhubungan dengan entitas trip. GET digunakan untuk menampilkan daftar perjalanan yang telah dipilih pengguna, melalui query SELECT. POST digunakan untuk menambah perjalanan oleh pengguna, melalui query INSERT. PUT digunakan untuk memperbarui atau mengubah data trip, yaitu mengubah tanggal mulai perjalanan sampai tanggal akhir perjalanan, melalui query UPDATE. DELETE digunakan untuk menghapus data perjalanan pengguna jika perjalanan dibatalkan. Dalam mengubah, menampilkan, mengupdate, menghapus data trip diperlukan id_user, id_user diekstrak dari token yang didapatkan ketika pengguna login. Jadi pengguna mengirimkan permintaan ke server menyertakan token, selanjutnya token diverifikasi dan data dibatasi hanya milik satu pengguna, sehingga data yang ditampilkan merupakan data perjalanan milik pengguna tersebut.
3. Membuat Frontend dengan Reactjs di VS Code. Backend dan Frontend diintegrasikan dengan API yang telah dibuat di backend. Frontend berfungsi untuk tampilan website yang mudah digunakan untuk pengguna.
   • Strutur Direktori Frontend
     /website_jelajah_cuaca
     │
     ├── /src
     │   ├── /components          # Folder untuk menyimpan komponen UI yang dapat digunakan kembali
     │   │   ├── /styles          # Folder untuk file CSS spesifik dari halaman
     │   │   │   ├── RegisterPage.css  # File CSS untuk halaman registrasi
     │   │   │   ├── LoginPage.css     # File CSS untuk halaman login
     │   │   │   └── HomePage.css      # File CSS untuk halaman beranda
     │   │   ├── RegisterPage.js       # Komponen React untuk halaman registrasi
     │   │   ├── LoginPage.js          # Komponen React untuk halaman login
     │   │   └── HomePage.js           # Komponen React untuk halaman beranda
     │   │
     │   ├── api.js                    # File untuk fungsi API yang menghubungkan ke backend Flask
     │   ├── App.js                    # Komponen utama untuk aplikasi React, mengatur rute dan tata letak
     │   ├── App.css                   # File CSS utama untuk styling aplikasi secara umum
     │   ├── index.js                  # Titik masuk utama untuk aplikasi React
     │   └── index.css                 # File CSS tambahan untuk styling global
     │
     └── package.json                  # File konfigurasi proyek, termasuk dependensi dan skrip
     
     Selanjutnya folder /website_jelajah_cuaca tersebut dijalankan dengan npm start.
     Setelah itu website akan ditampilkan di browser, dengan tampilan dan penggunaan sebagai berikut

============================#################################=================================

Link Pemograman : https://github.com/DwiAmaliaPutri/WebsiteJelajahCuaca