CIS 3308: Web Application Development

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 test grade is less than C-, your course grade will also be less than C- (which means the course would not count course towards your CS major).

Set Up Your IDE

  • For all the homeworks in this class, you'll need the NetBeans Bundle (version 8.2) as your IDE. You'll also need a secure FTP program to publish the pages to the web server. Finally, you'll need Chrome to run and test your pages (because Chrome has an especially good JavaScript debugging environment).
    1. Click here (pdf) or here (doc) to learn how to Install the NetBeans Bundle on your PC/MAC. The installation document also shows you how to create your first web application project and run it (follow these to ensure that your installation works properly).
      • Why the NetBeans bundle? NetBeans provides a context sensitive editor for all the languages we will be using (HTML, CSS, JavaScript, java, JSP). The bundle pre-configures the NetBeans editor to work with Apache (web server software) and Glassfish (Application server). Even though you might be able to get by with some light weight client side editor for the first couple of homeworks, get used to using the NetBeans bundle because you'll need it to write Web APIs (server side code).
      • If NetBeans freezes when you try to do "File - New Project", make sure you have a java version earlier than 1.9. On the MAC, you can try these instructions (YouTube).
      • The NetBeans installation document tells you how to create a project, add a HTML page to it, then modify and view or run that page. It also tells you how to format (indent) your code and how to identify syntax error messages provided by NetBeans. Make sure you know how to do these important/basic things.
      • To avoid having to zip up your lab work, send it home and install it, it’s easiest if you bring your laptop (installed with the right software) to lab.
    2. You'll need a Secure FTP (File Transfer Protocol) program to publish your web pages to the web server, if you do not already have such a program installed on your PC/MAC.
      • If you have a PC, learn how to install (free) WinSCP by clicking here.
      • If you have a MAC, learn how to install cyberduck by clicking here. You might also be able to just type in FTP commands from a terminal window (Google for help with this).
    3. Make sure to have a recent version of the Chrome browser - so that you can debug your JavaScript code.

  • Beginning with your second homework, you will need MySQL Workbench to design and then populate a database that will support the web application that you will be writing all semester.
    • To install (free/open source) MySql Workbench version 6.3 (not 8.0), click here (doc) or here (pdf).
    • Click here (doc) or 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). This will ensure that your installation is correct and that your database has been properly set up for you.
    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) throughout the semester.

  • Beginning with the Web API homework, you'll need to be able to "tunnel" into the CIS department network so that your development environment can access your database. PC users will download and install puTTY from here (Temple download page). MAC users can just use SSH (should be already installed) from a terminal window.

Here are setup instructions from a student who has linux installed on his PC:

  • Click here to see how to install JDK 1.8 on a linux machine and here to see how to install NetBeans 8.2
  • To see a video on installing MySQL Workbench on a linux machine, click here

Requirements for All Homeworks and Project

