Search this site

Dynamic Web Page: Interest Rate Tutorial

This tutorial steps you through the process of creating a dynamic web application that runs on Google's servers using App Engine. The sample you'll create can be used as a template for creating new interactive web applications. This is a try-it-before-you-really-know-it tutorial-- you'll get a taste of what can be done and you'll have a lot of questions as to how it all works. In the upcoming lessons, we'll go over the sample in detail so you can understand every line of code.

This tutorial uses the Linux operating system.

1. Create a folder named 'financial'. This is where all the code for your web app will go. Ideally, put this folder in a folder appEngineSamples off of your home directory.

2. Open a text editor and cut and paste the following HTML code into it. The page you are reading is at http://sites.google.com/site/usfcomputerscience/interest-rate-tutorial.

<html>
  <body>
    <h2>Interest Calculator</h2>   
    <h3>Enter the principal and interest rate</h3>

    <form action="/on_calculate" method="get">
      Principal:<input type="text" name="principal" value={{principal}}>
      Rate(%):<input type="text" name="rate" value={{rate}}>
      <input type="submit" value="Calculate"></div>
    </form>

    Interest Earned: {{interest}}
   
  </body>
</html>

Save the file as 'index.html' within the folder 'financial'. The name index.html is important, so name it exactly that.

3. Save the attachments at the bottom of this page into your 'financial' directory. The easiest way is to right-click on them and choose 'Save Link As'. Be sure and name them as they are named in the attachment. With the two attachments and index.html, you should now have 3 files in the 'financial' directory.

4. We'll use the Linux command-line terminal to start up a test server. The terminal is similar to the DOS prompt on Windows machines. To open a command-line terminal, choose Applications | System | Terminal from the top menu. A black window should appear.

5. In the terminal window, make sure you are in the folder above the financial folder. If financial is in your home directory, you're fine. If financial is within a folder appEngineSamples, you'll need to first change directory into appEngineSamples:

    cd appEngineSamples

Once you're in the right directory, start the local test server by entering the following:

    dev_appserver  financial

6. The command above starts a development app server. This server is running on your local machine, but it acts as if it is a server somewhere on the Internet. You can be access the server at a special URL. Open a Firefox browser and enter the following URL in the address bar:

    http://localhost:8080

This will 'run' the program you just created by accessing the server you just started. Enter a number as the principal and rate, then click 'Calculate'. The interest earned should appear.

7. If you've made it this far, your web app works, but its really not on the web yet-- your browser is just accessing a 'test' server on your local machine. Now we'll upload your application to the web, and specifically Google's App Engine servers:
  • The first step is to register or sign-in with Google's App Engine service.  Go to http://appengine.google.com/start  If you are registering, you'll have to step through the registration process, including giving Google your cell phone #.
  • Once you are signed in, click 'Create Application' and set the application identifier to something like 'DavesFinancial', but with your name instead of 'Dave'. The name can be anything, but it has to be unique in the Google system.
  • You need to put the name of your application, which you just set at Google, into the configuration file of your application, app.yaml (the one you downloaded from the attachments on this page). With your text editor, open the file app.yaml. The first line of text in that file is the application name, and says 'application: yourappname'. Change 'yourappname' to the application identifier you just registered and save the file.
  • You're now ready to upload your program to Google. Back at the terminal window, do the following:
    • hit control-c to stop the dev server.
    • at the linux prompt, enter: appcfg update financial 
    • You have just uploaded your program as a real web app on Google's servers.        

8. To run your application, go to a browser and enter the name of your application, followed by 'appspot.com'.  For instance, if your application identifier was 'RalphsFinancial', then enter 'RalphsFinancial.appspot.com' in your browser.

If all is well, you should see a web page that looks the same as when you ran your program with the development server. Only this time, your application is really running on the web.

9. Now it's your turn to make some changes to the code and begin understanding how web programming works. Your first task is to change the program to show not just the interest earned but the updated principal after one and two years. To do this, you'll need to:
  • modify index.html so that it has two more lines similar to the one labeled "Interest Earned:" These lines should be labeled "One Year Principal:" and "Two Year Principal" and should display template variables {{principal}} and {{twoYearPrincipal}}. Template variables are always within {{ }}. They are the part of a web page that is replaced with dynamic information.
  • modify the financial_controller.py code so that it computes the oneYearPrincipal and twoYearPrincipal.
  • Find the line in financial_controller.py that looks like:

       template_values= {'interest':interestString, 'principal':principalString,'rate':rateString}

    The template_values define the dynamic data that is to replace the {{ }} template variables in the index.html file. They are defined with key-value pairs. The keys in the line above are 'interest', 'principal', and 'rate'. These keys correspond to the words found within {{ }} in the index.html file. The values are the variables shown to the right of each colon. So the value of interestString will replace 'interest' in the index.html file, 'principalString' will replace 'principal', and rateString will replace 'rate'.
  • Add a fourth key-value pair mapping the key 'twoYearPrincipal' to the new twoYearPrincipal variable that you computed.
10. Modify your application so that the user can enter the number of years to calculate, and so that the application displays the principal accumulated after those years. You'll need to add another entry for 'years' in the form of index.html. In financial_controller.py, you'll need to get the input years in the same way as principal. Then you need to add a loop to the code so that it computes the principal correctly. Finally, you can change your template_values as you no longer need twoYearPrincipal but just the final principal.

Attachments (2)

Recent site activity