Home/ Questions/Q 7283

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-28T02:22:09+00:00

QR code generator in Django

  • 60k

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

djangopythontutorialwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,