raisa anthony web programming 1st week
TRANSCRIPT
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.