How to create a website with Python Flask

About Flask

Flask is a famous python web framework. Another popular framework is Django. If you are very new to web, you should choose Flask because it is easier and simple than Django. But Django is good for larger and complex web application.

Before Flask

Before Flask, you should know about basic python and frontend web development HTML, CSS

1. Create Basic Flask route

  • create folder
  • create main.py
create a folder and create main.py
from flask import Flaskapp = Flask(__name__)# creating route
@app.route("/")
def home():
return "This is Home Page"
if __name__ == "__main__":
app.run(debug=True)
  • import Flask class from flask
  • Flask parameter should be a module name. and we pass __name__
  • __name__ is special variable. you can test print(__name__) and it will print __main__. __main__ means you run directly the file or if you get module name, you imported another file.
  • @app.route(“/”) is decorator function that return home function
  • “/” means “http://127.0.0.1:5000/” and “/test” means “http://127.0.0.1:5000/test”
  • return test will print on the “/” route. That’s why Hello, World! print on http://127.0.0.1:5000/
  • the last if statement is that if you run directly file, run the application.
  • debug=True means if there is an error, error will be shown on page.

2. Run Flask

python main.py
http://127.0.0.1:5000/
http://127.0.0.1:5000/about

Not Found Error. Because we didn’t create (“/about”) route in flask app. We only create (“/”) home route that show This is Home Page.

3. Flask Config

We can set different config values base on sapplication environments. Now we are running development server and change ENV to development.

Route

from flask import Flaskapp = Flask(__name__)
app.config['ENV'] = 'development'
@app.route("/")
def home():
return "This is Home Page"
if __name__ == "__main__":
app.run(debug=True)

4. Rendering Template

After running basic route, we will return html.

from flask import Flaskapp = Flask(__name__)
app.config['ENV'] = 'development'
@app.route("/")
def home():
return "<h1>This is Home Page</h1>"
if __name__ == "__main__":
app.run(debug=True)

Now we return This is Home Page with HTML h1 tags.

Use Jinja Templates instead of returning HTML.

More about Jinja Templates

  • install Jinja
pip install Jinja2
  • create templates folder (flask will look for templates in templates folder)
  • create html files in there
html files in templates folder
  • render templates

main.py

from flask import Flask, render_template

app = Flask(__name__)
app.config['ENV'] = 'development'

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

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

home.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>This is home page.</h1>
</body>
</html>

5. Redirect and Url For

In Online Courses website, we already created 4 routes rendering different templates and now we will create download route. In download route, we will redirect (directing to other routes) to courses route (“/courses”) instead of rendering another template.

  • import redirect and url_for from flask module
  • add download route to main.py

main.py

from flask import Flask, render_template, redirect, url_for@app.route("/download")
def download():
return redirect(url_for("courses"))

6. Static Files

Next step about static files, static files are files and those files interact the same to all templates we rendered. CSS, JS and images are static files. Means that if we rendered home template, css file is passed with home template and if we rendered courses templete, css file is passed with home template to do the same job. Templates will change base on routes, but css, js and images is passed if any template pass to browser.

To add static files

  • create static folder
  • add css file in it
styles.css in static folder

styles.css

body{
background-color: #ee8844;
color: #fff;
}

connect css link with html

home.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/styles.css">
<title>Document</title>
</head>
<body>
<h1>This is home page.</h1>
</body>
</html>
http://127.0.0.1:5000/

If css file doesn’t work, right click to reload button and hard reload

hard reload

Build with me

Creating simple free courses website

simple flask app folder
  • create home, courses, about and contact html files and style it.

home.html

templates/home.html

courses.html

templates/courses.html

about.html

templates/about.html

contact.html

templates/contact.html

main.py

from flask import Flask, render_template, redirect, url_for

app = Flask(__name__)
app.config['ENV'] = 'development'

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


@app.route("/all_courses")
def courses():
return render_template("courses.html")


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


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


@app.route("/download")
def download():
return redirect(url_for("courses"))


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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cho Zin Thet

Cho Zin Thet

Learning javascript and web-development