Spring '23 Week 1

Resources

• Slides

Video Script

Unknown Speaker 0:05
Hello, and welcome to the week one announcements video for CC 515 in spring 2023. My name is Russell Feldhausen. And I’ll be your instructor this semester. My contact information is here in the slide, you can also find it on canvas and you can find it on the syllabus. The big thing to be aware of is I mostly work remotely from my home in Shawnee, Kansas, which is near Kansas City. But I am on Campus, usually every Monday, this semester, most of you may be remote as well. And that’s fine, I’ll mostly meet with you via zoom, it should be pretty easy. You can contact me the easiest way to get me as russfeld@ksu.edu. But I also exist on the CS Discord server and on K State instance of Microsoft Teams, so you can find me there as well.

So this course is all about learning how to do web application development using tools such as JavaScript, Node and express JS will also work a little bit on the front end, but not a whole lot. You’ll learn some techniques such as Ajax and eventually how to build an actual web application following the model view controller paradigm. There’s a lot of cool stuff that we cover. This course is structured via gated modules on Canvas, there’s roughly one module each week. Since this is normally a summer class that we’re stretching it out through semester, it’s maybe one module every other week, check the due dates for the modules, everything should be posted, all the due dates are out there. And mainly this class is taught through a lot of activities and interactive tutorials. And then there are six milestones where you get to apply what you’ve learned and build your own web app.

So in this course, we’re going to use Codio most of you are probably familiar with Codio an online Integrated Development Environment backed by a Linux virtual machine. The nice thing about Codio is it gives us a very standardized environment for web development. And it gives me as the teacher access into your code so I can help you test and debug things. Codio are really does make teaching this class so so much easier than it used to be. So I highly encourage you to dive in headfirst with Codio. And take advantage of all the tools that it provides. This class, we’re also going to use GitHub classroom hopefully you’re familiar with that you’ve probably seen it in an earlier class at this point. It provides a lot of centralized organization for the class, it allows me to respond to your code via feedback, pull requests, and then you can keep your code private while still sharing it with me so I can see what’s going on. So in this course, there’s a few different methods of communication. We’ve got discord, which is a great place to ask questions about the course have discussions, anything like that, there’s already a channel created on Discord for CC 515, it’s co listed with CIS 526, which is the same course. So feel free to take advantage of discord and use it wherever you can. The one of the first assignments in the course is to actually get on Discord and introduce yourself to the class. So make sure you do that there will also have email, you can email me if you have any personal issues, grading issues, anything that you’d like me to do, etc. Please feel free to email that to me. As I tell a lot of students email is the official communication of record for this course. But Discord is a little bit more flexible, if you’d like to use that.

So here’s some tips for success in this class. First and foremost, you have to come into this class with a growth mindset, you have to be willing to learn and you have to understand that you can learn by doing as long as you pay attention and take advantage of all the resources you provided. When we’re teaching stuff in this class, there’ll be a lot of examples where you can just skim through the example, copy paste the code, hit the greater button, and it will auto grant and it will work. I can attest to that I was able to speed run through all of the content in this class in about 16 hours by doing that. However, I didn’t learn anything by doing that. And so to really learn what we’re trying to teach you in this class, you can’t just skim through and read and watch, you have to engage in the class. One thing I really encourage you to do is whenever we’re giving you example code, and we’re having you build the example projects, I encourage you to retype that code by hand and think about what it says maybe rename the variables, maybe reordered the code lines a little bit to really understand what it does and how it works, so that you can reproduce it later. So by engaging in that content, you’ll be able to learn what we’re trying to teach and you’ll be able to more easily adapt it and use it in your milestones. I also encourage you to work iteratively one of the big mistakes that people make on web development courses is they try and build the whole back end in one shot and then start trying to test it. And that’s really hard to do. So try and think about as you’re working how you can get to a point where you can test something, even if it’s just a simple Sunday HelloWorld on this page first, and then work from there, maybe dump a variable. So you can see that the template is getting all the variable data before you start trying to render the template. There’s a lot of cool things you can do with that. You can use both the terminal encoder as well as the console in your web browser, such as Chrome to see some of those debugging outputs. So take advantage of that work iteratively. And then of course save your work early and often. You’ve got access to get I expect you to commit to get every time you get something working so that you can roll back if you make a mistake and go back to a known good state. Every milestone you should have multiple commits to get I really encourage students to take advantage of that. And then of course, the last big thing you can do is if you get stuck in this course ask for help. I do don’t expect anybody to go through a 500 level computer science course and not get stuck and ask for help. At least once we do build these courses to really stress you out a little bit and try and get you to learn, the only way you can really learn is by having those moments where you have to overcome some difficulty. But if you do get stuck, don’t be afraid to ask for help. A good methodology to think about is if you’re spinning your wheels, and you haven’t made any forward progress in about a half hour of trying, that’s a good opportunity to take a step back, ask for help and get unstuck, so you can keep going.

