Intro: What is DIV? And what is SPAN?

Quoted from W3C website:

If I may, w3school.com pages here about DIV and here about SPAN summarize these two HTML tags nicely:

• The <DIV> tag defines a division or a section in an HTML document. [It] is often used to group block-elements to format them with styles.
• The <SPAN> tag is used to group inline-elements in a document. [It] provides no visual change by itself.

So both DIV and SPAN are used for grouping. And if you want to know when to use what, check the sample below.

				<p>The following sentence is wrapped in a DIV: <div>Well, <i><b>hello</b> there.</i></div> The previous sentence is wrapped in a DIV.</p>
				<hr />
				<p>The following sentence is wrapped in a SPAN: <span>Well, <i><b>hello</b> there.</i></span> The previous sentence is wrapped in a SPAN.</p>
			

I hope it’s clear to you: DIV will produce a block element (ie. it will be ‘separated’ from the previous and next elements), whereas SPAN will produce an inline element (ie. it will flow together with the previous and next elements). Also note that both tags don’t alter anything inside them, and they don’t make themselves different style-wise—except the line breaks, of course.

So far so good? GOOD! Let’s begin our journey deeper then, shall we

Unfortunately the project is confidential so I can’t disclose it’s nature But at least I can share with you readers and fellow IT professionals about my experience with downloading—and redownloading for soooo many times—stuff from MSDN, and also the discovery of a free program that allowed me to resume/retry interrupted downloads. Read on if you are also having problem with your downloads and are looking for a solution.

So anyway, while R&D was setting up the machine, I was in charge in downloading the software via our MSDN subscription. In order to limit the impact on our network/bandwidth, I started the download during night time, where our network usage and workforce is low. By morning time it should be ready, and we can start the installation.

The next day I came to work, the downloaded files were sitting nicely and ready to be burned to DVDs (they are ISO image files). But hey! I supposed to get several gigabytes total, but the files were only several megabytes! Drat–was it network problem? Or MSDN site had a problem?

Not wanting to spend that day’s energy wasted for nothing, I connected to our backup network and restarted the download. All was well and several hours later the download window said it’s done. Except that it’s not I still got incomplete files!

Our backup line was working perfectly fine during the download duration. I also tried different computers with different operating systems and different browsers, and all of them had the same result. Oh well… I concluded that it must be MSDN who were having problem. Looks like the download got interrupted, and there’s no way for me to resume the download. I could redownload for the third time, but I would get the same result without a reliable download method. So I guess my options were only either relying on the Lady Luck, or get a download manager program that can handle automatic download retry/resume.

Allow me to sidetrack a little bit. Before, MSDN downloads were handled by a small program called File Transfer Manager (FTM). When you hit the download button, FTM would automatically pop up and take care of it. But this time, I didn’t that window. Perhaps Microsoft had decided that IE download manager is good enough?

So I downloaded FTM from here, installed it, and hoping that it would solve this problem. But whoa—where’s the ‘Add’ button? If I can’t add, then how can I ask it to download for me?

Desperate for a solution, I googled around, and found another alternative. Apparently there’s this Download Manager program that’s replacing FTM (read here for reference). I don’t know why DM didn’t get automatically installed/launched when I downloaded those ISOs from MSDN, but anyway off I went—downloaded DM from here, installed, and YES! I saw a ‘New Download button’! And a ‘Settings’ button that allowed me to manage the retries and connections! The joy of seeing those was as exciting as the relief of seeing a stream of light at the end of a long and dark tunnel. Honest!

Fast forward: I finally managed to download the huge ISO files. I could see that it would automatically retry when the download got interrupted (it even gave the detail of the error, such as error code 80027ef1, and heaven knows what that meant). It also would resume the download instead of starting over.

But the discovery I found—and the main point of this article—is that I can use this Download Manager to download other big files. No need to buy other programs (at least for me, since Download Manager serves me right), and I can be assured that the stuff I am and will be downloading will be 100% complete when it is finished.

So again, as a summary, here’s the download link for Microsoft Download Manager: http://www.microsoft.com/en-us/download/details.aspx?id=27960. Use it wisely!

I googled this Google login problem to no avail. Unbelievably unlucky I was—Looks like I was the only person having this problem??? (Pssst: or perhaps Google removed these from the search result?)

But anyway, it works fine now, and I’m a happy person again (hyperbolically speaking :D). Read more to see how I solved it.

