Search this site

Dynamic Web Pages: GPA Example

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, not Windows. If you are logged into Windows, restart your computer.

1. Create a folder named 'grades' within your home folder. This is where all the code will go. You can get to your home folder by clicking the icon labeled, for instance, "Wolber's Home". Create the folder grades by selecting File | create folder and entering 'grades' for the name.

2. In the top menu, open Applications | Accessories | KWrite, which is a text editor. Cut and paste the following HTML code into a file and save the file as 'index.html' within the folder 'grades'. The name index.html is important, so name it exactly that.

<html>
  <body>
    <h2>GPA Calculator</h2>
   

    <h3>Enter a string of grades, e.g, ABCAAB</h3>
    <form action="/on_calculate" method="get">
      Grades:<input type="text" name="grades" value={{grades}}>
  
      <input type="submit" value="Calculate"></div>
    </form>
    Number of Grades: {{gradeCount}} <br/>
    GPA: {{gpa}}

  </body>
</html>

3. Save the attachments at the bottom of this page into your 'grades' directory. The easiest way is to right-click on them and choose 'Save Link As'. Along with index.html you should now have 3 files in the 'grades' 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, start the local test server by entering the following:

    $ dev_appserver  grades

Note that the $ is the Linux prompt-- don't type it.

6. The development app server you just started can be accessed at a special URL. Open a Firefox browser and enter the following URL:

    http://localhost:8080

This will 'run' the program you just created by accessing the server you just started. Enter some grades in the text box, then click 'Calculate'. The number of grades you entered should be displayed.

7. If you've made it here, your program 'works' but its really not on the web yet-- your browser is just accessing a 'test' server on your local machine. But its real easy to upload an application to Google.
  • The first step is to register the application with Google. Go to http://appengine.google.com/start, sign in, and then click 'Create Application' and set the application identifier to something like 'GPACalculator'. The name can be anything, but it has to be unique in the Google system and it has to match a setting in the app.yaml configuration file you just downloaded.

  • Use the KWrite editor to open the file app.yaml which you downloaded from the attachments. The first line of text in that file says 'application: financial'. Change the word financial to the name you gave Google when you registered the application. Save the file.
  • At the terminal window, do the following:
                $ control-c to stop the test server
                $ appcfg update grades        

8. Now your ready to run your first dynamic web application! Open a Firefox browser and enter the name of your application, followed by appspot.com. For instance:
    
    http://GPACalculator.appspot.com

If all is well, you should get the same screen you had with the development server. Only this time, your application is really running on the web.

9. Ask another student to enter your URL into their browser. They should now be able to use your grading program.

10. Now it's time to make some changes to the code in order for it to really calculate the GPA, and for you to understand dynamic web pages better. Your first task is to change the program so that it counts the number of A grades in the input string and reports it to the user.
  • Open index.html and modify it so that it reports the "Number of A grades:" instead of "Number of Grades". Just change the text and leave the dynamic variable {{gradeCount}} as is.
  • Open the grade_controller.py code. You'll be changing the code in the class 'CalcController', method 'get'. You'll eliminate the code:
                   count = len(grades)
        
           and replace it with code that loops through the input string to count the number of 'A's in               the string grades. Replace the 'count=len(grades) with the following:                 
           
            i=0        
           count=0
            while i<len(grades):
                if grades[i]  =='A':
                    count=count+1
                i=i+1

            As usual, be very careful when you paste this code in so that you get the indentation
            correct.
  •  Test your changes by
                restarting the development server:    

                                $ dev_appserver grades
                
                then refreshing http://localhost:8080 in your browser.
                
                Enter some grades and click 'Calculate'. Does it now show you the number of A                            grades?

11. O.K., let's really compute the GPA now. Modify the code you wrote for (9) so that instead of counting the As, you total up the grade points. Remember your old 'total some numbers' code? Here, you'll need to use if and elif statements so that each A gets 4 points, each B gets 3 points, each C gets 2 points, and each D gets 1 point. You should add these points to a variable total, each time in the loop. After the loop, get the grade point average by dividing the total by the number of grades-- len(grades).

12. Just computing the GPA is not enough, now we need to report it.

  • open index.html and note that there is a second dynamic variable in double curly brackets-- its name is gpa.
  • In grade_controller.py, modify the following line:
                template_values= {'grades': grades,'gradeCount':count}

          by putting in a value for the dynamic variable gpa:

                 template_values= {'grades': grades,'gradeCount':count, 'gpa': computedGPA}

        Note that calculatedGPA should be the name of the variable you used to store the result of         your GPA calculation.
  • Refresh  http://localhost://8080 in the browser, enter some grades and press calculate. Does it show you the GPA?
14. Now upload your modified code back to Google. At the terminal:

         $ control-c to stop the test server
         $ appcfg update grades

15.  Test to see that you application works by opening the URL:

            http://GPACalculator.appspot.com  

        in the browser (replace GPACalculator with your application name).

        

Attachments (2)

  • app.yaml - on Apr 21, 2009 4:37 PM by David Wolber (version 1)
    1k Download
  • grade_controller.py - on Apr 21, 2009 4:37 PM by David Wolber (version 1)
    1k Download

Recent site activity