Web Programming Tutorial First Week

2011

BINUS UNIVERSITY INTERNATIONAL

Raisa Anjani - 1301027504

Anthony Herlambang - 1301027580

04PAC

2

Web Programming 1st Week

After learning about Java language in Object Oriented Programming and Object Technology, now in

Web Programming we learn further about how to build website using JSP. JSP (Java Server Pages) is

a programming language that gives software developers the capability of generating dynamic

website based on HTML, XML, or other document types. It was released in 1999 by Sun

Microsystems as the contender of ASP and PHP. JSP is powerful programming language because it

conveys all the advantages that Java has, such as: having rich library, simple, object oriented, secure,

architecture neutral and portable, high performance, interpreted, threaded, dynamic and many

more.

For us that have been learning Java previous semester, JSP will be easier to understand rather than

ASP or PHP because we already familiar with the concept of object and Java syntax. On the other

hand, non-programmers tend to choose PHP for creating dynamic website because of its simplicity

compared with JSP (in order to use JSP we should have knowledge in Java language and Object

Oriented Programming). Because the PHP users mostly do not have programming backgrounds, they

tend not to concern about security. As a result the website becomes vulnerable. While for ASP, it is

launched by Microsoft in 1996 with .asp or .aspx extension. Pages with the .aspx extension use

compiled ASP.NET which makes them faster and more robust than server-side scripting in ASP.

Programmers write most ASP pages using VBScript, Jscript, and PerlScript.

That is a brief discussion about PHP and ASP. Now before we get deeper about how to create JSP

pages, there are several environment and tools setup that must be fulfilled. This is the list of

software that user must have in order to build JSP based website:

1.

Java Development Kit (JDK)

2.

NetBeans IDE 6.9.1

3.

Apache Tomcat

JSP pages will be built using NetBeans IDE and run under Apache Tomcat server. JDK from Sun

Microsystems will enable us to compile and run Java based application in our computer.

Installing JDK (Java Development Kit)

1. Download the latest JDK on

http://www.oracle.com/technetwork/java/javase/downloads/index.html

2. Look for Java SE 6 Update 24, and then choose Download JDK.

3

3. Run the installer and follow the steps until the installation is finished.

Installing NetBeans and Apache Tomcat

1. Download NetBeans 6.9.1 on http://netbeans.org/downloads/index.html

2. You will see various choices of NetBeans IDE Download Bundles, choose All.

4

3. After finished downloading, run the installer and select customize.

4. Search for Apache Tomcat 6.0.26 and tick it.

5. Press ok and finish the installation. Now you will have NetBeans and Apache Tomcat

installed in your laptop.

For more information about installing NetBeans 6.9.1 you may go to this link:

http://netbeans.org/community/releases/69/install.html

5

* The latest Apache Tomcat which is version 7.0.11 is not yet compatible for NetBeans

6.9.1, so it is better to install Apache Tomcat from NetBeans 6.9.1 installer which will

automatically integrate Tomcat in your NetBeans.

Starting and Stopping Apache Tomcat

1. To start Tomcat, first open NetBeans, go to Services tab, and then choose Servers. You will

see Apache Tomcat 6.0.26 in the list, right click on it then select Start.

2. To stop Tomcat, first open NetBeans, go to Services tab, and then choose Servers. You will

see Apache Tomcat 6.0.26 in the list, right click on it then select Stop.

*In the server list you may see two different servers which are Apache Tomcat and

GlassFish. In Web Programming we use Apache Tomcat server. Their main difference is

Apache Tomcat used for general web application whereas GlassFish is used for enterprise

application.

6

Testing Apache Tomcat

To test whether the server has been run or not:

1. Make sure your Tomcat is running then open your web browser.

2. Type http://localhost:8084/ in the URL bar. If the server is running, the browser will show

the page below.

When you host your web pages in a server like Apache Tomcat, you can access other data in the

different computer using static routing.

How to do static routing and connect 2 computers?

1. Connect both computers using crossover cable.

*Image from http://www.aboutonlinetips.com/how-to-setup-home-network/

7

*Image from http://dhika.cikul.or.id/crossover-ethernet-cable.html

To create cross cable you first create normal configuration (T-568A), then for the second RJ-45 you

switch cable 1 with 3 and cable 2 with 6 (T-568B).

2. In both computers open Control Panel\Network and Internet\Network and Sharing Center.

Then choose Local Area Connection.

8

3. Choose properties.

4. Then choose Internet Protocol Version 4 (TCP/IPv4), click on properties.

9

5. Then select use the following IP address and fill as below to computer 1.

6. For computer2 the configuration is as below.

7. Press OK.

8. Open command prompt and try to ping other computer by typing ping 192.168.0.2; from

computer1. If the packet is successfully sent, then the connection is already built.

10

9. Now you can access computer2’s JSP pages by typing http://192.168.0.2/application name/ on

the web browser.

NetBeans vs. EditPlus and other text editor

There are some differences in case of coding JSP in the NetBeans IDE and EditPlus or other text

editor.

In NetBeans when you build a Web Application project, all your needs will be provided by

