How to generate QR code in Django

Hello Internet programmers. How are you? Django is an amazing framework and we all know that. (some interesting facts about Django here). Let’s jump to the code.

Create a directory, for example “QRCodeGenApp”, and cd into QRCodeGenApp in terminal

Creating virtual environment

python3.10 -m venv .

Activate environment

source bin/activate

Install Django, Pillow, and qrcode

pip install Django Pillow qrcode

Start Django project

django-admin startproject core .

Create App

python manage.py startapp qrcodeapp

Now open in your code editor, your file structure look like this,

file structure qr code app

Open the settings.py file and add the created app to the installed apps.

# settings.py

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

    'qrcodeapp', # add qrcodeapp app
]

Create a media directory to save all generated QR code images. This media directory should be created in the root directory.

media directory in root

Now in settings.py file specify your media directory like the following.

# settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Now open views.py of qrcodeapp to write the logic to generate a QR code and then we render it on the template.

# qrcodeapp/views.py

from django.shortcuts import render
from django.conf import settings
from qrcode import *
import time

def qr_gen(request):
    if request.method == 'POST':
        data = request.POST['data']
        img = make(data)
        img_name = 'qr' + str(time.time()) + '.png'
        img.save(settings.MEDIA_ROOT + '/' + img_name)
        return render(request, 'index.html', {'img_name': img_name})
    return render(request, 'index.html')

Create a templates directory in the root directory and specify the path in settings.py like the following.

Specify the path, and open settings.py and find DIR and add this

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / 'templates' ], # this
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Open index.html and add the following code

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR code generator</title>

    <style>
        *{
            box-sizing: border-box;
            font-family: sans-serif;
        }
        main{
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        input{
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button{
            width: 100%;
            max-width: 200px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #eee;
            
        }

        button:hover{
            background-color: #ddd;
        }

        .qr-img{
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
        }

        .qr-img img{
            width: 100%;
        }
    </style>
</head>
<body>
    <main>
        <h1>
            QR code generator
        </h1>
        <form method="post">
            {% csrf_token %}
            <input type="text" name="data" id="data" placeholder="write something or enter url">
            <button>Generate</button>
        </form>

        <div class="qr-img">
            {% if img_name %}
                <img src="/media/{{ img_name }}" alt="qr code">
            {% endif %}
        </div>
    </main>
</body>
</html>

Create new urls.py file in qrcodeapp directory and add following code

# qrcodeapp/urls.py

from django.urls import path
from . import views

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


Now include this path on main project’s urls.py.

# core/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Now everythig is done, run the server using following command. You must on your environment ok.

python manage.py runserver

Now just open http://127.0.0.1:8000 on browser, enter something and generate your qr code.

qr code generator output

I scanned this qr code and it’s working ok. see,

Now try and test. Share with your friends and enjoy :)

Source code: GitHub

Twitter: sudoarpit

Happy coding <3

Other tutorials,