# Python Flask Tutorial: Full-Featured Web App Part 8 - Create, Update, and Delete Posts

## Метаданные

- **Канал:** Corey Schafer
- **YouTube:** https://www.youtube.com/watch?v=u0oDDZrDz9U
- **Дата:** 04.05.2018
- **Длительность:** 48:13
- **Просмотры:** 247,061
- **Источник:** https://ekstraktznaniy.ru/video/12310

## Описание

In this Python Flask Tutorial, we will be learning how to add the ability for users to create, update, and delete posts. We will also learn how we can prevent users from updating posts that don't belong to them.  Let's get started...

The code for this series can be found at:
https://github.com/CoreyMSchafer/code_snippets/tree/master/Python/Flask_Blog


✅ Support My Channel Through Patreon:
https://www.patreon.com/coreyms

✅ Become a Channel Member:
https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join

✅ One-Time Contribution Through PayPal:
https://goo.gl/649HFY

✅ Cryptocurrency Donations:
Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3
Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33
Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot

✅ Corey's Public Amazon Wishlist
http://a.co/inIyro1

✅ Equipment I Use and Books I Recommend:
https://www.amazon.com/shop/coreyschafer

▶️ You Can Find Me On:
My Website - http://coreyms.com/
My Second Channel - https://www.

## Транскрипт

### Intro []

hey there how's it going everybody in this video we'll be adding the ability for users to add posts that will show up on the home page so in this series so far we've been using some dummy data but now we'll actually be able to get rid of that and display actual posts created by the users and we'll also add in the ability to update and delete these posts as well so let's go ahead and get started okay so first of all we're going to need to create a page where users can create a post and we should be getting used to this process by now so first we can create a route where a user can write a new post so I'm in my routes file here

### Create a new post [0:31]

and if we go to the bottom then we can create a new route and now I'll create a route for a new post so I will copy one of these routes as a starting point and paste this in down here at the bottom and I will call this route post ford slash new and i will call the function here new underscore post and creating a new post will be a route that requires the user to be logged in so let's add that login required decorator so right underneath here I can add in that login required decorator and just like the other routes we're going to want to render a template for this route so I'll render a template that doesn't exist yet but we'll create it in just a second so I'm going to copy this line here and paste it in to our route and now I'll change this up a little bit for this specific route so the template that we want to render I will just call this template create underscore post and the title we will have for this page is new post and then we'll just close that out okay so now we can create this template so within our templates directory I'm going to right click here and go to new file and I'll create a new file called create underscore post dot HTML we want it to match the template that we just rendered here so I will create that and within our template well want the same starting point as our other templates so we'll extend from the layout HTML which will give us the overall layout of the website and then we'll begin the content block so I'm just going to grab this from the about page since that's fairly stripped down and then paste it in here and get rid of this h1 tag okay so that gives us a bare-bones template to work with and last the content that we want on this page is going to be a forum for posting new posts and first we have to create that forum and it's going to be a simple one with just a couple of fields so let's

### Create a form [2:25]

open up our forms dot pie file here and at the bottom of this file let's create a new form so I will call this form and remember these are classes I will call this post form and remember we want to import from flask form and for a post we're just going to have two fields we're going to have a title and that is going to be a string field and then the label that we want for this is simply title and now we're also going to want some validators so we passed in our list of validators but it's only going to be one we're going to pass in a data required validator because every post has to have a title and the second field is going to be the post content which will actually be a text area field and we haven't used yet so we need to import that so here from the top where we're importing our other fields I can add on a text area field to

### Import the form [3:15]

