Build a weather website – Django project for beginners

django project for beginners - www.devpyjp.com

Hello, Django learners! If you are a beginner or intermediate then this is for you, I designed this Django project for beginners and intermediates. when you learn Django, you must apply all these concepts to solve real-world problems, isn’t it?.

Learning concepts is not ok, you must apply them to solve a problem or to build something. So in this Django project, we don’t use any API for grabbing the weather data. what we use is web scraping using python.

well, If you don’t how to grab the data from a website, here is my simple guide for you, that definitely helps you.

web scraping for beginners 

what special in this Django project

  1. Without using any API we collect the data
  2. Web scraping
  3. Simple and eligant code
  4. Results showed with Bootstrap cards

Alright! let’s get into the real Django project. To build this Django project you must my 2 steps. here they are.

  • Scrap the data from a website using python
  • Build a Django project using weather data

So follow these simple steps to accomplish my Django project for beginners – Build a weather app using Django.

Step -1: scrap the data using python

Before you start, you must have requests and Beautifulsoup packages in your system. if you don’t have then use these commands on your prompt.

pip install requests

pip install bs4

Ok, fine. To grab the weather data I used here a website called www.timeanddate.com. I tried a lot of websites but failed to grab the current city weather and name, but finally succeeded with it.

Here is my code for you. Don’t worry, I will explain each of that below.


import requests
from bs4 import BeautifulSoup

url = 'https://www.timeanddate.com/weather/'

res = requests.get(url).content
soup = BeautifulSoup(res,'html.parser')

data = soup.find('span',class_='my-city__city')
data1 = soup.find('span',class_='my-city__temp')
print(data.text)
print(data1.text)

Ok, I imported requests and bs4.

I grab that URL from the website. I passed that URL to requests to access the website data and store it into the res variable.

I created the soup object, and I grab the appropriate elements of weather and city. Finally, I print them. If you execute this script you will get the results as city name where you are in and temperature.

Ok, we did the first step successfully. Now we are ready to build our Django weather app. let’s rock!

Step-2: Build a Django weather app

I think you definitely know a little about Django. I assume that you might know how to start a Django project, app and configure settings and templates.

Here I am giving my simple elegant code to build the Django project.

Views.py

from django.shortcuts import render

import requests
from bs4 import BeautifulSoup
import datetime

#web scraping

url = 'https://www.timeanddate.com/weather/'
res = requests.get(url).content
soup = BeautifulSoup(res,'html.parser')

#home view
def home(requests,soup=soup):
    date = datetime.datetime.today().date
    data = soup.find('span',class_='my-city__city')
    data1 = soup.find('span',class_='my-city__temp')
    
    city = data.text
    temp = data1.text

    return render(requests,'index.html',{'city':city,'temp':temp,'date':date})

we pasted in the views.py file what we did initially and pass the data variables like “city”, “date” and “temp” to the template.

urls.py:

Here I am using the main urls, because we never build any app so that this data pushed to the home or index page.

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='home'),
]

Templates / index.html

Here, I used some basic HTML code and Bootsrap. I assume that you definitely know the configuration of templates. if you don’t know here is my Guide.

<center>
      <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header bg-transparent border-success"><b><i>City:{{city}}</i></b></div>
        <div class="card-body text-success">
          <img class="card-img-top" src="https://gifimage.net/wp-content/uploads/2018/06/weather-gif-9.gif" alt="Card image cap">
          <h5 class="card-title" style="color:red">{{temp}}</h5>
          <p class="card-text"></p>
        </div>
        <div class="card-footer bg-transparent border-success"><b>Date:{{date}}</b></div>
      </div>
</center>

Now we are ready to run our Django weather project, let’s open your command prompt and root to your project directory.

Alright! let’s execute this command.

python manage.py runserver

Ok, if you follow my steps, then you definitely got like below, when you enter the URL 127.0.0.1:8000 in the browser.

Congratulations! You did it man.

I hope this Django project example can show you a way to use web scraping and build projects using python Django.

Ok, let’s appreciate me with a comment below and subscribe to our newsletter to get more on Django and other python stuff.

Thank you so much to be here, cheers!

2 thoughts on “Build a weather website – Django project for beginners”

  1. its showing this error
    Traceback (most recent call last):
    File “raw.py”, line 2, in
    from bs4 import BeautifullSoup
    ImportError: cannot import name ‘BeautifullSoup’ from ‘bs4’

Leave a Reply