GETTING STARTED WITH JSP USING EXPRESSION WEB
(updated: 12/22/08)
GETTING AN ACCOUNT WITH A WEB SERVER:
Park’s ITS (Information Technology Services) Department provides web hosting services for Park students enrolled in
web programming classes. If you’d like to use Park’s web server, go to http://arrr.park.edu and read the web page. Click
on the Request a site link at the left side of the web page. After logging in, you’ll be taken to a Web Site Request Form.
Read the instructions and fill out the form. For the “For which server are you requesting Web space?” question, select the
kidd_and_arrr option. That option indicates that you want accounts on arrr (for the JSP portion of this course) and kidd
(for the ASP.NET portion of this course). If you already have a kidd account (from CS321?), then leave the Web Location
text box blank and specify the name of your account in the notes area. Make sure to check the radio button that says you
are a CS 322 student.
After you submit your web site request, you'll receive a confirmation e-mail that tells you your account and password.
You'll need that information in order to upload your files to the web server and also to view your uploaded web pages over
the Internet. This password protection is required for viewing so that other students are unable to copy your work. If you
have questions about Park's web server, contact webmaster Scott Davis at scott.davis@park.edu or call him at 816-5846368.
If you’d prefer to not use Park’s web server and you already have an account with an Internet Service Provider (ISP), ask
your ISP whether they can provide JSP web hosting services.
As another alternative, you’re welcome to search for web service providers on your own. You may want to check out this
website to see reviews of free and inexpensive web service providers:
http://100best-free-web-space.com/
No matter what web service provider you choose, you’ll need to obtain this information:




The URL for the site that will receive your uploaded web files.
Your web server home page folder; this is the folder that contains all of your web site's files and subfolders.
user name
password
If you've already requested a site on Park's arrr web server as described above, then you should know this information as a
result of that application process, and it should something like this:
web site URL: http://arrr.park.edu
home-page folder: your choice
user name: ######@park.edu, where ###### is replaced with your Park ID number.
password: your choice
If you don't yet have an account with a web server, for the purposes of getting through this tutorial right now, you can use
a temporary account on Park's arrr web server. Here is the information for arrr's temporary accounts:
web site URL: http://arrr.park.edu
home page folder: student_a, student_b, … student_z (pick one of the 26 folders)
user name: student_a, student_b, …, student_z (user name = home page folder name)
password: a_student, b_student, …, z_student (password = reversed user name)
Note:
2.


