---
tags: Web, Class
---
# 1091 Flask網頁程式設計
[Johnson](https://hackmd.io/Zl7v3jqpScShlAjRr4-FnQ?both)
[Joycelyn](https://hackmd.io/uY_00dLnT0q_tmffAJe7ZQ?both)
[Build Your 1st Python Web App With Flask](https://medium.com/bhavaniravi/build-your-1st-python-web-app-with-flask-b039d11f101c)
[TOC]
## 09/15
### Why Flask
- Web frameworks
- Django
- Pyramid
- Flask
- microframework
- 容易擴充(designed to be extended)
### Background
- Python
- function
- module
- package
- decorator
- object-oriented programming
- exception & diagnosing issue
- HTML,JavaScript...
- BASH on Linux
### Start
#### Creating the Application Directory
```shell=
$ git clone https://github.com/miguelgrinberg/flasky.git
$ cd flasky
$ git checkout 1a
```
### Virtual Environment(VE)
- What is VE?
- **A copy of the Python interpreter into which you can install packages privately.**
- Ensure that applications have access only to the packages that each project use.
- The global interpreter serves only as a source from which more VEs can be created.
#### Creat VE
- creat a directory to load ==Python==(had better use ==version 3.7==)
```shell=
$cd flasky
$python --version
$python3 -m venv myvenv //a common convention to call it myvenv
```
> If there is no activate file in venv/bin:
> > apt-get install python3-venv
- View VEs you have activated
```shell=
$view venv/bin/activate
```
>Just named in linux or mac, in windows use 'venv/Scripts/avtivate'
- Activate the VE you created
```shell=
$source venv/bin/activate //activate
```
- Then you will enter this VE, install ==flask== and test
```shell=
(venv)$pip list //list packages installed in the VE
(venv)$pip install --upgrade pip
(venv)$pip install flask
(venv)$python -c 'import flask' //test if flask is installed
(venv)$deactivate //out
```
- Run the Web server(see $flask run --help)
```shell=
$cd flasky
$git checkout 2a
(venv)$export FLASK_APP=hello.py
(venv)$flask run --host lilina.csie.ncnu.edu.tw --port 10714
```
> --host can be replaced with -h
> --port can be replaced with -p
> $ flask run -h 10.XX.XX.X(use IP address)why?
- Type http://lilina.csie.ncnu.edu.tw:10714 to the web I created
- 每次修改過hellopy後
- 強制reset, checkout新版
```
$git reset --hard
```
>
- restore
```
$git restore hello.py
```
## 9/22
- client---> web server --WSGI--> application instance
```python=
from flask import Flask #Flask:Class
app = Flask(__name__) #__name__:An object of class
```
>print(\_name_)
>python -c 'import a'
### Decorator
- change the behavior of a function
- view functions
```python=
def hello():
print("Hello")
message = hello
print(message.__name__, hello.__name__)
message()
```
- python裡面的物件使用
```python=
dir(string)
```
- 指向function的pointer
```python=
def hello():
print("Hello")
message = hello
message()
```
```
>> Hello #the output of message() is same as hello()
```
- Usage of decorator
```python=
def name():
print("Alice")
def hello(func):
def inner():
print("Hello, ", end = '')
func()
return inner
#待編
def
```
- Syntactic Sugar
- simpler syntax to do the same task
```python=
@hello
def f():
print("Carol")
```
- Arguments in Wrappers
- Positional mapping
```python=
```
> *arg: 當function傳進來時得到的參數可為任意數量，因為不知道有幾個
> [tuple, list, and dictionary](http://sthurlow.com/python/lesson06/)
> Tuple' values can't be changed:減少複雜性，較不佔記憶體，處理時間短
> 物件是否immutable
### Dynamic Component in a route
- strings by default
- it can also be :
```
/user/<int:id>
```
- local have not commit
```shell=
#git reset --hard
```
#### checkout 2b
- run the server and use a browser to:
- observe the log massage on the server
### Templates
- 可套用的樣板
#### Example hello.py
```python=
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
@app.route('/')
def index():
content = '<h1>Hello World!</h1>'
return content
@app.route('/')
def index():
content = '<h1>Hello World!</h1>'
return render_template('name.html')
```
### 繼承
```python=
{% extends ".html" %}
{% block title %} New title {% endblock %}
```
## 10/06 Templates
### review
- Syntactic Sugar
- apply the decorator to function
### template
- 樣板，像是古騰堡印刷術
- 相比以冗長的function附加在main，利用樣板
- Rendering templates
```
from flask import render.template
```
#### multi-line strings
```htmlmixed=
html = ```
blablabla```
```
#### macro 巨集
```cpp=
#define pi 3.14
#define max(x,y) (x>y ? x:y)
```
- 與define function不同，macro需用==三元運算==表示
-
- 查看:compile only, 在main中將macro內容展開
```shell=
$gcc -c a.c //creat object file called a.o
$g++ a.o -o b
$gcc -E a.c //expend
```
####
```python=
```
## 10/13
### git
- Not necessarily GitHub
- Remote repository
- Local repository
- Action: ==push==(to remote), ==pull==(from remote)
#### prepare a remote repositpry
- On any Unix host
```shell=
git init --bare /Git/Group06/HW01.git
```
- Then on a client(open the directory you want to clone in it)
```shell=
git clone host:/Git/Group06/HW01.git
```
- If the port number you use is not 22, modify the file **~/.ssh/config**
```
Host gitlab
Hostname gitlab.ncnu.org
User ncnu
Port 7476
```
- Connect
```shell=
.ssh> ssh gitlab
```
- A client has already several commits
```shell=
git remote add origin host:/Git/Group06/HW01.git
git push origin master
```
- Other partners must merge that guy's commit before pushing the file
```shell=
git clone gitlab:/Git/Group06/HW01.git
git pull origin master
git remote show
git log --oneline
vi filename //modify the file...
git push
```
- that guy want to get what you had modified
```shell=
git pull //fetch+merge
```
### Review:redirect
```python=
```
## 10/20
- html forms
- input type
### Web Forms
#### Request Method
- GET
```html=
<FORM ACTION="add_get.php">
X:<input type="text" name="X"><BR>
Y:<input type="text" name="Y"><BR>
<input type= "submit">
</FORM>
```
>All variable names and values are displayed in the URL.
> The maximum length of the URL is **limited to about 2000 characters**.
```php=
<?php
$X = $_GET['X'];
$Y = $_GET['Y'];
echo $X,"+",$Y,"=",$X+$Y
?>
```
- POST
```html=
<FORM ACTION="add_get.php" METHOD="POST">
X:<input type="text" name="X"><BR>
Y:<input type="text" name="Y"><BR>
<input type= "submit">
</FORM>
```
>Add ==METHOD="POST"==
```php=
<?php
$X = $_POST['X'];
$Y = $_POST['Y'];
echo $X,"+",$Y,"=",$X+$Y
?>
```
#### Flask: request.args for GET method
- GET
```python=
from flask import request
@app.route('/')
def index():
doc=#html
return doc
```
- POST
- Information are shown in urls with GET, not safe.
```html=
<FORM METHOD=POST ACTION=add>
<INPUT TYPE=TEXT NAME=a>
<INPUT TYPE=TEXT NAME=b>
<INPUT TYPE=SUBMIT>
```
#### select/option
```html=
<select name="xxxx">
<option value="1998">1998</option>
<option value="2020">2020</option>
</select>
```
#### Input type in html: date
## 10/27
### WTF
```
pip install WTF
```
- Flask-WTF does not need to be initialized at the application level
- Only expects the application to have secret key
- CSRF attack
```python=
app=Flask(_name_)
app.config['secret_key']='hard to huess string'
```
### Form Classes
- Each web form --> a class
- inherits from FlaskForm
```python=
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired
app=Flask(_name_)
app.config['secret_key']='hard to guess string'
class NameForm(FlaskForm):
name = StringField('What is your name?',validators =[DataRequired()])
submit = SubmitField('Submit')
```
#### WTForms Validators
[guide1](https://hackersandslackers.com/flask-wtforms-forms/)
[guide2](https://wtforms.readthedocs.io/en/2.3.x/crash_course/)
- form.name.label
## 11/03
### macro
- When the item
### Databases
- sqlite
- py37-sqlite3
- ORM
- Flask-SQLAlchemy
## 11/10
```python=
mylist = infile.readlines()
```
### Database system
- if the data size is large
```python=
SELECT id,name FROM users
WHERE name = 'David';
```
### LAMP
- Linux
- Apache
- MySQL
- PHP
#### SQLite
- 嵌入式系統的資料庫首選
- Only need two files: header file ==sqlite3.h== and source code ==sqlite3.c==
> lynx: linux瀏覽器
> scp,pscp
```shell=
sqlite3 name.db
sqlite> .mode csv
sqlite> .import download.csv Tablename
sqlite> .tables
sqlite> .databases
sqlite> SELECT * FROM Tablename;
sqlite> SELECT COUNT(*) FROM Tablename;
sqlite> .schema Tablename
sqlite> DROP TABLE Tablename;
sqlite> ALTER TABLE Tablename RENAME TO Newname;
sqlite> SELECT * FROM Tablename WHERE Columnname == 'XXXX'
BETWEEN ** AND **
LIKE 'XXX%'
SUM(Columnname)
ORDER BY Columnname
GROUP BY Columnname
```
> vi 小教室
> :6/24s/TEXT/INTEGER
### Steps of modify the data type of a field
1. export table contents
```shell=
```
2. empty the table
```shell=
```
3. dump the schema to a text file
```shell=
```
4. modify the schema
```shell=
```
5. re-create the table
```shell=
```
#### GROUP BY
## 01/05
### A word bout documentstion
- PEP 8
- 縮排空四格
- 換行
```python=
a = ( b
+ c
+ d
- e )
```
- Docstring
Sign in with Wallet
Connect another wallet