Weather app using Django - Python

Last Updated : 17 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Our task is to create a Weather app using Django that lets users enter a city name and view current weather details like temperature, humidity, and pressure. We will build this by setting up a Django project, creating a view to fetch data from the OpenWeatherMap API, and designing a simple template to display the results. Step-by-step, we’ll implement the core functionality to build a working weather app.

Prerequisites:


Basic Setup

Create a virtual environment, and install the packages:

pip install Django

Step 1: Create a Django Project

Start a new Django project named weather:

django-admin startproject weather

Step 2: Navigate to the Project Directory

cd weather

Step 3: Create a Django App

Create an app called main:

python manage.py startapp main

The directory structure should look like this:

Step 4: Add the main App to Settings

Open weather/settings.py and add 'main' to the INSTALLED_APPS list:

Step 5: Configure URLs

Edit weather/urls.py to include the todo app views:

Python 
from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls')),
]

Step 6: Define URLs for main App

Create main/urls.py and add:

Python 
from django.urls import path
from . import views

urlpatterns = [
         path('', views.index),
]

Step 7: Create the View

Edit main/views.py to fetch and process weather data:Note: Obtain your API key from "OpenWeatherApp" Replace "your_api_key_here" in views.py with your actual API key.

Step 7: Create the Template

Create main/templates/main/index.html with this content:

HTML 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>weather</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="row" style="background: green; color: white;">
    <h1 class="col-md-3 text-center">weather</h1>
  </nav>

  <br /><br />

  <center class="row">
    <form method="post" class="col-md-6 col-md-offset-3">
      {% csrf_token %}
      <div class="input-group">
        <input type="text" class="form-control" name="city" placeholder="Search" />
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </center>

  <div class="row">
    {% if country_code and coordinate and temp and pressure and humidity %}
    <div class="col-md-6 col-md-offset-3">
      <h3>Country Code: {{ country_code }}</h3>
      <h5>Coordinate: {{ coordinate }}</h5>
      <h5>Temperature: {{ temp }}</h5>
      <h5>Pressure: {{ pressure }}</h5>
      <h5>Humidity: {{ humidity }}</h5>
    </div>
    {% endif %}
  </div>
</body>

</html>

Step 9: Make Migrations (Optional)

Run migrations to keep your environment updated (even though this app has no models):


python manage.py makemigrations
python manage.py migrate

Step 10: Run the Server

Start the Django development server:

python manage.py runserver

Open your browser at "http://127.0.0.1:8000/", enter a city name, and check the weather!


Next Article
Django Sign Up and login with confirmation Email | Python
author
itsvinayak
Improve
Article Tags :
Practice Tags :

Similar Reads