NetBeans automatically. The XML file is one of the examples.

NetBeans automatically start Apache Tomcat and link it to your application that uses Tomcat as

a server by compiling and running the application.

When you code it in EditPlus and other text editor, you have to do all configurations manually.

And of course you also have to set up your application in order to connect it to the server.

Web Browser

Web browser is program that is used for retrieving and presenting information in form of web page

that is identified by Uniform Resource Identifier on the World Wide Web. Web page contains

hyperlinks that enable users to navigate the browser easily to the related resources.

Besides accessing World Wide Web, browser can also used to access information provided by the

web server in private networks or file systems such as our own-made HTML page.

Web Server

A web server is referred to both hardware and software that helps to deliver content that can be

accessed through the Internet. Its primary function is to handle request and respond of the client by

delivering web pages in form of HTML documents on request of the client (which commonly a web

browser). Because you never know when user will visit and use your web application, web server

must be up and running all the time.

Request and Response *referenced from Java for the Web with Servlets, JSP, and EJB: A Developer's Guide to J2EE Solutions

11

When you type URL in the Address box of your browser, the following things happens:

The client browser establish a TCP/IP connection to the server

The browser send request to the server

The server send respond to the client (web browser)

The server closes the connection

*Image from http://www.cs.uregina.ca/Links/class-info/215/Webpage/

HTTP *referenced from Java for the Web with Servlets, JSP, and EJB: A Developer's Guide to J2EE Solutions.

HTTP is the protocol that allows web servers and browsers to exchange data over the web. It is a

request and response protocol. The client requests a file and the server responds to the request.

HTTP uses reliable TCP connections—by default on TCP port 80.

In HTTP, it's always the client who initiates a transaction by establishing a connection and sending an

HTTP request. The server is in no position to contact a client or make a callback connection to the

client. Either the client or the server can prematurely terminate a connection. For example, when

using a web browser you can click the Stop button on your browser to stop the download process of

a file, effectively closing the HTTP connection with the web server.

HTTP Requests

An HTTP transaction begins with a request from the client browser and ends with a response from the server. An example of an HTTP request is the following:

GET index.jsp HTTP/1.1

Host: localhost

GET is the request method; index.jsp represents the URI and HTTP/1.1 the Protocol/Version

section.

HTML

In order to get better understanding of JSP, first we will look into HTM. HTML (Hypertext Markup

Language) is the basic building blocks for website. It is written in the form of HTML

elements consisting of tags that are enclosed in angle brackets <HTML>. HTML uses markup tags to

12

describe web pages. HTML tags normally come in pairs like <BODY> and </BODY>. The first tag is

the start tag, the second tag is the end tag (they are also called opening tags and closing tags).

W3schools is a website that provides an online HTML tutorial. You may learn the basics of HTML and

other web related language such as PHP, ASP, CSS, and many more.

Here is the link of w3schools for learning HTML: http://www.w3schools.com/html/default.asp.

To create a HTML documents you simply create new text file, and name it with .html or .htm

extension. You may open the file using web browser such as: Google Chrome, Mozilla Firefox, Opera,

Safari, Internet Explorer, etc.

Browsers are able to read HTML documents and display them as web pages. The browser does not

display the HTML tags, but uses the tags to interpret the content of the page. Here are some of the

basic tags to create HTML documents:

<html> <head> <title>My Web Page</title> </head> <body> <h1>Heading1</h1> <p>Paragraph</p> </body> </html>

All the HTML documents should start with <HTML> tag and end with </HTML>. The head element is

a container for all the head elements. Elements inside <head> can include scripts, instruct the

browser where to find style sheets, provide meta information, and more. The body is where we

declare all our web content.

13

Here, we will briefly discuss 2 basic HTML functionalities: HTML Table and HTML form. The rest of it

you may learn it as the lesson goes.

HTML Table

*referenced from w3schools.com

Tables are defined with the <table> tag. A table is divided into rows <tr>, and each row is divided

into data cells <td>.tr stands for “table row” and td stands for "table data”.

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML form

*referenced from w3schools.com

HTML forms are used to pass data to server. A form can contain input elements, select list, text area,

field set, legend, and label elements

Input elements:

Text fields

Checkboxes

Radio-buttons

Submit buttons

Etc.

The <form> tag is used to create an HTML form.

<form method="get" action="html_form_action.asp"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

The method attribute specifies how to send form-data (the form-data is sent to the page specified in

the action attribute).The form-data can be sent as URL variables (with method="get") or as HTTP

post (with method="post").

14

Method specifies the How the HTML code above looks in a browser:

The form itself is not visible. Also note that the default width of a text field is 20 characters. *More details implementation of form will be discussed in the exercise.

Building your first JSP page

1. Open your NetBeans and choose File New Project. Click on Java Web then choose Web

Application. Click next.

15

2. Fill the project name (in this case MyFirstJSP) and determine your saving location. Click next.

3. Choose Apache Tomcat as the server and Java EE 5 version. Click next.

16

4. Leave all empty and click finish.

5. Below is your first JSP will look like. You may find your JSP page under directory Application

