Update Center

Resources:

• update-center.html

In this video, we are going to learn how to update center data using function based view.

View

In the views.py file of center, lets create a function based view called "update-center.

def update_center(request, id):

This view takes id as an argument. The id represents the id of the center which we are trying to update.

After that, we have to fetch the center object that matches the given id.

    try:
        center = Center.objects.get(id=id)

If there is no any center instance with given id then, django will raise Center.DoesNotExit exception.

Therefore, in the except block, catch this exception.

    except Center.DoesNotExist:
        raise Http404("Center Not Found")

We will raise HTTP404 whenever any resource is not found in the server. You can import HTTP404 from django.http

from django.http import HttpResponseRedirect, Http404

Now, we have to handle POST and GET request in this view. Whenver the user sends get request, we have to render the form and when the user submits the form, that data will be handled in POST request section of code.

if request.method == "POST":
    pass
# GET request

GET

When the user sends get request we have to return an html file that contains a form to update the data. So, create a context dictionary that stores the form.

context = {
        "form": CenterForm(instance=center),
    }

In the form, when we write instance=center, then django will fill the form data with the current center data.

Now, render this form in the html file.

return render(request, "center/update-center.html", context)

After that, create an html file named "update-center.html" in the center folder. Inside, the file, we include the form component which we have imported, so that we don't need to write code for the form again.

{% include 'components/form.html' with form_name="Update Center" %}

URL

Now, create a new path in urls.py file of center.

path("update/<int:id>/", views.update_center, name="update"),

Since, the update center view takes id as an argument, we need to write int:id in the url path.

After that, add the update center url in the center detail page.

<button class="btn btn-sm btn-success m-1">
          <a href="{% url 'center:update' center.id %}">
            <i class="fas fa-pen"></i> Update Center
          </a>
</button>

[Run the development server and see the changes]

POST

Now, lets handle the post request in the update_center view. When the user submits the form data, that data will be handled in the POST request section.

First of all, create a form and instantiate that form with the form data.

form = CenterForm(request.POST, instance = center)

Make sure you don't forget to write instance = center, because while performing update operation, django needs to know that which instance of data we are updating.

After that, if the form is valid, we will save the form and then we will redirect the user to center detail page.

if form.is_valid():
    form.save()
    return HttpResponseRedirect(reverse("center:detail", kwargs={"id": center.id} ))

If the form is invalid, we have to render the form again back to the user.

else:
    return render(request, "center/update-center.html", {"form": form})

[Run the development server and see the changes.]

[Complete Code]

def update_center(request, id):
    try:
        center = Center.objects.get(id=id)
    except Center.DoesNotExist:
        raise Http404("Center Not Found")
    if request.method == "POST":
        form = CenterForm(request.POST, instance = center)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect(reverse("center:detail", kwargs={"id": center.id} ))
        else:
            return render(request, "center/update-center.html", {"form": form})
    context = {
        "form": CenterForm(instance=center),
    }
    return render(request, "center/update-center.html", context)

Templates

Currently, our center update page looks ugly. So, lets make it more attractive.

I have attached center-update.html file in the resources section. Download it and copy its content and paste it in the center-update.html file.

{% extends 'mysite/base.html' %} 

{% block title %} 
    <title>Update Center</title>
{% endblock title %} 

{% block content %}
<div class="card p-3">
  <div class="card-body">
    <h4 class="mb-3">Fill the following details to update this center</h4>
    {% include "components/form.html" with form_name="Update Center" %}
  </div>
</div>
{% endblock content %}

Now, our center update page looks much more great.