A continuation of The Great Flask Adventure.

The structure

When last we left our heroes we had posted a groovy python script: Mark III. This was saved as yacht_app.py in a folder. The rest of the files were built and also stored there. The structure of the folders is thus:

[searchyachtworld]
—yacht_app.py
—[output]
——boatlist.json (a file generated by the app)
—[static]
——
———style.css
——[images]
———artboard.png
—[templates]
——index.html
——results.html
——template.html

Back to the app

The app/python file consists of several parts which mostly consist of mini scripts to render results to a specific template. The simplest is:

@app.route("/")
def home():
    return render_template("index.html")

This simply displays the “index.html file which is a basic form. The next is:

@app.route('/results')
def results():
    data = []
    with open("output/boatlist.json", "r") as jdata:
        data = json.load(jdata)
    return render_template("results.html", boatlist=data['boats'],predata=data['fileinfo'])

This defines “results.html,” basically calling for it to open using the boatlist.json file as its data.

The next one is “index.html” after the search button is clicked and it uses a form post request to gather the input data an executes the rest of the python script using that data. I am not going to get into that as it’s just a variation of the Book Page scraping.

I did add a bit at the end that reopens the output json file and uses the submitted search parameter to reorder it before moving on to the results page.

@app.route("/", methods=['POST'])
def echo():
    #get index form data
    if request.method == "POST":
        inputcurr=request.form["inputcurr"]
        minprice=request.form["minprice"]
        maxprice=request.form["maxprice"]
        minlength=request.form["minlength"]
...
    data = []
    with open("output/boatlist.json", "r") as jdata:
        data = json.load(jdata)
        data['boats'].sort(key=keyparam)
    return render_template('results.html', boatlist=data['boats'],predata=data['fileinfo'])

Back to the HTML

Flask uses the template.html file to set all the default elements (header, navbar, styles sheets etc.)

I won’t bother with the code for the index page, but here is the results which is pretty simple. Basically extracting the header information form the “predata” section of the json and then a loop though the “boatlist” to display each boat.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Yachtworld Results</title>
</head>

<body>
{% extends "template.html" %}
{% set active_page = "results" %}
{% block content %}
<div class="page-header">
    <h2 class="orange">YachtWorld Results</h2>
    <div id="preface">
        {% for pb in predata %}
    <div>
        <p>{{pb.Text}}<br/>Updated: {{pb.Date}}
        <br/><a href="{{pb.Creator}}">created by {{pb.Creator}}</a></p>
        <p>Price range : <strong>${{pb.Low}} </strong> and <strong>${{pb.High}}</strong> (${{pb.Currency}})<br/>
        Boat length: <strong>{{pb.Short}}'</strong> – <strong>{{pb.Long}}'</strong></p>
    </div>
    {% endfor %}
    </div>
    {% for boat in boatlist %}
    <div class="col-xs-6" style="min-height:170px;">
        <div class="col-md-5 text-right ">
            <img src="{{boat.Thumb}}" alt="" width="150px">
        </div>
        <div class="col-md-7">
            <h3><a href="{{boat.URL}}">{{boat.Name}}</a></h3>
            <p><strong>${{boat.Price}} </strong> / {{boat.Size}}</br>
            {{boat.Location}}</p>
        </div>
    </div>
    {% endfor %}

{% endblock %}
</body>
</html>

Pretty simple really…lol.

In conclusion

Anyway I don’t suspect anyone will actually understand/get much out of all this and its here mostly for posterity. There are plenty of resources online to help dig into the code.

I am still playing with it and it will continue to evolve. I did post it on github if anyone is interested in the latest version (I have already added in some bits to handle price errors). I am still searching for host to make it publicly available but anyone can download it from Github if they want to run it on their own server.

macblaze.ca

Flask Part Deux

The structure

Back to the app

Back to the HTML

In conclusion