My flask template is not displaying properly. For some reason, the templating language is being displayed on the webpage.
Here is what it looks like (red circles indicate items that should not be on the web page)
I am not sure why this is happening. The templates are stored in a folder called static and in my app.py, I have the following line as well:
app = Flask(__name__, template_folder='static')
Edit: Here is the code that renders the following portion of this page:
`
{% if passphrase %}
<div>
<h4>Information</h4>
<p>Address: 123_easy_uncover_street</p>
</div>
{% else %}
<div class="col">
<h4>Enter passphrase</h4>
<form action="" method="POST" style="text-align:left">
<label for="passphrase">Passphrase</label>
<input type="text" id="passphrase" name="passphrase">
<br>
<input type="submit" value="Submit">
</form>
</div>
<div id="status" class="col" >
<p><i>Please enter your passphrase</i></p>
</div>
{% endif %}
</div>`
Flask code:
from app.bank_database import BankDatabase
from flask import Flask, request, render_template
import random
import json
app = Flask(__name__, template_folder='static')
db = BankDatabase()
#app.route('/', methods=['GET', 'POST'])
#app.route('/index.html', methods=['GET', 'POST'])
def index():
return render_template("index.html", passphrase="")
#app.route('/check_passphrase', methods=['GET', 'POST'])
def check_passphrase():
passphrase = request.args.get("passphrase")
if db.check_passphrase(passphrase):
#Show address here
#TODO - change view to show passphrase
return render_template("index.html", passphrase=passphrase)
return render_template("index.html", passphrase="")
app.run(debug=True,host="0.0.0.0")
Related
I have a total of two python scripts. One for the flask itself, and another for backend calculations. And I have an HTML file.
In backend.py:
def get_country():
county_name = ["Bangladesh", "India", "USA"]
country_default = "Bangladesh"
return country_name, country_default
In flask_app.py:
import backend
from flask import Flask
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def home():
country_name, country_default = backend.get_country()
return render_template("index.html", country=county_name, default=country_default)
In index.html:
<form action="" class="form-text" method="GET">
<div class="row">
<div class="col-10">
<select name="select_country" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
{% for country in country %}
<option value="{{country}}">{{country}}</option>
{% endfor %}
</select>
</div>
<div class="col-2">
<button type="submit" class="btn btn-outline-primary">Select</button>
</div>
</div>
</form>
<p>You have selected {{default}}</p>
The questions I have here are:
How can I make the select tag in the HTML file to select the default
value initially?
How can I submit the select tag value in the html file and update the
country_default variable in the backend.py?
Answers to your questions:
You can declare the first option to be the default value using the selected attribute in the option tag. Then, you should remove the default value from the country_name.
You can submit the select tag in 2 ways, either using GET Method or POST Method.
Your index.html should looks like this:
<form action="/" class="form-text" method="GET/POST (Choose One)">
<div class="row">
<div class="col-10">
<select name="select_country" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option value="{{default}}" selected>{{default}}</option>
{% for country in country %}
<option value="{{country}}">{{country}}</option>
{% endfor %}
</select>
</div>
<div class="col-2">
<button type="submit" class="btn btn-outline-primary">Select</button>
</div>
</div>
</form>
<p>You have selected {{default}}</p>
Your backend.py should looks like this:
def get_country(default):
county_name = ["Bangladesh", "India", "USA"]
country_default = "Bangladesh"
if default in country_name:
country_default = default
country_name.remove(country_default)
return country_name, country_default
If you use GET Method, then it will redirect you to the "/" route with a query parameter (select_country). The route might look like this, "/select_country=(value_selected)". You can get the query parameter in flask using request.args.get(query_name). Your flask_app.py should look like this:
from backend import get_country
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def home():
country_name, country_default = get_country(request.args.get("select_country"))
return render_template("index.html", country=county_name, default=country_default)
If you use POST Method, then it won't change the route. Therefore there wouldn't be any query parameters. You should instead use requests.form.get(name) to get the posted data. Your flask_app.py should look like this:
from backend import get_country
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def home():
country_name, country_default = get_country(request.form.get("select_country"))
return render_template("index.html", country=county_name, default=country_default)
I am trying to deploy my ml model in flask. The error appear when i am trying access my height-weight.html page from the home.html page.
code for app.py
from flask import Flask, request, jsonify, render_template
import pickle
app = Flask(__name__)
#app.route('/')
def home():
return render_template('home.html')
if __name__ == "__main__":
app.run()
This works perfectly fine. It render home.html. No problem here.
Output 1:-
But as soon as I click Check Project button following error occurs.
Output 2:-
Code for height-weight.py
from flask import Flask, request, jsonify, render_template
import pickle
app = Flask(__name__)
model = pickle.load(open('model.pkl', 'rb'))
#app.route('/predict')
def weight_predict():
return render_template('height-weight.html')
#app.route('/predict',methods=['POST'])
def predict():
if request.method == 'POST':
height = float(request.form['height'])
gender = float(request.form['gender'])
prediction = model.predict([[gender, height]])
output = round(prediction[0], 2)
return render_template('height-weight.html', weights = output)
if __name__ == "__main__":
app.run()
And finally my html code for height-weight.html look like this.
Code:-
<section id='form'>
<div class="container">
<h1>Height Weight Prediction</h1>
<form action="{{ url_for('predict')}}" method="get">
<div class="card">
<div class="card-body">
<label>Gender</label>
<input type="text" class="form-control" id='gender' placeholder="Input Your Gender" required="required">
</div>
<div class="card-body">
<label>Height</label>
<input type="text" class="form-control" id='height' placeholder="Input Your Height" required="required">
<small class="form-text text-muted">Please input your height in 'Inch'.</small>
</div>
<button type="submit">Predict Weight</button>
</div>
</form>
{{ weights }}
</div>
</section>
My expected output is to show height-weight.html pages from where i can predict the weight. This is my error. Hope you guys understand my error and please help me. Thanks in advance.
You are redirecting the page to 127.0.0.1:5000/height-weight.html which is looking for the HTML file on the backend server. You need to redirect the page to /redirect by providing it in an anchor tag.
Flask renders the HTML page and returns the response it doesn't serve the HTML page directly. That's why you are getting 404 error.
Hope this helps!
Problem transferring variables across views I tried using sessions and could not get the connection to work. Say I have two pages, a home and page2. I have a flask app that will take user input from the home and print out input on page2.
For example, if you start my app, you will see this as the home page:
This part works fine, I am able to enter a value.
What I want to happen next, is after you click submit, page2 is generated showing what was just entered:
Whatever string value was entered on home should show up in the highlighted portion.
I have the following app.py file:
from flask import Flask, render_template, request, session
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def home():
stringval = ''
if request.method == 'POST' and 'stringval' in request.form:
stringval = request.form.get('stringval')
session["stringvalue_topass"] = stringval
return render_template('page2.html', stringval = stringval)
return render_template("home.html")
#app.route('/page2', methods=['GET', 'POST'])
def page2():
stringvalue_get = session.get('stringvalue_topass')
return render_template('page2.html', stringvalue_get = stringvalue_get)
if __name__ == '__main__':
app.run(debug=True)
The following home.html:
<!doctype html>
<h1>Enter Value </h1>
<div class="main">
<form class="pure-form" method="POST" action="/page2">
stringval:<br>
<input type="text" name="stringval"><br>
<button type="submit" class="pure-button pure-button-primary" value="Submit">Submit!</button>
</form>
</div>
</body>
And the following page2.html
<!doctype html>
<h1>You have selected </h1>
<div class="main">
{% if stringvalue_get %}
<pre>
{% print(stringvalue_get) %}
</pre>
{% endif %}
</div>
</body>
Okay, there are a few issues here. Firstly, the action attribute of your form in home.html is set to "/page2". This means that when the form is submitted, the POST request is going to the /page2 endpoint rather than to the /home endpoint, where you have written the code for handling the form submission. We can fix this by just deleting the action attribute, as this means the form will post to then endpoint that loaded it - in this case /home.
Secondly, Flask sessions cannot be used without setting a secret key to encrypt the session. This can be done by assigning a value to app.secret_key, like so:
app = Flask(__name__)
app.secret_key = b"my_secret_key"
Finally, instead of passing the string to the template like so: render_template('page2.html', stringval = stringval), (note also that this should be stringval_get = stringval), you can access the session object directly from templates already. So, in all, we can change your application code to:
app.py:
from flask import Flask, render_template, request, session
app = Flask(__name__)
app.secret_key = b"my_secret_key"
#app.route('/', methods=['GET', 'POST'])
def home():
if request.method == 'POST' and 'stringval' in request.form:
session["stringvalue_topass"] = request.form.get('stringval')
return render_template('page2.html')
return render_template("home.html")
#app.route('/page2', methods=['GET', 'POST'])
def page2():
return render_template('page2.html')
And your templates to:
home.html:
<!doctype html>
<h1>Enter Value </h1>
<div class="main">
<form class="pure-form" method="POST">
stringval:<br>
<input type="text" name="stringval"><br>
<button type="submit" class="pure-button pure-button-primary" value="Submit">Submit!</button>
</form>
</div>
</body>
page2.html:
<!doctype html>
<h1>You have selected </h1>
<div class="main">
{% if 'stringvalue_topass' in session %}
<pre>
{% print(session["stringvalue_topass"]) %}
</pre>
{% endif %}
</div>
</body>
I'm trying to run a simple Flask application based on multiple simple tutorials. My goal is to finish a full tutorial and manipulate the code to build a search web app that connects to a SQL server database.
However, when I try running the code and provide an integer input, the POST method is not working, so it will not return a {{value}} as specified.
I've tried adding and removing several components: adding in the action='/' on the HTML, and trying to run the code as well without it. That didn't make a difference.
I have methods=['GET', 'POST'] already.
I even tried {{ url_for('/') }} and that just gave me an Internal Server Error.
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
#app.route('/hello')
def hello():
return "My flask app"
#app.route('/', methods=["GET", "POST"])
def home():
if request.method == "POST":
value = int(request.form["number"])
add_one = value + 1
return render_template('index.html', string="WORLD!", value=add_one)
return render_template('index.html', string="WORLD!")
if __name__ == "__main__":
app.run()
HTML:
<body>
<div class="container">
<h1>Hello, {{string}}</h1>
<br>
<form action='/' role="form" method="post" onsubmit="return false;">
<div class="form-group">
<input type="number" class="form-control" name="number" placeholder="Enter a number" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<p>The calculated number is {{value}}</p>
<br>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
While running the code my app renders successfully, but when submitting a number the server does not register the input.
I don't even receive an error. All I see in the terminal is "GET / HTTP/1.1" 200.
By removing onsubmit="return false;" attribute of the form in the HTML.
And by restarting your app and reload the HTML.
It should be working.
Here is the code snippet I have written
MainPage.py
from flask import Flask, render_template,url_for,request, redirect
from form import SearchForm
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secretkey1234'
#app.route("/")
#app.route("/home", methods=['GET', 'POST'])
def home():
forms = SearchForm()
return render_template('home.html', title='Home', forms=forms)
#app.route("/about")
def about():
return render_template('about.html', title='About')
if __name__ == '__main__':
app.run(debug=True)
form.py
from flask_wtf import FlaskForm
import Get_Test_Suite
from wtforms.fields import SelectField, SubmitField
from wtforms.fields.html5 import DateField
from wtforms.validators import DataRequired
class SearchForm(FlaskForm):
test_suite_list = Get_Test_Suite.get_test_suite()
suite_list = []
for i in test_suite_list:
suite_list.append((i, i))
test_suite_selected = SelectField('Test Suite Name', choices=suite_list)
test_module_list = Get_Test_Suite.get_module_name()
module_list = []
for j in test_module_list:
module_list.append((j, j))
test_module_selected = SelectField('Test Module Name', choices=module_list,validators=[DataRequired()])
date_selected = DateField('Date', format='%m-%d-%Y')
status = SelectField('Status', choices=[('Active', 'Active'), ('Closed', 'Closed')])
submit = SubmitField('Submit')
home.html
{% extends "layouts.html" %}
{% block content %}
<div class = "content-section">
<form method="POST" action="">
{{forms.hidden_tag()}}
<fieldset class="form-group">
<legend class ="border-bottom mb-4">
<center>SEARCH TEST FAILURE STATUS</center>
</legend>
<div class="form-group">
{{forms.test_suite_selected.label(class="form-control-label")}}
{{forms.test_suite_selected(class="form-control form-control-lg")}}
</div>
<div class="form-group">
{{forms.test_module_selected.label(class="form-control-label")}}
{{forms.test_module_selected(class="form-control form-control-lg")}}
</div>
<div class="form-group">
{{forms.date_selected.label(class="form-control-label")}}
{{forms.date_selected(class="form-control form-control-lg")}}
</div>
<div class="form-group">
{{forms.status.label(class="form-control-label")}}
{{forms.status(class="form-control form-control-lg")}}
</div>
</fieldset>
<div class="form-group">
{{forms.submit(class="btn btn-outline-info")}}
</div>
</form>
</div>
{% endblock content %}
I am creating many drop down lists in home.html
How can I get the data that the user selects from each of the drop down list and print it ? I am trying to create a user friendly web application where the user will select the values from a drop down list and the application will fetch the data accordingly from the database.
#app.route("/")
#app.route("/home", methods=['GET', 'POST'])
def home():
forms = SearchForm()
if request.method == 'POST':
print(forms.field_name.data) # <- prints to console.
# to print to web convert to variable and render with jinja2
# return render_template('display.html', field_name=forms.field_name.data)
return render_template('home.html', title='Home', forms=forms)
Have you tried transforming the 'choices' into a dict? You can then get the value for the key form data. Maybe something like this (for your "status" SelectField): value = dict(form.status.choices).get(form.status.data)
I sure that you was find your solution, but for next generation.
You need insert in the select tag the name of the value, and not in options tags.
example:
<select name="sServer">
{% for server in servers %}
<option value="{{server}}">{{server}}</option>
{% endfor %}
</select>