All Homeworks shall:

  • Access a database that meet the data model requirements listed in the DB homework. This is important because if your data model is too simple (e.g., all fields are character fields), you will continue to loose points on all homeworks AND the project.
  • Project Organization. Most assignments have a graphic that shows how to organize the files within your project. Follow these design specifications.
  • JavaScript File Naming Convention. Every JS file shall be named the same as the single JS function or single JS object that is defined within the file. We do this to keep the JS files short and easy to read while still being able to find the file that holds the code we are looking for.
  • Have syntactically correct client side code (right click and "View Source" in Firefox and check that there are no red syntax errors).
  • Maximize Java code reuse. JSPs (Web APIs) shall contain minimal code - only the code that cannot be pushed down to java class code which is more reusable. Thus, JSP code shall focus primarily on extracting input from the URL (of the Web API call) using request.getParameter, printing output (out.println), and server side session management (session.setAttribute, session.getAttribute, session.invalidate).
  • Maximize HTML/CSS/JavaScript code reuse. Your web app shall have a single index.html page that references style sheets and javascript files that are well organized according to function. When users click on links/buttons, JavaScript shall invoke AJAX calls to insert partial HTML files into the content area and/or invoke Web APIs to update the user interface and/or the database.
  • Use the Dependency Injection Principle which means this: if code block A calls code block B, B never assumes the existence of any artifact in A UNLESS A provided a reference to that artifact. This principle applies to server side (java/JSP) code as well as to client side (JavaScript) code.
  • Use the Separation of Concerns software design principle (code is grouped according to function, not randomly intermixed). This applies to method, class, and package design, as well as to HTML, CSS, and JavaScript.
  • Use the MVC (Model-View-Controller) design philosophy.
    • Code that is concerned with database modification (insert, update, delete) shall be placed inside the model package, inside a model sub-package that is named for the database table it modifies.
    • Code that shows data to the user shall be put into the view package.
    • In our web application, your index page (and various html partials) shall play the role of controller (allowing the user to specify what they want to VIEW and/or how they may want to modify the MODEL (database).
  • Have no database connection leaks. Any JSP page that accesses your database shall have one and only one database connection object. The JSP page shall (1) pass the open database connection object to all the java classes that need one, then (2) close the database connection. Every code path that opens a database connection must also close it or else you have a database connection leak. A database connection leak is a serious, intermittent problem that will prevent users from displaying database access pages when the web application is experiencing heavy usage.
  • Provide user friendly database error messages. Most database exceptions will be prevented by debugging (e.g., SQL syntax errors), but some database exceptions may occur even with fully debugged code. For example, the database might be unreachable, or a user might try to insert a record that has a duplicate value on a unique database constraint. Show "user friendly" database error messages to the user, but append the technical error message to assist with trouble shooting of production code. So, the message might be "Database unavailable, please try later. Database message: Access denied" or "Cannot insert. There is already a user with that email address."
  • Expose errors, never hide them. For example, database exception catch blocks should (1) record the nature of the error (to a place where the JSP page can get that error message) and/or (2) write a message to System.out.println (where the developer can see what went wrong).
  • Use self-documenting names (longer names, camelCase) everywhere - package names, class names, object names, variable names, CSS classes, HTML ids - where only class names start with a capital letter. Never copy/paste sample code and leave variables inappropriately named.
  • Have all code properly indented (NetBeans "Source - Format"), with comments and appropriate use of white space between blocks of code.
  • Have no unused code (do not include sample code in your project, get rid of failed attempts).
  • Provide a blog for each lab, indicating what you found easy, what you found hard, and what important concepts you learned.
  • Be published and tested.
  • Be submitted in a zip file to Blackboard (not RAR). The zip file shall contain a single project that includes all the working source code of all labs done so far.

Homework 1: Home Page (no Bootstrap)

When creating Web Sites, we use the following languages:

  • HTML (for structure and content of web pages),
  • CSS (for styling elements on the page), and
  • JavaScript (code that can access and modify elements on the page, as well as invoke server side programs).

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, CSS, and a little JavaScript.

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 for next week's homework, so 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. This table will have a foreign key that “points to” a user role table (users cannot modify this role table). Every student database will have a one-to-many relationship from the role table to the user table.
    • 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, several other fields (including non character fields like integer, decimal/dollar, date) and a foreign key to the user table (creating a one-to-many relationship from the “other” table to the user table). Your web applications will be “self service” meaning users can self register, then they can post information into this “other” table and those “other” records will point back to the user who posted that information. 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 top of this section) for specific requirements, tips, suggestions, and tentative grading deductions (helps you check your work before submitting).
  • 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.
  • 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.
    • 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: Database Set Up and DIY JS Routing

Click here (pdf) or here (doc) for the Database/Routing Homework in which you will (1) create and populate a MySQL database and (2) achieve UI code reuse by implementing simple (Do-It-Yourself) routing in JavaScript. For the database part of this homework, click here (pdf) or here (doc).

  • Database Part
    • If you have not already done so, install MySQL Workbench and test that you can connect to your database (by following the instructions in the section above entitled "Set Up Your IDE"). Let your instructor know ASAP if your database was not created and/or if your credentials do not seem to be letting you connect...
    • Click here (pdf) or here (doc) for an Introduction to Database concepts (or Review, for those who have database experience). Click here (pdf) or here (doc) for a MySQL Workbench SQL Tutorial that shows you how to create tables, populate database tables with data, and extract data (joining data from more than one table) using SQL SELECT statements. You are responsible for the concepts in these docs, but you don't have to do what they say.
    • Note: Lab Activities are usually a subset of your homework, but homework always has a bit more to do.
  • Web Part
    • 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.
    • Click here for a template showing how a CIS 3308 project will be organized this semester. Feel free to copy/paste from this template, for example, will help you type less for the blog page.

