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
6 steps to create Basic Flask App
1. Create Basic Flask route
- create folder
- 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
- run main.py
- go to http://127.0.0.1:5000/
python main.py
- try this route http://127.0.0.1:5000/about. you will see
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.
- install Jinja
pip install Jinja2- create templates folder (flask will look for templates in templates folder)
- create html files in there
- 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"))
- try this url http://127.0.0.1:5000/download download route and you will see that route redirect to courses route.
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
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>
If css file doesn’t work, right click to reload button and hard reload
Build with me
Creating simple free courses website
- create home, courses, about and contact html files and style it.
home.html
courses.html
about.html
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)
