Difference between revisions of "Python-Django/C2/Creating-Forms-in-Django/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 19: Line 19:
  
 
* Create a '''Django form'''
 
* Create a '''Django form'''
−
* Create '''views '''to handle '''form''' submission
+
* Create '''views '''to handle '''form submission'''
 
|-
 
|-
 
|| Slide: System Requirements
 
|| Slide: System Requirements
 
|| To record this tutorial, I am using  
 
|| To record this tutorial, I am using  
  
−
* '''Ubuntu Linux 16.04 OS'''
+
* '''Ubuntu Linux''' 16.04 OS
−
* '''Python 3.5 '''
+
* '''Python''' 3.5
 
* '''Python 3.4-venv '''or higher
 
* '''Python 3.4-venv '''or higher
 
* '''gedit Text Editor '''and
 
* '''gedit Text Editor '''and
−
* '''Firefox '''web browser
+
* '''Firefox web browser'''
  
 
|-
 
|-
Line 34: Line 34:
 
|| To follow this tutorial, you need to know
 
|| To follow this tutorial, you need to know
  
−
* How to''' '''create''' models '''and '''HTML templates''' in''' Django'''
+
* How to create''' models '''and '''HTML templates''' in''' Django'''
 
* If not, then please go through the prerequisite tutorials in this website.
 
* If not, then please go through the prerequisite tutorials in this website.
 
|-
 
|-
 
|| Slide: Forms
 
|| Slide: Forms
 
||  
 
||  
−
* '''Forms''' are used to get data from the user
+
* '''Forms''' are used to get '''data''' from the user
−
* The data is processed on the '''server''' side
+
* The '''data''' is processed on the '''server''' side
−
* Users can provide the data using '''form elements''' like '''text fields, options,''' etc.
+
* Users can provide the '''data''' using '''form elements''' like '''text fields, options,''' etc.
 
* '''Django '''has '''inbuilt libraries''' that build '''forms''' easily
 
* '''Django '''has '''inbuilt libraries''' that build '''forms''' easily
  
Line 49: Line 49:
  
 
Press CTRl+ALT+T simultaneously
 
Press CTRl+ALT+T simultaneously
−
|| Let us open the '''terminal '''by pressing '''Ctrl''', '''Alt''' and '''T '''keys simultaneously on the keyboard.
+
|| Let us open the '''terminal '''by pressing '''Ctrl, Alt''' and '''T '''keys simultaneously on the keyboard.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
Line 75: Line 75:
 
To do so, create a file '''forms dot py''' in the '''blog''' directory.
 
To do so, create a file '''forms dot py''' in the '''blog''' directory.
  
−
Type the command as shown.
+
Type the '''command''' as shown.
 
|-
 
|-
 
|| [forms.py]Type:
 
|| [forms.py]Type:
Line 118: Line 118:
  
 
'''class Meta: '''
 
'''class Meta: '''
−
|| To provide data to the '''Form class''', we are using an inner-'''class Meta.'''
+
|| To provide '''data''' to the '''Form class''', we are using an inner '''class Meta.'''
 
|-
 
|-
 
|| [forms.py] Highlight
 
|| [forms.py] Highlight
Line 128: Line 128:
  
 
'''fields = ['name']'''
 
'''fields = ['name']'''
−
|| In '''Meta class''', '''Fields''' '''attribute''' is used to select the '''fields''' to use in the '''form.'''
+
|| In '''Meta class, Fields attribute''' is used to select the '''fields''' to use in the '''form.'''
 
|-
 
|-
 
|| [forms.py] Highlight
 
|| [forms.py] Highlight
Line 150: Line 150:
 
|-
 
|-
 
|| [forms.py] Highlight the complete code
 
|| [forms.py] Highlight the complete code
−
|| Now, we have defined '''Django form''' using''' models.'''
+
|| Now, we have defined '''Django form''' using '''models.'''
 
|-
 
|-
 
| Press Ctrl+S
 
| Press Ctrl+S
Line 156: Line 156:
 
|-
 
|-
 
| Switch to Terminal
 
