CODEWITHSUNDEEP
htmlpython-3.xflaskflask-wtforms
Coder123
Coder123

Reputation: 344

How to link internal html files in a href link using Flask

I have a navigation bar in my flask app with two elements- Home and Submissions. I am trying to link the href for home to a particular html page and link the href for submissions to another page.

So, here is my index.html file:

{% extends "bootstrap/base.html" %}

{% block title %} {% endblock %}

{% block navbar %}
<div class="'navbar navbar-inverse" role="navigation">
    <div class="containter">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
             data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
            </button>
            <a class="navbar-brand" href="/">Flask App</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/login"> Home </a></li>
                <li><a href="/login"> Login </a></li>

            </ul>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div class="containter">
    <div class="page-header">
        <h1>Hellooo {{name}}</h1>
    </div>
</div>
{% endblock %}

Here is my login.html file:

{% extends "index.html" %}

Here is my app.py file:

# Import key modules/packages
from flask import (Flask, flash, g, jsonify, redirect, render_template,
                   request, has_request_context, session, url_for, send_from_directory, abort)
app = Flask(__name__)
app.secret_key = 'my_secret_key'
from flask_bootstrap import Bootstrap
Bootstrap(app)


@app.route('/')
def login():
    return render_template('index.html')

When I run my app I get the following page:

enter image description here

However, when I click on home or login, I receive this error:

enter image description here

I am new to flask so I dont understand why this is occuring. Both html files are in my templates folder but how do you link them together so when I click on home or login it take me to another html page?

Upvotes: 0

Views: 4963

Answers (2)

Don Fox
Don Fox

Reputation: 11

As suggested above, I added routes for each of the views in app.py. This was a transcription from a static site (HTML and css only), to a Flask app.

For links the answer was provided by the example in "Create dynamic URLs in Flask with url_for()"

from flask import Flask, render_template 

app = Flask(__name__)

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


@app.route("/resume")
def resume():
    return render_template('resume.html')


@app.route("/books")
def books():
    return render_template('books.html')


if __name__ == '__main__':
    app.run(debug=True)

Links in the static site, for example for index.html:

<footer>
    <br><a href="resume.html">Resume:</a><br>
    <br><a href="images/Recomendation_Dave_Schultz.jpg">Referances and Recomendations:</a><br>
    <br><a href="mailto:[email protected]?subject=From ">E-mail:</a><br>
</footer>

index.html in Flask version:

<footer>
    <br><a href="{{ url_for('resume') }}"> Resume </a></br>
    <a href="static/images/Recomendation_Dave_Schultz.jpg">Referances and Recomendations:</a>
    <br><a href="mailto:[email protected]?subject=From ">E-mail:</a><br>
    <a href="{{ url_for('books') }}"> Interesting Books: </a>
</footer>

Upvotes: 0

Raghav Joshi
Raghav Joshi

Reputation: 143

Well you need to define separate route for login for these to work like these


# app.py

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


@app.route('/login')
def login():
    return render_template('login.html')

And in template you need to change it like these

    <!-- block nav -->

    <li><a href="/"> Home </a></li>
    <li><a href="/login"> Login </a></li>

    <!-- More better way -->
    
    <li><a href="{{ url_for('index') }}"> Home </a></li>
    <li><a href="{{ url_for('login') }}"> Login </a></li>

Upvotes: 1

Related Questions