Summer '22 Week 6

Resources

• Slides

Video Script

Hello, and welcome to the week six Announcements video for CIS 527 and CC 515 in summer 2022. This week, you should be wrapping up milestone four, which is due today. So make sure you get that submitted on time and it’s ready to be graded. Then this week, you’ll be working on the week six lessons which are due this Friday. And then Monday, you’re going to have another milestone, which is milestone five. So start working on that as soon as you can.

Week Six is all about a lot of different things related to full stack web development, we’re going to introduce user authentication. So how do we actually authenticate our users with a password? How do we keep track of sessions and roles, so we’ll see a lot of that. We’re going to start talking about web API’s a little bit, we’ll also look at things like web hooks, how we can automatically deploy stuff and send stuff to another web server. And we’ll start talking about web frameworks. And so you’ll start looking at different ways you can build your website. And then this week, we’re going to continue the blog tutorial where you’ll have the last few bits of the blog tutorial, once the blog tutorial is done, you’ll have a full stack web development project under your belt. And then we’ll use a lot of that over the last couple of milestones to wrap up this course.

Milestone five is obviously about adding authentication to your app. So you’re going to need to add all of the forms and routes to manage logging in as a user logging out as a user creating a new user, you’re also going to protect a few of the routes. So the logged in users can do certain things that unauthenticated users can’t do. When they create a request, you’re going to actually linked that request to the user itself. So only logged in users can add requests and the request itself will be tied to that user. This will involve some database changes. So make sure you’re very careful. Make backups of your database if you need to, for those of you in CC 515 that maybe haven’t had a database course, if you get stuck on the database changes, let me know. And I’m willing to help you a little bit on that so that you can get past that and get working on this milestone. So that’s really it for this week.

As always, if you have questions you can keep in touch on Discord, I have time office hours on Tuesdays and Fridays, you’re welcome to join and just hang out while you work on assignments. I do one on one office hours via Calendly. So if you need any help in person, you can schedule a zoom time with me on Calendly. My all of my times are available there. Other than that, you’ll be working on users and passwords. Hopefully you know that you should make your passwords pretty complex. So don’t use 12345. Especially if it’s the same number on your luggage. Good luck this week on adding user authentication to your milestone. As always, if have any questions, let me know and I look forward to seeing you again next week.

Milestone 4 Overview

Video Script

Hi, everyone, I’m getting a lot of questions on milestone four. So I wanted to take just a minute and show you what a model solution looks like just so you can visualize in your head what this should be doing. So this is my model solution for milestone for the first three parts of the milestone are really just about switching your application over to be an Express app, and then getting the existing homepage to work. And so I was able to reuse my index dot HTML and site.js from previous milestones, all I really had to do was change it so that instead of serving the box locations dot json file, we want to serve box locations from the database using an express route. And so this makes a JSON request to box locations as a route and express that will read data from the database and send it back. But the rest of my front end stays the same, the rendering code and everything in site.js stays the same. The big differences, this is all client side rendered instead of server side rendered, which you have to keep in mind, especially as we start moving into the new database. But the big thing that you’re doing here is once you have this index page rendered, we want each of these to be clickable, somehow, you can make a button where you can just make the whole div clickable. And then when we click on this, this is what goes to what are points four, and five, where you’re going to make a table in the database, and you’re going to make a templates, using either EJS or pug or handlebars, whatever you’re comfortable with. But you’re going to make a template at the URL box locations ID that will show information for a single box. And it will have information below for the requests for that box. And so once you get the requests working, you’ll have a list of requests that have been requested here. So you see there’s a request for birdseed in this box. And then if I want to add another request, such as let’s say we want ice cream, I can add ice cream here and hit submit. And it will submit in the background to that box locations slash one slash requests. And it will add that to the database redirect me here. And now I see ice cream here in this requests. So that’s really what you’re trying to do with this milestone, there are a few different parts, I really recommend starting by getting your homepage working again, by just setting up that box locations route that it will actually be able to request via JSON. You’ll notice here it takes a little bit of time to actually request it because I’ve got things running on my machine right now. But get this working. So your homepage still works the way it was, this can still be out of your static file client side rendered. You don’t need to make a template for this. But then when you click on one of these, it should make this out of a template. And then you’ll also have a requests form here where you can make a request submit it and it will keep track of that request. So make sure you work on that. If you have any questions let me know