In this blog we will learn how to make a simple blogging website using Flask. We will learn creating webpages and navigating through them by creating a link between them. So, let's get started.
What is Flask?
Flask is a small and lightweight web application framework written in Python. It is a collection of useful tools and features that enables a web developer to write applications without having to bother about low-level details such as protocols, thread management etc.
It is developed by Pocco which is an international group of Python enthusiasts led by Armin Ronacher. Flask is based on Werkzeug WSGI toolkit (which implements requests, response objects, and other utility functions) and Jinja2 template engine (to dynamically build HTML pages using Python) both of which are Pocco projects.
Installation:
You can easily install Flask using the following pip command:
pip install flaskDocumentation:
Making a story blog
Creating Home page
The following code builds a basic web application that prints a statement on a website's home page.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "<br>Stories!<br>This website contains stories for you to read."
if __name__ == "__main__":
app.run(debug=True)
In the above code:
We first import Flask and then create an instance of a Flask application called 'app'.
We then bind a URL to a function called 'home' using a decorator function called route(). This decorator converts the function's return value into an HTTP response to be displayed by an HTTP client such as a web browser. '/' URL corresponds to the home/default page. So, when the home page is accessed in the web browser the output of the home() function will be rendered.
We defined a function called home() that prints "<br>Stories!<br>This website contains stories for you to read."
In the main function, we run the application in debug mode. By running it in debug mode we ensure that the server will reload itself if the code changes.
On executing the python script containing the above code (app.py) we get the following output:
The output provides us with debugging details and a URL. The '127.0.0.1' in the URL corresponds to the local computer and the '5000' represents the port no. If we go to this URL using a web browser we will encounter a web page showing the contents of the home() function as shown below.
We can format the rendered text using HTML. One example is shown below:
HTML code:
<html>
<br>
<head><title>Story Blog</title></head>
<header style = 'font-family:algerian; font-size:50; color:#900C3F;'><center>Stories!</center></header>
<br>
<body style = 'background-color:#FFE2EE ; font-family:Chaparral Pro Light; font-size:30; color:#C70039;'><center>This website contains stories for you to read.</center></body>
</html>Rendered output:
Creating Story page
In this part you we will create HTML documents for home page and the stories. You can create your own HTML documents or download the ones used in this blog by clicking on the download button below.
In the above section while creating the home page we wrote the HTML in the function called home() since the text that we wanted to print was really short. But in case of stories it becomes cumbersome to write the HTML directly in the functions that's why we are now using html files to render the outputs.
It should be noted that Flask looks for HTML files in a folder named 'templates'. Therefore we need to save our html files containing stories into a folder named 'templates' in the same directory as our main script 'app.py'.
To use the html files we will have to modify the code in app.py as shown below:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/nightingale")
def story():
return render_template("nightingale_rose.html")
if __name__ == "__main__":
app.run(debug=True)In the above code we have modified the home() function to render the html document for the home page and the same thing is done for the story function.
You should pay attention to the route for the story() function. The route for accessing the web page created by rendering the nightingale_rose.html file becomes : http://127.0.0.1:5000/nightingale.
If we open this URL in the web browser we encounter the following web page.
Similarly creating, a web page for another story. ( The html file for this story is provided in the above download, try making a web page for this story yourself.)
We now have the web pages for the stories. To make navigating to these pages easier we will provide their link in the home page.
Connecting web pages
In order to link the web pages of stories to the home page, we will have to modify the home page as shown below:
<!DOCTYPE html>
<html>
<head><title>Story Blog</title></head>
<header style = 'color:#900C3F; font-family:Algerian; font-size: 70px'><center>Stories
</center></header>
<body style ="background-color:#FFE2EE; font-family:Book Antiqua; color:#C70039;font-size: 30px"><center>This website contains stories for you to read.</center>
<br>
<a href="/nightingale" style='font-size: 20px'>The nightingale and rose</a>
<br>
<a href="/cats" style='font-size: 20px'>The cats of Ulthar</a>
</body>
</html>Here, we have created a hyperlink to the two story pages in the body of the html for the home page. If we render this html file, two hyperlinks will appear on the homepage with the names : 'The nightingale and rose' and 'The cats of Ulthar', which will navigate to the respective story page as shown below.
This way you can add as many stories to your blog as you like.
You can navigating the pages in other ways as well using Flask, so I urge you to keep exploring it. There is much more that you can get done with Flask but keep in mind that Flask isn't yet production ready, it is still a development server.
If you need implementation for any of the topics mentioned above or assignment help on any of its variants, feel free contact us.
Comments