Setting Up Classic ASP Websites on IIS 7.5 with Visual Studio 2010

There are still many websites built and maintained with classic ASP because of many reasons. This post will cover two topics – how to setup classic ASP websites on IIS 7.5 and how to manage codes using Visual Studio 2010.

Conditions:

• OS: Windows 7 Professional SP1
• Web Server: IIS 7.5
• IDE: Visual Studio 2010 Professional SP1

I haven’t tested it any other than above. So, if you have a little bit different environment from mine, please bear in mind.

How to Setup Classic ASP Websites on IIS 7.5

Firstly, your IIS must turn on ASP features. Go to Control Panel > Programs and Features > Turn Windows features on or off. Then, tick the checkbox next to ASP and click OK.

 

Now, your IIS is able to run ASP websites. The next step is that your IIS needs a new Application Pool for the ASP websites. Go to Control Panel > Administration Tools and open Internet Information Services (IIS) Manager. Then create a new Application Pool.

Make sure that an administrator account as a Custom account for the Application Pool Identity must be selected. From the diagram above, Administrator is selected.

Once the new Application Pool is added, a new website using this Application Pool needs to be created to host classic ASP pages.

 

A new website for classic ASP is now created. It’s time for the website to recognise ASP script. Go to the website you’ve just created and find ASP item under the IIS section. Click it and set the below four to “TRUE“.

 

Once you finish the steps above, your classic ASP website should be up and running. This IIS setting also helps your Visual Studio 2010 debug the web page script.

Now, it’s time for Visual Studio 2010 to setup to manage the classic ASP codes.

How to Manage Classic ASP Codes Using Visual Studio 2010

In order for your VS 2010 to manage the classic ASP codes, three things must be done before starting to code.

First of all, register .asp file extension to your VS 2010.

 

This enables you to see syntax highlighting and code intellisence feature. Now, open the website by clicking File > Open Web Site…. Make sure that it’s “File System“, not anything else.

Depending on your preference, create a new solution and add a new website project under the solution. By doing so, the website will be more manageable.

Now, it’s time to create a web page. Create a new item and select an HTML Page. As a default, the filename will be HTMLPage.htm. Rename it to default.asp.

 

A new default.asp page is created. Type some classic ASP code into the page.

 

As we have already setup the syntax highlighting and code intellisense feature, in order to enjoy them, put the code <%@ Language="VBScript" %> at the first line and you will see the result like above.

Open your web browser and open the page you just created.

Please note that you can see the break point at the left next to the line number. That means we can also debug the classic ASP codes. As usual, in order to utilise the debug functions, you have to run VS 2010 as an administrator privilege. Before starting to debug, the website property must be configured.

 

As VS built-in web server doesn’t support classic ASP, we have to use our local IIS for debug. So, setup the property like above. And use “Attach to Process” from the Debug menu. Once you run the “Attach to Process” command, you’ll get the screen like below. Find w3wp.exe bound by the account that we setup on IIS previously (that is Administrator here in this post).

 

Now, try to run the website again and you’ll get the break point highlighted.

 

So far, we have setup and reviewed how to set up classic ASP website to run on IIS 7.5 and code it on VS 2010. By default, classic ASP is not chosen by IIS and VS 2010. So, some configuration change must be performed in order for that.

Try it and enjoy your ASP coding.

How to Install the Latest Version of Mercurial Web Repository on Windows 2008 Server R2

It’s a super pain to install HG on Windows 2008 Server R2. This post is based on Firegarden’s article and has additional information from other resources.

Prerequisites

• Windows 2008 Server R2
• The latest version of Python: 2.7.3 (at the moment of writing)
• The latest version of PyWin32: Build 217 (at the moment of writing)
• The latest version of Mercurial: 2.2.2 (at the moment of writing)

Setup Process

Please note that if your choice of Python has to be consistent. In other words, if you choose Python of x86 version, all other applications have to be x86 version; if you choose Python of x64 version, all other applications have to be x64 version; otherwise, this will not be working for your system.

1. Installing Python.

As Mercurial doesn’t support Python 3.x, the latest version of Python we can use is 2.7.x.

