Open In App

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

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox