User:Kim/Stations, Skills, Resources/Flask

from manettas prototyping class

Flask

User:Sevgi/Grad Notes/Flask

pad with collective notes: https://pad.xpub.nl/p/FLASK-OMG-itshappening

Examples

txt

objective: website with textarea saves input to txt file and publishes entries on the page
following this example: Flask#Observations running on sergio: https://hub.xpub.nl/sergio/SI30/fieldwork-tools/example/
observations-database.py

from flask import Flask, render_template, request
app = Flask(__name__)

# define route
# when the route is being accessed, run function main with get and post request
@app.route("/", methods=["GET", "POST"])
# function main gets form input and renders a template (render and request are methods imported from flask)
def main():
    # is request is post
    if request.method == "POST":
        # request the form (in the html template)
        observation = request.form["observation"]
        # append the form input to observations
        observations.append(observation)
        # append observation to txt file
        # make txt file
        with open("database.txt", "a") as database:
            # we are only wiriting on post requests
            database.write("\n"+ observation)
    # reading is for opening the app, when we dont write first (code is not entirely running linearly)
    database = open("database.txt", "r").readlines()
    # output to database.txt:
    return render_template("observations.html", database=database)

the template: templates/observations.html

<h1>My field observations</h1>

<div id="archive">
    <!-- if there is an object in the observations array -->
    {% if observations %}
    <!-- for each observation in the array -->
        {% for observation in observations %}
            <!-- display observation in a div -->
            <div class="observation">{{ observation }}</div>
        {% endfor %}
    {% endif %}
</div>

<form method="POST">
    <textarea name="observation"></textarea>
    <br>
    <input type="submit" value="Save!">
</form>

JSON

objective: submit multiple inputs, store and retrieve them from json
the json python module enables us to use json specific methods such as dump

• https://www.w3schools.com/python/python_json.asp
• https://www.geeksforgeeks.org/python/reading-and-writing-json-to-a-file-in-python/

database.json
this file should be created. it does not require content yet but needs [ ] for the json objects to be inserted in between.
json-test.py

import json
from flask import Flask, render_template, request


app = Flask(__name__)


@app.route("/", methods=["GET", "POST"])

def main():
    with open('database.json', 'r') as f:
        observations = json.load(f)

    if request.method == "POST":

        observation = request.form
        print(observation)
        observations.append(observation)

        with open('database.json', 'w+') as f:
            f.write(json.dumps(observations, indent=2))

    return render_template("json.html", observations=observations)

templates/json.html

<style>
body{
    text-align: center;
}
div#archive{
    padding: 1em;
}
div.container {
    border: 1px dashed red;
    border-radius: 20px;
    margin: 1vh 0;
}
div.container:has(.sunny) {
    background: yellow;
}
div.container:has(.rainy) {
    background: lightsteelblue;
}
div.container:has(.sunny):has(.rainy) {
    background: linear-gradient(yellow, lightsteelblue);
}
form {
    margin: 1em;
}
form textarea{
    width: 100%;
    height: 200px;
}
form input{
    margin-top: 1em;
    font-size: 12pt;
}
</style>

<h1>My field observations</h1>

<div id="archive">
    <!-- if there is an object in the observations array -->
    {% if observations %}
    <!-- for each observation in the array -->
        {% for observation in observations %}
            <!-- display observation in a div -->
            <div class="container">
                <div class="place">{{ observation.place }}</div>
                <div class="observation">{{ observation.observation }}</div>
                {% if observation.sunny %}
                    <div class="sunny">&#9728;</div>
                {% endif %}
                {% if observation.rainy %}
                    <div class="rainy">&#9729;</div>
                {% endif %}
            </div>
        {% endfor %}
    {% endif %}
</div>

<form method="POST">
    <textarea name="observation"></textarea>
    <input type="text" name="place"></input>
    <label for="place">place</label>
    <input type="checkbox" name="sunny" id="">
    <label for="sunny">sunny</label>
    <input type="checkbox" name="rainy" id="">
    <label for="rainy">rainy</label>
    <br>
    <input type="submit" value="Save!">
</form>