9-Dec-2021
Flask
Python supports network connect and the backend site.
Flask ← one of web framework(Django, Pyramid) of python to make the process easier, like a library that will help you do function easier
Flask was applied as it has the lightest weight
HTML → static website ← if you want to create website displaying current time, you need to update it manually
Using Python into the code ← more flexible and dynamic to updates
the first paragraph is importing library
the second paragraph ← initializing flask application
third paragraph → telling the timezone and returning the date and time
How to do it in CS50 IDE?
Lastly, input function when you do different thing
How to associate function and the site?
To associate function with URL ← decorator is the thing inside Python (not only for flask)
Pass data to the flask application through URL
- using HTTP GET
<number> ← important, if you input/show/10 in the url
Pass data from HTML to application by method POST (could be get but for privacy, will be better to do it through post)
request.form.get ← for post method
request.args.get ← for get method
Functions in flask that are useful for application development
url_for()Define a function and have a decorator associated with it
the url is long and not information providing ← you can use this to replace
This could help prevent the problem, if you change the route, you will not need to change the whole route (avoid missed change)
take this as your reference: https://hackmd.io/@shaoeChen/BkApyHhgf?type=view
render_template() ← generate the mixed html and python page
AJAX
Javascript — problem
up to now → interaction is sth in HTML happen → then JS
AJAX ( formly Asynchornous JS and XML/ JSON) allow even more dynamic update of webpage →refresh section of the page (not the entire page) ← like only the score of soccer game
We could make server request even no button is pressed (only the data from server changed will have effect on JS) ← query keep on happening
XMLHttpRequest ← special JS object (asynchronously ← not the same time of refreshing the whole page)
asynchronous request → the website could run normally before the callback was received → https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
First thing to do is defining it to onreadystatechange ←function (usually anonyomous) will be called when asynchronous HTTP request has completed, thus typically defines what is expect to change on the site
onreadystatechange ← description of the steps that are happening when user visiting page
0 ← not initialized request
4 ← readied request
200 ← data received is ok
Above are the two things on AJAX request that we care ←
1. the data was readied (ready state was 4)
2. the request was received as ok (HTTP status is 200)
Then we can update the site
open() ← define the request and send() ← sending the request
Example
take a look on line 11,
this ← self referred to the event that trigger JS function to be called in the first place
explain 1: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
explain 2: https://blog.techbridge.cc/2019/02/23/javascript-this/
onchange ← another form of event handler (for select option) as opposed to onclick (for button type)
line 13 update infodiv to whatever you get back from the Ajax request ← request was not made entirely at that moment
line 18 will open the html and line 19 will get back the data?