The facts I gathered were:

• The problem was not browser-specific. It happened on both my Opera Mobile and Pocket/Mobile Internet Explorer
• The problem was not due to temporary internet files and cookies. I cleaned them up (sometimes this can solve corrupted cache and cookie date, but in this case it couldn’t).
• The problem was not due to the mobile device. I tried on Palm Treo 800w and HTC Touch Pro2, and both exhibited the same problem.
• This is more of a hunch than a fact: I think it had something to do with Google authentication page/mechanism.

And yes, my hunch proved to be correct. These are what I did to solve this issue:

First, I logged in to the desktop site on my mobile device. Note that this is not the same as changing your mobile browser’s rendering/display layout to mobile, meaning that I had to go to www.google.com on my mobile device (and I didn’t bother to change the browser’s rendering setting).

From there, I simply proceeded to log into my Google account. Scrolling, zooming, tapping the login button with my stylus, and finally it’s done. You won’t believe how slow and hard it was on my devices

And then, to verify it worked, I simply exited the browser and relaunched it to my iGoogle mobile site. And yes it worked! I even tried to restart my device, and yes it still worked. Hurrah!!!

So there you go. If you have the same problem, please try these couple steps. And let me know (ie. post a comment) if it works or not, will ya?

And with my son studying first-grade math now, the same maxim holds true to him as well—”Practice makes perfect, son,” I keep telling him.

Don’t get me wrong; he is good a math. In fact, he is a GATE student, an avid reader with a keen interest for scientific facts, and a future ocean animal scientist slash doctor slash inventor, whatever his final decision be. But still, silly math mistakes happen, and one way to prevent it is to practice more. I had him done more additions and subtractions, and I DO see the result of the drill.

So what tool did I use? Just a simple Excel sheet printout! With formulas, of course—this is a perfect ‘practice’ opportunity for me too, don’t you think?

You can download the Excel file here. Print it out (trust me… it will be easier for your kids to write down the results), refresh the calculation (using F9) or reload the file, and repeat. You can also change the parameters (number of digits, and whether you want the second number to start from 0 or not) to suit your kids’ needs.

The formula

First thing first: Given n as a positive integer, how can we get a list of positive n-digit numbers? Simple: by using the power of 10, the numbers will be from 10^n-1 to 10ⁿ-1. For example, a list of 2-digit numbers will be from 10^2-1 to 10²-1, or from 10 to 99.

In Excel-speak, this is accomplished using POWER function, where the first parameter is the ‘base’ number (to be powered), and the second parameter is the power^*. So for our example above, we can use the formula POWER(10, 2-1) and POWER(10, 2)-1, respectively.

^* Please note that Excel also provide a ^ operator you can use intead of the POWER function, ie. a^b is the same as POWER(a,b). However, for the sake of functional clarity, I chose to use POWER function in this article. If you chose ^ operator, go ahead, it will produce the same result, and you’ve earned +1 Coding Achievement along the way!

Next, having the list of numbers with n digits, how can we pick a random number out of it? RANDBETWEEN to the rescue! Simply provide the lower and upper bounds as its first and second parameter, and this Excel function will happily return us a random number (integers) between those bounds. So far so good?

Alright, so we get the first/initial number of our algebra problem. How to generate the second number?

Again, let’s tackle the easy part first. For addition problems, we can use the same RANDBETWEEN formula as the first number above. Or, if you prefer to have a random number from 0 to n-digit, then we simply supply 0 in the first parameter. That’s it.

How about subtraction problem? Again, use the RANDBETWEEN formula. But since I assume basic math students don’t get the concept of negative numbers yet, this time the random number’s upper bound must be as high as the first number. In other words, if the first number is X, then the second number must be between 0 to X (if we want to start from 0).

Wait—but how can we tell Excel to choose randomly between addition and subtraction? If you’ve come up this far, you should remember that one formula we keep using over and over: The Mighty RANDBETWEEN!!! We can simply ask His Majesty to generate a number between 0 and 1, then treat 0 as subtraction and 1 as addition. This is an Excel-ent way of doing a functional coin flipping, pun intended :D.

So let’s wrap them all up. With the help of the IF function, we can compose an expression like this:

=IF(RANDBETWEEN(0,1) = 0, "- " & RANDBETWEEN(A,B), "+ " & RANDBETWEEN(A,C))

Where:

