Summer '22 Week 1

Resources

• Slides

Video Script

Hello and welcome to the week one Announcements video for CIS 526 and CC 515 in summer 2022. These announcements videos are going to be a little bit more unscripted than what you’re used to. So please bear with me as I work through all this content. My name is Russell Feldhausen. And I’ll be your instructor for this semester. My contact information is shown here. It’s also on the syllabus, it’s on the canvas homepage, it’s very many places. If you have any questions, you can email me my email is russfeld@ksu.edu. Email is generally my preferred method of communication if you need to chat with me directly. But as I’ll talk about in just a second, we’ll most likely use discord for most things in this course.

So the course structure itself consists of gated modules on Canvas, there are eight modules consisting of eight weeks worth of content. So you’ll work through about one module per week, please make sure you go look at the modules and check the due dates, there are items inside of the modules that are due at various times throughout the week. Generally, a lot of the tutorials and activities are due on Fridays. And then the milestones are due the following Monday. So make sure you keep on top on top of that there’s a ton of content to work through. So check the due dates on canvas. But like we said, There’s eight modules, there are six milestones that you’ll be working through. Most of it’s going to be posted on canvas. By the time you see this video, I’m still working on the last couple of weeks worth of content. But hopefully it should be posted soon enough so you can get started.

In this course, we’re going to be using Codio. Codio is an online integrated development environment for education. It’s really, really handy for learning web development. It gives you access to a full Linux virtual machine on the web, and you’ll have root access to that machine. So if you need to install or configure anything, you sure can. However, we’ve already provided a standardized environment with all of the tools and libraries that you’ll need already pre installed. So most of the time, you don’t have to do much of anything to be able to do your work. The other nice thing about working in Codio is it gives me as your instructor direct access to your homework. So as you’re working through an activity or tutorial, or even one of the milestones, if you have a question, you don’t have to send me your code or screenshots or anything like that. Just tell me what assignments you’re on. And I can go load up your code your project and see exactly what you’re seeing and help you work through it and debug it. I can even see as you’re typing and changing code. And so it works out really, really well. So please take advantage of Codio and use it throughout this course, it really does work well for this particular class.

We’re also going to use GitHub classroom, the only assignment we’re going to put in GitHub classroom is the milestone. But by doing so it gives us some centralized organization for all the Git repos that we’re going to create. It also creates a feedback pull request, which I can use to give you feedback on your code and style in your projects. And it helps us by keeping your code private within that organization until the end of the semester, you definitely don’t want to be the student that has an open repo, and then somebody starts stealing your work. And then we run into academic integrity issues. So we’ll use GitHub classroom. You’ll see that later on in the first milestone, but most of you are probably already familiar with it having gone through either CIS 400 or CC 410.

So like I said, for communication in this course, the primary place we’re going to do that is in discord. There’s a channel already created on the computer science Discord server for this class. So anytime you have questions in this course you want to discuss anything you’re having trouble with particular assignment. Start out by asking questions in discord. That’s by far the best way to do this. It allows me to answer questions quickly and easily. You can post little code snippets or screenshots, if needed, and other students can chime in and they can see the answers that I give. So Discord is by far the best place to start. If you have any personal issues or grading questions or any to do’s for me, then please email me directly. That way it comes in my inbox, I use that as my to do list. The thing that I will say is email is the official version of communication for this course. And so if you send me an email, I will strive to respond to it within one business day. However, Discord is much more flexible and easier to use. And so I think for most communication in this class, we’ll do discord. But if you don’t get an answer, or you need anything specific, you can always email me and I will respond to it there.