that import so now I'll copy that and we can go back to our form and create our content field so I'll say content is equal to text area field and now the title that we want for this is just going to be content and the validators that we're going to pass in here is just the same we want the data required validator because every post has to have some content and lastly we need a submit' button to post this to our route so I will say submit is equal to submit field and this is just like our other forms and the title that I want on this submit button is just going to be post so we can save that and that is going to be it for this form so now let's create an instance of this form and our route and pass it in to our create post template so back in our routes we now need to import this form so that we can create an instance of it so we'll go back to the top where we are importing all of our forms and on to the end here I will just add that post form import and now let's create an instance of that in our route and sit into our template so within our route I'll say form is equal to post form and then we can pass this into our template simply by saying form is equal to form and this should be becoming a little more familiar now since we've done this a couple of times and now since we're going to allow a form the post back to this route we're going to need to accept a post request so up here in our accounts route I'm just going to grab where we are allowing these different methods and then I'm going to paste this in to our post route so now we are accepting it and post request to this route and let's also go ahead and put in our usual conditional to validate the form when it's posted and also how we want to handle that so let's put in this if form that validate on submit conditional and we'll put this right below our form and our new post route and for now let's just add a flash message that their post has been created and then redirect them back to the home page and we'll actually put in the logic for adding this post to the database in just a minute but for now we'll just say a flash message here and we'll say your post has been created with an exclamation point and let's pass in a category of success which is going to be our bootstrap class for that alert and now let's redirect them to the home page so we'll say return redirect and we're going to redirect them to URL for and pass in the home round so now let's actually add this form to our create post template and this would be similar to our other forms so I'm going to grab a snippet from one of our other routes just to get us started so I'm going to open up the login template here and I'm going to copy our entire div of content section that wraps our form and I'm going to paste this in to our create post route so I'll paste that in and fix these indentations here and now we'll change this around to match the fields that we need in our post form so first I will change the legend here so the legend at the top of our field I'm going to change this to new post and now I'll change these form group dibs here to match our current post form so in our first forum group we want to change this to be the title field for our post so instead of email I'm going to use this multi select tool here and change all of these to title if you don't have a multi cursor tool in your editor then you can just use a find and replace for that okay so now all of these in this form group should read form dot title so that's good and now down here we'll replace this password with the content so we want this to be our content field so I will highlight all of those up until the next div and replace that with content it's now everything in this form group should be formed dot content and lastly in our login form we had this check box here for remember me we don't need that anymore so we can just get rid of this entire div it's just a couple of lines there so we will delete that and then after this we have our submit button and that is still called submit in that form so we can leave that but we don't want this forgot password link here after our submit button so we'll get rid of that as well so that should be all the changes that we need to make to this post form now just a reminder I know that it can be hard to keep up with small changes like these when you're following along with a video but if you think that you may have messed something up or just want to grab the completed version of this file from this video then I do have this code available in the description section below ok so that should do it for this template and for our route and for the form but now finally let's add a link to this create post route in our navigation bar so that logged in users can get to this route easily and the navigation bar is in our layout template so let's open up our layout dot HTML template and I will scroll down here to our navigation and we can see our conditional here this is where the links that get displayed whenever a current user is authenticated or is logged in so I'm going to copy this account route here and paste in a route right above it and now we'll change this to link to the new post so this will be new underscore post and the text for that link will just be new posts so we can save that so now let's open up our application and a browser and make sure that all of these changes look good so far so first make sure that all of the files that we have modified are saved and they do look saved on my end so now we can start up our

### Post form [9:12]

application by pulling up our terminal and running Python run PI and we can see that we don't get any errors and our development server is running so that's good so I will pull up the browser and reload our page and I am currently logged in and we can see that we have this new post route here so if I go to this new post route then we can see that we have this new post form now if you weren't logged in then you'll have to login first before you can see this new post route so now if I hit post on this new post route then we can see our validation is working it says that these fields are required and now let's just fill these in with some dummy values so I will say blog one and then blog one content and now let's post this new post form and now we can see that we get redirected to our home page with our alert message here that our post has been it created but our home page is currently still using our dummy data from the beginning of this series so now let's actually save these posts to our database and display those posts on our home page and delete this old static dummy data that we've been using so let's go back to our routes and add these posts to the database so I will pull back up our application and pull up our routes dot py file here so to actually add this post to our database it's going to be similar to when we added a user to our database but it's actually going to be easier than that because we don't need to hash passwords or anything like that so we can simply

### Add post [10:45]

just say post is equal to post and then we can set our fields equal to what is coming in from our form so title is equal to form dot title dot data and the content is going to be equal to form dot content dot data and now we also need to spell if I the author for this post now I'm going to use author is equal to current user and let me spell that right now I use the back reference of author to set the author of that post instead of setting the user ID and that choice is up to you I think that it looks more clean this way but now that we have that post created we can simply add that post to our database by saying DB session dot add and we want to add that post and now we can commit those changes to the database so we could say DB dot session dot commit okay so that will add the post to the database and then we still have our flashed message and our redirecting them to the home page so let's change our home page route so that we actually see these real Post instead of the dummy post that we have right now so first of all I'm going to remove the dummy data from the top of our file so that we are sure that we're no longer using that so I'm going to just delete all of that dummy data that we were using which was just a list of dictionaries and now within our home page which is here at the top we can see that we were just passing in that dummy data and to our template as this post variable so let's create a new post variable within our home route that is set to our actual post so this is going to be super easy right above our return statement there will simply say posts is equal to post dot query dot all to grab all of those posts from the database and as long as our dummy data had the same attributes as our model then that should

