A document from MCS 275 Spring 2022, instructor David Dumas. You can also get the notebook file.

MCS 275 Spring 2022 Worksheet 13

  • Course instructor: David Dumas

Topics

This worksheet focuses on HTML, CSS, and the basics of the Python web framework Flask. (We'll continue working on Flask in the upcoming week, with more Flask-related exercises coming in Worksheet 14.)

Resources

These things might be helpful while working on the problems. Remember that for worksheets, we don't strictly limit what resources you can consult, so these are only suggestions.

1. DIY MCS 275 home page

In MCS 275, all of the following materials are distributed as URLs that link to public web pages:

  • Lecture slides, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/slides/lecture35.html
  • Worksheets, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/nbview/worksheets/worksheet13.html
  • Worksheet solutions, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/nbview/worksheets/worksheet13soln.html
  • Homework assignments, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/nbview/homework/homework11.html
  • Homework solutions, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/nbview/homework/homework11soln.html
  • Projects, which have URLs like 
    https://www.dumas.io/teaching/2022/spring/mcs275/nbview/projects/project3.html

Write a Python script mcs275spring2022.py that generates an HTML file (writing it to mcs275spring2022.html) that contains a header, sections for each class of course material, and lists of the individual documents, as shown below. (The page will be quite long, so the image below shows its contents in two columns instead of one very tall image. However, the actual page should have just one column of content.) Each list item should be a link to the actual course document.

Note: For this program, you're not using Flask. You're making a program that opens and writes to a text file. This is testing your HTML knowledge and your string handling skills.

Unstyled MCS 275 link list

Make the output HTML refer to a stylesheet courselinks.css and then create that stylesheet. Add directives so that the body of the document requests the typeface "Helvetica", and add other rules to make the rendered mcs275spring2022.html look as much as possible like the one below.

Styled MCS 275 link list

Note: The actual typeface in this image isn't Helvetica; my browser substituted a similar typeface because it couldn't find the one the CSS specified.

3. Base converter

A Flask feature

First, let's discuss a feature of Flask that didn't come up in Lecture 35, but will be useful in this problem.

Recall that if app is a flask.Flask object, then the decorator

@app.route("/orthogonal/sauntering/balloon/")
def f():
    return "...HTML HERE..."

will arrange that the function f gets called whenever the document /orthogonal/sauntering/balloon is requested from the application (e.g. by you opening http://localhost:8000/orthogonal/sauntering/balloon/ in a web browser).

This is great for fixed URLs, but sometimes you want many similar URLs to all be handled by a single function. Typically, the function would look at certain parts of the URL to decide what to do. For example, in an application that has pages with information about planets, you could define separate functions for each of

/orbital_period/venus/
/orbital_period/earth/
/orbital_period/mars/

but it would be nicer to have a single function that can return a page about the orbital period for any of the planets. Flask supports this with a syntax like

@app.route("/orbital_period/<planet>/")  # part inside < and > brackets is a placeholder
def get_period(planet):     # the string appearing there gets passed as an argument
    return "...HTML HERE..."

so that a request for /orbital_period/earth/ will call get_period("earth") while a request for /orbit_period/mars/ will call get_period("mars"). Note that the parameters of the function need to match the names given inside the <...> appearing in the route description (e.g. <planet> in the route description means we need a parameter called planet).

The task

Write a Flask application baseconvert.py that can convert between decimal, binary, and hexadecimal, based on a request encoded as a URL such as

/decimal/120/to/binary/
/binary/1001/to/hexadecimal/
/hexadecimal/f00f/to/decimal/

with the general syntax being

/INBASE/N/to/OUTBASE/

where INBASE and OUTBASE are each one of decimal, binary, or hexadecimal, and where N is a sequence of digits representing an integer in the number system INBASE.

The application should only have a single route which decides what to do based on parts of the URL.

Thus, for example, a request for /decimal/9/to/binary/ might generate this HTML code as a response:

<!doctype HTML>
<html>
<head>
<title>Decimal 9 is binary 1001</title>
</head>
<body>
<h1>9 = 0b1001</h1>
</body>
</html>

and for /hexadecimal/1f/to/decimal/, the HTML your application sends as the response might be:

<!doctype HTML>
<html>
<head>
<title>Hexadecimal 1f is decimal 31</title>
</head>
<body>
<h1>0x1f = 31</h1>
</body>
</html>