1. Go to the Python download page. http://www.python.org/download/releases
2. Download the latest 2.7.x version of Python. Choose the platform carefully, if to be x86 or x64.
3. Install Python downloaded. Make sure that the installation must be conducted by an administrator permission. During the installation process, let the installer set the default installation directory, which will be C:\Python2x.
4. Add the Python path to the system environment path.
   1. Open “Control Panel” > “System and Security” > “System” > “Advanced System Settings“
   2. Click “Environment Variables...” and find the “Path” variable under “System variables” section.
   3. Append “;C:\Python2x;” to the “Path” value. Make sure that the path value is delimited by semi-colons.
   4. Open a command prompt and type “python” at any directory and you will get into the python console. Press CTRL+Z to exit from the console.
   5. If you can’t run the “python” command on the command prompt, check the step 4.3 again. If the path has been correctly set, your server might need to reboot.

2. Installing PyWin32

Again, your choice of platform has to be consistant; if you have installed Python of x86 version, this also has to be x86 version; if you have installed Python of x64 version, this also has to be x64 version.

1. Go to the Python for Windows Extensions download page. http://sourceforge.net/projects/pywin32/files/pywin32
2. Go to the latest build and download an appropriate one corresponding to your Python version and platform. The filename looks like “pywin32-xxx.win32-py2.7.exe”
3. Install the PyWin32 downloaded. Make sure that the installation must be conducted by an administrator permission.
4. In case of error you might face at the end of the installation process. The message will look like:
   

   close failed in file object destructor:
   sys.excepthook is missing
   lost sys.stderr

   This is because of your administrator permission. For workaround of this: http://sourceforge.net/mailarchive/message.php?msg_id=29300152

   1. Click “Start Menu” > Right click on “Computer” > Click “Manage“.
   2. Go to “System Tools” > “Local Users and Groups” > “Users“
   3. Create a new account named “Admin” and assign it to the “Administrators” group.
   4. Open a command prompt as an administrator and type
      

      runas /user:Admin pywin32-xxx.win32-py2.7.exe

      and type password you set previously.

   5. If you get an error “Access is denied“, close the command prompt and open it again as an administrator.

3. Building and Installing Mercurial from the Source Code.

As the latest version of Mercurial installer (2.2.2 at the moment of writing) is built with Python 2.6.6, the installer will not be running on our server. So, we need to build the source with Python that we have installed into our system.

1. Go to the Mercurial download page. http://mercurial.selenic.com/downloads
2. Download the source code and unzip it. We assume that the unzipped directory is “C:\hg-source“.
3. Open a command prompte as an administrator and move to the unzipped directory.
4. Run the following command to build Mercurial
   

   python setup.py --pure build_py -c -d . build_ext -i build_mo --force

   Even if you meet a warning like “warning: hgbuildmo: could not find msgfmt executable, no translations will be built“, just ignore it.

5. Run the following command to install Mercurial
   

   python setup.py --pure install --force

   Mercurial will have been installed at “C:\Python2x\Lib\site-packages\mercurial“

6. In order to execute to “hg” command at anywhere, try the followings:
   1. Copy “c:\python2x\scripts\hg.bat” to “c:\python2x“
   2. Open hg.bat and modify the line
      

      "%~dp0..\python" "%~dp0hg" %*

      to

      "%~dp0python" "%~dp0\scripts\hg" %*

4. Installing ISAPI-WSGI Module

For better performance, we need to install ISAPI-WSGI module to build a DLL file.

1. Go to the ISAPI-WSGI download page. http://code.google.com/p/isapi-wsgi/downloads/list
2. Download the latest version of the source code. The precompiled version will not work for our setup.
3. Unzip it. We assume that the unzipped directory is “C:\isapi-wsgi-source“.
4. Run the following command to compile the source
   

   python setup.py install

5. Seting up IIS for the Mercurial Web Repository

As IIS doesn’t recognise Python and Hg natively, we need to setup IIS manually.

1. Open IIS Manager.
2. Create an application pool called “Mercurial” with the following configurations:
   1. Set “.NET Framework Version” to “No Managed Code“
   2. Set “Enable 32-Bit Applications” to “True“, only if you have installed x86 version of Python.
