#!/usr/bin/env python # coding: utf-8 # # Goal - Create your very first web app # # * Learn how to structure your projects # * Create the front end using HTML # * Learn server-side programming # # #### Prerequisites: # # > Install Python and all needed libraries ([windows/Mac/Linux](http://bit.ly/1Rr6SmZ)) # # > The Python library we will be using to create our web app is called [Tornado](http://www.tornadoweb.org/). If you follow the steps in the previous link, you will have Tornado installed on your machine. # # # 01 - Lesson # # Start by downloading [Lesson 1](http://bit.ly/1REXTwH) into your computer. This link will take you to the DropBox repository. After the download is complete you can then navigate to the ***01 - Lesson*** folder. # These are the files you will find in the folder. # # * static # * templates # * app.py # # ### static: # # > This folder will hold any javascript, css, or any other misc files. For our first lessons we will leave this folder empty. # # ### templates: # # > This folder will hold all of our HTML files. # # ### app.py: # # > This is our Python server. # # # How do I run the app? # # 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. # # Front-end # # 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. # # * template.html - This is the first file we create and then the rest of the HTML files are based of this template # * index.html - The main file that will be served when we navigate to localhost # # ### template.HTML # # Lets look at the code... # In[1]: # # # Tornado # # # # {% block content %} # {% end block %} # # # # ***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. # # # ### index.HTML # # Lets look at the code... # In[2]: # {% extends "template.html" %} # {% block content %} # #

Welcome to Tornado

#
#

This is the index page

# # {% 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 # In[3]: # {% block content %} # #

Welcome to Tornado

#
#

This is the index page

# # {% end block %} # In other words, index.html becomes... # In[4]: # # # Tornado # # # # #

Welcome to Tornado

#
#

This is the index page

# # # # # # Back-end # ### app.py # # Lets look at the code... # #### Section 1 # import tornado.ioloop # import tornado.web # # # #### Section 2 # class MainHandler(tornado.web.RequestHandler): # def get(self): # self.render('templates/index.html') # # #### Section 3 # # r"/" == root website address # application = tornado.web.Application([ # (r"/", MainHandler) # ],debug=True) # # #### Section 4 # 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](http://www.hedaro.com)