- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to implement django-material in your Django project?
Material Design is a design template that is very popular among developers. It is used at the frontend as CDN. In this article, we are going to see how to use material design on our form widgets and render that form from our views.
Django-material is a library that will apply material design to rendered html file or form widget without CDN.
First, install the django-material package.
pip install django-material
Setup project and app and urls.
In settings.py −
INSTALLED_APPS+=['material']
My app name is "myapp".
Example
In models.py −
from django.db import models # Create your models here. class Data(models.Model): Name=models.CharField(max_length=100) salary = models.CharField(max_length=20)
Here, we created a simple Django model that we will use in forms.
In urls.py −
from django.urls import path from . import views urlpatterns = [ path('', views.home,name="home"), ]
Here, we rendered our view in home url.
In 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})
Here we created a form and rendered it on frontend.
Don't forgot to create a template folder and home.html in it.
In 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>
Here, we created the frontend and loaded the CSS and JS of our Django Material and it will automatically add design on our form.
Output
You can override the material CSS using <style> tag.
- Related Articles
- How to add validation to your Django project?
- How to add Django debug toolbar to your project?
- How to add security to your Django website?
- How to add authorization to your Django website?
- How to Build your own website using Django in Python
- Making your own custom filter tags in Django
- How to install Django in Anaconda?
- How to use memcached in Django?
- How to humanize tags in Django?
- How to prevent session hijacking in Django?
- How to add an UpdateView in Django?
- What's the best place for python classes in a Django project?
- How to add authentication to Django Website?
- Django – Making a Django website more human-like using Humanizer
- Form widget in Django