If you and other people are doing this tutorial simultaneously, communicate among yourselves so that you choose
unique accounts.
Don't use the temporary accounts for anything other than this tutorial.
o The temporary accounts are periodically wiped clean.
o Uploads to the temporary accounts can be traced to the source, so you will be held accountable for any material
that you upload. No hardcore pornography, please.
A home page is a web page that is considered to be a starting point for Web navigation. A home-page folder is a folder
that contains a home page. If you apply for an account(s), you'll be asked for a user name and your user name will be used
for your home-page folder. My home-page folder is jdean.
EXPRESSION WEB BACKGROUND INFORMATION:
There are many different ways to upload web page documents to a Web server. In this course, you are allowed to use any
tools that you like to accomplish these tasks. Since our lab has Expression Web, I’ll describe how to use that tool.
Although you may use tools other than Expression Web for future homework assignments, you must use Expression Web
for this tutorial. You are responsible for knowing how to use Expression Web; i.e., I may ask you questions about it on the
exams.
The current version of Expression Web is Expression Web Version 2. Park’s lab computers were set up prior to the
release of Expression Web 2, so the lab computers have Expression Web Version 1. To match the lab computers, this
tutorial is based on Expression Web Version 1.
As a member of the MSDN Academic Alliance, Park is allowed to provide Microsoft software to students who are
enrolled in at least one computer class. You can obtain a free copy of Expression Web by going to the MSDN Academic
Alliance link on the ICS Department’s web site, http://www.park.edu/ics.
READ THE BOOK'S "READ THIS BEFORE YOU BEGIN" SECTION
Most of the content in the "Read This Before You Begin" section relates to installing stuff on your home PC. Even if you
don't have a home PC or you're not interested in installing anything, please read the section.
If you don't install anything on a home PC, you'll still be able to do all your work because the ITS Department has
installed everything you need on their arrr web server. Nonetheless, if you have a home PC and you have the desire, I
encourage you to install on your home PC.
INSTALLING THE DATA FILES ON YOUR HOME PC:
We won't be using the book's data files in lecture or in the homework, but if you want to practice your JSP skills on your
own, feel free to install the book's data files and do the book's exercises that rely on them. To install the book's data files,
follow the relevant instructions in the "Read This Before You Begin" section. The instructions tell you to copy the chapter
folders to a c:\myjspapp folder. I recommend that you do not use a myjspapp folder. Instead, create a cs322 folder
under your root folder and a bookData folder under your cs322 folder and then copy the chapter folders inside the
bookData folder.
INSTALLING THE JAVA SOFTWARE DEVELOPMENT KIT ON YOUR HOME PC:
The book's "Read This Before You Begin" section describes how to install the Java Development Kit (JDK) on your PC.
Many of you probably already have a JDK on your PC. If that's the case, there's no need to re-install. If you don't have a
3.
JDK on your PC and want it, you must use a newer version than what's on the book's CD. To install a JDK, go to this Sun
web site:
http://java.sun.com/javase/downloads
Using the web site's text as a guide, look for a link that allows you to download the JDK software. You may have to
follow a series of links in order to find the JDK download link that matches your particular operating system.
Download the toolkit. After the download completes, install the JDK as directed by the web site's documentation.
INSTALLING THE TOMCAT JSP ENGINE ON YOUR HOME PC:
Since the Tomcat JSP engine is installed on the school's web server, installing it on your home PC is optional, not
required. As long as you have Expression Web on your home PC, you can do all your work from home even if you don't
install Tomcat on your home PC. So why bother to install Tomcat?
1. Installations provide a good opportunity for learning about what goes on behind the scenes.
2. Installations usually don't go smoothly. That forces you to gain experience in fighting through problems.
3. Assuming a successful installation, you'll be able to test your code without having to upload to the school's web
server. That way, if the web server is down, you can still do your work (although you're required to eventually
upload your homework projects to the web server so that the grader can grade your work).
If you'd like to install Tomcat on your home PC, you should not use the Tomcat version 4.x that comes on the textbook's
CD. Instead, you should use version 6.0.x (the current version of Tomcat) or version 5.5.x (the version of Tomcat installed
on arrr). You can download both versions for free from the Internet at http://tomcat.apache.org/.
4.
JSP TUTORIAL USING EXPRESSION WEB:
When doing your homework assignments, you’ll probably want to use this Expression Web tutorial as a guide. It is up to
you to carefully reread this Expression Web tutorial and figure out how to do things for your homework assignments.
This tutorial assumes that you are working in the lab. Since you are not allowed to save anything on the hard disks in the
lab, the tutorial asks you to create all your files on your USB flash pen, not on your hard disk. Flash pens often use the f:
drive, so the tutorial uses the f: drive. If you prefer to use a diskette rather than a flash pen, replace f: with a: throughout
the tutorial. If you do this tutorial at home and you'd like to use your hard drive, replace f: with c: throughout the tutorial.
To help with the big picture, here's a summary of what you'll be doing in this tutorial:
• On your local computer:
○
Create a web site named cs322 and an associated cs322 folder.
○
Create a tutorial subfolder within your cs322 folder.
○
Create a simple serverTime.jsp page in your tutorial folder.
○
Preview your JSP page.
• On your web server:
○
Open up your default cs322 web site (or create a new cs322 web site if there's no default one).
○
Create a tutorial subfolder within your cs322 folder.
○
Upload your local computer's serverTime.jsp page using the import command.
• View your JSP page on the Internet.
Actions
Supplemental Information
Load Expression Web.
Click on the Start menu.
Select Programs.
If you don't see a selection for Expression Web yet, drill down further with an
appropriate selection(s).
Select Microsoft Expression Web.
Create a new web site.
Click the File menu.
Move your mouse over the New… option.
That should cause a menu to pop up. Select Web Site… from the pop-up menu.
In the New window, the Web Site tab should be pre-selected.
Select the General container and then the One Page Web Site option.
In the location of the new Web Site box, type f:\cs322.
Click OK.
5.
Actions
Supplemental Information
What is an Expression Web
web site?
A web site is Expression Web's term for a group of files and folders that can be
organized and uploaded using Expression Web's commands. Using a web site, with its
ability to work on files and folders as a group, makes things easier for Web developers.
However, using a web site is certainly not mandatory when it comes to Web
development. Many Web developers use a bare-bones text editor like NotePad to create
files, use Windows Explorer to create folders, and use an FTP tool like WS_FTP to
upload the files and folders.
Later in the course, we'll discuss a web application. A web site and a web application
both define a web site's group of files and folders. A web application is required; a web
site is needed only if you use Expression Web. A web application is a JSP entity that's
defined by a server.xml file (which is in the Tomcat installation folder). In defining a
web application, you'll enable your web site to be accessible on the Internet and you'll
enable your web site to share application-object data between all of its web pages.
Explore the newly created
Expression Web web site's
folder list.
Your Expression Web window should now contain a Folder List pane (look for the
words "Folder List" at the top of the left pane). If there is no Folder List pane, click the
View menu and then select Folder List.
The folder list displays the files and folders in your newly created web site.
During the web site creation process, if you specify folders that don't exist, the web site
creation process creates the specified folders. In our case, the cs321 folder was created
(if it wasn't created previously).
Click on the "+" and "-" icons in the Folder List pane to open and close folders.
Open a file.
Find the newly created default.htm file and double click it.
The default.htm file should appear in the right pane as indicated by the
default.htm heading in the right pane.
Don't be alarmed if it's blank underneath the index.htm heading. I'll explain shortly.
Rename the file.
In the left pane, right click on the default.htm file and select Rename from the popup menu.
Enter index.html (with an “l” in html), and it should overlay default.htm.
If you’re asked to confirm the rename operation, click Yes.
What is index.html?
The index.html file (or, equivalently, the index.htm file) is the standard file for a
web site's home page. It's typically the first page that someone sees when visiting a web
site.
Aside: Microsoft’s Web server product, IIS, allows not only index.html, but also
default.htm, to be used as a web site’s home page. To help out the Web developer
(and to make things difficult for Microsoft’s competition, Apache), Expression Web
generates a simple default.htm file that can be used as a starting point.
6.
Actions
Supplemental Information
What are the viewing tabs?
Note the tabs at the bottom of the index.html pane – Design, Split, and Code. They
determine the manner in which the user views the file's contents.
Click on the Design view tab. The Design view shows approximately how the file will
be displayed when viewed on the Internet. Since the Design view is blank at this point
(right?), that means that your current index.html page will display nothing when viewed
on the Internet. Although many Web developers (especially new Web developers) use
the Design view extensively, I require that you refrain from doing so. Got it? Never use
Expression Web's Design view!
Click the Code tab.
Note that the Code view shows the actual HTML in the index.html file.
The problem with the Design view is that it allows users to edit the file with Expression
Web commands that generate poor HTML code. To compound the problem, the Design
view hides HTML code so the user is unaware of the poorly written HTML code that
he/she is generating.
More specifically, Design view HTML code tends to be poorly written in that:
 It tends to be unnecessarily verbose (which means large files which means long
download times).
 It sometimes does not follow proper HTML coding standards (which can lead to
display problems on certain browsers).
It tends to produce rigid code that doesn't adapt well to varying browsers and browser
settings.
For all future homework
assignments, use this naming
scheme.
To keep things organized throughout the semester, I'd like you to put your web pages in
separate folders.
For this tutorial, you'll create a web page and store it in a folder named tutorial. For
homework 1, you'll store web pages in a folder named hw1, for homework 2, you'll store
web pages in a folder named hw2, etc. The tutorial, hw1, hw2, etc. folders should
all be inside your cs322 folder. For all future homework assignments, use that naming
scheme!
Create a tutorial folder.
Make sure that the cs322 folder is highlighted in the Folder List pane.
Click on the New Folder icon in the top-right corner of the Folder List pane.
A newly generated folder should appear in your Folder List pane. The name of the new
folder is New Folder by default.
You now need to rename the folder to tutorial:
1. If the name New Folder is already selected/highlighted, you should be able to just
immediately enter tutorial and it should overlay New Folder.
2. If that doesn’t work, then try clicking on the New Folder icon with the right mouse
button. That should cause a menu to pop up. Select Rename from the pop-up menu.
Immediately enter tutorial and it should overlay New Folder.
7.
Actions
Supplemental Information
Create a new page within the
tutorial folder.
Make sure that the tutorial folder is highlighted in the Folder List pane.
Click on the File menu.
Move your mouse over the New… option and select Page… from the pop-up menu.
In the New window, the Page tab should be pre-selected.
Select the General container and then the HTML option.
Click OK.
Enter content for the new
page.
Make sure the main window's right pane is in Code view mode.
Delete the entire contents of the right pane (i.e., delete all the code).
Enter this where John Dean is replaced with your actual name:
<%-- serverTime.jsp
- John Dean
- This file displays the web server computer's current time.
--%>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name= "author" content="John Dean" />
<title>Server Time</title>
</head>
<body>
<div>
The web server's current time is:<br />
<%= new java.util.Date() %>
</div>
</body>
</html>
Save your
serverTime.jsp file.
Click the File menu.
Select Save As…
Adjust the selected folder so that the Save in field contains the tutorial folder.
Enter serverTime.jsp in the File name field.
Click Save.
Preview the page.
Click on the Split tab.
The web server's current time is: should be displayed. The time isn't
displayed because the time is calculated only after the JSP page is sent to the server
computer (and Expression Web doesn't send JSP pages to server computers).
Load a new Expression Web
session.
Click on the Start menu. Select Programs. Select Microsoft Expression Web.
You should now have a new Expression Web session open. You'll use this new
Expression Web session for your web server's web site. You should now have two
Expression Web sessions – one for your local computer's web site and one for your web
server's web site. You'll be going back and forth between these two sessions.
8.
Actions
Supplemental Information
On your web server
Expression Web session, open
your default Expression Web
web site.
If your web service provider creates a default Expression Web web site for you, then you
should perform this step. Since Park's arrr web server does create a default Expression
Web web site for you, those of you using Park's arrr web server should perform this step.
Click the File menu.
Select Open Site…
In the web name box, enter the URL for your home page folder on your web server, but
insert :88 after your server name. The :88 is to indicate port 88. For example, to
access my home page folder on Park's web server, I enter
http://arrr.park.edu:88/jdean
Click Open.
You should be prompted to log onto the web server. Enter your user name and password.
Why port 88?
The arrr server computer has two web servers running on it - IIS and Apache. Each web
server needs a distinct port. IIS runs on port 88. Apache runs on the default http port 80.
Expression Web uses IIS, so when you load an arrr web with Expression Web, you’re
required to use port 88.
The Tomcat JSP engine uses Apache, so when you load a JSP page in a browser, you're
required to specify port 80 or don't specify any port (with no port specified, then port 80
is used by default). You'll load a JSP page in a browser shortly.
On your web server
Expression Web session,
create a new Expression Web
web site.
If your web service provider does not create a default web for you, then you should
perform this step. Since Park's arrr web server does create a default Expression Web web
site for you, those of you using Park's arrr web server should skip this step.
Click the File menu.
Move your mouse over the New… option.
That should cause a menu to pop up. Select Web Site… from the pop-up menu.
In the New window, the Web Site tab should be pre-selected.
Select the General container and then the One Page Web Site option.
In the location of the new Web Site box, enter the URL for your home page folder on
your web server.
Click OK.
In your web server's web,
create a tutorial subfolder
within a cs322 folder.
In the Folder List pane, select your home page folder.
If you requested an account on arrr, then the arrr webmaster should have created a
cs322 folder inside your home page folder. If you don't see a cs322 folder inside your
home page folder, then create one.
In the Folder List pane, select your cs322 folder.
Create a subfolder named tutorial inside your cs322 folder.
9.
Actions
Supplemental Information
On your web server
Expression Web session,
upload your local computer's
server time JSP page.
Make sure that your tutorial folder is highlighted in the Folder List pane.
Click the File menu.
Select Import…
In the newly generated Import window, click the Add File… button.
In the File name box, enter f:\cs322\tutorial\serverTime.jsp
Click the Open button.
In the Import window, click on the OK button to initiate the upload process.
Be patient during the upload – it may take several seconds.
Go to your JSP page on the
Internet.
Open up a browser and fill in the address field with a URL that points to your web
server's serverTime.jsp page. For example, I would specify this:
http://arrr.park.edu/jdean/cs322/tutorial/serverTime.jsp
View your uploaded page.
This should appear in the browser content area (with the current time, not the time
shown below):
The web server's current time is:
Sat Jan 10 16:31:18 CST 2009
Exit from both Expression
Web sessions.
For each Expression Web window, click the File menu and then select Exit.