Delete Center

Resources:

• delete-center.html

In this video, we are going to learn how to perform delete operation on center data from a function based view.

View

First of all, create a view named delete_center.

def delete_center(request, id):

This view takes id as an argument. This id represents the center id which are are trying to delete.

First of all, we have to fetch the center instance that matches with given id from our database.

try:
    center = Center.objects.get(id=id)
except Center.DoesNotExist:
    raise Http404("Center Not Found")

If there is no center instance with given id, we have to raise HTTP404 exception.

After that in this view, we have to handle GET and POST request. When the user sends get request to this view, we will ask the user to confirm the delete operation. Once, the user confirms the data that has to be deleted, the user will submit the delete request which we are going to handle via POSt request.

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

GET

In the get request, first create a context that stores the center data.

context = {
        "center": center,
    }

After that, we have to render the delete-center page.

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

Now, create delete-center.html page in the center folder of templates.

Then include the form component. {% include "components/form.html" with form_name="Delete Center" %}

Since, we are not passing any form to this delete-center page from our context, so this form component will not display any form field. But there is one hiddle form field for csrf token. We have to include that csrf token while performing delete operation using POST request. So, I included this form component in the delete-center page.

URL

Now, lets configure the url for the delete-center view. Add a new url path for delete_center view in urls.py file.

path("delete/<int:id>/", views.delete_center, name="delete"),

Now, add this url in the center detail page.

<button class="btn btn-sm btn-danger m-1">
          <a href="{% url 'center:delete' center.id %}">
            <i class="fas fa-trash"></i> Delete Center
          </a>
</button>

[Run the development server and see the changes and see the hidden csrf field.]

POST

Now, In the post request section, we have to delete the center object.

if request.method == "POST":
    center.delete()

After that, redirect the user to the center list page.

return HttpResponseRedirect(reverse("center:list"))

[Run the development server and perform the delete operation.]

[Complete Code]

def delete_center(request, id):
    try:
        center = Center.objects.get(id=id)
    except Center.DoesNotExist:
        raise Http404("Center Not Found")
    if request.method == "POST":
        center.delete()
        return HttpResponseRedirect(reverse("center:list"))
    context = {
        "center": center,
    }
    return render(request, "center/delete-center.html", context)

Templates

Currently, our delete center page looks ugly. So, lets make it little attractive.

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

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

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

{% block content %}
<div class="card p-3">
    <div class="card-body">
        <h4>Are you sure you want to delete "{{ center.name }}" ?</h4>
        {% include "components/form.html" with form_name="Delete Center"  %}
    </div>
</div>
{% endblock content %}

[Run the development center and see the changes.]

Git

Now add the changes to the staging area.

git add .

After that, commit the changes.

git commit -m "Added Center CRUD Views"

Then push the changes to the remote repository.

git push origin main