🔖 Day18 - Django views for editing and deleting a post

2018 - 06 - 26
🔖 Day18 - Django views for editing and deleting a post
0. [TL:DR] To submit a new post or comment we can provide a blank form and bind it to request.POST, such as form = PostForm(request.POST) in views.py. If we want to edit an existing post or comment, we'd rather see a pre-filled form instead. To do so we need to call the instance.
1. [views function for editing] In this demo, we are going to edit an existing post from Models: Post, via exisiting form Form: PostForm which is also used for submitting new posts. To edit a post:
from .models import Post
from .forms import PostForm
from django.urls import reverse

def edit_post(request, key):
    post = Post.objects.get(pk=key)
    if request.method == 'POST':
        form = PostForm(request.POST, instance=post)
        if form.is_valid():
            form.save()
            url = reverse('postpage', kwargs={'key': key})
            return render(request, 'edit_done.html', {'url': url})
        else:
            form = PostForm(instance=post)
    else:
        form = PostForm(instance=post)
    return render(request, 'edit.html', {'form':form, 'post':post})

In the snippet above, we called instance=post such that the form is pre-filled already upon page visiting. After form.save() you may head back to the post page directly, however if you have a comment form on the same post page, the rendering may try to submit the comment form at the same time due to request.POST. So it is better to render a dummy page edit_done.html after saving the form. By using django.urls.reverse, we can instruct the template to redirect to the original post page url via request.GET method. We will work on the templates later.
2. [views function for deleting] To delete a post, we use the objects method .delete(), the function is simple:
def del_post(request, key):
    post = Post.objects.get(pk=key)
    post.delete()
    return render(request, 'del_done.html')

Similary, a dummy template del_done.html for redirecting is needed.
3. [template for redirecting] As mentioned in the end of Part 1, we need dummy templates (i.e. edit_done.html, del_done.html) which redirect to the post page after successfully updated a post.
<head>
    <meta http-equiv="refresh" content="3; url={{url}}">
</head>

<div align='center'>
    <p>Post Updated Successfully</p>
    <p>Redirecting to the post</p>
</div>

From the views function edit_post in Part 1, the parameter url is passed to this template. Note that the {{url}} should be changed into other page such as index for del_done.html. Through http-equiv='refresh', this dummy page will redirect to the post page in 3 seconds as assigned.
4. [template for the form] Now we are going to create a template for editing the post, i.e. edit.html. To ensure not clicking delete button by mistakes, it is better to build a pop-up dialogue for confirmation. Here I am using Bootstrap to do so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class='modal' id='delModal'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-body bg-danger text-white'>
                Delete this post?
            </div>
            <div class='modal-footer'>
                <button type='button' data-dismiss='modal'>Cancel</button>
                <a href='{% url "delete" key=post.pk %}'>
                    <button type='button'>Delete</button>
                </a>
            </div>
        </div>
    </div>
</div>

<div>
    <form method='POST'>
        {% for field in form %}
        <label for={{field.name}}>{{field.label_tag}}</label>
        {{field}}
        {% endfor %}
        <button type='submit'>Update</button>
        <button type='button' id='delete'>Delete</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
        $('#delete').click(function(){
            $('#delModal').modal('show');
        });
    });
</script>

Note how the script is written to faciliate Bootstrap - Modal component.
5. [setting urlspatterns] Finally, we need to define the urlpatterns in urls.py:
from django.urls import path
from blog import views as bv

urlpattersn=[
        ...
        path('edit/', bv.edit_post, name='edit_post'),
        path('delete/', bv.del_post, name='del_post')
    ]

Comments

Oduvan4ikSype
Error 523 <a href=https://support.cloudflare.com/hc/en-us/articles/115003011431-Troubleshooting-Cloudflare-5XX-errors#523error>origin is unreachable</a>
Aug. 22, 2021, 10:41 a.m.
Stevetew
<center><b><a href=https://vexproxy.com><img src="https://i.ibb.co/dp8n7S1/final22.png">? VexProxy</a></b> is a rotating IPV6, Residential, Movable proxy network which enables users to stock any data from the network using a consolidate of millions of proxies. <b> What are IPV6 proxies and what are they hand-me-down for?</b> An IPv6 surrogate is a plot or software that sits on the limit of a network to translate IPv4 (Internet Treaty style 4) to IPv6. They're tipically acclimatized payment Captcha Solving, Google Crawling, Statistics Meeting, Information Analyzing, Emulating Views. <b>What are rotating residential proxies?</b> A rotating or a Backconnect surrogate relies on an sound network of proxies, rotating between them either periodically or randomly, wise crap-shooter protecting your privacy and allowing to cause a boisterous number of search requests. Your connection and IP is being rotated with every action you assume, which prevents data footprints, ensures extra safety and lop off ban-rate. Find more - https://VexProxy.com <b>What are mobile proxies?</b> A Motorized agent network consists of valid 3G/4G connections assigned to individuals past their unfixed carrier. Travelling proxies are the IPs of real-user devices, making them undetectable when worn correctly. There are distinct types of such proxies: Shared IPs and Exclusive IPs. Permit coupon system <b>STARTUP</b> and pocket a <b>20% discount</b> on any of our products. You can also improve of a AT LARGE LAWSUIT on all of our "FREE-TRIAL" packages. This alter is consummately automated in place of any of our users. Prodigious after Account directing, Restrictive product releases, Buy research and numbers of other tasks you might contemplate of. Law here - https://VexProxy.com We also bid Dwell Heart-to-heart Relief 7 days a week in cause you suffer with any questions. <b>Starting Prices:</b> Residential: 2$ / 2 GB IPv6: 1.5$ / Endless Motorized: 3$ / Wander of IPs <b>About Us</b> We are <b>VexProxy</b>, a variety with the origins in the Synergetic Kingdom. We plan for a high-class supply of proxies. Momentarily we submit 3 types of proxies (IPV6, Residential, Non-stationary). We wishes do our best to enact your remain on our website as enjoyable as possible.</center>
Dec. 1, 2021, 5:01 a.m.

New Comment

Please Login to comment