This is an old revision of the document!
Tasks
Today we're going to start off by reinventing the wheel, a little bit. The first exercise will have you re-implementing the screenshot functionality in a Python3 script. Before you start gleaming with joy, thinking that there's probably a module / library out there doing just this, know that 1) you're probably right and 2) we won't be using them :). In stead, we'll take the hard road and fetch our pixels right from the frame buffer… Now that I'm thinking about it, when you consider the state of pip and module dependency hell in Python, which is ultimately the hard road?
Anyway, in the second half of the lab, we'll do the exact opposite of what we'll have done in the first. In stead of taking a screenshot, our second script will overwrite the frame buffer (and consequently what's being displayed on our screen) with the content of a randomly selected image.
The submission for this lab must contain the two scripts, a screenshot taken with the first script demonstrating that the second script works, and optionally proof that you've completed the feedback form (for the bonus 10p). As usual, check out the moodle assignment. The deadline is set for 23:55 this Sunday evening. Everyone must upload their work, regardless of whether they were present for the lab or not.
First, download the skeleton archive (.zip) and unzip it.
It has the following structure:
├── initial_design.html # initial HTML template ├── public/ │ ├── bootstrap/ # bootstrap sources │ ├── images/ │ └── style.css # main stylesheet ├── server.py # server-side application └── templates/ # Jinja templates
To test, open initial_design.html
in a browser. It should look similar (almost: minor text differences) to the following screenshot:
Also, there are other open-source CSS toolkits, google them before starting a website and choose something you like before starting a design project.
Also, it would be a good idea to test your Python / Flask setup now:
python3 server.py
# it should say that the server is running on http://127.0.0.1:5000/
Our customer wants to make some changes to the website's design:
public/images/
;<img>
tag;style.css
for existing definitions!<header>
to match the chosen image on its margins (maybe something blue?);15px
);border-radius
*wink*
./path/to/file.jpg
)?
HTML also uses them (those URLs will be relative to your current file – either the .html
or the .css
)!
In some cases (webpage has sub-paths, e.g., /account/details.html
), you may also use absolute URLs (path begins with a /
representing the server's root directory).
Time to add a second HTML page:
second.html
;.html
pages (in each HTML page, find the <a class=”…” href=”..”>
links inside the #navbarToggle
div
and edit the href
s to point to each-other);
pagename.html
or ./pagename.html
will do! DO NOT USE: absolute paths, e.g., C:\Users\…\pagename.html
for obvious portability reasons!
.active
) with your desired properties and append it to the appropiate menu link element: <a class=“nav-item nav-link” …>
(also note: different class attribute values are separated by space!).
First, let's understand how Flask serves files:
public/myimage.jpg
(or use whatever name you wish, but keep this directory!);python3 server.py
) and point your browser to http://localhost:5000/public/myimage.jpg
, it should display your image.server.py
; start the web server, point your browser to http://localhost:5000/myimage2.jpg
– it won't work… why?
Now, we want to move the html
page from earlier tasks to be served by the Flask web server:
initial_design.html
to the templates/
directory (we're using the default Flask convention);server.py
to call render_template
(see official quickstart guide) and actually serve your HTML file.
render_template
symbol from the Flask library!
/google
endpoint which automatically redirects to your favorite (or not) search engine!Finally, we shall see how dynamic content can be interpolated
{{mycontent}}
(this literal text!) as content somewhere inside the main content block: <div class="content-box main-content">
...
{{mycontent}}
...
server.py
code (the second_page
function) to take in the desired value as a request parameter and pass it to the mycontent
template variable, e.g.: def second_page(): render_template("second.html", mycontent=request.args.get("mycontent", "<not specified>"))
mycontent
value as a GET
URL parameter (e.g., ?parameter=value
) and see if the content changes dynamically after the request!