View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

How to build a web application with SmallTalk


Part 1: Introduction
Web application allows users to access an application through a Web browser. In the Ecode projects, our team tried to build a simple web app that displays the list of all the projects and their descriptions. For Smalltalk, the mechanism for producing the dynamic content of any given page depends upon the server technology that is used. Dynamic pages may be generated from HTML templates (using server pages that contain script), or they may be generated programmatically by components of the application (using servlets or VisualWave). For the purpose of this tutorial, I will reference dynamic pages that use server pages containing script.

Part 2: Deployment VisualWorks Application Server
The VisualWorks Application Server is contained in a set of parcels. So to start off, we need to load VisualWave and WebToolkit (for the simplicity of the tutorial). Here are the steps:
- Open the Parcel Manager by selecting System Parcel Manager in the Launcher window.
- Select the category Application Server on the Suggestions tab, a list of the Application Server parcels appears on the left.
- Load the two parcels mentioned above by righ-clicking on each and select Load.
- For later use purpose, we need to save the image so we won't have to reload these two parcels.

Part 3: Using SmallTalk HTTP Server
To create a server, we need to open up the Server Console by go to Web then select Server Console from the VisualWorks Launcher window. The Server Console will let us create a server by pressing on the Create Server button, choose Server type to be Smalltalk HTTP Server, hostname to be localhost, port to be 8008, and leave other options as default (more details on each option can be found in the WebAppDevGuide from Smalltalk doc directory). Now click Create, and you have just created a server but it is not running yet. To start the server, in the Server Console, select the server then press on the Start button. The server status will change from inactive to active to notify us. Now we can do a quick test to make sure our server is running, open a web browser and request the following URL: http://localhost:8008/echo. We should see a list of environments on the page.

Part 4: Creating the website.
a. First, we need to create a directory to the image and configuration files for the new site. For the simplicity, we can create a new "ecode" directory in: C:\Program Files\Cincom\vw7.4.1nc\web\. Then:
- copy the three initialization files webtools.ini, default-site.ini, and configure-site.ini from the \web directory to the new created ecode directory.
- create a new "db" directory inside the ecode directory for database storage.
- rename the defaultsite.ini to ecode-site.ini.
- in the [configuration] section of the ecode-site.ini file, set the home key to the name of the file displayed as the home page: home = index.html. Also set the directory key to the default directory: directory = $(VISUALWORKS)/web/ecode. Since we reference home = index.html, we need to create an index.html file in the ecode directory. Here is the code for index.html:

<html>
<head>
<title>Ecode Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<center>

<br>
<h1>Welcome to ECODE</h1>
<br>
<br>
<br>
<a href="login.ssp">Log In</a>
</center
</body>

</html>


- save index.html
- change the description: description = ECODE
- save ecode-site.ini

b. Since we are adding a new site to our configuration, we must also edit the [sites] section in the webtools.ini file as follow:
[sites]
ecode = ecode-site.ini
then save the webtools.ini
This completes the site configuration. We can test the new site by requesting the URL: http://localhost:8008/ecode/index.html in a web browser

c. In the index.html file, we reference to a "login.ssp" page so we need to create a new login.ssp in the ecode directory. Here is the core for our login.ssp:

<html>
<head>
<title>Ecode Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>


 
<body bgcolor="#FFFFFF">
<center>

<br>

<h1>Welcome to ECODE</h1>

<br>
<h2> Please sign in:</h2>

<form name="login" method="post" action="ecode.ssp">


    
  <p><font face="Georgia, Times New Roman, Times, serif" size="+2">Username: <input type="text" name="username"> <br>
Password: <input type="text" name="password">
    </font></p>
    
  <p> <font face="Georgia, Times New Roman, Times, serif" size="+2"> 
    <input type="submit" name="Submit" value="Login">
    </font></p>

    
</form>
</center>
</body>

</html>


d. Now the main part: embedding Smalltalk code in Smalltalk server page. We will create a ssp page: ecode.ssp in the ecode directory so that whenever a user logs in from the login.ssp, he or she will be directed to a new ecode site that has a list of projects and their descriptions. From this point on, we will need to implement our code based on the domain. My team Ecode App domain has a ProjectManager class that has a list of projects. Each project has a name and description method that return its name and description. The ProjectManager has a getProjectsFromDB that imports some projects with names and descriptions from a .txt file.

- Below is the code for the ecode.ssp file:
<html>
<head>
<title>Ecode Project Manager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<center>


<%
  aName := request anyFormValueAt: 'username'.
%>

<h3><left> Welcome, <%= aName %> </left></h3>



<h2>ECODE PROJECT MANAGER</h2>


<table border="1" width="80%">
 <tr align="center">
  <b>
   <th width="60%"><h2>Projects</h2></th>
   <th><h2>Description</h2></th>
  </b>
 </tr>
<%
 projects := (Trout.ProjectManager new) getProjectsFromDB.
 projects do:[:each | 
  response write: '<tr align="left">'.
  response write: ('<td width="60%">', each name, '</td>').
  response write: ('<td>', each description, '</td>').
  response write: '</tr>'.].  
 
 %>

</table>



</center>
</body>
</html>



- Below is the code for the getProjectsFromDB:
getProjectsFromDB
  | file separator stream projName projDescription project |
  file := (directory, 'projects.txt') asFilename.
  
  separator := $,.   "comma"
  stream := file readStream lineEndCRLF. 
  [stream atEnd] whileFalse: [
   projName := (stream upTo: separator).
   projDescription := (stream upTo: separator).
   stream upTo: (Character cr).
   project := Project new.
   project name: projName.
   project description: projDescription.
   self addProject: project.].  
  stream close.
  ^projects.


- Now we need to create a projects.txt database file in the db directory so the above method will work. Note that if we have a database(SQL, PostgreSQL, or MySQL) we don't need to manually create our database file. Data can be accessed directly from the database software. For the simplicity of this tutorial, we will manually create one. Below is the code for the projects.txt file:
Hung,lasdksadfasdfadsfdsaf,#
Jon,this is just a description,#
Drew,where is calvin johnson,#
Banjo,hey hey hey hey hey hey hey hey,#
addmore, adsadsfdaf, #
12321321, sdafadfs, #


So now we have a very simple working site that embeds SmallTalk code. Test the site by requesting: http://localhost:8008/ecode in a web browser, then click on Log in, enter in any username and password to log in. We will be able to see the ecode project manager page.

Part 5: Conclusion
I did this to get some extra credits for my team. Hopefully the tutorial will help you have a grasp of how to create a web app using SmallTalk.

Links to this Page