目录

Harvard CS50 学习笔记(九)

摘要
Harvard CS50 学习笔记(九)。

9 Flask

9.1 Lecture

9.1.1 http-server

9.1.2 Paths and Routes

9.1.3 Flask

9.1.4 app.py

/images/Harvard_CS50/Lecture_9/flask_1.png /images/Harvard_CS50/Lecture_9/flask_2.png

9.1.5 Forms

9.1.6 Templates

/images/Harvard_CS50/Lecture_9/template_1.png
template_1
/images/Harvard_CS50/Lecture_9/template_2.png
template_2

9.1.7 GET vs. POST

9.1.8 Model, View, Controller

/images/Harvard_CS50/Lecture_9/mvc.png
mvc

9.1.9 froshims

9.1.10 Form Validation

9.1.11 CSS and Flask

9.1.12 Jinja Loops

/images/Harvard_CS50/Lecture_9/loop_1.png /images/Harvard_CS50/Lecture_9/loop_2.png /images/Harvard_CS50/Lecture_9/loop_3.png

9.1.13 Model

9.1.14 SQLite and Flask

/images/Harvard_CS50/Lecture_9/db_1.png /images/Harvard_CS50/Lecture_9/db_2.png /images/Harvard_CS50/Lecture_9/db_3.png /images/Harvard_CS50/Lecture_9/db_4.png /images/Harvard_CS50/Lecture_9/db_5.png /images/Harvard_CS50/Lecture_9/db_6.png

9.1.15 Email

9.1.16 Sessions

/images/Harvard_CS50/Lecture_9/login.png
login

9.1.17 Sessions and Cookies

9.1.18 Login

9.1.19 Shopping Cart

9.1.21 JSON

9.2 Shorts

9.2.1 Flask

/images/Harvard_CS50/Lecture_9/Flask/flask_1.png
flask_1
/images/Harvard_CS50/Lecture_9/Flask/flask_2.png
flask_2
/images/Harvard_CS50/Lecture_9/Flask/flask_3.png
flask_3
/images/Harvard_CS50/Lecture_9/Flask/flask_4.png
flask_4
/images/Harvard_CS50/Lecture_9/Flask/flask_5.png
flask_5
/images/Harvard_CS50/Lecture_9/Flask/flask_6.png
flask_6
/images/Harvard_CS50/Lecture_9/Flask/flask_7.png
flask_7
/images/Harvard_CS50/Lecture_9/Flask/flask_8.png
flask_8
/images/Harvard_CS50/Lecture_9/Flask/flask_9.png
flask_9
/images/Harvard_CS50/Lecture_9/Flask/flask_10.png
flask_10
/images/Harvard_CS50/Lecture_9/Flask/flask_11.png
flask_11
/images/Harvard_CS50/Lecture_9/Flask/flask_12.png
flask_12
/images/Harvard_CS50/Lecture_9/Flask/flask_13.png
flask_13
/images/Harvard_CS50/Lecture_9/Flask/flask_14.png
flask_14
/images/Harvard_CS50/Lecture_9/Flask/flask_15.png
flask_15

9.2.2 AJAX

/images/Harvard_CS50/Lecture_9/AJAX/ajax_1.png
ajax_1
/images/Harvard_CS50/Lecture_9/AJAX/ajax_2.png
ajax_2
/images/Harvard_CS50/Lecture_9/AJAX/ajax_3.png
ajax_3
/images/Harvard_CS50/Lecture_9/AJAX/ajax_4.png
ajax_4
/images/Harvard_CS50/Lecture_9/AJAX/ajax_5.png
ajax_5
/images/Harvard_CS50/Lecture_9/AJAX/ajax_6.png
ajax_6

9.3 Lab 9

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import os

from cs50 import SQL
from flask import Flask, flash, jsonify, redirect, render_template, request, session

# Configure application
app = Flask(__name__)

# Ensure templates are auto-reloaded
app.config["TEMPLATES_AUTO_RELOAD"] = True

# Configure CS50 Library to use SQLite database
db = SQL("sqlite:///birthdays.db")

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
				# POST 请求获取数据,插入数据库
        name = request.form.get("name")
        month = float(request.form.get("month"))
        day = float(request.form.get("day"))

        if(validation(month, day)):
            db.execute("insert into birthdays (name, month, day) values (?, ?, ?)", name, month, day)


        return redirect("/")

    else:
				# GET 请求直接查询数据库
        birthdays = db.execute("select * from birthdays")

        return render_template("index.html", birthdays=birthdays)

