Web develop in flask

1. Web Develop in Flask
Jim Yeh <lemonlatte@gmail.com>

2. Outline
Introduce internet network
What is HTTP request and response
Flask
Write a Todo list
http://tinyurl.com/nccumath-flask

3. Internet
People use browsers to surf the internet.
You may hear that a server is crashed.

4. http://www………

5. Given a URL
http://www.bing.com/search?q=math
Protocol IP / Hostname Path Query String

6. HTTP Protocol
A communication protocol
A well-known client is web browser
Not merely for browser

7. Request and Response
Clients Servers
Request
Response

8. HTTP Request Methods
GET
POST

9. GET
Browser a website by url
Request resources (contents)
Example: http://www.bing.com/search?q=math

10. POST
Generally, we use it to submit a form
Wrap data in request body

11. Response
Roughly speaking, it is the contents on a browser.

12. 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

13. 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

14. Path
Location of a file
Purpose of your request

15. Query String
Some information that you provided.

16. Server Side

17. Inspect Web Server
Web Server
(apache2, nginx)
Python
Web
Application
Request
Request
Object
Response
Response
Object

18. Inspect Web Server
Web Server
(apache2, nginx)
Python
Web
Application
Request
Request
Object
Response
Response
Object
What we focus on

19. Web frameworks
Django
Flask
Web.py
Many…

20. Flask

21. Requirements
python
flask
sqlalchemy

22. First App
server.py

23. First App
Create an app
server.py

24. First App
Create an app
server.py
Enable Debug Mode

25. First App
Create an app
Assign path
server.py
Enable Debug Mode

26. First App
Create an app
Assign path
server.py
Enable Debug Mode
View function

27. First App
Create an app
Assign path
View function
Start the server
server.py
Enable Debug Mode

28. First App
server.py

29. Run
python server.py

30. Inspect Web Application
Request
Object
Response
Python Web Application Object

31. Inspect Web Application
Request
Object
Response
Object
Dispatch path
Run View Function
Return value(string)

32. What’s different between this
and traditional web pages?

33. Interact with end-users

34. Case 1 : Say Hi
Hi, Jim

35. Use GET
http://localhost:5000/?name=Jim
Use query string in your view function

36. 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

37. Exercise I.I
Design a web app that accept multiple query strings.

38. Once the length of return string
becomes longer and longer...

39. The function is not readable

40. Is there a way to move
contents out?

41. Is there a way to move
contents out?
A: Use Template (jinja2)

42. Create a templates
<= Very important
Create a “templates” folder
Create a txt file (hello.txt) in templates folder
Write contents in this file

43. Use template in view function
from flask import render_template
render_template(“hello.txt”)

44. Not merely a text

45. Format your content using
HTML

46. HTML/HTML5
A markup language
Contents of a web page

47. A HTML Element
<tag_name attr1=“value” attr2=“value”> content
</tag_name>
<p> This is a book </p>
<h1> This a title </h1>

48. 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>

49. HTML Layout

50. HTML Layout
HTML Block

51. HTML Layout
HTML Block
Head

52. HTML Layout
HTML Block
Head
Body

53. HTML Layout
templates/
index.html

54. Rewrite hello function
Again, use the
HTML template
that you just finished.

55. What about variables?

56. What about variables?
A: Code in Template

57. Variable Substitution
You can substitute variables in template files
{{ name }} in HTML template

58. Transfer variables to template
Use keyword arguments in render_template
render_template(“hi.html”, name=name)

59. For, If Statement
{% if name == “Jim” %} …… {% endif %}
{% for item in things %} {% endfor %}

60. Case Study: Food List
Display a list of your favorite food if it is public
Otherwise, display a message

61. More syntax
http://jinja.pocoo.org/docs/dev/templates

62. Exercise II
Rewrite your dictionary app by HTML template.

63. Submit a Form

64. HTML Form
Form elements
form - a block of a form
input - input fields
label - label for an input

65. Case: Who are you?
Ask for a name
Once a name is submitted, Display the welcome message.

66. HTML for whoareyou
Where the
form request to
Method for the
form request

67. view function for whoareyou
Allow method for POST
Handle POST
request
Handle GET
request

68. Exercise III: Calculator
Two input fields and a submit
Display the result

69. To-Do List

70. Views
List all items
Add a new item
Delete an item

71. Flask redirect
redirect
url_for

72. 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”))

73. Questions