diff options
| -rw-r--r-- | README.md | 33 | ||||
| -rw-r--r-- | flaskr/static/favicon.ico | bin | 0 -> 1001 bytes | |||
| -rw-r--r-- | flaskr/static/style.css | 134 | ||||
| -rw-r--r-- | flaskr/templates/auth/login.html | 15 | ||||
| -rw-r--r-- | flaskr/templates/auth/register.html | 15 | ||||
| -rw-r--r-- | flaskr/templates/base.html | 25 |
6 files changed, 219 insertions, 3 deletions
@@ -14,8 +14,9 @@ flask --app flaskr run --debug ## Learning resources -* https://flask.palletsprojects.com/en/3.0.x/#user-s-guide -* https://sqlite.org/lang.html +* Flask: https://flask.palletsprojects.com/en/3.0.x/#user-s-guide +* DB: https://sqlite.org/lang.html +* Template: https://jinja.palletsprojects.com/templates/ Concepts: @@ -29,7 +30,33 @@ Concepts: * flask.session: dict that stores data across requests (cookies) (securely signed with SECRET_KEY) * *endpoint*: name associated with a view, `<blueprint_name>.<view_function_name>` +* Templates: Used to render HTML. Uses Jinja template library. Autoscapes any + data that is rendered in HTML templates, so it's safe to render user input. + * `{{ }}` denotes expressions (output) (similar to python) + * `{% %}` denotes control flow statements (similar to pseudo-code) + * Automatically available: `g`, `url_for`, and more + * In base.html you define "blocks" placeholder which are later defined in + other templates that extend base.html Gotchas: -* Remember to call db.commit() after modifying DB (DML).
\ No newline at end of file +* Remember to call db.commit() after modifying DB (DML). + +Browser warnings and errors: + +* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value + +## Discussion + +Pros: + +* Flask is AWESOME, it's simple, it's elegant, it's enjoyable to code with. + Following the tutorial provides you all the basic tools to begin creating + projects with flask. +* It's secure, provides you with cryptographic signature for cookies and escapes + HTML transparently to the developer. + +Cons: + +* Maybe scalability and performance is lower compared to PHP or Javascript + web applications.
\ No newline at end of file diff --git a/flaskr/static/favicon.ico b/flaskr/static/favicon.ico Binary files differnew file mode 100644 index 0000000..aecf115 --- /dev/null +++ b/flaskr/static/favicon.ico diff --git a/flaskr/static/style.css b/flaskr/static/style.css new file mode 100644 index 0000000..6e2a6cd --- /dev/null +++ b/flaskr/static/style.css @@ -0,0 +1,134 @@ +html { + font-family: sans-serif; + background: #eee; + padding: 1rem; + } + + body { + max-width: 960px; + margin: 0 auto; + background: white; + } + + h1, h2, h3, h4, h5, h6 { + font-family: serif; + color: #377ba8; + margin: 1rem 0; + } + + a { + color: #377ba8; + } + + hr { + border: none; + border-top: 1px solid lightgray; + } + + nav { + background: lightgray; + display: flex; + align-items: center; + padding: 0 0.5rem; + } + + nav h1 { + flex: auto; + margin: 0; + } + + nav h1 a { + text-decoration: none; + padding: 0.25rem 0.5rem; + } + + nav ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + nav ul li a, nav ul li span, header .action { + display: block; + padding: 0.5rem; + } + + .content { + padding: 0 1rem 1rem; + } + + .content > header { + border-bottom: 1px solid lightgray; + display: flex; + align-items: flex-end; + } + + .content > header h1 { + flex: auto; + margin: 1rem 0 0.25rem 0; + } + + .flash { + margin: 1em 0; + padding: 1em; + background: #cae6f6; + border: 1px solid #377ba8; + } + + .post > header { + display: flex; + align-items: flex-end; + font-size: 0.85em; + } + + .post > header > div:first-of-type { + flex: auto; + } + + .post > header h1 { + font-size: 1.5em; + margin-bottom: 0; + } + + .post .about { + color: slategray; + font-style: italic; + } + + .post .body { + white-space: pre-line; + } + + .content:last-child { + margin-bottom: 0; + } + + .content form { + margin: 1em 0; + display: flex; + flex-direction: column; + } + + .content label { + font-weight: bold; + margin-bottom: 0.5em; + } + + .content input, .content textarea { + margin-bottom: 1em; + } + + .content textarea { + min-height: 12em; + resize: vertical; + } + + input.danger { + color: #cc2f2e; + } + + input[type=submit] { + align-self: start; + min-width: 10em; + }
\ No newline at end of file diff --git a/flaskr/templates/auth/login.html b/flaskr/templates/auth/login.html new file mode 100644 index 0000000..b7dd5dc --- /dev/null +++ b/flaskr/templates/auth/login.html @@ -0,0 +1,15 @@ +{% extends 'base.html' %} + +{% block header %} + <h1>{% block title %}Log In{% endblock %}</h1> +{% endblock %} + +{% block content %} + <form method="post"> + <label for="username">Username</label> + <input name="username" id="username" required> + <label for="password">Password</label> + <input type="password" name="password" id="password" required> + <input type="submit" value="Log In"> + </form> +{% endblock %}
\ No newline at end of file diff --git a/flaskr/templates/auth/register.html b/flaskr/templates/auth/register.html new file mode 100644 index 0000000..a3c73cc --- /dev/null +++ b/flaskr/templates/auth/register.html @@ -0,0 +1,15 @@ +{% extends 'base.html' %} + +{% block header %} + <h1>{% block title %}Register{% endblock %}</h1> +{% endblock %} + +{% block content %} + <form method="post"> + <label for="username">Username</label> + <input name="username" id="username" required> + <label for="password">Password</label> + <input type="password" name="password" id="password" required> + <input type="submit" value="Register"> + </form> +{% endblock %}
\ No newline at end of file diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html new file mode 100644 index 0000000..6ea4864 --- /dev/null +++ b/flaskr/templates/base.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>{% block title %}{% endblock %} - Flaskr</title> +<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> +<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> +<nav> + <h1><a href="{{ url_for('index') }}">Flaskr</a></h1> + <ul> + {% if g.user %} + <li><span>{{ g.user['username'] }}</span> + <li><a href="{{ url_for('auth.logout') }}">Log Out</a> + {% else %} + <li><a href="{{ url_for('auth.register') }}">Register</a> + <li><a href="{{ url_for('auth.login') }}">Log In</a> + {% endif %} + </ul> +</nav> +<section class="content"> + <header> + {% block header %}{% endblock %} + </header> + {% for message in get_flashed_messages() %} + <div class="flash">{{ message }}</div> + {% endfor %} + {% block content %}{% endblock %} +</section>
\ No newline at end of file |