diff --git a/en/images/flask-app-link.png b/en/images/flask-app-link.png new file mode 100644 index 0000000..52b2334 Binary files /dev/null and b/en/images/flask-app-link.png differ diff --git a/en/images/flask-app-with-colour.png b/en/images/flask-app-with-colour.png index 23a827a..84d625e 100644 Binary files a/en/images/flask-app-with-colour.png and b/en/images/flask-app-with-colour.png differ diff --git a/en/images/flask-template.png b/en/images/flask-template.png index e3d74c6..aefdb02 100644 Binary files a/en/images/flask-template.png and b/en/images/flask-template.png differ diff --git a/en/images/idle-css.png b/en/images/idle-css.png new file mode 100644 index 0000000..090a1ac Binary files /dev/null and b/en/images/idle-css.png differ diff --git a/en/images/idle-flask.png b/en/images/idle-flask.png new file mode 100644 index 0000000..05aa141 Binary files /dev/null and b/en/images/idle-flask.png differ diff --git a/en/images/idle-html.png b/en/images/idle-html.png new file mode 100644 index 0000000..f3d229a Binary files /dev/null and b/en/images/idle-html.png differ diff --git a/en/images/pi-run-web-app.png b/en/images/pi-run-web-app.png new file mode 100644 index 0000000..860d444 Binary files /dev/null and b/en/images/pi-run-web-app.png differ diff --git a/en/images/showcase.png b/en/images/showcase.png new file mode 100644 index 0000000..93ae577 Binary files /dev/null and b/en/images/showcase.png differ diff --git a/en/meta.yml b/en/meta.yml index 008ab28..85eb7ea 100644 --- a/en/meta.yml +++ b/en/meta.yml @@ -10,20 +10,19 @@ ingredient: false copyedit: true curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0 interests: '' -technologies: raspberry-pi, python, html-css-javascript +technologies: python, html-css-javascript site_areas: projects hardware: '' software: python, html-css-javascript -version: 4 -last_tested: 2017-01-01 +version: 4.1 +last_tested: 2018-08-02 steps: - title: Introduction -- title: What you will need -- title: Installing Flask -- title: Building a basic Flask web application -- title: Adding a new route to your web app -- title: Add HTML templates to your web app -- title: Adding colour to the web page with CSS -- title: Adding dynamic content to a view -- title: Browsing on other devices +- title: Build a Flask website +- title: Add a new page +- title: Using HTML +- title: "Challenge: Add a HTML template to your 2nd page" + challenge: true +- title: Add colour with CSS +- title: Adding dynamic content - title: What next? diff --git a/en/solutions/webapp/app.py b/en/solutions/webapp/app.py new file mode 100644 index 0000000..e7a7ace --- /dev/null +++ b/en/solutions/webapp/app.py @@ -0,0 +1,18 @@ +from flask import Flask, render_template + +app = Flask(__name__) + +@app.route('/') +def index(): + return render_template('index.html') + +@app.route('/cakes') +def cakes(): + return render_template('cakes.html') + +@app.route('/hello/') +def hello(name): + return render_template('page.html', name=name) + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') diff --git a/en/solutions/webapp/static/style.css b/en/solutions/webapp/static/style.css new file mode 100644 index 0000000..ef2206f --- /dev/null +++ b/en/solutions/webapp/static/style.css @@ -0,0 +1,4 @@ +body { + background: red; + color: yellow; +} diff --git a/en/solutions/webapp/templates/cakes.html b/en/solutions/webapp/templates/cakes.html new file mode 100644 index 0000000..df67de5 --- /dev/null +++ b/en/solutions/webapp/templates/cakes.html @@ -0,0 +1,5 @@ + + +

Yummy cakes!

+ + diff --git a/en/solutions/webapp/templates/index.html b/en/solutions/webapp/templates/index.html new file mode 100644 index 0000000..caddf1d --- /dev/null +++ b/en/solutions/webapp/templates/index.html @@ -0,0 +1,9 @@ + + + + + +

