- Introduction
- Implementing an Autonomous Content Mechanism
- Getting Autonomous Content from the User (HTML Form)
- Storing the Autonomous Content from the User into the Database (ASP Code)
- Homework Assignment 7: Autonomous Content Mechanism
- Glossary of Business and Technical Terms
Getting Autonomous Content from the User (HTML Form)
Remember, if you want users to contribute content, you should make it easy to do so and as fun as possible. Imagine that the user clicks on the contribution link Add your own hacker phrase and the form in Figure 5 pops up.
){kind=link}
Figure 5 Unappealing user interface for adding hacker phrases.
Put yourself in the role of the user. Would you contribute a new hacker phrase? I wouldn't. It's such an unappealing user interface that I wouldn't want to waste my time. However, with a little bit of effort, we can spice up this interface to make it more friendly and appealing to the user. First, let's look at the code that implements the ugly user interface, shown in Listing 2:
Listing 2 Unappealing User Interface (add_phrase.asp)
<HTML>
<HEAD>
<TITLE>add_phrase.asp</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=add_phrase.asp>
Phrase: <INPUT TYPE=TEXT NAME=phrase><BR>
Usage: <INPUT TYPE=TEXT NAME=usage><BR>
Example: <TEXTAREA NAME=example></TEXTAREA><BR>
<INPUT TYPE=SUBMIT VALUE="SUBMIT HACKER PHRASE">
</FORM>
</BODY>
</HTML>
There's really not much to this code as far as HTML is concerned. The "meat" of the code is the <FORM>...</FORM> tags, which contain the text boxes for getting the hacker phrase information from the user. The code employs two kinds of text boxes: single-line text boxes using <INPUT TYPE=TEXT...> tags, and multiple-line text boxes using <TEXTAREA>...</TEXTAREA> tags.
To make this more appealing, we apply our design rules from an earlier article, "Week 5: The Business Model Approach to Designing Your Customer Interface." Specifically, we use a table to align the labels and controls (see Figure 6).
){kind=link}
Figure 6 Using a table to align labels and controls.
Listing 3 shows the code for this cleaner but still unappealing user interface:
Listing 3 Aligning Labels and Controls (Text Boxes)
<HTML>
<HEAD>
<TITLE>add_phrase.asp</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=add_phrase.asp>
<TABLE>
<TR><TD>Phrase</TD>
<TD><INPUT TYPE=TEXT NAME=phrase></TD></TR>
<TR><TD>Usage</TD>
<TD><INPUT TYPE=TEXT NAME=usage></TD></TR>
<TR><TD>Example</TD>
<TD><TEXTAREA NAME=example></TEXTAREA></TD></TR>
</TABLE>
<INPUT TYPE=SUBMIT VALUE="SUBMIT HACKER PHRASE">
</FORM>
</BODY>
</HTML>
Next, we add colors and borders. Recall from the Week 5 article that we have a dark color (#572119, a maroon-ish shade of dark brown) and a light color (#DFCCAC, light brown). We set the background color for the labels to our light color (#DFCCAC) and surround the entire table with a dark colored border (see Figure 7).
){kind=link}
Figure 7 Using color to make a more appealing user interface.
Once again, the code for adding color to the user interface is slight (see Listing 4), but as you can see it has a big effect on the appeal of the form.
Listing 4 Adjusted Colors and Borders
<HTML>
<HEAD>
<TITLE>add_phrase.asp</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=add_phrase.asp>
<TABLE BORDERCOLOR=#572119 BORDER=1 CELLSPACING=0><TR><TD>
<TABLE CELLSPACING=0>
<TR><TD BGCOLOR=#DFCCAC><B>Phrase</B></TD>
<TD><INPUT TYPE=TEXT NAME=phrase></TD></TR>
<TR><TD BGCOLOR=#DFCCAC><B>Usage</B></TD>
<TD><INPUT TYPE=TEXT NAME=usage></TD></TR>
<TR><TD BGCOLOR=#DFCCAC><B>Example</B></TD>
<TD><TEXTAREA NAME=example></TEXTAREA></TD></TR>
</TABLE>
</TD></TR></TABLE>
<INPUT TYPE=SUBMIT VALUE="SUBMIT HACKER PHRASE">
</FORM>
</BODY>
</HTML>
Finally, we add a title and instructions to the form as well as make all the controls a consistent width (see Figure 8).
){kind=link}
Figure 8 Adding a title, instructions, and consistent control width.
Again, the code to implement these changes is slight (see Listing 5):
Listing 5 Final Form for Contributing Hacker Phrases
<HTML>
<HEAD>
<TITLE>add_phrase.asp</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<CENTER><FONT STYLE="font-size:16pt" COLOR=#572119>
<B>Add Your Own Hacker Phrase!</B>
</FONT>
<HR COLOR=#572119>
<TABLE BGCOLOR=LIGHTGREY><TR><TD>
<B>Instructions</B>. Don't hold back. If you have a great hacker
phrase that you use at school or work, let's hear it. Post the
phrase in the form below for the whole world to see!!!
</TD></TR></TABLE>
<HR COLOR=#572119>
<FORM METHOD=POST ACTION=add_phrase.asp>
<TABLE BORDERCOLOR=#572119 BORDER=1 CELLSPACING=0><TR><TD>
<TABLE CELLSPACING=0>
<TR><TD BGCOLOR=#DFCCAC><B>Phrase</B></TD>
<TD><INPUT TYPE=TEXT NAME=phrase SIZE=45></TD></TR>
<TR><TD BGCOLOR=#DFCCAC><B>Usage</B></TD>
<TD><INPUT TYPE=TEXT NAME=usage SIZE=45></TD></TR>
<TR><TD BGCOLOR=#DFCCAC><B>Example</B></TD>
<TD><TEXTAREA NAME=example ROWS=5 COLS=34></TEXTAREA></TD></TR>
</TABLE>
</TD></TR></TABLE>
<INPUT TYPE=SUBMIT VALUE="SUBMIT HACKER PHRASE">
</FORM>
</CENTER>
</BODY>
</HTML>
With the user interface for contributing new hacker phrases set, the next step is to add the Active Server Pages (ASP) code for storing the hacker phrases in the database.