Chapter 3: Custom error pages (3c)

hello.py

@@ -6,11 +6,21 @@ app = Flask(__name__)
 bootstrap = Bootstrap(app)
 
 
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('404.html'), 404
+
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    return render_template('500.html'), 500
+
+
 @app.route('/')
 def index():
-	return render_template('index.html')
+    return render_template('index.html')
 
 
 @app.route('/user/<name>')
 def user(name):
-	return render_template('user.html', name=name)
+    return render_template('user.html', name=name)

templates/404.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block title %}Flasky - Page not found{% endblock %}
+
+{% block page_content %}
+<div class="page-header">
+    <h1>Not found</h1>
+</div>
+{% endblock %}

templates/500.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block title %}Flasky - Internal server error{% endblock %}
+
+{% block page_content %}
+<div class="page-header">
+    <h1>Internal server error</h1>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,31 @@
+{% extends "bootstrap/base.html" %}
+
+{% block title %}Flasky{% endblock %}
+
+{% block navbar %}
+<div class="navbar navbar-inverse" role="navigation">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle"
+             data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                </button> 
+            <a class="navbar-brand" href="/">Flasky</a>
+        </div>
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li><a href="/">Home</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    {% block page_content %}{% endblock %}
+</div>
+{% endblock %}

templates/index.html

@@ -1 +1,9 @@
-<h1>Hello World!</h1>
+{% extends "base.html" %}
+
+{% block title %}Flasky{% endblock %}
+
+{% block page_content %}
+<div class="page-header">
+    <h1>Hello World!</h1>
+</div>
+{% endblock %}

templates/user.html

@@ -1,33 +1,9 @@
-{% extends "bootstrap/base.html" %}
+{% extends "base.html" %}
 
 {% block title %}Flasky{% endblock %}
 
-{% block navbar %}
-<div class="navbar navbar-inverse" role="navigation">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle"
-             data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                </button> 
-            <a class="navbar-brand" href="/">Flasky</a>
-        </div>
-        <div class="navbar-collapse collapse">
-            <ul class="nav navbar-nav">
-                <li><a href="/">Home</a></li>
-            </ul>
-        </div>
-    </div>
+{% block page_content %}
+<div class="page-header">
+    <h1>Hello, {{ name }}!</h1>
 </div>
-{% endblock %}
-
-{% block content %}
-    <div class="container">
-        <div class="page-header">
-            <h1>Hello, {{ name }}!</h1>
-        </div>
-    </div>
 {% endblock %}