My website

+Hi Paul + + diff --git a/en/solutions/webapp/templates/page.html b/en/solutions/webapp/templates/page.html new file mode 100644 index 0000000..2963395 --- /dev/null +++ b/en/solutions/webapp/templates/page.html @@ -0,0 +1,5 @@ + + +

Hello {{ name }}!

+ + diff --git a/en/step_1.md b/en/step_1.md index acbea63..5933948 100644 --- a/en/step_1.md +++ b/en/step_1.md @@ -1,18 +1,46 @@ -## What you will make -Install the lightweight web framework Flask and set up a basic web server with different pages using Python, HTML, and CSS. +## Introduction -## What you will learn - By following this resource and setting up a Flask web server you will learn: +### What you will make - - How to install software on your Raspberry Pi - - How to install pip and Flask to create a Python-powered web server - - How to build a basic web app with Flask and run it as a local website on your Raspberry Pi - - How routes are used to map URLs to web pages - - How to use HTML to create simple web page templates - - How to use CSS to control the appearance of HTML content - - How to configure Flask and make your website accessible to other devices on your local network +You'll set up a web server and create a simple website using Flask, Python, and HTML/CSS. + +![flask web app](images/showcase.png) + +The web server will be able to react to the user inputting dynamic content, turning your website into a web application capable of doing more than just showing static information. + +--- collapse --- + +--- +title: What you will need +--- + +### Hardware + ++ Computer capable of running Python 3 + +### Software + ++ [Python 3](https://www.python.org/downloads/) + +--- /collapse --- + +--- collapse --- + +--- +title: What you will learn +--- + +- How to install Python modules using pip +- How to build a basic web app with Python and Flask This resource covers elements from the following strands of the [Raspberry Pi Digital Making Curriculum](https://www.raspberrypi.org/curriculum/): +- [Apply abstraction and decomposition to solve more complex problems](https://curriculum.raspberrypi.org/programming/developer/) + +--- /collapse --- + +--- no-print --- + +If you need to print this project, please use the [printer-friendly version](https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/print){:target="_blank"}. -- [Combine programming constructs to solve a problem](https://www.raspberrypi.org/curriculum/programming/builder) +--- /no-print --- diff --git a/en/step_10.md b/en/step_10.md deleted file mode 100644 index c56eb94..0000000 --- a/en/step_10.md +++ /dev/null @@ -1,10 +0,0 @@ -## What next? - -- Try adding links between pages using anchor tags like `Hello Paul`. -- Add parameters to a previous route to make other views dynamic. -- Add more CSS rules to each of your routes. -- Learn more about HTML, CSS and web development with [Google Coder](https://projects.raspberrypi.org/en/projects/coder-html-css-lessons/), [Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn) and [Codecademy](https://www.codecademy.com/en/tracks/web). -- Learn more about Flask using the [Flask documentation](http://flask.pocoo.org/docs). -- Create a physical computing project with Raspberry Pi and use Flask to create a web interface to it (see [Matt Richardson's guide](http://mattrichardson.com/Raspberry-Pi-Flask/index.html), [BETT Bot](https://github.com/bennuttall/bett-bot) and [Energenie](http://www.pythonhosted.org/energenie/examples/web/)). -- Use a Flask web app as the control panel in a home automation project: turn the lights on from your phone! - diff --git a/en/step_2.md b/en/step_2.md index b4e094f..35e1fa5 100644 --- a/en/step_2.md +++ b/en/step_2.md @@ -1,5 +1,120 @@ -## What you will need +## Build a Flask website -### Hardware +You're going to set up a basic web application with Flask and Python. -+ A Raspberry Pi computer \ No newline at end of file +If you don't already have Python 3 on your computer you will need to download and install it. + +--- task --- + +[Download Python 3](https://www.python.org/downloads/) and install it. + +[[[generic-python-install-python3]]] + +--- /task --- + +You will also need to install the Flask package. + +--- task --- + +Install the `flask` Python module using `pip`. Make sure you are connected to the internet before you start. + +[[[generic-python-installing-with-pip]]] + +--- /task --- + +Once Flask is installed, you can create your web application. + +--- task --- + +Open a terminal or command prompt window, and make a new directory called `webapp` for your project. + +```bash +mkdir webapp +``` + +--- /task --- + +--- task --- + +Use the change directory command `cd` to open the new directory. + +```bash +cd webapp +``` +--- /task --- + +--- task --- + +Open Python 3 IDLE. + +--- /task --- + +--- task --- + +Create a new file by clicking **File** and then **New file**, and save it as `app.py` inside the `webapp` folder you just created. + +--- /task --- + +--- task --- + +Now enter the following lines of code into the blank `app.py` window: + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route('/') +def index(): + return 'Hello world' + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +You will explore this code in more detail in the next step, but for now let's keep it simple and make sure everything works. + +![idle](images/idle-flask.png) + +--- /task --- + +--- task --- + +Save your changes by clicking **File** and then **Save**, or by pressing Ctrl and S. + +--- /task --- + +You will need to run your web app from the terminal/command prompt window you opened earlier. + +--- task --- + +### On Raspberry Pi/Linux/macOS + +Enter the command `python3 app.py` into the terminal window. + +### On Windows + +Enter the command `python app.py` into the command prompt window. + +--- /task --- + +If everything has been set up correctly, you should see an output similar to this: + +``` + * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit) + * Restarting with stat + * Debugger is active! + * Debugger pin code: ***-***-*** +``` + +![pi run web app](images/pi-run-web-app.png) + +--- task --- + +Open your web browser and enter the URL `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`. + +**Note:** `127.0.0.1` means 'home', i.e. this computer. `:5000` means 'port 5000', which is the port the web server is running on. + +--- /task --- + +![Flask Hello world](images/flask-hello-world.png) diff --git a/en/step_3.md b/en/step_3.md index 0b4bcba..08089ee 100644 --- a/en/step_3.md +++ b/en/step_3.md @@ -1,14 +1,77 @@ -## Installing Flask +## Add a new page -First you're going to install the Flask package. Make sure you are connected to the internet, either by Ethernet cable or WiFi before you start. +Now you're going to add a new page to your web app by creating a new **route**. -- Start by opening a Terminal window from the taskbar or applications menu: +In a web application, a route is a certain path into your website, determined by the URL the user types into their web browser's address bar. It's up to you which routes are enabled and what each of them does. - ![Open Terminal window](images/open-terminal.png) +In the 'Hello world' example, we used a single route: -- Now install Flask by typing: +```python +@app.route('/') +def index(): + return 'Hello world' +``` - ```bash - sudo apt-get install python3-flask - ``` +This route is made up of three parts: +- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so `http://127.0.0.1:5000/` +- `def index()`: this is the name you give to the route; this one is called `index`, because it's the index (or home page) of the website +- `return 'Hello world'`: this is the content of the web page, which is returned when the user goes to this URL + +The 2nd part of the `app.py` code runs the web server and your app: + +```python +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +**Note:** the `host='0.0.0.0'` means the web app will be accessible to any device on the network. + +The following instructions will show how to create a new page and route called 'cakes', but feel free to change this name and content to be whatever you want. + +--- task --- + +Create a new route by adding these lines of code below the first route: + +```python +@app.route('/cakes') +def cakes(): + return 'Yummy cakes!' +``` + +--- /task --- + +--- collapse --- + +--- +title: Complete code +--- + +Your complete code should now look similar to this: + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route('/') +def index(): + return 'Hello world' + +@app.route('/cakes') +def cakes(): + return 'Yummy cakes!' + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +--- /collapse --- + +--- task --- + +Save your code and navigate to your 'cakes' page in the browser at `127.0.0.1:5000/cakes`. You should see a web page with the text "Yummy cakes!" on it: + +![Yummy Cakes](images/flask-cakes.png) + +--- /task --- diff --git a/en/step_4.md b/en/step_4.md index 7406b22..c885291 100644 --- a/en/step_4.md +++ b/en/step_4.md @@ -1,56 +1,84 @@ -## Building a basic Flask web application +## Using HTML -Now you're going to set up a basic web application with Flask and Python. You will be able to run a single web page and display some text on a web browser. +Next, you'll modify your existing routes to return a full HTML web page rather than just simple text. -- Using the Terminal, make a new directory for your project. +The HTML web page will be created from a **template** that holds the static content of the page. You'll later learn how to insert data to create a dynamic version of the page. + +--- task --- + +First, create a `templates` directory in your `webapp` directory by entering this into the terminal or command prompt window: ```bash -mkdir webapp +mkdir templates ``` -- Use the change directory command to open it. +--- /task --- -```bash -cd webapp +--- task --- + +Create a new file in IDLE by clicking **File** and **New File**, and save this file as `index.html` in your `templates` folder. + +--- /task --- + +--- task --- + +Enter the following HTML code in `index.html`: + +```html + + +

