Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Code Walk-through
For every item in the design, we will show and describe the associated Water code that implements the design.
Design #1: Define a subscriber that has fields for name and email
<defobject subscriber fullname email/>
This is a call to defobject. The first argument is the name of the type you wish to create. In this example, we are creating a subscriber object. The rest of the arguments are the fields of the object. In this example, there are two required arguments to subscriber: fullname and email
Design #2: Create a data structure to hold the list of subscribers
<set subscribers = <vector/> />
This call to 'set' defines a variable named subscribers and assigns an empty vector to it. Subscribers will be inserted into this vector. In a future article we will show how this list may be saved in a file or in a database.
Design #3: Create a subscription form in HTML
<set subscription_form= <FORM action="<subscribe fullname email/>" > First and Last name: <INPUT name="fullname"/> <BR/> Email Address: <INPUT name="email"/> <BR/> <INPUT type="submit" value="Subscribe"/> </FORM> />
Although the call to FORM looks exactly like a string of HTML, it is actually constructing an instance of the hypertext.form object. The form object is then bound to the 'subscription_form' variable. Alternatively, you could save the HTML in a separate file and load that file into the variable.
When the form is submitted, the 'action' will be executed as a Water expression. In this example it will call the subscribe method and pass it the values of the fullname and email input fields.
<FORM action="<subscribe fullname email/>" >
The following line of code creates an HTML input field with a label and a name.
First and Last name: <INPUT name="fullname"/> <BR/>
The following expression creates a button labeled "Subscribe." When this button is pressed, the action of the form gets executed. In this example, a call is made to the subscribe method.
<INPUT type="submit" value="Subscribe"/>
Design #4: Create a receipt page that includes the subscriber's name
<defmethod receipt the_name> <H3><do the_name/> is now subscribed.</H3> </defmethod>
The receipt method displays a receipt page. This method has one parameter, the_name, and the method returns an instance of the H3 object. When the object is converted to html, a normal HTML page is displayed.
Design #5: Creat a subscribe method for adding a subscriber to the list of subscribers
The expression <defmethod subscribe fullname email>creates a method, subscribe, that has two required parameters, fullname and email. No type is specified for these parameters, but they could be typed. An upcoming article will discuss Water's type system.
subscribers.<insert <subscriber fullname email/> /> <receipt fullname/>
The body of the method has two lines. The first line creates an instance of subscriber <subscriber fullname email/>, then adds the instance to the end of the subscribers list.
The second line calls the receipt method with fullname as the only argument. All Water methods return the value of the last expression. In this example, the value of the receipt page is returned.
Design #6: When the "Subscribe" button is pressed, the 'subscribe' method is called
This was briefly shown above. When the user clicks on the 'Subscribe' button, the form is posted to the server. At the server, the form fields become local variables and the action attribute is executed by the Water Server. The following action calls the subscribe method and passes the values of the fullname and email fields from the HTML form.
<FORM action="<subscribe fullname email/>" >
Let me explain this again because this line is particularly interesting. When the form is submitted, the 'action' will be executed as a Water expression. In fact, any Water source code can be entered here and it will be executed on the server when the form is submitted. During the execution, a variable for each input is bound to the value that the user entered for the input. In this example the action will call the subscribe method and pass it the values of the fullname and email input fields.
The last line of code, shown below, is the value to be returned when the program is loaded. When you click 'Execute', the subscription form will be shown on the page.
subscription_form