| Switch to Terminal
−
| Switch back to the '''terminal''' to create a '''template''' file to call our '''Django form.'''
+
| Switch back to the '''terminal''' to create a '''template''' file to '''call''' our '''Django form.'''
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
Line 163: Line 163:
 
|| Create an '''HTML''' file '''add underscore blog '''in '''templates''' directory.
 
|| Create an '''HTML''' file '''add underscore blog '''in '''templates''' directory.
  
−
Type the command as shown
+
Type the '''command''' as shown.
 
|-
 
|-
 
|| [add_blog.html]Type:
 
|| [add_blog.html]Type:
Line 197: Line 197:
 
We have to use the '''csrf_token tag''' in a '''template''' which uses the '''form POST request.'''
 
We have to use the '''csrf_token tag''' in a '''template''' which uses the '''form POST request.'''
  
−
'''Django''' provides built in '''CSRF''' protection to protect the '''server''' from malicious websites.
+
'''Django''' provides '''built-in CSRF''' protection to protect the '''server''' from malicious websites.
 
|-
 
|-
 
|| [add_blog.html] Highlight
 
|| [add_blog.html] Highlight
Line 207: Line 207:
  
 
'''<input type="submit" value="Add Blog" />'''
 
'''<input type="submit" value="Add Blog" />'''
−
|| Here, we have created a button''' '''to submit the '''form.'''
+
|| Here, we have created a button to submit the '''form.'''
 
|-
 
|-
 
|| [add_blog.html] Highlight the complete code
 
|| [add_blog.html] Highlight the complete code
−
|| We have created a '''HTML''' '''template''' to use a '''form''' passed through '''context'''.
+
|| We have created a '''HTML template''' to use a '''form''' passed through '''context'''.
 
|-
 
|-
 
| Press Ctrl+S
 
| Press Ctrl+S
Line 224: Line 224:
  
  
−
Type the command as shown
+
Type the '''command''' as shown.
 
|-
 
|-
 
|| [views.py]:
 
|| [views.py]:
Line 276: Line 276:
  
 
'''return render(request, 'add_blog.html', context)'''
 
'''return render(request, 'add_blog.html', context)'''
−
|| We are now in '''views.py '''file
+
|| We are now in '''views.py '''file.
  
  
Line 295: Line 295:
  
  
−
Update the '''get_blogs '''function'''.'''
+
Update the '''get_blogs function'''.
  
  
Line 306: Line 306:
  
  
−
Next to the '''get_blogs''' function, let us add''' add_blog '''function'''.'''
+
Next to the '''get_blogs function''', let us add '''add_blog function'''.
  
  
Line 333: Line 333:
  
 
'''form = BlogForm(request.POST) '''
 
'''form = BlogForm(request.POST) '''
−
|| We have created an instance of the '''BlogForm class object''' using the data from the '''POST request.'''
+
|| We have created an '''instance''' of the '''BlogForm class object''' using the '''data''' from the '''POST request.'''
  
  
−
All the fields from the '''form''' are in '''request.POST'''
+
All the '''fields''' from the '''form''' are in '''request.POST'''
 
|-
 
|-
 
|| [views.py] Highlight''' '''
 
|| [views.py] Highlight''' '''
Line 349: Line 349:
 
|| Next, '''is_valid() method''' is used to check whether the entered '''data''' is valid or not.  
 
|| Next, '''is_valid() method''' is used to check whether the entered '''data''' is valid or not.  
  
−
If the '''data''' is valid then '''is_valid()''' returns '''True''', otherwise it returns '''False.'''
+
If the '''data''' is valid then '''is_valid() function''' returns '''True'''.
 +
 
 +
Otherwise it returns '''False.'''
 
|-
 
|-
 
|| [views.py] Highlight  
 
|| [views.py] Highlight  
  
 
'''else part''' of def add_blog(request)
 
'''else part''' of def add_blog(request)
−
|| In the '''Else statement, '''<span style="background-color:#ffffff;">when the '''data''' is empty or invalid, it will render the '''form''' with errors.
+
|| In the '''Else statement, '''when the '''data''' is empty or invalid, it will return the '''form''' with errors.
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
  
 
'''form.save()'''
 