My website

+ + ``` -- Open Python 3 from the main menu. +![idle html](images/idle-html.png) + +--- /task --- -- Open a new window by clicking `File > New file`, and save this as `app.py` inside the project folder you created. +--- task --- -- You'll write your application code here and when you run your code, any printed messages or errors will be shown in the Python shell window which opened first. +Save your changes by clicking **File** and **Save**, or by pressing Ctrl and s. -- Now enter the following lines into the blank `app.py` window: +--- /task --- - ```python - from flask import Flask +--- task --- + +Return to your `app.py` file in IDLE, and modify the first line of your code to import the `render_template` function from the `flask` module as well: + +```python +from flask import Flask, render_template +``` + +--- /task --- + +--- task --- + +Finally, you'll need to modify your `index()` function to return the `index.html` HTML template instead of the normal text. Change the code inside the definition so that the code looks like this: + +```python +@app.route('/') +def index(): + return render_template('index.html') +``` - app = Flask(__name__) +Flask will look for `index.html` in the `templates` directory that the `app.py` program is in. - @app.route('/') - def index(): - return 'Hello world' +--- /task --- - if __name__ == '__main__': - app.run(debug=True, host='0.0.0.0') - ``` - - Note here the `host='0.0.0.0'` means the web app will be accessible to any device on the network. +--- task --- -- Save the file with `Ctrl + S`. +Save the file. Make sure your `app.py` program is still running. If it's not, just run it again using the terminal/command prompt. -- Return to the Terminal window and enter `python3 app.py` to run the web server. +--- /task --- - If everything has been written correctly, you should see an output similar to this: +--- task --- - ``` - * Running on http://0.0.0.0:5000/ - * Restarting with reloader - ``` +Load the `http://127.0.0.1:5000/` page in your web browser to see your new HTML template displayed. -- Open the Pi's web browser from the taskbar or application menu and navigate to `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`: +![my website](images/flask-template.png) - ![Flask Hello world](images/flask-hello-world.png) +In this case it's not much different, as all you've done is added a HTML header, but there's plenty of scope to expand! - *Note: `127.0.0.1` means 'home' i.e. this computer, and `:5000` means 'port 5000', which is the port the web server is running on* +--- /task --- diff --git a/en/step_5.md b/en/step_5.md index 6dce281..b00a95f 100644 --- a/en/step_5.md +++ b/en/step_5.md @@ -1,32 +1,43 @@ -## Adding a new route to your web app +## Challenge: Add a HTML template to the second page -Now you're going to add a new route to your web app, which will create another web page. +Now you've learnt how to change your 'index' page to use a HTML template, do the same for your 'cakes' page! -In a web application, a route is a certain path into your website, determined by the request sent by the user when they type it into their web browser. It's up to you which routes are enabled and what each of them does. +--- hints --- -In the "Hello World" example we used a single route: +--- hint --- -```python -@app.route('/') -def index(): - return 'Hello world' -``` +Repeat the same steps you've just followed to create a template for the cakes page. + +--- /hint --- + +--- hint --- + +Create a `cakes.html` file and save it in `templates`. -This route is made up of three parts: +Modify the `cakes()` function in `app.py` to use `render_template`. -- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so just `http://127.0.0.1:5000/`. -- `def index()`: this is the name we give to the route. Here it was called `index` because it's the index of the website. -- `return 'Hello world'`: this is the content of the web page, which is returned when the user browses the index of the website. +--- /hint --- -- Create a new route by adding the following lines below the first route: +--- hint --- - ```python - @app.route('/cakes') - def cakes(): - return 'Yummy cakes!' - ``` +Your `cakes.html` template should look this: -- Save your code and navigate to your website's cake page in the browser at `127.0.0.1:5000/cakes`. You should see a webpage with the text `Yummy cakes!` on it: +```html + + +