So one big thing to keep in mind in this course, is how to be successful. First and foremost, I really want you to come into this course with a growth mindset. You can learn how to do this, it might be a little tricky, but come in with the knowledge knowing that you can figure this out and be willing to learn and change is a big part of it. So coming in with that growth mindset is super important. The other thing that is super important in this class is not to just read and watch the stuff that you’re doing, but to actually engage with it. For example, a lot of this course consists of activities and tutorials that you work through and co do. And we give you most of the code, you can actually complete the tutorials just by copy pasting code into the right file, hitting submit, you’ll complete the tutorial. However, if you don’t engage with that code and try and write it yourself and understand exactly what lines of code you’re using. You’re not actually learning anything. You’re just copy pasting and so I can get in Do I work through an entire week’s worth of content in this class in about four hours just by copy pasting content, because I needed to check the auto graders to make sure they worked. But I didn’t learn anything. So it really is imperative that you take the time to engage with the content, understand every single line of code and every single function that you’re writing. So that you can then do that yourself. When you get to the milestone, it’s really, really hard. If you just skim through the content, complete the assignment, and then get to the milestone, and you haven’t really learned anything. Another big thing I encourage you to do in this class is to work iteratively, a lot of the milestones will have five or six different things you’re working on, try and pick one and work on it till completion, before you get to the next part, you can work iteratively test and check your work. Don’t try and build the whole thing and then run it and see if it breaks. The other thing you can do, especially since we’re using Git in this class is to save your work early and save it often commit to GitHub, every time you work on something on the project, you can always roll back to a previous commit if you need to. So make sure you’re committing early committing often. And then finally, in this course, don’t be afraid to ask for help. This course especially we’re going to push you a little bit and try and get you to do some things that you’ll need to do a little bit of research to figure out how to do it. And we expect you to be able to do that. But there are times when you’re going to get stuck when things are not going to work. And so I usually tell students, if you’ve been spinning your wheels on a problem for about an hour, and you’ve been doing some searching and you’ve tried different things and you haven’t gotten past it, that’s a good time to take a step back, ask for help and get some inputs. The thing that I hate to see the most is students to spend five or six hours trying to solve a problem. And then when they ask for help, it turns out that it’s an unsolvable problem to begin with. And so it’s always worth taking the time and asking for help. If you get stuck, I’m always here to help you out. I’m going through the projects exactly the same as you’re going through them. And so I’m happy to help you anytime you have a question.

So throughout this course, we’re going to work on a large web development project called Community Chest. The idea behind Community Chest is kind of like the blessing boxes or some of those lending libraries that you’ve seen, where you have a location where people can put items that other people in the community might need. So we’re going to track those throughout the semester. There are six milestones to this project, most of the milestones focus on the functionality of the website. So being able to render a page that has certain content on it, being able to accept data via forms and stored in a database. So most of the milestones are around the functionality of the website. However, because this is a web development course, your style and design does count. So not only the the visual style of the website, but the coding style, making sure you’re taking advantage of the features of cascading style sheets and building JavaScript modules. And not you know, copy pasting code everywhere, you’re actually thinking about the structure and the content of your webpage. So like I said, mostly we’re looking for functionality, but style and design do count. And you’re more than welcome to make this your own. You can spend lots of time on the design in this course, and really make it functional and beautiful. And also bear in mind that the final milestone does have a 20 point bonus on it for really good looking websites. So it’s worth your time to take your time and actually build a useful website. For the milestones themselves. You can use external libraries in most of those milestones. So make sure you read the bottom what you can and can’t use. But if you want to use a CSS library, such as Bootstrap, or a JavaScript library, such as jQuery, look at the milestones, make sure that that’s allowed. And of course, if you have any questions, you can ask me anytime.

So that’s really all the content you need to get started on this course. Throughout the semester, I highly encourage you to keep in touch by following the discussions on the discord channel, you, you one of your first assignments is going to be introducing yourself on Discord. So make sure you get that done soon. Another thing that we do throughout the semester is we will have tea time office hours. Tea Time office hours are Tuesdays at 3:30 and Fridays at 10:30. The whole point behind tee time office hours is it’s a time for us to get together and talk about anything except the class that you’re working on. Typically, it’s myself and a few other faculty members at K State where we just get together and we hang out while we work on stuff. Sometimes we have other students or alumni or industry folks stop by. So it’s a great time if you just want to hang out chat with us. Even if you just hang out in the background and listen to what we’re talking about while you work on the assignments. You’re more than welcome to join us for tea time. Again, that’s on Zoom Tuesdays at 330 Fridays at 1030. You’ll get the link via discord. And then finally if you have any questions you can schedule a one on one office hours with me using my Calendly link. It’s on the syllabus it’s on the course homepage on canvas. That’s your easiest way if you want to get one on one office hours with me. However, I encourage you to try and work on it on your own and work through discord first and only schedule office hours if you really feel like you need that interactive work with me. I do reserve the right to limit my access to Office Hours in case it becomes a problem.

