CIS 1056 Labs: Advanced Web Technologies (Java/JSP, Digital Media Minor)

For the syllabus, click here (doc) or here (pdf). Click here for links to student's web apps for this semester. Click each lab  (below) to open up the details.

Requirements for All Labs and Project

All labs 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 on your labs page (labs.html) with lab number/name (heading), a description of the work you did, and links to that work,
  • be submitted in a zip file to Blackboard. This zip file shall contain a single project that includes the source code from of all the labs done so far, regression tested so that code added in one lab does not harm code completed in a previous lab.

Your project is a zip file of a single NetBeans project which contains all the source code all the labs you have completed, regression tested so that everything still works.

You can have any layout you like (once lab 1 grading is completed), as long as your pages meet all the lab 1 requirements. You may even add Bootstrap if you like (even if this goes against the initial lab 1 requirements).

Lab 1: Home Page

Click here (doc) or here (pdf) for Lab 1: Create Home Page, a lab in which you create and publish home page that employs code reuse (external style sheet and JSP include files).

  • Click here (doc) or here (pdf) to learn how to Install & Test NetBeans at home.
  • Right click here (and select "Save Link As") for a sample JSP project that has a simple home page that employs code reuse (external style sheet and JSP include files).
    • Click here (doc) or here (pdf) to learn how to Install Simple Sample Code from a Zip File (this is also how you MOVE a simple JSP project from one development PC/MAC to another).
  • Click here for help getting started with web design (basic HTML, CSS, working with images and colors).
  • 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).

Lab 2: Calculate

Click here (doc) or here (pdf) for Lab 2 Calculate, a lab in which you learn how to get user input (declaring variables within proper scope, HTML Form tag, why/how a JSP page posts to itself, how to differentiate between first rendering and post back), how to validate numeric input using try/catch, and how to display results of a calculation. This is your classic: input/calculate/output lesson, but using JSP pages.

  • Click here for sample JSP code (I/O, data conversion, if/else, try/catch - zip file).
    • Click here (doc) or here (pdf) to learn how to Install Simple Sample Code from a Zip File (this is also how you MOVE a simple JSP project from one development PC/MAC to another).
  • 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).
  • Don't forget that each week:
    • you blend your lab page into your working web application (it is not a new web site each week, as you may have done in CIS 1052),
    • you update your labs page with a blog and link to your lab work,
    • you attach a zip file of your project to BB before the due date (which you can find in the lab schedule at the top of BB).

Lab 3: Conditional Logic

Click here (doc) or here (pdf) for Lab 3 If, a lab that shows you how to use a multi-branch if statement to validate String input and format your numeric output. This lab does not introduce much new material. Rather, it was designed to allow you to fully absorb and practice the concepts learned last week (declaring variables/scope, JSP pages that post to themselves, differentiating between first rendering and postback).

  • Click here for a JSP page that demonstrates how to use the multi-branch if structure to validate String input.
  • Click here for a JSP page that demonstrates how to format integer (int) and real number (double) data types.

Lab 4: Methods