'''form.save()'''
−
| When the '''form data''' is valid, we '''save''' a new '''Blog''' '''object''' from the '''form.'''
+
| When the '''form data''' is valid, we '''save''' a new '''Blog object''' from the '''form.'''
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
  
 
'''return HttpResponse("Blog created")'''
 
'''return HttpResponse("Blog created")'''
−
|| After successful addition of the '''blog''', let’s return something.
+
|| After successful addition of the '''blog''', let’s '''return''' something.
  
  
Line 374: Line 376:
 
|| If the '''request''' is '''GET_ request''', then this will be executed.
 
|| If the '''request''' is '''GET_ request''', then this will be executed.
  
−
An empty '''form''' instance of '''BlogForm''' is created.
+
An empty '''form instance''' of '''BlogForm''' is created.
  
−
Then, the '''form''' instance is added to '''context'''.
+
Then, the '''form instance''' is added to '''context'''.
  
 
This '''context''' will be provided to the '''HTML template '''while rendering.
 
This '''context''' will be provided to the '''HTML template '''while rendering.
Line 383: Line 385:
  
 
'''form = BlogForm(request.POST)'''
 
'''form = BlogForm(request.POST)'''
−
|| This is what will happen when a '''form''' is submitted using a '''POST request'''.
+
|| This is what will happen when a '''form''' is '''submitted''' using a '''POST request'''.
  
−
A '''form''' instance is created and data from the request is populated with it.
+
A '''form instance''' is created and data from the '''request''' is populated with it.
  
 
This is called “'''binding data to the form'''”.
 
This is called “'''binding data to the form'''”.
  
−
It is now a '''bound''' '''form'''
+
It is now a '''bound form'''
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
Line 398: Line 400:
  
 
'''from .models import Blog, Article'''
 
'''from .models import Blog, Article'''
−
|| Here we can see that, the necessary '''modules''' have already been imported.
+
|| Here we can see that, the necessary '''modules''' have already been '''imported'''.
 
|-
 
|-
 
|| [views.py] Highlight  
 
|| [views.py] Highlight  
Line 415: Line 417:
 
Type gedit blog/urls.py & [Enter]
 
Type gedit blog/urls.py & [Enter]
  
−
|| Now, we will insert the path in the '''URL''' '''configuration.'''
+
|| Now, we will insert the path in the '''URL configuration.'''
  
−
Type the command as shown.
+
Type the '''command''' as shown.
 
|-
 
|-
 
|| [urls.py]
 
|| [urls.py]
Line 451: Line 453:
 
|| In the new '''terminal tab''', go to '''my-django''' directory using the '''cd command.'''
 
|| In the new '''terminal tab''', go to '''my-django''' directory using the '''cd command.'''
  
−
Activate the '''virtual''' '''environment.'''
+
Activate the '''virtual environment.'''
 
|-
 
|-
 
|| [Terminal tab 2] type cd mysite
 
|| [Terminal tab 2] type cd mysite
Line 465: Line 467:
 
|| Now we will call the '''view function add underscore blog.'''
 
|| Now we will call the '''view function add underscore blog.'''
  
−
On the '''web''' '''browser''', type the '''URL''' as shown  
+
Open the '''web browser''', and type the '''URL''' as shown and press '''Enter.'''
−
 
+
−
And press '''Enter.'''
+
 
|-
 
|-
 
|| [browser]
 
|| [browser]
 
Point to the form
 
Point to the form
−
|| Here, we see a '''form''' with a labeled text '''Name'''  
+
|| Here, we see a '''form''' with a labelled text '''Name'''.
  
 
Along with the '''input textbox''' and a '''Submit''' button.
 
Along with the '''input textbox''' and a '''Submit''' button.
Line 483: Line 483:
 
|-
 
|-
 
|| [browser] Click '''Add Blog'''
 
|| [browser] Click '''Add Blog'''
−
|| Click on the '''Add Blog''' button to save'''.'''
+
|| Click on the '''Add Blog''' button to save.
 
|-
 
|-
 
|| [browser]
 
|| [browser]
Line 490: Line 490:
 
|| Here, we see an error message '''“This field is required.”'''
 
|| Here, we see an error message '''“This field is required.”'''
  
