CIS 3344: Client Side Scripting for the Web

How to Get a Good Grade in this Class

In this course, I have to provide a lot of sample code because of the sheer volume of material that we have to cover. Writing web application code is tricky and finicky -- the uninitiated can spend a LOT of time getting stuck on picky little problems. However, you must use the sample code WISELY, which means experiment with it, change it, break it, fix it, understand it. DO NOT just copy/paste sample code, ask your friends which part to change and turn it in. If you do, you will not learn anything and you won't do well on the tests.

As the syllabus explains, your grades in this course are grouped into two categories: supervised (tests and lab activities) and unsupervised (homeworks). Your grade is approximately the average between these two categories. UNLESS you get less than a C- in your supervised assessments, in which case your course grade will be your supervised grade. In other words, you cannot pass this course unless you actually understand what you are doing in your homework.

Set Up Your IDE

Click here (pdf) or here (doc) to learn how to Install NetBeans Bundle on your PC/MAC.

  • You need the bundle (not just any web editor) because it includes Apache (Web Server that is needed for even our first homework) and Glassfish (a JSP Application Server that is needed when we begin writing Web APIs in JSP). The installation document also shows you how to create your first web application project and run it.
  • Note: beginning Fall 2018 we noticed that we could not do a "File - New Project" in NetBeans (UI would freeze) if the PC/MAC had a java version >= 1.9. If you see this behavior on your PC, then follow the installation instructions (uninstall later versions of the JDK and then reinstall the NetBeans bundle). On the MAC, you can try the following instructions from here (YouTube).

So that you can publish your web pages to the web server, you'll need to install a program that runs the Secure FTP (File Transfer Protocol).

  • If you have a PC, install (free) WinSCP from here -- unless you already have some software that is able to run the FTPS protocol.
  • If you have a MAC and you don't have any secure FTP program, you can install cyberduck from here, but you might be able to also just type in FTP commands from a terminal window (Google for help with this).

To be able to debug javaScript code, make sure that you have installed the Chrome browser.

Requirements for All Homework and Project

Each Homework shall:

  • be related to your web site topic (if possible),
  • not be overly similar to sample code provided,
  • have syntactically correct client side code (right click and "View Source" in Firefox to verify - errors show up red),
  • have code that is properly indented (NetBeans "Source - Format"),
  • use self-documenting names everywhere (longer names, camelCase),
  • include comments and appropriate use of white space between blocks of code,
  • contain no unused code (do not include sample code in your project, get rid of failed attempts, etc),
  • be described in a blog in your blog content with lab number/name (heading), a description of the work you did, and links to that work.
  • be contained in a project that is organized as prescribed in each homework document.
  • be submitted in a zip file to Canvas.

Homework 1: Home Page (no Bootstrap)

Click here (pdf) or here (doc) for Homework 1: HTML Web Site, where you learn how to create and publish a web page using HTML and CSS.

Before you start on this first homework, you need to set up your development environment - see the section above entitled "Set Up Your IDE". For this week's homework, you'll need everything except MySQL workbench installed/tested.

How to organize your NetBeans Projects this semester:

  • You should have exactly one project for all of your homework for the semester. Please name this project something like "YourLastName_3344_web" (helps us with the grading). You can and should back up this project (using File Manager, outside of NetBeans) fairly often, whenever you get things working well - I suggest you name the copied folder according to what works.
  • I suggest that you create a separate project for each week that contains the sample code I provide. Click here for this week's sample code. Your instructor will be explaining and going over the sample code in lecture.
  • Click here to learn about web design (HTML/CSS, working with images, and color selection).
    • This page provides a lot of layout examples.
    • After moving your styles to an external style sheet, remember to <Control>-Refresh your page to avoid browser caching of style sheet (otherwise, you will not be seeing your latest style changes). I recommend making most of your style changes while you still have your styles in an internal style sheet.
    • Remember that your web site must look substantially different from the sample page provided.
  • Once your web site works locally, publish your website by following the instructions for PC (pdf) or PC (doc) or for MAC (pdf) or MAC (doc).
  • Once you are happy with your web site, published, and tested your published pages, don't forget to submit a zip file of your web root folder into Canvas assignment (by the due date). Remember, if there is every any question about a grade you were assigned, we go by the code that was uploaded into Canvas, not by what might currently be published on your web site.

Homework 2: Routing

