Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions en/step_1.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,7 @@ language: bash
line_numbers: false
---
sudo apt install python3-flask

--- /code ---

--- /collapse ---
16 changes: 16 additions & 0 deletions en/step_2.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## Create the app

--- task ---

Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.

--- code ---
Expand All @@ -9,6 +10,7 @@ language: bash
line_numbers: false
---
mkdir ~/Documents/webapp

--- /code ---

--- /task ---
Expand All @@ -23,12 +25,17 @@ language: bash
line_numbers: false
---
cd ~/Documents/webapp

--- /code ---

--- /task ---

--- task ---

From the **Programming** menu, open **Thonny**.

--- /task ---

--- task ---

Add this Python code into the blank file.
Expand All @@ -48,15 +55,20 @@ def index():

if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')

--- /code ---

--- /task ---

--- task ---

Save the new file with the name `app.py` inside the `webapp` folder you just created.

--- /task ---


--- task ---

Go back to your terminal window and run the script you just wrote:

--- code ---
Expand All @@ -65,6 +77,7 @@ language: bash
line_numbers: false
---
python3 app.py

--- /code ---

--- /task ---
Expand All @@ -74,10 +87,13 @@ If everything is working correctly, the window should show you output similar to
![pi run web app](images/pi-run-web-app.png)

--- task ---

From your Raspberry Pi's menu, open **Internet** > **Chromium web browser**

--- /task ---

--- task ---

In the address bar, type `localhost:5000` and press <kbd>Enter</kbd>. You should see the welcome page.

--- /task ---
Expand Down
1 change: 1 addition & 0 deletions en/step_3.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ def index():
@app.route('/cakes')
def cakes():
return 'Yummy cakes!'

--- /code ---

--- /task ---
Expand Down
13 changes: 10 additions & 3 deletions en/step_4.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@

You can use a **template** to give your page a style. The template will use **HyperText Markup Language (HTML)**.


--- task ---

Go to your terminal and press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop your flask server.

--- /task ---

--- task ---

Create a `templates` directory in your `webapp` directory:

--- code ---
Expand All @@ -16,6 +18,7 @@ language: bash
line_numbers: false
---
mkdir templates

--- /code ---

--- /task ---
Expand All @@ -27,6 +30,7 @@ Go back to **Thonny** and create a new file. Save this file as `index.html` insi
--- /task ---

--- task ---

Add this code to `index.html` and **save** your changes.

--- code ---
Expand All @@ -39,6 +43,7 @@ line_numbers: true
<h1>My website</h1>
</body>
</html>

--- /code ---

![A new file called index.html containing the code above](images/html-file.png)
Expand All @@ -47,8 +52,6 @@ line_numbers: true

--- task ---



--- /task ---

--- task ---
Expand All @@ -61,11 +64,13 @@ language: python
line_numbers: true
---
from flask import Flask, render_template

--- /code ---

--- /task ---

--- task ---

Change the `index()` route to use your `index.html` HTML template:

--- code ---
Expand All @@ -78,6 +83,7 @@ line_highlights: 7
@app.route('/')
def index():
return render_template('index.html')

--- /code ---

--- /task ---
Expand All @@ -92,6 +98,7 @@ language: bash
line_numbers: false
---
python3 app.py

--- /code ---

--- /task ---
Expand Down
6 changes: 6 additions & 0 deletions en/step_5.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ language: bash
line_numbers: false
---
cd ~/Documents/webapp

--- /code ---

--- /task ---
Expand All @@ -32,6 +33,7 @@ language: bash
line_numbers: false
---
mkdir static

--- /code ---

--- /task ---
Expand All @@ -55,6 +57,7 @@ body {
background: beige;
color: blue;
}

--- /code ---

--- /task ---
Expand All @@ -78,7 +81,9 @@ line_highlights: 2-4
<h1>My website</h1>
</body>
</html>

--- /code ---

--- /task ---

--- task ---
Expand Down Expand Up @@ -106,4 +111,5 @@ Make sure your `webapp` project directory contains the following files and has t
└── index.html
└── cakes.html
```

--- /collapse ---
4 changes: 4 additions & 0 deletions en/step_6.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ def index():
@app.route('/hello/<name>')
def hello(name):
return render_template('page.html', name=name)

--- /code ---

--- /task ---
Expand All @@ -40,6 +41,7 @@ line_numbers: true
<h1>Hello {{ name }}!</h1>
</body>
</html>

--- /code ---

--- /task ---
Expand All @@ -57,6 +59,7 @@ Try replacing `Paul` in the address bar with a different name!
--- /task ---

--- task ---

Open your `index.html` template and add a link to the hello page under the heading.

--- code ---
Expand All @@ -68,6 +71,7 @@ line_highlights: 7
---
<h1>My website</h1>
<a href="/hello/paul">Hi Paul</a>

--- /code ---

--- /task ---
Expand Down
8 changes: 8 additions & 0 deletions en/step_7.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
## Challenge

--- task ---

Add another route for your website.

--- /task ---

--- task ---

Look up some **hex codes** for other colours you could use in your CSS.

--- /task ---

--- task ---

Look up some more HTML tags to use in your templates.

--- /task ---

--- task ---

Use dynamic content in another way in your website.

--- /task ---