### Display post [12:50]

be the only thing that we need to do in order to grab those posts now I do think that we might need to change something with how the post is displayed but let's see how that worked for now so I'm going to open up our browser and give this a look make sure that all of our files have been saved that we changed and that our web server is still running and it is so now I'll reload our homepage and we can see that we don't have any posts so now let's add one so I will add a post and for the title I'll just say my first post and then for the tenth I'll just say this is my first post and I'll actually make this multi lined here so that we can see what this looks like so this is very exciting and change that to be capitalized there so let's post that okay so when we post that we can see that it displays on the homepage so that's good now our dummy data wasn't exactly like our real data it looks like we are printing out the entire user object instead of just the author's user name it also looks like the date is printing out the date and the time instead of just the date and I don't think we need the exact time for these posts so we'll just change this to print out only the Year month and day it's nice having that exact time of the post in the database but on the front page we'll just display the date so we'll fix those and it will also be nice to display the user's profile picture with their post as well like you'd see on other popular sites and I already have styles for that in our CSS we just need to add the HTML to our template so let's go do that so I will open up our

### Display date [14:29]

home template so I'm going to go into our templates and open home dot HTML so you can see here on line seven this is where we were printing out that entire user but we don't want to print out the entire author we just the author's user name so instead of post dot author let's do post dot author dot user name and to display just the date instead of the entire date time then we can use the strf time date/time method so right here where we have this date posted then we can simply now this is a date/time object so we can use these date/time methods so we can simply say STR F time and now pass in the formatting that we want now you can look up these formatting codes online but I just happen to know that to display the year month and day that is a capital y and we can do a dash and then a lowercase M and then D and all of those have percent signs before those so it should look like that and if you search that strf time method online then you can find different values that you can plug in there to display dates in any format that you'd like okay and to display the users image I'm going to put in an image tag here with some CSS classes that we added earlier in the series and I'm just going to add this image right to the top of the article so right inside the opening article tag there I'm going to say image and this image is going to have a class equal to and I'll set this equal to rounded - circle which is a bootstrap class - just round your image and then I will also set a class here of article - image which is a custom class that we added in our main CSS and that's just going to make sure that has the right sizing and padding and things like that now our source is going to be the URL to that users image so I can put in our curly braces there to write some code and now we can say URL for and this is going to be a URL for our static directory and within our static directory the file name will be equal to the profile underscore pics directory and we will concatenate that with the image of the author who wrote the post so we can simply say post dot author dot image underscore file and we can do that because if we remember that author is a back reference which gives us access to that entire user and their attributes and that image file is an attribute of that user okay so now that we've made

### Save changes [17:13]

those changes let's save all those and then reload our home page in the browser to see what these look like so I'll save those changes and check our development server and it's still running so now let's pull back up our home page and reload this okay so we can see that this looks pretty good we have our user name here instead of that entire user object our date is now the Year month and date instead of the entire time that the poster was written and we also have our author's picture here to the side so that looks nice okay so now we've got some good functionality for our application now as far as a basic blogging system with multiple users we've pretty much got this to a good point where it has all of that basic functionality but there's always going to be more that we can add so let's keep going and adding some more functionality to this just so we can learn how it's done so for example let's say that we wanted to have the ability to update or delete posts now it wouldn't be a very good application if you could only create post but you couldn't correct typos or delete the post altogether so let's see how to do that so first let's make a route that takes us to a specific page for a single post so to do this we'll go back to our

### Adding variables to routes [18:26]