So other than that, best of luck to you on this semester. That should be everything you need to get started on the first module. I will strike have to post announcements videos about once per week so watch for those usually on Mondays as always if you have any questions you can reach out to me on Discord you can find me via email and I will look forward to having you in this class this semester Good luck

Summer '22 Week 2

Resources

• Slides

Video Script

Hello, and welcome to the week two announcements for CIS 526 and CC 515, in summer 2022. So this week, you should be wrapping up milestone one, which is due tonight by midnight. So make sure you get that turned in and submitted, you’ll be submitting it via GitHub. So you’ll actually post your code to GitHub classroom, make sure you make a release tag or something there. And then in Canvas, you will submit that you can also submit your Codio we’ll be doing it that way as well. So there’s a couple of different places I’ll be able to find your code, but hopefully it is both in GitHub, and in Codio that I can find it. This Friday week two lessons are due, there’s four or five different interactive lessons this week. So make sure you work on those maybe set a goal to do one per day to get those lessons done by Friday. And then next Monday will be Milestone Two, which we’ll talk about here shortly.

So for this class milestone grading, I will try and take care of grading the new milestones milestone one this week, one thing I want to do is I will take a look at your code and try and give you some code comments on GitHub. If I see anything that you can improve on or anything that you might do a little bit differently. Or if I see something that you do, that’s really cool that I like, I will try and leave some comments. If you have anything in particular you want me to look at and give feedback on, you can put that in the submission comments on Canvas, or you can put them in the release notes in GitHub, when you actually create a release. I’ll try and look for those there. You can also send them to me on Discord or via email. But if they’re in the submission comments, or the release notes, I will probably see them as I’m doing my grading. The other big thing to keep in mind for the milestone grading is please be patient. There are 20 something of you. And there’s only one of me, and this is one of two classes I’m working on this summer, and I’ve got another side project I’m working on. So it may take me a few days to get through the milestone grading each week. I’ll try and do a few each day. But please be patient and just bear with me as I get through this milestone grading because it is a lot, especially as the milestones start to get larger later this semester.

So this week, week two, we’re going into advanced JavaScript in this class, we’re going to start by learning a little bit of JSON, javascript object notation, and AJAX, Asynchronous JavaScript and XML, although that’s really a misnomer, because we really don’t do XML. It’s more AJAJ a synchronous JavaScript and JSON these days, but it was originally designed for XML. We’ll also talk about Asynchronous JavaScript, you’ll learn a lot more about asynchronous languages and using the await and async keywords in JavaScript. We’ll talk a little bit about Web Workers and how we can spawn off a separate thread in our websites. And then we’ll start introducing Node.js and some of the ways that we can use JavaScript to write a back end server in the web, which leads to some of the later milestones. So moving on to talk about milestone two in this milestone, you’ll basically be redoing milestone one. But this time, you’ll be automating it in Milestone One, we actually hard coded all of our box locations and information into our web page. In milestone two, you’re going to use JavaScript and AJAX to get those box locations as a JSON file off of a web server. And then you will programmatically build your web page using that data. Other than that, you can use the same overall design as before. So a lot of your boilerplate code from your index dot HTML and from your site dot css will be repeated in this project, you’re just working on the JavaScript part to automate that.

You may run into a couple of issues with this project. The first issue is CORS or cross origin resource sharing. If you try and request a JSON file from another website that will actually be blocked by AJAX unless that website explicitly allows it. Generally, this is not a problem if you’re working in Codio because Codio allows CORS, and so we don’t have to worry about it there. So if you’re doing all your work in Codio, and you’re loading your JSON file directly from Codio, you shouldn’t have to worry about any CORS issues. However, if you do want to test this outside of Codio, if you’re working on this code on your local machine, for example, a lot of web browsers will not allow you to make an AJAX request against your local machine’s file system, you actually have to set up a web server. And so to get around that, in the instructions, I have posted the JSON file on my personal website on the CS Linux server, and it does allow CORS from anywhere. So if you want for testing only, especially if you’re testing it outside of Codio, you can start by using that URL to load the box locations. However, when you submit it, it should be working as it is in Codio. So it should be using a local URL to load your own copy of the box locations dot JSON file. But for testing only you can use the test one that I have put out on my website. The instructions are in the milestone details that you can find in Codio.