So in this class, one of the things you’re going to be working on is a milestone project. It’s called Community Chest. There are six milestones for this project. The first couple of milestones are pretty easy. If you’ve got a decent background in static web development, the last four milestones add a lot of functionality to that. We are focused mostly on functionality for this, I don’t care quite as much about design, but style and design do count. There are some things in the milestones where your design should be functional, it should be flexible, and it should automatically adapt to things such as the browser width. So that works both mobile and on a desktop browser. However, you can make it your own. If you want to add additional style css, if you want to change the fonts a little bit, add additional functionality, as long as we can see the core functionality we’re looking for. Feel free to embellish this project as much as you’d like to really demonstrate your skills and to just practice with some new stuff.

So other than that, if you have any questions in this course, I encourage you to keep in touch, you can have a discussion on Discord, you can create a zoom discussion using the Calendly link that you’ll find either on canvas or in the syllabus. I also host Tea Time office hours, which is every Tuesday 330 and Friday at 1130. myself along with David Invirgo, one of the CS advisors, we host tea time, it’s a great time to get together meet with faculty, staff, and fellow students talk about life, the universe and everything are just hanging out while you’re working on homework. So I encourage you to attend t time if you’re interested. And then of course, you can also schedule a one on one office hour with me anytime using Calendly. So that’s all there is for this class. Right now I’ve only got two people enrolled in this class. We’re doing this as kind of a little special enrollment for students that need it so they can graduate on time. So there’s not a whole lot going on with this class. Most likely I won’t post regular announcements videos, I may post a few throughout the semester just right after the milestones is a quick check in. I encourage you to keep in touch with me maybe meet with me once in a while just to check in and see how things are doing. If you have any questions, feel free to email me anytime. Otherwise, I will mostly be in touch via email and via feedback on your work throughout the semester. But I look forward to seeing all the work that you do and I hope you have a really good time in this class. So good luck and I look forward to talking with you in a few weeks.

Spring '23 Week 3

Resources

• Slides

Video Script

Hello, and welcome to the week three announcements video for CC 515 in spring 2023. This week you should have milestone one completed it was due yesterday. So hopefully you’ve got that turned in. If not, please make sure you do that as soon as you can. This week, you’ll be working on the lessons for the week two module in Canvas. And then the following week, you’ll have a week to work on the second milestone, which is due Monday, February the 13th. So the first milestone that will take care of grading this week, basically look for code comments in GitHub. And then I’ll also leave some comments in Canvas as well. If you have any comments that you want to leave for me, you can use submission comments in Canvas, or you can make release notes in GitHub for that, it may take me a little while to go through this milestone just because I really want to come through the code and make sure everything’s looking good. So please be a little patient as I go through the milestone grading. But hopefully it should be done within a week of you getting it submitted. So watch for that. And you’ll see those comments coming through on GitHub and on Canvas as soon as I get that done.

So for the second week, we’re going to shift gears and spend a little bit more time talking about advanced JavaScript topics, including JSON and Ajax, Asynchronous JavaScript and XML. Although we’re really going to use JSON for this, you’ll learn a little bit about how a synchronous JavaScript works, you’ll learn to create things like web workers, and then we’ll start to introduce the ideas behind node j s, which will become the server software that we’re going to use a little bit down the road. So for Milestone Two, the big thing is you’re going to change your milestone one so that you’re getting the box locations via Ajax and querying a back end server instead of just loading a JSON programmatically, it’s really the same overall design as before, but now you’re building a web page via Ajax instead of just loading the JSON. If you have any cores issues, you shouldn’t have to deal with that in Codio. But if you’re trying to do that locally, you may run into those issues. So if that happens, let me know. And then with Milestone Two, there are some ways that you can use libraries for this. It’s really up to you if you want to do that or not, the code is pretty flexible. I’ve written model solutions, both without using libraries. And with using libraries such as jQuery to help with this. It’s really up to you in whichever method you prefer.

