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 (optional)
    • 1 point for conscious attendance
    • Possible bonus points for seminar or home activity
  • Home assignments
    • Regular, and mandatory assignments
    • Mandatory assignments required
  • Programming test
  • Authoritative wording at Webik

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.

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

Programming test

  • Specification TBA
  • HTML, CSS, JavaScript, PHP
  • Prepare your own code
  • Test in lab: Modify your code

Labs Content

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

Cooperation allowed! Just do not disturb others.

Demonstration: Developer tools

Log in to a website (e.g. SIS):

  • 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 your browser of choice.
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()

Interactive content

Using self we can access information about the request. 


class MyServer(BaseHTTPRequestHandler):
    def do_GET(self):
        # Previous content ...
        self.wfile.write(bytes(f"<p>Request: {self.path} </p>" , "utf-8"))

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.

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>

Pro level

Add support for code execution like conditions, cycles, functions, ...

Warning

Spoilers Ahead

Simple solution

Run following command to server content of current directory:


python3 -m http.server

Expanding the script

Add at the end of the do_GET method.


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
  • Password: see your e-mail, check spam

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

You can connect to remote machine using your IDE. Remote development using VS Code. Keep in mind that webik 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/
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
You can use SSH key as a method of authentication. Get it done with ssh-copy-id.

Windows with GUI

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

Leave an anonymous feedback.

Questions, ideas, or any other feedback?

Please feel free to use the anonymous feedback form.