Video Lesson 08

This semester our class will be running 1x per week, online. In order to make the most of our weekly meeting, and to prevent "Zoom Fatigue", I will be teaching the class using a "flipped classroom" model. Here's how this model will operate in our class this semester:

  • Before most classes you will be asked to watch a video lesson - the lesson for this week can be found below.
  • After you watch all of the videos in today's lesson you will have a small task to perform - we will refer to these as "micro assignments". These "micro" assignments are fairly straightforward and short and are directly related to the content covered in the video lesson for the week.
  • These "micro" assignments are due before our next class meeting. You cannot turn in a "micro" assignment late. We are setting up these assignments in this way so that everyone has a baseline level of knowledge of the topics being covered in the video lesson. This will allow us to make the most of our time together during our weekly course meeting.
  • During our course meeting we will cover new topics during the first half of class. During the second half of class we will focus on working on a larger programming assignment together and in small groups.

Introduction to jQuery

This video will cover the absolute basics of the jQuery front-end framework. This video will focus on jQuery's ability to work with the DOM, but you do not need to change the way you program on the front end to use these techniques. This video is being provided to you because you will be using the jQuery ajax function as part of this week's micro assignment, as well as next week's macro assignment

Introduction to AJAX

This video goes through the basics of Asynchronous JavaScript and XML (AJAX). I use a very low level technique in this video to do this, but in the next video I will go through a more streamlined and straightforward way of making AJAX calls to the server using jQuery.

AJAX with jQuery

PHP Sessions

This video discusses PHP Sessions, which is a concept that is needed to implement the "security upgrade" extra credit component of Macro Assignment #08. This features is NOT required for full credit on this assignment. With that said, you should familiarize yourself with the basics of this topic since it is a popular technique for building content management systems that require the storage of temporary user data.

Micro Assignment #08

In this program you are going to create a "sticky" website that allows a user to add a series of colored boxes to the page. Every time a box is added an AJAX request should be made to a PHP script on the server to save the box being created in a text file. In addition, when the page initially loads the program should contact the server and obtain the current text file and "recreate" all previously generated boxes.

All of the HTML, CSS and PHP has been written for this program. Your job is to edit the JavaScript on micro08.html to make these AJAX requests and parse the results that you receive. You can download the entire package for this assignment here. Here's a video of how your program should operate:

When you are finished please upload a copy of this file to your i6 website using the process described in Assignment 01. Name your file micro08.html and ensure that it is accessible from within your webdev folder. You will also want to submit a link to your work on NYU Classes under the 'Assignments' tool. You will want to include this project as a link on your homepage (also described in Assignment 01)