Weather Info Web Application — Documentation

📘 Project Title

Weather Info Web App using PHP & OpenWeatherMap API

📌 Introduction

The Weather Info Web Application at developersappindia is a real-time weather information system developed using PHP and styled with HTML5 & CSS3. It allows users to input a city name and receive up-to-date weather information by fetching data from the OpenWeatherMap API.

The app, developed by App Developers India, is designed to be lightweight, user-friendly, and visually modern. It enables users to easily check real-time conditions like temperature, humidity, wind speed, and weather descriptions for any global city. Using cURL in PHP, the app makes API requests and dynamically updates content based on user input.

🎯 Objective

To build a real-time web application that allows users to:

• Enter a city name

• Fetch and display current weather details

• Provide a simple, beautiful, and responsive interface

• Learn and demonstrate API integration using PHP

🏗️ Project Structure

weather-info-app/
│
├── index.php        <-- Main HTML, CSS, and PHP logic
└── No external scripts or assets required

Note: This is a single-file project that contains everything in index.php.

🧰 Technologies Used

🔑 Prerequisites

Before running the app, ensure the following:

• PHP (v7.0 or higher) is installed

• Local server (XAMPP, WAMP, or similar) is running

• Internet access is available

• A valid OpenWeatherMap API key

🚀 How to Run the Project

1. Download or Clone the index.php file.

2. Place it inside your web server's root directory (e.g., htdocs for XAMPP).

3. Open the file in any text editor and replace the API key with your own:

   &APPID=your_api_key_here
   

4. Start Apache via your XAMPP/WAMP server.

5. Open your browser and visit:

   http://localhost/weather-info-app/index.php

💻 Features

✅ User Interface

• Clean and colorful gradient background

• Rounded form elements

• Weather icon and details are displayed inside a card

✅ Functional Features

• Input city name to fetch weather data

• Real-time integration with OpenWeatherMap

• Displays:

  • City and country

  • Temperature (°C)

  • Feels-like temperature

  • Humidity (%)

  • Weather condition and description

  • Wind speed (m/s)

  • Weather icon (from OpenWeatherMap)

✅ Error Handling

• Displays a message if the city is not found or input is invalid

🔍 API Details

API Endpoint:

https://api.openweathermap.org/data/2.5/weather

Sample Request:

curl_setopt($ch1, CURLOPT_URL, "https://api.openweathermap.org/data/2.5/weather?q=$city&APPID=your_api_key&units=metric");

Sample JSON Response:

{
  "name": "Ahmedabad",
  "sys": { "country": "IN" },
  "main": {
    "temp": 33.6,
    "feels_like": 36.0,
    "humidity": 42
  },
  "weather": [
    {
      "main": "Clouds",
      "description": "scattered clouds",
      "icon": "03d"
    }
  ],
  "wind": {
    "speed": 2.1
  },
  "cod": 200
}