Click here (doc) or here (pdf) for Lab 4 Methods, a lab in which you learn how to achieve java code reuse by creating static methods. The lab appendix shows you how to add a package to a web app, a class to a package, and a method to a class using NetBeans.

  • Click here for sample code zip file (tip calculation).
  • Click here (doc) or here (pdf) to learn how to install sample code that uses Classes. Since your app does not connect to a database yet, you can ignore the part about database drivers. However, since your web app now has its own classes, you have to copy your java source files (".java" files) which are located under this folder:
    • project_folder/src/java/
  • Click here (doc) or here (pdf) to learn how to Publish ANY JSP Project (e.g., those that have java classes). You can ignore the part about database drivers, but now when you publish, you must do so after running the project locally (this compiles your ".java" source code into ".class" files), then copy the java ".class files" from this folder of your PC/Mac:
    • project_folder/build/web/WEB-INF/classes/package_folder(s)/*.class
    to this folder on the web server:
    • WEB-INF/classes/package_folder(s)/*.class
    Then (to let tomcat know you have updated your class files), you must delete and then then replace this web.xml file into this folder (on the server);
    • WEB-INF/classes
    The above information (and more) is in the publishing document, but I have repeated it here for your convenience (e.g., if you have done it before and just need a reminder). I recommend that you store a copy of the web.xml file in My Docs/NetBeans Projects so you can easily find it.

Lab 5: Objects

Click here (doc) or here (pdf) for Lab 5 Objects, a lab where you learn how to build your own classes and instantiate objects from these classes.

  • Click here for sample code (zip file) that has a very simple Circle class (only has radius as its single Class property). This web app has a JSP page where the data is hard coded and a JSP page where the data comes from the user.
  • Click here for sample code (zip file) that has an employee object and uses a formatting class (full of static methods).
  • Click here for sample code (zip file) that "has some fun" by creating some shapes and layouts using classes.

Lab 6: Databases

Click here (doc) or here (pdf) for Lab 6 Databases, a lab where you learn how to create database tables, populate them with data, and write SQL SELECT statements. Please add a blog to the top of your labs page where you describe your database work and link to the word docs that you submitted for this lab (just upload the word docs and link to them from your labs page).

Before you begin this lab, you should:

  • Click here to learn how to install MySqlWorkbench at home (it's free). If you do not want to install MySqlWorkbench on your PC/MAC, you can use it from the CIS department lab PCs.
  • Click here to learn how to connect to your Temple database using MySqlWorkbench. This document tells you how to find the file that holds your randomly generated database password.
  • Click here (doc) or here (pdf) to learn how to create tables (with primary keys), enter data, and extract information from a database using MySqlWorkbench. This tutorial is VERY similar to what you have been asked to do in your lab this week. PLEASE NOTE: you MAY NOT create your "other table" to be exactly the same as the Product table in this tutorial. Come up with another name for the table, and other field names and data types.

Lab 7: Display Data

Click here (doc) or here (pdf) for Lab 7 Display Data, a lab where you learn how to write Java/JSP code that displays data from a database.

  • Click here for Data Display Sample Code.
  • Click here for a tutorial that walks you through installing and studying sample code. (You really need to follow this before attempting the lab.)
  • Right click this link MySql Jar file and "Save Link As" into the Netbeans Projects folder. Every NetBeans project that accesses a database must have a reference to this jar file.
  • EVERY TIME you run database access code from home, you must first "tunnel into" the CIS Department network, leaving the command window open while you run your JSP pages.
  • Click here for enhanced publishing instructions (there's more involved now with database access).

Lab 8: Log On, Security

Click here for Lab 8 Log On, a lab where you learn how to implement user log on functionality, utilizing the JSP implicit session object (to store and retrieve user credentials). You also learn how to use the JSP implicit response object to redirect users away from pages for which they are not authorized to see.

  • Click here for basic sample code (enough to implement the basic/required lab).
  • Click here for sample code that implements dynamic logon/logoff functionality and has a more sophisticated user interface.

Lab 9: Register

Click here (doc) or here (pdf) for Lab 9 Register, a lab where you learn how to implement user registration functionality by combining many of the concepts you have learned this semester: data validation (using try/except), writing methods, writing classes, and how to use prepared SQL statements.

  • Click here for the basic sample code. Most of you should pattern your register page after the "02_insert_less_JSP_code" JSP page in this project. This JSP page is short and clean because much of its code was moved to a single class: Insert.
  • Click here to see a project that has more reuse within the classes (e.g., would facilitate Insert and Edit functionality with less lines of code). Given the short amount of time we have, it's probably too abstract and complicated to try to emulate this code, but you could study it to learn how to create more reusable layers of code. See dbUtils classes: PrepStatement (wrapper class for java.sql.PreparedStatement that handles encoding of nulls) and ValidationUtils (has methods to validate each of the various data types: String, int, BigDecimal, Date, etc).

10 Extra Credit: Update

Click here (doc) or here (pdf) for extra credit Update Lab, where you create a page that allows users to update records.

  • Click here for sample update code. This project has an icons folder (under "web pages") that includes icons for delete, update, and view.

FYI: How to use Ajax for Update

Lab 11: Delete

Click here (doc) or here (pdf) for the Delete Lab, where you learn how to generate data display pages that allow users to delete records.

  • Click here for sample delete code.