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)
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.
Thank you 🙂
Source code: GitHub
