Implement Create Functionality

We will add a form for adding new recipes, sending them to our database, and automatically appearing on our website page.

GET is the method by default, and now we allow the POST one.

Now, we go to the FrontEnd template and add this form to the file recipes.html. In the body block:

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

We've made a few enhancements to our layout. To create a horizontal line for a neater appearance, we used the <hr> tag. Next, we implemented the form with the help of the <form> tag, which is quite straightforward. To add line breaks at the end of lines, we utilized the <br> tag.

Now, let's reload our browser page to see the form in action. However, please note that you shouldn't attempt to save anything just yet; we still need to implement the POST functionality in the 'recipes' function.

We need to add some changes to our recipes function.

• if we click the 'Post' button, we activate the POST method. We get the title and description from our form and then use it to create a new database entry.
• else, we will GET all entries from our database table and print it out.

And don't forget the import redirect. We need to change dummy data onto the database. You can delete our list where we imitate our database.

You can see that our BackEnd and FrontEnd are working.