CS 371, Fall 2001
Lab 6: Zope

For this lab, you will set up a small Zope site that includes a bit of DTML programming. You have a folder on the Zope server that is running on port 8080 on cslab2. (It is accessible only from computers on campus.) You can work on this site by going to a URL of the form:

      http://cslab2.hws.edu:8080/username/manage

where username should be replaced by your own user name. You will be asked for a username and password. Use your own user name and the same password that you were assigned for the mySQL server that you have used in earlier labs. (The Zope management interface might not work with certain browsers. The documentation mentions Internet Explorer 5.01 and early versions of Internet Explorer 5.5.)

I expect to grade this lab next Saturday, October 27. You should complete parts 1 and 2 of this lab by no later than then. There is no need to turn in anything. I will grade your work on the Zope server itself. However, I advise you to complete as much of the lab as possible before Wednesday, since the material on this lab will be on Wednesday's test.

Part 1: Zope Management

Managing a Zope site includes creating and editing HTML and DTML documents, adding other content such as images to the site, creating new users and assigning them passwords and permissions, and creating folders, Z SQL methods, and other types of Zope objects.

Your folder already contains a file named index_html. This is the file that a user sees when he comes to your site using a URL of the form http://cslab2.hws.edu:8080/username. To edit this file, click on it in the management interface. You will be able to edit this file directly on the Web. Click the "Save Changes" button to send your modifications back to the Zope server. Click the "View" tab at the top of the page to see the saved version of the page as it would appear in a Web browser. Edit the text on the index_html page to personalize it a bit. When you have done Part 2 of the lab, come back and put link to your color table on your index page.

Objects of all types are added in the Zope management interface using the "Select a type to add" pop-up menu in the upper right corner of the window. Add an object of type "Image" to your folder by selecting "Image" in the menu and clicking the "Add" button. You will have to supply an Id for the image. This is the name by which the image is identified in URL's. You can supply a Title if you want, but it's optional. If the title exists, it will be used in the alt attribute of an img tag for the image. Finally, you have to specify the file that contains the image. You will generally do this by clicking the browse button and selecting the file, but you can also simply type in the file name if you know it. If you don't have another image that you want to use, you can use the very annoying animated Linux penguin shown at the right. A copy of this image can be found in the file /home/cs371/tux.gif. When you click the "Add" button, the selected image file will be uploaded to the Zope server. Add the image to your index_html page using a <dtml-var> tag. The name of the var is simply the Id of the image. You should be able to view the image on your index page.

Now that you have the hang of adding objects to your site, add a new Folder. When you do this, check the boxed for "Create public interface" and "Create user folder". This creates an index_html file and an acl_users folder in the new folder. Go into the folder and then into the acl_users folder. Click the "Add" button there to create a new user. Give the user a name and a password. Click on the "Manage" Role. (Apparently, this is the only reasonable option.) You can leave the Domains field blank. When you click the "Add" button, you will have created a new user on the Zope site. This user will be able to manage the folder that you just created, but nothing else on the Zope site.

To complete Part 1 of the lab, you must: Change the text of image_html and add an image and a link to the color table from Part 2; and create a new folder with a new user. Of course, I encourage you to spend more time exploring and experimenting with Zope.

Part 2: Zope Programming

To get some idea of what it's like to "program" in DTML, I would like you to create a color table in DTML, similar to the one that I used as an example of php programming in Lab 3. You can find that example at http://math.hws.edu/eck/cs371/lab3/colors.php, and you can read the PHP source code at http://math.hws.edu/eck/cs371/lab3/colors.txt. (So this exercise might also be an exercise in reading PHP.)

Start by adding a new "DTML Document" to your Zope folder, then edit the document so that it generates a color table. Where the PHP version uses a for loop, you should use <dtml-in>. This requires a different kind of thinking. To help get you started, here is the DTML source for a page that simply displays the seven standard shades of gray:

   
   <dtml-var standard_html_header>
   <h2 align=center><dtml-var title_or_id></h2>
   <p align=center>
   <b>Here is a table of basic gray colors:</b>
   </p>

   <table align=center border=2 cellpadding=5>

   <tr>

   <dtml-in expr="['00','33','66','99','CC','FF']">
   <dtml-let gray=sequence-item>
     <td bgcolor="#<dtml-var gray><dtml-var gray><dtml-var gray>">
     <font color="red">#<dtml-var gray><dtml-var gray><dtml-var gray></font>
     </td>
   </dtml-let>
   </dtml-in>

   </tr>

   </table>

   </body>
   </html>

The output of this DTML script can be viewed at http://cslab2.hws.edu:8080/eck/color_table.

This source code introduces a new DTML tag, <dtml-let>. This tag lets you assign a name to the value of a variable or expression. In this example, I use it to give the name "gray" to the value of sequence-item, which represents one of the items in the list ['00','33','66','99','CC','FF']. Then I use gray in the body of the <dtml-let> instead of sequence-item. In this case, using <dtml-let> is not necessary since I could just have referred to sequence-item directly, but when you have nested <dtml-in>'s, you need <dtml-let>'s to provide names for the items in the various lists.

One interesting point is the color to use for the text in the table. I use red in the above example, but that wouldn't be readable on a red background. Since the table has backgrounds of all colors, you can't use any single color for the text. You should use two different text colors, depending on the color of the background. In my own Zope color table program, I used black and white and decided which to use with a <dtml-if> of the form

         <dtml-if expr="green == '99' or green == 'CC' or green =='FF'">

This gives a different patter of text colors than in the PHP version, but I actually like it better.