Yummy cakes!

+ + +``` + +Modify the `cakes()` function in `app.py`: + +```python +@app.route('/cakes') +def cakes(): + return render_template('cakes.html') +``` - ![Yummy Cakes](images/flask-cakes.png) +--- /hint --- +--- /hints --- diff --git a/en/step_6.md b/en/step_6.md index 8c955c2..8a49fff 100644 --- a/en/step_6.md +++ b/en/step_6.md @@ -1,52 +1,86 @@ -## Add HTML templates to your web app +## Add colour with CSS -Next, you'll modify your existing routes to return full HTML templates, rather than simple text strings. +Now you'll add some Cascading Style Sheets (CSS) to add colour to your web page. Cascading Style Sheets are rules for how a browser displays HTML content. -- First, create a `templates` directory in your `webapp` directory by entering this into the Terminal: +--- task --- - ```bash - mkdir templates - ``` +First, return to the terminal/command prompt window and navigate to the `webapp` directory. If you're in the `templates` directory, go back up one level with `cd ..`. -- Open `Text Editor` under `Accessories` in the main menu: +--- /task --- - ![Text Editor](images/open-text-editor.png) +--- task --- - This will open up a basic text editor called Leafpad. +Create a new directory called `static`. -- Enter the following HTML code: +```bash +mkdir static +``` - ```html - - -

