Summer '22 Week 7
YouTube VideoResources
Video Script
Hello, and welcome to the week seven enhancements video for CIS 526 and CC 515 in summer 2022. So this week, you shouldn’t be wrapping up milestone five, which is do today’s, so make sure you get that submitted. And then we’ve got basically the week seven and eight content is all that’s left in this class. So the lessons for that are due next Monday. So you’ve got a whole week to work on that. And then next Friday is when milestone six is due. However, I highly encourage you to finish the week seven and eight lessons soon, so that you can start working on milestone six, because it is quite a bit larger than the other milestones, as we’ll talk about in just a second.
So the content for week seven and eight is mainly a grab bag of things that we wanted to cover at the end of this class, but didn’t fit anywhere else. So we’ll spend a little bit of time talking about single sign on. And we’ll look at CAS authentication, which is the single sign on method used to K-State, we’re also going to look at a couple of other frameworks in the web development world, just so you can get an idea of how those differ from the node and express framework that we’re using right now. So we’ll take a look at ASP.NET MVC. And then we’ll also take a look at React.
So for milestone six, we’re going to add a few more features to our community chest project. First, we’re going to look at fulfilling requests. If you remember, in a previous milestone, we added that column to the table. Now we’re going to take care of being able to fulfill the request that has been made, we’re also going to add roles for our users. So we’ll be able to keep track of which users are normal users and which ones are admins. So we’ll need some forms and routes for user management. And then finally, we’ll add the ability for admin users to create new boxes on the website. The other big thing for milestone six, there are 20 points available for websites that are particularly aesthetically pleasing and have good usability. So about 10% of your grade on this assignment is really going through and getting that level of polish on your website. So that looks nice, it works nice, it’s very usable, and it has lots of good design. So this milestone is twice as big in terms of grade as the other milestones, it’s worth 200 points, it’s about twice as big, you’re adding quite a lot of new features here. And this one, we’re going to give you a lot less direction and a lot less code in the tutorials. So you’re going to have to learn how to adapt what you’ve already got in the project to build something a little bit new and different compared to what you saw earlier in things like the blog project. So keep that in mind, I highly encourage you to start early on milestone six. The other big thing about milestone six, it is due Friday at 11:59. So Friday, July 29, at 11:59pm. That is the absolute last day that I can accept anything in the semester. So there are no possibilities for late submission on milestone six, it is has to absolutely be in by Friday, 1159 whatever you’ve got, so that I can get it graded.
So a little bit about aesthetics and usability, I wanted to give you some tips and tricks of things that you can do on this last milestone, hit that. First and foremost, make sure your website has a very consistent look and feel, you can achieve that by using the same CSS file on all of your pages. And thinking about things like typography and structure of your website, things like a navigation bar. And the use of consistent links and buttons and locations of things really helps make the website easy to navigate. Another thing to think about is minimizing the number of clicks a user has to make to perform a particular action. So if your user wants to be able to go to a box and request something or go to a box and mark something done, think about how many clicks it takes them to go from the homepage to performing that action. And trying to minimize that down to a reasonable amount. Two or three clicks would be ideal for a lot of that. And some of that can be done using smart routing. So thinking about how you go from one page to another. And then also, once you’re deep into the website, how you can quickly route back to the homepage, or route back to the previous action very quickly. So thinking about your routing, and how those links work is really great. Doing things like adding helpful labels and errors to any forums and any sort of actionable items on the website, really help users understand exactly how they can go in and edit things. So that’s really good to think about. One thing we really haven’t talked about in this class is iconography, there’s a really good library called font awesome that has 1000s of icons that you can use in your website. And adding those little icons to go along with text labels can really help with that. And I’ll show an example of what that looks like here in just a second. Also be thinking about navigation and contexts. So is it easy for the user to tell what page they’re on without having to look at the URL? Is it easy to tell if they’re logged in, where they can log out where they can log in, what user permissions they have, all of the things are really important. And so anything that you can add in terms of navigation and context is really important. And then finally, don’t forget about things like hover animations. If something is meant to be clickable if you have a div or a card that is meant to be clickable, you can use some CSS to either make it clear when the user hovers over that either by changing the mouse or maybe changing the layout or feel of that particular card. Just to make it easy for the user to really understand what is interactable on the website. and what is not.
So I really quickly want to show you an example of this. And I’m going to switch over to this window. This is a project I’m working on. Some of you may have seen the original of this, which is the Office Hours queue that we currently use mostly for CIS 300. This is kind of a side project I’m working on right now just to play around with some web dev things. But you’ll see, one of the things you’ll notice is a very consistent look and feel where we have this purple navigation bar up at the top, the current link is highlighted. So if I go to any of these other pages, you’ll see that they get highlighted as I move around. I’ve got this card interface that has some really quick hover animations on it. So as the mouse moves over that, you’ll see that it changes to a hand. So it’s clear that it’s clickable. And it actually hovers up a little bit. So I can see that. I’ve also got some iconography going on. So I have a user icon right here. And I’ve got things like a logout icon, and I have some other icons throughout the website, just to make it easy to see what’s going on. If I click on any one of these, I’ve got this edit button up here, I also have a back button up here. Those are pretty standard locations for those. And then if I click the Edit button, you can see on the form, I’ve got both a label for the form. And I also have kind of a sub label that describes a bit more in detail about what that particular form is used for. I’ve got really nice save buttons and I have cancel buttons. Cancel buttons are really great on these forms, because it’s a clear way to go back to the previous page so that the user knows that they haven’t made any changes. So those are all things that you can work on. And then of course, I’ve got login and logout buttons that are pretty clear and easy to use there. So this just gives you an idea of one possible way that you can look at website design, you absolutely do not have to follow this, this is just a particular model that I have learned how to use. And it uses a couple of things that are pretty easy to get into. It uses Bootstrap. And so if you look at these examples for Bootstrap, they have some really nice layouts for different nav bars. And so I prefer one of these nav bar fixed layouts, but there are many, many others that you can look at. And as I mentioned, there’s font awesome, it’s really easy to add into your website. And then you get access to over 2000 Free icons that you can use that have you know icons for just about any use, you can think about a website. And the nice thing is these are pretty commonly used. And so they give your website kind of a standard look and feel where people learn how to recognize the refresh icon and the back icon and the Logout icon, and things like that. So those are some things you can think about in terms of aesthetics and usability on this last milestone, and remember that 10% of your grade on this milestone is aesthetics and usability. So the more usable, the more polished your website is, the more points you’re going to get on that particular area.
So beyond that, we’ve got two more weeks left in the class, but we really just have one week’s worth of content, and then we have the milestone, so don’t be afraid to keep in touch on Discord. If you have any questions or concerns about the milestone or want me to clarify anything, I still do Tea Time office hours, Tuesdays at 330 and Fridays at 1030. You’re always welcome to join me there, I’ve got one on one office hours that you can schedule via Calendly. So don’t be afraid to do that. As before, I will probably look at recording a video showing some of the functionality from milestone six, I may not show all of it because really part of the assignment is to really look through the milestone six requirements understand what that would look like in a website without actually seeing it in action. You know, that’s one of the big things in web development is not only being able to, you know, see a website and duplicate it, but also see a list of functionality and figure out how to make that work on your website without actually seeing it in action first. So that’s an important part of this milestone, so I may not show everything, but watch for a video later this week, early next week walking through maybe a few parts of the milestone six model solution. So that’s all I’ve got. Hopefully when I see your milestone six solutions, I really feel like they’re beautiful and well designed and that’s really what we’re looking for in this milestone. As always if you have any questions, let me know otherwise, I will see you next week for the last week of the class.
Milestone 5 Overview
YouTube VideoVideo Script
Good morning, everyone, I wanted to take a minute to go through my mobile solution of milestone five, just so you can get an idea of what the functionality should look like. I hope this gives you a better idea of exactly all the steps you need to work on to get this milestone completed. So the big thing we’re adding in this milestone is user accounts and sessions. So what I’ve done here, on my homepage, I’ve added a little layout bar at the top that keeps track of my homepage, it also has buttons for creating an account and logging in. And then of course, if I click on any of the other pages, that bar will stay at the top of my window, so that it’s really easy to keep track of whether you’re logged in or not. So the first step I can go through is creating an account. So I’ll click this button, it’ll ask me for an email address and a name, and then a password. And then I will submit that, and it will submit and it will automatically log me in as that user after I submit it, you don’t have to do that. But that’s usually good practice. Then once I’m logged in, you can see my names up there, my name will stay up there as I jump back and forth between pages. And then I can click this logout button, and it will go back to say Create account and login. So I’ll click login again, I will log in as me, hit submit, and we’re good to go. So login and logout works. The biggest thing to keep in mind when you’re logged out, is now we don’t want people to be able to add requests unless they’re logged in. So I’ve got a button down here that says login to add requests, I can click on that, just like before I can log in, it will log me in, I can go to that page. And now I can submit a request. So I’m going to submit a request for bird seed. Hit submit, we see that that goes in, we see that I’m still logged in, so I can add more requests if I want to. But when I log out, we’ll see that that request is still there. But I now can’t add any more requests without logging in. So that’s the basic core of the functionality that you need. For milestone five, you need to be able to get user accounts working. So you’ll need sessions, you’ll need a user’s table, you’ll need a login and a logout route, you’ll also need a signup route. And then you’ll need to protect some of these routes so that you can’t actually add requests unless you’re logged in. One thing that a lot of students do incorrectly is they remove the ability to add requests here via this form. But they don’t actually protect the post route, I will be testing the post route, even outside of your form, I’m going to use a tool called postman to try and post to your website while I’m logged out, and it had better not work. So make sure that you’re properly protecting that route using your sessions so that you can’t post even if this form is missing. So the other thing I want to show really quickly is what the database looks like. So we haven’t talked about this a whole lot. But if you want to encode do, you’ve got the SQL lite three command. So you can use that to open up your database just by loading the database file like this. So once I open up the database, there’s a couple of things I can do to make the output a little bit easier. I’m going to set the mode to columns. And then I’m going to set the headers on. And now if I do tables, I shouldn’t see the tables. And then I should be able to do select star from users. And it will give me all of the users in the database, you can see the user that I just added right here, which is really nice. I can also do select star from requests. And this will show me the requests. And you can see the requests for bird see they added right here has a column for user ID that matches the ID in the users table. And so this is also really important for you to do, it’s not going to be visible on your actual website unless you make it that way. The Milestone doesn’t require you to do that. But if you want to say, you know, birdseed requested by user, you can do that. But I’m going to be checking in your database to make sure that it’s filling out this user ID column correctly as well. This fulfilled column that’s what we’re going to work on in milestone six. So that’s a quick overview of what milestone five looks like. If you have any questions about this, let me know it’s not it’s hopefully not so bad now that you’ve gotten past milestone four, but there are several routes and layouts that you’ll need to work on here. And then milestone six is a doubly double sized milestone. It’s two weeks, it’s 200 points. So make sure you take a look at that. You hopefully should have plenty of time to work on that because there’s really only one week of content left after this one. As always, if you have questions, let me know I’ll post another Announcements video on Monday. But good luck this weekend on milestone five and I will see you on Monday.