Ruby + Bootstrap

[linkstandalone] Ruby + Bootstrap

Ruby + Bootstrap

Introduction

For this post we will be extending our web application from part two. If you haven’t read the earlier posts, check out part one here. There are several things which we will be implementing. First, we will be adding a navigation bar to our index pages to help our customer navigate our site. Secondly, we are going to add in student roles. We will also add in the ability to enroll in classes. There are also a few things we will be changing to our views to see our information in a more clear fashion. I’ll remind you once again that you can check out the GitHub for the code here(lost).

Background

The first task we will tackle will be to add a navigation bar to our application. We want our users to be able to navigate to the other pages of our site without having to type in a URL. We could accomplish this by adding some simple HTML at the top of each index page, but we are going to take a different approach. We will be using a front end component library called Bootstrap to accomplish this task. The benefit of using this is that our site will be responsive; meaning that its appearance will change depending on the particular environment you view the site from. For instance, if you view that site from your phone, it will dynamically change its style to accommodate the smaller screen resolution. It is also a bit more aesthetically pleasing than plain HTML (to some ).

The next task we will be working on to add in our new models. We already have a professor model in our project, but we will need a student model. Once we create that, we will need to create an enrollment model to allow students to sign up for particular classes (sections of those classes to be exact). This enrollment model with belong to both a student and a section. For this project we will just give the student a name. If we wanted to be a bit more realistic we could assign a slew of other fields as well (student number, address, academic standing, etc.), but we will keep it simple for the sake of time.

Once we have added in our new models we want to see these features reflected in our view. We will make some changes to our show method where when you click show on a particular student or professor, you will see more details. For example when we click to show on a professor we will want them to see their sections and the students enrolled in those sections. When we click to see the details of a student we will want them to see which classes they are enrolled in, and the professors teaching those classes.

Get to the code already!

Ok, to set up our navigation bar we will need to install Bootstrap. s go ahead and edit our Gemfile and add the dependencies needed. At the time of this writing the latest version of the Bootstrap gem is the 4.0 beta. Put these lines in your Gemfile.

gem 'bootstrap', '~> 4.0.0.beta2.1'
gem 'jquery-rails' # Bootstrap requires jquery
popper_ # Bootstrap requires popper_js

Note : We also have to make sure our version of sprockets-rails is at least 2.3.2

Now we may run a $ bundle install to download bootstrap. Next we have to add the bootstrap styles into our app/assets/stylesheets/application.scss If this file is instead a .css file, be sure to rename it to be a .scss file. Add this line to that file:

@import \"bootstrap\";

Also, be sure to remove remove all the require and require_tree statements from the Sass file. Lastly, we need to edit our application.js file to add these three lines:

//= require jquery3
//= require popper
//= require bootstrap-sprockets

We should now be able to Bootstrap elements into our web page. In each of our views, edit the index.html.erb and add this to the top of your file.

<nav class=\"navbar navbar-toggleable-md navbar-light bg-faded\">\n  <button class=\"navbar-toggler navbar-toggler-right\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n    <span class=\"navbar-toggler-icon\"></span>\n  </button>\n  <a class=\"navbar-brand\" href=\"#\">Banner Web App</a>\n  <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n    <ul class=\"navbar-nav\">\n      <li class=\"nav-item active\">\n        <a class=\"nav-link\" href=\"#\">Home <span class=\"sr-only\">(current)</span></a>\n      </li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"/courses\">Courses</a>\n      </li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"/professors\">Professors</a>\n      </li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"/sections\">Sections</a>\n      </li>\n    </ul>\n  </div>\n</nav>

Now if we start up our server and navigate to one of our index pages, we should see the hamburger icon at the top of the page! If we click on the icon we will have a drop down menu allowing us to navigate between our different index pages.

For the next portion will are going to create some new models to add into our application. Remember we are creating a Student and a Enrollment class. To accomplish this we will go back to using our handy rails generate command. In a terminal, navigate to the root of your project and issue these commands:

$ rails generate scaffold Student studentname:string
$ rails generate scaffold Enrollment student:references section:references

You should now see the new models listed under ./app/models.

Next, we are going to add in the ability to see which professors a student is enrolled with, as well as what students a professor has enrolled in their sections. You’ll need to add a couple of things into our controllers to allow us to accomplish this. In professors_controller.rb change the show method:

In the students_controller.rb change the show method as well.

Now we will need to go back into our views directory and edit the show.html.erb file for both the professor and student. For the professor add a portion into the file like this:

For the student, open up show.html.erb in the ./views/students directory and edit the file to add in this portion:

Now go ahead and restart your server, add a student, then enroll them into a section. While in the s index page if you click on view you should see something similar to the following image:

If we then navigate to the professors index and look at the professor that we\nsigned up for, we should see them listed under their view like this:

Conclusion

By making some small edits we were able to make our little web app a bit more robust. There is still a lot of improvement, but we are in a much better position than we were before. We have improved the ability to navigate around our site, improved the users experience by displaying what students are enrolled in your section (as a professor), as well as what sections your are enrolled in (as a student). There may be some more changes to come to this app in the future, but for now it is complete. If we wanted to go further we could make a nice homepage, add some graphics, and make some role based restrictions to pages. Next time…