routes and to do this we're going to use something that we haven't seen yet so flask gives us the ability to add variables within our actual routes so if we wanted to create a route where the ID of a post is actually part of the route then we can create a route that looks like this so let me grab a starting point here and we can actually put this variable into the URL itself by putting in these angle brackets and then saying post ID so for example if the user was to go to post /one then post ID would be equal to 1 if they were go to post ford slash 2 then post ID would be equal to 2 and so on so we also need to add that to our route function so I will just call this route post and pass in that post ID as an argument there and we can actually make these variables even more specific if we want so for example you can specify whether you want to expect that the variable is going to be a string or an integer or something like that now we're going to be expecting a post ID and that's going to be an integer so we can simply come up here and say int colon then post ID okay so now within this route now let's fetch this post if it exists so we'll say post is equal to post dot query and remember when we're getting something by an ID we can use the get method so get and we'll pass in that post ID as an argument now actually in of using this get method let's instead use a method that we haven't seen yet now instead of using get or first like we've seen before in these videos this time let's use the method get underscore or underscore 404 now this is a convenient method that just says you know give me the post with this ID and if it doesn't exist then return a 404 which means that the page doesn't exist but if that post does exist then let's simply render a template that returns that post so this template doesn't exist yet but we'll create it right after we render the template so I'll say return render template and this will be we'll call this post dot HTML and for the title of this one let's just pass in the title of our post so I'll say title is equal to post dot title and now let's pass in that post into our template okay and now let's create a template for this so up in my templates here we'll create a new file and we'll call this post dot HTML and then this will be very similar to our home dot HTML except it's going to be a single post instead of all of our post so I'm gonna go to home dot HTML and actually copy all of that and paste it in to our post template and we'll use this as our starting point but within here we won't need to loop over the post since there will only be one so we can just get rid of this for loop here and also the ending of that for loop and then fix that indentation and also we're not going to need our blog title to be a link anymore the only reason it is a link on the home page is so that they can link to this page that we're creating now so we'll just make that an h2 of the post title so I'm going to remove the link here surrounding the post title so remove the opening and the closing tags for that anchor tag but I am going to keep that class that it had on that anchor tag so I'm going to set the class equal to article - title and save that okay and lastly we need to actually add the links to this route for the individual post on the home page so if we pull up the template for the homepage right now if we look at the links for the post title then we can see that we're just using this pound sign for the link location which means that the link doesn't actually go anywhere but we want this to go to the page for that individual post so which would be the post route that we just created with the ID of the post so to do that we can add in our double curly braces like we are used to and then we can say URL for and this is going to be a URL for and we called this route we called that route post so this will be a URL for post and now we also need to post in that post ID with that route so we can say that the post ID for that route is going to be equal to our post dot ID so as we're looping through all of our posts on our homepage once it gets to this point it's going to print out the post title and that is going to be an anchor tag and the location for that anchor tag is going to be the URL for that post and we're going to set

### Testing the route [23:20]

this post ID equal to the current post dot ID so let's save this and actually see what this looks like on the website so I've got all of my files saved here let's open back up our web server and we need to restart this so I will run that we can see that our development server is running so let me rerun the home page now first let me add one more post from a different user so that we can see multiple posts on the home page so I'm going to log out of my current user and then I'll log in with another user that I created in a previous video and that user was test user at demo com and I believe that the password I used was testing ok so now I'm logged in as that user so now let me go to new post and the title of this will just be a second post and then we will have some content here that this is a post from a different user so let me post that so now we can see that we have two posts here on our home page so now if I hover over the link for one of our host then I know that this is a little small for you to see on video but in the bottom-left of Chrome it shows us where this link will take us and it currently says that it's going to our post route with a forged slash 1 so that is linking to the post with an ID of 1 so if I click on that then it actually took me to the URL of ford slash post ford slash 1 and if i hover over the title we can see that this is no longer a link so if i go back to the home page and then click on the second post then it's the same thing it takes me to post ford slash 2 and it's the page for this specific post now if i try to go to a post that doesn't exist then I should get a 404 error and that means that the post with that ID doesn't exist so if instead I try to go to post you know forged slash 10 and go there then we can see that we get this not found error and that's good because that route wouldn't exist unless we had a post with that ID ok so now we're able to add posts and see them on our home page but let's also add the ability to update and delete post so let's create a new route that displays a form to update a post so let's go back to our home page here and now let's bring back up our application

### Creating a new route [25:47]

