Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Last Changes | FrontEnd Design
Flask Intensive Course: Web Development with Python

Last Changes

Also, let's add a background picture to make our website more eye-catching. For that, return our link to the main.css file and move the desired picture to a static folder. Open your base.html and add it to the bottom of your header:

Then open main.css and remove old styles. Add:

Let's check our website. It looks a lot nicer.

Now, need to fix the fields in the edit.html file to make it nicer. We have the form here. We want a new form like we did in our new_recipes.html with all labels and nice text inputs and text area. Let's just copy and paste this in here.

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

html

index.html

css

index.css

js

index.js

We have our new form. It's essential to note the difference compared to the create feature. In editcase, we don't want empty forms; we aim to populate each text field or text area with the existing recipe data. Fortunately, it's quite straightforward. Instead of using a simple placeholder, we can set a value="{{ recipe.title }}" to make it more user-friendly. However, for Textarea, things are a bit different. Textareas don't have a 'value' parameter, so we should remove the placeholder. Also, keep in mind that input tags don't have closing tags, but text areas do. Everything within the textarea tags will be part of the content, like this:
<textarea>{{ recipe.description }}</textarea>.

Additionally, we need to update the URL we're posting to in our form action, changing it to:
<form action="/recipes/edit/{{ recipe.id }}"....

And one more detail: the value for <input="submit" value="Save"> should read Save instead of Post.

Now, let's put this to the test. Select any post, head over here to edit, and you can freely make changes, add new lines, or create multiple paragraphs. After you're done, simply hit the Save button.

So we have the Flask application where we have implemented the whole CRUD functionality, added a Database, improved style with Bootstrap and it's fully functional.

It's a good start if you have never used Flask before. And now, you have your first website that you can present to the future interviewer.

arrowfolder
base.html

base.html

folder/
folder

recipe_app

folder

instance

recipe.db

recipe.db

folder

static

folder

css

main.css

main.css

bread-slices.jpg

bread-slices.jpg

folder

templates

base.html

base.html

edit.html

edit.html

index.html

index.html

new_recipe.html

new_recipe.html

recipes.html

recipes.html

main.py

main.py

requirements.txt

requirements.txt

1. What is Flask?
2. Which of these is a Flask extension for handling SQL databases?
3. What is Jinja2 in the context of Flask?

What is Flask?

Select the correct answer

Which of these is a Flask extension for handling SQL databases?

Select the correct answer

What is Jinja2 in the context of Flask?

Select the correct answer

Everything was clear?

Section 4. Chapter 8
course content

Course Content

Flask Intensive Course: Web Development with Python

Last Changes

Also, let's add a background picture to make our website more eye-catching. For that, return our link to the main.css file and move the desired picture to a static folder. Open your base.html and add it to the bottom of your header:

Then open main.css and remove old styles. Add:

Let's check our website. It looks a lot nicer.

Now, need to fix the fields in the edit.html file to make it nicer. We have the form here. We want a new form like we did in our new_recipes.html with all labels and nice text inputs and text area. Let's just copy and paste this in here.

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

html

index.html

css

index.css

js

index.js

We have our new form. It's essential to note the difference compared to the create feature. In editcase, we don't want empty forms; we aim to populate each text field or text area with the existing recipe data. Fortunately, it's quite straightforward. Instead of using a simple placeholder, we can set a value="{{ recipe.title }}" to make it more user-friendly. However, for Textarea, things are a bit different. Textareas don't have a 'value' parameter, so we should remove the placeholder. Also, keep in mind that input tags don't have closing tags, but text areas do. Everything within the textarea tags will be part of the content, like this:
<textarea>{{ recipe.description }}</textarea>.

Additionally, we need to update the URL we're posting to in our form action, changing it to:
<form action="/recipes/edit/{{ recipe.id }}"....

And one more detail: the value for <input="submit" value="Save"> should read Save instead of Post.

Now, let's put this to the test. Select any post, head over here to edit, and you can freely make changes, add new lines, or create multiple paragraphs. After you're done, simply hit the Save button.

So we have the Flask application where we have implemented the whole CRUD functionality, added a Database, improved style with Bootstrap and it's fully functional.

It's a good start if you have never used Flask before. And now, you have your first website that you can present to the future interviewer.

arrowfolder
base.html

base.html

folder/
folder

recipe_app

folder

instance

recipe.db

recipe.db

folder

static

folder

css

main.css

main.css

bread-slices.jpg

bread-slices.jpg

folder

templates

base.html

base.html

edit.html

edit.html

index.html

index.html

new_recipe.html

new_recipe.html

recipes.html

recipes.html

main.py

main.py

requirements.txt

requirements.txt

1. What is Flask?
2. Which of these is a Flask extension for handling SQL databases?
3. What is Jinja2 in the context of Flask?

What is Flask?

Select the correct answer

Which of these is a Flask extension for handling SQL databases?

Select the correct answer

What is Jinja2 in the context of Flask?

Select the correct answer

Everything was clear?

Section 4. Chapter 8
some-alt