Weather app using Django | Python

by ahin subhra das

weather app final interface

In this article , we will learn how to create a Weather app that uses Django as backend. We give our weather app name as weather highlights .

Firstly we need to create a new project in our Django , using command :

django-admin startproject Weather_highlights

after that we must create a app under Weather_highlights project , we give app name as Weatherapp .

: python startapp Weatherapp

After sucessfully creating our project and app we need to change directory using cd Weather_highlights , then we need to run migration for our project .

To getting weather details we need to access any open source api from web , for our project we access api from . After sign in in this website we easily get weather details of any city . interface after signin

Now we go to our backend part for this project we need to create a index. html page as template or design page for searching and showing our weather details as per city .

weatherapp >templates>index.html

<!DOCTYPE html>

<html lang=”en” dir=”ltr”>


<meta charset=”utf-8">

<title>weather highlights</title>

<! — Latest compiled and minified CSS →

<link rel=”stylesheet” href=”">

<! — jQuery library →

<script src=”"></script>

<! — Latest compiled JavaScript →

<script src=”"></script>



overflow: hidden;



width: 80px;

height: 80px;


#imageContainer img{

height: 100%;

width: 100%;



display: flex;

align-items: center;


footer {


height: 50px;

bottom: 0;

width: 100%;


color: black;

font-size: 20px;

text-align: center;





<nav class=”row” style=”background: skyblue; color: black;”>

<div align=”center” ><h1 class=”col-md-3 text-center”>Weather Highlights</h1>



<br />

<br />

<center class=”row”>

<form action=”” 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=”Type your city name and search”>

<div class=”input-group-btn”>

<button class=”btn btn-default” type=”submit”>

<i class=”glyphicon glyphicon-search”></i>





<div class=”row” >

{% if city is not None %}

<div class=”col-md-6 col-md-offset-3">

<h1>{{city | capfirst}}</h1>

<div id = ‘desc’><h3>Description: {{data.weather_description | capfirst}}</h1>

<div id = ‘imageContainer’><img src = ‘{{data.weather_icon}}.png'></div>


<h3>Temperature: {{data.weather_temperature}}C</h3>

<h3>Pressure: {{data.weather_pressure}}</h3>

<h3>Humidity: {{data.weather_humidity}}</h3>


{% endif %}



<footer class=”fixed-bottom”> All copyright reserved by Ahin Subhra das @2021.</footer>


design part of our weather app

After working with design part we need to link our design part to our backend for that we write code in our and :


from django.shortcuts import render

# import json to load json data to python dictionary

import urllib.request

# urllib.request to make a request to api

import json

# Create your views here.

def index(request):

if request.method == ‘POST’:

city = request.POST.get(‘city’)

#’’’ api key might be expired use your own api_keyplace api_key in place of appid =”your_api_key_here “ ‘’’

# source contain JSON data from API

# print(city)

api_url = urllib.request.urlopen(‘' + city + ‘&units=metric&appid=19271528f8b9badf220b6280c99116e8’).read()

api_url2 = json.loads(api_url)

# converting JSON data to a dictionary

data = {

“country”: city,

“weather_description”: api_url2[‘weather’][0][‘description’],

“weather_temperature”: api_url2[‘main’][‘temp’],

“weather_pressure”: api_url2[‘main’][‘pressure’],


“weather_icon”: api_url2[‘weather’][0][‘icon’],


# data for variable list_of_data


city = None

data = {

“country”: None,

“weather_description”: None,

“weather_temperature”: None,

“weather_pressure”: None,


“weather_icon”: None,


#showing none


return render(request, ‘index.html’, {“city”: city, “data” :data})


from django.urls import path

from . import views

urlpatterns = [

path(‘’, views.index)



from django.contrib import admin

from django.urls import path, include

urlpatterns = [


path(‘’, include(‘WeatherApp.urls’))


Before we run our baackend we must remember to add our app name in our project

In add app name as we did

Now we run our server using : python runserver

Put any city name in search bar of our project . For example we search kolkata as city name to check weather details of city of joy .

Hurrry we did it sucessfully