How to generate QR code in Django

0
22

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,

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.

image 4

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,

qrscanning

Now try and test. Share with your friends and enjoy 🙂

Source code: GitHub

Twitter: awwarpit

Happy coding <3

Other tutorials,

  • https://www.codesnail.com/django-todo-app-tutorial/
  • https://www.codesnail.com/django-blog-tutorial/

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here