Organizing 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).
  • Whenever you get something to work, back up your project (which you can do just using File Manager, outside of NetBeans). You can also rely on zip files submitted to Canvas for additional backups.

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).
  • Remember to write a blog entry for this homework (as indicated in the HW requirements) and test to be sure that the link from your blog to your database document works properly (locally, and after publishing).
  • 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 the database portion of this homework along with HW#3 with no late penalty). Email your TA and/or instructor to let us know you need this accommodation, but you will have to double up your effort to catch up...

Homework 3: Display Data

Click here (doc) or here (pdf) for the Display Data Homework, where you will write JavaScript components that make an AJAX call, convert the resulting JSON data to a click sort-able / filterable HTML table, and than inject that into the content area of the web page.

  • Click here to learn about AJAX and JSON.
  • Click here if you need to re-read anything from the lab activity. Click here for the sample code from the lab activity (shows all the features you are required to code, but does not combine the features).
  • Click here (project zip) that shows how your files should be organized (two components that each inject the HTML table into the content area are initiated by nav bar click, using routing).

Homework 4 (Option A): JavaScript SlideShow

For this homework, there are two options. Please study the syllabus to see if you should pick this Slide Show option or the Tutorial option.

Click here (doc) or here (pdf) for the JS Homework, where you will display your JSON data (that has images in it) inside of a JavaScript Slide Show component in JavaScript.

Click here (zip file) for client side code that should help you get started on this assignment.

Homework 4 (Option B): Tutorial Proposal

For this homework, there are two options. Please study the syllabus to see if you should pick this Tutorial option or the Slide Show Option.

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

Here is a link to the W3Schools How To page that is mentioned in the Tutorial Proposal Requirements document.

In the requirements, I suggested (to make your functionality significant enough) that you select two "effects" from the How To page and combine these into your component. So that there is good variety in the work done by the various students, I set up a discussion board in Canvas where you can "claim" the two effects you are choosing (making sure no one else already claimed the same two as you).

Then you can work on refining your two deliverables: tutorial/proposal.pdf and tutorial/poc.html (proof of concept code). As usual, you test your work locally, blog about it and link to it, publish it (test what you published), and upload a zip file into Canvas.

Homework 5: Web APIs (plus Enhanced Installation/Publishing Instructions for DB Access Web Apps)

