Java Web Development with NetBeans IDE

－－ Kai Qian

Chapter 1 Web Application Concepts

Objectives

• Overview of Web Architecture• HTML, XML, and XHTML Markup Languages• NetBeans• JavaScript and AJAX• Troubleshooting Web Applications

Introduction

• The Internet allows businesses to communicate instantly across the globe and to access resources and services that would otherwise be unavailable or prohibitively expensive.

• The Web is a collection of resources that can be accessed by means of a specialized client called a web browser.

• The Web has become a viable platform for delivering applications

Web Architecture

• In order to effectively design web applications, it is important to understand the architecture of the platform.

• Web applications consist of two distinct parts, the server and the client, and a communications protocol by which they can communicate with each other.

Web Architecture, contd.

• The web server is a program that listens for incoming web page requests and returns or “serves” the pages requested back to the requesting party.

• When a request is received, they locate the resource associated with the requested Uniform Resource Locator (URL).

• A URL is a special string used to identify the location of a resource on the web.

• http://www.example.com/path/to/page.html?id=12

\__/ \____________/\________________/ \___/

| | | |

protocol hostname path query

Web Architecture, contd.

• protocol – determines which protocol to use when retrieving the resource.

• hostname – the IP address or DNS hostname of the server.

• path – interpreted by the web server and mapped to a resource local to the web server.

• query – extra information that the web server may use when locating or serving up the resource.

• Once the web server has received the request and located the requested resource, it returns the resource to the client using the HTTP protocol

Web Architecture, contd.

• The web client is usually a web browser (such as Internet Explorer or Firefox), but may be any program that can make a request to a web server.

• The client always begins the conversation by sending the initial request and waiting for a response.

Multi-Tier Architecture

The three logical layers are:

• Data layer – the logical layer of the application responsible for storing the application's data.

• Business layer – the layer responsible for applying business logic to the application's data (i.e., it does things to the data, such as performing calculations).

• Presentation layer – this layer presents the data to the user in a useful and organized way.

Multi-Tier Architecture, contd.

• In a traditional client/server application, there are two distinct tiers, the client tier and the server tier.

• The server usually handles storing the data that the application uses in some way and manages access to that data.

• The client on the other hand, is responsible for presenting the data to the user and allowing the user to perform operations on the data.

Two-Tier Architecture

• The two-tier arrangement is sometimes referred to as a “fat client” model – where much of the work is put on the side of the client.

Three-Tier Architecture

• The three-tier model consists of a client, which handles presentation of the data, a business server, which handles the business logic of the application, and a database server, which manages the storage, access, and security of the application's data.

• The client places fewer burdens on the user's computer since it does not contain the business logic.

• The business server (or servers) can be optimized for performing whatever specific tasks are required by the application's logic as well as serve as a single upgrade point for changes in the business logic.

Three-Tier Architecture, contd.

The HTTP Protocol

• HTTP is the protocol or common language spoken by both the server and the client.

• An HTTP exchange consists of a request and a response.

• It is a stateless protocol. Because there is no mechanism built into the protocol to keep track of what data has been exchanged previously between the client and the server.

The HTTP Protocol, contd.

• The HTTP protocol defines many request types, but the two most common are GET and POST.

• GET is used to retrieve a resource at a particular URL.

• The POST request is used for sending data to the server.

• A GET request is idempotent. That is, it should not change anything on the server.

• POST is not idempotent. It is designed to send information to the server, which the server can then use to change a resource if needed.

The HTTP Protocol, contd.

• HTTP response: 

HTTP/1.1 200 OK

Date: Sat, 12 Sep 2009 17:13:23 GMT

Server: Apache/2.2.3 (Red Hat)

Last-Modified: Tue, 15 Nov 2005 13:24:10 GMT

ETag: "b80f4-1b6-80bfd280"

Accept-Ranges: bytes

Content-Length: 438

Connection: close

Content-Type: text/html; charset=UTF-8 

The HTTP Protocol, contd.

<HTML>

<HEAD>

<TITLE>Example Web Page</TITLE>

</HEAD>

<body>

<p>You have reached this web page by typing &quot;example.com&quot;,&quot;example.net&quot;,or &quot;example.org&quot; into your web browser.</p>

<p>These domain names are reserved for use in documentation and are not available for registration. See <a href="http://www.rfc-editor.org/rfc/rfc2606.txt">RFC

2606</a>, Section 3.</p>

</BODY>

</HTML>

Sessions

• A way to identify all of the requests made by a single client within a certain segment of time so that a set of data can be associated with those requests. This set of requests is called a session.

• While there is no session support in the HTTP protocol itself, web servers have two main methods of simulating sessions.

• The first method, often referred to as URL Rewriting, embeds the session ID within any URLs that are returned to the client (in the HTML document).

• The second method uses cookies to store the session ID.

Sessions, contd.

• A cookie is a key and value pair, much like the headers we saw in the HTTP request and response examples.

Server-Side Programming

• Server-side programming enables dynamic generation of content in the server's response.

