Website pariwisata modern (Smart Web) tidak hanya menampilkan informasi statis seperti daftar tempat wisata atau hotel, tetapi juga menyajikan informasi dinamis dan kontekstual, seperti cuaca terkini, review pengguna, dan jadwal event lokal. Salah satu komponen penting dalam mengintegrasikan data dinamis dari sumber eksternal adalah penggunaan JSON (JavaScript Object Notation).

Permasalahan:

Dinas Pariwisata Kota ingin mengembangkan situs smart tourism yang menampilkan:

• Cuaca saat ini di berbagai destinasi.

• Rekomendasi aktivitas berdasarkan cuaca.

• Review pengguna yang dikumpulkan dari layanan eksternal.

Data tersebut tidak tersedia secara langsung di database internal dan harus diambil dari API eksternal yang menyediakan format JSON.

Solusi:

Memanfaatkan format JSON sebagai medium pertukaran data antara Smart Web dan layanan eksternal. Sistem menggunakan AJAX + Fetch API di frontend untuk memuat data cuaca dan review pengguna secara asinkron tanpa me-reload halaman.

Implementasi Teknis:

1. Sumber Data:

• OpenWeatherMap API (https://openweathermap.org/api) untuk data cuaca.

• Google Places API atau TripAdvisor API untuk review pengguna.

2. Contoh Response JSON dari OpenWeatherMap:

{
  "name": "Bandung",
  "weather": [{
    "main": "Clouds",
    "description": "scattered clouds"
  }],
  "main": {
    "temp": 299.15,
    "humidity": 80
  },
  "wind": {
    "speed": 3.6
  }
}

3. Frontend Fetch:

fetch("https://api.openweathermap.org/data/2.5/weather?q=Bandung&appid=API_KEY")
  .then(response => response.json())
  .then(data => {
    document.getElementById("cuaca")[removed] = `
      Cuaca: ${data.weather[0].description} 
Suhu: ${(data.main.temp - 273.15).toFixed(1)}°C 
Kelembapan: ${data.main.humidity}%
    `;
  });

4. Backend Proxy (opsional – misalnya menggunakan PHP/CodeIgniter):

// Controller SmartWeather.php
public function get_weather($city) {
  $apiKey = "API_KEY";
  $url = "https://api.openweathermap.org/data/2.5/weather?q=" . urlencode($city) . "&appid=" . $apiKey;
  $weatherJson = file_get_contents($url);
  echo $weatherJson;
}

Manfaat JSON dalam Studi Kasus Ini:

• Ringan dan mudah dibaca.

• Mudah di-parse dengan JavaScript untuk ditampilkan secara real-time.

• Konsisten dan fleksibel untuk berbagai jenis data, seperti cuaca, ulasan, dan event.

• Mendukung pengembangan web modern berbasis API-first.

Soal:

Dari contoh kasus diatas buatlah :

1.buatlah sebuah website menggunakan bahasa pemograman apa pun atau framework apapun yang anda pahami di bebaskan. Didalam website tersebut menampilkan perkiraan cuaca yang ada di indonesia,

2.buatlah database untuk menampung semua data yang sudah kamu tari dari api yang ada di link yang tersedia