• A is the lower bound of the problem number, ie. whether starting from 0 or from the first n-digit positive number,
• B is the first number of the subtraction problem, so the calculation won’t involve negative results, and
• C is the upper bound of the addition problem, ie. the last n-digit positive number.

The spreadsheet

Again, you can download the Excel file here. Study it well, grasshopper, as this is one way to practice your Excel-fu. Remember: Practice Makes Perfect!

Questions? Problems? Leave a comment and I’ll try my best to help.

“Sure! What’s the problem?” I replied.

Client: “Can’t go to the website. Internet Explorer said something wrong with the connection.”

Me: “Other websites OK?”

Client: “Yep. Google, eBay, Facebook are all okay. Only 21watches.com webmail has problem.”

Hmm.. perhaps the webmail server is having problem, I thought. But to make sure: “So you can still go to 21watches.com?”

Client: “Yep, I can go ther—oh hold on… No man, it’s down too looks like. But yesterday was OK though.”

Good, so everything on that site was down… except that it’s NOT! I was on that website in that very second—using Firefox, in case the problem with my client was due to his IE misbehaving.

Me: “Perhaps your network guy did something bad? Like blocking your site by accident….”

Client: “No, he’s on vacation since last week. Yesterday no problem, and nobody else has access to the router. Heck, nobody here even KNOW what is a router.”

What a mystery… Anybody care to guess why?

So the following were the facts:

• Except 21watches.com, browsing other websites are OK. However, on my PC—and I also tested on my cellphone—21watches.com could load without any problem. This means it’s not website problem
• No network/router configuration changes were made. Assuming no hacker intrusion—and what hacker wants to block ONLY 21watches.com anyway?—and only 21watches.com was affected, this means it’s not network problem as well.
• There was no problem the day before, and no changes were made on the website/hosting side, so something happened between yesterday and today must have caused this problem.

My guess was that somehow their IP got blocked by the hosting company. Not by their DSL provider, because it wouldn’t make sense if they would only block 21watches.com. So off I went to test my theory: I remotely logged in to their router, used the router’s diagnostic tool to do a traceroute to 21watches.com, and—gotcha! The tracert stopped at silvercore1.whbdns.com (207.210.114.166), which is the ‘entry point’ to the web hosting provider.

Oh well.. off I went, making one call to Namecheap to unblock it. Courious, I asked the reason of the block, and it was because of 5 login failures to cPanel within 5 minutes. Oh boy

One more call to close this case: to the client. I told him that somebody in his company tried to login to the website’s cPanel unsuccessfully too many times, as well as the hosting’s policy of IP blockage due to this issue. “Next time, let me know if you guys forget the password; I can help reset it. Don’t guess too many times, or they will block you again,” I said.

“Don’t worry, it won’t happen again. And I’ll find out who did that this time for sure!” he said.

So the moral of the story is as always: Making one or two mistakes are understandable, but three is too many, and five I guess is too much. Especially if you’re on Namecheap (and I think other hosting providers must also have similar restrictions), they will block you if you make invalid cPanel logins 5 times in 5 minutes.

There, keep that in mind.

And good luck to that person who did it that time. May my client spare your life….

Questions? Problems? Leave a comment and I’ll try my best to help.

If you haven’t notice, your pictures in Facebook are organized in a grid structure. To be exact: they will be in a four-column grid. And just like the screenshot below (or the real thing here), you can see that it’s very easy to take advantage of this layout. The key is to know how to count. In pixels, that is!

Counting pixels

If you’re the curious type, I’ll show you how I count the pixels. If you’re the what-the-heck-just-give-me-the-money-honey type, then you can skip to the next section. Seriously, I won’t get mad—go ahead!

Alright, let’s get back to business.

My tool of trade in working with websites is Firebug, a must-have Firefox add-on for web developers. With Firebug, I can easily see the size (width and height) of Facebook’s picture thumbnails. Simply right click on it, click ‘Inspect Element’, mouseover on the picture link, and voila! It’s 161px wide and 120px high, as clear as crystal. (NOTE: as of this writing, since Facebook puts the thumbnails as background image, then the size follows the container, ie. the I tag, which is set to 161px by 120px).

Now how about the gap between the thumbs? You can go with the Firebug route (that’s what I did), or you can use any screen ruler (my fave is the free dRuler here). Of course the screen ruler is easier, and you’ll clearly see that the horizontal gap is 20px, and the vertical gap is 18px.

