Lab 8: Introduction to Web Applications

Part 2.5: Creating a Navigation Bar

If you find typos or problems with the lab instructions, please let us know.

In part 2 of your lab, we created a simple web app that had 3 functions, allowing a user to convert temperatures (Celsius to Fahrenheit, Fahrenheit to Celsius) and distance (Miles to Kilometers).

You might have noticed that after you submitted a value to convert, you couldn’t get to the home page or reach any of the other forms to convert different things.

Enter the Navigation Bar

Most websites and web applications are designed so that you can easily get around. An easy-to-implement and easy-to-use form of navigation is a navigation bar. Nav bars allow users to have links that are persistent on the web page so they can quickly get to places on your web app. What’s the point of a great app if you can’t get to the good stuff?

In this part, we'll create a nav bar so that users can quickly get around all of the amazing web pages you just created.

Bootstrap: A simple way to get started

We’re going to implement this using a library called Bootstrap. Bootstrap is a free and easy way to get responsive features and styles. An article written by the staff from SPIS 2016 with more information and an example web app can be found here . We will be implementing a simpler example.

Back to all those templates

Remember all those templates from Part 2, inside the templates folder? We’re going to use them again.

We want our nav bar to be present on all of our websites webpages, so that we can always get to where we need to be. Every one of our webpage files extends layout.html, which means if we add the nav bar code in there, the nav bar will be in all the webpages. Since we are using Bootstrap for the nav bar, we first have to add new lines of code to let our web app know to go to Bootstrap for style info.

The new lines of code are long with many links, but don’t feel overwhelmed! Go slowly over the code, and make sure you understand it all. Let’s start with our <head> tags, which should currently look something like this:

<!doctype html>

<html>

<head>

<title> {% block title %}{% endblock %} - My Webpage</title>

</head>

Inside the head tag and before the two lines we currently have (<link... and <title>), we are going to add some lines of code. First, We need to let the web app know what character encoding standard we are using. UTF-8 (Unicode) covers most of the characters we need. If you want more information, you can check this w3schools article here.

Next, we have a line of code to help with the responsiveness of your web app as you change the size of the window. Note the comment:

Finally, we have to add code to access Bootstrap's stylesheets (note the links to bootstraps CSS files). Feel free to copy and paste the long Bootstrap links into your own file.

Your layout.html file should now look a little something like this:

<!doctype html>

<html>

<head>

<title> {% block title %}{% endblock %} - My Webpage</title>

</head>

We’re almost done with layout.html! Now we need include some code inside the body. First, we’ll add this line right underneath the <body> tags:

{% include 'navbar.html' %}

This will ensure that our navbar will appear on every single web page. We’ll create this file in the next step of the lab.

Now, beneath our <div> tags with the block content, we need to include JavaScript plugins that Bootstrap uses so that Bootstrap works correctly. We won’t go into too much detail here, but Bootstrap uses jQuery, a JavaScript library, and Popper, another JavaScript plugin. Again, W3 Schools is a great resource and you can play around in your free time with jQuery here.

Your final <body> tags should look a little something like this:

<body>

{% include 'navbar.html' %}

<div id="content">{% block content %}{% endblock %}</div>

</body>

</html>

Congratulations! You finished layout.html! Let’s move on to creating the navigation bar itself.

Actually Creating the Nav Bar

Inside your templates directory, create a file called navbar.html. Remember, this is the file that we had included in the layout.html.

Okay. We’re going to throw a lot of code at you all at once. But don’t worry, we'll explain it step-by-step. Look for the html comments that signify different blocks of code. We highly suggest you read the explanation, think about it, and discuss it with your partner before you type or copy-and-paste it in. Your navbar.html should look like this:

</button>

</li>

</li>

</li>

</ul>

</div>

</nav>

Block 1

Taking advantage of Bootstrap’s classes, we establish our opening tags for our navbar with <nav class="navbar navbar-expand-sm navbar-light bg-light">. navbar tells the HTML to use Bootstrap's navbar. navbar-expand-sm tells bootstrap to collapse the navbar on small (sm) devices and smaller devices(i.e. smartphones and smartwatches). In the next block, we'll review what a collapsed navbar is/what gets collapsed. navbar-light and bg-light make the navbar light-themed.

Block 2

</button>

This block of code does a lot of cool things whenever the browser window gets small. It sets it up so that your navbar items will disappear once the window has gotten too small. In its place will be a box with 3 lines that you can click on the show a dropdown menu of the items that disappeared. The home page is not part of the disappearing items because we have set it as the brand. We want this to be persistent because it is useful to always have a quick way to get back to the homepage. The last line before the next block creates a new <div>, marking the start of the items we want to collapse.

Block 3

</li>

</li>

</li>

</ul>

</div>

</nav>

Block 3 is where you include the actual links to the pages you created in the previous part! Using an unordered list tag (<ul>), we create a list item (<li>) for each of the pages we want to include. Within each list item, we create a hyperlink (<a>) to the relevant webpage. Here, replace all the ‘#’ in the references to direct the user to the correct webpage.

Time to test it

If everything went well, then your webapp should now have a navbar. Run your web app like in the previous parts (python hello_name.py, and then either use Replit's mini browser window or open the link in your browser's tab). Your web app should now look a little something like this:

Don’t forget to commit and push to your Github!

But I want to do even more!

There are a lot more cool things you can do with CSS, Bootstrap, and the navigation bar. If you want to see some more examples, check out the article from SPIS 2016 that was linked previously. There, an example webapp has a navigation bar with dropdown menus and much more. The article has links to the webapp itself as well as the Github repo with all the code. Take a look at the navbar.html file and see if you understand what’s going on!