from flask import Flask, render_template
skills_app = Flask(__name__)
#skills_app.route("/")
def homepage():
return render_template("homepage.html")
if __name__ == "__main__":
skills_app.run()
Now homepage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello from Html page
</body>
</html>
but when I run my page,"Hello from HTML page" doesn't show up
and yes i created templates folder and put homepage.html inside it.
so what is the problem here? could you help me
By default, Flask looks for templates directory to render. If you want to make your code work, create a templates folder next to your main file, put homepage.html inside it.
Or, initialize app like,
skills_app = Flask(__name__, templates='/path/to/directory/containing/html-files')
and put your templates to the /path/to/directory/containing/html-files
Related
I would like to use flask to check when a button is pressed in an HTML coded website, the website will be up and running and the py app needs to be running too and wait for the button click, then on the button click, it will get the input content and print it. How do I do this?
this is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<input type="hallo">
<button>Hallo</button>
</body>
</html>
I have searched for a while but nothing I tried worked, please help.
some code snippets would be great, thanks.
Use a simple form that is submitted with a post request.
The value from the input field is queried using the name attribute.
The button of type submit submits the form.
from flask import (
Flask,
render_template,
request
)
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
print(request.form.get('hallo'))
return render_template('index.html')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<form method="post">
<input type="text" name="hallo" />
<button type="submit">Hallo</button>
</form>
</body>
</html>
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 1 year ago.
I am new to web development,and I was building my first website with Flask.When I first runned the website,Bootstrap was not working,after that I went in inspect mode and it gave me some errors.
I tried emptying the cache,but it did not change anything.
The projects folders are arranged like this:
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
{% if title %}
<title> Project--{{Title}} </title>
{% else %}
<title> Project </title>
{%endif%}
</head>
<body>
<div class="alert alert-primary" role="alert">
Hello
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
The python code:
from flask import Flask,render_template,url_for
app=Flask(__name__,template_folder='Template')
#app.route("/")
def home():
return render_template('Home.html',title='Home')
if __name__=='__main__':
app.run(debug=True)
How can I fix this issue?
Thanks in advance!
You have to keep js and css folder in a folder named static at same level that of templates folder where you will keep only html files.
You can use href="{{ url_for('static', filename='css/bootstrap.css') }}" for a css file named bootstrap.css which is in css folder in static folder. Same you have to do with us files , src="{{ url_for('static', filename='js/bootstrap.js') }}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
<title>Document</title>
</head>
<body>
<div class="container">
<form method = "post" enctype="multipart/form-data">
<h2>Choose your State</h2>
{{form.state_variable}}
<h2>Choose your District</h2>
{{form.district_variable}}
<br>
<br>
<br>
<input type="submit" name="submit" value="submit"/>
</div>
</body>
</html>
I'm new to creating web apps through flask and html. I created a very simple page that takes input from the html file and displays a table in another html. My python flask and html both are running fine. I wanted to add some bootstrap.css, so tried adding the div class=container to the html page using visual studio code. I previewed it with the 'Live Server' in visual studio code and it works fine. However, when I start the local server to work with flask, at that time bootstrap css is not getting applied. What I see is a barebone html page without styles being applied. All functionalities works fine though.
Any help will be much appreciated. Thanks.
Error Message: "GET /css/bootstrap.css HTTP/1.1" 404 -
Note: I'm not sure why the code is looking for "/css/" folder while I have clearly put my css file in the static folder and referenced it
You need to replace href="/static/bootstrap.css" and replace it with:
href="{{url_for('static', filename='bootstrap.css')}}"
You need to do that, because you write in flask like this. Normally you would do it like you did it. Feel free to tell me any errors
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap.css')}}">
<title>Document</title>
</head>
the above change to href as suggested by the user 'malware' helped resolve this.
I also commented the below line in my python code as that doesn't seem to be the problem
#app._static_folder = '<path>'
So I have a html file I'm working with both jinja and flask, but I'm having trouble with some characters as in the example:
<h1> Produção </h1>
When I run the layout.html file that has this on, it shows the word corretly. But when I run the jinja output template.render file, it comes out like that:
<h2> Produ��o </h2>
I've tried decoding/encoding, changing the meta lang and content to "pt-br", and also using <h2>{{"Produção"|safe}}</h2> but nothing seems to work. Does anyone knows how I could resolve this?
My jinja2 python file goes like this:
from jinja2 import Environment, FileSystemLoader
env = Environment(loader=FileSystemLoader('.'))
template = env.get_template("layout.html")
template_vars = {
"name" : "name",
"id":123456,
"cell":"cell A"
}
html_out = template.render(template_vars)
with open("main.html", "w") as fh:
fh.write(html_out)
EDIT:
Here's my head
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta content="pt-br" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
EDIT 2 (SOLVED):
The problem was:
<meta charset="UTF-8">
If I take it off, it works just fine. I don't really understand why.
attached is the picture of how my directories are upi am trying to run my app with flask, and I am referencing the proper directories, yet I keep getting an error 404 message. I do not know what I am doing wrong.
Here is my the code to run the app in the app.py section:
#app.route('/')
def math():
#return(y)
return render_template('index2.html', variable = y)
if __name__ == "__main__":
app.run(debug = True)
and here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="/static2/static2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static2/static2/css/scrolling-nav.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="/static2/static2/vendor/jquery/jquery.min.js"></script>
<script src="/static2/static2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/static2/static2/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="/static2/static2/js/scrolling-nav.js"></script>
</body>
</html>
the scrolling -nav.js is in the correct folder for sure.
Please let me know if there is more information needed for this question.
For references to static files in Flask it's considered best practice to use the url_for function e.g.
<script src="{{url_for('static', filename='js/scrolling-nav.js')}}"></script>
Other than that, if that is your full HTML then it's just a javascript file, do you have the basic HTML stuff in there as well? e.g.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Content
</body>
<html>
Is index2.html stored in a templates folder?
I got it. My directories name was static2. The directories name must be "static" for the css and js files to be pulled.