# 验证生日日期
def validation(month, day):
    if not (month % 1 == 0):
        return False

    if not (day % 1 == 0):
        return False

    if month < 1 or month > 12:
        return False

    if day < 1 or day > 31:
        return False;

    if month == 2 and day > 28:
        return False

    return True

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="/static/styles.css" rel="stylesheet">
        <title>Birthdays</title>
    </head>
    <body>
        <div class="jumbotron">
            <h1>Birthdays</h1>
        </div>
        <div class="container">
            <div class="section">

                <h2>Add a Birthday</h2>

                <form action="/" method="post">
                    <input name="name" placeholder="Name" required type="text">
                    <input name="month" placeholder="Month" required type="number">
                    <input name="day" placeholder="Day" required type="number">
                    <input type="submit" value="Add Birthday">
                </form>
            </div>

            <div class="section">

                <h2>All Birthdays</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Birthday</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% block body %}
                            {% for birthday in birthdays %}
                                <tr>
                                    <td> {{ birthday["name"] }} </td>
                                    <td> {{ birthday["month"] }}/{{ birthday["day"] }} </td>
                                </tr>
                            {% endfor %}
                        {% endblock %}
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

9.4 Problem Set 9

application.py

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
import os

from cs50 import SQL
from flask import Flask, flash, redirect, render_template, request, session
from flask_session import Session
from tempfile import mkdtemp
from werkzeug.exceptions import default_exceptions, HTTPException, InternalServerError
from werkzeug.security import check_password_hash, generate_password_hash

from helpers import apology, login_required, lookup, usd

# Configure application
app = Flask(__name__)

# Ensure templates are auto-reloaded
app.config["TEMPLATES_AUTO_RELOAD"] = True


# Ensure responses aren't cached
@app.after_request
def after_request(response):
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Expires"] = 0
    response.headers["Pragma"] = "no-cache"
    return response


# Custom filter
app.jinja_env.filters["usd"] = usd

# Configure session to use filesystem (instead of signed cookies)
app.config["SESSION_FILE_DIR"] = mkdtemp()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

# Configure CS50 Library to use SQLite database
db = SQL("sqlite:///finance.db")

# 全局变量作为临时缓存,防止频繁查询数据库
stocks = {}

# Make sure API key is set
if not os.environ.get("API_KEY"):
    raise RuntimeError("API_KEY not set")


@app.route("/")
@login_required
def index():
    """Show portfolio of stocks"""
    # 获取用户ID
    user_id = session["user_id"]
    # 获取用户持有的股票列表
    results = stocks[str(user_id)]
    # 资产总和
    total = 0.0
    # 将需要展示的信息,放入股票列表中
    for result in results:
        stock = lookup(result["symbol"])
        if stock is None:
            return apology("invalid symbol", 400)
        # 股票单价
        price = float(stock["price"])
        # 格式处理
        result["price"] = '%.2f' % price
        # 股票数量
        shares = float(result["shares"])
        # 单个股票总价格
        result["total"] = '%.2f' % (round(price * shares, 2))
        # 资金总数
        total += round(price * shares, 2)


    # 获取用户的现金数量列表
    # 此处应该提取一个方法,但是返回比较麻烦,暂时不做
    cash = db.execute("select cash from users where id = ?", user_id)
    if len(cash) < 1:
        return apology("user not found", 400)
    elif len(cash) > 1:
        return apology("multiple users error", 400)
    # 用户现金数与资产总和
    money = round(cash[0]["cash"], 2)
    total = round(total + money, 2)
    # 格式处理
    money = '%.2f' % money
    total = '%.2f' % total

    return render_template("index.html", results=results, money=money, total=total)