The other thing to note on milestone two is you are allowed to use external libraries in that milestone, if you so choose. We do not cover any of those libraries in this class. But if you are familiar with libraries, such as Bootstrap, or jQuery, you’re more than welcome to use those in the milestones. If you want to learn those libraries, this is a good opportunity to do that. However, I highly encourage you to think very hard about that because the learning curve for some of those libraries can be more significant than actually doing it by hand. And so especially for, in my model solutions that I was building this summer, I actually wrote both milestone one on milestone two in two different ways. I wrote them using completely raw JavaScript and no libraries in CSS. And I wrote them using Bootstrap and jQuery, just to see the difference. They were about the same level of complexity. But that’s assuming that you really know what you’re doing in jQuery and Bootstrap as far as building out the, the JavaScript and CSS required for those libraries. So it’s up to you if you want to use those libraries or not. Just for clarity, I’m most familiar with jQuery and Bootstrap if you want to use other libraries, specifically, the Tailwind CSS library, or there are several other JavaScript libraries out there. I will do my best to keep up with those. But my background is mostly in jQuery and Bootstrap. So those will be the ones I will be most likely to help you with, if you have any questions.

So that’s all I’ve got for this week. If you have any questions you can keep in touch, we’ve got our discussions going on Discord, it’s been great. Feel free to keep posting there and answering questions. I’m also available at tea time office hours, which are Tuesdays at 330 and Fridays at 1030. You can come join us work on your homework, just hang out whatever you want to do. We’ll be there all summer. And then of course, if you have any questions, you can schedule a one on one office hours with me via Calendly. Again, my time is kind of limited the summer I’m hoping to do as much as I can via email and discord. But if you need some one on one time with me feel free to schedule some time via Calendly. So that’s all I’ve got for this week, I’m actually reusing this gift for my system administration class announcements that I did earlier this morning, because I noticed that there’s really a way that these classes have synced up where we’re basically redoing the first project again, but this time, we’re adding automation and system administration, we’re automating building out virtual machines. In this class, we’re automating building websites using JSON files. So it’s really kind of interesting how these two classes have synced up. But I hope you can understand why we’re doing this while we’re actually trying to build our websites programmatically instead of statically. And that will help lead into the later part of this class where we actually start working on real full stack development. So as always, if you have any questions, let me know otherwise, good luck this week, and I will talk to you all again next week.

Summer '22 Week 3

Resources

• Slides

Video Script

Hello, and welcome to the week three announcements video for CIS 526 and CC 515 in summer 2022. So this week you should be working on milestone two it is due tonight. So make sure you get that turned in and submitted. As before. I’ll work on getting that graded and I’ll talk about that in just a second. This week, you’ll be working on the week three lessons, those are all due on Friday. And then next Monday, you will be turning in milestone three.

So once again, this week, I’ll be doing some milestone grading. Hopefully everybody saw their grades for Milestone One, including the comments in GitHub. That’s pretty much how we’ll be doing things throughout the semester, I usually will try and leave code comments and GitHub for anything that I see that you can work on improving there, the actual grading comments will be left in co do. And then in Canvas, you shouldn’t see a link that you can click to go to the grading feedback in co do to see any grading there. If you have any comments or questions on the grading, please let me know. And if there’s anything you want me to know, or want me to look at, in particular, you can use the comments on the submissions in Canvas, or you can put those in the notes somewhere in GitHub, and I should be able to see those. Please be patient with me as we do the milestone grading the first couple of milestones should go pretty quickly. Later, milestones are much more involved. And it may take me a few days to get through grading all of them. But I will try and get them graded within a few days after they’re due. So you’ll have enough time to work on them for the next week’s milestone.