Click here (doc) or here (pdf) for the Web API Homework, where you will write server side code that extracts data from your database. The code for this week has no real user interface -- you will add that next week. Sample code is provided that extracts web_user/user_role data - you will write a Web API that extracts data from your "other" table joined with the web_user table.

  • A Web API is like a method that (runs on the server and) can be invoked over the internet. When you invoke a Web API using JavaScript, it is called AJAX (stands for Asynchronous JavaScript and XML).
  • Now that your project will include server side (java/JSP) code (that accesses a DB), you'll have to begin using these enhanced instructions (click yellow box below to open/close).

    Click to open/close >>  Enhanced Instructions to Install/Debug/Publish DB Access Web Apps


    • To install sample code (or move a project from one development PC/Mac to another), click here (doc) or here (pdf) for instructions.
    • To tunnel in (which you need to do every time you run a database access web page from home), click here (doc) or here (pdf) for instructions.
    • To debug server side code, add print statements like this to your java/JSP code:
          System.out.println("**** the value of x is " + x + " ****");                

      You'll find your debug output at the bottom of the "GlassFish Server" log which (for PC users) is one of the tabs under the NetBeans edit pane. Mac users can open up this log by clicking on Services (instead of the project pane in upper left), open Servers, right click GlassFish Server, select "View Domain Server Log".

    • To publish your database access web application, click here (doc) or here (pdf) for instructions.
      • You'll need this web.xml file whenever you publish, so download it (right click and select "Save link as") and store it under mydocs/netbeans projects (so you'll know to find it). This little file must be copied, deleted, then pasted back (on the web server) every time you publish updated java class code. This lets Tomcat (JSP application server software) know it should grab a fresh copy of your compiled java classes.
      • You can get the JAR files from the "projectName – build – web – WEB-INF – lib" folder of sample code, but if you want to download the JAR files from here, you can do so. Click here for the MySql database driver JAR file. Click here for the GSON JAR file (that can convert JSON <-> POJOs (plain old java objects). Again, I recommend you store these two files in mydocs/netbeans projects so you and I both know where to find them. Do not delete these files once you have stored them and referenced them from your projects.

  • Before You Start, 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: when you run Web APIs directly you should see (in the browser) the JSON data that they generate. If that data appears jumbled on one line, install the JSON View plugin (for Chrome). This plugin not only formats, but also syntax checks the JSON that it displays.

Homework 6: Log On

Log On Homework

Click here (pdf) or here (doc) for the Log On Homework, where you add log on/off functionality as well as an "Account Profile" that is only available to logged-on users.

Before starting this homework, do the Find by ID Tutorial which references this sample code. (You will be exposed to these in your first Logon lab activity as well.) In this tutorial, you will learn the following concepts (which are needed to implement he Log On HW):

  • how to get user input by using HTML <input> tags,
  • how to send input to a Web API by using URL parameters,
  • how a Web API (JSP page) extracts the input from the URL parameters by using request.getParameter("parameterName"),
  • how java code (safely) injects user input into a SQL statement by using the setString method of a java.sql.PreparedStatement object.

Click here if you want to review the second logon Lab Activity.

Note: there is no "log on sample code". You should be able to complete the homework by using the sample code from the above tutorial above as well as information presented in the homework writeup. If you have any questions, please ask me and I will enhance the materials wherever necessary. You can also click here if you want to review the 2nd Logon Lab Activity.

Web Application Security

A related topic is web application security. 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.
  • All authorization should be handled server side (in the Web APIs). Authorization means checking if the (logged on) user is authorized to perform a particular task. You might think that you can implement security by figuring out what the user is allowed to do and then only showing them those links. Not true !! A hacker can "View Source" and see all the JavaScript code and they can mimic any Web API call providing whatever URL parameters they want. So make sure that the Web API itself enforces authorization rules, nothing client side.
  • 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. Never store user passwords in plain text in a database.
  • Don't store the database password in code (like we stored ours in DbConn). Instead, put it into a file that has limited access - can be read by tomcat but not by people. Possibly encrypt the file contents. Typically the developers may know the password to the development database, but they would NEVER know the password to the production database (with live data in it).
  • The IT administrator should keep all software updated and they should set things up to use HTTPS on all pages. To set up HTTPS, the administrator would
    • 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).

Homework 7 (Option A): Insert

Click here (pdf) or here (doc) for the Insert Homework where you enhance your web application so that the user can Register (insert user) and they can add a record into your "other" database table. All database access is handled by Web APIs which perform field level, record level, and database error checking and reporting.

Sample code. Study the sample projects - from simple (easier to understand) to complex (better software design which you need to use for your homework).

  • Click here for some super simple code that is referenced by the Insert Lab Activity. This version
    • has a lot of code in the Insert Web API (JSP page) which makes it easy to understand, but better software design would be to move some of this to reusable java classes.
    • does not employ JavaScript routing to achieve User Interface reuse.
    • expects the user to type in a foreign key (like 1, 2, or 3) to indicate the role of the user, instead of letting the user select from a pick list.
  • Click here for the final version of sample code that
    • has less code in the insert API (JSP page) because much of the code was moved to a reusable java class.
    • employs JS routing to achieve UI reuse.
    • builds a pick list (for user role choices) from the values in the database.
    This final version is the web user insert code that you are to incorporate into your web application and to emmulate for insert "other" functionality.

Click here to learn how you could use HTML5 Validation to perform client side validation. However, if you actually implemented client side validation, we would not be able to verify that you have adequately provided server side validation feedback. So, don't use client side validation for your homework submission, but realize that it would be very good to do in a "real Web Application" ("belt and suspender" approach, defensive programming, meaning the client side validates providing quick feedback to the user, but then the server side also validates as a backup to ensure that the client side did what it needed to do).

Homework 7 (Option B): Tutorial Requirements

