Back to Community
Module 2025-12-17 23:51:44

Perkiraan Cuaca - Pemula

Language: PHP

Description

User memahami alur JSON, HTML, Javascript, PHP

Code Snippet
// Halaman pertama master.json
{
    "kota": "Jakarta",
    "suhu": 32,
    "kondisi": "Cerah",
    "kelembapan": 80
}

// Halaman kedua latihan_cuaca.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Analisa Cuaca JSON</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding: 50px; background: #e0f7fa; }
        .kartu { background: white; padding: 20px; border-radius: 15px; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); min-width: 300px; }
        .rekomendasi { font-weight: bold; color: #d84315; margin-top: 20px; padding: 10px; border: 1px dashed #d84315; }
        .error { color: red; font-weight: bold; }
    </style>
</head>
<body>

    <div class="kartu">
        <h2>Analisa Cuaca</h2>
        <div id="display-cuaca">Memuat data dari JSON...</div>
        <div id="" class="rekomendasi"></div>
    </div>

    <script>
        // Fungsi untuk mengambil data dari file cuaca.json
        async function ambilDataCuaca() {
            try {
                // 1. Fetch mengambil file eksternal
                const respon = await fetch('');
                
                if (!respon.ok) throw new Error("Gagal mengambil file JSON");

                // 2. Mengubah teks file menjadi objek JavaScript
                const data = await respon.json();
                
                // 3. Jalankan fungsi analisa
                prosesAnalisa(data);

            } catch (error) {
                document.getElementById('display-cuaca').innerHTML = `<p class="error">Error: ${error.message}</p>`;
                console.error(error);
            }
        }

        function prosesAnalisa("") {
            let saran = "";

            // Logika Analisa
            if (data.suhu > 30) {
                saran = "Cuaca panas. Gunakan kaos katun dan minum air!";
            } else if (data.suhu >= 25) {
                saran = "Cuaca hangat. Pakaian santai saja.";
            } else {
                saran = "Cuaca dingin. Gunakan jaket.";
            }

            if (data.kondisi === "Hujan") {
                saran += " Jangan lupa bawa payung! ☔";
            }

            // Tampilkan ke layar
            document.getElementById('display-cuaca').innerHTML = `
                <p>Kota: <strong>${""}</strong></p>
                <p>Suhu: <strong>${data.suhu}°C</strong></p>
                <p>Kondisi: ${data.kondisi}</p>
            `;
            
            document.getElementById('hasil-analisa').innerText = saran;
        }

        // Jalankan fungsi saat halaman dibuka
        ambilDataCuaca();
 
</body>
</html>