−
So the '''blog''' is not created with invalid data.
+
So the '''blog''' is not created with invalid '''data'''.
 
|-
 
|-
 
|| [gedit] blog/views.py highlight
 
|| [gedit] blog/views.py highlight
Line 501: Line 501:
  
 
return render(request, 'add_blog.html', context)
 
return render(request, 'add_blog.html', context)
−
|| In this way we can handle the invalid data.
+
|| In this way we can handle the invalid '''data'''.
  
  
Line 519: Line 519:
  
 
(pointing to the web page)
 
(pointing to the web page)
−
|| Now, after submission, we get the response as '''Blog created.'''
+
|| Now, after '''submission''', we get the response as '''Blog created.'''
 
|-
 
|-
 
|| Switch to views.py file from browser
 
|| Switch to views.py file from browser
Line 561: Line 561:
  
  
−
Pause the tutorial and update the tutorial as shown.
+
Pause the tutorial and update the code as shown.
  
  
Line 571: Line 571:
  
 
'''blog = Blog.objects.get(id=blog_id)'''
 
'''blog = Blog.objects.get(id=blog_id)'''
−
|| When '''id''' matches with''' blog id''', '''get function''' returns the corresponding '''blog object.'''
+
|| When '''id''' matches with''' blog id, get function returns''' the corresponding '''blog object.'''
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
Line 578: Line 578:
  
 
'''blog = Blog()'''
 
'''blog = Blog()'''
−
|| In the '''Else statement''', an '''unbound''' instance of the '''Blog''' is created.
+
|| In the '''Else statement''', an '''unbound instance''' of the '''Blog''' is created.
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
Line 600: Line 600:
  
 
'''blog_form = BlogForm(instance=blog)'''
 
'''blog_form = BlogForm(instance=blog)'''
−
|| Here, we create a '''form''' instance '''BlogForm.'''
+
|| Here, we create a '''form instance BlogForm.'''
 
|-
 
|-
 
|| [views.py] Highlight
 
|| [views.py] Highlight
  
 
'''instance=blog'''
 
'''instance=blog'''
−
|| '''instance '''equal to '''blog '''will initialize the values of the '''form fields'''.
+
|| '''instance equal to blog '''will initialize the values of the '''form fields'''.
  
 
These values are provided by the '''blog object'''.  
 
These values are provided by the '''blog object'''.  
Line 645: Line 645:
  
 
</html>
 
</html>
−
|| We are now in '''add_blog.html''' file.
+
||
  
  
−
Replace the code as shown here.
 
  
  
 +
