Here is a short post about how to install and use the search engine. Hopefully I will have time to describe the search engine in more details another time.

You need MS SQL Server to run the Search engine.

Installing the Indexer (Crawler)

Installing the indexer is very easy. Download the Setup Website Search and install it.

After the installation you will have this folder in your Programs:

If you have Visual Studio 2010 and do not want to install the program then you can download the source code and run the program from Visual Studio. The SearchDB.sql is also included in the project.

Creating the database

The first thing you need to do is creating the database. Open the SearchDB.sql in SQL Server Management and Execute the sql.

This will create the Search database.

You can change the name of the database by replacing [Search] with a new name.

Indexing

Now you are ready to run the indexer program. Open the Website Search program.

Enter the urls that you want to index in the Starting point box. You can create an index that combines two or more domains by entering one url on each line.

The crawler starts when you click the Go button and you will see the status in the bottom area of the program.

When the crawler is finish you can see the result in the database.

If you check the “Save Html”-checkbox then the indexer will also save the HTML from each page in the database.

The program will create a log file in the program folder. The program will also create temporary files in the program folder when searching pdf and Office files. Therefore you need to make sure that the current users have Edit access to the program folder: “C:\Program Files (x86)\SearchEngine\Website Search”. If the default user do not have access then you will not be able to index these file types and no log will be created.

The program will uses this default connection string “Data Source=.\SQLEXPRESS;Initial Catalog=Search;Integrated Security=True”. You can change this in the “SearchProgram.exe.config”-file in the program folder.

The program respects Metatags:

• Description metatag. The page will get a description from this tag if the tag is found.
• Robots metatags. Noindex and nofollow metags are respected.

Searching

In my next post I will show how to search using the search engine. But until then you can download the source code and see the sample website. It contains two searching samples.

I think the ValidatorCalloutExtender from the AJAX Control Toolkit is a very nice control. For those who don’t know the control the ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators (text taken from the sample on the AJAX Control Toolkit sample site): http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

But I don’t think the default styling of the ValidatorCallout is very nice:

Fortunately it is very easy to change the basic styling. As the sample shows we can change the border and background color by specifying our own custom style:

.customvalidatorcallout div, .customvalidatorcallout td { border:solid 1px red; background-color:#fff; }

And we can change the “highlight” css class to this:

.highlight { background-color:red; }

And change the “WarningIconImageUrl” and “CloseImageUrl" to our own images. Then we can get a ValidatorCallout that looks something like this:

Off course you could change the colors to something that match you site.

And we can even use some of the new stylesheet features like rounded corners and shadow:

.customvalidatorcallout div, .customvalidatorcallout td { border:solid 1px red; background-color:#fff; }
.customvalidatorcallout .ajax__validatorcallout_error_message_cell {font-size:12px;padding-top:10px;padding-bottom:10px;color:Red;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell {padding:2px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_icon_cell { padding-top:7px; -moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-moz-box-shadow: 2px 2px 2px gray;-webkit-box-shadow: 2px 2px 2px gray;box-shadow: 2px 2px 2px gray;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none !important; text-align:center;width:24px;padding:0px 0px 2px 2px;cursor:pointer;}
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv img { border:1px solid orange; background-color:Red; }
.customvalidatorcallout .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv img:hover { border:1px solid gold; }

And we will now have a ValidatorCallout that looks like this in the newest browsers:

And in older browsers it would just look like this:

Here is some other useful information about the ValidatorCallout: You can specify the PopupPosition of the callout. So if your form is place in the right side of the browser window then you can specify that the callout should appear to the left of form fields or above or below.

The ValidatorCallout also supports Skinning so a good way to implement this design on all ValidatorCallout’s on a complete site is to create a ValidatorCalloutExtender.skin file in the Themes folder where we specify the CssClass, HighlightCssClass, WarningIconImageUrl and CloseImageUrl.

I have included a sample with a ValidatorCalloutExtender.skin file and the above styling and samples of the PopupPosition:
http://sundgaard.dk/ValidatorCallout/ValidatorCallout_03.zip

The sample has been tested in IE9 (beta), Firefox and Chrome.
The warning icon in the sample is from this icon collection: http://dryicons.com/free-icons/preview/classy-icons-set/