Delete Post - csemanish12/flask_blog GitHub Wiki

we will allow the author to delete the post. Firstly we will add some links in our single post page so that the author can view the delete and update option.

lets update post.html to include links for delete and update

{% extends 'layout.html' %}
{% block content %}

<article class="media content-section">
    <img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pictures/' + post.author.image_file) }}">
    <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2" href="#">{{ post.author.username }}</a>
            <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small>
            {% if current_user == post.author %}
            <div>
                <a class="btn btn-secondary bt-sm mt-1 mb-1" href="{{ url_for('update_post', post_id=post.id) }}">Update</a>
                <button type="button" class="btn btn-danger bt-sm mt-1 mb-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
            </div>
            {% endif %}
        </div>
        <h2 class="article-title">{{ post.title }}</h2>
        <p class="article-content">{{ post.content }}</p>
    </div>
</article>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Delete Post?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <div class="modal-body">
            <p>This will permanently delete your post. Are you sure you want to delete it?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <form action="{{ url_for('delete_post', post_id=post.id ) }}" method="POST">
              <input class="btn btn-danger" type="submit" value="Delete">
          </form>
      </div>
    </div>
  </div>
</div>

{% endblock content %}

here

  • {{ if currrent_user == post.author %} will show the update and delete option only to the author of that post.
  • we are using modal option from bootstrap to show a confirmation pop up before deleting a post

Reference for modal (confirmation pop up)

https://getbootstrap.com/docs/4.0/components/modal/

For this pop up to work we need to include some js from bootstrap starter template. Add these links in layout.html just above the closing body tag

.
<body>
.
.
.
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

Reference for bootstrap starter template:

https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

Now we need to create a route for deleting the post. lets add a new route in our routes.py

blog/routes.py

@app.route("/post/<int:post_id>/delete", methods=["POST"])
@login_required
def delete_post(post_id):
    post = Post.query.get_or_404(post_id)
    if post.author != current_user:
        abort(403)
    db.session.delete(post)
    db.session.commit()
    flash("Your post was deleted", "success")
    return redirect(url_for('home'))

Implementation can be found over this commit

⚠️ **GitHub.com Fallback** ⚠️