Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 28, 2022 09:14 am GMT

QR code generator in Django

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.pyINSTALLED_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.pyMEDIA_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.pyfrom django.shortcuts import renderfrom django.conf import settingsfrom qrcode import *import timedef 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.pyTEMPLATES = [    {        '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.pyfrom django.urls import pathfrom . import viewsurlpatterns = [    path('', views.qr_gen, name='qr_gen'),]

Now include this path on main projects urls.py.

# core/urls.pyfrom django.contrib import adminfrom django.urls import path, includefrom django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [    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

Find me on Twitter: awwarpit

Original Link: https://dev.to/soniarpit/qr-code-generator-in-django-5fe6

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To