How To Customize The Results Page

How to: alter the default display thru form variables | generate an entirely customized display | examples of people using this feature



Altering the Default Display thru Form Variables


The "results" page is the web-page returned to your browser by the search engine in response to your query. It contains a ranked listing of documents from UT web-space that are relevant to your search. As mentioned before here, it's easy to customize some aspects of how this page looks. This is done thru a set of form variables you set in conjunction with your search box code. The following is a tabulation of these variables:

variable namevalues and associated result
nhany integer: controls max # of docs to return
lk1: show doc summaries
2: don't
stany integer: controls starting hit number
rf0: sort by relevance
1: sort by date
pwany integer or percentage: controls width of results display
ws0: don't show word score
1: show word score of each document




Generating an Entirely Customized Display


On the other hand, if you want to incorporate your own graphics or want to change font sizes, Inktomi doesn't provide form variables to accomplish these objectives. But the situation isn't hopeless. To illustrate, click the submit button on the search box below and then come back to this page.




Customized Results Using Mutiple Sources and Style Sheets


The results page you just saw is different from the default one normally present ed by the Ultraseek search engine. Utilizing a scripting language like PHP, and the various output formats offered by Ultraseek, you can exercise a lot of flexibility with Ultraseek output. This example utilizes the current UTK style in the results.

This example searches LDAP, a database, and Ultraseek simutaneously when given a query.

Multiple search

source code for Search PHP script

source code for Multisearch PHP script

source code for Multisearch XSL file

Shown below is a PERL script that accomplishes customization. Basically, the script sends the query to the search engine, retrieves the results, strips off the UT-related information and graphics, incorporates some new images, makes changes to the fonts and colors and then displays the resulting page. Note the comments highlighted in orange. Also try the links to test some stylistic alternatives.

#Use the pathname to your PERL interpreter
#!/usr/local/courseinfo/perl/bin/perl
use LWP::Simple;
use CGI;
$req=new CGI;
print $req->header();

#Extracts the query string
$thing=$ENV{QUERY_STRING};

#Sends the query to the search engine and retrieves the default page in a variable called $contents
$start="http://search.tennessee.edu/query.html?"."$thing";
$contents=get($start);

#Assigns $contents to the scratch variable to reduce amount of subsequent code
$_=$contents;

#Strips off UT-related information
s/<center><img src="images\/UT\_plain\.gif"><br>//g;
s/<a href="http:\/\/www\.tennessee\.edu">UT homepage<\/a>//g;
s/<input type=checkbox name=col value="utc">Chattanooga//g;
s/<input type=checkbox name=col value="utia">Institute of Agriculture//g;
s/<input type=checkbox name=col value="utips">Institute of Public  Service//g;
s/<input type=checkbox name=col value="utk">Knoxville//g;
s/<input type=checkbox name=col value="utm">Martin//g;
s/<input type=checkbox name=col value="utmem">Memphis//g;
s/<input type=checkbox name=col value="utsa">System Administration//g;
s/<input type=checkbox name=col value="utsi">Space Institute//g;
s/<input type=checkbox name=col value="utc" checked>Chattanooga//g;
s/<input type=checkbox name=col value="utia" checked>Institute of Agriculture//g;
s/<input type=checkbox name=col value="utips" checked>Institute of Public& nbsp;Service//g;
s/<input type=checkbox name=col value="utk" checked>Knoxville//g;
s/<input type=checkbox name=col value="utm" checked>Martin//g;
s/<input type=checkbox name=col value="utmem" checked>Memphis//g;
s/<input type=checkbox name=col value="utsa" checked>System Administration//g;
s/<input type=checkbox name=col value="utsi" checked>Space Institute//g;
s/\"cs.html/\"http:\/\/search\.tennessee\.edu\/cs.html/gs;

#Strips off reference to a .css file (we'll use embedded stylistic elements instead)
s/<link rel=stylesheet href="default\.css">//g;

#Ensures that queries are redirected thru this script
s/query.html/get2.pl/g;

#Ensures that certain images, etc. are appropriately retrieved from the search engine
s/\"\//\"http:\/\/search\.tennessee\.edu\//g;

#Inserts style elements in the header
s/<head>/\<head> <style>
BODY {
font-family: Verdana, Arial, Geneva, Helvetica, "Lucida Sans", sans-serif;
}

#Click here to see what happens when we change "Verdana" to "Copperplate Gothic Light (The areas where changes occur are outlined in either red or blue)."
P {
font-family: Verdana, Arial, Geneva, Helvetica, "Lucida Sans", sans-serif;
}

#Click here to see what happens when we change "Verdana" to "Copperplate Gothic Light."
TD {
font-family: Verdana, Arial, Geneva, Helvetica, "Lucida Sans", sans-serif;
}


#Click here to find out what happens if you change the query class such that its background is white and its border black.
\.query {
background-color: #99FF33;
border-color: red;
}

#Click here to find out what happens if you change the query.label class such that its background is white and its text black.
DIV\.query \.label {
background-color: red;
color: white;
}

#Click here to see the results when the color is changed to red.
DIV\.query A {
color: black;
}

#Click here to see the results when background color is changed to pale orange.
\.tip {
font-style: italic;
#font-size: smaller;
font-size: larger;
background-color: #330099;
color: white;
}

#Click here to see the results when the color is changed to black.
DIV\.resultstop \.label {
color: red;
}

#Click here to see the results when the background color is changed to red.
\.navbar{
background-color: #99FF33;
color: black;
}

DIV\.results \.title A:link{
color: #009900;
}

DIV\.results \.title A:visited {
color:#003300;
}

#Click here to see the changes when we remove the left-margin indentation from the document summary.
DIV\.results \.description{
margin-left: 1em;
}

#Click here to see the results when we allow for URL's to be displayed.
DIV\.results \.url{
display: none;
}

#Click here to see the results when the color is changed to red.
DIV\.results \.wordscores{
font-size: x-small;
color: #666666;
}

#Click here to see the results when the color is changed to green.
DIV\.results \.score{
color: #990000;
}

#Click here to see the results when the color is changed to red.
DIV\.results \.fs A {
color: black;
}

<\/style>/g;

#This prints out the edited contents into a table surrounded by images of your choice
print "<html><center><img src=horizontal.jpg></center>";
print"<table> <tr> <td align=center><img src=vertical.jpg></td> <td align=center>";
print $_;
print "</td><td align=center><img src=vertical.jpg></td></tr></table>";



If you don't like style sheets, you can strip out these elements entirely and subsitute hard HTML code in its stead. We'll leave this to you.



Examples of People Using this Feature



The Innovative Technology Collaborative (ITC) at UTK was the first to utilize this feature. See it in action by using their search engine located here.