The document provides an overview of setting up a development environment to build Java Server Pages (JSP) based websites. It discusses installing the Java Development Kit (JDK), NetBeans IDE, and Apache Tomcat server. It then demonstrates how to create a basic "Hello World" JSP page in NetBeans and run it using Apache Tomcat. Finally, it provides an exercise to create a login page in JSP and validate the user credentials.

1. Web ProgrammingTutorial First Week2011BINUS UNIVERSITY INTERNATIONALRaisa Anjani - 1301027504Anthony Herlambang - 130102758004PAC<br />Web Programming 1st Week<br />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. <br />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.<br />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:<br />1.-3111535560 Java Development Kit (JDK)2.16510114300NetBeans IDE 6.9.1 3.1651052070Apache Tomcat <br />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.<br />Installing JDK (Java Development Kit)<br />Download the latest JDK on http://www.oracle.com/technetwork/java/javase/downloads/index.html <br />Look for Java SE 6 Update 24, and then choose Download JDK.<br />694771-334370<br />Run the installer and follow the steps until the installation is finished.<br />Installing NetBeans and Apache Tomcat<br />Download NetBeans 6.9.1 on http://netbeans.org/downloads/index.html <br />You will see various choices of NetBeans IDE Download Bundles, choose All.<br />After finished downloading, run the installer and select customize.<br />Search for Apache Tomcat 6.0.26 and tick it.<br />Press ok and finish the installation. Now you will have NetBeans and Apache Tomcat installed in your laptop.<br />For more information about installing NetBeans 6.9.1 you may go to this link:<br />http://netbeans.org/community/releases/69/install.html<br />-31750* 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.<br />Starting and Stopping Apache Tomcat<br />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.<br />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.<br />-5905596520*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.<br />Testing Apache Tomcat<br />To test whether the server has been run or not:<br />Make sure your Tomcat is running then open your web browser.<br />Type http://localhost:8084/ in the URL bar. If the server is running, the browser will show the page below.<br />When you host your web pages in a server like Apache Tomcat, you can access other data in the different computer using static routing.<br />How to do static routing and connect 2 computers?<br />Connect both computers using crossover cable.<br />*Image from http://www.aboutonlinetips.com/how-to-setup-home-network/<br />*Image from http://dhika.cikul.or.id/crossover-ethernet-cable.html<br />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).<br />In both computers open Control Paneletwork and Internetetwork and Sharing Center. Then choose Local Area Connection.<br />Choose properties.<br />Then choose Internet Protocol Version 4 (TCP/IPv4), click on properties.<br />Then select use the following IP address and fill as below to computer 1.<br />For computer2 the configuration is as below.<br />Press OK.<br />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.<br />Now you can access computer2’s JSP pages by typing http://192.168.0.2/application name/ on the web browser. <br />NetBeans vs. EditPlus and other text editor<br /> <br />There are some differences in case of coding JSP in the NetBeans IDE and EditPlus or other text editor.<br />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.<br />NetBeans automatically start Apache Tomcat and link it to your application that uses Tomcat as a server by compiling and running the application.<br />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.<br />Web Browser<br />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.<br />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.<br />Web Server<br />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.<br />Request and Response<br />*referenced from Java for the Web with Servlets, JSP, and EJB: A Developer's Guide to J2EE Solutions<br />When you type URL in the Address box of your browser, the following things happens:<br />The client browser establish a TCP/IP connection to the server <br />The browser send request to the server<br />The server send respond to the client (web browser)<br />The server closes the connection<br />164084085090<br />*Image from http://www.cs.uregina.ca/Links/class-info/215/Webpage/<br />HTTP *referenced from Java for the Web with Servlets, JSP, and EJB: A Developer's Guide to J2EE Solutions.<br />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.<br />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.<br />HTTP Requests<br />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:<br />GET index.jsp HTTP/1.1 <br />Host: localhost <br />GET is the request method; index.jsp represents the URI and HTTP/1.1 the Protocol/Version section.<br />HTML<br />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 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).<br />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.<br />Here is the link of w3schools for learning HTML: http://www.w3schools.com/html/default.asp. <br />45593013335<br />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. <br />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:<br /><html><head><title>My Web Page</title></head><body><h1>Heading1</h1><p>Paragraph</p></body></html><br />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.<br />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.<br />HTML Table*referenced from w3schools.com<br />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 quot;
table data”. <br /><table border=quot;
1quot;
><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><br />How the HTML code above looks in a browser:<br />row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2<br />HTML form*referenced from w3schools.com<br />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<br />Input elements:<br />Text fields<br />Checkboxes<br />Radio-buttons <br />Submit buttons <br />Etc.<br />The <form> tag is used to create an HTML form.<br /><form method=quot;
getquot;
action=quot;
html_form_action.aspquot;
>Username: <input type=quot;
textquot;
name=quot;
userquot;
><input type=quot;
submitquot;
value=quot;
Submitquot;
></form><br />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=quot;
getquot;
) or as HTTP post (with method=quot;
postquot;
).<br />Method specifies the How the HTML code above looks in a browser:<br /> Top of FormBottom of Form<br />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.<br />Building your first JSP page<br />Open your NetBeans and choose File New Project. Click on Java Web then choose Web Application. Click next.<br />Fill the project name (in this case MyFirstJSP) and determine your saving location. Click next.<br />Choose Apache Tomcat as the server and Java EE 5 version. Click next.<br />Leave all empty and click finish.<br />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.<br />To compile and run it press Shift+F6.The JSP pages will be shown on your browser like below.<br />-34290395605*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 quot;
dot numbersquot;
such as J2EE 1.4. The quot;
2quot;
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).<br />EXERCISE<br />Now after you understand the basic of HTML and JSP, we will create login page and examine the parameter.<br />Modify My First JSP into a login page that looks like below in the browser:<br />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.<br />In this example, the valid value for username is “user” and password is “user”.<br />CORRECT PASSWORD<br />Username: user Password: user<br /> <br />WRONG PASSWORD<br />Username: user Password: apple<br />Solution:<br />index.jsp<br />Code:<br /><html> <head> <title>JSP Page</title> </head> <body> <form method=quot;
getquot;
action=quot;
Welcome.jspquot;
> Username:<input type=quot;
textquot;
name=quot;
userquot;
><br/> Password:<input type=quot;
passwordquot;
name=quot;
passquot;
><br/> <input type=quot;
submitquot;
value=quot;
Submitquot;
> </form> </body></html><br />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.<br />This will be name of this formData will be sent to Welcome.jsp<br /> <form name=quot;
inputquot;
action=quot;
Welcome.jspquot;
method=quot;
getquot;
><br /> Name: <input type=quot;
textquot;
name=quot;
userquot;
><br/><br /> Password: <input type=quot;
passwordquot;
name=quot;
passquot;
><br/><br /><input type=quot;
submitquot;
value=quot;
Submitquot;
><br /></form><br />27305125730<br />“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=quot;
getquot;
) or as HTTP post (with method=quot;
postquot;
).<br />“action=”redirect page to specified path.<br />“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 b. password: create a text field which value is hidden from the user c. submit: create a button<br /> “value=” specify the text that will be shown on screen of a specific element (*Text Submit in submit button is caused by value).<br />“name=”the name of the elements that will be used as parameter name. (It is used for retrieving parameter value using getParameter command)<br />Welcome.jsp<br />Code:<br /><html> <head> <title>JSP Page</title> </head> <body> <% String user = request.getParameter(quot;
userquot;
); String pass = request.getParameter(quot;
passquot;
); if (user.equals(quot;
userquot;
) && pass.equals(quot;
userquot;
)){ out.println(quot;
Welcome quot;
+user+quot;
!quot;
); }else{ out.println(quot;
INVALIDquot;
); } %> </body></html><br />In the body of Welcome.jsp we process the data that we receive from index.jsp. Here is the explanation of the logic:<br /> <% 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 againJava code that is enclosed by <% %> is called Scriptlet.-17145-447675 In JSP you can print words to the browser by using java code: out.print(); /out.println(); <br />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.<br /><%<br />String user = request.getParameter(quot;
userquot;
);<br />String pass = request.getParameter(quot;
passquot;
);<br />if (user.equals(quot;
userquot;
) && pass.equals(quot;
userquot;
)){<br />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”. out.println(quot;
Welcome quot;
+user+quot;
!quot;
); <br /> }else{<br /> out.println(quot;
INVALIDquot;
);<br />}<br />%><br />POST and GET<br />GET<br /><form method=quot;
getquot;
action=quot;
Welcome.jspquot;
><br /> Username :<input type=quot;
textquot;
name=quot;
userquot;
><br/><br /> Password :<input type=quot;
passwordquot;
name=quot;
passquot;
><br/><br /> <input type=quot;
submitquot;
value=quot;
Submitquot;
><br /></form><br />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<br />POST<br /><form method=quot;
postquot;
action=quot;
Welcome.jspquot;
><br /> Username :<input type=quot;
textquot;
name=quot;
userquot;
><br/><br /> Password :<input type=quot;
passwordquot;
name=quot;
passquot;
><br/><br /> <input type=quot;
submitquot;
value=quot;
Submitquot;
><br /></form><br />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.<br />Difference between GET and POST:<br />*the table is referenced from w3schools.com<br />GETPOSTThis method appends the form-data to the URL in name/value pairsThis method is useful for form submissions where a user want to bookmark the resultThere 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 transferredNever use the quot;
getquot;
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 transactionForm submissions with the quot;
postquot;
method cannot be bookmarkedThe quot;
postquot;
method is more robust and secure than quot;
getquot;
, and quot;
postquot;
does not have size limitations<br />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.<br />