Steven Ng

I’ve currently been working with some technologies like Sitecore, Akamai (actually I take that back, Akamai has decent tech resources) and Prospero which have great company sites but lack public online technical documentation and support. I’ve tried searching for groups and wikis which are unavailable or not very active. Unfortunately these technologies are not as popular as jQuery, Umbraco or even Ruby on Rails so i’m desperate to post about this on my blog in hopes to get more help and info for these technologies from others.

Please help! If you’re using Prospero or Sitecore, please share your experiences on development or integration at the following groups: ProsperoTechnologies and Sitecore - Yahoo group or setup a Tech Wiki?

For companies that want to use Google’s search on their websites, they can purchase a Google Mini Search Appliance starting at $1995. Google gives you many ways to integrate this into your site, but in this post I will explain the fastest way for a developer.

Okay let’s begin! One day your boss tells you he just bought a Google Mini (or two) and wants you to make it work with your existing website. “make it work” is a real-world project requirement for those of you who haven’t been blessed being a cubicle slave yet.

First step is to obviously log into your Google Mini which can be reached by an IP address. Once inside the Mini you will create an collection and name it something descriptive like “stevenng_mainsite”. Start off by clicking on Crawl and Index from the left menu. Then go to Crawl URLs In the first sections Start Crawling from the Following URLs: add the full URLs from your website you want to crawl like this “http://www.stevenng.net”. Next under Follow and Crawl Only URLs with the Following Patterns: add the matching URL pattern to crawl like this “stevenng.net/”. In the last section, enter patterns for itesm you DON’T want called.

You can select to schedule crawls or do a continous crawl, I won’t cover configuration and setup much in this tutorial as this post is geared more towards developers.

In the Serving section under Front Ends you have the option to modify some XSL to display the search results for your website. The XSL can be modified using Page Layout Helper which is a wizard like tool or if you want a more customized search results page then you can edit the XSLT stylesheet yourself. The XSLT file is commented very well which helps if you’re not too comfortable modifying XSLT.

Now that everything is fine and dandy on your Google Mini appliance, it’s time to tackle your website. So you know you have to create a Form with a text input and submit button for starters. You will aslo need to pass the following hidden form variables, see below for a sample snippet:

<form method="get" action="google.stevenng.net/search">
        <input type="text" name="q" size="25" maxlength="255" value=""/>
        <input type="submit" name="btnG" value="Google Search"/>
        <input type="hidden" name="site" value="stevenng_mainsite"/>
        <input type="hidden" name="client" value="stevenng_resultpage"/>
        <input type="hidden" name="proxystylesheet" value="stevenng_resultpage"/>
        <input type="hidden" name="output" value="xml_no_dtd"/>
        <input type="hidden" name="num" value="10"/>
</form>

The site should be the collection you want to search, client and proxystylesheet is the name of your Frontend setup in the Google mini.

Lost is the type of show that makes me “think” throughout the entire show and hours after it. I was quite happy and intrigued by the Lost season finale. I was shocked to find out the side story about Jack was about the future after the get off the island! Anyways, here’s my silly 4 letter theory. The name of the show has only 4 characters. Many of the characters only have 4 letters in their first or last name: Jack, Kate, Pace (Charlie), John, Ford (Sawyer), Hugo, Mike (short for Michael), Walt, Hume (Desmond), Kwon (Jin & Sun), Alex, Rose, Karl, Dick (Richard), Yemi, Noor and Arzt (Leslie).

That’s a long list of first or last names that are only 4 letters, which to me makes this more of a clue than a coincidence. So i’m trying to think of similarities with the number “4″ like in the Numbers episode, “4″ was the first number and a multiple of some numbers in the “4, 8, 15, 16, 23, 42″ group. Please feel free to share any clues or related theories regarding this.

Overview

