1

I have a flask web app that contains a dropdown list that will allow the user to select which shoe they want and I would like to query the database using the dropdown list and display the shoe information and image but I can't quite work out the flow/logic of how I should go about it. I've only been using flask and SQLite for a few weeks so I would appreciate any advice! Dropdown list in /choosebrand and the corresponding image from the DB should be displayed in the next page, /analyse.

EDIT: I forgot to mention that the image is stored as a BLOB in the DB but I also have the images in the static folder. If there is even an easier way where I can just use the dropdown list to search for the filename in that folder instead of querying the database, I would much appreciate it :)

main.py:

#CHOOSE BRAND:
@app.route('/choosebrand')
def choosebrand():
    return render_template('choosebrand.html')

# ANALYSE SHOE (also displays feature matching results):
@app.route('/analyse', methods=['GET', 'POST'])
def analyse():
    #displays dropdown info inputted by user
    brandName = request.form['brandName']
    model = request.form['model']
    colourway = request.form['colourway']
    return render_template('analyseshoe.html', brandName=brandName, model=model, colourway=colourway)

choosebrand.html dropdown list:

<form class="shoelist" method="POST" action="{{ url_for('analyse') }}">
                <div>
                    <label>Brand</label>
                        <select id = "brandName" name="brandName">
                            <option value = "">--SELECT--</option>
                            <option value = "Yeezy">Yeezy</option>
                            getBrandName()
                        </select>
                </div>
                <br>
                <div>
                    <label>Model</label>
                        <select id = "model" name="model">
                            <option value = "">--SELECT--</option>
                            <option value = "Boost 350">Boost 350</option>
                            <option value = "Boost 500">Boost 500</option>
                        </select>
                </div>
                <br>
                <div>
                    <label>Colourway</label>
                        <select id = "colourway" name="colourway">
                            <option value = "">--SELECT--</option>
                            <option value = "Cloud White">Cloud White</option>
                            <option value = "Zebra">Zebra</option>
                            <option value = "Beluga V2">Beluga V2</option>
                            <option value = "Black">Black</option>
                            <option value = "Citrin">Citrin</option>
                            <option value = "Triple White">Triple White</option>
                            <option value = "Yecheil">Yecheil</option>
                            <option value = "Yeshaya">Yeshaya</option>
                            <option value = "Bone White">Bone White</option>
                            <option value = "Salt">Salt</option>                               <option value = "Soft Vision">Soft Vision</option>
                            <option value = "Stone">Stone</option>
                            <option value = "Utility Black">Utility Black</option>
                        </select>
                </div>
                <br>
                <div>
                    <input type="submit" class="submit" value="Analyse Shoe">
                </div>                       
            </form>    

analyseshoe.html:

  <div>
            <h1 class="heading">Analyse Shoe</h1>
            <p class="selection">Authenticity of your {{brandName}} {{model}} {{colourway}}:</p>

        </div>

Shoe.Db:

try:
    sqliteConnection = sqlite3.connect('Shoe.db')
    sqlite_create_table_query = ''' CREATE TABLE ShoeDetails (
                                shoeId INTEGER PRIMARY KEY AUTOINCREMENT,
                                brandName TEXT NOT NULL,
                                model TEXT NOT NULL,
                                colourway TEXT NOT NULL,
                                shoeImage BLOB NOT NULL); '''
5
  • did you run it with debug mode in terminal/console/cmd.exe to see error messages ? What is getBrandName() in HTML ? You can't run Python code in HTML. You can only use {% %} to use some code in HTML to generate HTML which is send to browser. Browser will send dropdown value to analyse() and it should use SQL to SELECT value from database and send it in new template. Commented May 3, 2020 at 21:03
  • @furas : thanks for spotting the getBrandName(), it wasn't supposed to be there! No errors, my issue is more so that I don't know what next step to take to query the DB based on the dropdown input and display it to a template. Commented May 3, 2020 at 22:25
  • inside analyse() after getting request.form[...] and before render_template() you have to use SELECT * FROM ShoeDetails WHERE ... to get data from database. First: you have to know how to write SQL queries. Second: you have to use this query with sqliteConnection.execute(query, (arg1, arg2, arg2,...)) Commented May 3, 2020 at 22:40
  • Flask documentation: sqlite3 Commented May 3, 2020 at 22:45
  • Thanks! I'll give it a go. Commented May 3, 2020 at 22:53

1 Answer 1

2

after request.form you have to excute SQL query with selected values and result send to render_template

More or less like this:

def analyse():
    #displays dropdown info inputted by user
    selected_brandName = request.form['brandName']
    selected_model = request.form['model']
    selected_colourway = request.form['colourway']

    query = "SELECT * FROM ShoeDetails WHERE brandName = ? AND model = ? AND colourway = ?"
    args = (selected_brandName, selected_model, selected_colourway)

    cur = sqliteConnection.execute(query, args)
    all_results = cur.fetchall()
    cur.close()

    return render_template('analyseshoe.html', results=all_results)

Because some variables had the same name in Python, HTML's form and in database so I use prefix selected_ to make it more readable.

And now in template you can use results

If shoeImage keeps filename of image on disk in preferred folder /static

{% for item in results %}

<img src="/static/{{ item['shoeImage'] }}>

{% endfor %}

But if you keep image in database then it makes more problems. Because you would have to decode it in base64 to embed it directly in HTML

{% for item in results %}

<img src="data:image/jpeg;base64, {{ item['shoeImage'] }}>

{% endfor %}
Sign up to request clarification or add additional context in comments.

5 Comments

I've tried the code above and ran on localhost with debugging and it seems to be getting to the /static folder but not finding the image. 127.0.0.1 - - [04/May/2020 00:38:41] "[37mPOST /analyse HTTP/1.1[0m" 200 - 127.0.0.1 - - [04/May/2020 00:38:41] "[33mGET /static/ HTTP/1.1[0m" 404 -
what do you have in in database inshoeImage ? And in item['shoeImage'] ? It seems it is empty and it creates path /static/. If you would have i.e string image.jpg then you should see /static/image.jpg instead of /static/
In the database, the shoeImage is stored as a BLOB but I also have the images in the /static folder so if that way is easier I can do it that way.
if you have image in folder then you should keep its name in shoeImage, not BLOB and use this name in HTML <img src="/static/{{ item['shoeImage'] }}">. For test you can put directly filename <img src="/static/image.jpg">
I think I've found my issue. I'm not assigning a shoeImage var to the /static folder as I initially wanted to use the shoeImage from the database

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.