#!/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]: # #
#