ডজ্যাঙ্গোতে স্ক্রিনশট নেওয়ার ওয়েবসাইট তৈরি

এই আর্টিকেলে, আমরা দেখব কিভাবে ডজ্যাঙ্গোতে একটি স্ক্রিনশট নেওয়ার ওয়েবসাইট তৈরি করতে হয়। এই ওয়েবসাইট মূলত যখনই আমরা "take screenshot" ক্লিক করব, আমাদের স্ক্রিনের স্ক্রিনশট নেবে। তারপর এটি আমাদের মিডিয়া ফোল্ডারে স্ক্রিনশট সংরক্ষণ করবে এবং আমরা যখন চাই তখন তা দেখতে পারব।

উদাহরণ

তো, একটি প্রজেক্ট এবং একটি অ্যাপ তৈরি করি।

settings.py-তে, INSTALLED_APPS-এ আপনার অ্যাপের নাম যোগ করুন, এবং নিচে এই কোড যোগ করুন:

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR/'media'

আমরা সিম্পলি আমাদের ইমেজ আপলোডিং উদ্দেশ্যে বেসিক মিডিয়া ফোল্ডার সেট আপ করেছি।

এখন প্রজেক্টের urls.py-তে:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    # this is my app name
    path('', include('screenshottaker.urls'))
]

এখানে আমরা সিম্পলি আমাদের অ্যাপ urls.py যোগ করেছি।

অ্যাপের urls.py-তে:

from django.urls import path, include
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.home)
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

আমরা সিম্পলি আমাদের সিম্পল ভিউ রেন্ডার করেছি এবং মিডিয়া ক্যানোনিক্যাল urls সেট আপ করেছি।

নিচের মডিউলগুলো ইনস্টল করুন:

pip install pyautogui
pip install pillow

এখানে আমরা আমাদের প্রয়োজনীয় লাইব্রেরিগুলো ইনস্টল করেছি।

views.py-তে নিচের কোড যোগ করুন:

from django.shortcuts import render
import random
import pyautogui
from django.conf import settings
from django.contrib import messages

def home(request):
    if request.method == "POST":
        ss = pyautogui.screenshot()
        img = f'myimg{random.randint(1000,9999)}.png'
        ss.save(settings.MEDIA_ROOT/img)
        messages.success(request, 'screenshot has been taken')
        return render(request, 'home.html', {'img': img})
    return render(request, 'home.html')

views.py-এ, আমরা সিম্পলি pyautogui-কে স্ক্রিনশট নেওয়ার জন্য বলেছি, তারপর png-সহ র‍্যান্ডম নম্বর জেনারেট করেছি একটি ইমেজ নাম তৈরি করতে। তারপর, আমরা ইমেজটি MEDIA_ROOT যা একটি মিডিয়া ফোল্ডার, সেখানে সেভ করেছি। তারপর, আমরা আমাদের ফ্রন্টএন্ডে একটি মেসেজ এবং আমরা যে স্ক্রিনশট নেয়া সেটি পাঠিয়েছি।

এখন, আপনাকে প্রজেক্ট এবং অ্যাপ ডিরেক্টরির সমান লেভেলে একটি "media" ফোল্ডার তৈরি করতে হবে।

অ্যাপ ডিরেক্টরিতে (মাইগ্রেশন ফোল্ডারের সমান লেভেলে) একটি templates ফোল্ডার তৈরি করুন এবং "home.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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <style>
        img {
            width: 800px;
        }
    </style>
    {% if messages%}
    {% for message in messages%}
    <div class="text-center mt-5">{{message}}</div>
    {% endfor %}
    {% endif %}
    <form method="post" class="text-center">{% csrf_token %}
        <button class="p-3 btn btn-success">Take A Screenshot</button>
    </form>
    {% if img %}
    <div class="text-center p-5 mt-5 container border shadow-sm">
        <img src="https://127.0.0.1:8000/media/{{img}}" class="img-fluid">
    </div>
    {% endif %}
</body>
</html>

এখন, আমরা সব কাজ শেষ করেছি। এখানে, আমরা CSS-সহ একটি সিম্পল ফ্রন্টএন্ড তৈরি করেছি, এবং একটি POST ফর্ম, যা ইমেজ এবং মেসেজ দেখানোর জন্য ডজ্যাঙ্গো কন্ডিশনিং ব্যবহার করছে।

আউটপুট

-