Search this site

Dynamic Web Project

For this project, you will create two dynamic web programs on Google's App Engine (appspot.com). When complete, please create a page entitled Dynamic Web Programs on your portfolio and link to your two programs.
DUE: THURSDAY, MAY 14, MIDNIGHT. NO EXCEPTIONS
Site I : GPA    (30 points)
Complete the GPA Site. Post the link to your appspot URL on your portfolio site.

Site II : TWITTER (70 points)

Create your own Twitter program based on a skeletal version provided by your instructor. Customize it for your personal use for your family, your dorm, your flat mates-- any group you are associated with who could benefit from a shared space.

1. Download and run the basic Twitter sample provided by your instructor. Test it first on the development server (dev_appserver and localhost:8080) and then upload it to Google's appspot. For instructions on starting the development server and uploading, see GPA Site.
  • Create a directory called twitter on your H:/ drive.
  • Be sure and copy-paste the HTML code on the sample page into files home.html and welcome.html, and name them exactly that.
  • Download the three attachments at the bottom of the sample
  • Start the dev_appserver and test the program in a browser (localhost:8080). The login screen that appears is for testing purposes only-- you can enter any email. You can enter different emails to test the program with different pretend users.
2. Add a logo and menu to all pages.
  • Put the dropdowntabfiles folder you downloaded earlier in the semester into your twitter directory with the rest of your code. Warning: it must be named 'dropdowntabfiles' exactly. If you need to download the menu code again, see http://sites.google.com/site/usfcomputerscience/adding-a-menu. If you already have it in your W: on Windows, you can access W: from the 'public_html' folder within your home directory on Linux. Just open public_html, copy the dropdowntabfiles folder, and then paste it into the twitter directory.
  • You need the existing HTML files, welcome.html and home.html, to have the menu stuff in them. Do this copy-paste carefully. For instance, you could grab all of the code within welcome.html, except for the html and body tags, and paste it near the bottom of the drop down sample HTML, then save it as welcome.html.
  • Create a subfolder 'images' in your twitter directory, and put the image file for your logo in that images subfolder. Be sure and create your images with the correct path, e.g.,
                        <img src=images/yourpic.jpg>

3. Beautify the pages.
  • Add a CSS style page to set the background, font, and other styles for your site. The CSS should be defined in a separate CSS file.
  • Create a subfolder 'css' in your twitter directory, and place your css file in it. When you link to the css file, be sure specify this subdirectory.
  • Add a better welcome and instructions to welcome.html and home.html. To change the welcome message on the home page, you'll need to modify the twitter_controller.py file, HomePage class. You'll want to modify what gets put into the variable message. In general, make the two pages more welcoming to the user.
  • Modify the code in home.html and your css file so that the twitter textbox is larger. You can set an id on the input text element in the HTML, and then a width for that id in your css file, e.g.,
                #status {width:50%}

4. Format the tweets displayed on the main page so that they are more readable, like those on twitter, e.g.,

wolberd I'm just chilling, watching the game and drinking beer
   April 25, 2009, 1:24 pm

  • Change the name that appears so that it is part of a link (<a>). The name can link to the person's email. An email link is created with the keyword mailto:
                <a href=mailto:wolber@usfca.edu>wolber</a>
  • Specify ids for different parts of the tweet in the HTML, then define the font, color and font size for them in the CSS. You can add span tags around text that you want to name, e.g.,
                    <span class="date">{{tweet.date}}</span>

            For help with fonts and text colors, see http://www.w3schools.com/css/css_text.asp and http://www.w3schools.com/css/css_font.asp

5. Allow users to enter the URL for a profile picture, then display user's pictures on their home page and on their tweets.

  • Modify the code in model.py by giving the Person class another field, image_url, which is a StringProperty.
  • Modify the code in the form of welcome.html so that there is another input text field for the URL. Set the name of it to 'image_url'. This will allow the user to set the image URL when they register.
  • Modify the code in twitter_controller.py, class RegisterHandler, so that the person object created has its image_url field set. You'll need to get the parameter from the request (url = self.request.get('image_url'), and you'll need to set the image_url field in the person object.
  • In the tweet listings, show the image along with the name of the person who entered the tweet. You can scale a picture down by giving the img a class, e.g., profile_image, and adding CSS like the following:
                    .profile_image {width:50;height:auto}

6. Modify the home page so the user can view either just his own tweets or all tweets (it currently shows all).
  • Provide links for 'all tweets' and 'my tweets' on the page. Link to '/alltweets' and '/mytweets' respectively.
  • Add actions to the mapping table at the bottom of tweet_controller, e.g.,
                ('/alltweets': AllTweetHandler),('/mytweets':MyTweetHandler)
  • Copy the class HomePage and paste it twice in the tweet_controller.py. Name the first copy AllTweetHandler, and the second MyTweetHandler.
  • Modify the code of MyTweetHandler so that the correct tweets are accessed. You can get to a particular user's tweets with:
                 twitters = db.GqlQuery("Select * from Twitter where person = :1 ORDER BY date desc",person)

            instead of getting all, as should be done in AllTweetHandler.

             twitters = db.GqlQuery("Select * from Twitter ORDER BY date desc")

7. Get some people to use your application.

8. (EXTRA CREDIT) Allow the user to click on the author of any tweet to go to a page that shows all of that author's tweets only.
  • Create a new page profile.html. It will be similar to home.html, but with no form to enter a new tweet and a different message.
  • Instead of having the author's link go to a mailto link, have it go to the new profile page. The action (link) should be '/profile?key={{tweet.person.key}}'.
  • Create a new controller class ProfileController that queries for the person's tweets then renders profile.html.
9. (EXTRA CREDIT) Add some cool features. Be sure and explain these with your submission email.

Recent site activity