@app.route("/buy", methods=["GET", "POST"])
@login_required
def buy():
    """Buy shares of stock"""

    user_id = session["user_id"]
    results = stocks[str(user_id)]

    if request.method == "GET":
        return render_template("buy.html")

    elif request.method == "POST":
        # 获取股票代码与份额
        symbol = request.form.get("symbol")
        shares = request.form.get("shares")

        # 此处应该提取一个方法,但是返回比较麻烦,暂时不做
        # 验证传递过来的代码与份额
        if not symbol:
            return apology("must provide symbol", 400)

        symbol = symbol.upper()

        if not shares:
            return apology("must provide shares", 400)
        elif not shares.isdigit():
            return apology("shares must be positive integer", 400)

        shares = float(shares)

        if shares % 1 != 0 or shares < 1:
            return apology("shares must be larger than 1", 400)

        shares = int(shares)

        # 获取股票信息
        stock = lookup(symbol)
        if stock is None:
            return apology("invalid symbol", 400)

        price = stock["price"]
        name = stock["name"]

        # 获取用户现金数量列表
        cash = db.execute("select cash from users where id = ?", user_id)
        if len(cash) < 1:
            return apology("user not found", 400)
        elif len(cash) > 1:
            return apology("multiple users error", 400)

        # 判断现金是否足够
        if cash[0]["cash"] < (price * shares):
            return apology("insufficient cash", 400)

        flag = True

        # 判断是否是新股票,新股加入持仓,旧股更新份额
        for result in results:
            if result["symbol"] == symbol:
                result["shares"] += shares
                flag = False
                break
        if flag:
            new_stock = {"symbol": symbol, "name": name, "shares": shares}
            results.append(new_stock)

        # 计算余额
        remaining = cash[0]["cash"] - price * shares
        # 更新数据库
        db.execute("update users set cash = ? where id = ?", remaining, user_id)
        db.execute(
            "insert into transactions (user_id, trade, symbol, name, shares, price, total) values (?, ?, ?, ?, ?, ?, ?)",
            user_id, 1, symbol, name, shares, price, (shares * price))
        return redirect("/")

    return apology("TODO")


@app.route("/history")
@login_required
def history():
    """Show history of transactions"""

    user_id = session["user_id"]

    results = db.execute("select * from transactions where user_id = ?", user_id)

    for result in results:
        result["shares"] = result["trade"] * result["shares"]
        result["price"] = '%.2f' % result["price"]
        result["total"] = '%.2f' % result["total"]

    return apology("history.html", results=results)


@app.route("/login", methods=["GET", "POST"])
def login():
    """Log user in"""

    # Forget any user_id
    session.clear()

    # User reached route via POST (as by submitting a form via POST)
    if request.method == "POST":

        # Ensure username was submitted
        if not request.form.get("username"):
            return apology("must provide username", 400)

        # Ensure password was submitted
        elif not request.form.get("password"):
            return apology("must provide password", 400)

        # Query database for username
        rows = db.execute("SELECT * FROM users WHERE username = ?", request.form.get("username"))

        # Ensure username exists and password is correct
        if len(rows) != 1 or not check_password_hash(rows[0]["hash"], request.form.get("password")):
            return apology("invalid username and/or password", 400)

        # Remember which user has logged in
        session["user_id"] = rows[0]["id"]

        #
        user_id = session["user_id"]

        #
        results = db.execute(
            "select symbol, name, sum(shares * trade) as shares from transactions where user_id = ? group by symbol",
            user_id)

        stocks[str(user_id)] = results

        # Redirect user to home page
        return redirect("/")

    # User reached route via GET (as by clicking a link or via redirect)
    else:
        return render_template("login.html")


@app.route("/logout")
def logout():
    """Log user out"""

    # Forget any user_id
    session.clear()

    # Redirect user to login form
    return redirect("/")


@app.route("/quote", methods=["GET", "POST"])
@login_required
def quote():
    """Get stock quote."""
    if request.method == "GET":
        return render_template("quote.html")

    elif request.method == "POST":
        # 验证股票代码
        symbol = request.form.get("symbol")
        if not symbol:
            return apology("must provide symbol", 400)

        # 获取股票信息
        stock = lookup(symbol)
        if stock is None:
            return apology("invalid symbol", 400)
        else:
            price = float(stock["price"])
            stock["price"] = '%.2f' % price
            return render_template("quoted.html", quote=stock)

    return apology("TODO")


@app.route("/register", methods=["GET", "POST"])
def register():
    """Register user"""
    if request.method == "GET":
        return render_template("register.html")

    elif request.method == "POST":
        input_username = request.form.get("username")

        # Ensure username was submitted
        if not input_username:
            return apology("must provide username", 400)

        db_usernames = db.execute("select username from users where username = ?", input_username)

        if len(db_usernames) != 0:
            return apology("username already exists", 400)

        # Ensure password was submitted
        elif not request.form.get("password"):
            return apology("must provide password", 400)

        elif not request.form.get("confirmation"):
            return apology("must provide confirmation password", 400)

        if request.form.get("password") != request.form.get("confirmation"):
            return apology("password must be as same as confirmation password", 400)

        db.execute("insert into users (username, hash, cash) values (?, ?, 10000.00)", input_username,
                   generate_password_hash(request.form.get("password")))

        return redirect("/")

    return apology("TODO")


