Introduction
This article is showing how to use crispy form tag in Django by using a form. So, there is a web application using Django as its web framework. In order to demonstrate how to use crispy form tag in Django by only using a form, there are several important things which are must available. Those things are python, pip, the environment for the python, django library, django crispy form library. Moreover, last but not least the Django-based framework project itself.
How to Use Crispy Form Tag in Django by Using a Form
There are steps in order for demonstrating the crispy form tag in Django-based framework web application. Off course, it is using the help of a form. So, in order to demonstrate it, there are several steps or requirements where all of them need to be available. In that case, the description for all of those will be available in several parts. The first part will be the preparation part. The next part will be the part for creating and configuring three Django project along with the execution of it.
How to Use Prepare the Environment for Demonstration Crispy Form Tag in Django
In order for demonstrating the crispy form tag in Django, just prepare the following things. The preparation steps exist as follows :
-
First of all, just install Python. In this site, there is an article as a reference for the installation. Read an article with the title of ‘How to Install Python in Linux CentOS 8 virtual server running in VirtualBox Application’ in this link. Actually, the example is in Linux operating system running in the VirtualBox Application. But the main goal for the installation is actually the same. The purpose is to have a python binary executable command. In this example, it is using python with the version of ‘3.8.2’ as follows :
(env) C:\programming\python\myproject>python --version Python 3.8.2 (env) C:\programming\python\myproject>
-
Next, install pip. It is a program for managing python packages. Using pip, it is possible to install Django framework and also Django Crispy Form. For further reference, just visit the article with the title of ‘How to Install pip tool for Managing Package in Ubuntu Linux 18.04’ in this link. Again, although the installation is in Ubuntu Linux, the main purpose is only to have a running pip binary executable command available. The following is the command for installing pip :
apt-get -y install pip
As in the above command, it is a command for installing ‘pip’ in Ubuntu Linux since the installation is using ‘apt’ package management tool.
-
Continue on the next step, it is to have a virtual environment for the python project or the Django-based web framework project. Read the article ‘How to Install virtualenv tool for Creating Python Virtual Environment in Ubuntu Linux 18.04’ in this link. The command for installing virtualenv exist as follows :
apt-get -y install virtualenv
The above command is a command installation pattern for installing virtualenv package. The installation exist in a Debian or Ubuntu-based Linux operating system using ‘apt’ package management tool.
-
After installing the virtualenv package, just execute the following command pattern to create a virtual environment for the python project :
python -m virtualenv -p /python/path virtual_env_name
For further reference, just read an article with the title of ‘How to Create a Python 3.6 Virtual Environment’ exist in this link.
-
Activate the virtual environment. The way for activating the virtual environment exist in this link as an article with the title of ‘How to Activate Python Virtual Environment in Microsoft Windows’. The command for activating the python virtual environment exist as follows :
/path/virtualenv/activate
-
As the virtual environment active, start installing Django Web Framework and also Django Crispy Form. For a reference, just read the article with the title ‘How to Install Django in Linux via Command Line’ in this link. Just execute the following command to install Django Web Framework :
pip install django
Additionally, just execute the following command to install Django Crispy Form :
pip install django-crispy-form
How to Use Create Project using Django-web based Framework
After preparing the necessary environment, just create the project and configure it. The following is the steps to achieve it :
-
As for the project, continue on the previous step, just create the Django-web framework by executing the following command :
django-admin startproject project_name
In this example, just execute as the above pattern :
django-admin startproject myproject
Just read an article with the title of ‘How to Create a New Django Project in Linux via Command Line’ in this link. Execute the above command to create the project so that the following structure will appear as the structure of the project :
C:\programming\python\myproject>tree . Folder PATH listing for volume Windows Volume serial number is 00000027 E003:3593 │ base.html ├───myproject │ asgi.py │ forms.py │ models.py │ settings.py │ urls.py │ views.py │ wsgi.py │ __init__.py └───templates test-crispy.html
-
Prepare and create all the necessary scripts for demonstration. First of all, modify the ‘settings.py’ file exist in the root project by adding the following configuration line :
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'crispy_forms', ]
CRISPY_TEMPLATE_PACK = ‘bootstrap’Just add the line ‘crispy_forms’, in the last line of that part of configuration. Another part is the ‘CRISPY_TEMPLATE_PACK = ‘bootstrap’ line. It is a line for defining the bootstrap as the crispy form template pack.
-
Continue on the above step for preparing the script create the following script. First of all all, just modify the urls.py file exist in the root directory of the Django-based web framework project. In the example, the name is ‘myproject’. The following is the ‘urls.py’ file content :
from django.contrib import admin from django.urls import path, include from django.views.generic import RedirectView from . import views urlpatterns = [ path('admin/', admin.site.urls), path('test-crispy/', views.TestCrispyFormView.as_view(), name='test-crispy'), ]
The most important part is the last line as in the above urls.py file content :
path('test-crispy/', views.TestCrispyFormView.as_view(), name='test-crispy'),
It is for defining the URL of the page containing a form using Django Crispy Form.
-
Next, define the view. As in the above URL definition, the function is ‘TestCrispyFormView’. Just define it as follows :
class TestCrispyFormView(FormView): form_class = TestCrispyForm template_name = 'templates/test-crispy.html'
-
Following after, create a form which is important for defining the necessary form for further display. Just define it in a file with the name of ‘forms.py’. The following is the content :
class TestCrispyForm(forms.Form): first_name = forms.CharField(widget=forms.TextInput( attrs={'placeholder': 'First Name'})) last_name = forms.CharField(widget=forms.TextInput( attrs={'placeholder': 'Last Name'})) email = forms.CharField(widget=forms.TextInput( attrs={'placeholder': 'Email'}))
-
Last but not least, create the html template for viewing the form. In the view function definition, the file name is ‘test-crispy.html’. Just create and put it in the template folder as in the structure display of the project above. Just type the following content in the ‘test-crispy.html’ file :
{% extends 'base.html' %} {% load crispy_forms_tags %} {% block content %} <form method="post"> {% csrf_token %} <div class="form-row"> <div class="form-group col-md-6 mb-0"> {{ form.first_name|as_crispy_field }} </div> </div> <div class="form-row"> <div class="form-group col-md-6 mb-0"> {{ form.last_name|as_crispy_field }} </div> </div> <div class="form-row"> <div class="form-group col-md-6 mb-0"> {{ form.email|as_crispy_field }} </div> </div> <button type="submit">Sign in</button> </form> {% endblock %}
-
As for the base.html file, the following is the content of it :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> </head> <body> <div class="container">{% block content %} {% endblock %}</div> </body> </html>
-
Last but not least, just execute the project by running the following command :
python manage.py runserver
The following is the execution of the file :
(env) C:\programming\python\myproject>python manage.py runserver Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. September 11, 2021 - 10:51:09 Django version 3.2.7, using settings 'myproject.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK.
-
Finally, as accessing the URL ‘localhost:8000/test-crispy’, the output will exist as in the following image :
How to Use Crispy Form Tag in Django by Using a Form