Download - Web develop in flask
![Page 2: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/2.jpg)
Outline
Introduce internet network
What is HTTP request and response
Flask
Write a Todo list
http://tinyurl.com/nccumath-flask
![Page 3: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/3.jpg)
Internet
People use browsers to surf the internet.
You may hear that a server is crashed.
![Page 4: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/4.jpg)
http://www………
![Page 5: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/5.jpg)
Given a URL
Protocol IP / Hostname Query StringPath
http://www.bing.com/search?q=math
![Page 6: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/6.jpg)
HTTP Protocol
A communication protocol
A well-known client is web browser
Not merely for browser
![Page 7: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/7.jpg)
Request and Response
Request
Response
Clients Servers
![Page 8: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/8.jpg)
HTTP Request Methods
GET
POST
![Page 9: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/9.jpg)
GET
Browser a website by url
Request resources (contents)
Example: http://www.bing.com/search?q=math
![Page 10: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/10.jpg)
POST
Generally, we use it to submit a form
Wrap data in request body
![Page 11: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/11.jpg)
Response
Roughly speaking, it is the contents on a browser.
![Page 12: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/12.jpg)
IP / Hostname
Address of a server
You can register a Hostname (domain name)
Hostname will be resolve to a IP address by DNS
Where a request will be delivered to
![Page 13: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/13.jpg)
Some Special IPs
127.0.0.1 : loopback address
0.0.0.0 : Network traffic from any valid IP address
192.168.x.x : Preserved private IP address
![Page 14: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/14.jpg)
Path
Location of a file
Purpose of your request
![Page 15: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/15.jpg)
Query String
Some information that you provided.
![Page 16: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/16.jpg)
Server Side
![Page 17: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/17.jpg)
Inspect Web Server
Web Server(apache2, nginx)
Python Web
Application
Request
Request Object
Response
Response Object
![Page 18: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/18.jpg)
Inspect Web Server
Web Server(apache2, nginx)
Python Web
Application
Request
Request Object
Response
Response Object
What we focus on
![Page 19: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/19.jpg)
Web frameworks
Django
Flask
Web.py
Many…
![Page 20: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/20.jpg)
Flask
![Page 21: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/21.jpg)
Requirements
python
flask
sqlalchemy
![Page 22: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/22.jpg)
First Appserver.py
![Page 23: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/23.jpg)
First App
Create an app
server.py
![Page 24: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/24.jpg)
First App
Create an app
server.py
Enable Debug Mode
![Page 25: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/25.jpg)
First App
Create an app
Assign path
server.py
Enable Debug Mode
![Page 26: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/26.jpg)
First App
Create an app
Assign path
View function
server.py
Enable Debug Mode
![Page 27: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/27.jpg)
First App
Create an app
Assign path
View function
Start the server
server.py
Enable Debug Mode
![Page 28: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/28.jpg)
First Appserver.py
![Page 29: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/29.jpg)
Run
python server.py
![Page 30: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/30.jpg)
Inspect Web Application
Request Object
Response ObjectPython Web Application
![Page 31: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/31.jpg)
Inspect Web Application
Request Object
Response Object
Dispatch path
Run View Function
Return value(string)
![Page 32: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/32.jpg)
What’s different between this and traditional web pages?
![Page 33: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/33.jpg)
Interact with end-users
![Page 34: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/34.jpg)
Case 1 : Say Hi
Hi, Jim
![Page 35: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/35.jpg)
Use GET
http://localhost:5000/?name=Jim
Use query string in your view function
![Page 36: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/36.jpg)
Exercise I
Given a dictionary:{“apple”: “a fruit”, “calculus”: “a subject”, … and more}
Query it by GET method
Display “Not found” if the key is unavailable
![Page 37: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/37.jpg)
Exercise I.I
Design a web app that accept multiple query strings.
![Page 38: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/38.jpg)
Once the length of return string becomes longer and longer...
![Page 39: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/39.jpg)
The function is not readable
![Page 40: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/40.jpg)
Is there a way to move contents out?
![Page 41: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/41.jpg)
Is there a way to move contents out?
A: Use Template (jinja2)
![Page 42: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/42.jpg)
Create a templates
Create a “templates” folder
Create a txt file (hello.txt) in templates folder
Write contents in this file
<= Very important
![Page 43: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/43.jpg)
Use template in view function
from flask import render_template
render_template(“hello.txt”)
![Page 44: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/44.jpg)
Not merely a text
![Page 45: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/45.jpg)
Format your content using HTML
![Page 46: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/46.jpg)
HTML/HTML5
A markup language
Contents of a web page
![Page 47: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/47.jpg)
A HTML Element
<tag_name attr1=“value” attr2=“value”> content
</tag_name>
<p> This is a book </p>
<h1> This a title </h1>
![Page 48: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/48.jpg)
Some Elements<p> … </p>
<h1> … <h1> to </h5> … </h5>
<div> … </div>
<ul> <li> item </li>
<li> item </li>
</ul>
<ol> <li> item </li>
<li> item </li>
</ol>
![Page 49: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/49.jpg)
HTML Layout
![Page 50: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/50.jpg)
HTML LayoutHTML Block
![Page 51: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/51.jpg)
HTML LayoutHTML Block
Head
![Page 52: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/52.jpg)
HTML LayoutHTML Block
Head
Body
![Page 53: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/53.jpg)
HTML Layouttemplates/index.html
![Page 54: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/54.jpg)
Rewrite hello function
Again, use the HTML template that you just finished.
![Page 55: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/55.jpg)
What about variables?
![Page 56: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/56.jpg)
What about variables?A: Code in Template
![Page 57: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/57.jpg)
Variable Substitution
You can substitute variables in template files
{{ name }} in HTML template
![Page 58: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/58.jpg)
Transfer variables to template
Use keyword arguments in render_template
render_template(“hi.html”, name=name)
![Page 59: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/59.jpg)
For, If Statement
{% if name == “Jim” %} …… {% endif %}
{% for item in things %} {% endfor %}
![Page 60: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/60.jpg)
Case Study: Food List
Display a list of your favorite food if it is public
Otherwise, display a message
![Page 62: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/62.jpg)
Exercise II
Rewrite your dictionary app by HTML template.
![Page 63: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/63.jpg)
Submit a Form
![Page 64: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/64.jpg)
HTML Form
Form elements
form - a block of a form
input - input fields
label - label for an input
![Page 65: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/65.jpg)
Case: Who are you?
Ask for a name
Once a name is submitted, Display the welcome message.
![Page 66: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/66.jpg)
HTML for whoareyouWhere the
form request toMethod for the
form request
![Page 67: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/67.jpg)
view function for whoareyouAllow method for POST
Handle POSTrequest
Handle GET request
![Page 68: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/68.jpg)
Exercise III: Calculator
Two input fields and a submit
Display the result
![Page 69: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/69.jpg)
To-Do List
![Page 70: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/70.jpg)
Views
List all items
Add a new item
Delete an item
![Page 71: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/71.jpg)
Flask redirect
redirect
url_for
![Page 72: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/72.jpg)
Save to file
Use pickle module (pickle.load and pickle.dump)
pickle.load(open(“todo_list.data”, “r”))
pickle.dump(dictionary, open(“todo_list.data”, “r”))
![Page 73: Web develop in flask](https://reader037.vdocuments.net/reader037/viewer/2022102717/5594136c1a28ab932b8b4571/html5/thumbnails/73.jpg)
Questions