Hello from a template!

- - - ``` +--- /task --- -- Save the file as `index.html` in the `templates` directory, which you'll find inside the `pi` and then `webapp` directories. +--- task --- -- Return to your `app.py` file in IDLE and modify the first line of your code to import the `render_template` function as well: +Create a new file in IDLE by clicking **File** and **New File**, and save this file as `style.css` in the `static` folder you just created. - ```python - from flask import Flask, render_template - ``` +--- /task --- -- Finally, you'll need to modify your index view to return the HTML template instead of the normal text. Change the `index()` function to this: +--- task --- - ```python - @app.route('/') - def index(): - return render_template('index.html') - ``` - - Flask will look for `index.html` in a directory called `templates`, in the same directory as the `app.py` file. +Add the following CSS rules to the file: -- Save the file. Make sure your web app is still running. If you stopped it, just run `python3 app.py` from your `webapp` directory. +```css +body { + background: red; + color: yellow; +} +``` -- Reload the route in your web browser (go to the base route at `http://127.0.0.1:5000/`) to see your new HTML template being displayed. +![idle css](images/idle-css.png) - ![Hello from a template!](images/flask-template.png) +**Note:** you have used colour names here, but you could also create colours using hex codes like `#ff0000` (red). - In this case it's not much different as all you've done is added a header, but there's plenty of scope to expand! +--- /task --- +--- task --- + +Save your changes. + +--- /task --- + +--- task --- + +Now modify your `index.html` HTML template to include the CSS rules by adding a `` tag containing a `` tag with a reference to the style sheet file: + +```html + + + + + +

