QR code generator in Django

#django #webdev #tutorial #python

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

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.

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.

# 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 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)