How to build a Django BMI counter

Body Mass Index – BMI, is a measure of a person’s weight in relation to their height and is used to determine if a person is underweight, normal weight, overweight, or obese. It is calculated by dividing a person’s weight in kilograms by their height in meters squared (kg/m^2). To know more about Body Mass Index, check this article on wikipedia

In this tutorial, we will be building a Django app that calculates your BMI.

To start off first install django, to do so run the command below.

pip3 install django

After django is installed run the following command to create a django project.

django-admin startproject bmicalculator

Now cd into the bmicalculator and run the below command to create an app called bmi

python3 manage.py startapp bmi

Now go to the settings.py and add the following code, this will register our app to the main project.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bmi',
]

Now let’s create a view on bmi app which will handle the calculations. Below is the code in views.py

from django.shortcuts import render

def bmi_calculator(request):
    # set the initial BMI to 0
    bmi = 0

    if request.method == 'POST':
        # get the weight and height from the form
        weight = float(request.POST['weight'])
        height = float(request.POST['height'])

        # calculate the BMI
        bmi = weight / (height ** 2)
        return render(request, "bmi/index.html", {'bmi': bmi})
    else:
        return render(request, "bmi/index.html")

The above view takes weight and height arguments from our html form in the front end and then we calculate the BMI with the formula outlined below and then the results are rendered to the index.html template.

bmi = weight / (height ** 2)

In the bmi app create a folder called templates, inside the templates create a folder called bmi. Inside the bmi folder create a file called index.html Inside the file add the following,

<!doctype html>
<html>
  <head>
    <title>BMI Calculator</title>  
  </head>
  <body>
    <form method="post">
      {% csrf_token %}
      <label for="weight">Weight (kg):</label>
      <input type="text" name="weight" id="weight">
      <br>
      <label for="height">Height (m):</label>
      <input type="text" name="height" id="height">
      <br>
      <input type="submit" value="Calculate BMI">
    </form>
    <p>BMI: {{ bmi }}</p>
  </body>
</html>

The above templates creates a form where the user enter their height in meters and weight in kilograms and then submitted to the Django backend the calculations are done and the results are rendered back.

Now let’s create routes for our app. In the bmi app create a file called urls.py and add the following

from django.urls import path
from . import views

urlpatterns = [
    path('', views.bmi_calculator, name='bmi_calculator'),
]

Now let’s register our apps urls into the main project. In the bmicalculator add the following in the urls.py file.

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

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

Now run the following commands to start the server.