<style>
.reveal {
font-size: 20px;
}
.reveal div.para {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
img[alt=drawing] { width: 200px; }
</style>
# COMP1010
## 5 Web Apps
### 5.0 Introduction and Overview
---
## Purpose
* Overview of the topic.
* Designed to introduce some concepts and terminology and explain at a big-picture/high-level, how they interact.
---
## Web Servers and Web Browsers
* What are they and what do they do?
* How are they different?
* How do they interact?
---
## HTML and CSS
* We are going to be creating web pages to display in the browser.
* To do this we use:
* HTML: HyperText Markup Language - standardised language for writing web pages.
* CSS: Cascading style sheets - improves the aesthetic of our web pages.
---
## PyHTML
* We can write HTML "by hand" by typing out the whole string. (Or generating it from our variables.)
* With the PyHTML library, we can call a variety of functions which create the HTML.
* By using PyHTML, it is clearer, earlier in the process if we have made a typo (spelling mistake) in tags.
---
## What Next?
* Before our HTML (and CSS and PyHTML if we use it to produce our HTML) can be really useful, we want to actually be able to produce different HTML based on:
* What button the user has pressed
* What input the user has entered in forms
* We also want to be able to save data for the user (items they've added to a shopping cart, account details such as username and password).
* To do this we need a **web server**.
---
## Writing a Web Server
* In this course we will use a Python framework called **Flask** to write web servers.
* A framework is similar to a library, in that it provides functionality for us, but with some [differences](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/).
* Flask is a framework which makes it quite quick and easy to write a web server.
---
## What Flask (the web server) Does
1. User enters URL (Uniform Resource Locator) (aka web address).<br>This gets sent browser$\rightarrow$server.
2. Server (Flask!!) gets the URL and produces the HTML to display.<br>This gets sent server$\rightarrow$browser.
3. User clicks a button ('next', 'back') or fills out a form with detail and clicks 'ok'.<br>This data gets sent browser$\rightarrow$server.
4. Server (Flask!!) gets the information about the button which was clicked and anything that was filled in on the form, and designs the next lot of HTML to be displayed.<br>This gets sent server$\rightarrow$browser.
In summary, the web server (Flask) takes information from the user and produces HTML to be displayed in the browser.
---
## What We Are Going to Learn
* 5.1: How to write HTML (and view it in your browser)
* 5.2: How to produce HTML using the PyHTML library
* 5.3: How to write a web server, in Python, using Flask
* 5.4: Cookies (saving data unique to the user)
* 5.5: External Data Sources (getting information from places other than the user)
* 5.6: CSS (making our HTML more user friendly and aesthetically pleasing)
* 5.7: (a touch of) Javascript (when it's useful to do some processing in the browser rather than all on the server)
---
{"metaMigratedAt":"2023-06-16T20:52:09.448Z","metaMigratedFrom":"YAML","title":"5.0 Web Apps Introduction and Overview","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"969c3c3d-0ef4-4f08-b22a-2f2b8951224b\",\"add\":3351,\"del\":0}]"}