Replace the code as shown here.
  
  
Line 684: Line 684:
  
 
path('add_blog/'''<int:blog_id>/'''', views.add_blog, name='edit_blog'),
 
path('add_blog/'''<int:blog_id>/'''', views.add_blog, name='edit_blog'),
−
|| Here, we have included '''add_blog path''' with '''int blog'''_'''id'''.
+
|| Here, we have included '''add_blog path''' with '''int blog_id'''.
  
  
−
So that we can edit the existing '''blog object '''using '''blog''' '''id.'''
+
So that we can edit the existing '''blog object '''using '''blog id.'''
 
|-
 
|-
 
|| [urls.py] Highlight
 
|| [urls.py] Highlight
Line 695: Line 695:
  
 
path('add_blog/<int:blog_id>/', views.add_blog, '''name='edit_blog''''),
 
path('add_blog/<int:blog_id>/', views.add_blog, '''name='edit_blog''''),
−
|| The two '''URL paths''', “'''add blog'''” and “'''edit''' '''blog'''” are different.
+
|| The two '''URL paths, "add blog"''' and '''"edit blog"''' are different.
  
  
Line 710: Line 710:
  
 
Type gedit blog/templates/blog/blogs.html & [Enter]
 
Type gedit blog/templates/blog/blogs.html & [Enter]
−
|| Switch to the first '''terminal''',
+
|| Switch to the first '''terminal'''.
  
−
type the command as shown
+
Type the ''command'' as shown.
 
|-
 
|-
 
|| [blogs.html] Type:
 
|| [blogs.html] Type:
Line 746: Line 746:
  
 
</html>
 
</html>
−
|| Update the code as shown here.
+
||  
 +
 
 +
 
 +
 
 +
 
 +
 
 +
Update the code as shown here.
 +
 
 +
 
 +
 
 +
 
 +
 
 
|-
 
|-
 
|| [blogs.html] Highlight
 
|| [blogs.html] Highlight
Line 761: Line 772:
  
 
'''<nowiki><p>No Blogs are available.</p></nowiki>'''
 
'''<nowiki><p>No Blogs are available.</p></nowiki>'''
−
|| If there is no '''blogs''' available,''' else statement '''returns '''No Blogs are available'''.  
+
|| If there is no '''blogs''' available,''' else statement returns "No Blogs are available"'''.  
 
|-
 
|-
 
| Press Ctrl+S
 
| Press Ctrl+S
Line 776: Line 787:
  
 
http://localhost:8000/blogs/get_blogs/ [Enter]
 
http://localhost:8000/blogs/get_blogs/ [Enter]
−
|| In the address bar,<span style="color:#000000;"> type the '''URL''' as shown and press '''Enter.'''
+
|| In the address bar, type the '''URL''' as shown and press '''Enter.'''
 
|-
 
|-
 
|| [browser]
 
|| [browser]
Line 793: Line 804:
  
  
−
It will '''redirect''' to the '''edit form''' page.
+
It will redirect to the '''edit form''' page.
 
|-
 
|-
 
|| [browser]
 
|| [browser]
Line 827: Line 838:
  
 
* Create a '''Django form'''
 
* Create a '''Django form'''
−
* Create '''views '''to handle '''form''' submission
+
* Create '''views '''to handle '''form submission'''
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
−
|| As an assignment,* Create and edit '''Article '''using''' Django Form'''
+
|| As an assignment,
 +
* Create and edit '''Article '''using''' Django Form'''
  
 
|-
 
|-

Latest revision as of 08:42, 10 October 2019

Django/C2/Creating-Forms-in-Django/English

Title of script: Creating Forms in Django

Keywords: Video tutorial, Django views, Django Forms


Visual cue Narration
Slide: Creating Forms in Django Hello and Welcome to the spoken tutorial on “Creating Forms in Django”
Slide: Learning Objectives In this tutorial, we will learn to:
  • Create a Django form
  • Create views to handle form submission
Slide: System Requirements To record this tutorial, I am using
  • Ubuntu Linux 16.04 OS
  • Python 3.5
  • Python 3.4-venv or higher
  • gedit Text Editor and
  • Firefox web browser
Slide: Prerequisites To follow this tutorial, you need to know
  • How to create models and HTML templates in Django
  • If not, then please go through the prerequisite tutorials in this website.
Slide: Forms
  • Forms are used to get data from the user
  • The data is processed on the server side
  • Users can provide the data using form elements like text fields, options, etc.
  • Django has inbuilt libraries that build forms easily
Open a Terminal window


Press CTRl+ALT+T simultaneously

Let us open the terminal by pressing Ctrl, Alt and T keys simultaneously on the keyboard.
[Terminal]

cd my-django [Enter]

Now using the cd command, go to the folder my hyphen django which we created earlier.
[Terminal]

Type source myapp_env/bin/activate

and press Enter

Activate the virtual environment myapp underscore env
[Terminal] cd mysite [Enter] Then go to the mysite folder using the cd command.
Here onwards, please remember to press the Enter key after typing each command.
[Terminal]

Type gedit blog/forms.py & [Enter]

Let us now create a form in Django using models.

To do so, create a file forms dot py in the blog directory.

Type the command as shown.

[forms.py]Type:

from blog.models import Blog, Article

from django import forms


class BlogForm(forms.ModelForm):

class Meta:

model = Blog

fields = ['name']

class ArticleForm(forms.ModelForm):

class Meta:

model = Article

fields = ['title', 'body', 'draft']

We are now in forms.py file.

Type the code as shown here.

[forms.py] Highlight


class BlogForm(forms.ModelForm):

class ArticleForm(forms.ModelForm):

Django provides a class ModelForm to create a Form from a Model.


The Form is generated using the model definition.

[forms.py] Highlight

class Meta:

To provide data to the Form class, we are using an inner class Meta.
[forms.py] Highlight

model = Blog

We are assigning the Blog model which is used to generate Form.
[forms.py] Highlight

fields = ['name']

In Meta class, Fields attribute is used to select the fields to use in the form.
[forms.py] Highlight

class ArticleForm(forms.ModelForm):

class Meta:

model = Article fields = ['title', 'body', 'draft']

Similarly we have defined an inner class named Meta with fields for the Article Form.
[forms.py] Highlight

from blog.models import Blog, Article

Here, we have imported our models, Blog and Article.
[forms.py] Highlight

from django import forms

To create django forms, we need to import forms from Django.
[forms.py] Highlight the complete code Now, we have defined Django form using models.
Press Ctrl+S Save the file.
Switch to Terminal Switch back to the terminal to create a template file to call our Django form.
[Terminal]

Type gedit blog/templates/add_blog.html & [Enter]

Create an HTML file add underscore blog in templates directory.

Type the command as shown.

[add_blog.html]Type:


<html>

<body>

<form action="" method="POST">

{% csrf_token %}

{{ form }}

<input type="submit" value="Add Blog" />

</form>

</body>

</html>

We are now in add_blog.html,


Type the code as shown here.

[add_blog.html] Highlight

{% csrf_token %}

CSRF - Cross Site Request Forgery Protection

We have to use the csrf_token tag in a template which uses the form POST request.

Django provides built-in CSRF protection to protect the server from malicious websites.

[add_blog.html] Highlight

{{ form }}

Here we have included our context variable to display our Django Form.
[add_blog.html] Highlight

<input type="submit" value="Add Blog" />

Here, we have created a button to submit the form.
[add_blog.html] Highlight the complete code We have created a HTML template to use a form passed through context.
Press Ctrl+S Save the file.
Switch to Terminal Switch to the terminal.
[Terminal]

Type gedit blog/views.py & [Enter]

Open the file views.py to use this template.


Type the command as shown.

[views.py]:


from django.shortcuts import render

from django.http import HttpResponse

from .models import Blog, Article

from blog.forms import BlogForm, ArticleForm


# Create your views here.


def index(request):

return HttpResponse("Hello World")


def get_blogs(request):

blogs = Blog.objects.all()

context = {'blogs': blogs}

return render(request, 'blog/blogs.html', context)


def add_blog(request):

if request.method == 'POST':

form = BlogForm(request.POST)

if form.is_valid():

form.save()

return HttpResponse("Blog created")

else:

context = {'form': form}

return render(request, 'add_blog.html', context)

context = {'form': BlogForm()}

return render(request, 'add_blog.html', context)

We are now in views.py file.


Type the code as shown here.



Import the BlogForm and ArticleForm






Update the get_blogs function.






Next to the get_blogs function, let us add add_blog function.


Type the code as shown here.




Here we have modified the function get_blog to get blog objects.


Also, we have defined a function add_blog.


[views.py] Highlight

if request.method == 'POST':

If this is a POST request, we need to process the form data.
[views.py] Highlight


form = BlogForm(request.POST)

We have created an instance of the BlogForm class object using the data from the POST request.


All the fields from the form are in request.POST

[views.py] Highlight

from blog.forms import BlogForm

We have imported the BlogForm from our blog’s form.
[views.py] Highlight


if form.is_valid():

Next, is_valid() method is used to check whether the entered data is valid or not.

If the data is valid then is_valid() function returns True.

Otherwise it returns False.

[views.py] Highlight

else part of def add_blog(request)

In the Else statement, when the data is empty or invalid, it will return the form with errors.
[views.py] Highlight

form.save()

When the form data is valid, we save a new Blog object from the form.
[views.py] Highlight

return HttpResponse("Blog created")

After successful addition of the blog, let’s return something.


So the return statement returns HttpResponse with the string “Blog created”.

[views.py] Highlight

context = {'form': BlogForm()}

If the request is GET_ request, then this will be executed.

An empty form instance of BlogForm is created.

Then, the form instance is added to context.

This context will be provided to the HTML template while rendering.

[views.py] Highlight

form = BlogForm(request.POST)

This is what will happen when a form is submitted using a POST request.

A form instance is created and data from the request is populated with it.

This is called “binding data to the form”.

It is now a bound form

[views.py] Highlight

from django.shortcuts import render

from django.http import HttpResponse

from .models import Blog, Article

Here we can see that, the necessary modules have already been imported.
[views.py] Highlight

def add_blog(request) section

We have added a function in our views to add Blog with use of Form data.
Press Ctrl+S Save the file.
Switch to Terminal Switch to the Terminal.
[Terminal]

Type gedit blog/urls.py & [Enter]

Now, we will insert the path in the URL configuration.

Type the command as shown.

[urls.py]

Type path('add_blog/', views.add_blog, name='add_blog'),

We are now in urls.py file in blog app.

Insert the new path as shown here.

[urls.py] We have added the path in blog app Urls.

And there are no changes in the root Urls.

Press Ctrl+S Save the file.
Switch to Terminal Switch to the Terminal.
[Terminal]

Press CTRL+SHIFT+T

For our convenience, let us run the Django server in a separate terminal.

Press Shift, Ctrl and T keys simultaneously.

[Terminal Tab 2]Type: cd ..

Type source myapp_env/bin/activate

and press Enter

In the new terminal tab, go to my-django directory using the cd command.

Activate the virtual environment.

[Terminal tab 2] type cd mysite

Type python manage.py runserver [Enter]

Now go to the mysite folder using cd command

Start the server.

Open a browser and type

http://localhost:8000/blogs/add_blog

Now we will call the view function add underscore blog.

Open the web browser, and type the URL as shown and press Enter.

[browser]

Point to the form

Here, we see a form with a labelled text Name.

Along with the input textbox and a Submit button.

[browser] (Cursor at text box)

press space key

Let us first try with some invalid data.

In the textbox enter spaces by pressing Space key multiple times.

[browser] Click Add Blog Click on the Add Blog button to save.
[browser]

(pointing to the error message)

Here, we see an error message “This field is required.”

So the blog is not created with invalid data.

[gedit] blog/views.py highlight

if form.is_valid():...

else:

context = {'form': form}

return render(request, 'add_blog.html', context)

In this way we can handle the invalid data.


We check if the form is valid or not and handle the request accordingly.

[browser] (Cursor at text box)

Type MY BLOG

Now, let us type MY BLOG in the text box.
[browser]

Click Add Blog

Click on the Add Blog button to save the Blog.
[browser]

(pointing to the web page)

Now, after submission, we get the response as Blog created.
Switch to views.py file from browser Let us now move to our views.py file to edit the existing Blog.
[views.py]Type:


def add_blog(request, blog_id=None):

if blog_id:

blog = Blog.objects.get(id=blog_id)

else:

blog = Blog()

if request.method == 'POST':

form = BlogForm(request.POST, instance=blog)

if form.is_valid():

form.save() return

get_blogs(request) else:

context = {'form': form}

return render(request, 'add_blog.html', context)

blog_form = BlogForm(instance=blog)

context = {'form': blog_form, 'blog': blog}

return render(request, 'add_blog.html', context)

Modify the function add_blog in the views.py file as shown here.



Pause the tutorial and update the code as shown.


[views.py] Highlight

if blog_id

blog = Blog.objects.get(id=blog_id)

When id matches with blog id, get function returns the corresponding blog object.
[views.py] Highlight

else:

blog = Blog()

In the Else statement, an unbound instance of the Blog is created.
[views.py] Highlight

if form.is_valid():

form.save()

return get_blogs(request)

When the form validation is done, the changes are saved.


Return statement contains our view function get_blogs.

[views.py] Highlight

get_blogs(request)

The view function get_blogs is used to get the blog objects that we have created.
[views.py] Highlight

blog_form = BlogForm(instance=blog)

Here, we create a form instance BlogForm.
[views.py] Highlight

instance=blog

instance equal to blog will initialize the values of the form fields.

These values are provided by the blog object.

[views.py] Highlight

context = {'form': blog_form, 'blog': blog}

Here, we set the context variable as "form" and "blog".
[views.py] Highlight

'blog': blog

blog is the context variable that contains Blog objects as key value.
Press Ctrl+S Save the file.
Switch to templates/add_blog.html file Now, switch to add_blog.html file under templates.
[add_blog.html]Type:


<html>

<body>

<form action="/blogs/add_blog/{{ blog.id }}/" method="POST">

{% csrf_token %}

{{ form }}

<input type="submit" value="Submit" />

</form>

</body>

</html>



Replace the code as shown here.




[add_blog.html] Highlight

<form action="/blogs/add_blog/{{ blog.id }}/" method="POST">

In form action, include the reference path to the existing blog object.
[add_blog.html]

Highlight the complete code

So now we can edit our existing blog object using id.
Press Ctrl+S Save the file.
Switch to blog/urls.py Switch to urls.py file in the blog directory to include the path.
[urls.py] Type

path('add_blog/<int:blog_id>/', views.add_blog, name='edit_blog'),

Add a new URL path as shown here.
[urls.py] Highlight


path('add_blog/<int:blog_id>/', views.add_blog, name='edit_blog'),

Here, we have included add_blog path with int blog_id.


So that we can edit the existing blog object using blog id.

[urls.py] Highlight


path('add_blog/', views.add_blog, name='add_blog'),

path('add_blog/<int:blog_id>/', views.add_blog, name='edit_blog'),

The two URL paths, "add blog" and "edit blog" are different.


But handled by the same view function.

Press Ctrl+S Save the file.
Switch to Terminal Let us now edit blogs.html
[Terminal Tab 1]


Type gedit blog/templates/blog/blogs.html & [Enter]

Switch to the first terminal.

Type the command as shown.

[blogs.html] Type:


<!DOCTYPE html>

<html>

<body>

<h3>Edit Blog: </h3> <nowiki> {% if blogs %} <nowiki> <ul>

{% for blog in blogs %}

<li>{{blog.name}}<a href='/blogs/add_blog/{{blog.id}}'> [Edit]</a></li>

{% endfor %}

{% else %}

<p>No Blog articles are available.</p>

</ul>

{% endif %}

</body>

</html>



Update the code as shown here.



[blogs.html] Highlight

<li>{{blog.name}}<a href='/blogs/add_blog/{{blog.id}}'> [Edit]</a></li>

Here we have added the link that redirect to edit existing blog.
[blogs.html] Highlight

{{ blog.name }}

blog.name will display the particular blog object that matches with its blog id.
[blogs.html] Highlight

<p>No Blogs are available.</p>

If there is no blogs available, else statement returns "No Blogs are available".
Press Ctrl+S Save the file.
We have now set everything to edit the existing Blog title.
Switch to browser Now, switch to the browser.
[browser] Open a browser and type


http://localhost:8000/blogs/get_blogs/ [Enter]

In the address bar, type the URL as shown and press Enter.
[browser]

(pointing to the web page)

Here, we see the Blogs which we have created earlier in this series with an edit option.


Blog models which we have created in this tutorial are also available.

[browser]


Click Edit (beside blog name MY BLOG)

Beside blog name MY BLOG, click on Edit.


It will redirect to the edit form page.

[browser]

Type Newly Edited Blog (in Text Box)

Now, change the blog name into “Newly Edited Blog”.
[browser]

Click Submit

Then click on the Submit button.

We see the blog name has been changed from My Blog to Newly Edited Blog.

Switch to the terminal. This is how we create and edit a blog using Django Form.

Switch to the second terminal.

Terminal] Press Ctrl+C keys

Type deactivate [Enter]

Stop the server.

And deactivate the virtual environment.

Switch to Slide With this, we come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt to
  • Create a Django form
  • Create views to handle form submission
Slide: Assignment As an assignment,
  • Create and edit Article using Django Form
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum for specific questions: Please post your timed queries in this Forum.
Slide: FOSSEE to answer questions Please post your general or technical questions in this Forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide: Thanks Slide This script has been contributed by Thiagarajar College of Engineering and the FOSSEE Project, IIT Bombay.

The video has been recorded by Praveen from Spoken Tutorial Project, IIT Bombay.

Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Python-Django/C2/Creating-Forms-in-Django/English&oldid=49356"