• One advantage to server-side programming is that the client doesn't have to know anything about the server-side program or script (except the URL, of course).

• One of the first attempts at creating dynamic web pages was the Common Gateway Interface (CGI).

Client-Side Programming

• Client-side programming involves embedding a scripting language such as JavaScript into the web page's HTML. The script is received with the HTML from the server and executed on the client computer.

• The advantage of this is that the server doesn't have to run executable code for every client that sends a request.

• The disadvantage is that the client may not support the particular scripting language chosen or may implement it in a way that makes it incompatible with the script.

Client-Side Programming, contd.

• JavaScript is probably the most common client-side programming language used. It is supported by all major web browsers.

• One of JavaScript's strengths is the ability to alter the web page after it has been rendered by the web browser.

AJAX

• AJAX is an acronym that stands for Asynchronous JavaScript and XML.

• AJAX works by using asynchronous HTTP requests – requests that can be sent without causing the entire page to refresh.

• AJAX uses something called an XmlHttpRequest to send a request without losing the loaded page. The response from the server can then be integrated into the page dynamically using JavaScript.

Markup Languages

• A markup language is a language used to convey information about a document while remaining distinct from the document itself.

• The markup gives information about the document just like a sentence diagram provides information about a sentence.

• We will discuss two markup languages in this section, HTML (HyperText Markup Language) and XML (eXtensible Markup Language).

Markup Languages, contd.

• HTML is used by browsers to identify parts of a web page.

• The HTML document is a regular text document with some extra elements or “tags” mixed in. Each tag is enclosed in angle brackets (<>).

• The entire document is enclosed by these opening and closing <HTML> tags, meaning that the entire document is an HTML document.

Markup Languages, contd.

• The next tag, <HEAD>, encloses the header portion of the document. The header contains things like the document's title and maybe some descriptive information about the document itself.

• After the <HEAD> tag comes the <BODY> tag, which contains the body of the document itself. The body will contain the text of the document along with other HTML tags.

• HTML tags may also have attributes assigned to them. An attribute is a key/value pair appearing inside the angle brackets and after the tag identifier.

Markup Languages, contd.

• XML is the eXtensible Markup Language. HTML is a domain-specific markup language. It covers the specific domain of describing web page documents. XML, on the other hand, is not tied to any one particular domain.

• Both XML and HTML share a common heritage as descendants of the Standard Generic Markup Language (SGML).

XML Structure

• The document begins with a special element called the document prolog. The prolog is the section between the <?xml and ?> markers.

• The root element for an HTML document is the <HTML> tag. The root of an XML document depends on the definition of the particular XML document.

• Not all XML elements need a closing tag.

• XML is case-sensitive. Elements and attributes should be all lowercase. HTML, on the other hand, is not case-sensitive.

NetBeans Overview

• NetBeans is a powerful Integrated Development Environment (IDE) designed to help you be more productive when developing.

• It works with a wide range of modern programming languages including C++, PHP, and Ruby.

• It has a large set of project templates to choose from and handles a lot of the mundane and time-consuming tasks associated with Java web development, such as creating and maintaining XML configuration files.

NetBeans Overview, contd.

• It can be downloaded as a bundled package with the Java Development Kit (JDK) and also comes bundled with Apache Tomcat, one of the most popular web servers used for Java web development, as well as GlassFish, an open-source enterprise server used for Java enterprise application development.

Troubleshooting Web Applications

• Troubleshooting the Server• When developing with NetBeans you have the

advantage of having the server running right on the same computer as your development environment.

• Another very helpful feature of NetBeans is the way it handles the stack trace that GlassFish outputs when there is an error.

Troubleshooting Web Applications

• Troubleshooting the Client

• By viewing the raw HTML that was output from the server directly you can confirm that your application is outputting all the HTML properly and troubleshooting problem.

• In addition to viewing the raw HTML, there are several extensions available for the Mozilla Firefox web browser as follows that can help when troubleshooting from the client side of the HTTP conversation:

Troubleshooting the Client, contd.

Firebug – This extension shows up as an unobtrusive insect icon in the lower-right hand corner of the web browser.

• Console – any browser console messages are shown here, including errors from JavaScript client-side code.

• HTML – an expandable view of the HTML code.

• CSS – displays the cascading style sheets information associated with the page..

• Script – client-side code is shown in this tab along with a debugger.

• DOM – Shows the entire Document Object Model tree of the page being viewed.

• Net – The Net tab shows all of the requests sent to load the page (including requests for things like images and style sheets) as well as how long it took to get a response back from the server and how large each response was.

Troubleshooting the Client, contd.

Web Developer – This extension appears as a toolbar along the top of the browser. It contains several menus and a lot of functionality. Some of the functions include:

• View, add, and delete cookies associated with the web page.

• Outline tables, table cells, and block level elements on the page.

• HTML validation.

• View the generated source of a page

Troubleshooting the Client, contd.

• Tamper Data – This extension is different from Firebug and Web Developer in that it does not help you debug after the page has been sent to the client. Instead, it allows you to intercept the HTTP conversation as it is happening.

Chapter 1

The End