HTML Forms

Below I cover the basics of HTML forms.

HW1 Graded

I have graded HW1 and emailed you your grades. I am using your @email.sc.edu address. If you want me to email it somewhere just let me know.

I don't have a solution for this HW since it was mostly about making you have everything installed and know your way around chrome tools.

Python

Below is a short introduction to the main features of Python.



Another fun way to learn python is by doing the codeacadempy Python track.

Publish your App. Use Only one Eclipse Project

After you finish HW1, and you made sure that it runs locally (http://localhost:8080), you can then publish it for the whole world to see!

Just go to https://appengine.google.com/ and click on "create application". Find an "application identifier" (app id) for your app (I suggest the same project name as your github repo, to keep things simple) that isn't taken, use all the other default values and create it. Then just copy the app id into your app.yaml under 'application: your-app-id' then click 'deploy' on your google app engine launcher. It will copy all your files to the google app engine and deploy. You can look at the log file to track its progress.

Your app will then appear at http://your-app-id.appspot.com

Note that if you later on decide to buy your own domain name, say myawesomeproject.com, it is just a matter of filling out a form to get the app to appear under your domain name.

You will have Only One Eclipse Project

I have noticed that some of you made an eclipse project called HW1. That's a bad name. You will only have one eclipse project for the whole semester. Each week you will be adding more features to this project. A good eclipse project name is the name of the github repo I gave you, or something similar.

HW2: jinja2 templates, HTML forms

In this homework you will allow your webapp to accept a URL, for an image, and a caption (text). Your app will not save these to the database (we will do that next week) but will simply display these back to the user.

Your app must use the jinja2 templates. Specifically, it will use a base.html template from which your other template inherits from. The base.html is a general template that all your other templates will inherit from. Thus, it contains the basic layout of the site. For this homework it is fine if this is a minimal template, but later on we will be adding headers and footers here.

The page after the user clicks 'submit'.

Your page should look like this, except 'Homework 1' should be '2', my bad.

Required Reading

To get this done you will have to read getting started using the webapp2 framework and handling forms. You will also want to consult the webapp2 framework documentation and the jinja2 documentation.

Turning it in

Push your code to your github repo by Monday Sept. 10 @9am.

Also, in your app.yaml set the version to 2 (for HW2) and publish it to appspot.com. That is, go to appengine.google.com and create a new application. Set its name in your app.yaml and click on the "Deploy" button on your appserver. When you start working on HW3 change the version to 3 (and so on). In this way I will be able to view your previous at work even while you might already be testing a new version (at least, I hope it works out)

eGit User Guide

There is a comprehensive Users Guide for eGit which I forgot to mention. The Gettig Started section shows you how to set up a local repo, and also how to push/pull from a github repo.

While I'm here. If your eclipse workspace is in dropbox and you use it in more than one machine (say, laptop and desktop) then you should make sure to use dropbox's "Selective Sync" option and do NOT sync the .metadata folder in your eclipse workspace.  As this stackoverflow question atests, you should then be Ok. I have had this setup and shared a workspace between my laptop and desktop for over a year without any issues. The only thing is, I do have to 'import existing project' on the second machine after creating in on the first one.

Git Command Line Tutorial

There are like, 10,000 tutorials on git. Here is another one, on getting started with git using the command line:

HTML Basics

Below I talk about the basics of HTML. You should read over the MDN HTML documentation to make sure you are up to speed on basic HTML.

HW1: Hello World, HTML and Git

For the first homework you will write a simple HTML page and push it to github. The goal is to make sure you have all (well, most) of the needed software installed on your laptop and understand the basic workflow.

First, write an index.html file, using the HTML5 DOCTYPE, that contains:

1. Matching title and h1 with "HW1: Your-name"
2. Nicely-formated answers to the following questions: (You should use chrome tools to find the answers)
   
   1. What webserver and OS is used by www.sc.edu?
      
      
   2. List all the JavaScript files loaded by www.sc.edu.
      
      
   3. List all the CSS files loaded by www.sc.edu.
      
      
   4. List the keys of all the cookies used by www.sc.edu.
      
      
   5. In www.sc.edu, for the word "Campuses" on the left-hand menu, what is the margin-top?
      
      
   6. What webserver and CMS is used by www.cse.sc.edu?
      
      
   7. Go to www.cec.sc.edu, change the line that says "About the college" (in the top left) to say "Engineers Get Things Done!". Take a screenshot. Add the screenshot image to index.html, with a width of 400 pixels.
3. Make sure your page validates.

Finally, create the "Hello World" app engine application, as explained in this post and in the app engine Getting Started tutorial. Run it locally with the appserver to make sure it says hello world. You do not need to publish it (but you can, if you want to). Finally, add the index.html and related images to this new project, add them to the git repo, and push to your github repo.

This homework is due Monday, September 3 @9am.

Pushing your App Engine Project to Github

The video below shows you how add your eclipse appengine project to your local git and then push this local git repo to github, making sure the local master branch is tracking the remote ('origin') master branch at github. Thus, afterwards everytime you want to push to github all you have to do is 'Team->Push to Upstream'.

Also, I give a quick tip on setting up Quick Diff.

I forgot to show how to add a .gitignore file, but all you have to do is add a text file called '.gitignore' to your project's top-level folder, and in this file put the names of all the files you do not want to be added to your repo, one per line. Namely, add '.project' and '.pydevproject'.

Setting Up Eclipse and the App Engine

The video below shows how to set up eclipse and the app engine (etc.) for this class. I am using eclipse Helios in the video. You will find all the files you need at the appengine downloads page.

If you are using a newer eclipse, like for example Juno (the latest one, which I am using in class), then you should follow google's instructions for installing the google app engine plugin for eclipse. Note: I just upgraded to Juno from Helios and for it to work I had to first uninstall, in eclipse, all the Google plugins I had, then upgrade to Juno, then install the google plugin as per google's instructions.



I did forget to mention in the video that you should also install the eGit eclipse plugin. That is, when you are in the eclipse marketplace also search for 'egit' and install.

Also, you probably want to install and setup git itself in your laptop, in case you want to use git from the command line. The github guide on setting up git will show you how. Note mac users: if you use homebrew (and you should), just type brew install git to install it. Linux users already know they just have to apt-get install git.

Chrome Developer Tools

On the previous video I used Chrome Developer tools, showing you a bit how to use them. You will be using these a lot in this class. Below is a very quick tutorial to get you started. You can learn best by just clicking around in devtools.



The video below has some very useful tricks (which might not make much sense to you now, but will make perfect sense in a few weeks as we cover more topics):



Watch Google I/O 2012 - Chrome Developer Tools Evolution to learn about the latest features in chrome tools.