3. Create a website on IIS for the web repository. We assume that the directory is “C:\inetpub\hg” and its URL is “hg.myserver.com“. This has to point the application pool “Mercurial“.
4. Copy the “hgwebdir_wsgi.py” file from the Mercurial source code downloaded to “C:\inetpub\hg“. It is located in “C:\hg-source\contrib\win32“.
5. Open the “hgwebdir_wsgi.py“, find and edit the parameters below:
   

   hgweb_config = r'c:\inetpub\hg\hgweb.config'
path_prefix = 0

6. Create a new “hgweb.config” file in “C:\inetpub\hg” and place the following into it.
   

   [paths]
/ = c:\Repositories\*

7. Open a command prompt as an administrator and move to the directory “C:\inetpub\hg“.
8. Run the following command to build the ISAPI-WSGI library.
   

   python hgwebdir_wsgi.py

9. Open Handler Mappings and click “Add Wildcard Script Map...” with followings:
   1. Set “Executable” to “c:\inutpub\hg\_hgwebdir_wsgi.dll” that has been created from the step 5.8.
   2. Set “Name” to “Mercurial-ISAPI“.
   3. If you are asked to allow the ISAPI extension, click “YES“.

So far, if everything is done smoothly, you can browse the web repository by typing the URL “http://mg.myserver.com” into your brower’s lcation bar.

This is optional. If you want to tie basic authentication function to the web repository, try the following steps.

6. Setting up Basic Authentication of IIS onto the Web Repository

1. Create users and a user group.
   1. Click “Start Menu” > Right click on “Computer” > Click “Manage“.
   2. Go to “System Tools” > “Local Users and Groups” > “User Groups“
   3. Create a user group, named “Mercurial Users“
   4. Go to “System Tools” > “Local Users and Groups” > “Users“
   5. Create as many users as you want and assign the users to the “Mercurial Users” group.
2. Set the permission for the “Mercurial Users” group to only allow the access to “C:\inetpub\hg“.
3. Create a self-signed certificate and bind the HTTPS protocol with “hg.myserver.com“.

Once everything is done, type “https://hg.myserver.com” and you will be asked to login to the site.

It would be great if you guys who are reading this article share your experiences regardless of success or failure.

When Getting 404 Error While Using FancyBox 1.3.4 jQuery Plugin

According to the article http://stackoverflow.com/questions/6591288/im-getting-404-errors-with-fancybox-images, there are 404 errors occur while using the FancyBox 1.3.4 jQuery plugin. I had the exact same errors and, because of this, my IIS has almost gone down to write server error logs.

In order to fix this issue, without modifying the plugin core, simply add the URL rewrite rule into your web.config.

<configuration>
	...
	<system.webServer>
		...
		<rewrite>
			<rules>
				...
				<rule name="Fancybox image path correction" stopProcessing="true">
					<!--
						Assumptions:
						- the page URL is http://yoursite.com/contents/pagename.html
						- the 404 error happens when the server tries to access to http://yoursite.com/contents/fancybox/image_file_name.png
						- FancyBox jQuery plugin is located under /scripts/jquery.fancybox-1.3.4
					-->
					<match url="^contents/fancybox/(.+).png$" />
					<action type="Rewrite" url="/scripts/jquery.fancybox-1.3.4/fancybox/{R:1}.png" />
				</rule>
				...
			</rules>
		</rewrite>
		...
	</system.webServer>
	...
</configuration>

Node that this is just a workaround, not the solution. The best thing is modifying the plugin core.

Confirm Password vs Confirm Email

During the signup process at a certain website, candidates are usually required to fill username, password and email at least. Traditionally, in order to avoid typing wrong password, a “Password Confirm” field has been used so far. It doesn’t let users only confirm their password, also let them make sure how they put their correct password and remember it easily.

Nowadays, a lot of websites do not request users to confirm their password while signing up. The reason is that additional field to fill in hurts user experiences. According to Munroe, It takes more time for users to complete the action and, as a result, the website will lose the users retention. That sounds very reasonable. “Forgot Password” function is to support users who forgot their password when they don’t remember the one.

Well, then there is another issue arising. How can we assure if users put their correct email address? If they put misspelled email address, the password reset email or authentication email will not be sent to the user. Website developer cannot guarantee if the users type the correct ones or not.

Of course, keeping the “Password Confirm” field won’t help users enter correct password. Instead, Appleseed argues in his article that we need to provide “Email Confirm” field to make users sure to put correct email address. Appleseed ends his post with:

A misspelled password is annoying. A misspelled e-mail address is hazardous.