So that’s really all that’s going on in this class right now. As always, if you have any questions, you can chat with me on Discord, you can join my tea time office hours, Tuesdays at 330. And Fridays, 1130. You can use Calendly to schedule one on one office hours with me. I’m here to help. So please let me know if there’s anything you need. Otherwise, hopefully enjoyed this milestone. I know it kind of feels like you’re doing the same website again. But it’s really useful to iterate on the same design over and over again so that you can see the different ways you can achieve that using web development techniques. And so I hope you really enjoy this milestone and as always, let me know if you have questions. And I will see you again in a couple weeks.

Spring '23 Week 5

Resources

• Slides

Video Script

Hello, and welcome to the week five Announcements video for CC 515 in spring 2023. This week you should be wrapping up work on Milestone Two that was due yesterday. So hopefully you’ve got that done and turned in this week, you should start in on the week three lessons. The week three lessons will go for this week and next week and in milestone three is due in two weeks on February 27. So milestone grading, I will try and work on grading milestone three this week, or Milestone Two, sorry, please look for code comments and GitHub. This is one that I tend to leave quite a few comments on about code style and structure, you can always use your submission comments in Canvas, or you can use release notes and GitHub to send me any information I need to use. Please be patient, it does take me a while to get to grading this class, I know that there’s only a few students. But we’ve got a lot of things going on this semester. So I will try and get to you as soon as I can. But please look for those code comments. I’ll try and give you good feedback to help you out so you can improve for the future milestones.

So the weekly content is all about web servers, we’re going to start talking about building our own simple web servers. And looking at the request and response process that goes into actually serving data on the web, you’ll write some simple web servers that work on serving files and serving media. And we’ll also talk a little bit about regular expressions how we can use that to parse things such as the URL in the web requests that we actually use on our server to figure out what we need to serve. Then on milestone three, you’re going to shift gears a little bit, instead of serving your website statically. Through Codio, you’re going to write a small static server in node that will serve your static files that way, it should handle MIME types, it should have the correct content length, it should deal with things such as 404 errors. But basically, it has the same functionality as Milestone One and two. But now you’re serving it through a node server instead of loading the file statically directly through Codio. You should also include the favicon files, those are part of that milestone as well should be very easy to do if you have all your links in the right spot. Hopefully this goes well. But if you have any questions, let me know.

Other than that, you can always keep in touch. We’ve got discussions on Discord I do Tea Time officers, Tuesdays and Fridays. You can also schedule a one on one office hours with me if you get stuck. But the big thing when you’re writing a web server is you want to build something that is very robust that won’t crash. And so you’ll need to pay very close attention to your code. Make sure you have the correct error handlers in there and make sure you’re writing code that is very robust and will work in all sorts of situations. So hopefully have a good couple of weeks. I will see you again in two weeks. Best of luck and I will talk to you then

Spring '23 Week 7

Resources

• Slides

Video Script

Hello, and welcome to the week seven Announcements video for CC 515 in spring 2023. So this month really, you should have gotten milestone three done late last week. So hopefully you’ve got that done and turned in, I’ll be grading those soon. And then for the rest of the month of March, you’ll basically be working on the week four and week five lessons, where we’re going to pivot a lot into building our own back end servers and building more Database Driven websites. Throughout weeks four and five, you’ll be working on this large blog project as an example.

And so the next milestone is not actually due until April 3. So you really have all of the month of March, which includes a week for spring break to work on both these lessons. And eventually you’ll have the milestone due on April 3. So like I said, milestone three grading, I will work on grading those this week, as always look for code comments, and GitHub and look for submission comments or release notes either in Canvas or in Codio. I will look for some notes there as well, as always, please be patient. It does take me a little while to get through all of this grading. But I will hopefully get this done this week. So you’ve got some feedback that you can use as you work on milestone four. So for week four, we’re really going to spend some time working on dynamic web servers, we’re going introduced first ECMAscript Server Pages, you’ll talk about file uploads and sessions. And you really spend a lot of time working on this blog tutorial where you’re going to use Node and express to build a blog from scratch that interacts with a database that has all of these different features in it. If you’re careful with the blog tutorial, and you get everything to work, a lot of that code from the blog can be pulled directly over into milestone four. And then you’ll just have to adapt a little bit to match the milestone project instead of the blog project.