and go to our routes and now I'm going to create a new route here that is the post ID followed by a forward slash update and it's going to be similar to the one that we just created so I'm going to just copy that as a starting place now right after the post ID I will say update and now we need to change the function name of this route because we can't have the same function name for multiple routes so I will call this update underscore post and this is going to be a route that requires a login because if you're trying to update a post then it means that you have to login first so let's put in that login required decorator there and now let's do the same thing that we did for our specific post page we will get a post with that ID and if it doesn't exist then we will return a 404 okay so first we want to make sure that only the user who wrote this post can update it so let's put that check in place so I'll say if post dot author is not equal to the current user then we're going to do an abort and pass in a 403 there now this is the first time that we've actually manually aborted and returned an error response now this 403 response is the HTTP response for a forbidden route and we'll customize these air pages in a future video to make them look a little nicer now we haven't actually imported that abort function yet so let's do that so that is just going to be from a flask so up here at the top where we have our other flask imports I will just add this abort import onto the end there so now let's go back down to the bottom okay so if the current user is the author of the post then let's go ahead and create our form and render a template now the form that we use will just be the same as our previous post form so let's just reuse that so right underneath here I will say that the form is going to be equal to post form and create an instance of that and the template will pretty much be the same as our current post template with just one small difference so for now let's render that template and see what it looks like so I will actually just grab it from here so I will open that is our post template I want to grab our create post template here so I will copy that and paste that in here at in our update post route and instead of a new post as being the title I will make that update so let's open this in our browser and see what this looks like right now so I've got everything saved and in my terminal I'm going to restart our development server and then reload our browser here so first let me log out as our test user and log back in as the corium Shaffer user that we created earlier so I will log in there so first let me go to the link of the second post that I wrote as test user and try to update that post so if I go to this route then we can see that we are at post ford / - now i'm going to add a forward slash update onto that route and we can see that we get a forbidden response when trying to do that and that is because we did that 403 abort but if i go back to our homepage and try to update the post that i created so i'll go to the first post here and then go to ford slash update on that post number one then we can see that we get our forum now there are a couple things that i want to change here so first we want the title and content to be populated with the content of the existing post that we're updating and also i want the form legend to say update post instead of new post so to change this let's go back to our routes

### Creating a legend [29:44]

so first of all i'm not going to create an entirely separate template just to update the legend of that form i'm just going to create a legend value that we pass into each template so for our update route i will just add this on to the end here and i'm going to go to a new line here for this forum and we can pass in a legend and we'll set that equal to update post and save that and i'll copy this and add this to our new post as well so i will go up here to our new post route and put this on a separate line as well and add that legend but for the legend we're gonna call this new post and now we can just display that legend within our create post template so i'm going to open up that template now we could probably have named that template better since now it's being used to create and update post but that's not a big deal we're not going to worry about that so here within create post if we go up to our legend now I'm simply going to use the double curly braces there and use that legend argument that we passed in okay and we also wanted the forum to be populated with the current post title and content on our update page now we've seen this before in our account page with our account info so it's going to be similar so if I go back here to our update route then right under where we are initializing this for we can simply say that the form dot title dot data is going to be equal to the post dot title and we can do the same thing for the content so we'll say form dot content dot data set that equal to the post content okay

### Updating a post [31:29]

so those changes should handle changing the legend and filling in the form with the current post data so now let's also add in the logic to update the post if the form validates so as usual we need to accept post requests to any of these routes that we want to submit a form to so we can just copy that from one of our existing routes so I will copy those methods and paste that in there and now we can handle the logic for when that form is submitted so as we've seen before we can say if form dot validate on submit and then within here if that form was valid then we can update our post so we can simply say post dot title is going to be equal to the form dot title dot data and the same with the post content so I will copy and paste that line but change both of those to content so post content is equal to form content data and now we can simply commit those changes so I can say DB session dot commit now you might notice whenever we make those changes we don't need to do a DB session ad because those are already in the database that we're just updating something that is already in the database okay so now after we commit those changes let's do a flash message to the user to let them know so we can flash a message that says your post has been updated and then we can pass in our style and for this we'll do a success style and then we can redirect back to that post route for that specific post so I would say return and that will be a redirect and that'll be a redirect for a URL for and the URL for our post route and we want this to be the post ID of our current post so we'll say post ID is equal to post dot ID and

### Sending form data [33:34]

while we're at it let's also move here where we're sending the form data let's put it in its own conditional like we did in our account page and we want to make sure that that's populated when it's a get request so I will add on to our conditional here and say L if request dot method and we will say if that method is equal to a get request then we want to populate that form with those values okay so that should do it

