CSCI 120 Lab 8

In this lab you will create a home page for yourself, create a Java applet (by exporting a Processing program), and put a link to the applet on your home page.

Creating a Home Page

Web pages can be created from an ordinary text file through the use of HTML, which stands for HyperText Markup Language. An HTML file consists of ordinary text, but with special characters that change the appearance (and even behavior) of the text when it is displayed on a web browser. For example, when you write this:

<b>Welcome To My Home Page!</b>

the web browser will display Welcome To My Home Page! (i.e., the same thing in bold face). For a couple of other examples of HTML elements, you might take a momentary glance at the HTML Quick Reference (but one of thousands you can find on the Web). It's good place to go to to look up elements of HTML.

When you're reading any web page, you can see what the HTML source file looks like. I'll assume in this document that you're using FireFox. Just go to the View menu of the browser, and select "View Page Source." Do that now to view the HTML source of this very page (note the hoops I have to jump through just to get a simple "<" sign!).

Speaking of jumping through hoops, you will have to install your own home page in a public directory so it can be accessed from the outside via "Babbage," which is our web-server.

In the terminal window, go to your home directory (just typing "cd" will do the trick). Create a directory called "public_html" (make sure you get the spelling exactly right). Just type the command,

mkdir public_html

Now give the following two commands:

chmod og+x .
chmod og+rx public_html

(Yes, that is a period after the x and the space.) These commands set the access permission on your new directories so that the Web server (and therefore anyone on the web) can access them.

Now enter the command

cd public_html

to enter your public_html directory. Type ls to see what is in the directory. You should find that there is nothing there (yet).

Right at this location is a template for your home page. Go to that location and view the source; you're going to be editing a file like this. Come back to this page and right-click on this link, choosing the "Save Link As..." option in the pop-up menu. Navigate the file system to save it as index.html in your public_html directory! It is important to save it under the name index.html.

Now you're going to edit index.html so that it's your home page. For that you need a text editor; the Processing environment is a lot more than we need for that. On the Linux machines, I recommend the use of kedit. To start it up (editing index.html), go to the terminal window, make sure you are still in public_html, and type,

kedit index.html&

at the command prompt. That ampersand is quite important now, because you will be typing commands at the command window later. (Alternatively, probably just double-clicking on the file will call it up with kedit.) In the file index.html, change all the references to "Your Name" to your actual name. Change "YourEmailAddress" to your actual e-mail address. Be sure to save the file. Now use the FireFox File menu (File/Open File) to Open the file you have just saved. You should see your new home page!

There's a bit more to do. We want this file to be visible to the whole web. For that, now give the command:

chmod og+r index.html

This makes your home page accessible to the server. Now return to the browser, and browse for the URL:

http://babbage.clarku.edu/~yourLogin/index.html

(Use your actual username, instead of yourLogin, after the tilde). You should now see your home page on the server.

At Your Leisure (not during today's lab): Use the Clark University link on your page to get to the main page for the University. Find the links to student pages. Find some pages you like, and use the View menu option to look at the HTML source for those pages. Borrow some good ideas and put them on your page. Then reinstall your updated page on the server. Add some interesting links to your page. I would guess that, henceforth, your home pages will be perpetually under construction....but please go on to the next step before you get yourself hooked on that process.

Creating an Applet

Compared to raw Java, this is trivial in Processing. Well... it usually is, anyway (caution, some more hoops ahead).

Start up Processing (type processing & at the command line). It should open to the most recent project you produced in the lab, pesumably the EightPuzzleFramework from Lab 7. In fact, I'd like you to use that project, even if it is not fully functional, for reasons that will soon become clear. Stick with that project for now; if you want to make changes later, you'll see how easy it is.

Now in the "File" menu choose "Export". A folder entitled "applet" will then be created. In that folder, a Java applet has been created for you! That's it!

Okay, again, that's usually it. In the case of EightPuzzleFramework Processing probably tells you that it's unable to compute the size of the applet. We have to do this manually and edit the html source that Processing creates accordingly. Now on Mac OS X, exporting results in the applet folder just popping up; I don't know how Processing behaves on Windows, but on Linux you have to find where the applet folder is. Fortunately, Processing doesn't just put it in any old random place. It's put in the same folder as that in which your .pde file resides. You'll just have to poke around in your folders to find that. When you do, open the applet folder. Find the file index.html in it. Edit it so that the two lines,

	archive="Eight_Puzzle.jar"
	width="100" height="100"

read like this instead:

	archive="Eight_Puzzle.jar"
	width="210" height="255"

(that first line is there just for context; it hasn't changed). I found that width 210 and height 255 worked based on computing the size variables in the code; hopefully you will find the same.

One final thing. Processing automatically exports the source code and links to it; for obvious reasons (this is a homework assignment after all), we don't want to do that. Again, we need to edit the html, and be careful what we put up on the web. The first step in this process is to look for these lines of html code and delete them:

<p>
Source code: <a href="Eight_Puzzle.pde">Eight_Puzzle</a> 
<a href="EightPuzzle.pde">EightPuzzle</a> 
<a href="EightPuzzlePlayer.pde">EightPuzzlePlayer</a> 
<a href="PushBar.pde">PushBar</a> 
<a href="Square.pde">Square</a> 
</p>

"Publishing" an Applet

To "publish" an applet on the web, all that's left is to put it in the right place, make it accessible to the web, and make a link to it on your home page, which we will proceed to do:

Using the graphical file manager, create a new folder in your public_html folder to hold all the stuff in the applet folder. Give it an appropriate name (no special characters or spaces). After all, if you export and add other applets you want to distinguish them. For the sake of argument, let's suppose you call it "MyAppletFolder". Alternatively, you can go to the command line and give the following commands:
```
cd
cd public_html
mkdir MyAppletFolder
```
(or any reasonable name you like in place of MyAppletFolder).
Drag and drop (or, better, copy and paste by lassoing and right-clicking) the following files from the applet folder (produced by the Export, and one edited by you) into "MyAppletFolder": index.html, loading.gif, and EightPuzzleFramework.jar. (Do not copy the .pde or .java files. In the future, if you do want to publish an applet including the source code, you would copy everything.)
To allow the outside world to access the file, give the following commands:
```
cd
cd public_html
chmod og+rx * -R
```
This ensures that all the files in your public_html directory are not only readable, but also executable.
Go back to kedit and add the following line to your index.html file (where? how about just after the first <HR>):
```
<h3>Processing Examples</h3>
<ul>
<li><a href = "MyAppletFolder/index.html">MyFirstApplet</li>
</ul>
```
(you can, of course, put anything appropriate in place of "MyFirstApplet").

Now go back to the browser and look at your web-page. Hit the reload button. There should be a link to your applet. Click on the applet, and it should run. If it doesn't, let me know; we'll fix it.

What Next?

Add more applets to your public_html directory and your web-page. You don't have to be in the lab to do this. Via an ssh file transfer client, you can download the web-page, edit it on your own machine, then upload it back to your public_html directory. Similarly, using your own copy of Processing, you can go through the export procedure, give your applet folder a reasonable name, add an appropriate link to your web-page, and upload both your revised web-page and the appropriate contents of the applet folder to your public_html folder. Adding a link from your web-page to an applet is easy; you just add another line like

<li><a href = "MyAppletFolder/index.html">MyFirstApplet</li>

just below the similar one above, changing the names accordingly. The main thing you have to make sure of is that the folder (entitled "MyAppletFolder" above) containing the applet and all the other pertinent files is in the same directory as the file that links to it (your home page index.html).

Back to CS 120 Home Page