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.

Please read the syllabus carefully. If your average grade between the two tests is less than C-, your course grade will also be less than C- and you will have to repeat this course.

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.

Click here to see how the files within your "Web Pages" folder shall be organized this semester (Fall 2019). If you install this project locally, you should find that navigation works (except for the Web APIs which require more files - I will upload a separate zip file for that, later in the semester).

Homework 1: Home Page (no Bootstrap)

Click here (pdf) or here (doc) for the Home Page Homework in which you learn how to create and publish a web page using HTML and CSS.

Before You Start

  • Set Up Your IDE
    • You first need to set up your development environment - see the section above entitled "Set Up Your IDE". For this week's homework, you'll need to install/test the NetBeans Bundle, a secure FTP program, and Chrome.
    • You'll need MySQL Workbench around mid semester, but don't delay too long before getting this software installed/tested.
  • Select your Database Design and Web Topic. By the end of the semester, each student will have written a web application that allows users to add/edit/delete data from two database tables:
    • The first table will be a user table named web_user. All students will have the exact same database design for this table and sample code will be provided.
    • The second table will be some “other” table that is chosen by (unique to) each student (and there will not be any sample code for accessing this table). In this table, you'll have a unique descriptor field (like a name), a field to hold the URL of an image, and several other fields (including non character fields like integer, decimal/dollar, date). You will create your database table later, but this week, you’ll decide your database design and come up with your web site’s functionality related to that.

How To Organize Your NetBeans Projects This Semester

  • You will have ONE PROJECT that will include all your homeworks for the semester. Please name this project something like "YourLastName_web" (helps us with the grading). You can and should back up this project fairly often, whenever you get things working well. If you do are not using any version control software, you can copy your project folder (just using File Manager, outside of NetBeans), naming the folder according to what works.
  • Create a separate project for each week that contains the sample code I provide.

Getting Started With Your Homework

  • Refer to the homework document (link at the very top of this section) for specific requirements, tips, suggestions, and tentative grading deductions (helps you check your work before submitting).
  • Click here for this week's sample code (demonstrates HTML and CSS techniques). Your instructor will be explaining and going over the sample code in lecture, but remember that your web site must look substantially different from the sample page provided.
  • Click here for a list of basic HTML and CSS. For this homework, you'll need to know all that is listed there EXCEPT for HTML Tables, HTML Forms, CSS Backgrounds, CSS Tables, and whatever is listed under "Advanced CSS".
  • Click here for more about web design. This page includes a few different layouts as well as information about how to work with colors and image files.
  • 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.

Homework Submission

  • 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: if you added this class late and if you are unable to complete this homework by the due date, you will be permitted to submit the first two homeworks by the second homework's due date without any late penalty. Email your instructor and/or TA to let them know that you added the course late and you need this accommodation.

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 (new and improved) 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.
  • Click here for a template from which you can copy/paste to get the general organization of your project for the semester, plus save some typing on the blog content area.
  • 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 (Slide Show)

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 Component (Click Sortable HTML Table)

Click here (pdf) or here (doc) for Homework 5: JavaScript Component, where you learn how to create a component that makes 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.

Homework 6: Tutorial Proposal (1st step in Heavily Weighted Assignment - Check Syllabus)

  • Click here (pdf) or here (docx) for the requirements for your Tutorial Proposal.

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

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 7: Databases - MySqlWorkbench

This week, you should be able to complete the bulk of your homework IN LAB. Click here (pdf) or here (doc) for the Database Lab Activity AND Homework. In the Lab Activity and Homework, you will use MySql Workbench to design, populate, and extract data from a (simple, two table) database that you will use in subsequent homeworks. You will also update your Home content to explain what functionality your site will offer (and entice users to visit your site).

  • To install MySql Workbench version 6.3 (not 8.0), click here (pdf). If you do not want to install the free open source 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).
  • To learn how to connect to your Temple database using MySQL Workbench, click here (pdf) 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 starting early on the Web API homework which has a LOT of new concepts.

Homework 8: Web API (AJAX - Data Display) + Enhanced Instructions (Install/Publish)

Click here (pdf) or here (doc) for the Web API Homework, where you create your own Web API (server side, Java/JSP code that extracts data from your database) and then write AJAX (client side, JavaScript) code to turn the data from your Web API into an HTML table.

Before You Start

  • You'll need to have completed the Database Homework (where you create and populate your two database tables).
  • Click here (doc) or here (pdf) for a Web API Tutorial with its sample code (shows how you create a Web API using Java/JSP). NOTE: I expect this code to run if you install it locally (and you tunnel into cis-linux2 first). However, if you redirect the sample code to access your 3344 database, it will probably generate an error due to differences in database design.
  • Here is the simple sample code for this week. It is very similar to the tutorial code above (just does not have the fancy pdf explaining it). This simple code is what you used for the lab activity this week.
  • Click here for the more extensive sample code that contains client side code (including AJAX call) as well as the server side code.

Enhanced Instructions

Now that your web application has server side code (with database access), you'll have to use "Enhanced" instructions if you want to move/install from a zip file, to run from home (must tunnel in), to debug, and to publish.

  • Enhanced installation instructions
  • 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. PC users see the results in the NetBeans Output Window (GlassFish Server tab) just under the edit area. Mac users click on "Window - Services", open up servers, right click on GlassFish, select "View Domain Server Log".
  • 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. Here are the extra files you need now to publish. Please save all three files in folder NetBeansProjects:
    • web.xml (right click and do a Save Link As) - there is not much in this file other than default settings for tomcat. The reason we need it is to let tomcat know that we have just published new class files.
    • MySql database driver (JAR file - stands for Java ARchive file, like a zip file of compiled java code).
    • GSON Jar file, code that knows how to convert between JSON and POJOs (plain old java objects).
    • You can also get the JAR files from the "projectName – build – web – WEB-INF – lib" folder of sample code.

Tutorial Requirements

  • Click here (pdf) or here (docx) for the requirements for your Tutorial Assignment.
  • Click here (pdf) or here (docx) for the associated rubric (grading deductions).
  • Click here for sample code that is referenced by the assignment.

Homework 9: React Intro

Click here (doc) or here (pdf) for the homework where you will learn about React, the most popular JavaScript library for building reusable Web Components for JavaScript Single Page Applications. You'll write a React component that turns a list of objects into an HTML table (just a plain table, not click sortable). Your list of objects will be obtained by making an AJAX call to your Web API.

  • To learn about React, click here (opens up Tutorials - Front End - React). You do need to study the tutorial (or listen to my React videos) that go over Tutorial Sample Code.
  • For sample code for this homework, click here.

Homework 10: React Advanced

Click here (doc) or here (pdf) for a lab where you learn how to convert Web API output into an HTML table using a React Component that you build.

  • Click here for React sample code that converts the List User API into an HTML table.

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 you can debug client server side code (using system.out.print statements).
  • Write and test your Web APIs (JSP pages) before attempting to write any JS code in an HTML page.

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.

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