So, if we have 4 columns (of 161px-wide thumbs) with 3 horizontal gaps (of 20px wide), then the maximum picture we can have is just a simple algebra: 4 * 161 + 3 * 20 = 704px. And since we can have as many rows as we want, the maximum height is—well, unlimited! (NOTE: again, as of this writing, looks like Facebook doesn’t limit the number of rows displayed in your picture album. Please correct me if I’m wrong :D).

With all these facts in our hand, we’re all set to create our own Facebook Grid Picture masterpiece!

From pic to gridpic

Let’s recap:

• Thumb size is 161px wide by 120px high.
• Gap between thumbs is 20px horizontally and 18px vertically.
• The maximum picture width we can slice and dice is (better be) 704px.

From here on, you can use any picture editing of your choice. Photoshop is very good, and even Microsoft Paint will could hopefully get the job done (by dragging you to the brink of your mental exhaustion along the way). Speaking of my fave tools, my choice for pic editing is Paint.NET. It’s no Photoshop of course, but it’s as powerful, yet free! And trust me: it’s no Microsoft Paint, in a big time good sense!

With these tools, you simply select a 161px by 120px area → crop/save it away somewhere save → move the selection 20px to the right or 18px down → and repeat. If you’re not that perfectionist, it’s OK to miss a pixel or two… nobody will notice, honest

It’s still too tedious of a job, you say? Don’t worry: behindthecodes.com to the rescue!

behindthecode.com’s fbgridpic tool

With a great pleasure, allow me to direct you to the tool I’ve built for this very purpose. No fancy flashy features here… pardon me for that. With this tool, all you need to do is simply submitting your pic, and the tool will output the grid thumb pics. You just need to save those pics to be uploaded later to your Facebook album. Simple, eh?

The way it works is just the same as doing it manually. With the help of PHP’s GD (image processing) functions, below is the code snippet:

// load pic
$pic = imagecreatefromjpeg($tmp_name);  // NOTE: $tmp_name stores the picture file name
$picwidth = imagesx($pic);
$picheight = imagesy($pic);

// calc grid/size
$colcount = ceil(($picwidth + GAPWIDTH) / (SLICEWIDTH + GAPWIDTH));
$rowcount = ceil(($picheight + GAPHEIGHT) / (SLICEHEIGHT + GAPHEIGHT));

// create grid pics
$gridpic = imagecreatetruecolor(SLICEWIDTH, SLICEHEIGHT);
$white = imagecolorallocate($gridpic, 255, 255, 255);
for ($row = 0, $y = 0; $y < $picheight; $row++, $y += SLICEHEIGHT + GAPHEIGHT) {
	for ($col = 0, $x = 0; $x < $picwidth; $col++, $x += SLICEWIDTH + GAPWIDTH) {
		imagefilledrectangle($gridpic, 0, 0, SLICEWIDTH, SLICEHEIGHT, $white);
		$w = $picwidth - $x;
		$h = $picheight - $y;
		imagecopy($gridpic, $pic, 0, 0, $x, $y,
							$w > SLICEWIDTH ? SLICEWIDTH : $w,
							$h > SLICEHEIGHT ? SLICEHEIGHT : $h);
		$gridname = "tmp/" . $basename . "_" . ($row + 1) . "_" . ($col + 1) . ".jpg";
		imagejpeg($gridpic, $gridname);
		echo '<img src="' . $gridname . '" />';
	}
	echo "<br />";
}

// done
imagedestroy($pic);
imagedestroy($gridpic);

Using a ‘thumb picture placeholder’ $gridpic, this code will copy areas of the input JPG picture based on the measurements we’ve made before. And in order to handle right and bottom edges properly, it will fill $gridpic with white color before copying, essentially to erase the previously copied picture area. Finally, for every area copy, the code will save it to a temporary folder, and display it on screen in an IMG tag. Nothing complicated, right?

Give me your inputs

I know this tool is just for fun. But hey, if you have any suggestion for enhancements, or if you find any bugs, let me know, will ya! TIA

How so? Quoted from their website:

……say what???

Allow me to break it down so it’s easier for you to understand.

jQuery is a JavaScript library, which is fast and concise

