CSCI 6962: Server-side Design and Programming Course Introduction and Overview

2 Client-Server Web Architecture Client browser sends request for page to server –May contain form data and other information Server sends response page and sends to client May need to generate response page dynamically –Form parameters –Previous requests (such as items purchased so far) –Information in database Focus of this course

3 Client-Server Web Architecture Client Browser ~john/Syllabus.htm Request to for Syllabus.htm Server john  public_html  Syllabus.htm port Response containing Syllabus.htm as a long string ( CSCI 6962 Syllabus …)

4 Form Handling Form data appended to request string Generates the request: <FORM NAME="purchaseform" METHOD=GET ACTION= > Quantity: /FORM>

5 Form Handling Server must: –Listen on port for requests –Parse request to determine values of parameters –Generate appropriate response page based on parameter values –Send response page back to client

6 Simple perl cgi-bin Program #!/opt/local/bin/perl #program to print back results of test form #parse input string into an associative $ENV{'QUERY_STRING'}); foreach $pair $pair); $formdata{$key}=$value; } #print response to form print "Content-type: text/html\n\n"; print " cgi-bin response "; print "Thank you for your order of "; print $formdata{"quantity"}; print " widgets!"; print " "; Problem: Too difficult to do complex server-side development Database manipulation Security …

7 Course Topics Server-side Web Containers Java Server Pages/Active Server Pages Web Site Architecture Session Handling AJAX Database Manipulation Security , etc.

8 Web Containers Program running continuously on server Runs code to handle requests Built-in methods for parsing requests, generating responses Handles other important functions: –Session tracking –Database access – generation –Security and encryption

9 Web Containers Client Browser Server Port Web Container Constantly running in background Listen on port Execute code in requested server page Generate corresponding html page cgi-bin response Thank you for your order of widgets!

10 Web Containers Jakarta Tomcat –Written in Java –NetBeans IDE –Acts as engine for Java Server Pages and servlets Microsoft IIS –Visual Basic/C# –Acts as engine for Active Server Pages

11 Java Server Pages Perl/cgi-bin approach: Generate response page one character at a time Java Server Page approach: Create html “template” with “spaces” to be filled in Reciept Thank you for your order of insert value of quantity here widgets!

12 Java Server Pages Reciept Thank you for your order of widgets!

13 Active Server Pages Active Server Page approach: Create “form” which is translated to html

14 Active Server Pages Server-side code manipulates “form elements” –Subroutine called when page submitted –Data read from elements (actually request string) –Used to set value of other elements

15 Active Server Pages Resulting form translated to response page

16 Control-View Architecture Different user input might require different response pages –Different types of request –Errors/missing field values, etc. Servlets/Multipage sites: Code to determine and redirect to appropriate response JSP request Control servlet JSP response JSPs for views

17 Form Validation Detecting user error –Invalid form information –Inconsistencies of forms to other entities Enter ID not in database, etc. Correcting user error –Providing information or how to correct error –Reducing user memory load Preventing user error –Good instructions –Field types/values that prevent error –Error tolerance Example: Accepting phone numbers in multiple formats

18 User-friendly Error Handling Tell user what went wrong Don’t force re-entry of information

19 Session Handling Most web transactions are sessions consisting of series of requests and responses No easy way to associate steps if multiple clients Who submitted this request?

20 Session Handling Assign each new client a unique ID at the start of a session Client/server pass that ID back and forth with each request/response Data for that client (such as “shopping cart”) associated with ID on server

21 AJAX Response is entire web page Very inefficient –High network costs –Must be loaded into browser and rendered Problem: Browser itself cannot get any data from server without requesting entire page Request ClientServer Response Large Document

22 AJAX Based on JavaScript running in browser –JavaScript code sends data to server, reads response –Response is simple data instead of entire page –JavaScript code then modifies page without re- rendering it completely –AJAX: Asynchronous JavaScript and XML Request Web Page Server Response JavaScript Small Data

23 Database Manipulation Database driver provides access to databases JDBC: classes to query/manipulate database Reliability/Efficiency issues –Synchronization –Prepared statements –Connection pooling web container control servlet JSP database database driver JDBC DBMS database server

24 Web Site Security Encryption –SSL/TLS protocols for information exchange –Certificates for authenticating servers Security roles for authenticating clients –Assigning different levels of access Change inventory View salaries Change salaries Inventory Role HR Role Manager Role

25 Tools We will be Using JSP: –Jakarta Tomcat web container –Java programming language –NetBeans IDE –MySQL database server ASP: –Microsoft Visual Studio All are free downloads (see textbooks)

26 Background Knowledge Java or C++ (for JSP) –May want to get Java reference –I will cover basics in class Visual Basic or C# (for ASP) –Basics covered in class –If more familiar with C# can get corresponding text Basic html (including forms and tables) –Chapter 4 of text Basic SQL

27 Assignments Short programming assignments in core areas –Java Server Pages –Validation/redirection servlets –Session handling –Active Server Pages Web Site Project –Multi-page web site in area of your choice –Includes server pages, servlets, and session handling –Should include at least one other advanced capability Database manipulation AJAX Security… –Can use either JSP or ASP –Can be group project

The NetBeans IDE Integrated Development Environment for Java Programming –Editing code (with hints) –Compiling code –Running code Good for JSP/servlet development –Comes with own copy of Java, Tomcat –Allows easy development of web applications MS Visual Studio corresponding IDE for ASP

Downloading NetBeans

Downloading NetBeans

Note: NetBeans has built-in Tomcat server (must download Java EE version)

Creating a Web Application In NetBeans: File  New Project Choose Web and Web Application

Creating a Web Application Give your project a name (I called this one “WidgetSite”) Give it a location (I have put it in a directory called 6962) Make sure it is set as the Main Project

Creating a Web Application The final page shows information (such as which server this project uses) Can change to external server if desired

Creating a Web Application NetBeans creates an initial web site Structure shown in the project window Creates an initial index.jsp page (default home page of the new site) The index.jsp is initially just a “Hello world” page

Running a Web Application Running the site opens the index.jsp page

Building a Web Application Modify and add files to create web site index.jsp Prompts user for number of widgets reciept.jsp Displays number of widgets purchased

Building a Web Application

Adding a JSP File  New Choose a JSP Give it a name

Running the Site Compiles and runs current webapp (starting Tomcat and opening browser)