So as always, in milestone four, we’re going to do a lot of different things. And milestone four, you’re going to have a formal Express app with routing, you’re going to have some static middleware API endpoints, you’ll have a database, you’ll have dynamic pages of a form submission. I recognize a lot of this may not make sense right now. But you will learn all about it in the weeks four and week five examples working with that blog project. So milestone four is a big change from milestone three, which is why we give you a whole month to work on it. Please start on an early Do not wait until the last minute because it does take quite a while to get through milestone four. So shoot for getting through the last the next couple of weeks here shortly after spring break and give yourself at least a week at the end to work on this milestone.

So as always, you can keep in touch, we’ve gotten discussions on Discord, I host Tea Time office hours, I’ve got one on one office hours, lots of opportunities to get help if you get stuck. But you shouldn’t be working on data driven websites, even though data himself may not find that to be very funny. But I think it’s a really nice way to pivot from what we’ve been doing previously with a lot of hard coded stuff and moving more toward data driven websites that are actually backed by a database and have a full web API on the backend. So if you have any questions let me know otherwise, I will see you again probably after spring break will be the next Announcements video. So have a good spring break and I will see you again in a few weeks.

Spring '23 Week 9

Resources

• Slides

Video Script

Hello, and welcome to the week nine Announcements video for CC 515 In spring 2023. So this module, you’ll be working on two things, you’ll be doing the lessons from Week Five out of the summer class, and then you’ll be working on the fourth milestone project. The modules in week five really add a lot of information to this class where we start talking about things like template rendering, we look at data serialization, we start talking about databases and routing. And then this week, you’ll start in on the blog tutorial. The blog tutorial is probably the most important part of this class because we really start building a full scale web application one bit at a time. And we go through a lot of the different ways that you can build that application and all the different manual things that you can do to deal with things like sessions and routing. And so the blog tutorial becomes really the basis that you’ll build on to build the rest of the milestones in this class.

So for milestone four, we’re going to be pivoting around a little bit, you’re going to be building your milestone as an Express application using the routing that’s built into ExpressJS you’ll have a static middleware, you’ll be working with API endpoints, you’ll have an SQLite database to store your data. It’ll have some dynamic pages, and it will have a form submission. This is a lot of content to add to this milestone, which is why you’ve been given a lot of time to work on this milestone. But it’s really taking everything we’ve learned so far and working on the blog article, and really pivoting it over and building it into our milestone project itself.

So as always, in this class, if you have questions, feel free to keep up I’ve got discussions on Discord, you can join me for tea time office hours, Tuesdays at 330, Fridays 1130. There’s also a lot of one on one office hours that you can get take advantage of. I’m really here to help. So don’t be afraid to ask questions. But hopefully not pulling your hair too much over this milestone. It is a rather large milestone. But it is a really important concept to pivot from the simple web app. So we built so far to actually building a complete back end web application using Node js and express. So as always, if you have any questions, let me know otherwise, I will see you again in a couple of weeks.

Spring '23 Week 12

Resources

• Slides

Video Script

Hello, and welcome to the week 12 enhancements video for CC 515 in spring 2023. So you should have completed milestone for last week. So hopefully that’s going well, this week. And next week, you’ll be working on the week six lessons in Canvas, which does a lot of different things. And then you’ll have milestone five, which is due April 24.

So the week six lessons allow us to build out our web framework a little bit more deeply, we’re going to add a lot of features to our web framework, including authentication, we’re going to add interacting with some web API’s, we’re going to learn about web hooks and formal web frameworks. And you’ll continue to build that blog tutorial. And so a lot of the code that we’re doing for the blog tutorial, you’ll be able to bring over to your milestone project and actually use that as part of that project as well. So make sure you’re really paying attention to the blog tutorial and understanding what all that code does, and thinking about how you can adapt that code to work in different ways.