### Update post [34:04]

for updating our post so let's see if it worked so we have everything saved and let's make sure our web server is still running and it is and let's pull up our site and now I'll try to update post that I have created so I'm on this post page and I'm going to go to forge slash update for that post and we can see that now our legend is correct we have update post and our title and our content is populated so now I'll say my first updated post and this is as the content and then we can submit that and we can see that worked and we got redirected back to the page for this specific post and also we have our flash message here that our post has been updated actually that says update let me change that really fast updated in that flash message okay and if I go back to our home round then we can see that does stay there so that did update that post permanently okay so we're just about finished up now we just need to add the ability to delete a post for a user so before creating the route to delete a post let's actually add the links for the update and delete routes to our template now I want to do this first because for our delete route I want to add an extra confirmation step to make sure that the user really wants to delete their post and make it hard for them to do it by accident so the update and delete links will be included in the single post template so let's open up that template and we called that post dot HTML and remember this is the page when we're viewing a single post and we'll put those update and delete links right here in this article metadata section of our post and I'll put those after the username and date now you only want to show these links if the post belongs to the current user so we can put in a code block here so curly braces and percent signs and we can say if post dot author is equal to the current underscore user then we can end this if block here and if and now within this if statement then let's put in a div with our links and I'm going to include some bootstrap classes so bear with me while I type this out so I'm going to put in a div here and within the div I'm going to put an anchor tag for our update link and for this update link before I update the href I'm going to give it some classes so I'll set the classes equal to and I want this to be a bootstrap button and specifically a bootstrap button - secondary and also I'm going to make it small so that's BTN - SM and also I want to give it some spacing so I'm going to give it a margin of 1 so M - 1 so that H ref for the update link we've seen this before so we can use our double curly braces and that is going to be URL four and that's going to be a URL for and we called this route if I go back to my routes here we called this update post so that's going to be the URL for update post and remember we need the tapassin the post ID as well so I can say post underscore ID is equal to let me scroll over here bit and that is going to be equal to the post dot ID so we can save that now we also want to be able to delete a post now this is going to be a little different here so I'm actually instead of going making this an anchor tag I'm going to make this a button so I'll say a button is equal to the type of button then we're going to pass in a class here and the class is going to be similar it's going to be a BTN and specifically I want this to be a bootstrap class with BTN - danger which will make it a red button I want them at that to be small as well so BTN - SM and we'll give that the same margin M - one and we want this button to say delete now when it comes to

### Delete modal [38:13]

deleting their post I want the user to confirm that they actually want to delete that post so I'm gonna use a bootstrap modal now that's why I used a button instead of a link and I'm actually going to grab this directly from the bootstrap website so that I don't miss type anything so if you were to search bootstrap modal then you will be able to find at this page - so I'm gonna go to my browser and open up this modal page and within here you want to go to their live demo section and I'm just going to copy the data toggle and data target part of their button this is what actually toggles the modal so I will copy that and then I will paste this in to my button on my page here so I will add that in now instead of this data target pointing to example modal let's actually change this to delete modal so now let's go back to their website and now I can actually grab all

### What is modal [39:12]

of the code for this modal and paste it in to the end of my content section now I guess I should show you what a modal is first if you don't know what one is if I do the launch demo modal here then you can see that it's just something that pops up on your screen and kind of darkens everything in the background and give some text and some options here and this is where we'll have our clothes and delete so that we can be sure that we want to actually delete that post and put in a delete confirmation there so that's what that looks like so I will copy this entire modal section here and I will paste this in to the end of our content section so that is going to be after our article and right before the end of the content block so let me make sure that indentation is correct and I'll save that now remember that we changed the data target on our button to be delete modal and not example modal so everywhere that this says example modal we want to change this to delete modal so I'm gonna do a multi-select here and copy all of the parts that say example modal and I think that I highlighted three here and I'm going to change all of those to be delete modal instead so before going any further with this deletion button let's open this up in our browser and make sure that we got all of this correct so far so I will save all of that and we can open up our server here and make sure that it's still running and it is so I'll go back to our page and try to go to our page for one of our posts and we can see that if it is a post that we have written then we have our update and delete links here now if I click on update then it takes us to the update route for that specific post and if I go back and click on delete then we can see that it pops up that example modal with the modal title and our options here now for now I'm just going to close that down so that's working well for now we just need to modify that modal to confirm the deletion of our post and while we're changing things with that template I kind of don't like that this has a margin on the left side here so I think I'm going to update this Update button here and only have a margin on the top and bottom and not on the left and right so let's open up that post dot HTML template and I'll go back up here to our button and for this update anchor tag here I'm gonna change this m1 and I'm just gonna have that be an MT which is margin-top and an MB which is margin-bottom and I'll set both of those to one and I'll leave the complete margin on the delete button okay so now