So this week, we’re going into week three, we’re going to start talking about web servers in node.js, you will be looking at the request response cycle in node. So you’ll see a request coming in and then you’ll be building the response to get sent back out. We’ll learn how to serve files and serve media, we’ll talk a little bit about streaming media and things like that. And you’ll also have a quick crash course in regular expressions, which are really important to parse some of the things that we get with the request that comes in via node. So in milestone three, what we’re going to do is take our existing project that we’ve been working on the last two milestones, which is just a static HTML file. And we’ll be pivoting that so that we’re serving the static files from node. So instead of using the built in web server and co do, we’re going to actually build our own web server and node to serve those static files, your server should handle MIME types correctly, it should give the correct content length, it should also give 404 errors if we try and access something that is not present in that static folder. And then beyond that, it should basically handle everything from milestone one. And twos will need to correctly serve HTML, CSS and JavaScript files as well as that box-locations.json, so that all of that works correctly, you’ll also be adding the favicons into this project. So you’ll have those icons that show up in your browser. But basically milestone three, when it’s done, it should look and work exactly like what Milestone Two does, except this time it’s being served from node. Thankfully, if you go through the tutorials and get everything working there, most of milestone three is just pulling those parts out of the tutorials, getting them integrated into this project and rebuilding that from scratch here. So a lot of it is just copy pasting stuff and adapting it a little bit from the tutorials earlier in the week. It shouldn’t be that terribly difficult. But you may have to do some debugging if you’re not really careful about how you bring it into your content.

So that’s really all I got for today. Otherwise, you can keep in touch. We’re having great discussions on Discord. So you can always ask questions and get feedback there. You can join me for tea time office hours, which are Tuesdays at 330 and Fridays at 1030. You can schedule a one on one office hours with me using my Calendly link that’s in the bottom of all my emails and my email signature. You can also send me an email anytime you have questions. I’m happy to help. We’ve got lots of ways that you can get help in this class. And of course, if you discuss in this court and you help some of your fellow classmates, you can get some of those Helping Hand bonus points. So other than that your focus this week is building a web server that hopefully won’t crash ever. You’ve got to be able to handle all those errors, handle 404 errors get that content served up correctly. And if you do that you should be in good place to work on the next few milestones, which will really start ramping up the complexity of our web server in Node.js. So best of luck this week. I look forward to seeing all your milestones and I will talk to you again next week.

Summer '22 Week 4

Resources

• Slides

Video Script

Hello, and welcome to the week for announcements video for CIS 526 and CC 515 in summer 2022. This week you should be wrapping up milestone three, which is due tonight. So make sure you get that submitted online. And then this coming week, you’ll be working on the week four lessons. There is no milestone due this coming week, because partially we have the Fourth of July holiday on Monday. And also partially because we’ve got a lot of content to cover. So you really have two weeks of content before the next milestone, and we’ll talk about that in just a second.

So first off, I will be working on milestone three grading this week. So make sure you keep an eye out for that. Look for code comments from me in GitHub for any usual things about code that you can improve. I’ll also leave comments on the actual assignment details themselves in Codio that should also feed over to Canvas. If you have anything in particular you want to ask me about, you can use submission comments, or put it in your release notes on GitHub. Either one of those is helpful so that I know what I’m looking for. As always, please be patient with the grading all of this grading is done manually. And especially this week. And going forward. As the milestones get larger, it will take me more and more time to grade each individual one, I do try and take some time and read through a lot of your code. So it may take me a couple of days to get through all the grading. So please be patient and I will get back to you as soon as I can.

So coming up this week, you’ll start to work with dynamic web servers. So you’ll be doing things such as working with server pages written in ECMAScript, you’ll be looking at file uploads and sessions. And then eventually leading into week five, we’ll start doing a tutorial on working with a block. And so that blog tutorial is really the core pieces of what you’re going to need to work on the next milestone, which is milestone four, milestone four, we’re going to take your app and refactor it once again, this time, you’ll be building it as an express.js app. So you’ll need to add routing through Express, you’ll be adding things such as the static middleware, you’ll be adding API endpoints to actually read the box locations from a database this time. And so you’ll also actually be making some changes to the database, you’ll be working with dynamic pages that you’re actually going to submit using templates. And you’re going to have a form and submit data from a form that gets put into the database. So this is really taking your app to the next level. It is a two week milestone, which means you have two weeks to work on it, I highly encourage you to try and get through all of the tutorials pretty quick this week and early next week. So you’ve got plenty of time to work on this milestone, this milestone four is significantly more complicated than milestones three and earlier. So make sure you allow plenty of time to work on milestone four. As always, if you have any questions with this, let me know I understand for some of you, especially in CC 515, you may not have a ton of database experience at this point. So if you do get stuck on the database, let me know. And I can give you some quick hints of how you can do a little bit of the SQL that you maybe haven’t seen before. For those of you in CIS 526. Hopefully you’ve already taken 560 or in 560. And so you have seen some of that content already. But I do recognize the databases are a little bit outside of scope for this class. So if you need a little bit of help getting the SQL lite database to work, let me know.

