ডজ্যাঙ্গো প্রজেক্টে django-material ইমপ্লিমেন্ট করা

ম্যাটেরিয়াল ডিজাইন একটি ডিজাইন টেমপ্লেট যা ডেভেলপারদের মধ্যে খুব জনপ্রিয়। এটি ফ্রন্টএন্ডে CDN হিসেবে ব্যবহার করা হয়। এই আর্টিকেলে, আমরা দেখব কিভাবে আমাদের ফর্ম উইজেটগুলতে ম্যাটেরিয়াল ডিজাইন ব্যবহার করতে হয় এবং ভিউ থেকে সেই ফর্ম রেন্ডার করতে হয়।

Django-material একটি লাইব্রেরি যা রেন্ডার হওয়া HTML ফাইল বা ফর্ম উইজেটে CDN ছাড়া ম্যাটেরিয়াল ডিজাইন প্রয়োগ করবে।

প্রথমে, django-material প্যাকেজ ইনস্টল করুন।

pip install django-material

প্রজেক্ট এবং অ্যাপ এবং urls সেট আপ করুন।

settings.py-তে:

INSTALLED_APPS += ['material']

আমার অ্যাপের নাম "myapp"।

উদাহরণ

models.py-তে:

from django.db import models

class Data(models.Model):
    Name = models.CharField(max_length=100)
    salary = models.CharField(max_length=20)

এখানে, আমরা একটি সিম্পল ডজ্যাঙ্গো মডেল তৈরি করেছি যা আমরা ফর্মে ব্যবহার করব।

urls.py-তে:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]

এখানে, আমরা হোম url-এ আমাদের ভিউ রেন্ডার করেছি।

view.py-তে:

from django.shortcuts import render
from django import forms
from .models import Data

class SalaryForm(forms.ModelForm):
    class Meta:
        model = Data
        fields = "__all__"

def home(request):
    if request.method == 'POST':
        form = SalaryForm(request.POST)
        if form.is_valid():
            form.save()
    else:
        form = SalaryForm()
    return render(request, 'home.html', {'form': form})

এখানে আমরা একটি ফর্ম তৈরি করেছি এবং ফ্রন্টএন্ড থেকে রেন্ডার করেছি।

template ফোল্ডার এবং সেতে home.html তৈরি করা ভুলবেন না।

home.html-তে:

{% include 'material/includes/material_css.html' %} {# These two include #}
{% include 'material/includes/material_js.html' %} {# will import material design #}
<!DOCTYPE html>
<html>
    <head>
        <title>
            TUT
        </title>
        <style>
        </style>
    </head>
    <body>
        <h2>FORM</h2>
        <form action="/" method="post">
            {% csrf_token %}
            {{ form }}
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

এখানে, আমরা ফ্রন্টএন্ড তৈরি করেছি এবং আমাদের ডজ্যাঙ্গো ম্যাটেরিয়ালের CSS এবং JS লোড করেছি এবং এটি স্বয়ংক্রিয়ভাবে আমাদের ফর্মে ডিজাইন যোগ করবে।

আউটপুট

আপনি <style> ট্যাগ ব্যবহার করে ম্যাটেরিয়াল CSS ওভাররাইড করতে পারেন।