For this post we will be extending our web application from the earlier post. If you haven’t checked it out, read up on it here. Also, the code is
available on GitHub(lost) for you to follow along with. There are several things which we will be implementing. First, we will be adding some validation to our input forms to make sure we are not getting bad data. Secondly, we are going to add authorization into our app. Lastly, we will be adding a search field into our application.
The first task we will tackle will be to add authentication to our application. We want our users to register and be able to login with their email and a password. We could accomplish this by adding simple authentication in our app, but that will only allow for one user at a time. We need to be able to handle multiple users of different types. For instance in the future we will want to delineate the privileges between students and professors; but we are getting ahead of ourselves. For now will will just worry about handling multiple users. To accomplish this, we will use a library called Devise.
The next task we will be working on is to add some validation into our forms. We can make sure that certain fields are present when accepting input. For instance, when adding a professor into our application it would be a good idea to make the name field mandatory to be filled out. We do not want users with empty names appearing in our database. Later on we may go deeper and add more complex validations into our application but for now lets just make it a bit more robust.
The only other thing we will be doing is to add the ability to search for professors, courses, or sections. If this were a full fledged website there may be hundreds of entries on each of these pages and having a search field will greatly help out our user. We can specify what exactly we are searching for, as there may be multiple columns in our database to pick from. As an example, when searching on the professor page it would be the most logical to specify the professor name as the column to look through, but maybe in your case it might be better to specify courses; if you want to see all of the professors teaching a particular course.
$ echo \"gem 'devise'\" >> Gemfile
Now that it has been added, we can run bundler to actually install the Devise gem.
$ bundle install
After the installation finishes there are still a couple of things we need to do to get Devise configured. Run:
$ rails generate devise:install $ rails generate devise user $ rails db:migrate $ rails generate devise:views users
This should get you off the ground. Go ahead and start up you application to take a look at one of your pages. You should still be able to view and access them normally. Why is this? Well, we need to modify each of our controllers to make sure they cannot be accessed by an unauthenticated user. Modify each of your controllers to their appropriate value:
Note: the controller files is located in (your project root)/app/controllers
By added the before_action statement on line 2, we now have restricted the viewing of these pages to only registered users. Go ahead and start up your application and attempt to view a page. You should see the new and improved webpage show up. Register yourself as a user and enjoy your new authentication setup!
Next we will work on adding some validation. To do so we will need to make some additions to our models. In your editor, navigate to
./app/models and make these additions to each one of your models, minus the new user.rb model (this was created when we installed Devise). Notice that in our Sections model, we have added two separate validates; this is because we need both sectionnum and course_id present. Go ahead and start up you app and give it a test. Here I attempted to add a professor without a name.
Next up, we will add our search functionality onto each of our respective index pages. Let’s start by editing our controllers again. In your editor change each of your controllers to look like the following (note that we are in the index method). Now we will need to make some changes to each s
index.html.erb page. These can be found in
./app/views. Take note that these edits are in the section of our HTML. Let’s start up our application and give our new search fields a shot. We should be able to type into our box above our results and enter a query to narrow them down! We can push our changes up to our GitHub repo as a last step.
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 security of our app, improved the users experience by adding search fields, and made it harder for users to enter bad input into our application. In the future we will be adding more and more functionality to improve this application.
[Originally posted 2017]