My website

+ + +``` + +--- /task --- + +--- task --- + +Save the change to `index.html` and refresh your browser. You should see a colourful version of the web app! + +![Flask app with colour](images/flask-app-with-colour.png) + +--- /task --- + +If your web app doesn't look right, you may not have saved your CSS file in the right place. + +By now you've created a number of files and directories for your web app. It is worth quickly double-checking your `webapp` project directory, which should contain the following and have a structure like this now: + +``` +├── app.py +├── static +│   └── style.css +└── templates + └── index.html + └── cakes.html +``` diff --git a/en/step_7.md b/en/step_7.md index fe3fe82..9dbfbff 100644 --- a/en/step_7.md +++ b/en/step_7.md @@ -1,54 +1,84 @@ -## Adding colour to the web page with CSS +## Adding dynamic content -Cascading Style Sheets (CSS) are rules for how HTML content is displayed by the browser. Now you'll add some CSS to add colour to your web page. +So far you've learned to deliver static HTML web pages using templates. Lets add some dynamic content to the pages to display different information. Large websites like Facebook, YouTube and BBC News show different content depending on the page you visit, even though the templates are very similar. -- First, return to the Terminal window and navigate to the `webapp` directory. If you're in the `templates` directory, go back up one level with `cd ..`. +Now you'll create a new route on your website so that when you go to `http://127.0.0.1/hello/name`, it will say "Hello name!" and replace 'name' with whatever you put there; so `/hello/Paul/` will display "Hello Paul!". -- Create a new directory called `static`. +--- task --- -- Then open a new window with the basic text editor (Leafpad), or re-open the text editor from the menu. +Create a new route in your application like so: -- Save the new file as `style.css` in the new `static` directory. +```python +@app.route('/hello/') +def hello(name): + return render_template('page.html', name=name) +``` + +- `@app.route('/hello/')` - the `` part means it passes the name into the `hello` function as a variable called `name` +- `def hello(name)` - this is the function that determines what content is shown - this time it takes the given name as a parameter +- `return render_template('page.html', name=name)` - here we look up the template `page.html` and pass in the variable `name` from the URL, so the template can use it + +--- /task --- -- Add the following CSS rules to the file: +--- task --- - ```css - body { - background: red; - color: yellow; - } - ``` - - Note here we've used colour names: usually colours are defined by hex codes like `#ff0000` (red) but this is a simple example. +Create a new HTML template called `page.html`, and add the following HTML code to it: + +```html + + +

Hello {{ name }}!

+ + +``` -- Save the file. +--- /task --- -- Now modify your HTML template called `index.html` to include the CSS file, by adding a `` tag containing a `` tag with a reference to the stylesheet: +--- task --- - ```html - - - - - -

Hello from a template!

- - - ``` +Save the files and visit `http://127.0.0.1:5000/hello/paul`. It should look like this: -- Save the HTML file and reload the web server. You should see a colourful version of the web app! +![Hello Paul!](images/flask-hello-paul.png) - ![Flask app with colour](images/flask-app-with-colour.png) +Try it with different names! -You have so far created a number of files and directories. It is worth just double-checking your `webapp` project directory, which should contain the following and have a structure like this now: +--- /task --- +--- collapse --- + +--- +title: What's happening here? +--- + +Flask uses `jinja`, a Python library for rendering templates. Using the braces (curly brackets) on this line: + +```html +

Hello {{ name }}!

``` -├── app.py -├── static -│   └── style.css -└── templates - └── index.html + +... tells the template to render the variable `name` which was passed in the route function `hello`. + +Visiting `127.0.0.1:5000/hello/` without a name will create an error. Think about how you can prevent this from happening. + +--- /collapse --- + +--- task --- + +Create a link to your new dynamic hello page from your index. + +Edit `index.html` to add a link to your new hello page under the heading. + +```html +