Click here (pdf) or here (doc) for the Routing Homework where you achieve UI code reuse by implementing simple (DIY) routing using JavaScript.

  • Click here for this week's sample code (shows you how to achieve User Interface code reuse by writing Do-It-Yourself Routing in JavaScript). Your instructor will be explaining and going over the sample code in lecture.
  • OPTIONAL (no extra credit): If you have extra time and want to do more with the layout of your web site, you can put in some jquery to animate the experience a bit for the user and also make your site responsive (layout changes according to the width of the "viewport"). Click here for some sample code that shows jQuery and responsive design (two separate concepts).
    • jQuery
      • Click here for a brief introduction to jQuery and to see some simple jQuery examples. This page directs you to several W3Schools pages to get you familar with jQuery.
      • W3schools is the best place to learn about jQuery, but you can also check out the two pages I added to the sample code: "jquery_all_divs.html" and "jquery_just_clicked_div.html".
    • "Responsive Design" means that a web page changes its layout depending on the width of the device upon which it is being viewed. Click here to learn the definition of a Media Query (basically just creating a group of CSS rules that only kick in when the browser width is within a certain range). To learn about responsive design principles (upon which Bootstrap is based), click here.
      • To test a responsive design example, narrow your browser to see mobile layout, then make it wider to see desktop layout. The general recommendation is that you design "mobile first" (usually everything is in a single column) and then, once that looks good, you add a "media query" to redefine a few style rules (e.g., making some areas have several columns).
      • In the sample code, look at the page named "basicResponsive.html" and study its code.
      • In the sample code, look at the page named "responsiveNav.html" to see how to create a collapsible nav bar. To test this page, narrow the browser slowly until you see the nav bar turn into a nav Icon ("View Source" to see code).

Your NetBeans Projects

  • I suggest you create a separate project for each week's sample code, BUT you should only have one project for the whole semester (that contains ALL of your homework).
  • Remember to back up your project often (using File Manager, outside of NetBeans), whenever you get things working well - I suggest you name the copied folder according to what works. You can also rely on zip files submitted to Canvas for additional good backups.

Submitting Your Homework

  • Each week, remember to check the requirements listed above in the "Requirements for All Homeworks and Project" section (basically good programming style and design - and regression test to be sure ALL your pages still work).
  • Once your web site works locally, publish your website by following these instructions for PC (pdf) or (doc) or for MAC (pdf) or (doc).
  • Once you are happy with your web site, published, and tested your published pages, don't forget to submit a zip file of your web root folder into Canvas assignment (by the due date). Remember, if there is every any question about a grade you were assigned, we go by the code that was uploaded into Canvas, not by what might currently be published on your web site.
Note: students who added this class late are permitted to submit homeworks one and two both by the homework two due date (without late penalty for homework one). Email your TA and/or instructor if you are in this situation.

Click here (pdf) or here (doc) for Lab 3: jQuery, where you create a page with a totally new look and feel and you add several jQuery effects, especially to the navigation area of the page.

  • Click here to learn about jQuery and to see some jQuery examples.
  • Each week, test to be sure that all of the pages you completed in previous labs still work properly (and all links work). Then publish and test your published web site. Then submit a zip file of your web root folder to blackboard.

Homework 3: Intro to "Object Oriented" JavaScript (no jQuery)

Click here (doc) or here (pdf) for Homework 3: JavaSript Intro, where you learn how to enhance DOM objects with custom properties and methods. You will also learn how to create an interface that enables the user to invoke the methods to modify the properties.

Before you begin

  • Click here to learn about javaScript and read these introductory sections:
    • "What is JavaScript?", including all links to W3Schools
    • "How Do I DeBug JavaScript?"
    • Skim over "Basic JavaScript Code"
    • Carefully study the first three examples under the section entitled "Introduction to Object Oriented JavaScript".
  • Click here for some helpful sample code.

