|
|
|
|
In this tutorial topic you will add the first improvement to the classified ads site: a way for users to search for ads matching some criteria: the ad type, category and location, as well as some keywords. The keywords are searched both in the ad title and content.
As for the Job site search improvement, you will use two pages for the search: one where the user can select the values of each criteria, and the actual results page, displaying the ad title, and a link to see more.
To create the first part of this enhancement, the search form page, follow the next steps:
Create a new page in the site root, search.php. Open it in Dreamweaver.
Start the Custom Form Wizard from the MX Kollection tab of the Insert panel. Configure it to use the database connection created at the beginning of this tutorial. You don't need to set a redirect page, as it will not be used in this example.
In the second step of the wizard, you can add fields that will be displayed in the page. This is actually a much easier way of adding form elements, as it allows you to manage them in a central place. Also, you can define a SQL query to use them in the wizard's last step. Add the following fields: Type, Category, Location and Keywords. For the first three, set them to be displayed as menus, and configure the menus to retrieve data from the respective tables. For an example of how to do that, see the Post Ad section.
When all fields are set, you can click the Finish button to close the wizard.
Now edit the form's submit button, by changing its label from Insert Record to Search, as it is more appropriate.
The last thing to do on this page is to set the
form's action to point to the results.php page.
Select the form tag, and in the Action text-field
of the Property Inspector type the name
of this page (which will soon be created).
Now, when viewed in Dreamweaver, the form looks
like:
Save the page and upload it to the server.
Now you must build the results page, which will take the criteria submitted by the form, and retrieve the data that matches from the ads table. The data retrieval is done by a filtered recordset. To create this page follow the next steps:
First create the result.php file in the site's root folder. Open it in Dreamweaver.
Add a new recordset from the Bindings tab, by pressing on the Plus (+) button and selecting the Recordset (Query) option of the pop-up menu.
Switch to the QuB3 view of the dialog box by clicking the button on the right.
A window like the one below will appear. Configure
it as shown, then click New Query:
Enter a name for the query in the prompt:
Now the MX Query Builder window will open in a new window. If you're not already familiar with the interface, you may want to give the QuB Workspace orientation page a quick look.
In the Tables panel,
check the box next to the ads_ads table.
This puts the table in the Database
Diagram panel. Now check the boxes next the following fields:
· id_ads
· idtyp_ads
· idcat_ads
· idloc_ads
· title_ads
· content_ads
These fields will then be listed below in the
Query Management panel. This is where you
set the conditions necessary for obtaining the information requested by
the user. Each field has a column labeled Condition:
With the exception of the id_ads field, each row
will need to have a condition associated with it. Starting with the idtyp_ads field, click the ...
button in the Condition column. Fill in
the fields as shown in the image below, then click OK.
Repeat step 10 for the idcat_ads and idloc_ads fields, only using "Category", respectively "Location" as the Run-time Value.
Now you will add conditions for both the title_ads, and content_ads
fields, but with different settings for the condition. Since the comparison
is between strings, rather than numbers, use the contains option for the
Condition. You will also use "Keywords" as the Run-time Value,
and "%" for the Default Value, as shown below:
Once all the conditions have been added, save
the query by going to the Query menu and
selecting "Save":
Close the MX Query Builder interface and go back into Dreamweaver.
Click Refresh next to the Query
name field in the QuB Visual Recordset
window.
Now the completed recordset from MX
Query Builder will appear in the list. At this point there's one
slight change to make in the query. In the text area containing the SQL
code, scroll down to the last line.
Change the final AND
to OR. You must also put an opening parenthesis
after the last "AND", and a closing parenthesis and the end
of the query. See the image below for how the query should look after
the change, then click OK.
At this point, the recordset retrieves the correct data, but there are no elements to display it. Since this is only a results page, you do not have to display all details of an ad, but only its title, and a link to a detail page. You can use a dynamic table to show results.
Place a dynamic table from the Application tab of the Insert panel. Configure it to display all records of the rsResults recordset. Once you've added the table, it will display all recordset columns. Except for the title_ads column, delete the rest. Also remove the header row for the title column.
To place the link to details for each ad, create
a new column after the title_ads one. Enter
the text Read more, and make it a link.
In the Make Link dialog box, browse to the detail_ad.php
page, and pass it an URL parameter. Name the parameter id_ads,
and set its value by pressing the dynamic data
icon, and choosing the id_ads recordset field:
Now the page looks like the following when viewed
in Dreamweaver:
To make the results page easier to understand, create a new paragraph before the dynamic table. This is where the page title, as well as the keywords used in the search will be displayed.
Type in "Search results for:". Switch to code view, and enter the following code:
For PHP
<?php echo $_POST['Keywords']; ?>.
For ColdFusion
<cfoutput>#FORM.Keywords#</cfoutput>
For ASP VbScript
<% =request("Keywords") %>
You can now save the pages and upload them to the server. Before calling
it quits, though, you should place an entry in the login.php
file that will point to the search page and
create the detail page. This way it will be much easier to find. If you
access the page, you can enter the criteria you want in the form, and
when you press Search, the results will
be displayed:
After performing the search, the results are displayed as in the following
image:
The last thing to do is create the detail page, which opens when the Read more link is clicked. This page will only display the ad that has been selected, and whose ID has been passed through the id_ads URL parameter. To build the detail page, follow these steps:
Open the detail_ad page in Dreamweaver. For this page, you will be creating a query in MX Query Builder, using steps similar to those used to build the rsResults recordset.
Create a new recordset, from the Bindings tab of the Application Panel. Name it rsDetail, and select as connection the connAds database connection.
Switch to the QuB3 view by clicking on the QuB3 button on the right.
Click the New Query button on the bottom, and enter rsDetail in the name prompt.
After the MX Query Builder interface opens, go to the Tables panel on the left. Select all tables except for the subscribe_sub table.
With the tables now in the Database Diagram, you can move them around with the mouse so that all tables are visible.
Once the tables are positioned, add relations
between them by dragging the foreign keys from the ads_ads
table, and dropping them on their corresponding primary key. Take a look
at the image below for an example:
To get the fields required for this query, check
the following boxes from the ads_ads table.
· id_ads
· idusr_ads
· idtyp_ads
· idcat_ads
· title_ads
· content_ads
· idloc_ads
· name_cat
· name_loc
· name_typ
With the above fields now listed in the Query
Management panel, add a URL parameter condition to id_ads
field as done in steps 9 & 10 of the rsResults
query. Configure the Condition as shown below:
Now repeat steps 13 - 15 from the rsResults query to be able to use the new query in Dreamweaver.
The new SQL code should now appear in the QuB Visual Recordset window. Click OK.
Now close the recordset creation dialog box by clicking the OK button.
From the Bindings tab drag and drop all of the fields that you want displayed onto the page. You can also arrange the fields any way you want them.
Once you're done with the table column display,
save the page and upload it to the server. You can now try out the ad
search.
You can further improve your site using the MX Kollection 3 suite, by adding an administrative section, where you can control which ads can be published on the web site, which users to accept or to promote as administrators, and a better ad detail page for the search results. And all these can be made with your own design.