Lab 8: Introduction to
Web Applications

In part 3 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. You would have to manually type stuff in the URL bar to get to the different parts of your app.

That's not very efficient or user friendly.

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.

Step 1: Fork your repl from Part 3, and update your README.md

As before, please fork your reply from Part 3, and use the new forked version to work on Part 4.

Then, update your README.md so that it contains a part like this:

# Part 4

Repl: https://replit.com/@phtcon/TragicHoarseCompilers-6

Webapp: https://tragichoarsecompilers-6.phtcon.repl.co/

These should be links to your newly forked repl, and the web app that it publishes when you click Run.

This is the web app you'll work on in Part 4.

Step 2: Adding Bootstrap to our templates

We’re going to implement this using a library called Bootstrap. Bootstrap is a free and easy way to get responsive features and styles. Responsive, in this context, means that it looks nice whether we are on a computer with a big monitor, or looking at it on a tiny screen on our phones.

In this step, we are basically setting up our app so that it loads Bootstrap. In the next step, we'll use Bootstrap to add a navigation bar to our app.

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). Copy and paste the long Bootstrap links into your own file.

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"

crossorigin="anonymous">

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

<!doctype html>

<html>

<head>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"

crossorigin="anonymous">

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

</head>

Create an empty navbar.html

Next, we are going to create an file under templates called navbar.html

For now, the content will simply be:

<nav><p>The navigation bar will go here</p></nav>

We'll replace that with something more sensible at a later step—but we can use this to make sure that our first step is working properly.

We’re almost done with layout.html! Now we need include some code inside the body.

Replace everything inside the body with the code below.

<body>

<div class="container">

{% include 'navbar.html' %}

<div class="mt-3">

{% block content %}{% endblock %}

</div>

<script

src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"

integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"

crossorigin="anonymous"></script>

</body>

</html>

Explanation

Here's a brief explanation of the code above

The outer <div class="container"> provides a container in which Bootstrap can help manage the content on our page as the size of our screen changes size (from desktop to tablet to phone).
The line {% include 'navbar.html' %} makes sure that the navigation bar appears at the very top of very page in our application. (That happens as a result of this being the layout.html file which is the basis of every page in the app.)
The inner <div class="mt-3"> has the class="mt-3" on it, which refers to a Bootstrap CSS class for putting margin at the top of this content. Basically, we want to make sure that there is some space between the navigation bar and our content. You can read more about Bootstrap spacing classes here: https://getbootstrap.com/docs/5.1/utilities/spacing/
Inside that is {% block content %}{% endblock %} which is where our web content goes.
Under that is a <script> element that pulls in the latest version of the Javascript code needed for Bootstrap (explained more here in the Bootstrap Starter Template)

Now test

Start the web server again, and try out the various pages.

If it works, you should see that the text The navigation bar will go here appears at the top of every single page, including the home page, all of the forms, and all of the results pages.

That's because we added it to the layout.html file, which is the basis of every page in the application.

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

Step 3: Actually Creating the NavBar using Bootstrap

Now, let's put some better code into navbar.html

Remove the placeholder code, and put in the code below.

If you want to know more about the Bootstrap NavBar, you can read about it here:
https://getbootstrap.com/docs/5.0/components/navbar/

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 suggest that you copy/paste this into the navbar.html file, and then try running it first.

Then, we highly suggest you read the explanation, think about it, and discuss it with your partner before moving on.

Your navbar.html should look like this:

<button class="navbar-toggler"

type="button"

data-bs-toggle="collapse"

data-bs-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent"

aria-expanded="false"

aria-label="Toggle navigation">

</button>

</li>

</li>

</li>

</ul>

</div>

</div>

</nav>

Step 4: Testing the Navbar

We'll explain the code in a minute. But first, let's test!

If it worked properly, your webapp should now look like the picture at right. (or approximately like this, depending on what you did with your style.css file in the part 3.)

Now, try clicking on the icon upper right (☰) that some folks call the "Hamburger Icon", which indicates a menu. It should reveal a menu, as shown in the animation at right.

You can use that menu to navigate to various parts of the application.

Note, however that we don't have anything in the navbar for our custom function; right now the only way to get to it is from the Home Page.

We'll fix that at a later stage in this lab.

Step 5: The Navbar Explained

Block 1

This code says that we are creating a navbar. The various values for class are separated by spaces. Each class refers to specific CSS properties defined by Bootstrap, and documented here: https://getbootstrap.com/docs/5.0/components/navbar/

Block 2

<button class="navbar-toggler"

type="button"

data-bs-toggle="collapse"

data-bs-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent"

aria-expanded="false"

aria-label="Toggle navigation">

</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>

</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.

This is where we'll add a link to your custom function

Step 6: Add a link to your custom function to the navbar

Now go into the navbar.html and find this section (inside Block 3):

</li>

</li>

</li>

Add another <li> element to make a navbar item for your custom function. Look at what is the same, and what is different among each of these <li> elements, and from that you should be able to infer what you need to change to get a link to the form page for your custom function.

When you've added that, test that everything still works properly. Then you are almost done with Part 4!

What else can I do with Bootstrap?

There are so many more cool things you can do with CSS, Bootstrap!

If you want to see some more examples, browse the documentation for Bootstrap version 5 here:

https://getbootstrap.com/docs/5.0/getting-started/introduction/

The section on Components (see the left navigation on that page) is probably the most useful and relevant section.

Step 7: Update README.md (link to repl and web app)

As in the prevoius part, we'll now update README.md, adding first a heading:

# Part 4

And under it, add links to your repl and your running web app for this part. You can review the README.md steps in Part 1 and Part 2 if you need a reminder of how to do this.

Then you are ready for Part 5, where we learn how to deploy a web app to Heroku.

Links to: Overview Part 1 Part 2 Part 3 Part 4 Part 5 Part 6

Page updated

Report abuse