Gradebook: Adding Classes

Code Changes
Code Base

Goal

Today I wanted to do a whole bunch of things. First I wanted to add some error messages to an invalid login attempt. Then I wanted to add a banner to the top of the main page and start the work for allowing a teacher to create a class. It’s a lot of code so let’s dive in!

Login Error Messages

When ever a user tries to login and fails, I want some sort of message to appear informing the user as to what has happened. Since my backend already returns an error, all I had to do is catch the error and display some text. Here’s what the ajax call looks like now.

 

And right below the password field, I add the error message which is defaulted to be hidden.

New Students

I also went ahead and added the code base to allow a user to create a new student. First I added the click event for the New Student Register button. It’s the same as the New Teacher except it passes in a type value of ‘student’ as opposed to ‘teacher’.

 

Next I added the student schema. It’s basically the same as the teacher.

And here is model that goes with the schema. Again, it’s just like the teacher model.

One thing I did add is that when you do a DB request by using Mongoose, it returns a Mongoose model. What I want is the JSON object. Second the request is supposed to send that object back to the client so I want to filter out some stuff, namely the password. So in the utilFunction module I created a toClientObject function to parses out the stuff I don’t want and sends the parts I do want back to the client.

Finally, here’s the router to handle the student registration endpoint.

Menu Bar

I wanted a menu bar at the top of my main page. To do the heavy lifting, I used bootstrap. The logo was something I threw together with Gimp2 and the person icon is from Front-Awesome

And here is what it looks like using the code above.

Classes

Next I started the work for the classes tab. First I need a way to add a class, so I made the schema, model and router. Here is the schema.

Instead of going through the whole design process, I’ll just show you what I ended up with.

There is still a lot of work visually to be done, but this is a good start. On the left all of the classes will be listed out as vertical tabs. Clicking on them will populate the grey area. Clicking the Create Class button will bring up a modal that allows a teacher to create a class and add students to that class.

To save me the headache of going over all of the HTML, I’ll just decide the structure. In the views directory I added 2 top level folders, clientPartials and partials. ClientPartials will contain every template that the client will use. A script will run before the server starts and compile those templates into a template.js file. The Client then uses Handlebars to access and display those templates. For example, in the picture above the contents of the modal is a template called newClassModal.handlebars.

The other folder, partials, is a backend template folder. The server uses those to populate a page. For example, the classes.handlebars file is the HTML for everything below the menu bar, sans the modal window, in the above picture. Here is how it is inserted into the main page

On the Client side of things there are two main folders, a controllers which hold the logic for the various pages and a models which will hold the data. I’ll go over the controllers first.

The idea behind main.js is that anything that is not specific to a tab or code that should run at startup will go here. For now it gets a list of current students and adds a click listener to the Log Out button.

The class controller handles all of the logic for the class page. Right now that mostly means the logic behind creating a new class. 

In the createClassClick function above I’m doing quite a few things. First I removing any HTML from the modal body and then adding the newClassModal template HTML to the now empty body. The design calls for allowing a teacher to drag a student from a table onto another table. This way they can add students to the class they are creating. So the drag/drop is initialized next.  Then I remove any lingering event listeners from the create button and add a click handlers which will grade the data from the modal and call my class model to save the data

Manual Testing

With the code in place, I do some testing. First I check the DB and make sure the class collection is empty or does not exist.

Next I add a class.

And now I recheck the DB to make sure the class was added.

Success!

Overview

There is a lot here that I didn’t go over so I encourage you to look at the files and mess around, it’s the best way to learn!

If you have any questions about the stuff I went over or the code that I didn’t feel free to ask!

Thanks for reading
Cheers

Facebooktwittergoogle_plusredditpinterestlinkedinby feather