So other than that I’m always available for help. We’ve got discussions on Discord that we can always chat. I have tea time office hours every Tuesday 330 And Fridays at 1030. If you want to come hang out while you work. You can also do one on one office hours by scheduling time with me on Calendly. You can send me an email, I’m happy to answer questions as much as I can. But basically keep in mind you got two weeks to work on two weeks worth of content, but you have a doubly-sized milestone that is really big and difficult. So make sure you give yourself plenty of time to work on milestone four. So we’re really switching over to start working with data and using some data driven website techniques. So you’ll have a database that you’re working with, you’re actually going to build a responsive API that builds on the RESTful API standard. So we’re really moving into more data driven websites. I hope this next milestone really helps open your eyes to how full stack web development really works. But as always, if you have any questions, let me know. I wish you the best of luck and I will see you again next Tuesday.

Summer '22 Week 5

Resources

• Slides

Video Script

Hello, and welcome to the week five announcements video for CIS 526 and CC 515, in summer 2022. So this week, you should be working on week five, which is the second of a two week series that leads up toward milestone four, where we really shift our focus from static websites and a little bit of Ajax in the browser to full on dynamic websites using Express and all sorts of things around that. So it’s a big shift, it’s a two week milestone. So make sure you give yourself plenty of time to get working on this milestone. A big hint for me is if you start milestone four on Monday, you’re probably not going to get it done and turn it in yet that day, it is quite a bigger project than the last few milestones.

So this week, you’re going to start learning a little bit more about full stack web development, we’re going to cover template rendering, which is all about taking the ECMAScript templates that you learned last week. And expanding on that a bit. We’re going to talk about data serialization and databases, how we can actually store data that is submitted to the website and then pull that back out and use that to render our pages, we’re going to look at routing, how we can take the URL and use it to determine what functions or what templates to actually render. And then you’re going to start working on the blog tutorial. And so this week next week, there are a series of tutorials where you will build an interactive blog. And it’s really sets the stage for all of the full stack web development stuff that we’re going to do in this course. So the blog tutorial really gives you a lot of the code that you’re going to want to pull into the milestone as you work on the next milestone.

So again, for milestone four, we’re going to be pivoting our project into an Express app, we’re going to be adding things like routing and the static middleware to handle some of those features, you’re going to have various API endpoints for getting the boxes and getting information about the boxes, you’ll have an SQL lite database that stores all the information from now on. And then you’re going to build some dynamic pages that are actually rendered on the server and then presented to the user. And you’re going to handle some form submission and actually storing data in the database. So again, it’s a much more fully featured web app than the previous milestones, but it is a lot more complex. So make sure you keep that in mind.

That’s really all I’ve got for this week. As always, if you have questions or concerns, you can chat with me on Discord anytime you can join Tea Time office hours, which are Tuesdays at 330 Fridays at 1030. You can schedule a one on one office hour with me using my Calendly link, you can send me an email, I’m always here and happy to help so if you ever have questions or you get stuck on something and you need a little bit extra help, please let me know so that I can help you out. Otherwise, I hope things are going well this week. I hope you’re not pulling your hair out too much with a really large milestone, but it does take a little bit effort. So make sure you keep that in mind. Hopefully have good luck with this milestone. As always, if you have any questions, let me know. And I will see you next week.

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

Summer '22 Week 7

Resources

• Slides

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

Video 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.

Summer '22 Week 8

Resources

• Slides

Video Script

Hello, and welcome to the week eight announcements videos for CIS 526 and CC 515 in summer 2022. So this week, you should be wrapping everything up in this class, you’ve got the week seven and eight lessons which are due today, you’ve also got the milestone six, which is due on Friday, and you should be receiving TEVALs later this week. So don’t forget to fill those out as soon as you receive those.

