For this, our final homework, all you need to do is implement and deploy a simple google app engine application. The application needs to do two simple things:
http://yourwebsite.appspot.com they should see your name.http://yourwebsite.appspot.com/bye they should see "Good bye".
For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:
The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page
You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.
Your next homework is a bit more involved than usual. You will be building an Ajax front-end to a php+mysql backend that I have provided for you. There are two steps to this process. First you must download and install the php code and the initial database. We will do this step in class, together. The second step is the homework part where you use your new-found jQuery skills to Ajaxify the web 1.0 setup I provide. This homework is due Monday, 16 March at 9am.
The first step is to install the php code and the database. To do this you must follow these steps.
web directory under your home directory. If there isn't, talk to me.http://web2.cse.sc.edu where instead of 2 you will have another number. In all the following instructions replace the 2 in web2 with your own website number. Find your username in the email and load that url in your browser (this will only work from within USC). The page you see should look like:php example and you should see a "Hello World"
web directory. cd ~/web tar xfz php.tar.gzThis will place all the files in your php directory. You can now
cd web lsto see the new files.
mysql -h web2.cse.sc.edu yourusername -u yourusername -pIt will ask you for the password you just set. Enter it. You should now be logged in to your mysql server. Hit control-D to log out and go back to the command line.
table.sql. To load this data onto your mysql server type:mysql -h web2.cse.sc.edu yourusername -u yourusername -p < table.sqlYou will need to enter your password again. To make sure it works type
mysql> show tables;at the mysql prompt. It should show you that there is now one table called 'books'. To view the contents of this table type:
mysql> select * from books;If you see a lot of book titles and other stuff scrolling by then you now have the book data in the database.
config.php in a text editor and change your website, username and password. The file should look like
<?
$link = mysql_connect('web2.cse.sc.edu', 'yourusername', 'yourmysqlpassword');
if (!$link) {
die('Not connected : ' . mysql_error());
}
if (! mysql_select_db('yourusername') ) {
die ('Can\'t use yourusername : ' . mysql_error());
}
?>
Again, change web2.cse.sc.edu to your own website.
http://web2.cse.sc.edu/php/list.php and get an html table containing all the books in the database. Notice that there is also an edit and a delete button. Feel free to use these to edit the books (the exact books in the database won't matter for this homework). Also notice that there is a new.php which you can use to add new books to the database. What you have now is a basic CRUD interface to the books table in the mysql database. Basically, you can now Create, Read, Update (edit) and Delete books from the database using a web interface. Neat! Make sure you play with this website a bit before moving on: try to figure out how it works.
For your homework you will turn the crude web 1.0 website I have given you into a shiny new web 2.0 website. Specifically, your new website will consist of only one page of html and all the CRUD functions will be implemented using Ajax (use the jQuery library for this).
Notice first that there is get.php file also included. This script takes as input any one of the arguments title, author, year, isbn, publisher, and rating, with a string value. It then returns a JSON object with the books that match that query. For example, try loading the url http://web2.cse.sc.edu/php/get.php?author=bi. You will get back a JSON object with all the books whose author contains the substring 'bi'. This is the function that you will use to retrieve data back from the server. You will alse need to use the other php scripts (edit.php, delete.php, new.php) to change data on the database.
Your one webpage will look like this (but much prettier, of course):
| Title | Author | Year | Isbn | Publisher | Rating | |
author=bi search. If the user fills in more than one box simply ignore all but one of the boxes (that is, assume he won't do that).
I also want the list of books you show the user to be editable in place. That is, the information for each book should be displayed as regular text to the user (not in a text box), but if the user clicks on one, say the title of one of the books, then text gets replaced by a text box that contains the title and the user can edit the title. When the user clicks away or hits return you will commit these changes to your database.
Finally, you will implement a little notification area that tells the user when each of the XHR requests has completed. Or, if a request is taking too long then you will display an error message, cancel that request, and launch another identical request.
To turn it in just
cd ~/web tar cfz php.tar.gz phpthen email me the resulting
php.tar.gz. Also, email me the URL to your working website.
We will continue working on the Brain Age exercise on Wednesday and the code will be due on Monday, March2 @9am. Note that you do not need to draw the lines between the boxes. You only need to keep track of the last box the user clicked on, and keep the timer going.
For your next JavaScript you will finish the closures exercise and turn it in by Monday, 23 February @9am.
For our first JavaScript homework you will need to finish the four JavaScript exercise questions. This homework is due by Monday, 16 Feb, at 9am. During class on Monday we will start doing more complex JavaScript exercises.
Oh, and, one tip: I find it useful to have a printed JavaScript quick reference card so I can quickly look up the various functions that the language provides.
Columbia has a great farmer's market, next to the stadium, which does
not have a website. We have been contacted by Jessica Wyndham who has
asked us if we could put together a simple website for the state
farmer's market. She says that we should use as inspiration the Portland farmer's market
website (of course, you do not want to copy their code, just
browse it for ideas). So, our first homework you will deliver a
website that
The final project is due Monday, Feb. 9 at 9am.
The requirements are the website should have the tabs, subtabs, and
text shown below. For the pages for which we have no text either make
up something or write "coming soon". The tabs your web site should have are:
The new South Carolina State Farmers Market will be a state of the art facility that provides the agricultural community of South Carolina with a one of a kind venue in which to showcase South Carolina products. The proposed site in Lexington County is located on U.S. Hwy. 321 and is within 1.5 miles of both I-77 and I-26, with over 2,500 feet of frontage on I-26. The new market design is based upon a clearly defined plan that provides separate and distinct areas for the major wholesale vendors, the retail sale of South Carolina agricultural products, with a section specifically designed for this purpose, and also a farmers' shed section, which will be owned and operated by SCDA and will provide an environment for South Carolina farmers to rent space on a daily or seasonal basis in order to offer their products.
Each section of the new market is designed to serve a particular purpose and will provide the agricultural community of South Carolina with a venue that is second to none. The Retail/Agribusiness section is designed to be user/pedestrian friendly with 10 foot sidewalks, convenient onsite parking adjacent to each building, and a low country design offering 12 foot wraparound porches and heavy landscaping. This entire section is designed to be pedestrian/customer friendly so that families will be comfortable visiting the market.
The inclusion of an exhibition kitchen to be operated by SCDA, a dedicated children~s play area, school bus drop off area, and a small amphitheater (400 seats +/-) will also provide additional amenities within the market which will assist in drawing traffic to the market. This will benefit the retail vendors and South Carolina Farmers renting space within the Farmers Shed Section of the market. Some folks may question why an amphitheater would be desirable as part of the State Farmers Market. The answer is quite simple; it provides a venue for festivals, outdoor entertainment, and other activities that are all part of the overall theme for this market.
SCDA will relocate their current Laboratory facilities, as well as create a new conference center and construct Farmers' Sheds, which will be built, owned and operated by SCDA for the benefit of South Carolina Farmers.
Insert renderings of the market
Use the photo of the Leek for our "Fresh Find" and say
The leek is a vegetable similar in appearance to a large green onion. It reaches maturity in the autumn months. The edible portions of the leek are the white, onion-like base and the light green portions of the stalk. The core is tender and may be eaten, but gets woody as the leek ages. The taste is similar to that of a mild scallion. When raw, it is crunchy and firm in texture.
An easy way to clean the leek is to cut it into rounds and submerge in a bowl of water. Discard the rooted end. Swish so the grit falls out of the layers and down into the water. You can then retrieve the clean leeks from the top of the water. Leeks can be used in several ways, including boiling, frying and raw. Check out our "Fresh Recipe" for a delicious way to use this veggie!
Leek and Potato Soup
Ingredients
Directions
Chop the leeks into small pieces.
Melt butter in saucepan over medium 
heat. Add the leeks and a heavy pinch of salt and
saute for 5 minutes. Drop heat to medium-low and cook until the leeks
are tender, approximately 25 minutes, stirring occasionally.
Add the potatoes and the vegetable broth, increase the heat to medium-high, and bring to a boil. Reduce the heat to low, cover, and gently simmer until the potatoes are soft, approximately 45 minutes.
Turn off the heat and puree the mixture
with an immersion blender (or in standard blender or food processor)
until smooth. Stir in the heavy cream, buttermilk and pepper. Taste
and adjust seasoning if desired. Sprinkle with chives (and cheese and
bacon, if desired) and serve while hot.
You should use the logo and some the other images that have been provided to us.
You must both zip the complete directory and email it to me, as well as placing all the files on your public_html and sending me the link to that live version.
Posts
All Comments