@app.route("/sell", methods=["GET", "POST"])
@login_required
def sell():
    """Sell shares of stock"""

    user_id = session["user_id"]
    results = stocks[str(user_id)]

    if request.method == "GET":
        return render_template("sell.html", results=results)

    elif request.method == "POST":
        symbol = request.form.get("symbol")
        shares = request.form.get("shares")

        # 此处应该提取一个方法,但是返回比较麻烦,暂时不做
        # 验证传递过来的代码与份额
        if not symbol:
            return apology("must provide symbol", 400)

        symbol = symbol.upper()

        if not shares:
            return apology("must provide shares", 400)
        elif not shares.isdigit():
            return apology("shares must be positive integer", 400)

        shares = float(shares)

        if shares % 1 != 0 or shares < 1:
            return apology("shares must be larger than 1", 400)

        shares = int(shares)

        flag = True

        # 找到持仓中的股票代码,判断份额,进行相应操作
        for result in results:
            if symbol == result["symbol"]:
                flag = False
                if shares > result["shares"]:
                    return apology("insufficient shares to sell", 400)
                else:
                    result["shares"] -= shares

        # 没有在持仓中找到传递过来的股票代码
        if flag:
            return apology("symbol not found in portfolio", 400)

        # 获取股票信息
        stock = lookup(symbol)
        if stock is None:
            return apology("invalid symbol", 400)

        # 获取用户现金数量列表
        cash = db.execute("select cash from users where id = ?", user_id)
        if len(cash) < 1:
            return apology("user not found", 400)
        elif len(cash) > 1:
            return apology("multiple users error", 400)

        price = stock["price"]
        name = stock["name"]

        # 计算用户现金
        remaining = cash[0]["cash"] + price * shares
        # 更新数据库
        db.execute("update users set cash = ? where id = ?", remaining, user_id)
        db.execute(
            "insert into transactions (user_id, trade, symbol, name, shares, price, total) values (?, ?, ?, ?, ?, ?, ?)",
            user_id, -1, symbol, name, shares, price, (shares * price))
        return redirect("/")

    return apology("TODO")


def errorhandler(e):
    """Handle error"""
    if not isinstance(e, HTTPException):
        e = InternalServerError()
    return apology(e.name, e.code)


# Listen for errors
for code in default_exceptions:
    app.errorhandler(code)(errorhandler)


def validate_data(symbol, shares):
    return None

apology.html

1
2
3
4
5
6
7
8
9
{% extends "layout.html" %}

{% block title %}
    Apology
{% endblock %}

{% block main %}
    <img alt="{{ top }}" class="border" src="http://memegen.link/custom/{{ top | urlencode }}/{{ bottom | urlencode }}.jpg?alt=https://i.imgur.com/CsCgN7Ll.png" title="{{ top }}">
{% endblock %}

buy.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{% extends "layout.html" %}

{% block title %}
    Buy
{% endblock %}

{% block main %}
    <form action="/buy" method="post">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="symbol" placeholder="Symbol" type="text">
        </div>
        <div class="form-group">
            <input class="form-control" name="shares" placeholder="Shares" type="number">
        </div>
        <button class="btn btn-primary" type="submit">Buy</button>
    </form>
{% endblock %}

history.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% extends "layout.html" %}

{% block title %}
    History
{% endblock %}