### Changing the modal [41:51]

let's change this modal so that it is more in line with what we are trying to do so I'm going to go down here to our modal and we have a comment here for where this starts so now the title let's change this modal title and we'll just change this to delete post with a question mark and we can completely get rid of this modal body because there's no additional information that we need all we need is to display this delete post part and for the two buttons that we have on our modal window we'll leave those closed buttons there so we'll leave this secondary closed button here now instead of having this Save Changes button here let's completely get rid of that and we are going to instead make that a form with a submit button so we can simply add in a form here and the form is going to have an action equal to an empty string which we'll post it back to our current route we will set the method equal to post and now within our form we're simply just going to have a submit button with a value of delete for deleting our post so this will be an input and the type will be submit and I will leave off a name and let's put in a class so we want to style this as a bootstrap button and we'll give that a class of BTN - danger - make that red and we also give this a value equal to delete so that it has that text on the button now actually for this action

### Deleting a post [43:24]

we're not going to leave this empty so this is going to be the route for officially deleting our post and we haven't created that route yet but let's just assume that we'll call it delete underscore post with the post ID included so we can go ahead and fill this in and we'll create that route in just a second so I'll say URL for and we will call that URL or we'll call that route delete underscore post and we are also going to pass in a post ID that we want to delete so we'll pass down a post ID equal to post dot ID okay so now let's go create that delete post route now I know that this is a lot to do for this delete route but there's nothing more frustrating than deleting things that you don't mean to so you want to go through the effort of getting in good habits of being a little careful here and that's what this whole process is about okay so now let's go back to our routes and create a route for deleting a post now this is going to be similar to our update route at least the opening of it so let's copy the beginning of that and paste this and also let's get that post query and the abort section of that as well and paste those in as well and now let's update these values here so instead of this being update we want this to be delete and we will change this route to be delete underscore post okay and we are also only going to accept post requests for this route because we are only going to accept when they submit it from that modal so let's get rid of the get request there and just leave this post and now after we verified that the post belongs to the current user then we can simply delete the post and redirect them back to the home page and we can do that just by saying DB session delete and we want to delete that post and now we can commit that so DB session dot commit and we can also add in a flashed message here so I'm just going to copy this from our update route and paste this in and we can say your post has been deleted and now we can redirect them back to our home route so we'll say return that's going to be a redirect URL for and the URL for the home route so let's save that okay so

### Testing the app [45:54]

that should do it if we did everything correctly so let's open this up in the browser and test this functionality so let me make sure that this is still running and the web server needs to be restarted so we'll restart that and pull back up our website here okay so now let me create a new post and then we'll go through the process of updating it and then deleting it so I'll create a new post here and I'll just say this title is this will be updated and then test content so let's post that we can see that it gets posted here on our home page so now let's click on that post and we can see that we have the options to update or delete it so now I'll update this post and instead of updated I'll say this will be deleted so we can see that our up Lync worked if I go back to the homepage then that is still there so now let's see if we can delete this post so I will click on delete and it opens up our modal that says delete post and if we click on this then that should be a submit button that submits a post request to our delete post route with that post ID so let's click that and now we can see that we're redirected back to our home page and it says your post has been deleted so that seems to have all worked ok so I think that is going to do

### Conclusion [47:16]

it for this video I hope that now you have a good idea for how you can add some kind of post to your site and also how to handle the updates and deletes of those posts and in the next video we'll learn how to paginate our post so that we can efficiently grab a select number at a time and also we'll learn how to create user specific pages that only show their specific post but if you have any questions about what we covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoy these tutorials and would like to support them then there are several ways you can do that these is ways to simply like the video and give it a thumbs up and also it's a huge help to share these videos with anyone you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page and description section below be sure to subscribe for future videos and thank you all for watching