I hope you know what is a library (and while we’re at it, I also hope you know what is Javascript). A lot of programmers have their own collections of codes that they can reuse on all their projects. If you’re a web programmer, then most likely you have (if not, you should have) some kind of Javascript library as well. The codes in this library–functions, classes, etc–might come from lots of different sources, and might provide lots of different Javascript-related functionalities. Over the time, some things get added, while some other things become obsolete. Some areas got improved, while perhaps some others got broken in the process. And at the end, you might end up with lots of unused, not-so-useful, outdated, and buggy glob of messy codes in your beloved library.

Now there… pardon me of being prejudicely hyperbolic, but this is the tendency of having a one-person team of developing a library, applicable only to that one-person developer. But what if there are several dozens of developers? And they all share the same passion and goal? And all of them are experts (at least in their specific fields, in the big Javascript world)? Well, they will surely produce a very good code library, won’t they? At least the library will be well maintained and contantly being enhanced, of course!

And what if this library is used by lots of projects? And its user/programmer community are actively giving feedbacks to the library developers? And the developers are actually listening–where bugs are squashed, speedups are introduced, and feature requests are implemented? Certainly all these condition will lead to an uberlibrary, don’t you agree?

And jQuery is just like that: A Javascript library that is powerful enough to empower some of the biggest websites (Google, anybody?). Its operations are fast, and its features are concisely to-the-point on… continue to the next point, please.

Simplifies HTML document traversing, even handling, animating, and Ajax interactions

These four areas are the foundation of jQuery. You want a UI (User Interface) library? Sorry, it’s not in jQuery core–but you can use jQuery UI library instead. You want picture slideshows? Again sorry, it’s not in jQuery core–but you can use other libraries (or jQuery plugins) to achieve that.

Stopping here, some might have the impression that jQuery sucks, because it doesn’t provide all that we need. But actually that’s the point! jQuery is very powerful because it does not provide all that you need. Philosophically, who is “we”? You might need a library to do fancy client-side graph library, but do “we”?

So per their concensus, they (jQuery team) chose to focus on these four aspecs–concise! And by focusing on these only, they can make their codes run blazingly fast! See the point now?

…all these are for rapid web development

Given an HTML element, and considering that element might contain subelement(s), how do you get only the textual data of that element? Easy peasy… use innerText of course. WRONG! In case you don’t know, innerText only works on IE!!!.

That’s one example of how cross-browser incompatibility destroy our coding happiness, and sometimes take our sense of pride and accomplishment with it. We need to spend more time researching how this works on other browsers, as well as more time implementing the solution that will work on all browsers we support. Well sure some of you might know how to do innerText on FF and Chrome, but wouldn’t it be nice if all browsers work the same way?

jQuery to the rescue! To get the text, just use text property. That’s it, and it will run on all IE, FF, Chrome, etc. Don’t believe me? Try this code (or run it here):

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById("dst_no_jquery").innerText = document.getElementById("source").innerText;
		}
		$(document).ready(function() {
			$("#dst_with_jquery").text($("#source").text());
		});
	</script>
</head>
<body>
	<div id="source">This is <b>the <i>content</i></b> of a div.</div>
	<p>The content of the div above will be copied down here...
		<div>...without using jquery: <u id="dst_no_jquery">???</u></div>
		<div>...using jquery: <u id="dst_with_jquery">???</u></div>
	</p>
</body>
</html>

Not only that this code rules on all browsers, notice that it is also shorter to write, which leads to–you’ve guessed it right–rapid development! Ta daaaa!

There are other reasons why jQuery leads to faster development, for example:

• ability to chain operations, which leads to a leaner code,
• availability of numerous plugins you can use that suits your need,
• ease of DOM manipulation (including element selection and traversing them) makes the development more intuitive,
• straightforward event handling and trigger,
• simpler implementaton of animation and/or effects,
• and so on.

For all these things, you can check jQuery site’s tutorials (you can find other tutorials too on Google). I will list out my use cases on where jQuery helps my development, but meanwhile, you can go ahead and familiarize yourself with the power of jQuery!

Why not the other Javascript libraries/frameworks?

When I started using jQuery, what I needed was something easy to use, fast to learn, and–of course–fast. Based on my research, I set my eyes to four candidates: MooTools, Dojo, Prototype, and jQuery. Below were my findings:

• I used slickspeed to test the candidates’ speed, and found that Prototype is the slowest; I crossed that out.
• Also from slickspeed, I noticed that in some test cases Dojo produced errors/exceptions. Not wanting any side effects affecting my developments, I decided to rule it out as well.
• MooTools were slightly slower than jQuery, so I decided to learn both. However, in my subjective opinion, I felt jQuery was easier to learn, thus I was able to deploy my sites quicker.
• WINNER: jQuery

I understand that some of you might disagree, and I believe my conclusion here doesn’t really provide a thorough, scientific, and object evaluations. But I suggest you to try it, and I’m sure you’ll like it!

Questions? Problems? Leave a comment and I’ll try my best to help.

Anyway, I added the posts, created the pages, linked it to my Google Analytics account, and everything were checked. Monetization was also set up properly. And lastly: added it to my Google Webmaster Tools and tried to do verification via Analytic. Result? Big red fail:

What’s going on here??? Apparently lots of people are also in loss.

My Analytics account were good, and I could see the data from this new blogspot site coming in. Also to be able to link to my Analytics, Webmaster said:

… and both were fulfilled already. So the problem was neither on the Analytics site nor my blogspot site. Well Google, thanks for your simplistic and unhelpful error message

Anyway, the problem turned out to be due to the placement of my Analytics tracking code: I put the code before the closing BODY tag, where Webmaster expected it to be in the HEAD tag. So off I went: edit the HTML code of my blogspot template, move the tracking code to end of HEAD element, and tried verification again. It worked!!!

So as a summary, I just want to give this solution (fix) to the world:

Hope this helps!

PHP on IIS on Windows 7

First things first: We know that it’s easy to serve webpages on Windows 7 using the help of the IIS (Internet Information Services). You can serve static HTML files (as well as other files like JPG/GIF/PNG, CSS, JS, XML, etc.), and you can also serve dynamic files, ie. scripts—or programs—that run on the IIS/server side. And being Microsoft’s technologies, IIS has a built-in support for ASP and ASPX files, which are usually written in VBScript and a .NET scripting languages respectively. You just need to remember to install them when you’re installing your IIS, which is as simple as checking their checkboxes. In short: IIS as the web server and ASP/ASPX as the scripting language just works out of the box. They are a match made in heaven Microsoft’s labs.

Now PHP is a different story. To start with: PHP is not one of Microsoft’s technologies. PHP is generally/friendly/widely supported by open source communities, including Linux and Unix communities. But for Windows users, we usually need to install the PHP installer from the EXE package, edit some configuration files and environment variables, do some other manual tweaks and settings, pray that our operating system don’t get messed up along the way, and cross our fingers while testing if the installation is completed successfully. Some unfortunately users might take hours or even days just to redo this installation repeatedly until it works. Anyhow, you can Google on how to do this, and while you’re browsing you might encounter some horror stories on it.

Hold on. Please don’t get it wrong. Microsoft has embraced PHP and aiming to make it easy to install PHP on IIS. They have tools (Web Platform Installer) to make it easier to install PHP. They even provides a step-by-step walkthrough on the installation process. Sure you can follow this—which BTW you still need to do quite a bit of manual tinkering—but in my opinion: why not going down on an easier path?

Enter XAMPP

XAMPP (it’s Windows-based flavor here) is an all-in-one one-package-containing-all solution to serve your PHP counterpart. It’s running on Apache web server, and provides support for PHP and Perl scripting languages. It also throws in MySQL as a database system for your web apps, Mercury Mail to send emails, and FileZilla FTP server to upload (and download) your web files.

And how much easier is it to install this baby? Much—M U C H—easier than installing IIS + PHP + MySQL + the other components one by one, of course. Picture this: single-package installation containing all those componenent, and a click-and-go installer that does all the extracting and copying and setting up. Compared with IIS: oh well, you get the idea I hope :D.

Without further ado, allow me to demonstrate.

XAMPP installation

I fired up my browser and typed the address:

http://www.apachefriends.org/en/xampp-windows.html

Scrolling down to the Download section, I downloaded the installer (EXE) which at this current writing was at version 1.7.3 (2009/12/23). The basic package installer was only 51MB, which took me about 4 minutes with my T1 speed, and run it right afterwards.

The first step was to specify the destination folder. I kept the default folder C:\, because it will create a folder named xampp inside it.

I hit the ‘Install’ button and watched the installer worked its magic as I sit back and relax.

Toward the end, it asked several questions in a Command Prompt window, which I happily follow through.