{% block main %}
    <table class="table tablestriped">
        <thead>
            <tr>
                <th class="text-start">Symbol</th>
                <th class="text-start">Name</th>
                <th class="text-end">Shares</th>
                <th class="text-end">Price</th>
                <th class="text-end">TOTAL</th>
                <th class="text-end">Transacted</th>
            </tr>
        </thead>
       <tbody>
           {% for result in results %}
                <tr>
                    <td class="text-start">{{ result["symbol"] }}</td>
                    <td class="text-start">{{ result["name"] }}</td>
                    <td class="text-end">{{ result["shares"] }}</td>
                    <td class="text-end">${{ result["price"] }}</td>
                    <td class="text-end">${{ result["total"] }}</td>
                    <td class="text-end">${{ result["time"] }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{% extends "layout.html" %}

{% block title %}
    Index
{% endblock %}

{% block main %}
    <table class="table tablestriped">
        <thead>
            <tr>
                <th class="text-start">Symbol</th>
                <th class="text-start">Name</th>
                <th class="text-end">Shares</th>
                <th class="text-end">Price</th>
                <th class="text-end">TOTAL</th>
            </tr>
        </thead>
       <tbody>
           {% for result in results %}
                <tr>
                    <td class="text-start">{{ result["symbol"] }}</td>
                    <td class="text-start">{{ result["name"] }}</td>
                    <td class="text-end">{{ result["shares"] }}</td>
                    <td class="text-end">${{ result["price"] }}</td>
                    <td class="text-end">${{ result["total"] }}</td>
                </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td class="border-0 fw-bold text-end" colspan="4">Cash</td>
                <td class="border-0 text-end">${{ money }}</td>
            </tr>
            <tr>
                <td class="border-0 fw-bold text-end" colspan="4">TOTAL</td>
                <td class="border-0 w-bold text-end">${{ total }}</td>
            </tr>
        </tfoot>
    </table>
{% endblock %}

layout.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <!-- http://getbootstrap.com/docs/4.5/ -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
        <link href="/static/favicon.ico" rel="icon">

        <link href="/static/styles.css" rel="stylesheet">

        <!-- http://getbootstrap.com/docs/4.5/ -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

        <title>C$50 Finance: {% block title %}{% endblock %}</title>

    </head>

    <body>

        <nav class="navbar navbar-expand-md navbar-light bg-light border">
            <a class="navbar-brand" href="/"><span class="blue">C</span><span class="red">$</span><span class="yellow">5</span><span class="green">0</span> <span class="red">Finance</span></a>
            <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                {% if session.user_id %}
                    <ul class="navbar-nav mr-auto mt-2">
                        <li class="nav-item"><a class="nav-link" href="/quote">Quote</a></li>
                        <li class="nav-item"><a class="nav-link" href="/buy">Buy</a></li>
                        <li class="nav-item"><a class="nav-link" href="/sell">Sell</a></li>
                        <li class="nav-item"><a class="nav-link" href="/history">History</a></li>
                    </ul>
                    <ul class="navbar-nav ml-auto mt-2">
                        <li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
                    </ul>
                {% else %}
                    <ul class="navbar-nav ml-auto mt-2">
                        <li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
                        <li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
                    </ul>
                {% endif %}
            </div>
        </nav>

        {% if get_flashed_messages() %}
            <header>
                <div class="alert alert-primary border text-center" role="alert">
                    {{ get_flashed_messages() | join(" ") }}
                </div>
            </header>
        {% endif %}

        <main class="container p-5">
            {% block main %}{% endblock %}
        </main>

        <footer class="small text-center text-muted">
            Data provided for free by <a href="https://iextrading.com/developer">IEX</a>. View <a href="https://iextrading.com/api-exhibit-a/">IEX’s Terms of Use</a>.
        </footer>

    </body>

</html>

login.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{% extends "layout.html" %}

{% block title %}
    Log In
{% endblock %}

{% block main %}
    <form action="/login" method="post">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
        </div>
        <div class="form-group">
            <input class="form-control" name="password" placeholder="Password" type="password">
        </div>
        <button class="btn btn-primary" type="submit">Log In</button>
    </form>
{% endblock %}

quote.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{% extends "layout.html" %}

{% block title %}
    Quote
{% endblock %}

{% block main %}
    <form action="/quote" method="post">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="symbol" placeholder="Symbol" type="text">
        </div>
        <button class="btn btn-primary" type="submit">Quote</button>
    </form>
{% endblock %}

quoted.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{% extends "layout.html" %}

{% block title %}
    Quote
{% endblock %}

{% block main %}
    <p>
        A share of {{ quote["name"] }} ({{ quote["symbol"] }}) cost ${{ quote["price"] }}.
    </p>
{% endblock %}

register.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{% extends "layout.html" %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <form action="/register" method="post">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
        </div>
        <div class="form-group">
            <input class="form-control" name="password" placeholder="Password" type="password">
            <input class="form-control" name="confirmation" placeholder="Password(again)" type="password">
        </div>
        <button class="btn btn-primary" type="submit">Register</button>
    </form>
{% endblock %}

sell.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% extends "layout.html" %}

{% block title %}
    Sell
{% endblock %}

{% block main %}
    <form action="/sell" method="post">
        <div class="form-group">
            <select class="form-select mx-auto w-auto" name="symbol">
                <option disabled selected>Symbol</option>
                    {% for result in results %}
                    <option value={{ result["symbol"] }}>{{ result["symbol"] }}</option>
                    {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="shares" placeholder="Shares" type="number">
        </div>
        <button class="btn btn-primary" type="submit">Sell</button>
    </form>
{% endblock %}