Quartz 5

01 Web Applications

3 min read

Web Applications

HTML

Basic Template

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <!-- add stuff here -->
</body>
</html>

Linking Stylesheets

<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

Text and Media

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<p>basic text</p>
<b>bold text</b>
<i>italic text</i>
<a href="https://example.com">text with link reference</a>
<img src="https://picsum.photos/300" alt="lorem ipsum">


Containers

<div class="container-1">
    <!-- insert main stuff here -->
    <hr>
    <!-- insert more stuff here -->
</div>
<span id="mini-1">
    <!-- insert small stuff here -->
</span>

Tables

<table>
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
        </tr>
        <tr>
            <td>data 4</td>
            <td>data 5</td>
            <td>data 6</td>
        </tr>
    </tbody>
</table>

Forms

<form action="/submit" method="POST">
    <label for="button-1">button 1</label>
    <input type="button" name="button-1" value="1" id="button-1">
    <label for="checkbox-2">checkbox 2</label>
    <input type="checkbox" name="checkbox-2" value="2" id="checkbox-2">
    <label for="checkbox-3">checkbox 3</label>
    <input type="checkbox" name="checkbox-3" value="3" id="checkbox-3">
    <label for="date-4">date 4</label>
    <input type="date" name="date-4" id="date-4">
    <label for="file-5">file 5</label>
    <input type="file" name="file-5" id="file-5">
    <label for="radio-6">radio 6</label>
    <input type="radio" name="radio" id="radio-6">
    <label for="radio-7">radio 7</label>
    <input type="radio" name="radio" id="radio-7">
    <label for="range-8">range 8</label>
    <input type="range" name="range-8" id="range-8" min="0" max="20">
    <label for="text-9">text 9</label>
    <input type="text" name="text-9" id="text-9">
    <label for="textarea-10">textarea 10</label>
    <textarea name="textarea-10" id="textarea-10">default</textarea>
    <label for="submit-11">submit 11</label>
    <button type="submit">Submit Now!</button>
</form>

Jinja

File Structure

flaskapp
├── static
    └── styles.css
├── templates
    └── index.html
├── app.py
├── db_setup.py
└── database.db

Output a variable

<p>{{ name }}</p>
return render_template("page.html", name="John Pork")

If statement

{% if score >= 70 %}
    <p>A</p>
{% elif score >= 60 %}
    <p>B</p>
{% else %}
    <p>C</p>
{% endif %}

Loop through a list

{% for item in items %}
    <p>{{ item }}</p>
{% endfor %}
{% for student in students %}
    <p>{{ student.name }}: {{ student.score }}</p>
{% endfor %}

Check whether results exist

{% if results|length > 0 %}
    {% for item in results %}
        <p>{{ item }}</p>
    {% endfor %}
{% else %}
    <p>No results found.</p>
{% endif %}

Access dictionary values

{{ student["name"] }}
{{ student["score"] }}
{{ student.name }}
{{ student.score }}

Loop through a dictionary

{% for key, value in data.items() %}
    <p>{{ key }}: {{ value }}</p>
{% endfor %}

Common filters

{{ name|upper }}
{{ name|lower }}
{{ name|title }}
{{ items|length }}
{{ price|round(2) }}
{{ text|default("Not provided") }}

Generate Flask URLs

<a href="{{ url_for('home') }}">Home</a>
<a href="{{ url_for('student', student_id=student.id) }}"> View </a>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

HTML form

<form action="{{ url_for('submit') }}" method="POST">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>
name = request.form["name"]

Flask

Fundamental Server

import flask
app = flask.Flask(__name__)
if __name__ == '__main__':
    app.run()

Basic Routing

@app.route('/')
def home():
    return 'Welcome'
@app.route('/report')
def generate_report():
    return 'Everything is awesome'
@app.route('/readme.txt')
def readme():
    return 'READ ME'

Advanced Routing

@app.route('/optional_slash/')
def optional_slash():
    return 'Routed to optional_slash()'
@app.route('/one/')
@app.route('/one/two/')
@app.route('/three/two/one')
def multiple():
    return 'Routed to multiple()'
@app.route('/string/<s>/')
def string_variable(s):
    return 'Routed to string_variable(), s = {}'.format(s)
@app.route('/integer/<int:i>/')
def integer_variable(i):
    return 'Routed to integer_variable(), i = {}'.format(i)
@app.route('/post_only/', methods=['POST'])
def post_only():
    return 'Routed to post_only()'

URL Lookup

@app.route('/')
def home():
    url1 = url_for('fixed_route')
    url2 = url_for('string_variable', s='example')
    url3 = url_for('integer_variable', i=2020)

Redirects

@app.route('/')
def index():
    return redirect('http://example.com')
@app.route('/')
def index():
    return redirect(url_for('moved_index'))

SQLite3

import sqlite3
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    conn = sqlite3.connect("database.db")
    conn.row_factory = sqlite3.Row
    query = "SELECT * FROM Student"
    cur = conn.execute(query)
    data = cur.fetchall()
    cur.close()
    conn.close()
    return render_template("index.html", data=data)
if __name__ == '__main__':
    app.run()

Graph View