<style>
.reveal {
font-size: 33px;
}
.reveal div.para {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
</style>
# COMP1010
## 4.1 - Web Applications Introduction
---
## Moving away from Colab
* To make our own websites, we need a bit more flexibility than Colab can give us.
* Set up your computer by following the instructions [here](https://webcms3.cse.unsw.edu.au/COMP1010/21T2/resources/61169).
---
## Continuous Learning
* aka Something I've been excited to show you
* aka Helpful debugging tips
* Doesn't work in Colab, because Colab uses Python 3.6.9, and this only works from Python 3.8
* Thanks to: [jwburn19](https://www.reddit.com/r/learnpython/comments/nur6o9/til_ive_been_making_debugging_statements_harder/)
---
## Continuous Learning
<div class="para">Rather than:</div>
```{python}
example_variable = 42
print(f"example_variable = {example_variable}")
```
<div class="para">We can do:</div>
```{python}
example_variable = 42
print(f"{example_variable=}")
```
---
## Detour: Code Style
* Indentation:
* Not tabs - spaces.
* 4 spaces per indentation level is ideal.
* 2, 3 or 4 spaces are acceptable, but they must be consistent.
* Line length:
* Line length should not exceed 79 characters.
* [Reasoning](https://www.python.org/dev/peps/pep-0008/#maximum-line-length)
* If you need help (eg your line of code is longer than this, and you need to put it over 2 lines, but then the code breaks), post your specific example on the forums and we can show you how to do this.
---
# Detour: Code Style
* Functions:
* Don't leave chunks of code floating around your file.
* When in doubt, put your code in a (well-named) function, and call it at the right time.
---
# Web Application Development
---
## Roadmap
0. HTML and CSS (static)
1. Flask and PyHTML (dynamic)
2. Multi-page Applications
---
## Complete Index of Demo Files
Index of demos can be found [here](https://github.com/sim-mautner/cs1010-21t2/blob/main/4-1-web-intro/index.md).
---
## HTML
* HyperText Markup Language (HTML) describes the structure of web pages.
* [Tutorial Republic: HTML](https://www.tutorialrepublic.com/html-reference/html5-tags.php)
* [W3Schools: HTML](https://www.w3schools.com/html/default.asp)
```{html}
<!DOCTYPE html>
<html>
<head>
<title>COMP1010 Web Apps Class 1</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
---
## HTML
* tags
* head vs body
* tag has attributes and children (this links to pyhtml, when things have 2 sets of brackets)
* almost all tags come in pairs: opening and closing
* self-closing tags
* doctype
---
## CSS
* Cascading Style Sheets (CSS) describe the visual appearance of HTML pages.
* If you're looking for colour schemes, I recommend sites such as [this one](https://paletton.com/).
* [Tutorial Republic: CSS](https://www.tutorialrepublic.com/css-tutorial/)
* [W3Schools: CSS](https://www.w3schools.com/css/default.asp)
---
## Demo 0: HTML and CSS
0. Simple HTML
1. External CSS
2. Forms
3. HTML5 features
---
## PyHTML
* Quicker and easier than typing out all the html
* Project: you may, if you like lots of work, choose to write html from scratch
* [Reference here](https://github.com/cenkalti/pyhtml/blob/23b0cd1ea35bf159c4cbe6a8774d7af1440a1708/pyhtml.py)
---
## Demo 1: Flask and pyhtml
0. python - hello world only
1. very simple pyhtml code (no forms, no css)
2. pyhtml - links and images
3. pyhtml with CSS
---
## Terminology
* **Network:** A series of computers connected together such that they can communicate is a network.
* **Internet:** A network of computers spanning the globe.
* **World Wide Web:** A system of documents and resources linked together via URLs.
* **Uniform Resource Locator (URL):** A reference to web resource and how to access it. For example, 'https://www.google.com' is a URL.
* **Protocol:** The language used by two entities for the purposes of communication.
* **HyperText Terminal Protocol (HTTP):** The protocol used by the World Wide Web.
---
## World Wide Web
<img src="https://ptgmedia.pearsoncmg.com/imprint_downloads/informit/learninglabs/9780133927603/graphics/01fig01.jpg" />
* **Web Browser:** Software that lets us browse the web by making requests to web servers. Examples include: Chrome, Firefox, Edge, Safari, etc.
* **Web Server:** Software running somewhere on the internet that responds to requests from web browsers.
---
## HTTP Requests
* Tend to contain a lot of information.
* For the most part, it can be ignored or is handled for us by Flask.
---
## HTTP Requests - The Important Bits
* HTTP methods:
* GET: Sent by the browser when requesting a resource.
* POST: Sent by the browser when submitting a form (see below).
* PUT: Typically sent by the browser when uploading a file.
* There are others but they are unlikely to come up in this course.
* Path
* The path being requested, e.g. `/echo/hello` (corresponds to a route in Flask).
* Cookies
* See below
---
## HTTP Responses
* Contain the response to the request, but can also contain some other information.
---
## HTTP Responses - The bits we care about
* The status code
* 200 means everything worked
* 404 means the request was for a resource that doesn't exist
* Numbers starting with a 5 mean the web server crashed while trying to handle the request.
* Numbers starting with a 4 mean the web server decided that the request was invalid and sent back an error in the response.
* [A full listing of all standard status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
* Set-Cookie
* See below
---
## Demo 2: Multi-page Applications
0. different functions with different urls
1. pyhtml with a form, which links between web pages
2. passing data between web pages
---
## Feedback
Lecture: 4.1 - Web Applications Introduction
[Link to feedback form](https://forms.gle/NdAhw7ZMJ2eBEydd7)
{"metaMigratedAt":"2023-06-16T02:04:20.989Z","metaMigratedFrom":"YAML","title":"4.1 - Web Applications Introduction","breaks":false,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"969c3c3d-0ef4-4f08-b22a-2f2b8951224b\",\"add\":10250,\"del\":4078}]"}