CSCI 124 Lab 7

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

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 gedit. To start it up (editing index.html), go to the terminal window, make sure you are still in public_html, and type,

gedit 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 gedit.) 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. If you want to export some other applet that you created, open it, but it really doesn't matter which one you use, as long as you're willing to put it on line. (Ultimately, you will be using the applet you produce in assignment 9, but that can wait.)

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. We need to take care of the following: Processing automatically exports the source code and the html applet page has links to it. For obvious reasons (these are assignments we are publishing after all), we don't want to do that. To take care of this we need to manually edit the html source that Processing exports ourselves, and be careful what we put up on the web. 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 files reside and the folder containing the applet is aptly (or should I say "apley"?) named "applet"! You'll just have to poke around in your folders to find and open the appropriate applet folder. Find the file index.html in it and open it with an editor. Look for lines of html code that look something like the following, and delete them:

<p>
Source code: <a href="MyProcessingApplet.pde">MyProcessingApplet</a> 
<a href="SomeSupportingJavaFile.pde">SomeSupportingJavaFile</a> 
<a href="SomeOtherSupportingJavaFile.pde">SomeOtherSupportingJavaFile</a>
</p>

1. 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).
2. 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 MyProcessingApplet.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.)
3. 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.
4. Go back to gedit 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</a></li>
   </ul>
   

   (you can, of course, put anything appropriate in place of "MyFirstApplet").