Name/Web Pages or in this case MyFirstJSP/Web Pages. Then you may start to build and modify

the JSP page.

17

6. To compile and run it press Shift+F6.The JSP pages will be shown on your browser like below.

*For the Java EE Version you may see 2 different versions which are Java EE 5 and J2EE 1.4. Java EE 5 is the newer version of J2EE 1.4. It has more APIs and functionalities than the latest J2EE. *The name of the Java platform for the enterprise has been simplified. Formerly, the platform was known as Java 2 Platform, Enterprise Edition (J2EE), and specific versions had "dot numbers" such as J2EE 1.4. The "2" has been dropped from the name, as has the minor revision number. So the next version of the Java platform for the enterprise is Java Platform, Enterprise Edition 5 (Java EE 5).

18

EXERCISE

Now after you understand the basic of HTML and JSP, we will create login page and examine the

parameter.

Modify My First JSP into a login page that looks like below in the browser:

When user press OK button, it will check the username and password. If it is correct it will redirect to

welcome page and show Welcome (name), otherwise it will show INVALID.

In this example, the valid value for username is “user” and password is “user”.

CORRECT PASSWORD

Username: user Password: user

WRONG PASSWORD

Username: user Password: apple

19

Solution:

index.jsp

Code:

<html> <head> <title>JSP Page</title> </head> <body> <form method="get" action="Welcome.jsp"> Username:<input type="text" name="user"><br/> Password:<input type="password" name="pass"><br/> <input type="submit" value="Submit"> </form> </body> </html>

To create a login form, you use form and input tag in the BODY of index.jsp as shown above and

below are the explanation of the form and input attributes.

<form name="input" action="Welcome.jsp" method="get">

Name: <input type="text" name="user"><br/> Password: <input type="password" name="pass"><br/>

<input type="submit" value="Submit"> </form>

“method=” specify how to send form-data (the form-data is sent to the page specified in the action

attribute).The form-data can be sent as URL variables (with method="get") or as HTTP post (with

method="post").

“action=”redirect page to specified path.

“type=” specify the type of input that will be shown in the browser. Below are the mostly used types:

a. text: create a text field

This will be name

of this form

Data will be sent to

Welcome.jsp

20

b. password: create a text field which value is hidden from the user

c. submit: create a button

“value=” specify the text that will be shown on screen of a specific element (*Text Submit in submit

button is caused by value).

“name=”the name of the elements that will be used as parameter name. (It is used for retrieving

parameter value using getParameter command)

Welcome.jsp

Code:

<html> <head> <title>JSP Page</title> </head> <body> <% String user = request.getParameter("user"); String pass = request.getParameter("pass"); if (user.equals("user") && pass.equals("user")){ out.println("Welcome " +user+" !"); }else{ out.println("INVALID"); } %> </body> </html>

In the body of Welcome.jsp we process the data that we receive from index.jsp. Here is the

explanation of the logic:

<% symbol is used to start enclosing java code %> symbol is used to marks the end of java code and you may start to code in HTML again Java code that is enclosed by <% %> is called Scriptlet.

In JSP you can print words to the browser by using java code: out.print(); /out.println();

<%

String user = request.getParameter("user");

String pass = request.getParameter("pass");

if (user.equals("user") && pass.equals("user")){

out.println("Welcome " +user+" !");

}else{

out.println("INVALID");

}

%>

The getParameter method is used to get

parameter passed from index.jsp

“user” will get the value of the

username and “pass” will get the value

of the password.

If the username and password is correct

(equals to ”user”) then it will

print ”Welcome (the username) !”

(In this case the username is user so it

will print “Welcome user!”)

If username or password wrong then it

will print “INVALID”.

21

POST and GET

GET <form method="get" action="Welcome.jsp"> Username :<input type="text" name="user"><br/> Password :<input type="password" name="pass"><br/> <input type="submit" value="Submit"> </form>

As we can see, we use form tag to pass data to server then redirect it to Welcome.jsp. GET method is

used to simply retrieves the data identified by URL. It will show the parameter passed on the header

so user may see it. The URL shows our username and password that we inputted before in the

index.jsp

POST <form method="post" action="Welcome.jsp"> Username :<input type="text" name="user"><br/> Password :<input type="password" name="pass"><br/> <input type="submit" value="Submit"> </form>

The other method that mostly used is POST. POST is the HTTP request method that transfers data

(parameters) to the server in the entity body of the request. So, it won’t show our username or

password on the URL. It usually used in the login pages where the information passed to server is

confidential. Using POST method the parameter will be hidden from the user.

Difference between GET and POST:

*the table is referenced from w3schools.com

GET POST

This method appends the form-data to the URL in name/value pairs

This method is useful for form submissions where a user want to bookmark the result

There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred

Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

This method sends the form-data as an HTTP post transaction

Form submissions with the "post" method cannot be bookmarked

The "post" method is more robust and secure than "get", and "post" does not have size limitations

22

This explanation about POST and GET will end this tutorial. Hopefully through this tutorial you may

get better understanding about the basic of JSP. Deeper explanation about JSP and Servlet will be

done on the next session. Thank you.