Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web develop in flask

4,513 views

Published on

Web develop in flask

Published in: Technology
  • Be the first to comment

Web develop in flask

  1. 1. Web Develop in Flask Jim Yeh <lemonlatte@gmail.com>
  2. 2. Outline Introduce internet network What is HTTP request and response Flask Write a Todo list http://tinyurl.com/nccumath-flask
  3. 3. Internet People use browsers to surf the internet. You may hear that a server is crashed.
  4. 4. http://www………
  5. 5. Given a URL http://www.bing.com/search?q=math Protocol IP / Hostname Path Query String
  6. 6. HTTP Protocol A communication protocol A well-known client is web browser Not merely for browser
  7. 7. Request and Response Clients Servers Request Response
  8. 8. HTTP Request Methods GET POST
  9. 9. GET Browser a website by url Request resources (contents) Example: http://www.bing.com/search?q=math
  10. 10. POST Generally, we use it to submit a form Wrap data in request body
  11. 11. Response Roughly speaking, it is the contents on a browser.
  12. 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. 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. 14. Path Location of a file Purpose of your request
  15. 15. Query String Some information that you provided.
  16. 16. Server Side
  17. 17. Inspect Web Server Web Server (apache2, nginx) Python Web Application Request Request Object Response Response Object
  18. 18. Inspect Web Server Web Server (apache2, nginx) Python Web Application Request Request Object Response Response Object What we focus on
  19. 19. Web frameworks Django Flask Web.py Many…
  20. 20. Flask
  21. 21. Requirements python flask sqlalchemy
  22. 22. First App server.py
  23. 23. First App Create an app server.py
  24. 24. First App Create an app server.py Enable Debug Mode
  25. 25. First App Create an app Assign path server.py Enable Debug Mode
  26. 26. First App Create an app Assign path server.py Enable Debug Mode View function
  27. 27. First App Create an app Assign path View function Start the server server.py Enable Debug Mode
  28. 28. First App server.py
  29. 29. Run python server.py
  30. 30. Inspect Web Application Request Object Response Python Web Application Object
  31. 31. Inspect Web Application Request Object Response Object Dispatch path Run View Function Return value(string)
  32. 32. What’s different between this and traditional web pages?
  33. 33. Interact with end-users
  34. 34. Case 1 : Say Hi Hi, Jim
  35. 35. Use GET http://localhost:5000/?name=Jim Use query string in your view function
  36. 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. 37. Exercise I.I Design a web app that accept multiple query strings.
  38. 38. Once the length of return string becomes longer and longer...
  39. 39. The function is not readable
  40. 40. Is there a way to move contents out?
  41. 41. Is there a way to move contents out? A: Use Template (jinja2)
  42. 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. 43. Use template in view function from flask import render_template render_template(“hello.txt”)
  44. 44. Not merely a text
  45. 45. Format your content using HTML
  46. 46. HTML/HTML5 A markup language Contents of a web page
  47. 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. 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. 49. HTML Layout
  50. 50. HTML Layout HTML Block
  51. 51. HTML Layout HTML Block Head
  52. 52. HTML Layout HTML Block Head Body
  53. 53. HTML Layout templates/ index.html
  54. 54. Rewrite hello function Again, use the HTML template that you just finished.
  55. 55. What about variables?
  56. 56. What about variables? A: Code in Template
  57. 57. Variable Substitution You can substitute variables in template files {{ name }} in HTML template
  58. 58. Transfer variables to template Use keyword arguments in render_template render_template(“hi.html”, name=name)
  59. 59. For, If Statement {% if name == “Jim” %} …… {% endif %} {% for item in things %} {% endfor %}
  60. 60. Case Study: Food List Display a list of your favorite food if it is public Otherwise, display a message
  61. 61. More syntax http://jinja.pocoo.org/docs/dev/templates
  62. 62. Exercise II Rewrite your dictionary app by HTML template.
  63. 63. Submit a Form
  64. 64. HTML Form Form elements form - a block of a form input - input fields label - label for an input
  65. 65. Case: Who are you? Ask for a name Once a name is submitted, Display the welcome message.
  66. 66. HTML for whoareyou Where the form request to Method for the form request
  67. 67. view function for whoareyou Allow method for POST Handle POST request Handle GET request
  68. 68. Exercise III: Calculator Two input fields and a submit Display the result
  69. 69. To-Do List
  70. 70. Views List all items Add a new item Delete an item
  71. 71. Flask redirect redirect url_for
  72. 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. 73. Questions

×