Let's move on to adding the Edit button. While it's a bit more involved than the delete operation, the steps are quite similar.

To get started, begin by defining a new route. We'll create a separate page that enables us to update all the necessary details and save them to the database. Additionally, we'll need to specify both GET and POST methods since we'll be making changes to the database and committing them.

@app.route("/recipes/edit/<int:id>/", methods=["GET", "POST"])
def edit(id):
	recipe = Recipe.get_or_404(id)
# copy and past the post query.
    if request.method == "POST":
		recipe_title = request.form["title"]
		recipe_descriptiont = request.form["description"]
		recipe_category = request.form["category"]
		db.session.commit()
        return redirect("/recipes/")
    else:
		return render_template("edit.html", recipe=recipe)

The function redirects back to the same page after clicking the Post button.

As a parameter, we send a recipe that corresponds to the required id, labeled as 'recipe'. This allows us to access the recipe we're editing and autofill the necessary fields.

Now, let's work on our templates. Create an edit.html file inside the templates folder. Copy the relevant blocks from index.html and the form from recipes.html, and paste them into this new file.

The file's name in the example below doesn't correspond to the file's name in our project.

Rename the head inside block head and the title inside the <h2> tag. And add values inside the input tags: value={{ recipe.title }}, and {{ recipe.description }}.

The file's name in the example below doesn't correspond to the file's name in our project.

So, let's check how this page works.

Try to edit some one recipe and check the result.

We have implemented the whole CRUD functionality, and we can READ, CREATE, UPDATE, and DELETE our recipes. Let's improve our style with bootstrap.