Building an E-Portal from Scratch

Let's Build an E-Portal!

Now we know the rough principles on which to base our e-portal design. So how do we create the objects, pages, and database designed above?

Web Pages

I tend to use VB-based ASP for developing front-end pages, and I'll use that here for demonstration purposes. JavaScript-based ASP pages work just as well, but in an example like this it can be confusing to work out which aspects happen on the client and which on the server; in my examples, JavaScript happens on the client at all times. Again, all the functionality shown here can also be written as JSPs or CGI programs.

Personalization

To make it easier to understand how these pages work, I've used parameters passed to the ASP pages and read in using Request.QueryString. However, in a real-life situation, I would advise using a POST to send information between web pages and then use Request.Form("fontface"). It's possible to use Request.Item("fontface") rather than Request.QueryString. But this allows parameters to be passed to your program by the user, and may therefore present a security risk—although it makes debugging easier!

Listing 1 shows how I've implemented simple font personalization within the e-portal:

Listing 1—Personalizing the Font

<%
fontface=Request.QueryString("fontface")
fontsize=Request.QueryString("fontsize")

if fontface="Arial" and fontsize=8 then
%>

<style type="text/css">

<!--
.bodycopy { font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 8pt; font-style: normal; font-weight: normal}
.bodyboldcopy { font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 8pt; font-style: normal; font-weight: bold}
-->
</style>
<%
else
  if fontface="Arial" and fontsize=10 then
%>
:
:

Every bit of text on the e-portal is surrounded by a <span> tag:

<span class="bodycopy">This is the text</span>

so that the above code changes all the text on the page depending on the fontface and fontsize parameter values passed to the page. You can see this by clicking the following two links:

• Arial

• Verdana

As this e-portal is simply a demo, it currently works with only two font faces—Arial and Verdana. For each font, you can select font size 8 or 10.

Similarly, the bgcolor parameter determines whether the user sees the page in a garish yellow (!!) or in gray.

The default settings for the e-portal can be reset by clicking the Reset Settings link.

Personalization settings need to be held in a persistent form. My e-portal uses a Microsoft Access database for this purpose. When the user is first created (during the registration process), the default settings are entered into the database against the user's user ID, by calling the User object's Create() method. This, in turn, carries out the database insert statement in Listing 2:

Listing 2—Entering the Default Settings for the User

set rst3 = Server.CreateObject("ADODB.Recordset")
sqlstring = "Insert into intranetsettings " & _
"(discussions,sales,presentations,projects," & _
"techdocs,news,personal,generalinfo,Headingsoff," & _
"fontface,fontsize,bgcolour, UserId) " & _
" values (1,1,1,1,1,1,1,1,0,'Arial',10,'y','" & userid & "')"
resultset.open sqlstring, con,3,3

The Reset Settings link resets the personalization settings held for the user within the database, using the object User and calling its method, User.ResetSettings().

The Select Settings link allows the user to change his or her personalization settings. By clicking the available options, the user can indicate whether he or she wants to see various content sections on the e-portal—Discussion Groups, Project Documents, Presentations, News, and so on. Note that the Search section is mandatory, so users don't have the option of removing that section.

Now take a look at the page—click Select Settings within the e-portal page.

As discussed earlier, the user also has the option of selecting the background color for the e-portal (yellow and gray are the only options in this limited demo), the font color, and the font face. After clicking Save Settings, the user returns to the e-portal main page, which implements any settings changes. This is enabled by the JavaScript code in Listing 3, which calls the main e-portal page, passing it the changed values for all the options.

Listing 3—Implementing the User's Custom Settings

function returntomainpage() {
top.location.href="intranetframeset.asp?" & _
"&userid=<%=Request.QueryString("userid")%>&" & _
"password= <%=Request.QueryString("Password")%>" & _
"&fontface=" & document.settings.fontface.value" & _
" "&fontsize=" & document.settings.fontsize.value & _
"&bgcolor=" & document.settings.bgcolor.value & _
 "&sales=" + document.settings.sales.value & _
 "&discussions=" & document.settings.discussions.value & _
 "&projects=" + document.settings.projects.value & _
 "&presentations=" + document.settings.presentations.value & _
 "&personal=" + document.settings.personal.value & _
 "&general=" + document.settings.general.value & _
 "&news=" + document.settings.news.value & _
 "&techdocs=" + document.settings.techdocs.value
}

The demo e-portal also allows the user to personalize using another method; by clicking the X (Close) button in the upper-right corner of some of the sections, the user can remove the sections from view.

Try it now, so that you can see how it works—go to the e-portal and close the Discussions section.

Remember that all sections except the Search section can be removed. This is facilitated by the JavaScript code in Listing 4, which creates a URL containing the new options selected after the removal of a section.

Listing 4—Creating a URL with the New Settings

url="/intranet/intranet.asp?";
url=url + "rId=&password=&userid=&ui=&sno=";
if (section == "discuss") { url=url + "&discussions=0"; }
if (section == "sales") { url=url + "&sales=0"; }
:

Thus, when intranet.asp is called with discussions set to 0, it doesn't display that section.

Using code similar to that above, it's also possible to open a new window containing just one section by clicking the interlinked boxes that appear at the upper-right corner of each configurable section within the portal. The difference is setting discussions to 1 and all other sections to 0, so that only the Discussions section is shown in the new window.

Incorporating Content Sources

To incorporate content from other sources, I've used iframe tags. Note that this currently works only in Internet Explorer, although there are ways of mimicking an iframe tag in Netscape. (See Jennifer Niederst's Web Design in a Nutshell [O'Reilly, 1998], available on Safari.)

In the main view of the e-portal, I've incorporated an HTML news ticker from the BBC news web site by using the following code:

<iframe height="30" marginwidth="0" width="315" scrolling="no"

src="http://news.bbc.co.uk/ticker/ticker.252.stm"></iframe>

I used a similar technique to incorporate my links.asp page, although I passed it some parameters (using the Request.QueryString values) to ensure that the color and fonts match the ones used in the main e-portal:

<iframe height="30" marginwidth="0" width="315" scrolling="no"
src=" links.asp?bgcolor=<%=Request.QueryString("bgcolor")%>
&fontface=<%=Request.QueryString("fontface)%>
&fontsize=Request.QueryString("fontsize")%>"></iframe>

In a similar way, the whole of Microsoft's home page is incorporated into a scrollable iframe in the Supplier View e-portal page—see this by clicking Supplier View in the top frame.

Email/Search Integration

If you click the Email link in the top frame, you'll get straight into my email box with easy.com. This is enabled simply by sending the correct parameters to their code, as follows:

<a href='http://mail.easy.com/easygroup/login/loginaction.asp?
loginname=<%=Request.QueryString("userid")%>
&password= <%=Request.QueryString("password")%>
&loginpassword= <%=Request.QueryString("password")%>' target="email">

Similarly, the search facilities are integrations of the Altavista search engine, using their URLs and passing appropriate parameters, as shown in Listing 5.

Listing 5—Integrating the Search Engine

<FORM NAME="formuk"
ACTION="http://uk.altavista.com/q?kl=XX&what=uk&search.x=41&search.y=16" METHOD=GET>
<span class="bodycopy">
<b>UK Web Search</b></span>
<SCRIPT Language="Javascript">
    document.write("<INPUT NAME='q' VALUE='' SIZE=32>");
</SCRIPT>
</form>

HTML-Only Feedback Form

The feedback form (click on Feedback in the top frame) is just like an ordinary HTML form, but its action sends an email message to me containing the values in all the controls on the field, with the subject INFOREQUEST. The action is incorporated like this:

<form name="mailform"
action=mailto:michelle.johnston@firebirdservices.com?SUBJECT=INFOREQUEST method="post"
encType="text/plain">

XML People List

In the Supplier View, the supplier has a contact list in the middle column. This is constructed from XML generated directly from a database with an XSL stylesheet applied to it. Listing 6 shows the XML file.

Listing 6—Displaying the Contact List

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="peopletransform.xsl"?>

<PEOPLE>
<PERSON person_id="mishj" sex="F">
  <person_name>
    <given_name>Michelle</given_name>
    <surname>Johnston</surname>
  </person_name>
  <company>Firebird Services Ltd</company>
  <country>UK</country>
  <contact_details>
    <email>michelle.Johnston@firebirdservices.com</email>
    <phone>208-426-1062</phone>
    <phone>796-033-7101</phone>
    <fax></fax>
    <mobile>796-033-7101</mobile>
  </contact_details>
</PERSON>
<PERSON person_id="fredb" sex="m">
  <person_name>
    <given_name>Fred</given_name>
    <surname>Bloggs</surname>
  </person_name>
  <company>Bloggs Incorporated</company>
  <country>UK</country>
  <contact_details>
    <email>fred.bloggs@bloggs.com</email>
    <phone>208-927-3202</phone>
    <fax></fax>
    <mobile>790-011-9810</mobile>
  </contact_details>
</PERSON>
<PERSON person_id="johnd" sex="m">
  <person_name>
    <given_name>John</given_name>
    <surname>Doe</surname>
  </person_name>
  <company>Doe International</company>
  <country>US</country>
  <contact_details>
    <email>john.doe@doe.com</email>
    <phone>770-446-1666</phone>
    <fax></fax>
    <mobile>668-900-8080</mobile>
  </contact_details>
</PERSON>
</PEOPLE>

Listing 7 shows the stylesheet applied to it.

Listing 7—XSL Stylesheet for Use with the Contact List

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
 <html>
 <body bgcolor="#eeeeee">
  <font face="arial" Size="3">People</font>
  <table border="1">
  <tr bgcolor="ffdd00">
   <th align="left"><font face="arial" Size="2">Name</font></th>
   <th align="left"><font face="arial" Size="2">Contact Info</font></th>
  </tr>
  <xsl:for-each select="PEOPLE/PERSON">
  <tr>
   <td><font face="arial" Size="1">
     <xsl:value-of select="person_name"/>
     </font>
   </td>
   <td><font face="arial" Size="1">
     <xsl:value-of select="contact_details/phone"/>
     </font>
     <br></br>
     <font face="arial" Size="1">
     <xsl:value-of select="contact_details/mobile"/></font>
     <br></br>
     <font face="arial" Size="1">
     <xsl:value-of select="contact_details/email"/></font>
   </td>
  </tr>
  </xsl:for-each>
  </table>
 </body>
 </html>
</xsl:template>
</xsl:stylesheet>