Creating A simple web application (2)
First, when the application runs we should show a home page with the latest bucket list items added by users. So let's add our home page to our application folder.
Flask looks for template files inside the templates folder. So navigate to the PythonApp folder and create a folder called templates. Inside templates, create a file called index.html. Open up index.html and add the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Python Flask Bucket List App</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a>
</li>
<li role="presentation"><a href="#">Sign In</a>
</li>
<li role="presentation"><a href="showSignUp">Sign Up</a>
</li>
</ul>
</nav>
<h3 class="text-muted">Python Flask App</h3>
</div>
<div class="jumbotron">
<h1>Bucket List App</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Bucket List</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Bucket List</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Bucket List</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Bucket List</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Bucket List</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Bucket List</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div>
</body>
</html>
Open up app.py and import render_template, which we'll use to render the template files.
from flask import Flask, render_template
Modify the main method to return the rendered template file.
def main():
return render_template('index.html')
Save the changes and restart the server. Point your browser to http://localhost:5000/ and you should have the below screen:
Very simple tutorial and easy to follow, thanks.