Dieser Php Codeschnipsel ermöglicht es, das aktuelle Wetter für eine eingegebene Stadt abzurufen und anzuzeigen. Es greift dabei auf die OpenWeatherMap-API zu, parst die JSON Antwort und gibt sie direkt an den Browser zurück.
<?php
if (isset($_GET['city'])) {
header('Content-Type: application/json; charset=UTF-8');
$city = rawurlencode($_GET['city']);
$apiKey = 'YOUR_API_KEY_HERE';
$url = "https://api.openweathermap.org/data/2.5/weather"
. "?q={$city}&units=metric&lang=de&appid={$apiKey}";
$response = @file_get_contents($url);
if ($response === false) {
http_response_code(502);
echo json_encode([ 'cod' => 502, 'message' => 'API-Fehler' ]);
exit;
}
echo $response;
exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dreamcodes - Wetter Express</title>
<style>
body { font-family: Arial, sans-serif; margin: 2rem; }
form { margin-bottom: 1rem; }
input { padding: .5rem; width: 200px; }
button { padding: .5rem 1rem; }
#result { margin-top: 1rem; font-size: 1.1rem; }
</style>
</head>
<body>
<h1>Wetter in deiner Stadt</h1>
<form id="weatherForm">
<input
type="text"
id="city"
placeholder="Stadt eingeben"
required
>
<button type="submit">Wetter anzeigen</button>
</form>
<div id="result"></div>
<script>
document.getElementById('weatherForm')
.addEventListener('submit', function(e) {
e.preventDefault();
const city = document.getElementById('city').value.trim();
if (!city) return;
const resultDiv = document.getElementById('result');
resultDiv.textContent = 'Lädt…';
fetch(`?city=${encodeURIComponent(city)}`)
.then(res => res.json())
.then(data => {
if (data.cod !== 200) {
resultDiv.textContent = 'Fehler: ' + (data.message || 'Stadt nicht gefunden');
return;
}
const name = data.name;
const temp = data.main.temp.toFixed(1);
const desc = data.weather[0].description;
resultDiv.innerHTML = `
<h2>Wetter in ${name}</h2>
<p>Temperatur: ${temp} °C<br>
Zustand: ${desc.charAt(0).toUpperCase() + desc.slice(1)}</p>
`;
})
.catch(err => {
console.error(err);
resultDiv.textContent = 'Ein Fehler ist aufgetreten.';
});
});
</script>
</body>
</html>