If I am asked to put additional field, I’ll rather choose the extra “Email Confirm” field as the quotation above. If I can, I will not put any extra field but email and password (optionally username or nickname).

How do you guys think of this?

How to Get URL Hash Programmatically with Javascript

URL hash is not part of official URL fragments (RFC 2396), but is widely used for page navigation purposes. As this is not a part of web standards, even though most web browsers support this, there is no way to pass this value to server-side scripts, unless Javascript helps.

<script type="text/javascript">
	(function ($) {
		$(document).ready(function () {
			//	Appends the URL hash, if exists.
			var hash = window.location.hash;
			$("div.pagination a").each(function (i) {
				//var href = $(this).attr("href") + hash;
				$(this).attr("href", $(this).attr("href") + hash);
			});	//	$.each
		}); //	$.ready
	})(jQuery);
</script>

Let’s see the Javascript code above. The highlighted line is the key to get the hash URL. With this approach, we can easily get the hash URL and append it to any anchor tag programmatically.

Javascript Error: functionName() is not a function

Reference: In my Javascript I keep getting “submit is not a function”. What did I do?

Developers often meet a javascript error that says “functionName() is not a function”, even though functionName() is the actual function and coded correctly. That message usually comes up when functionName() is not defined.

How come does this happen? There is a secret. Shhhh~

<input
	type="button"
	id="btnCheck"
	name="btnCheck"
	onclick="javascript:btnCheck();" />

<input
	type="button"
	id="btnCheck"
	name="btnCheck"
	onclick="javascript:checkSomething();" />

As seen above, there are two button controls. ID, name and onclick attribute on the first control are the same as each other. While as, the name attribute on the second control, is different from the onclick attribute.

The first one will not work and the second one will work. This is the secret. When an HTML tag calls javascript, the function name must be different from the control’s ID and name; otherwise it displays the error “functionName() is not a function”.

This is pretty basic understanding of using javascript. But sometimes developers overlook the basic. Let’s back to basic! 🙂

Capturing TAB Keystroke with Javascript in Web Browsers

References:

• Detecting keystrokes
• A tool to check which javascript keyCode is assigned to any key pressed
• Key and Character Codes vs. Event Types

Users on the Web don’t only use mouse for navigation, but also use their keyboard for fast and quick browsing. As a simple example, once they visit Google and type a keyword in the textbox, then they press the Enter key, rather than clicking the “Search” button. As another example, they use the TAB key to navigate menus.

These user actions sometimes cause unexpected results. Before the web 2.0 era, developers simply ignored these actions or prevented them from keyboard typing navigation. However, nowadays all user actions are allowed as far as they don’t break the web site, in terms of “user experience” or “usability”, or sometimes “accessibility”.

Therefore, developers need to identify what users do in a particular situation and prepare its reaction. Identifying the TAB keystroke is one of them.

Assuming that there are fields to be filled and validated before a certain transaction. When users enter nothing and press the TAB key, developers expect an error message appears and stay focused on the field. However, in our reality, regardless of the validation result, the focus moves onto the next field. That’s not what developers expect. In order for users to stay focused on the field, therefore, the following javascript code might be useful.

function checkTabKey(obj, e)
{
	var charCode = null;
	if ("which" in e) // NN4 & FF & Opera
		charCode = e.which;
	else if ("keyCode" in e) // Safari & IE4+
		charCode = e.keyCode;
	else if ("keyCode" in window.event) // IE4+
		charCode = window.event.keyCode;
	else if ("which" in window.event) // Other browsers support events
		charCode = window.event.which;
	else
		alert("the browser doesn't support");
	if (charCode == 9)
		setTimeout("document.getElementById(\"" + obj.id + "\").focus()", 1);
}

First of all, the code identifies what key has been typed. The keystroke event is stored in a different place, depending on browser types, so we need to detect it. Then, leave the focus to move onto the next field. After that, by using the setTimeOut() method, the focus is set back to the first field that the TAB key is typed.

That’s it for the TAB key detection. Let’s play with this!

---

자바스크립트로 탭키 잡아내는 방법. 탭키를 잡아내도 다음 필드로 이동하는 것을 막을 수가 없었지만, setTimeOut() 메서드를 이용하면 시간차로 잡아낼 수 있다.