Learn with Yasir

Share Your Feedback

Mini Project: Simple Weather App with API Integration


Mini Project: Simple Weather App with API Integration

Project Title: Basic Weather Application

Perfect for Beginners Learning:

✅ PHP API requests (cURL)
✅ JSON data handling
✅ Form processing
✅ Basic error handling
✅ Simple UI with CSS

Features

  1. Search by City - Get current weather data
  2. Display Weather Info:
    • Temperature (C/F)
    • Weather condition (sunny, rainy, etc.)
    • Humidity
    • Wind speed
  3. Error Handling - For invalid city names

Implementation Steps

1. Get API Key (Free)

Register at OpenWeatherMap for a free API key

2. config.php (API Configuration)

<?php
define('API_KEY', 'your_api_key_here');
define('BASE_URL', 'https://api.openweathermap.org/data/2.5/weather');
?>

3. index.php (Main Application)

<?php
require 'config.php';

$weather = [];
$error = '';

if (isset($_GET['city'])) {
    $city = urlencode($_GET['city']);
    $url = BASE_URL . "?q={$city}&appid=" . API_KEY . "&units=metric";
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);
    
    $data = json_decode($response, true);
    
    if ($data['cod'] == 200) {
        $weather = [
            'city' => $data['name'],
            'temp' => round($data['main']['temp']),
            'humidity' => $data['main']['humidity'],
            'wind' => $data['wind']['speed'],
            'description' => ucfirst($data['weather'][0]['description']),
            'icon' => $data['weather'][0]['icon']
        ];
    } else {
        $error = "City not found. Please try again.";
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Simple Weather App</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            max-width: 600px; 
            margin: 0 auto; 
            padding: 20px;
            text-align: center;
        }
        .weather-card {
            background: #f0f8ff;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .error { color: red; }
        .weather-icon {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>Weather App</h1>
    
    <form method="GET">
        <input type="text" name="city" placeholder="Enter city name" required>
        <button type="submit">Get Weather</button>
    </form>
    
    <?php if ($error): ?>
        <p class="error"><?php echo $error; ?></p>
    <?php elseif (!empty($weather)): ?>
        <div class="weather-card">
            <h2><?php echo $weather['city']; ?></h2>
            <img src="https://openweathermap.org/img/wn/<?php echo $weather['icon']; ?>@2x.png" 
                 alt="<?php echo $weather['description']; ?>" class="weather-icon">
            <p><strong><?php echo $weather['description']; ?></strong></p>
            <p>Temperature: <?php echo $weather['temp']; ?>°C</p>
            <p>Humidity: <?php echo $weather['humidity']; ?>%</p>
            <p>Wind: <?php echo $weather['wind']; ?> m/s</p>
        </div>
    <?php endif; ?>
</body>
</html>

Key Learning Points

  1. API Integration - Making HTTP requests to external services
  2. JSON Handling - Parsing and using API responses
  3. Form Processing - User input handling
  4. Error Management - Graceful error display
  5. Simple UI - Clean presentation of data

How to Run

  1. Get your free API key from OpenWeatherMap
  2. Replace your_api_key_here in config.php
  3. Upload to any PHP-enabled server
  4. Access via browser

Enhancement Ideas

  1. Add temperature unit toggle (Celsius/Fahrenheit)
  2. Implement 5-day forecast
  3. Add location detection (browser geolocation)
  4. Save search history (using sessions)
  5. Responsive design for mobile

🧠 Practice & Progress