วิธีใช้ django-material ในโปรเจกต์ Django

Material Design เป็นเทมเพลตออกแบบยอดนิยม ใช้ CDN ที่ Frontend บทความนี้สอนใช้ Material Design บน Form Widgets และ render จาก Views

django-material เป็นไลบรารีที่นำ Material Design มาใช้บน HTML หรือ Form Widget ที่ render โดยไม่ต้องใช้ CDN

ตัวอย่าง

ติดตั้ง django-material:

pip install django-material

ตั้งค่าโปรเจกต์ แอป และ urls

ใน settings.py:

INSTALLED_APPS+=['material']

ใน 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"),
]

ใน views.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})

สร้าง templates/home.html:

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

โหลด CSS และ JS ของ Django Material จะเพิ่มดีไซน์อัตโนมัติ

เอาต์พุต

สามารถ override Material CSS ด้วยแท็ก <style> ได้