In this assignment, most students will write a reusable JS component that combines two effects from the W3schools How To Page. The component will generally take an array of objects as part of its input. To show that your component has been properly encapsulated, you'll place two components on a page. Then, you will explain (to an "HTML coder") how to use your component and provide him/her with a downloadable/runnable sample. You'll show and explain important code snippets that make up your component and provide links to all the pages that inspired your component and also helped you with any issues you had to resolve.

  • Click here (pdf) for the specifications for your completed tutorial assignment.
  • Click here (zip file) for some sample code.
  • Click here (pdf) for grading rubrics.

React (Lecture and Lab Activities - No Homework)

We will be learning about React, a JS library for building reusable Web Components. Click here for my coverage of React, which includes:

  • React definition (including links to W3Schools coverage of React and the overview/definitions page from the React official web site).
  • Because most React sample code uses the new ES6 JavaScript features and JavaScript functional programming, these topics are reviewed first.
  • My React Tutorial plus my related sample code.
  • JSX (JavaScript XML) is also covered. JSX allows you to put HTML tags directly into JavaScript variables - without needing any backticks (still treated like a String). If you want to use JSX (like most React sample code), include a link to the "Babel" JavaScript Transpiler.

Homework 8: Update

Click here (pdf) or here (doc) for the Update Homework, where you add update functionality to your web application for your two database tables: web_user (sample code provided) and "other" (you write the code). Click here for sample code:

  • Click here for a project that has simple sample code. There is an HTML file for insert and another for update. Of course, for your homework, you'll have a single index.html with methods that build the UI, e.g., users.insertUI() and users.updateUI(). Note opportunities for code sharing between insert and update. Both need to "bundle" user input fields into a JSON string, both need to "unbundle" a JSON string that contains field level error messages and place them onto the right spots of the page.
  • Because time is short and a lot of this is new for students, I provide fully implemented sample code for user CRUD ( Create/Insert, Read/Select, Update, Delete). I would suggest that you start from the simpler sample code, then try to incorporate parts of this more complicated solution - so you learn more...

Homework 9: Delete

Click here (pdf) or here (doc) for the Delete Homework where you add delete functionality to each of your three database tables (web_user, associative, and other).

  • Click here for sample code that shows how to build an HTML table that has a linked delete icon for every row of data.

ReAct

For an introduction to ReAct (a JavaScript Framework for rendering reusable components), click here.