My website

+Hi Paul ``` -If your web app doesn't look right, check you saved your CSS file in the right place. +--- /task --- + +--- task --- + +Save your changes and refresh the index page to see the result. + +![flask app link](images/flask-app-link.png) +--- /task --- diff --git a/en/step_8.md b/en/step_8.md index a3dece6..9b5c8f3 100644 --- a/en/step_8.md +++ b/en/step_8.md @@ -1,44 +1,8 @@ -## Adding dynamic content to a view +## What next? -So far you've learned to deliver HTML template through a web server running on your Raspberry Pi. Wouldn't it be good if you could add some dynamic content to the pages to display different information? Large websites like Facebook, YouTube and BBC News show different content depending on the route you visit, even though the templates are very similar. - -Now you'll create a new route on your website so that when you go to `http://127.0.0.1/hello/name`, it will say "Hello name!" and replace 'name' with whatever you put there; so `/hello/Paul/` will display "Hello Paul!". - -- Create a new route in your application like so: - - ```python - @app.route('/hello/') - def hello(name): - return render_template('page.html', name=name) - ``` - - - `@app.route('/hello/')` - the `` part means it passes the name into the `hello` function as a variable called `name` - - `def hello(name)` - this is the function that determines what content is shown - this time it takes the given name as a parameter - - `return render_template('page.html', name=name)` - here we look up the template `page.html` and pass in the variable `name` from the URL, so the template can use it - -- Create a new HTML template called `page.html` using the text editor, and add the following HTML code to it: - - ```html -

Hello {{ name }}!

- ``` - - Note here we've neglected the `` and `` tags. This is OK for testing but real websites should have a full HTML structure. - -- Save the files, reload the web server and visit `http://127.0.0.1:5000/hello/paul`. It should look like this: - - ![Hello Paul!](images/flask-hello-paul.png) - - Try it with different names! - -### What's happening here? - -Flask uses `jinja`, a Python library for rendering templates. Use the braces (curly brackets) on this line: - -```html -

Hello {{ name }}!

-``` - -It tells the template to render the variable `name` which was passed in the route function `hello`. - -What happens when you just visit `127.0.0.1:5000/hello/` without a name? Think about how you can prevent this giving an error. +- Add more CSS rules to each of your pages +- Create links to your favourite web pages +- Learn more about HTML, CSS and web development with [Coder Dojo](https://projects.raspberrypi.org/en/CoderDojo/21), [Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn) and [Codecademy](https://www.codecademy.com/en/tracks/web) +- Learn more about Flask using the [Flask documentation](http://flask.pocoo.org/docs) +- Create a physical computing project with Raspberry Pi and use Flask to create a web interface to it, see [Matt Richardson's guide](http://mattrichardson.com/Raspberry-Pi-Flask/index.html) or [Ben Nuttall's BETT Bot](https://github.com/bennuttall/bett-bot) diff --git a/en/step_9.md b/en/step_9.md deleted file mode 100644 index b5e7c4d..0000000 --- a/en/step_9.md +++ /dev/null @@ -1,20 +0,0 @@ -## Browsing on other devices - -Since we used `host='0.0.0.0'`, on the `app.run` line, the web server is accessible to any device on the same network, including other computers, tablets, and smartphones. - -- Enter the following command in the Terminal window to find your Raspberry Pi's IP address: - - ```bash - hostname -I - ``` - - You should get something like `192.168.1.3`. - -- Take another computer, tablet or smartphone, and make sure it's connected to the same network as the Raspberry Pi. - -- Open up a web browser on the other device and enter the Raspberry Pi's IP address into the address bar with `:5000` on the end e.g. `http://192.168.1.3:5000/`: - - ![Address bar](images/flask-on-android.png) - -- You should now see the web app from the other device. Try navigating to the other pages too. -