Flask
Flask is a micro web framework powered by Python that is designed to make getting started quick and easy. It has the ability to scale up to complex applications.
Flask offers suggestions but doesn’t enforce any dependencies or project layout as opposed to Django. As a developer, it is up to you to choose the tools and libraries you want to use.
We’ll be creating a simple web page with Flask in this tutorial.
Assuming that you have Python installed, next we’ll install a virtual environment so that we can isolate Python dependencies used by different Python projects.
Virtual Environment
The virtual environment is also important when you come across a new Python library that you want to experiment with. A system-wide installation risks messing up other libraries that you might have installed. However, using virtualenv to create a sandbox, comes in handy since you can install and use the library without affecting the rest of your system. This enables you to keep using this sandbox for ongoing development work and you can simply delete it once you’ve finished using it. Either way, your system remains organized.
$ pip install virtualenv
Install virtualenvwrapper, a set of extensions that makes it easy to use a virtual environment.
$ pip install virtualenvwrapper
$ export WORKON_HOME=~/Envs
$ source /usr/local/bin/virtualenvwrapper.sh
We then create and activate a new virtual environment.
$ mkvirtualenv venv
$ workon my-venv
Your virtual environment (venv) is now activated. Go ahead and create a directory to host our project.
$ mkdir dev $ cd dev
Install Flask
We finally install Flask using this command:
$ pip install flask
Let’s go ahead and display stuff on our web page. Open your favorite editor and type in the following in your hello.py file:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello World"
if __name__ == "__main__":
app.run(host='0.0.0.0', port= 81)
We first import Flask class then create the application object on the second line.
@app.route is a decorator that maps the URL(for our case /) to function (home).
Fire up your development server by running:
$ python hello.py
Navigate to: http://0.0.0.0:81/
and you should see “Hello, World!” on your browser.
In your root directory, create a directory and name it templates. Create a file named hello.html inside templates directory and paste the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="A New way of Casting your vote">
<meta name="keywords" content="online, voting,secure voting ">
<meta name="author" content="Musanga Sally">
<title>Politico | Welcome</title>
<link rel="stylesheet" type="text/css" href="static/assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Politico</span> Voting System</h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">HOME</a></li>
<li><a href="parties.html">PARTIES</a></li>
<li><a href="politicians.html">POLITICIANS</a></li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="column">
<div class="box">
<img src="static/assets/img/Law3.jpg">
<h3>Candidate 1</h3>
<p><strong>Party:</strong>ANC <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>President <strong> <br> Party HQ:</strong> 5th Ave. Ngong</p>
<button type="submit" class="button_1">Vote</button>
</div>
<div class="box">
<img src="static/assets/img/M01.jpg.jpg">
<h3>Candidate 2</h3>
<p><strong>Party:</strong>ANC <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>Vice President <strong> <br> Party HQ:</strong> 5th Ave. Ngong</p>
<button type="submit" class="button_1">Vote</button>
</div>
<div class="box">
<img src="static/assets/img/sally.jpg">
<h3>Candidate 3</h3>
<p><strong>Party:</strong> PNU <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>President <strong> <br> Party HQ:</strong> Banana Ave.</p>
<button type="submit" class="button_1">Vote</button>
</div>
</div>
</div>
<div class ="row">
<div class="column">
<div class="box">
<img src="static/assets/img/M01.jpg">
<h3>Candidate 1</h3>
<p><strong>Party:</strong>PNU <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>Vice President <strong> <br> Party HQ:</strong> Banana Ave.</p>
<button type="submit" class="button_1">Vote</button>
</div>
<div class="box">
<img src="static/assets/img/sally.jpg">
<h3>Candidate 2</h3>
<p><strong>Party:</strong>Wiper <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>President <strong> <br> Party HQ:</strong> 5th Ave. Ngong</p>
<button type="submit" class="button_1">Vote</button>
</div>
<div class="box">
<img src="static/assets/img/sally.jpg">
<h3>Candidate 3</h3>
<p><strong>Party:</strong>Wiper <strong> <br> Candidate Name :</strong> Musanga Sally</p>
<p><strong>Political Office:</strong>Vice President <strong> <br> Party HQ:</strong> 5th Ave. Ngong</p>
<button type="submit" class="button_1">Vote</button>
</div>
</div>
</div>
<footer>
<p>Politico Voting System , Copyright © 2019</p>
</footer>
</body>
</html>
Create another directory in the root and name it static. Inside static create two folders css and img to store your stylesheet and images, respectively.
NOTE: Remember to replace the links to images and stylesheet with your own path. E.g replace:
<img src="static/assets/img/M01.jpg" />
with your own image path.
Learning by Building
Save it and then add the following to hello.py to render the HTML page rather than “Hello World!“.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/") #add this
def home():
return render_template('index.html') #add this
if __name__ == "__main__": app.run(host='0.0.0.0')
Restart your server by pressing Ctrl + C then running:
$ python hello.py
and Voila your app is now up and running!!