NOTE: Once you incorporate JSX (like using HTML in the JS code), NetBeans starts giving you false syntax errors and will not indent properly. To deal with this, you can either:

  • keep using NetBeans (ignoring syntax errors on js files that use JSX and indent manually), OR
  • install "Visual Studio Code" (a free and small download) and use that to edit any JS components that include JSX. You can continue to use the NetBeans bundle (it's Apache web server) to run the HTML pages.

First ReAct Example: Simple Routing (UI Code Reuse)

Click here for React Routing Sample Code (by Cody Rogers). Links:

  • https://reacttraining.com/react-router/web/guides/quick-start
    This is an example from the official tutorial/documentation for react-router. It is a little bit out of date and is meant to be used with NPM (Node Package Manager) but it still is a good example.
  • https://stackoverflow.com/questions/40764596/using-react-router-with-cdn-and-without-webpack-or-browserify
    This shows how to use react-router with only CDNs rather than NPM.
  • https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter
    This explains the difference between BrowserRouter and HashRouter which are both part of react-router. The HashRouter is basically the same as the angular router and is the older more portable router. BrowserRouter is newer but really does not work as well unless the server also knows how to render the routes rather than just the client (refresh button will break but back/forward may still work).

Second ReAct Example: Displaying Data from JSON File

Click here for ReAct Code that Displays Data from JSON (by Cody Rogers). Links:

  • https://codepen.io/gaearon/pen/BwWzwm
    Good example showing how to use ReAct to display JSON data.
  • https://stackoverflow.com/questions/27192621/reactjs-async-rendering-of-components
    This explains how asynchronous rendering works.

Web Frameworks

Client Side Web Frameworks

Click here for a 2019 YouTube video (23 minutes) that compares the three most popular Single Page Application (client side) Frameworks: Angular, React, and Vue.

  • Click here for Sally's tutorial about Angular JS, a Model-View-Controller (MVC) Single Page Application (SPA) Framework.
    • Click here to download an Angular project that demonstrates CRUD (Create, Read, Update, Delete) implemented by Web APIs (server side).
  • Click here for a Student's tutorial on React.
  • Click here for a Student's tutorial on Vue.
    • Click here for a Vue project that demonstrates List and Insert implemented by Web APIs (server side). This demo has all the HTML code in one file, all the JS code in another - its UI needs to be broken up into reusable components (which is one of the main goals of these web frameworks).

Server Side Web Frameworks

Click here to learn about Server Side Web Frameworks.

Report Writer That Uses Database Metadata

Click here (pdf) or here (doc) for a challenge in which you create a report writer that utilizes metadata (data that describes the design of your database). Click here for sample code.

Study for Last Test

Click here (doc) or here (pdf) to review for our last test.

Homework 9: AJAX (Search)

This lab introduces these new concepts:

  • JavaScript is a loosely typed language that is interpreted and run by browsers. It can access and modify the DOM (Document Object Model, all of the elements that make up a web page). Click here to learn more about JavaScript.
  • AJAX (Asynchronous JavaScript And XML) is a technique in which javaScript (client side) code calls a Web API (server side code) that provides a response (that is usually in JSON, JavaScript Object Notation). The call is asynchronous (non-blocking) - when the response is provided, the javaScript callback function updates part of the page. By having an asynchronous "partial page refresh" (instead of a full page refresh/submit), the user experience is greatly enhanced. Click here to learn how you can make AJAX calls to Web APIs that are provided by other web sites (e.g., google, twitter, Septa).

Click here (pdf) or here (doc) for the AJAX Search Homework, a homework where you write three Web APIs (jsp pages that execute server side) and one HTML page that calls the three APIs:

  • A user select tag API that generates the data you need to create a user select tag and an "other" select tag API wthat generates the data you need to create a select tag for your "other" table
  • A data select API that outputs data from your associative table joined with your user and other tables
  • An HTML page that
    • (at browser page load time) makes AJAX calls to the two select tag Web APIs and then builds the select tags (in javaScript), and
    • (in response to button click event) makes an AJAX call to get data from your associative table and then builds an HTML table from the returned JSON string (all in javaScript, client side coding in the browser).

Click here for sample code that includes the following:

  • PersonSelectTag_API.jsp: a (server side) Web API that returns a JSON string full of all the ids and names extracted from a user table. This code only emulates reading the names and ids from the database (the values are "hard coded" and there is no database access). For your homework, you'll have to write code that actually extracts the data from your database.
  • EpisodeSelectTag_API.jsp: a (server side) Web API, just like PersonSelectTag.jsp except it returns a JSON string full of names and ids extracted from a second database table (also hard coded, not pulling from a database).
  • DataSearch_Web_API.jsp: a (server side) Web API that actually accesses a database table and extracts data (based user criteria that was provided in the Web API call) and outputs that data in JSON format.
  • AJAX_Search.html: client code that calls the two SelectTag APIs using javaScript (at page load time) so that it can build the select tags. The search button, when clicked, makes an AJAX call to the DataSearch Web API (passing in the user's search criteria), then displays the returned data.

Debugging:

  • Run the Web APIs like any other JSP page (by right clicking and running from localhost after tunnelling in) and you will see the JSON data that it produces, right in your browser. Use "URL hacking" to type in the desired (test) query values to the right of the URL in the browser's address bar.
  • Whenever you are writing AJAX code, be sure you have the JSONView for Chrome plugin installed so that it will parse and format the JSON data of a Web API that you are testing (by typing in the URL directly).
  • Whenever you are writing javaScript code, make sure the Chrome console tab is open (press F12, click on "console"). Use console.log (javaScript) statements to help you with debugging. If you "console.log" an object, you can open/close it's elements to discover property names and values.
  • The Elements tab of the Chrome debugger can come in handy when you want to know what CSS rule is applied to a particular element (so you can modify the style rule). The Elements tab is also useful when you are modifying the DOM with JavaScript - it shows you the current state of the DOM as you run your JavaScript code.

Note that jQuery (a javaScript library) is used more frequently (than plain javaScript) to make AJAX calls, but, because of time limitations, we will just learn the javaScript version, which is more straight forward, with less layers of abstraction.