Fundamental JSP code structure that creates HTML file

We will now learn basics we need to know.

We can send file, make XML document, or download file using JSP. But the main purpose of JSP is to make a HTML file we wnat to show to the web browser. JSP page that creates HTML file branches into two types.

1. Information about jSP Page

2. HTML code

Example)

This is typical JSP code. Line 1 is information about JSP page, and Line 2~13 is HTML code & JSP script, actually creating HTML file.

Information on JSP usually consists of

• Type of document JSP page is creating
• Custom tag JSP page will use
• Designation of Java class Jsp page will use

You can enter many other informations, and we will learn the “other informations” as we go on.

Line 1: <%@ page contentType = “text/html; charset=UTF-8” %>

is saying that “the document JSP page is creating is HTML and the character set of this document is all possible characters“.

* Character set

Character set is set of characters. For example, character set showing Korean is EUC-KR, alphabet and latin  is ISO-8859-1.. There exists set for all characters. In addition, there is Unicode  which bind all the major character sets in the world to one set. Unicode includes not only aphabet, but also characters used in Europe ,Korean, Chinese, etc. There are several types of Unicode character set. The most popular one is UTF-8. Most websites that provide multiple language uses UTF-8 like google.

We call <%@ page …%> a page directive. This is used when showing information on JSP Page. You can set many other informations using page directive — we will learn this later.

Line 2~ 13:
When creating actual HTML code, there exists script code you need when making data and documents for HTML.

On our example, the script code is <% … %>.

Simple jsp code (showing current time)

I haven’t post since forever 😦 i felt so bad last several days. So I thought I must write at least one post today.

Today we will write a simple jsp code that makes a webpage showing current time and date.

First, open eclipse and make a new jsp project called “now”.

Then you will see a screen like this.

2. Write down this code.

3. Save it to the tomcat directory. 

* I made a folder called “practice” in the tomcat directory. Then I saved this now.jsp inside practice.

4. Start tomcat! 

If you don’t remember how to start tomcat, go to terminal.

Go to the directory you installed tomcat by entering $cd ___.

If you are at tomcat folder, do $cd bin, and do ./startup.sh 🙂

4. Enter this into URL:

http://localhost:8080/practice/now.jsp

It should not be “practice” . It should be name of your folder.

You should be able to see something like this! 😀

It will differ depending on your country.

How to make a new project in eclipse

1. Open eclipse we downloaded.

Go to file > new > project.

2.

Find ‘Web’ and click ‘Dynamic Web Project’.

Name the project to anything you want. I named it Test1.

Then click New Runtime.

3.

Find the right tomcat version and do finish!
    You will see this on the left of the eclipse screen.

Right click ‘Web Content’

New > JSP file!

Name the file to anything.

Click Finish! You are done 🙂

How to install JSP & JRE & Tomcat 8 & Eclipse EE version

Whoa. I spent almost 2 hours just preparing development environment for JSP. :0

I first downloaded latest version JDK 8.0.21, which was fairly simple. You can download it in here:
http://www.oracle.com/technetwork/java/javase/downloads/index.html

You also have to download JRE!

JDK is development tool and JRE is runtime environment. If you only install JRE, you can run the java application but you can’t actually develop a java application. For example, if JDK is not installed, then you can’t compile the java source code. Also it is very rare to install just JRE. Usually people install JDK & JRE together! 🙂

After that, I downloaded web container, Tomcat (version 8). — This was the part that took me the longest time 😦

I looked at the website carefully, remembering JDK and Tomcat go as a pair. So it is important to pick a right version to download! It turns out Tomcat 8 is suitable to JDK 8.0.21. So I downloaded tomcat 8.

You can download Tomcat in here: http://tomcat.apache.org/

If you are mac user, download tar.gz file! 🙂

Next is the hardest part!

After downloading, you will see the file “apache-tomcat-8.0.21.tar.gz” 

unzip it. Then, tomcat is installed.

I renamed it to tomcat to make it more convenient to run! 🙂

Go to the terminal.

go to the directory where tomcat is installed. For me, it was Downloads.

Do $pwd — this shows your location.

 if you want to move to different folder, you can do so by first going to home directory.

Do $~ . Then move to the folder by doing $cd _____. e.g $cd Desktop, $cd NewFolder.

If you are at the folder tomcat is installed, Do $tomcat or $apache-tomcat-8.0.21 if you didn’t rename the folder.

Then go to bin folder by typing cd bin.

Then executes startup.sh by ./startup.sh — Downloads tomcat. 

After that, you can check if tomcat is installed successfully by going to this website:

http://localhost:8080

If this screen shows, it means you successfully installed tomcat! 😀

3. Install code editor

You can download any code editor, but I chose eclipse.

You can download eclipse here:http://www.oracle.com/technetwork/developer-tools/eclipse/downloads/index.html

i struggled finding right one to download, which also took me forever.

But you can trust me. This one will work! 🙂

This will take long time to download. When you are done, go to the eclipse folder. and run !

What do we need before start developing web application?

In order to develop a web application using JSP and Servlet, you need at least three programs:

• JDK
  • “The Java Development Kit (JDK) is an implementation of either one of the Java SE, Java EEor Java ME platforms^[1] released by Oracle Corporation” (Wikepedia).
  • You need at least JSP 2.2/ Sublet 3.0
• Web Container
  • Executes JSP and servlet.
  • Tomcat, GlassFish, jetty
• Code editor
  • need it to write Java source code
  • You can use notepad, but it is recommended to use IDE
    • UltraEdit, acroEdit.. or Eclipse, NetBeans

Servlet and JSP

Sun Microsystems (who made Java language) made Servlet.

What is Servlet?

“A servlet is a Java programming language class that is used to extend the capabilities of servers that host applications accessed by means of a request-response programming model.” (Oracle.com)

in order to make servlet, you have to write java code, compile it and make a class file. Therefore, servlet is action code we talked about previously. Thus, if you develop an application using servlet, you have to repeat the process of recompiling the source code every time you want to change a data, which is not efficient.

To complement this flaw, Sun made JSP (Script method). Since it is easier to change code with script (you change the code,  and it reflects the revision right away) JSP has become major technology used to develop web applications.

JSP bases on Servlet, which means when JSP file is interpreted, servlet is made.. Thus, Servlet and JSP works together as a pair. For example, Servlet 2.4 & JSP 2.0 go together, Servlet 2.5 & JSP 2.1 go together.

Since JSP depends on Servlet, it is good to understnad servlet. However, it is possible to develop an web application without knowing servlet using JSP.

Script and Action code

Web application programming can be categorized to two different codes depending on the implementation.

Action code (code)

• It is a compiled program
• How it runs? It executes machine language directly
• When changing code
  • You have to re-compile the source code
• CGI program

Script

• It is not compiled script code.
• It runs after interpreting script code
• When changing code
  • You can just fix the script code
• JSP, ASP.net, PHP, Ruby etc..

Difference between code and script graphically

Code

web browser requests -> web server receives -> executes program

Script

Web browser requests -> web server receives -> interpret script code -> executes interpreted code

Script code runs faster because

• script code interpretation happens only once. It minimizes number of interpretation by re using interpreted code.
• Action code is usually CGI method.
• Not only it is better in performance, it is easier and faster to implement application with script.

Web application and web programming

Web application is an application that executes based on web. We access to websites using web browsers like Internet Explorer and Firefox and web browser shows the website. By entering sentences like ‘http://www.google.com&#8217; to web browser, we request web application to do so. Then web application creates a result corresponding to the request and send it back to web browser.

In order to provide what web browser requests, we usually need web server, application server, and data base.

• Web server
  • Receive request from web browser, and send appropriate result to web browser.
  • If it needs program to handle it, it uses application server or call program directly to create right result.
  • Often used when providing HTML, image, CSS, Java Script files.
  • Apache, ngnix
• Application server
  • Handles something like log-in, list of posts and send it back to web server
• Data base
  • Stores datas web application needs such as member informations, blog posts data..
  • Oracle, MySQL, MSSQL
• Web Browser
  • Request service execution to web server, and shows the result to users.
  • Internet Explorer, Google Chrome, Fire Fox

Here is a brief graph explaining relations!

http://www-01.ibm.com/support/knowledgecenter/SSAW57_8.0.0/com.ibm.websphere.nd.doc/info/ae/ae/tins_webplugins_remotesa.html

Application server can also provide HTML, CSS, image, but the reason why web server provides images and application server provides program is performance. Generally, web server like Apache is well focused on  providing HTML & CSS and application server like Tomcat & Jboss does a good job of providing result using JSP, Servlet.

CGI & Application server 

To summarize, web browser first request service to web server, and web server send back the right data using web application program. We can say there are two different types of web application depending on how web server run web application programs.

1. CGI method

2. Application server method

What is CGI?

“Abbreviation of Common Gateway Interface, CGI is a specification for transferring information between a World Wide Web server and a CGI program. A CGI program is any program designed to accept and return data that conforms to the CGI specification. The program could be written in any programming language, including C, Perl,Java, or Visual Basic.” (webopedia).

Basically, it is a specification for transferring information between web server and program.

The difference between CGI and application server is whether web server directly call the program.

<How CGI works>

request -> web server -> (directly calling) perl program

-> (directly calling c program

When web browser request web server to execute program, web server directly calls CGI program written in perl or C, and send them back to the web browser.

If the address ends with cgi like http://www.some.com/somepath/mt.cgi, it means that website used CGI method.

<How application server works>

Rather than calling program directly, it indirectly executes web application program using web application server.

request -> web server -> application server -> program1

-> program 2

In this method, application server transfer the result to web server and web server transfer it back to web browser. Most web application uses this method.

*Application server method is preferred when a lot of people connect to this website.

Let’s say, N web browsers requested same program. CGI will load N programs, which means if the number of web browsers connected at the same time increases, memory required to execute program will increase proportionally. This will slow the program loading time.

On contrary, application server calls program only once, regardless of the number of web browsers connected at the same time. This means less memory uses.

Then, this way is much more efficient to handle portal with large traffic!