So for the fifth milestone for our project, the big thing we’re going to do is we’re going to add authentication. So we’re going to need routes for login and logout and creating user and registering your user. We’re also going to protect some routes so that only authenticated users can perform certain actions. And so this will actually link the request that the user makes to the user itself in the database. So you’ll have to actually go in and make some database changes as well. So this is a pretty beefy milestone. It’s one of the larger projects that we work on throughout this semester. But hopefully it makes sense. To make this milestone a little bit easier. Below this Announcements video, you’ll see me doing a quick walkthrough of my model solution for milestone five, just so you can get a visual idea of what the functionality should be and what the different features look like. Your project doesn’t have to look like mine, but it gives you an idea of the functionality that we’re looking at as you go through and read the milestone description.

So as always, if you have any questions, feel free to keep in touch you can find me on Discord you can reach out to me during tea time or schedule a one on one office hour with me. I’m always happy to help. But hopefully things are going well you’re going to be adding some authentication so hopefully you know not to use a password like 12345 That’s the same as on my luggage too. But if you have any questions, let me know otherwise, I will probably post another Announcements video in a couple of weeks. Best of luck.

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.

Spring '23 Week 15

Resources

• Slides

Video Script

Hello, and welcome to the week 15 announcements for CC 515 In spring 2023. So this week Next, you should be completing the last module on week seven and eight content. There’s a lot of stuff going on in that module that I’ll talk about briefly. And then for the rest of the semester, your big focus is going to be on completing the last milestone in the restaurant, or in the overarching project for this semester, that last milestone is worth double the points because it’s got a lot of content in it. So make sure you’re paying close attention to that.

So in week seven, and eight, we’ve gotten through a lot of related concepts in web development, such as single sign on, we’re doing CAS authentication, you’re taking a look asp.net, to see another framework. And you’re also going to do a little bit of an example with React. So it’s a lot of different technologies and things that is really useful for you to know about as a web developers. So that’s what we’re covering mostly in week seven, and eight.

And then in week six, you’re going to add some more features to your project on being able to fulfill requests, you’ll add some user roles and some tables and things for user management, as well as the ability to create new boxes that we can add to our database. The other big thing we’re looking at on milestone six is a little bit on aesthetics and usability. So take some time, make sure your project is usable, make sure it’s very clear how you activate and use all the different features. And so this milestone is worth 200 points. So make sure you spend a lot of time on that. And if you have any questions about the milestone requirements, or you’re not sure exactly what it’s asking you to do, feel free to let me know I do have a working model solution that I can check into and kind of give you some ideas of things that you might want to do for this milestone.

So some things that you might want to consider about aesthetics and usability. One of the big things is making sure your website has a consistent look and feel. If you’re using frameworks such as Bootstrap, and you’re using a layout template for your layout of your pages that really helps with this. Another big thing is to think about how you minimize the clicks that a user has to go through to do some work. For example, one way to minimize clicks is when a user creates a user account, you can automatically log them in so they don’t have to go through that process twice. Thinking about your routing, can you get from point A to point B without having to go through your homepage. So for example, if you’re on the page for a box, can you click a button to get to your user management, things like that, thinking about helpful labels and errors. For example, if you try and log in and the login fails, do you give them a helpful label or helpful error so that they can see that works. Or if they try and submit a request that is blank, things like that. You can also look at things like iconography, using things like font awesome to add icons to your buttons. That’s really a good way to do it. You can look at navigation and context menus, you can even look at things like hover animation. So as you hover over the buttons, they do something, all of those are things that you can keep in mind as you work on the aesthetics and usability of your website. Again, frameworks like Bootstrap are a really great way to add some of this very quickly. So don’t feel like you have to write it all from scratch. You’re more than welcome to use libraries, frameworks, whatever makes sense for what you’re doing to get some of these things taken care of.

Last big thing in this class is Tevals. Tevals will go out on finals week. So please watch your email for those. Don’t forget Tevals at K State are anonymous. I won’t know who submitted what and they’re delayed. I can’t see the results until after final grades are submitted. But all of your feedback is welcome both Dr. Bean and I spend a lot of time updating these courses. And we’re always looking for good student feedback on things that we can change things we can do better or things that we’d want to include in future versions of the class. So please take some time to fill out the Teval. All of your feedback is really welcome. So other than that, we’re getting pretty close to the end of the semester. My work is pretty much done. This is the last Announcements video you’ll see of me so hopefully everything’s going well. But as always, if you have any questions you can reach out let me know otherwise, best of luck on finals and I will see you all in the future.