Perform the following tasks in the order shown. If you encounter a problem in any of
them, do not skip it. Instead, try again, reading the instructions carefully, or check
with the TA.
Login to your cse account.
Set up your development environment. You will need the Java API, your favorite
editor, and a console to issue commands.
Go to your home directory by issuing the command: cd
Generate a detailed listing of the contents of your home directory
by issuing the command: ls -l
Verify that you have an accessible web directory, that is, examine the generated
listing and look for a line that starts with drwx?????x
(where ? can be any character) and ends with www
If you don't have such a line, ask the TA to create it for you.
Issue the command: cbcLabs in order to set up the infrastructure
of these labs in your web directory.
If everything worked as expected, the message Completed. is displayed.
Otherwise, an error message is generated, and in this case you will need to check with the TA.
Launch a browser and visit the URL:
http://www.cse.yorku.ca/~csxxxxxx/cbc1020/form.html
The browser should display a form that prompts for a user name and has a button
named Send. If you enter a name and click the button, you should get a response
line that says: Hello user=XXX, where XXX is the named you typed.
If you do not see the behavior described above, check with TA.
The above tasks lead to the creation of a web site for you. It resides
in the www/cbc1020 subdirectory under your home directory.
You can access this site from any browser on the Internet. We will from
now on refer to a browser visiting your site as the client or
the remote client. And since your site resides on the server,
this kind of software setup is known as client-server. In such a
setting, the interaction between the client and the server proceeds as follows:
The client software (that is, the browser) starts by requesting
a form from the server. In our case, this is the file named
form.html in your web site.
Upon receiving it, the client software displays the form and
allows the (human) end user to interact with it. In our case, this
involves making an input and then clicking a button.
When the button is clicked, the browser sends the input back
to the server to be processed. Specifically, it sends the input
to the app Server.java in your site.
Your server app reads the input from its standard input, that is, as if
the end user typed it while sitting at the server machine (rather than
from a remote location). It processes the input and then generates
output on its standard output. Again, it behaves as if the user is
interacting with it locally and can see the screen.
The standard output of your server is sent back to the client
to be displayed by the browser.
Hence, the process is similar to what we are familiar with (read the input,
process it, generate the output) except that the client and the server are
two different machines separated by possibly thousands of kilometers. You
will see more of the details of this process and its underlying technologies
in these labs. If you have questions at this stage about the client-server
concept then feel free to discuss it with your TA or instructor.
The client side
One of the key advantages of the client-server approach is separation of
concerns. The user interface (the view that the user sees and the way to
interact with it) is separated from the processing. The former is done by
the browser at the client side and the latter is done by your app on the
server side. Let us know focus on the client side.
Examine the browser's window in which the form is displayed.
We like to insert a title for that window to be displayed at its
upper bar (where the window's close button is located).
Go to web site directory by issuing the command: cd www/cbc1020
Edit the form.html file by adding a <HEAD>
tag between <HTML> and <BODY> tags:
<HEAD>
<TITLE>XXX</TITLE>
</HEAD>
where XXX is any title you like. Save the form and
then reload the page http://www.cse.yorku.ca/~csxxxxxx/cbc1020/form.html
in the browser. Do you see the title? If not,
verify that the form has been changed and that the browser has indeed
been refreshed.
Rather than displaying the prompt, text field, and button next to each
other along the same line, we like to display them vertically and centered
in the page, as shown below:
Edit the form again to implement this change. You will need to use
the CENTER tag, which centers everything between its opening
and closing tags, and the BR/ tag, which forces a line break
(it is a self-closing tag).
The server side
Perform the following tasks in order to understand and enhance the
processing done at the server side.
Edit the app Server.java, which can be found in the
web site directory, so that its output
consists of the sentence: "This is the input that the client sent:"
followed by a space followed by the user's input. Note that the user's input
is prefixed with user=. We will see the significance of this
prefix in a later exercise.
Compile your app and re-visit the form and re-submit it. Does the
system behave as expected?
Edit your app one more time and modify it so it generates
three lines of output. The first line is as before. The remaining
two are similar to these:
Client IP address = 74.102.214.205, Port = 3009
Server IP address = 130.63.92.30, Port = 80
There is a static method in the System
class (a utility) that allows you to obtain any environment
variable. Read its API and use it to make the necessary changes.
The addresses of the client and the server are stored in the environment
variable REMOTE_ADDR and SERVER_ADDR, respectively.
The port variables are similar (simply replace ADDR with
PORT).