For week seven, and eight, remember, we’re working on things like Single Sign On, CAS authentication, and then you do a project using ASP.net and React just to see some other frameworks in the web development world. And then for milestone six, you’ll be adding a bunch of features to your ongoing project involving fulfilling requests, setting up user roles and doing user management, you’ll also add the ability to create new boxes if the user has the appropriate role. We’re also going to be focusing a little bit on the aesthetics and usability of your project. And this milestone is worth 200 points. So it’s double the size compared to the previous milestones. So make sure you spend a lot of time working on milestone six, get it all finalized and finished. I’ll try and work on grading it over the weekend so that you’ll get feedback early next week in time for grades which are due early next week as well.

So when we’re talking about the aesthetics and usability of your site, we’re really talking about things like having a consistent look and feel across all of your pages, including your login, logout pages, your signup pages, you’re really trying to minimize the clicks that the user has to do to perform a particular action, you might think about things like smart routing, one of the things that you could do if you work with it a little bit is actually be able to log in and take the user back to the page that they were when they clicked the Login button. There’s some routing tricks that you can do there, you can add some helpful labels and errors will definitely check your site to make sure the different error messages make sense. You can use a tool such as font awesome to add iconography to your website so that it’s really usable. You can add context so that users know what page they’re on what navigation they’re at. You can add breadcrumbs, how they Log In Log out lots of different things, you can do that. And you can look at adding things like hover animations, if they hover over a box, you can have an expand, you can have their mouse change. There’s lots and lots of CSS that you can do as well to increase the usability of your website.

That’s really all I’ve got for this semester, we’re wrapping things up, there’s not a whole lot left to do except work on the milestone. Don’t forget to fill out your TEVALs. Like I mentioned, you will get TEVALs later this week. That information is really helpful for me and for Nathan as we continue to update and improve this class. So any feedback you can give is very helpful. We’ve got discussions on Discord, you can join me for tea time, I’ll be there Tuesdays at 330 Fridays at 1030. Even as we go into the semester, we may look at changing that schedule a little bit, we’ll just see how things go. And you can also always use Calendly to schedule a one on one office hours with me. So let me know how I can help.

Other than that my work is done. We are at the end of the semester. So all you got left to do is get milestone six taken care of get it submitted to me so I can get a graded watch below this video. There should be another video that actually goes through the model solution for milestone six and shows you a little bit of the functionality that you’re supposed to add. It’s not going to show everything but it gives you an idea of what that milestone will look like so best of luck to you. I wish you all the best getting this milestone taken care of if you have any questions let me know otherwise, good luck.

Milestone 6 Overview

Video Script

Good morning, everyone, I want to take a minute to talk through the milestone six model solution. This just gives you an idea of some of the functionality that you may want to work on in this project. So it’s not meant to be inclusive, please make sure you read all of the project description, it really tells you exactly what your milestone needs to do. But this gives you some have an idea of the functionality. So right now I’m logged in as a normal user. And notice up here, I just have a home link, I don’t have anything else. But I do have the requests form because I’m logged in as a user. And so here at the zoo, I can request some bird seed. So I’m going to request I want some bird seed. And then once that has been requested, if somebody else comes in and puts bird seed in that box and wants to mark, that request is fulfilled, I’ve got a little link right here, that when you click on it, it will mark it as fulfilled. So that takes care of fulfilling all of these requests. The other thing that you’ll need to do is you’re going to create some routes for dealing with user management.

So if I log in as my other account, this account has been given the admin role. So you’ll notice up here, they have two different other links, I’ve got a link where I can create a new box that will create a new box added to the database, it will show up on the screen. And I’ve got a little page here where they can manage users, including editing users, setting them as an admin, things like that. So there’s a lot of different functionality that you can add around that. And just adding the users the roles getting all of these navigation links so that they show up on every page, even if that user is logged in, or logged out, that really helps out a lot. So that’s a really quick overview of all of the different new functionality in milestone six, there’s a lot to it in the milestone itself. So make sure you take a look at that. But the big things are getting the box requests. So they can be fulfilled by anybody creating an admin role, and then giving that admin role, the ability to add new boxes and to manage users. Those are really the big new things. And then of course, we’re looking at the functionality of your webpage. You know, for example, if I go to a box, I now have a back button that I can use to go back to the main page so I can navigate without having to click the back button in my browser. So that gives you some ideas of things you can look at. As always, if you have any questions on milestone six, just let me know