Description
In this assignment create a web page showing the weather across the USA.
Requirements/Specifications/Steps
1. First step is that you need a map of the USA. We will use the SVG file format from
Wikipedia:
CSCI-3308: Boese
a. Info: https://en.wikipedia.org/wiki/File:Blank_US_Map.svg
b. File to download:
https://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg
2. Now create a new HTML file named Firstname_Lastname_HW4.html
CSCI-3308: Boese
3. In your HTML file, add the following code to create a web page:
<html
<head
</head
<body
4. On the next line in the file, insert the US map you downloaded. Copy-paste isn’t very
effective here, but you can do this in vim with the following:
:r Blank_US_Map.svg
5. Run a python server on your machine (Use the CGI version).
6. Test in your browser – the map of the US should show up.
7. Now convert this to a python CGI script that prints this HTML code.
a. Copy your html file to a new file named Firstname_Lastname_HW4.py
b. Be sure to put this in the cgi-bin directory like we did in lectures.
Check permissions!
c. The first line in this file should be the shebang stuff.
d. Then add this:
print “Content-type: text/html”
print
You DO need the extra print!
e. Then convert the code we have already to be in a string.
The secret to doing this is to use the multi-line quotes, such as:
contents = ‘’’
<html
<body
… etc.
‘’’
print contents
You should now see the map again, via the python script.
CSCI-3308: Boese
8. Now we want to call the URL we used in lab to get the weather. To start, do this with
Boulder, CO.
To do this in python, if you Google how to read the JSON from a URL you can find a great
answer at:
https://stackoverflow.com/questions/13921910/python-urllib2-receive-json-response-from-url
Remember, if you use this source then attribute it in your code!
a. If you print out the results, you may notice the letter ‘u’ everywhere.
This means it is returning the values in Unicode.
Search Google for a solution to convert to strings. Be sure to attribute your
source!
At this point you should now see something like this:
9. Our next step is to test manually changing the colors of the states. Add the following
code at the end of your file:
print response
print ”’
<script
$( document ).ready(function() {
”’
print ”’
});
</script
”’
Note: We are dividing up the printing into two separate print statements because we will
need to add python code in the middle.
The document ready function is a JavaScript JQuery library thing, so in order to make this
work we need to add inside the HTML head tag the following library reference:
