| 7.0 |
The
Search Page.
When you have viewed the completed site, which will confirm
that the connection and the database files are all OK you can
start to build your own pages. |
| 7.1 |
Open the search.asp, page
now we will attach two recordsets to the page.
|
| 7.2 |
If it is not open already,
open the Data Binding palette (Window - Data Bindings or Ctrl+F10).
Now click on the plus button towards the top left of the window
and select Recordset (Query)
from the drop down menu.
|
| 7.3 |
This will open the Recordset
options palette, name the recordset rsTblFormats
and select the TDSFdemoOLE
conection we created earlier from the connections drop down
list and select the Formats
table form the Table drop down list.
|
| 7.4 |
Click Test, if everything
is OK you should see a window showing the records from the Formats
Table.
|
| 7.5 |
Now add the second recordset
to the page, repeat the above process but name your second recordset
rsTblGenres and select
the Genres table from
the Table drop down list in the recorset window. Click Test,
if everything is OK you should see a window showing you all
the records from the Genres Table.
|
| 7.6 |
Once the recordsets are
connected to the page we need to create a form into which the
user can enter the search words and select the search parameters.
Here's how our finished Search page should look in the Ultradev
design window.
|
| 7.7 |
If you wish to recreate
the page as in the completed demo site here are the Text and
Table attributes. However the layout will not affect the function
of the page, and you can place the form elements on the page
as you wish provided that they are contained within the form.
The page titles, Font - Arial, Helvetica, SansSerif, Text size
+1, Bold. In a table as follows:
Rows - 1, Cols -1, Width - 620 pixels, CellPad - 0, CellSpace
- 20, Border - 0, Align - Centre,
Page Header Text, Font - Arial, Helvetica, SansSerif, Text size
-1, Bold
Page Body Text, Font - Arial, Helvetica, SansSerif, Text size
-1, Normal
The main page table attributes are:
Rows - 1, Cols - 1, Width - 620 pixels, Cellpad - 0, CellSpace
- 10, Border - 0, Align - Centre.
Within the main page tables, use tables as follows:
Width - 100%, Cellpad - 0, CellSpace - 10, Border - 0, Align
- Default, here obviously use Rows and Columns as Necessary.
|
| 7.8 |
Within the main page table
place a Form with the following attributes:
Form Name - SearchForm
Action - results.asp
Method - Post
Use the Properties palette (Windows - Properties or Ctrl+F3)
to set the attributes of the Form and Form Elements as you
place them on the page.
Within the Form place a table with enough rows and columns
to set out the following form elements.
TextField Name - txtKeywords,
Labelled - Enter Keywords
List/Menu Name - selMatchType,
Labelled - Select Search Type
List/Menu Name - selFormat,
Labelled - Select Format
List/Menu Name - selGenre,
Labelled - Select Genre
List/Menu Name - selSortBy,
Labelled - Sort Results By
Radio Button Name - radDirection,
Checked Value - ASC,
Initial State - checked,
Labelled - Ascending
Radio Button Name - radDirection,
Checked Value - DESC,
Initial State - unchecked, Labelled - Descending
Button Name - Submit,
Label - Submit, Action
- Submit Form
You can label the form elements anything you wish on your
page, however ensure that the Names and all the other element
attributes in bold blue text are the same.
We will now look at each of the Form Elements in more detail.
|
| 7.9 |
The Text Field - Place the
TextField on the page and Name it txtKeywords
|
| 7.9 |
The List Menus
selMatchType |
| 7.10 |
Place the List/Menu in your
form, in the Properties pallete name the List/Menu selMatchType
ensure that Type is set to Menu.
|
| 7.11 |
Click on the List Values
button 
at the top right of the palette. This will open the List Values
Palette, Click on the plus 
button at the top left. In the Item Label Field Type All
Words Tab across to the Value Field and Type AND.
Repeat this process and create two further List Values for Any
Words with a Value of OR
and Exact Phrase with
a value of EXACT.
|
| 7.12 |
Click OK to close the List
Values palette. On the properties palette you will see the Item
labels you have just entered displayed in a little window labelled
Initially Selected click on All Words, it will be highlighted
in blue and be set as the default value selected when the web
page loads.
selSortBy |
| 7.13 |
Create a List/Menu in the
same way as described above, name it selSortBy
and enter the following Values in the List Values palette:
Item Label - Artist Name,
Value - ORDER BY ArtistName
Item Label - Album Name,
Value - ORDER BY AlbumTitle |
| 7.14 |
Click on Artist
Name in the initially selected window of the options
palette to make it the default value.
The remaining two List/Menus we are going to create will use
the two recordsets we attached to the page earlier to dynamically
generate some of the values in our List/Menus from the Formats
and Genres tables in our database.
selFormat |
| 7.15 |
create a list menu as previously
described and name it selFormat
and enter the following value as before in the List Values Palette
Item Label - All Formats,
Value -1 |
| 7.16 |
Now click on the Plus symbol
at the top left of the List Values palette as before, but instead
of typing the value in the text field click on the lightning
button 
at the right of the Item Label field this will open the Dynamic
Data Palette.
Here you can see the two recordsets we attached to the page
earlier. Click on the plus symbol next to the recordset (rsTblFormats),
you can now see all the records available in that recordset.
|
| 7.17 |
Click on Format to highlight
it and then click OK.This will close the Dynamic Data palette
and fill in the Item Label text field of the list values of
palette with the following piece of code:
<%=(rsTblFormats.Fields.Item("Format").Value)%>
|
| 7.18 |
Now we need to do the same
for the value field, click on the lightning button again to
reopen the Dynamic Data palette, however this time click on
FormatID. Click OK to close the Dynamic Data pallete. The Value
text field of the List Values palette should now contain the
following piece of code:
<%=(rsTblFormats.Fields.Item("FormatID").Value)%>
|
| 7.19 |
Click OK to close the List
Values palette. Now click on All
Formats in the Properties palette to make this the initially
selected value.
selGenre |
| 7.20 |
Now create the final List/Menu and
name it selGenre and
enter the following in the List Values palette:
Item Label - All Genres,
Value -1
|
| 7.21 |
Once again click on the plus button,
then the lightning button to select the Item Label from the
Dynamic Data palette. This time click on the plus symbol next
to the rsTblGenres recordset
click on Genre to highlight
it, click OK to close the Dynamic Data palette. Now click
the lightning button to select the Value from the Dynamic
Data palette, click on GenreID
to highlight it and then OK to close the palette. You should
now have the following two pieces of code in the text fields
of the List Values palette.
Item Label - <%=(rsTblGenres.Fields.Item("Genre").Value)%>
Value - <%=(rsTblGenres.Fields.Item("GenreID").Value)%>
The Radio Buttons
|
| 7.23 |
Now
place the two radio buttons on page and use the Properties palette
to enter the following attributes:
Radio Button # 1 Name - radDirection,
Checked Value - ASC,
Initial State - checked,
Labelled - Ascending
Radio
Button # 2 Name - radDirection,
Checked Value - DESC,
Initial State - unchecked,
Labelled - Descending
The Submit Button |
| 7.24 |
Finally
add a button to the page with the following attributes.
Name - Submit,
Label - Submit, Action
- Submit Form
The search page is now complete and we can move on to the
results page, which is actually where all the clever stuff
takes place and we have to get our hands dirty and do some
coding.
|
