Coder Camps – Individual Project: an exercise in SessionStorage, JQuery, and JavaScript functions

I promised a post on my final project for “part 1” of the Coder Camps .NET bootcamp.  You may recall that the first three weeks were largely a refresher for me, although I’ve not worked that much in JavaScript, and never in JQuery.  Despite the fairly basic nature of this part of the class, we still had to do an individual project in the three weeks allotted, and we were given the following requirements:

  1. Must have at least 3 pages
  2. Must have a log-in
  3. Must have at least two full examples of CRUD (Create, Retrieve, Update and Delete)
  4. Must look reasonably presentable (e.g. use Bootstrap if you are not going to do much on the CSS side)

Now, bearing in mind that we had not yet touched databases, this was going to be a bit of a challenge to create a website that had more than just very basic functionality.  I really wanted to be able to navigate from page to page and “keep” any information that I had entered, so relying solely on arrays was not going to be enough.  Fortunately I came across the idea of Session Storage (which I have mentioned before), and this provided the key: I would be able to save the information stored in arrays in Session Storage, and so keep it available to all pages providing I didn’t close the browser tab.  Another option would have been Local Storage which works in a similar fashion, but instead of storing the information “in memory”, Local Storage saves it to the user’s local machine.  In other words – it’s like an updated cookie.

Well, back to my project.  If you want to download it yourself and play with it (with the caveat that this is a work-in-progress still at the time of writing), you can find it in the “Final Project” repository on my Github page.

First, let’s take a look at three of the four pages I created: Index, Your Profile and “Your Stuff” (bear with me – there’s a reason for calling it “stuff”).

Index  Index page – note the image carousel at the top

MyProfile  Profile Page  – note the “Quick Access” dropdown menu (available on all pages) with the log-in

MyStuff  My Stuff Page – note the file upload

So let’s start with the basics.  Yes, this was a Bootstrap template (the Spacelab theme from Bootswatch, in fact),  I used a carousel and a jumbotron on the main page, but kept the other pages pretty clean.  I also added an “About” page, but other than the log-in modal and a simple link to the Profile page, there is no real action going on there.

The real action starts on the Profile page with a user creating an account.  I did not add any validation or required fields yet, but the obvious choices for required are the email/username and the password fields.  Both are necessary for logging in – I may hold off adding this functionality until I’ve covered AngularJS in a couple of weeks and/or ASP .NET Identity.  Creating a profile does two things: first, it adds the newly created User object to the User array, and also saves it to SessionStorage via JSON.stringify.  I have separate utility functions for JSON.Stringify and JSON.Parse as both are used very heavily.

The user can log-in from any page via the “Quick Access” login link which launches a modal window.  Thanks to SessionStorage, we’re able to check for the existence of the user-entered username and password by pulling the current contents of sessionStorage.usersArray, saving it to a local variable, and then looping through the array of objects looking for the appropriate username and password.  (I am SO looking forward to learning how to do log-ins with ASP .NET Identity).  This works even if the user has visited any other page in the website, but will not work if they close the browser tab.  Assuming the log-in information is correct, I then populate a User object with the current User information, as previously stored in the sessionStorage.usersArray, and save that user into sessionStorage.user.  Still with me?  Good!  Oh, and I save a simple boolean “loggedin” with a value of “true” to sessionStorage.loggedin.  Again, assuming the login information matches that of an existing user.  If not?  Well, you get a simple error message on the modal asking you to retry, and the inputs are cleared ready for attempt #2.

Once the user has logged in, their status as “current user” is maintained no matter where they navigate to on the website.  They can edit their profile, or even delete it if they want.  Deleting their profile also removes the current user information that I populate the input fields with on the profile page, as well as any items created by that newly-deleted user.  However, most users would want at this point to start adding items to their inventory.  The Your Stuff page has input fields (again, no validation or “required” logic built in at this time) with a dropdown option and a file upload option.  Added items work much the same as the user functionality above, with the one addition that listing the items (which will appear in a table (see below), will pull only those items associated with a given user.  I’m working on the log-out functionality so I can test that, but it’s simple “loop and match” logic that should work. (Famous last words – ask me again after I’ve tested it properly!).

MyStuff with Items

You can see here how I’ve added three items.  The List Items button loops through everything in the current Items array (which is maintained during user navigation within the site in sessionStorage.ItemsArray) and dynamically builds a table.  I think Angular may do a better job of this, but I’ll have to play with it to see if it’s worth doing.

Clicking the Edit Item button will populate the inputs with whatever item I have selected in the table (other than the file upload – apparently this is a security issue that I couldn’t figure out how to work around as for this project I was storing everything locally).  Save Items will update the item array and the sessionStorage.ItemsArray.  Delete Item will delete the currently selected item.

Feel free to check out the full project on Github.  I welcome suggestions for improvements (I can think of many myself) which you can add here in the comments.  Remember, my goal here is to learn – so constructive criticism is a good thing!



One thought on “Coder Camps – Individual Project: an exercise in SessionStorage, JQuery, and JavaScript functions

  1. Pingback: CoderCamps – Week Four – Typescript | A novice developer's journey

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s