DEV Community

Cover image for QR code generator in Django
Arpit
Arpit

Posted on • Originally published at codesnail.com

QR code generator in Django

Creating virtual environment

python3.10 -m venv .
Enter fullscreen mode Exit fullscreen mode

Activate environment

source bin/activate
Enter fullscreen mode Exit fullscreen mode

Install Django, Pillow, and qrcode

pip install Django Pillow qrcode
Enter fullscreen mode Exit fullscreen mode

Start Django project

django-admin startproject core .
Enter fullscreen mode Exit fullscreen mode

Create App

python manage.py startapp qrcodeapp
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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

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

# settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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

# 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',
            ],
        },
    },
]
Enter fullscreen mode Exit fullscreen mode

Open index.html and add 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>
Enter fullscreen mode Exit fullscreen mode

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'),
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

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

qr code generator in django

Thank you :)

Source code: GitHub

Find me on Twitter: awwarpit

Discussion (2)

Collapse
vulcanwm profile image
Medea

This is really cool!

Collapse
soniarpit profile image
Arpit Author

Thanks :)