Web Applications

HTTP and HTML

About this presentation

Objectives

  • Credit requirements
  • HTML
  • Your "first" Python HTTP server
  • webik.ms.mff.cuni.cz

Credit Requirements

  • Attendance IS optional, yet highly recommended.
    • 1 point for conscious/active attendance.
    • Possible bonus points for seminar or home activity.
  • There are going to be home assignments.
    • Regular/optional assignments.
    • Mandatory assignments.
  • Programming lab test

Authoritative wording will be made available this week.

Home assignments

  • Assigned, solutions submitted to ReCodEx
    Registration available via UK CAS.
  • Evaluated semi-automatically
    • Beware of the deadlines
    • No copycats
    • Code style

We can subtract points for bad code style and practices. You have one week, from the assignment evaluation, to fix the issues and submit fixed solution.

In case of any problem (e.g. illness) notify the teacher immediately!

Programming test

  • Super simplified content management system.
  • Combination of HTML, CSS, JavaScript, PHP.
  • Prepare your own code.
  • You can use code from labs and homeworks.
  • Programming lab test: modify your code.
  • Detail specification is going to be announced later.
  • Detail on using AI are part of the specification.

Labs Content

  • Revising and extending lecture contents.
  • Different levels of difficulty.
  • It is expected not everybody will finish all exercises.

Cooperation, during labs, is allowed, but do not disturb others.

Demonstration: Developer tools

Log in to a website (e.g. SIS). Open developer tools using on of the following methods (Chrome, Edge, FireFox):

  • Right mouse click and select "Inspect"/"Prozkoumat prvek"
  • ctrl + shift + i
  • F12

Explore and comment on following tabs:

  • Elements tab
  • Network tab
  • Application tab: cookies

Exercise: Create a simple HTML page with CSS

  • Create local file content.html.
  • Add a header, a paragraph, a link, and a button (with no action).
  • Use CSS to change header color to red.
  • Do not use external CSS, keep all in a single file.
  • Validate using validator:
  • Open the file using a web browser.
Warning

Spoilers Ahead

Basics

Demonstration: Web server with Python

Static content

Inspired by Python tutorial. This is NOT a production code!

#!/usr/bin/env python3
from http.server import BaseHTTPRequestHandler, HTTPServer

HOST = "localhost"
PORT = 8080

class MyServer(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header("Content-type", "text/html; charset=utf-8")
        self.end_headers()
        self.wfile.write(bytes("<!doctype html><title>My Page</title>", "utf-8"))

if __name__ == "__main__":
    server = HTTPServer((HOST, PORT), MyServer)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass
    server.server_close()

    

What is missing in the code?

Interactive content

We need a way to access the information about the request, like the header or path. This information is available using self in the handler method.


class MyServer(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header("Content-type", "text/html; charset=utf-8")
        self.end_headers()
        self.wfile.write(bytes("<!doctype html><title>My Page</title>", "utf-8"))
        # The next line is new!
        self.wfile.write(bytes(f"<p>Request: {self.path} </p>" , "utf-8"))

    

Different frameworks employ different ways to access the request information and produce the response.

Exercise: Host your website locally with Python

Use Python to server the content.html file you've created. You can build on the given Python example. At the end you should be able to access http://localhost:8080/, or http://localhost:8080/content.html, and see the website in your browser.


Advanced version

Read values from URL query and substitute them into the file.
For example query: ..?name=Ailish&age=19 and template:


<p>{name} is {age} years old.</p>
      
Should produce output:

<p>Alilis is 19 years old.</p>
      

Warning

Spoilers Ahead

Simple solution

Run following command to server content of current directory.


python3 -m http.server
    

This will start a simple webserver, serving files in the directory.

Expanding the script

Change the GET method.


class MyServer(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header("Content-type", "text/html; charset=utf-8")
        self.end_headers()
        with open("content.html", "rb") as stream:
            self.wfile.write(stream.read())

    

Advanced version

Demonstration: Connect to webik

  • Host name: webik.ms.mff.cuni.cz
  • Port: 42222
  • Username: uniq for each user -> see your e-mail, check spam
  • Password: see your e-mail, check spam

Content of public_html is available at https://webik.ms.mff.cuni.cz/~<username>/.



When connecting to webik, keep in mind that it has limited resources.

Linux / WSL / Powershell

Connect using SSH to get access to shell:
ssh -p 42222 <username>@webik.ms.mff.cuni.cz
Copy file index.html from local machine to webik:
scp -P42222 index.html <username>@webik.ms.mff.cuni.cz:public_html/
On your machine, you can save configuration to ~/.ssh/config:

Host webik
    HostName webik.ms.mff.cuni.cz
    User <username>
    Port 42222
      
Now you can use just: ssh webik

Windows with GUI

Both should be installed on lab machines. We recommend to familiarize yourself with the command line alternatives.

Exercise: Upload your website to webik

  • Create a valid index.html page with link to "./content.html".
  • Upload index.html and content.html to your public_html directory.
  • Check using web browser at https://webik.ms.mff.cuni.cz/~<username>/.

How are we doing?

  • Credit Requirements
  • HTML website
  • Your "first" Python HTTP server
  • webik.ms.mff.cuni.cz
Questions, ideas, or any other feedback?

Please feel free to use the anonymous feedback form.