On the last step (which is kind of a ‘menu’), I chose 1 to start the XAMPP Control Panel. FYI you can actually x it out (exit) and launch the Control Panel via your Windows’ Start Menu.

Anyway, on the Control Panel, I just hit the Start button on Apache module to start the web server. While I was there, I also started the MySQL service. After it started, I tested it out by going to this address on my browser:

http://localhost

The XAMPP splash page! That says I’m all set!

So let’s recap: the installation is just a matter of running the installer → hit Install → five Enters → 1 to start the Control Panel → and finally Start the Apache (as well as the related services you need, eg. MySQL). And the best part is that you don’t need to remember these: Just follow the directions and you’ll be all set! Now beat that with IIS!

Ummm.. I thought we’re talking about PHP?

Yes, don’t worry I don’t forget about it. We’re getting there. As a matter of fact, with Apache web server alive and kicking, we’re there already.

I’m sure you understand that the idea of a web server is just ‘serving’ web pages. For XAMPP, these web pages are served from xampp\htdocs folder in your installation folder—in my case, it’s in C:\xampp\htdocs. You just need to upload your PHP files there (or perhaps into a new subfolder in there).

For example, I put a helloworld.php in there:

<?php 
echo "Hello World";
?>

… tested it:

http://www.apachefriends.org/en/xampp-windows.html

… and well, hello there!

So in conclusion: PHP works, just like that! And if you want to play more, your localhost—the XAMPP you just installed—has some demo programs (including one Perl program) you can try and study on.

XAMPP and portability

Before we proceed, let me clarify one thing: the idea of making XAMPP portable is more about carrying your ‘websites’ with you, rather than about making it install-once-run-anywhere. Yes, you can install XAMPP on your USB drive (thus making it portable), but what good is it without the website(s)? And if you have the website, isn’t it virtually accessible anywhere already (considering the address resolution and firewall/access rights are in place), thus making it ‘ever present’ with you? In other words, you’ll want to have a portable XAMPP only if:

• You’re building your website and your development can take place anywhere.
• You want an easy way to showcase your website, eg. to your client, investors, teammates, etc.
• You prefer having your data together with your website/web app.
• You can’t rely on the internet connectivity (or the government, while we’re at it :P).

So anyway, back to our walkthrough, making XAMPP portable is just a three-step work:

Step one: copy the XAMPP folder. Before you copy, you might need to stop the services first, because they might ‘lock’ the files, thus making the copy fails. On my installation, the entire XAMPP folder was about 250MB-something, so copying the it was fast and fit in my USB pen drive. After that, just transport it to your ‘target’—for me, it was plugging the USB drive into another PC. I didn’t bother to copy it into the target PC, since I want XAMPP to run off the USB drive directly.

The second step is to relocate the XAMPP directory. This can be achieved by running the setup batch file, ie. setup_xampp.bat. The prompts are as easily understandable as the installation. And since I’m using a USB drive, as you can see from the screenshot, I need to tell the setup to make a portable XAMPP without drive letters.

