prof-rossetti · s2t2 · Apr 18, 2023
diff --git a/web_app/routes/home_routes.py b/web_app/routes/home_routes.py
@@ -7,14 +7,14 @@
 @home_routes.route("/home")
 def index():
     print("HOME...")
-    return "Welcome Home"
-    #return render_template("home.html")
+    #return "Welcome Home YEAH"
+    return render_template("home.html")
 
 @home_routes.route("/about")
 def about():
     print("ABOUT...")
-    return "About Me"
-    #return render_template("about.html")
+    #return "About Me"
+    return render_template("about.html")
 
 @home_routes.route("/hello")
 def hello_world():
@@ -27,5 +27,5 @@ def hello_world():
     name = url_params.get("name") or "World"
     message = f"Hello, {name}!"
 
-    return message
-    #return render_template("hello.html", message=message)
+    #return message
+    return render_template("hello.html", message=message)
diff --git a/web_app/templates/about.html b/web_app/templates/about.html
@@ -1,8 +1,9 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "about" %}
 
 {% block content %}
 
-    <h2>About Me<</h2>
+    <h2>About Me</h2>
 
     <p class="lead">This is the about page</p>
 

diff --git a/web_app/templates/bootstrap_5_layout.html b/web_app/templates/bootstrap_5_layout.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+</head>
+<body>
+
+    <!--
+        FLASH MESSAGING
+        https://flask.palletsprojects.com/en/1.1.x/patterns/flashing/
+        https://getbootstrap.com/docs/4.3/components/alerts/
+    -->
+    {% with messages = get_flashed_messages(with_categories=true) %}
+      {% if messages %}
+        {% for category, message in messages %}
+            <!--
+                BOOTSTRAP ALERTS
+                https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
+            -->
+            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert" style="margin-bottom:0;">
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                {{ message }}
+            </div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+
+    <!--
+        SITE NAVIGATION & BOOTSTRAP NAV
+        https://jinja.palletsprojects.com/en/2.11.x/tricks/
+        https://getbootstrap.com/docs/5.0/components/navbar/
+    -->
+    {% set nav_links = [
+      ('/about', 'about', 'About'),
+      ('/hello', 'hello', 'Hello'),
+      ('/stocks/form', 'stocks_form', 'Stocks Form')
+    ] -%}
+    {% set active_page = active_page|default('home') -%}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">My Web App</a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                {% for href, page_id, link_text in nav_links %}
+                    {% if page_id == active_page %}
+                        {% set is_active = "active" -%}
+                    {% else %}
+                        {% set is_active = "" -%}
+                    {% endif %}
+
+                    <li class="nav-item">
+                        <a class="nav-link {{ is_active }}" href="{{href}}">{{link_text}}</a>
+                    </li>
+                {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container" style="margin-top:2em;">
+
+        <!--
+            PAGE CONTENTS
+        -->
+        <div id="content">
+            {% block content %}
+            {% endblock %}
+        </div>
+
+        <footer style="margin-top:2em; margin-bottom:2em;">
+        <hr>
+            &copy; Copyright 2023 [Your Name Here] |
+            <a href="https://github.com/prof-rossetti/intro-to-python/blob/main/exercises/web-app/README.md">Source</a>
+        </footer>
+    </div>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+
+        console.log("Thanks for the page visit!")
+
+    </script>
+</body>
+</html>
diff --git a/web_app/templates/hello.html b/web_app/templates/hello.html
@@ -1,4 +1,5 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "hello" %}
 
 {% block content %}
 

diff --git a/web_app/templates/home.html b/web_app/templates/home.html
@@ -1,4 +1,5 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "home" %}
 
 {% block content %}
 

diff --git a/web_app/templates/stocks_dashboard.html b/web_app/templates/stocks_dashboard.html
@@ -1,4 +1,5 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "stocks_dashboard" %}
 
 {% block content %}
 

diff --git a/web_app/templates/stocks_form.html b/web_app/templates/stocks_form.html
@@ -1,5 +1,5 @@
-
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "stocks_form" %}
 
 {% block content %}
 
@@ -15,7 +15,7 @@ <h2>Stocks Form</h2>
         </select>
         <br>
 
-        <button id="my-submit-btn">Go!</button>
+        <button id="my-submit-btn" class="btn btn-primary mt-3">Go!</button>
     </form>
 
 {% endblock %}