Dynamic User Dashboard Flask Tutorial

In this tutorial, we illustrate the tabbing of the dashboard. Our init file just needs its routing, and then to render the template of dashboard.

File: __init__.py, server location: /var/www/PythonProgramming/PythonProgramming/__init__.py

from flask import Flask, render_template

app = Flask(__name__)

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

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

if __name__ == "__main__":
    app.run()
		

Here's our dashboard page. This extends our header.html page. You can learn more about Bootstrap tabs here. File: dashboard.html, server location: /var/www/PythonProgramming/PythonProgramming/templates/dashboard.html

{% extends "header.html" %}

{% block body %}

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#basics" aria-controls="basics" role="tab" data-toggle="tab">Basics</a></li>
    <li role="presentation"><a href="#wdev" aria-controls="wdev" role="tab" data-toggle="tab">Web Dev</a></li>
    <li role="presentation"><a href="#dan" aria-controls="dan" role="tab" data-toggle="tab">Data Analysis</a></li>

  </ul>

  <!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="basics">
	<ul>
	   <li>dfadsfasf</li>
	   <li>jjh</li>
	   <li>assggg</li>
	</ul>
  </div>
  
  <div role="tabpanel" class="tab-pane fade" id="wdev">web dev</div>

  <div role="tabpanel" class="tab-pane fade" id="dan">Data analysis!#Q$@!#</div>

</div>

</div>

{% endblock %}
 
		

The next tutorial: Content Management Beginnings Flask Tutorial