Install Python and all needed libraries (windows/Mac/Linux)
The Python library we will be using to create our web app is called Tornado. If you follow the steps in the previous link, you will have Tornado installed on your machine.
We first need to run the *app.py* script and then navigate to *http://localhost:8888/*
Step 1: Open the terminal/command prompt and navigate to the *"01 - Lesson"* folder
i.e. cd C:\repos\tornado\lessons\01 - Lesson
Step 2: Run the app.py file in the terminal
i.e. python app.py
You should see the a similar message:
Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation. All rights reserved.
C:\Users\david>cd C:\repos\tornado\lessons\01 - Lesson
C:\repos\tornado\lessons\01 - Lesson>python app.py
Server Running at http://localhost:8888/
To close press ctrl + c
Step 3: Using your web browser navigate to *http://localhost:8888/*
If the page renders and you see "Welcome to Tornado", you are ready to continue.
A typical web application will have two major components to it:
Front-end: Which simply means what you see in your web browser.
Back-end: This means all of the code that happends on the server, in our case, all of the Python code.
There are two HTML files that are used to create the front end (what you are seeing in the web browser). Open the *templates* folder to find the two files below.
Lets look at the code...
# <!DOCTYPE html>
# <head>
# <title>Tornado</title>
# </head>
# <body>
#
# {% block content %}
# {% end block %}
#
# </body>
# </html>
*DOCTYPE tag* - Tells the web broswer that we are going to be using HTML5
*head tags* - Inside these tags <></> you usually place a title for the page, javascript files, and/or CSS files. In our example we only have a title.
*body tags* - Here is were most of the content of the page is found. anything from text, links, videos, pictures, etc.
*{% start / end block%}* - This is part of tornado templating system. More on how to use this later.
*html tag* - Here we are just simply closing the HTML tag on line one.
Lets look at the code...
# {% extends "template.html" %}
# {% block content %}
#
# <h2>Welcome to Tornado</h2>
# <br>
# <p>This is the index page</p>
#
# {% end block %}
*{% extends "template.html" %}* - This just means we will be importing all of the code we wrote in the template.html file
The interesting part is that we now see the same *{% start / end block%}* code in the index.html file as we saw in the template.html file.
What is happening here?
Everything in between the block code will be placed in the block code of the template.html file
# {% block content %}
#
# <h2>Welcome to Tornado</h2>
# <br>
# <p>This is the index page</p>
#
# {% end block %}
In other words, index.html becomes...
# <!DOCTYPE html>
# <head>
# <title>Tornado</title>
# </head>
# <body>
#
#
# <h2>Welcome to Tornado</h2>
# <br>
# <p>This is the index page</p>
#
#
# </body>
# </html>
Lets look at the code...
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.render('templates/index.html')
# r"/" == root website address
application = tornado.web.Application([
(r"/", MainHandler)
],debug=True)
if __name__ == "__main__":
PortNumber = str(8888)
print(r'Server Running at http://localhost:' + PortNumber + r'/')
print(r'To close press ctrl + c')
application.listen(PortNumber)
tornado.ioloop.IOLoop.instance().start()
*Section 1:*
Import what we need from Tornado
*Section 3:*
This is were you tell Tornado what to do when someone goes to your webpage. In our case there is only one url address *(r"/")* and it says when someone goes to *http://localhost:8888/, then go to the class named MainHandler*. The class MainHandler is in Section 2.
*Section 2:*
This class gets called when someone navigates to *http://localhost:8888/. It then renders the index.HTML file. The function get* is a Tornado function.
*Section 4:*
Aside from the print statements we select a port number and tell Tornado to start the server.
Author: HEDARO