I want to be able to change page with my flask when I press on a link
app.py
#app.route('/')
def index():
return render_template('home.html')
#app.route('/login')
def login():
return render_template('login.html')
#app.route('/signUp')
def login():
return render_template('signUp.html')
#app.route('/home')
def login():
return render_template('home.html')
home.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>Home</h1>
</main>
</body>
</html>
signUp.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>signUp</h1>
</main>
</body>
</html>
login.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>login</h1>
</main>
</body>
</html>
The error I get is : AssertionError: View function mapping is overwriting an existing endpoint function: login
How to I create a flask with a website that has many webpages,
Thank you!
How to I fix it thank you!
You have used the function name login for all of your other routes.
This is causing Flask to be unable to create all your routes because the same name is being overridden multiple times.
Rename your functions for /login, /signUp and /home.
Also you probably not want the links for "Log in" and "Sign up" to link to / (index).
Change them to url_for('login') (if you decide to name the function for /login as def login:). The same thing of course for "Sign up".
Check here for reference on how to use url_for: https://www.tutorialspoint.com/flask/flask_url_building.htm
Related
I am creating a project on examination.
In my first html page I have a set of hyperlinks which represent the name of question papers. The question papers are stored in the form of tables in MySQL.
What I want is,to return the name of the hyperlink clicked by the user in my python code.
All the links should lead to the same webpage,but the contents in each link is different.
This is my python code for the webpage which should open after one of the links is clicked:
#app.route('/qsetdisplay/exam',methods=['GET','POST'])
def exam():
if request.method == 'POST':
if 'answer' in request.form:
cursor5 = db3.cursor(pymysql.cursors.DictCursor)
tablename = request.args.get('type')
print(tablename)
cursor5.execute("select questions from {}".format(tablename))
cursor5.execute("select answers from {}".format(tablename))
cursor5.execute("select marks from {}".format(tablename))
print("ques:", ques)
print("ans:", ans)
print("marks:",marks)
return render_template('exam.html',ques=ques,marks=marks,ans=ans)
tablename returns as none in the above code.
This is my html code for the webpage which would open after oneof the links is clicked:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXAMINATION</title>
</head>
<body>
<div>
<form name="ex" id="ex" action="{{url_for('exam')}}" method=POST>
<h1 align="centre">ALL THE BEST!!!</h1>
{% for que in ques %}
<h6>{{que}}</h6>
<textarea name="answer" id="answer" placeholder="enter answer" rows="10" cols="100"></textarea><br><br>
{% endfor %}
<input name="sub" id="sub" type="submit" value="submit">
</form>
</div>
</body>
</html>
And this is the html code for the previous page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>STUDENT PROFILE</title>
</head>
<body>
<div>
<form action="/">
<h1>"WELCOME STUDENT"</h1>
</form>
</div>
<div>
<form name="QD" action="{{url_for('qset_display')}}" method="get">
<input name="QD" value="CLICK TO VIEW QUES PAPERS" type="submit"><br><br><br><br>
<h1>THESE ARE THE AVAILABLE PAPERS:</h1>
{% for name in names %}
{{name}}<br><br>
{% endfor %}
</form>
</div>
</body>
</html>
How can I correct my code?
I'm learning about template inheritance and I'm a little confused. When I navigate to index.html, I want the title to appear on the tab in my browser. And I want this functionality to be built into the base.html file, which I'm inheriting from, such that the function index on app.py need only be passed the argument title (and the html file name) to execute as described above.
For some reason, the code is not functioning as intended; the title is not present on the browser tab.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html',title='index')
if __name__ == "__main__":
app.run(debug=True)
index.html:
<!DOCTYPE html>
{%extends "base.html"%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
base.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Both index.html and base.html are found in the templates folder as is necessary for jinja to function. No errors are being triggered, the title is simply not being formatted as intended.
What am I doing wrong?
I figured it out, I needed to pull the title lines OUT of the block statement! Subtle but makes a big difference.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{%endblock%}
{% if title %}
<title> {{title}} </title>
{%endif%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Your base.html has two <title> tags. Which isn't valid html.
You'll want to remove the empty one and allow for the title to be passed as an argument in all cases.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title> <!-- Remove this line here! -->
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
i Have python server with flask running on it
from flask import Flask,render_template
app = Flask(__name__)
#app.route("/")
def main():
return render_template('index.html')
if __name__ == ("__main__"):
app.run(debug = True, host = "0.0.0.0", port =80)
this is index.html there is simple form and send button
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>whatl0ol</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="login">
<div class="heading">
<h2></h2>
<form action="#">
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="">
</div>
<button type="submit" class="float">check</button>
</form>
</div>
</div>
</body>
</html>
i need solution to when user sends from index page, take it from python send to API.
need advices about site bandwith also.
thanks
make sure you have css files at this path
/your-project/static/css/style.css
also change your css in template to load it from static folder
<link href="{{ url_for('static', filename='css/style.css') }}" />
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.
I had to change the background image of the jumbotron below based on the input taken from the database.
Here's the code:
housekeeping.html
<div class="jumbotron" style="background-image:url('{%block wallpaper%}{%endblock%}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
profile.html
{%extends 'housekeeping.html'%}
...
...
{%block wallpaper%}{{wallpaper}}{%endblock%}
app.py
#app.route('/name/<b64>')
def profile_for_song(b64):
...
... #retrives the value of `wallpaper` form a row in the database.
...
wallpaper = '/static/wallpaper.jpg' #dummy value.
return render_template('profile.html', wallpaper=wallpaper)
but it doesn't work, as the value of background-image:url('') remains null.
Is it not possible to alter css with jinja blocks?
PS: I tried with url_for but still nothing.
Watch the use of whitespace control in your wallpaper block in profile.html.
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
wallpaper = '/static/wallpaper.jpg'
return render_template('profile.html', wallpaper=wallpaper)
if __name__ == '__main__':
app.run()
housekeeping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('{% block wallpaper%}{% endblock %}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
profile.html
{%extends 'housekeeping.html'%}
{% block wallpaper -%}
{{ wallpaper }}
{%- endblock %}
Sample output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('/static/wallpaper.jpg');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>