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,
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.
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.
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,