This example will explain how to use the Prototype.js Javascript library to perform a simple Ajax call from an html page to an ASP.NET page with dynamic info. In this example the dynamic ASP.NET page is getting the current date and time, in a real-world example an ASP.NET page could parse RSS feeds, show stocks quotes, lookup weather, etc.

Requirements

• ASP.NET
• Prototype.js

Let’s code!

1. Create a web form called ShowTime.aspx (ShowTime.cs will be auto created) in Visual Studio 2005 and add a label control as shown below:

   <asp:label id="lblDateTime" runat="server" />

2. Open up ShowTime.cs and declare a DateTime type variable and set it to display the current date and time:

   DateTime dtRightNow = DateTime.Now;

3. Inside the Page_Load set the page to not cache itself with the following code:

   Response.CacheControl = "no-cache";

4. Assign the current date and time to the lblDateTime control:

   this.lblDateTime.Text = String.Format("{0:d}", dtRightNow) + " @ " + String.Format("{0:T}", dtRightNow);

5. Now let’s create ShowTime.html. This page will call the Prototype.js and contain some Javascript to make an Ajax call to ShowTime.aspx
6. Between the <head></head> tags, reference the Prototype.js Javascript library like this: <script type="text/javascript" src="js/prototype.js" />.
7. Now we will write the Javascript that uses Ajax.Updater from Prototype.js. Below is the code that declares the page containing the dynamic content and the element to output the data when the link is clicked (you could also include the snippet below in a seperate Javascript file).

   <script type="text/javascript">
           function clickShowTime() {
               var url = "ShowTime.aspx";
               var display = "output";
               
               $('showtimelink').onclick = function() { 
                   return ajax(url, display); 
                   };
               }
           
           function ajax(url, display) {
               new Ajax.Updater(display, url, {asynchronous:true, evalScripts:true});
               return false;
               }
               
           window.onload = function() {
               clickShowTime();
               };
       </script>

8. We’re almost done! Just need to ad add a few more things between the <body></body> tags. We will add a link with an ID called showtimelink and a <div> with the ID of output.

   <div><a href="#" id="showtimelink">Click this link to show current date & time</a></div>;
   <div id="output"></div>;
   

9. That’s it! View the demo.

Download

• ShowTime.zip (18kb)

Log4net is part of the Apache Logging Services Project. It’s a tool to help ASP.net developers log message to a text file, xml file, email or database.

1. Add log4net.Config.XmlConfigurator.Configure(); to Global.asax in the Application_Start method.
2. In your code-behind or BasePage.cs, declare protected static readonly ILog logger = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
3. Web.config has all the magic. <configSection>, <log4net>, <appender> and <root>

To be continued…

In this tutorial I will show how to write C# code that handles the FileUpload control. We will use the RegularExpressionValidator control for client-side validation and introduce server-side validation methods when uploading specific file types.

coming soon…

When developing a web app or site, I usually start off with an XHTML file (template.html) and a CSS file (base.css). This example is a common layout for most websites and web apps, which is a centered, two-column layout and from there you can tweak it however you want. The naming convention I use for XHTML, CSS and JavaScript is all-lowercase with dashes seperating words. The reason I use this method is because in my ASP.NET controls, I use camel case and sometimes there could be similar name conflicts.

Stubbing out the XHTML file

First we’ll start with the XHTML file. Below is the list of <div> element IDs to stub out:

1. wrapper: This is the overall container that wraps all the DIVs, it also allows us to center the main area of our site.
2. header: Here we usually place a logo, slogan and/or header navigation.
3. nav: Holds the main navigation for the site. I’ve seen developers use this nav ID in ULs and DIVs, so the choice is up to you.
4. main-content: This is the middle part between the header and footer. It will also hold sub-DIVs depending on how you want to section out your site.
5. footer: Finally you can place copyright, support email, or a footer nav in this area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Simple CSS layout</title>
    <link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
        <div id="main-content">
            <div id="side-bar"></div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div><!-- end: wrapper -->
</body>
</html>

To be continued…