One way that Java is utilized for web applications is with JSP & Servlets. So I’m going to walk you through creating a basic JSP page using Tomcat like we did in class.
With JSP, a request is sent from the client machine/browser (like when you press a submit button) to the web server, and on the web server or application server, java code is ran/executed and a result is sent back in HTML. So with JSPs, the java runs on the server-side, and the HTML runs on the client-side in the browser.
Personal note: I love this kind of development the most, because we’re now getting into web application development that involves server-side code. It’s very valuable to understand and very fun to work with. In corporations, this type of development allows for database-driven web applications, which dominates application development and software in IT nowadays. Most corporate IT software packages are web-based these days, because it requires less maintenance of employee PCs (because the application is running on a server and employees only need a web browser), it empowers application communication across the enterprise through servers (rather than having to have PCs chatting away with databases and other servers), the heavy lifting of applications can be ran on powerful servers rather than relying on the capacity of client-side desktop machines, and changes to an application are made in one place on a server rather than updating a desktop app that every PC has to download and install. There are many other reasons, but these are just a few.
NOTE: All of the instructions are similar to what we did in class, so follow along closely and you’ll be turning in the JSP file at the end of all this.
Part I – Install and test Tomcat
Install.
Go to:
http://Tomcat.apache.org
Click on most recent version on left menu.
WINDOWS users:
“Binary Distributions” section: Downlad “32-bit/64-bit Windows Service Installer”
MAC users:
Download “Core” > “Zip”
When you unzip it locally, you’ll run in bin folder the startup.sh file to start tomcat.
Skip f. below as this is Windows-specific and jump down to 2. Test.
Once you’ve installed it, you can go to Start and run Tomcat monitor or just click start menu and start typing “Tomcat” to find it.
This will probably bring up a little icon in your system tray in the bottom right.
If you double click that icon, this will bring up a window with a start button on it.
If the start button is clickable, click it. If it’s not, and “stop” is enabled, that means Tomcat is running.
NOTE: If start button doesn’t work and you can’t start Tomcat even though you installed it, try this:
Simply go to your Windows File Explorer, and go to this folder:
C:\Program Files\Apache Software Foundation\Tomcat 9.x\bin
And double click: tomcatx.exe
That should bring up a black console window running Tomcat, and you can x that window out when you want to stop it.
Test.
Tomcat is simply a servlet container and a web server. That means it can serve up html files as well as JSP pages.
STEP 1: Test Home Page
Tomcat comes with a home page, so let’s test that first.
Open up a browser and type in:
http://localhost:8080/
or
You should see a web page come up. This is the default web page that comes with Tomcat. That is running off your own Tomcat server on your computer – it’s not getting this page from the Internet. “localhost” is telling your browser to call your own computer, and we’re telling it to call on port 8080, which is the default port Tomcat uses. Port 80 is the common port for HTTP calls to web servers. When you go to www.google.com, it’s on port 80, but we don’t have to specify that in the url, because 80 is the default.
STEP 2: Test HTML Page
Now, we’re going to create an HTML page and then a JSP page to check our install.
Open up Windows File Explorer so that we can find the folder where the root website is. Look in C:>>Program Files>>Apache Software Foundation>>Tomcat 8.x>>webapps>>ROOT.
This ROOT folder is where we’re going to add files to run.
Right click in this folder and add new text file.
NOTE: You probably only see the option to add a new folder.
To enable the choice of adding a text file, do the following:
Go back up two folders and right click on the webapps folder.
Go to properties >> Security tab >> big “edit” button.
Click on “users…” check box.
In Full Control below, check “Allow”.
Then Okay, and then Okay again.
Then go into root folder, right click in white space and see if you get more than just the new folder option now.
Once you’ve created the text file, rename the text file to test.html
NOTE: Make sure you can see file extensions in your Windows file explorer… if you don't see the extensions, like .txt or .html, then look for the setting to show extensions up in the View menu.
Right click the file and open with notepad or any other text editor you have.
Now in this file, type:
It Works!
Feel free to change the message if you want.
SAVE the file. Don’t forget that you need to always save java or html files first to see any change in your browser.
Now in your web browser go to:
http://localhost:8080/test.html
You should see your message.
STEP 3: Test JSP Page
Now you’re going to create your first JSP page.
With JSP pages, the important thing to remember is that anything between these symbols <% %> will be java code ran on the server. Everything outside of them is HTML and is ran/processed in the browser.
Therefore, the java code is going to return a string that will fit into the HTML that surrounds these: <% %>
Let’s create an example and a test to make sure Tomcat is working properly.
Create a new file in the same folder as test.html, and call it test.jsp
Open this new file in and type this into it:
My favorite color is: <%= "blue "%>
[Warning: Copying from this document into your text editor will sometimes replace different encoded characters. So you’re better off just typing it in.]
IMPORTANT: Now simply hit “save.” There’s no compiling that you have to do with JSP pages. Every time you edit them and hit save, a simple refresh in the browser will give you the new updated page.
Once you’ve done this, you can go back to your browser and simply change .html to .jsp:
http://localhost:8080/test.jsp
Did that work?! If it did, that’s your first JSP page… Congrats!
Part II – JSP Code and creating your own JSP
JSP java code.
The first thing you’ll notice about the above is that ="blue" doesn’t seem like a complete Java line. The reason is because when we start with = …returning a string is already built into the JSP/Servlet construction.
But you can also put normal code in between the tags: <% %> …you could put many, many lines, and then you could print those values out with <%=…%>
Adding to your JSP page:
Hit return a few times after the %> and before the …this is where we’re going to be adding a lot of code.
Add these lines:
<%
int x = 1;
int y = x + x;
%>
The value of y is: <%= y %>
You can see that the two lines declaring variables are familiar to you, and we then print out the answer to the web page. Note: the
is HTML code that visually is a line break that goes to the next line. With two of these, the point where it’s printing out characters moves from the end of “blue” to the next line and then to the next line.
So just always remember: HTML outside of these tags <% %>, and java inside of them.
Servlets and JSP pages.
A quick word now about servlets and JSP pages. All JSP pages are compiled upon first run into what’s called a servlet. A servlet is a java class like you’re familiar with that calls in Servlet packages to deal with HTTP requests. So a JSP page becomes a servlet. JSPs were only designed to make it easier for developers to make web pages in combination with server-side java code. A “servlet container” like Tomcat can run JSPs and servlets… it starts up a JVM and runs java on the computer it’s running.
In servlets, you can print out HTML code very similar to how we do it in console apps: System.out.println….etc. We’re actually going to use this type of line a little further down in our JSP page.
User Input.
Now we will be getting user input from a text box and manipulate that data in java code just like when we get input in the other apps we’ve been doing and manipulating the data. The difference here is that the user input is sent from the client’s web browser in an “HTTP request” and we access that data in java code and send back an “HTTP response.”
A tag in HTML is where you can add text boxes, buttons, etc. that allow the user to do things and then submit the information on that form to the web server. For instance, when you fill out info to register a new gmail e-mail account, or credit card info for an Amazon purchase, this data is entered into an HTML form and sent to the web server for processing when you hit that submit button.
So add this new code below the last addition we made, but above the closing HTML tag ():
First Name:
<%
if(request.getParameter("firstname") != null){
out.println("Your first name is: " + request.getParameter("firstname"));
// *** You’re going to add code here ***
%>
I'm putting this here to show you that HTML code can be sandwiched into an "if" statement.
You won't see this text until you've submitted this page once, because it's inside the "if" statement.
Okay, I have to close off this section now so that I can add the ending bracket to the "if" statement.
How many times can I end a sentence with these words: the "if" statement.
Okay, I guess 4.
<%
}
%>
Okay, first refresh your browser page now once you’ve saved this.
You should be able to type a value into the textbox and see it printed out upon hitting submit.
What’s going on with that weird looking “if” statement that mixes HTML and java Mr. Teacher Man?!!! Okay, this is where JSP gets a little messy, and there are many more involved alternatives and web frameworks out there that attempt to clean things up and separate java code from HTML, but that is beyond what we can tackle in this class.
When the java code is ran on the server, it runs through the code and is constantly building up a long string of html that it’s going to send back to the client who requested the page. If the conditional statement is false, then not only is the java code in between the brackets not run, but any HTML code in between the brackets is not added to the long string of HTML as well. As the java runs through this file, it treats all the html just like an out.println(“…”) line of code. So although this looks like an HTML file with a bunch of Java shoved in, it’s actually a java file (that gets turned into a class) that has a bunch of HTML shoved into out.println statements. We just see the former rather than the latter simply to make it easier for us developers to imagine the layout of the page we’re dealing with.
Also, realize that the first time the file is called, the firstname variable has not been passed in yet, hence the conditional statement is false. The form we created submits the form back to the same page, and now when the code is ran, firstname equals something so the conditional statement is true.
IMPOTANT: You can see this by the changing url. After you submit the page, you’ll notice “?firstname=Frank” has been added to the url. This is the parameter you sent. Also, it’s important to note that you may want to delete that off the url if you’re debugging and want to see the page in its original state again without all the text showing up.
Add some code:
Okay, now I want you to add some code on your own based on what you have here…
First, add a second textbox with a different name:
Duplicate the “First Name:<input…” line of HTML code by copying it to the next line before the “submit” line.
Change “First Name” to “Age”
Change the name parameter in this new line you created. “first name” is the name of the first one, so I want you to create your own parameter name for age. Whatever you use is what you’ll later use to retrieve it from the request.
Second, retrieve this new value and add it to the returned printed text.
Where I’ve said, “You’re going to add code here.”… I want you to duplicate my out.println… line of code and change it to retrieve your age parameter.
RESULT: Now the application should prompt the user for first name and age, and then it should print out two statements, one about your first name and one about your age.
OKAY, a lot in this introduction, but if you followed along and completed this lab, you’re much more aware of some of the basics of JSP pages and the dynamics of an HTTP request. Next week, we will expand on this beginning and make a more involved server-side interaction.
Sample Solution