Lastly, run the control panel (via the setup’s text menu, or run xampp-control.exe to start Apache and MySQL/other services. After they’re running, test it (you’ll still use localhost) and off you go!

Afterwords

Now please pay attention here: XAMPP—and IIS on Windows 7—are meant for personal/development use only! Even though you can, but you won’t want to use it for any live/production-level websites. Don’t host your eCommerce sites with it! Don’t use them for your blog sites! Don’t even try! To make this point, allow me to cite this paragraph from their website:

There! It’s up to you now to heed my words or not—but as for me, I will never use XAMPP for my clients’ live websites :D.

Questions? Problems? Leave a comment and I’ll try my best to help.

“Ohai! All ready for your gaming expo?” I asked her casually.

“Yep, pretty much. We’re also set for a survey-slash-raffle program, where our booth visitors can fill in their contact info and play a jackpot-machine minigame to get into the instant raffle.”

“That sounds gr—” I tried to reply, but she kept on going.

“It’s a flash webpage, and we’re using Microsoft Access as the database storage. So we’ll run everything off the browser on our two laptops. They both are running on Windows 7.”

Suddenly I had a funny feeling down my brain. “Sooo… you want me to copy the program files to our website?” I asked, trying to guess where this talk led to. “No problemo!”

“Actually, THAT’S the problem…” she told me, sighing. “We won’t have any internet access in the expo. And we’re leaving by 3…”

Aha! So my feeling was right. Being a helpful coworker, I gave her a promise worthy of the next Presidential candidate: “Give me your laptops, and in 30 minutes I’ll make it work locally.”

And there she went, dashing to her office and back, presenting me with 2 high-end laptops and a big wide smile on her face.

So how did I tackle this? With the help of Microsoft’s IIS, it’s super easy! Follow these steps, and you can do it too!

Introduction to IIS

Before I go on with the steps, allow me to briefly explain about IIS (Microsoft’s Internet Information Services). To cut it short: IIS is Microsoft’s web server (and a web server is a collection of services to let you serve your websites). In Windows 7, IIS is offered as a ‘Personal Web Server’ component, available on all Windows 7 editions except Home Basic and Starter. For more information on IIS, please visit The Official Microsoft IIS Site or this Wikipedia article.

Now, off we go!

First, check the OS

I knew it’s Windows 7 (she told me, remember?), but I needed to make sure the edition. If it’s Home Basic or Starter (which I doubted, considering they’re high-end laptops), then I had to think of Plan B. Anyway, Win+Pause/Break I went (FYI in case you don’t know, that’s the shortcut key to bring up the System info, a.k.a. System Properties), and—yeah!—they were Home Premiums.

Yay! Knowing I can stick to my plan, I proceeded to the next step…

Installing IIS

IIS is not installed by default, so I had to go to the the Control Panel → Programs → Turn Windows features on or off (under Programs and Features section), and checked the Internet Information Services checkbox.

While there, I made sure I had the ASP component checked as well, because that game program were written in ASP. If your web files are all .HTM/HTML (including JS, CSS, XML, PNG, JPG, GIF, and all the other ‘static’ files), then you don’t need to enable this.

An OK later, it started the installation, and finished everything in several seconds. Or was it?

Testing the installation

There’s only one way to be sure: I fired up the browser (I used the stock Internet Explorer 8) and typed the local address:

http://localhost/

(localhost is an alias for your own computer, which translates to 127.0.0.1)

Taa daa! I could see the IIS welcome page!

From the IIS Manager (Sites → Default Web Site → Basic settings) I grabbed the website location, which was in:

C:\inetpub\wwwroot\

(in other words, http://localhost/ translates to C:\inetpub\wwwroot\)

Then I simply proceeded to copy the game program files into a subfolder called TigerGame(20100731), so the URL for this game’s root will be:

http://localhost/TigerGame(20100731)/

That’s all, folks! Except that it won’t work on the database part. Oh well

MDB access additional setup #1: Enabling 32-bit application mode

In case you didn’t notice, the laptops’ operating systems were 64-bit, which is great. However, there’s currently no way to make the ASP program work with Microsoft Access’ MDB file. Perhaps ODBC/OLEDB 64-bit drivers are missing, but this was not a good time to do research and experimentation. (Also I read somewhere looong time ago that the 64-bit drivers were either buggy, beta version, or simply just don’t work).

So in order to make it work, the easiest and proven solution was to ‘downgrade’ IIS application pool to 32-bit mode: Application Pools → DefaultAppPool → Advanced settings → set Enable 32-bit Applications to True.

(note that the application pool used by the website was DefaultAppPool, where you can get from the website setting dialog window).

And now it worked! But—ohnoes!—it wouldn’t save anything to the database. Solution: check the permission!!!

MDB access additional setup #2: Make the MDB writable

Permission is given to a user (or a group) and assigned to a resource (e.g. a file). So for this case, I need to give the ‘anonymous user’ account a write permission to the database file.

So first thing first: I need to check what’s the ‘anonymous user’ account: Default Web site → Authentication → Anonymous Authentication → Edit.

There I could see the account was named ‘IUSR’. Then I proceeded to give this user a write permission to the database file, which I found to be named db_store.mdb: Right click on the file → Properties → Security → Add → typed ‘IUSR’ and OK-ed it → and set the permission as below:

That’s it! After OK-ing the dialog boxes, I tested the back-end interface of the game (where I could directly try updating the database), and… SUCCESS!!!

TL;DR

In this post, I demonstrated that your Windows 7 can easily be ‘turned’ into a web server (albeit perhaps better be for personal/development purposes only). The process was relatively easy and straighforward. And if you want to try, I’m sure you can accomplish this in less than 30 minutes! Awesome, huh?

Questions? Problems? Leave a comment and I’ll try my best to help.