Each week, you add pages to your web application (it's not a new web app each week). Test all pages of your web app each week. After testing your published pages, submit a zip file of your web root folder to blackboard.

Homework 4: Advanced JavaScript (no jQuery)

Click here (doc) or here (pdf) for the JavaSript Advanced Homework, where you learn how to enhance a DOM object (e.g., div) with more more complex sub objects, properties, events, and methods. In this homework you will be writing a MakeSlideShow javaScript function (in an external JS file) that creates a slide show component (each with left/right buttons to change the image and caption) then you will be writing an HTML page that shows two or more slide show components.

Before you begin

  • Click here for a helpful tutorial shows you how to create objects, create a list of objects (encapsulated), sort a list, delete elements from a list.
  • Click here for some helpful sample code.

Each week, you add pages to your web application (it's not a new web app each week). Test all pages of your web app each week. After testing your published pages, submit a zip file of your web root folder to blackboard.

Homework 5: JavaScript Framework

Click here (pdf) or here (doc) for Homework 5: JavaScript Framework, where you learn how to create a very simple framework that allows an HTML coder to get a click sortable HTML table from a JSON file (containing an array of objects).

Before starting on this homework, be sure to study this sample code. You will have to pick and choose different aspects of the various sample files to incorporate into your final homework. And you might have to refer to some sample code from the previous JS homeworks.

Each week, you add pages to your web application (it's not a new web app each week). Test all pages of your web app each week. After testing your published pages, submit a zip file of your web root folder to blackboard.

> > > Your Tutorial (Heavily Weighted, Check Syllabus) < < <

For their tutorial, students shall write a "mini javaScript framework" that provides an HTML with a useful "web widget" (a visual component bundled with functionality). After creating their framework and packaging it up for use (marketing material, zip file for download, instructions and examples to entice HTML coders to use the "web widgets"), students shall write a tutorial explaining each concept they had to learn in order to write their framework. A few students may write a tutorial about how to use a popular javaScript framework, such as React.js or Vue.js (this more challenging option also includes writing substantial and sophisticated javaScript code).

These are components you'll need for your Tutorial proposal:

  • Provide a name for the mini JS FW that you are proposing to design/implement.
  • Describe the functionality that your mini JS FW will provide. Explain how HTML coders would be able to use it, for example, they might create a DOM element on a page, style it as they wish, then offer up that DOM element to a constructor within the FW so that the FW will enhance that element in certain prescribed ways.
  • Show example web widgets that your mini JS FW might provide. This can be a link to a "Try It Yourself W3Schools How To Page", but then copy/paste from their example and create another example (the second example can be hard coded, not FW style, just to show functionality). If you are NOT selecting from W3Schools How To, you can link to a page that uses a fancy FW to demonstrate the effects that you are hoping you'll be able to code :-)
  • Provide additional references (links) - unless the links above already did that.

Click here for Tutorial Requirements.

  • After proposing a topic (to the instructor) and getting approval, each student's tutorial topic will be listed next to their name in the student web links page.

Example Tutorials From Previous Semesters

  • Click here for a tutorial written about the Parallax effect, which gives the illusion of 3D by having images move at a different rate of speed. This student, Mr Procacci, discussed/explained the effect generally, then he wrote and explained his own framework, which he named Procaccillax.js :-)
  • Click here for a tutorial where a student explained and demonstrated how use the Materialize framework to provide some visual effects like Parallax, Carousel, and Modal windows. Then, he wrote his own carousel framework using javaScript and jQuery.
  • Click here for a tutorial about writing a framework that enables an HTML coder to provide search and sort functionality for a grid full of data.
  • Click here for a tutorial about writing a CSS Keyframe Animation framework.
  • Click here for a tutorial about writing a framework that provides basic character animation (e.g., kick, punch, fly) from a sprite set image.
  • Click here for a tutorial about writing a chart visualization framework (bar and line charts).
  • Click here for a tutorial about writing a framework that provides popup (modal) windows with various effects.
  • Click here for a tutorial about writing a framework that provides to do list persistence using cookies.
  • Click here for a tutorial about writing a lightbox framework.
  • Click here for a tutorial about writing a framework that lets you create a piano (image and sound) on your page.
  • Click here for another tutorial about writing a modal window framework.

Homework 6: Databases - MySqlWorkbench

Click here (pdf) or here (doc) for the database lab, a lab where you use MySql Workbench to design, populate, and extract data from a (simple, two table) database that you will use for your AngularJS project later in the semester.

  • To install (free/open source) MySql Workbench version 6.3 (not 8.0), click here (pdf). If you do not want to install MySQL Workbench on your PC/MAC, you can use it from the CIS department lab PCs but it is quite useful to be able to check and/or modify your database (without needing to go through your web application).
  • Click here (pdf) to learn how to connect to your Temple database using MySQL Workbench. This document tells you how to find the file that holds your database credentials (database name, database username and password). CONNECTION TROUBLE?
    • PAY ATTENTION to which service is asking you for your username/pw. Your username is the same in both cases, but if ssh is asking you, it's your TuPortal pw, whereas if MySQL is asking it is the crazy auto-generated DB password. If you do not pay attention and enter a wrong password (to ssh) more than 3 times, you will be locked out for at least a half hour and nothing can be done about this.
  • For a MySql Workbench Tutorial that shows you how to create database tables, enter data, and extract information (using SQL SELECT statements), click here (doc) or here (pdf). You are not required to do/submit the activities of this tutorial, but it can help you figure out how to do your homework.
  • NOTE: This homework is VERY easy and can be done in a short time. Please spend the extra time working on your tutorial.

Homework 7: Web API (and AJAX)

Click here (pdf) or here (doc) for the Web API lab, a lab where you create your own Web API (server side, Java/JSP code) that extracts data from your database (that you created last lab). You will also write AJAX (client side, HTML code) to invoke your Web API.

  • Click here for an explanation about AJAX and to see some AJAX sample code (that invokes 3rd party Web APIs).
  • Click here to see a summary of what you did in the last week's activity (after you created a web_user database table).
  • Click here to download the sample code (zip file).

Remember that you must use Enhanced Instructions now that your web application includes SERVER SIDE code (Java/JSP files) that accesses a database:

  • Enhanced installation instructions (needed because the project has server side java/jsp code),
  • Instructions for How to Tunnel In - which you must do whenever you are coding from your PC/MAC (and invoking Web APIs / JSP pages either directly or indirectly).
  • To debug server side code (Web APIs), add System.out.println( ) to your JSP and/or java code. See the results in the NetBeans Output Window (GlassFish Server tab). Mac users click on "Window - Services", open up servers, right click on GlassFish, select "View Domain Server Log".
  • To debug client side code (JavaScript), always keep the console open in your browser (press F12 in Chrome) so that you can see the output of the console.log statements any/or possible JavaScript runtime errors.
  • Link to install JSON View (Chrome plugin that provides nice formattng for Web API output),
  • Enhanced publishing instructions (needed because the project has server side java/jsp code) - FOLLOW EXACTLY.
  • web.xml - right click here (and do a Save Link As) if you need a copy.

Homework 8: AngularJS Intro

Click here (doc) or here (pdf) to see the homework in which you learn how to use AngularJS (a JavaScript SPA framework - Single Page Application framework) for:

  • Routing (internal links handled by Angular code based on programmer specified routing rules) and
  • Displaying data in a "click sortable" HTML table with client side filtering functionality.
    • Note: to complete this part of the homework, you must have completed the Web APIs (JSP Pages with supporting java packages) from last week's homework.

Here is some sample code to help you get started:

  • Use this sample code (zip file) first, to help you get your new Angular index.html file (SPA) working with internal links and Angular routing.
  • Use this sample code next, to help you with creating the click sortable HTML tables (with client side filtering).

Helpful Hints:

  • See the Web API lab for enhanced instructions for installing sample code from a zip file, tunneling in, and publishing (needed now that your web apps contain server side code). These instructions also remind you how to debug client side code as well as server side code.
  • Write and test your Web APIs (JSP pages) before attempting to write any JS code in an HTML page.

Homework 9: AngularJS Advanced

Click here (doc) or here (pdf) for a lab where you learn how to insert data (with server side validation) using Web APIs for database access and Angluar and JavaScript to manage the user interface. Sample code is provided that inserts data into your web_user table - you write the code that inserts data into your "other" database table.

  • Click here for the sample code that inserts a web_user record.

Security:

  • In lecture I will demonstrate how to write a secure web application that is impervious to SQL injection and JavaScript injection hacks. Click here for the security sample code.

Helpful Hints:

  • See the Web API lab for enhanced instructions for installing sample code from a zip file, tunneling in, and publishing (needed now that your web apps contain server side code). These instructions also remind you how to debug client side code as well as server side code.
  • Write and test your Web APIs (JSP pages) before attempting to write any JS code in an HTML page.

Web Application Security (no HW but covered on test)

Click here here to see a web application that demonstrates SQL injection hack and JavaScript injection hack. For each type of hack, the web app provides code that is vulnerable and code that prevents such attacks. It also shows how to encyrpt user entered passwords (although it doesn't actually encrypt them before storing them in the database). It is just easier to develop and test everyone's web app if the usernames/passwords are visible.

Here is a list of security related recommendations for web developers:

  • Prevent SQL injection: Only use java.sql.PreparedStatement (has ?s for user input) never java.sql.Statement (user input concatenated into SQL).
  • Prevent JavaScript injection: Before storing user input into a database, clean it first. For example, run the user's input through code that turns all < symbols into &lt; (the HTML code for less than sign). That way when you view the page, you'll actually see the < that the user entered and the browser could never encounter a JS <script> tag and therefore never run injected JS code.
  • Encrypt user passwords before storing in database (when they register). When the user logs on, encrypt their password again and look for a match between that and the encrypted password stored in the database.
  • Use HTTPS on all pages and keep all software updated. These tasks fall more under the IT administrator than the developer, but I mention them here as they are important aspects to web application security. To use HTTPS, the administrator
    • gets a certificate (sort of like buying a domain name, you find who's handing them out, you pay a little, the certificate says that you are who you say you are).
    • installs the certificate then sets some parameters to the server software, telling it you want it to use HTTPS (on ALL pages of your site, not just selected pages).