<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>behindthecodes.com &#187; How To</title>
	<atom:link href="https://behindthecodes.com/blog/category/how-to/feed" rel="self" type="application/rss+xml" />
	<link>https://behindthecodes.com</link>
	<description>Programming, web design, gadgets, and anything beyond</description>
	<lastBuildDate>Fri, 24 Jan 2014 16:45:28 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.9.40</generator>
	<item>
		<title>Let&#8217;s talk HTML and CSS: about DIV and SPAN</title>
		<link>https://behindthecodes.com/blog/2011/11/lets-talk-html-and-css-about-div-and-span-266</link>
		<comments>https://behindthecodes.com/blog/2011/11/lets-talk-html-and-css-about-div-and-span-266#comments</comments>
		<pubDate>Wed, 02 Nov 2011 22:31:22 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Web Programming]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=266</guid>
		<description><![CDATA[During my web development years, I got these questions a lot: How to convert an HTML table to DIVs and SPANs? How to put several DIVs on the same line? How to make give a SPAN width and height? Etcetera DIV, etcetera SPAN. So to make it easier to explain and refer to again later, [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>During my web development years, I got these questions a lot: How to convert an HTML table to DIVs and SPANs? How to put several DIVs on the same line? How to make give a SPAN width and height? Etcetera DIV, etcetera SPAN. So to make it easier to explain and refer to again later, allow me to present this &#8216;demo&#8217; slash step-by-step tutorial. Hope this helps!</p>
<p><span id="more-266"></span></p>
<h3>Intro: What is DIV? And what is SPAN?</h3>
<p>Quoted from <a target="_blank" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.4">W3C website</a>:</p>
<div style="font-style: italic; font-weight: bold;">The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.</div>
<p>If I may, w3school.com pages <a target="_blank" href="http://www.w3schools.com/tags/tag_div.asp">here about DIV</a> and <a target="_blank" href="http://www.w3schools.com/tags/tag_span.asp">here about SPAN</a> summarize these two HTML tags nicely:</p>
<ul>
<li>The &lt;DIV&gt; tag defines a division or a section in an HTML document. [It] is often used to group block-elements to format them with styles.</li>
<li>The &lt;SPAN&gt; tag is used to group inline-elements in a document. [It] provides no visual change by itself.</li>
</ul>
<p>So both DIV and SPAN are used for grouping. And if you want to know when to use what, check the sample below.</p>
<div class="notab">
<div class="tabbutton">Execution</div>
<div class="tabcontentcontainer">
<div class="tabcontent">
<p>The following sentence is wrapped in a DIV:
<div>Well, <i><b>hello</b> there.</i></div>
<p> 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>
</p></div>
</p></div>
<div class="tabbutton">Source</div>
<div class="tabcontentcontainer">
<div class="tabcontent">
<pre class="brush: js; html-script: true; tab-size: 2">
				&lt;p>The following sentence is wrapped in a DIV: &lt;div>Well, &lt;i>&lt;b>hello&lt;/b> there.&lt;/i>&lt;/div> The previous sentence is wrapped in a DIV.&lt;/p>
				&lt;hr />
				&lt;p>The following sentence is wrapped in a SPAN: &lt;span>Well, &lt;i>&lt;b>hello&lt;/b> there.&lt;/i>&lt;/span> The previous sentence is wrapped in a SPAN.&lt;/p>
			</pre>
</p></div>
</p></div>
</div>
<p>I hope it&#8217;s clear to you: DIV will produce a <b>block</b> element (ie. it will be &#8216;separated&#8217; from the previous and next elements), whereas SPAN will produce an <b>inline</b> element (ie. it will flow together with the previous and next elements). Also note that both tags don&#8217;t alter anything inside them, and they don&#8217;t make themselves different style-wise&#8212;except the line breaks, of course.</p>
<p>So far so good? GOOD! Let&#8217;s begin our journey deeper then, shall we <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" /> </p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2011/11/lets-talk-html-and-css-about-div-and-span-266/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Microsoft Download Manager to download large files</title>
		<link>https://behindthecodes.com/blog/2011/09/using-microsoft-download-manager-to-download-large-files-196</link>
		<comments>https://behindthecodes.com/blog/2011/09/using-microsoft-download-manager-to-download-large-files-196#comments</comments>
		<pubDate>Tue, 20 Sep 2011 18:48:00 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Software]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=196</guid>
		<description><![CDATA[We are having a big project in my company. A pretty big one, which requires a couple of new servers running Windows 2008 R2 64-bit and SQL Server 2008 R2, with IIS (Internet Information Services) running and hosting local websites. And this project will save us time and money when it&#8217;s live. Unfortunately the project [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>We are having a big project in my company. A pretty big one, which requires a couple of new servers running Windows 2008 R2 64-bit and SQL Server 2008 R2, with IIS (Internet Information Services) running and hosting local websites. And this project will save us time and money when it&#8217;s live. </p>
<p>Unfortunately the project is confidential so I can&#8217;t disclose it&#8217;s nature <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" />  But at least I can share with you readers and fellow IT professionals about my experience with downloading&#8212;and redownloading for soooo many times&#8212;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.</p>
<p><span id="more-196"></span></p>
<p>So anyway, while R&#038;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.</p>
<p>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&#8211;was it network problem? Or MSDN site had a problem?</p>
<p>Not wanting to spend that day&#8217;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&#8217;s done. Except that it&#8217;s not <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" />  I still got incomplete files!</p>
<p>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&#8230; I concluded that it must be MSDN who were having problem. Looks like the download got interrupted, and there&#8217;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.</p>
<p>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&#8217;t that window. Perhaps Microsoft had decided that IE download manager is good enough?</p>
<p>So I downloaded FTM from <a href="http://transfers.ds.microsoft.com/ftm" title="Microsoft File Transfer Manager" target="_blank">here</a>, installed it, and hoping that it would solve this problem. But whoa&#8212;where&#8217;s the &#8216;Add&#8217; button? If I can&#8217;t add, then how can I ask it to download for me? <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" /> </p>
<p>Desperate for a solution, I googled around, and found another alternative. Apparently there&#8217;s this Download Manager program that&#8217;s replacing FTM (read <a href="http://www.withinwindows.com/2011/07/18/short-microsoft-now-using-download-manager-on-msdntechnet-ftm-almost-dead/" title="Short: Microsoft now using Download Manager on MSDN/Technet, FTM almost dead" target="_blank">here</a> for reference). I don&#8217;t know why DM didn&#8217;t get automatically installed/launched when I downloaded those ISOs from MSDN, but anyway off I went&#8212;downloaded DM from <a href="http://www.microsoft.com/en-us/download/details.aspx?id=27960" title="Microsoft Download Manager" target="_blank">here</a>, installed, and YES! I saw a &#8216;New Download button&#8217;! And a &#8216;Settings&#8217; 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!</p>
<p>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.</p>
<p>But the discovery I found&#8212;and the main point of this article&#8212;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.</p>
<p>So again, as a summary, here&#8217;s the download link for Microsoft Download Manager: <a href="http://www.microsoft.com/en-us/download/details.aspx?id=27960" title="Microsoft Download Manager" target="_blank">http://www.microsoft.com/en-us/download/details.aspx?id=27960</a>. Use it wisely!</p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2011/09/using-microsoft-download-manager-to-download-large-files-196/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Google Mobile sites can&#8217;t remember your login?</title>
		<link>https://behindthecodes.com/blog/2011/09/google-mobile-sites-cant-remember-your-login-186</link>
		<comments>https://behindthecodes.com/blog/2011/09/google-mobile-sites-cant-remember-your-login-186#comments</comments>
		<pubDate>Fri, 02 Sep 2011 18:36:47 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Website problem]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=186</guid>
		<description><![CDATA[This happened to me recently: Somehow I have to keep logging into my iGoogle mobile site on my Treo 800w. I used all I could: cleared the cached pages and cookies, restarted, switched to both Opera Mobile 10 and Pocket/Mobile Internet Explorer, and all failed I googled this Google login problem to no avail. Unbelievably [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>This happened to me recently: Somehow I have to keep logging into my <a href="http://www.google.com/m/ig" target="_blank">iGoogle mobile site</a> on my Treo 800w. I used all I could: cleared the cached pages and cookies, restarted, switched to both Opera Mobile 10 and Pocket/Mobile Internet Explorer, and all failed <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" /> </p>
<p>I googled this Google login problem to no avail. Unbelievably unlucky I was&#8212;Looks like I was the only person having this problem??? (Pssst: or perhaps Google removed these from the search result?)</p>
<p>But anyway, it works fine now, and I&#8217;m a happy person again (hyperbolically speaking :D). Read more to see how I solved it.</p>
<p><span id="more-186"></span></p>
<p>The facts I gathered were:</p>
<ul>
<li>The problem was not browser-specific. It happened on both my Opera Mobile and Pocket/Mobile Internet Explorer</li>
<li>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&#8217;t).</li>
<li>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.</li>
<li><b>This is more of a hunch than a fact</b>: I think it had something to do with Google authentication page/mechanism.</li>
</ul>
<p>And yes, my hunch proved to be correct. These are what I did to solve this issue:</p>
<p>First, I <b>logged in to the desktop site on my mobile device</b>. Note that this is not the same as changing your mobile browser&#8217;s rendering/display layout to mobile, meaning that I had to go to <a href="http://www.google.com" target="_blank">www.google.com</a> on my mobile device (and I didn&#8217;t bother to change the browser&#8217;s rendering setting).</p>
<p>From there, I <b>simply proceeded to log into my Google account</b>. Scrolling, zooming, tapping the login button with my stylus, and finally it&#8217;s done. You won&#8217;t believe how slow and hard it was on my devices <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_razz.gif" alt=":P" class="wp-smiley" /> </p>
<p>And then, to verify it worked, I simply exited the browser and relaunched it to my iGoogle mobile site. <b>And yes it worked!</b> I even tried to restart my device, and yes it still worked. Hurrah!!!</p>
<p>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?</p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2011/09/google-mobile-sites-cant-remember-your-login-186/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Practice makes perfect: Basic algrebra spreadsheet</title>
		<link>https://behindthecodes.com/blog/2011/02/practice-makes-perfect-basic-algrebra-spreadsheet-164</link>
		<comments>https://behindthecodes.com/blog/2011/02/practice-makes-perfect-basic-algrebra-spreadsheet-164#comments</comments>
		<pubDate>Mon, 07 Feb 2011 04:30:51 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[Education]]></category>
		<category><![CDATA[How To]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=164</guid>
		<description><![CDATA[One adage that I keep telling myself is as stated in the title above: Practice makes perfect. Want to be good at computer programming? Practice! Want to be good in writing articles? Practice! Want to be good at web development? Taking picture? Problem solving? Practice, practice, practice! And with my son studying first-grade math now, [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>One adage that I keep telling myself is as stated in the title above: <b>Practice makes perfect</b>. Want to be good at computer programming? Practice! Want to be good in writing articles? Practice! Want to be good at web development? Taking picture? Problem solving? Practice, practice, practice!</p>
<p>And with my son studying first-grade math now, the same maxim holds true to him as well&#8212;&#8221;Practice makes perfect, son,&#8221; I keep telling him.</p>
<p>Don&#8217;t get me wrong; he is good a math. In fact, he is a <a href="http://www.cde.ca.gov/sp/gt/" target="_blank">GATE</a> 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 <b>DO</b> see the result of the drill.</p>
<p>So what tool did I use? Just a simple Excel sheet printout! With formulas, of course&#8212;this is a perfect &#8216;practice&#8217; opportunity for me too, don&#8217;t you think?</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5425592495/" title="Basic math worksheet by behindthecodes.com, on Flickr"><img src="http://farm6.static.flickr.com/5214/5425592495_230c721a6c.jpg" width="487" height="500" alt="Basic math worksheet" /></a></p>
<p><span id="more-164"></span></p>
<p>You can download the Excel file <a href="http://behindthecodes.com/demo/Basic_math_worksheet.xlsx">here</a>. Print it out (trust me&#8230; 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&#8217; needs.</p>
<h3>The formula</h3>
<p>First thing first: Given n as a positive integer, how can we get a list of positive n-digit numbers? Simple: <b>by using the power of 10</b>, the numbers will be from 10<sup>n-1</sup> to 10<sup>n</sup>-1. For example, a list of <span style="color: red">2</span>-digit numbers will be from 10<sup><span style="color: red">2</span>-1</sup> to 10<sup><span style="color: red">2</span></sup>-1, or from 10 to 99.</p>
<p>In Excel-speak, this is accomplished using <b><a href="http://office.microsoft.com/en-us/excel-help/raise-a-number-to-a-power-HP003056139.aspx" target="_blank">POWER</a></b> function, where the first parameter is the &#8216;base&#8217; number (to be powered), and the second parameter is the power<sup>*</sup>. So for our example above, we can use the formula POWER(10, <span style="color: red">2</span>-1) and POWER(10, <span style="color: red">2</span>)-1, respectively.</p>
<p><sup>*</sup> Please note that Excel also provide a <b>^</b> operator you can use intead of the <b>POWER</b> function, ie. a^b is the same as POWER(a,b). However, for the sake of functional clarity, I chose to use <b>POWER</b> function in this article. If you chose <b>^</b> operator, go ahead, it will produce the same result, and you&#8217;ve earned +1 Coding Achievement along the way! <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" />  </p>
<p>Next, having the list of numbers with n digits, how can we pick a random number out of it? <b><a href="http://office.microsoft.com/en-gb/excel-help/randbetween-HP005209230.aspx" target="_blank">RANDBETWEEN</a></b> 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?</p>
<p>Alright, so we get the first/initial number of our algebra problem. How to generate the second number?</p>
<p>Again, let&#8217;s tackle the easy part first. For addition problems, we can use the same <b>RANDBETWEEN</b> 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&#8217;s it.</p>
<p>How about subtraction problem? Again, use the <b>RANDBETWEEN</b> formula. But since I assume basic math students don&#8217;t get the concept of negative numbers yet, this time the random number&#8217;s upper bound must be as high as the first number. In other words, if the first number is <span style="color: red">X</span>, then the second number must be between 0 to <span style="color: red">X</span> (if we want to start from 0).</p>
<p>Wait&#8212;but how can we tell Excel to choose randomly between addition and subtraction? If you&#8217;ve come up this far, you should remember that one formula we keep using over and over: The Mighty <b>RANDBETWEEN</b>!!! 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.</p>
<p>So let&#8217;s wrap them all up. With the help of the <b><a href="http://office.microsoft.com/en-us/excel-help/if-HP005209118.aspx" target="_blank">IF</a></b> function, we can compose an expression like this:</p>
<pre><strong>=IF(RANDBETWEEN(0,1) = 0, "- " &#038; RANDBETWEEN(<span style="color: red">A</span>,<span style="color: red">B</span>), "+ " &#038; RANDBETWEEN(<span style="color: red">A</span>,<span style="color: red">C</span>))</strong></pre>
<p>Where:</p>
<ul>
<li><span style="color: red">A</span> is the lower bound of the problem number, ie. whether starting from 0 or from the first n-digit positive number,</li>
<li><span style="color: red">B</span> is the first number of the subtraction problem, so the calculation won&#8217;t involve negative results, and</li>
<li><span style="color: red">C</span> is the upper bound of the addition problem, ie. the last n-digit positive number.</li>
</ul>
<h3>The spreadsheet</h3>
<p>Again, you can download the Excel file <a href="http://behindthecodes.com/demo/Basic_math_worksheet.xlsx">here</a>. Study it well, grasshopper, as this is one way to practice your Excel-fu. Remember: <b>Practice Makes Perfect</b>!</p>
<p>Questions? Problems? Leave a comment and I’ll try my best to help.</p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2011/02/practice-makes-perfect-basic-algrebra-spreadsheet-164/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Facebook Grid Picture</title>
		<link>https://behindthecodes.com/blog/2011/01/facebook-grid-picture-2-121</link>
		<comments>https://behindthecodes.com/blog/2011/01/facebook-grid-picture-2-121#comments</comments>
		<pubDate>Tue, 18 Jan 2011 06:27:56 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[How To]]></category>
		<category><![CDATA[Web Programming]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=121</guid>
		<description><![CDATA[Psst.. wanna have fun with your Facebook Photo Album? Or you just want to jazz up your Facebook pic? Then you&#8217;ve come to the right place&#8212;I&#8217;ll show you how! If you haven&#8217;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 [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Psst.. wanna have fun with your Facebook Photo Album? Or you just want to jazz up your Facebook pic? Then you&#8217;ve come to the right place&#8212;I&#8217;ll show you how!</p>
<p>If you haven&#8217;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 <a title="Facebook Grid Picture" href="http://www.facebook.com/behindthecodes#!/album.php?aid=50670&amp;id=186489938029934" target="flickr">here</a>), you can see that it&#8217;s very easy to take advantage of this layout. The key is to know how to count. In pixels, that is!</p>
<p><a title="Facebook Grid Picture by behindthecodes.com, on Flickr" href="http://www.flickr.com/photos/behindthecodes/5344073542/" target="flickr"><img src="http://farm6.static.flickr.com/5046/5344073542_ddaef5d968.jpg" alt="Facebook Grid Picture" width="500" height="484" /></a></p>
<p><span id="more-121"></span></p>
<h3>Counting pixels</h3>
<p>If you&#8217;re the curious type, I&#8217;ll show you how I count the pixels. If you&#8217;re the what-the-heck-just-give-me-the-money-honey type, then you can skip to the next section. Seriously, I won&#8217;t get mad&#8212;go ahead! <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" /> </p>
<p>Alright, let&#8217;s get back to business.</p>
<p>My tool of trade in working with websites is <a href="http://getfirebug.com/" target="_blank">Firebug</a>, a must-have Firefox add-on for web developers. With Firebug, I can easily see the size (width and height) of Facebook&#8217;s picture thumbnails. Simply right click on it, click &#8216;Inspect Element&#8217;, mouseover on the picture link, and voila! It&#8217;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).</p>
<p><a title="Get Facebook picture's thumbnail size using Firebug by behindthecodes.com, on Flickr" href="http://www.flickr.com/photos/behindthecodes/5366514016/" target="flickr"><img src="http://farm6.static.flickr.com/5050/5366514016_5562247177.jpg" alt="Get Facebook picture's thumbnail size using Firebug" width="500" height="103" /></a></p>
<p>Now how about the gap between the thumbs? You can go with the Firebug route (that&#8217;s what I did), or you can use any screen ruler (my fave is <a href="http://stefan.huberdoc.at/comp/software/druler.html" target="_blank">the free dRuler here</a>). Of course the screen ruler is easier, and you&#8217;ll clearly see that the horizontal gap is 20px, and the vertical gap is 18px.</p>
<p><a title="Calculating Facebook picture thumbnails gap size using dRuler by behindthecodes.com, on Flickr" href="http://www.flickr.com/photos/behindthecodes/5367937782/" target="flickr"><img src="http://farm6.static.flickr.com/5284/5367937782_0bb460f3dc.jpg" alt="Calculating Facebook picture thumbnails gap size using dRuler" width="400" height="235" /></a></p>
<p>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&#8212;well, unlimited! (NOTE: again, as of this writing, looks like Facebook doesn&#8217;t limit the number of rows displayed in your picture album. Please correct me if I&#8217;m wrong :D).</p>
<p>With all these facts in our hand, we&#8217;re all set to create our own Facebook Grid Picture masterpiece!</p>
<h3>From pic to gridpic</h3>
<p>Let&#8217;s recap:</p>
<ul>
<li>Thumb size is 161px wide by 120px high.</li>
<li>Gap between thumbs is 20px horizontally and 18px vertically.</li>
<li>The maximum picture width we can slice and dice is (better be) 704px.</li>
</ul>
<p>From here on, you can use any picture editing of your choice. Photoshop is very good, and even Microsoft Paint will could <strong><em>hopefully</em></strong> 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 <a href="http://www.getpaint.net/" target="_blank">Paint.NET</a>. It&#8217;s no Photoshop of course, but it&#8217;s as powerful, yet free! And trust me: it&#8217;s no Microsoft Paint, in a big time good sense!</p>
<p>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&#8217;re not that perfectionist, it&#8217;s OK to miss a pixel or two&#8230; nobody will notice, honest <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" /> </p>
<p>It&#8217;s still too tedious of a job, you say? Don&#8217;t worry: behindthecodes.com to the rescue!</p>
<h3>behindthecode.com&#8217;s fbgridpic tool</h3>
<p>With a great pleasure, allow me to direct you to <a href="http://behindthecodes.com/demo/facebook-grid-picture" target="_blank">the tool I&#8217;ve built for this very purpose.</a> No fancy flashy features here&#8230; 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?</p>
<p>The way it works is just the same as doing it manually. With the help of PHP&#8217;s GD (image processing) functions, below is the code snippet:</p>
<pre class="brush: php; tab-size: 2">// 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 &lt; $picheight; $row++, $y += SLICEHEIGHT + GAPHEIGHT) {
	for ($col = 0, $x = 0; $x &lt; $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 &gt; SLICEWIDTH ? SLICEWIDTH : $w,
							$h &gt; SLICEHEIGHT ? SLICEHEIGHT : $h);
		$gridname = "tmp/" . $basename . "_" . ($row + 1) . "_" . ($col + 1) . ".jpg";
		imagejpeg($gridpic, $gridname);
		echo '&lt;img src="' . $gridname . '" /&gt;';
	}
	echo "&lt;br /&gt;";
}

// done
imagedestroy($pic);
imagedestroy($gridpic);
</pre>
<p>Using a &#8216;thumb picture placeholder&#8217; $gridpic, this code will copy areas of the input JPG picture based on the measurements we&#8217;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?</p>
<h3>Give me your inputs</h3>
<p>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 <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" /> </p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2011/01/facebook-grid-picture-2-121/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Use XAMPP to serve data-driven personal websites</title>
		<link>https://behindthecodes.com/blog/2010/09/use-xampp-to-serve-data-driven-personal-websites-45</link>
		<comments>https://behindthecodes.com/blog/2010/09/use-xampp-to-serve-data-driven-personal-websites-45#comments</comments>
		<pubDate>Tue, 28 Sep 2010 18:30:05 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Web Programming]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=45</guid>
		<description><![CDATA[Related to the previous post on serving websites using a Windows 7 computer , my friend was asking if it&#8217;s possible to host PHP-based data-driven websites (using MySQL as the data storage) on his Windows 7 computer. Well, why not? Let&#8217;s talk about this a little bit&#8230;. PHP on IIS on Windows 7 First things [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Related to the previous post on <a target="_blank" href="http://behindthecodes.com/blog/2010/09/use-iis-to-serve-websites-from-your-windows-7-21">serving websites using a Windows 7 computer</a> , my friend was asking if it&#8217;s possible to host PHP-based data-driven websites (using MySQL as the data storage) on his Windows 7 computer. Well, why not? Let&#8217;s talk about this a little bit&#8230;.</p>
<p><span id="more-45"></span></p>
<h3>PHP on IIS on Windows 7</h3>
<p>First things first: We know that it&#8217;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&#8212;or programs&#8212;that run on the IIS/server side. And being Microsoft&#8217;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&#8217;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 <strike>heaven</strike> Microsoft&#8217;s labs.</p>
<p>Now PHP is a different story. To start with: PHP is not one of Microsoft&#8217;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&#8217;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 <a target="_blank" href="http://www.google.com/cse?cx=partner-pub-4092115932299702%3Arwo23kyscxp&#038;ie=ISO-8859-1&#038;q=windows+7+iis+php&#038;sa=Search&#038;siteurl=behindthecodes.com%2F">Google on how to do this</a>, and while you&#8217;re browsing you might encounter some horror stories on it.</p>
<p>Hold on. Please don&#8217;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 target="_blank" href="http://learn.iis.net/page.aspx/724/install-and-configure-php/">a step-by-step walkthrough</a> on the installation process. Sure you can follow this&#8212;which BTW you still need to do quite a bit of manual tinkering&#8212;but in my opinion: why not going down on an easier path?</p>
<h3>Enter XAMPP</h3>
<p><a target="_blank" href="http://www.apachefriends.org/en/xampp.html">XAMPP</a> (it&#8217;s Windows-based flavor <a target="_blank" href="http://www.apachefriends.org/en/xampp-windows.html">here</a>) is an all-in-one one-package-containing-all solution to serve your PHP counterpart. It&#8217;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.</p>
<p>And how much easier is it to install this baby? Much&#8212;M U C H&#8212;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.</p>
<p>Without further ado, allow me to demonstrate.</p>
<h3>XAMPP installation</h3>
<p>I fired up my browser and typed the address:</p>
<pre><strong>http://www.apachefriends.org/en/xampp-windows.html</strong></pre>
<p>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.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033842326/" title="XAMPP - file download by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4131/5033842326_8f12aeec47.jpg" width="500" height="271" alt="XAMPP - file download" /></a></p>
<p>The first step was to specify the destination folder. I kept the default folder <span class="monofont">C:\</span>, because it will create a folder named <span class="monofont">xampp</span> inside it.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5034020932/" title="XAMPP - specifying installation folder by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4133/5034020932_0ea31ac638.jpg" width="500" height="370" alt="XAMPP - specifying installation folder" /></a></p>
<p>I hit the <strong>&#8216;Install&#8217;</strong> button and watched the installer worked its magic as I sit back and relax.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033223409/" title="XAMPP - installation progress by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4126/5033223409_5974b7a064.jpg" width="500" height="369" alt="XAMPP - installation progress" /></a></p>
<p>Toward the end, it asked several questions in a Command Prompt window, which I happily follow through. </p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033223461/" title="XAMPP - post installation by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4148/5033223461_355129feea.jpg" width="275" height="500" alt="XAMPP - post installation" /></a></p>
<p>On the last step (which is kind of a &#8216;menu&#8217;), I chose <strong>1</strong> to start the XAMPP Control Panel. FYI you can actually <strong>x</strong> it out (exit) and launch the Control Panel via your Windows&#8217; Start Menu.</p>
<p>Anyway, on the Control Panel, I just hit the <strong>Start</strong> 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:</p>
<pre><strong>http://localhost</strong></pre>
<p>The XAMPP splash page! That says I&#8217;m all set!</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033223545/" title="XAMPP - runing Apache and MySQL by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4088/5033223545_fd692e15ee.jpg" width="500" height="323" alt="XAMPP - runing Apache and MySQL" /></a></p>
<p>So let&#8217;s recap: the installation is just a matter of <strong>running the installer</strong> &rarr; hit <strong>Install</strong> &rarr; <strong>five Enters</strong> &rarr; <strong>1</strong> to start the Control Panel &rarr; and finally <strong>Start</strong> the Apache (as well as the related services you need, eg. MySQL). And the best part is that you don&#8217;t need to remember these: Just follow the directions and you&#8217;ll be all set! Now beat that with IIS!</p>
<h3>Ummm.. I thought we&#8217;re talking about PHP?</h3>
<p>Yes, don&#8217;t worry <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_biggrin.gif" alt=":D" class="wp-smiley" />  I don&#8217;t forget about it. We&#8217;re getting there. As a matter of fact, with Apache web server alive and kicking, we&#8217;re there already.</p>
<p>I&#8217;m sure you understand that the idea of a web server is just &#8216;serving&#8217; web pages. For XAMPP, these web pages are served from <span class="monofont"><strong>xampp\htdocs</strong></span> folder in your installation folder&#8212;in my case, it&#8217;s in <span class="monofont"><strong>C:\xampp\htdocs</strong></span>. You just need to upload your PHP files there (or perhaps into a new subfolder in there).</p>
<p>For example, I put a helloworld.php in there:</p>
<pre class="brush:php">
&lt;?php 
echo "Hello World";
?>
</pre>
<p>&#8230; tested it:</p>
<pre><strong>http://www.apachefriends.org/en/xampp-windows.html</strong></pre>
<p>&#8230; and well, hello there!</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033842496/" title="XAMPP - Hello World! by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4151/5033842496_2329b1881e.jpg" width="500" height="395" alt="XAMPP - Hello World!" /></a></p>
<p>So in conclusion: PHP works, just like that! And if you want to play more, your localhost&#8212;the XAMPP you just installed&#8212;has some demo programs (including one Perl program) you can try and study on.</p>
<h3>XAMPP and portability</h3>
<p>Before we proceed, let me clarify one thing: the idea of making XAMPP portable is more about <strong>carrying your &#8216;websites&#8217; with you</strong>, 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&#8217;t it virtually accessible anywhere already (considering the address resolution and firewall/access rights are in place), thus making it &#8216;ever present&#8217; with you? In other words, you&#8217;ll want to have a portable XAMPP only if:</p>
<ul>
<li>You&#8217;re building your website and your development can take place anywhere.</li>
<li>You want an easy way to showcase your website, eg. to your client, investors, teammates, etc.</li>
<li>You prefer having your data together with your website/web app.</li>
<li>You can&#8217;t rely on the internet connectivity (or the government, while we&#8217;re at it :P).</li>
</ul>
<p>So anyway, back to our walkthrough, making XAMPP portable is just a three-step work:</p>
<p>Step one: <strong>copy the XAMPP folder.</strong> Before you copy, you might need to stop the services first, because they might &#8216;lock&#8217; 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 &#8216;target&#8217;&#8212;for me, it was plugging the USB drive into another PC. I didn&#8217;t bother to copy it into the target PC, since I want XAMPP to run off the USB drive directly. </p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033842542/" title="Portable XAMPP - files copied to pen drive by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4086/5033842542_34aa958e93.jpg" width="500" height="420" alt="Portable XAMPP - files copied to pen drive" /></a></p>
<p>The second step is to relocate the XAMPP directory. This can be achieved by <strong>running the setup batch file, ie. <span class="monofont">setup_xampp.bat</span></strong>. The prompts are as easily understandable as the installation. And since I&#8217;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.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033842586/" title="Portable XAMPP - relocation by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4126/5033842586_a26c92ed7b.jpg" width="366" height="500" alt="Portable XAMPP - relocation" /></a></p>
<p>Lastly, run the control panel (via the setup&#8217;s text menu, or run <span class="monofont">xampp-control.exe</span> to <strong>start Apache and MySQL/other services</strong>. After they&#8217;re running, test it (you&#8217;ll still use <span class="monofont">localhost</span>) and off you go!</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/5033842616/" title="Portable XAMPP -- finish by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4091/5033842616_67f9a67137.jpg" width="500" height="409" alt="Portable XAMPP -- finish" /></a></p>
<h3>Afterwords</h3>
<p>Now please pay attention here: <strong>XAMPP&#8212;and IIS on Windows 7&#8212;are meant for personal/development use only</strong>! Even though you can, but you won&#8217;t want to use it for any live/production-level websites. Don&#8217;t host your eCommerce sites with it! Don&#8217;t use them for your blog sites! Don&#8217;t even try! To make this point, allow me to cite this paragraph from their website:</p>
<div style="font-weight: bold; font-style: italic">&#8220;The default configuration is not good from a securtiy point of view and it&#8217;s not secure enough for a production environment &#8211; please don&#8217;t use XAMPP in such environment.&#8221;</div>
<p>There! It&#8217;s up to you now to heed my words or not&#8212;but as for me, I will never use XAMPP for my clients&#8217; live websites :D.</p>
<p>Questions? Problems? Leave a comment and I&#8217;ll try my best to help.</p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2010/09/use-xampp-to-serve-data-driven-personal-websites-45/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Use IIS to serve websites from your Windows 7</title>
		<link>https://behindthecodes.com/blog/2010/09/use-iis-to-serve-websites-from-your-windows-7-21</link>
		<comments>https://behindthecodes.com/blog/2010/09/use-iis-to-serve-websites-from-your-windows-7-21#comments</comments>
		<pubDate>Mon, 13 Sep 2010 18:49:31 +0000</pubDate>
		<dc:creator><![CDATA[behindthecodes.com]]></dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Web Programming]]></category>

		<guid isPermaLink="false">http://behindthecodes.com/?p=21</guid>
		<description><![CDATA[Thursday, 11PM. I was cleaning up my desk, getting ready for my lunch break, when the Marketing Manager stepped into my office. &#8220;Ohai! All ready for your gaming expo?&#8221; I asked her casually. &#8220;Yep, pretty much. We&#8217;re also set for a survey-slash-raffle program, where our booth visitors can fill in their contact info and play [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>Thursday, 11PM. I was cleaning up my desk, getting ready for my lunch break, when the Marketing Manager stepped into my office.</p>
<p>&#8220;Ohai! All ready for your gaming expo?&#8221; I asked her casually.</p>
<p>&#8220;Yep, pretty much. We&#8217;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.&#8221;</p>
<p>&#8220;That sounds gr&#8212;&#8221; I tried to reply, but she kept on going.</p>
<p>&#8220;It&#8217;s a flash webpage, and we&#8217;re using Microsoft Access as the database storage. So we&#8217;ll run everything off the browser on our two laptops. They both are running on Windows 7.&#8221;</p>
<p>Suddenly I had a funny feeling down my brain. &#8220;Sooo&#8230; you want me to copy the program files to our website?&#8221; I asked, trying to guess where this talk led to. &#8220;No problemo!&#8221;</p>
<p>&#8220;Actually, THAT&#8217;S the problem&#8230;&#8221; she told me, sighing. &#8220;We won&#8217;t have any internet access in the expo. And we&#8217;re leaving by 3&#8230;&#8221;</p>
<p>Aha! So my feeling was right. Being a helpful coworker, I gave her a promise worthy of the next Presidential candidate: &#8220;Give me your laptops, and in 30 minutes I&#8217;ll make it work locally.&#8221;</p>
<p>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.</p>
<p>So how did I tackle this? With the help of Microsoft&#8217;s IIS, it&#8217;s super easy! Follow these steps, and you can do it too!</p>
<p><span id="more-21"></span></p>
<h3>Introduction to IIS</h3>
<p>Before I go on with the steps, allow me to briefly explain about IIS (Microsoft&#8217;s Internet Information Services). To cut it short: IIS is Microsoft&#8217;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 &#8216;Personal Web Server&#8217; component, available on all Windows 7 editions <a href="http://technet.microsoft.com/en-us/library/cc753473.aspx" target="_blank">except Home Basic and Starter</a>. For more information on IIS, please visit <a href="http://www.iis.net" target="_blank">The Official Microsoft IIS Site</a> or <a href="http://en.wikipedia.org/wiki/Internet_Information_Services" target="_blank">this Wikipedia article</a>.</p>
<p>Now, off we go!</p>
<h3>First, check the OS</h3>
<p>I knew it&#8217;s Windows 7 (she told me, remember?), but I needed to make sure the edition. If it&#8217;s Home Basic or Starter (which I doubted, considering they&#8217;re high-end laptops), then I had to think of Plan B. Anyway, <strong>Win+Pause/Break</strong> I went (FYI in case you don&#8217;t know, that&#8217;s the shortcut key to bring up the System info, a.k.a. System Properties), and&#8212;yeah!&#8212;they were Home Premiums.</p>
<p><a target="flickr" title="System Info by behindthecodes.com, on Flickr" href="http://www.flickr.com/photos/behindthecodes/4977488733/"><img src="http://farm5.static.flickr.com/4125/4977488733_ec4d22f5f5.jpg" alt="System Info" width="500" height="278" /></a></p>
<p>Yay! Knowing I can stick to my plan, I proceeded to the next step&#8230;</p>
<h3>Installing IIS</h3>
<p>IIS is not installed by default, so I had to go to the the <strong>Control Panel</strong> &rarr; <strong>Programs</strong> &rarr; <strong>Turn Windows features on or off</strong> (under <strong>Programs and Features</strong> section), and checked the <strong>Internet Information Services</strong> checkbox.</p>
<p><a target="flickr" title="Installing IIS by behindthecodes.com, on Flickr" href="http://www.flickr.com/photos/behindthecodes/4977509945/"><img src="http://farm5.static.flickr.com/4104/4977509945_5a574accd7.jpg" alt="Installing IIS" width="500" height="383" /></a></p>
<p>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 &#8216;static&#8217; files), then you don&#8217;t need to enable this.</p>
<p>An OK later, it started the installation, and finished everything in several seconds. Or was it?</p>
<h3>Testing the installation</h3>
<p>There&#8217;s only one way to be sure: I fired up the browser (I used the stock Internet Explorer 8) and typed the local address:</p>
<pre><strong>http://localhost/</strong></pre>
<p>(localhost is an alias for your own computer, which translates to 127.0.0.1)</p>
<p>Taa daa! I could see the IIS welcome page!</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4977336951/" title="Testing IIS installation by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4148/4977336951_c3267afaec.jpg" width="500" height="372" alt="Testing IIS installation" /></a></p>
<p>From the IIS Manager (<strong>Sites</strong> &rarr; <strong>Default Web Site</strong> &rarr; <strong>Basic settings</strong>) I grabbed the website location, which was in:</p>
<pre><strong>C:\inetpub\wwwroot\</strong></pre>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4987429808/" title="Default Web site - Basic settings by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4127/4987429808_1dea798398.jpg" width="397" height="219" alt="Default Web site - Basic settings" /></a></p>
<p>(in other words, <span class="monofont">http://localhost/</span> translates to <span class="monofont">C:\inetpub\wwwroot\</span>)</p>
<p>Then I simply proceeded to copy the game program files into a subfolder called TigerGame(20100731), so the URL for this game&#8217;s root will be:</p>
<pre><strong>http://localhost/TigerGame(20100731)/</strong></pre>
<p>That&#8217;s all, folks! Except that it won&#8217;t work on the database part. Oh well <img src="https://behindthecodes.com/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" /> </p>
<h3>MDB access additional setup #1: Enabling 32-bit application mode</h3>
<p>In case you didn&#8217;t notice, the laptops&#8217; operating systems were 64-bit, which is great. However, there&#8217;s currently no way to make the ASP program work with Microsoft Access&#8217; 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&#8217;t work).</p>
<p>So in order to make it work, the easiest and proven solution was to &#8216;downgrade&#8217; IIS application pool to 32-bit mode:  <strong>Application Pools</strong> &rarr; <strong>DefaultAppPool</strong> &rarr; <strong>Advanced settings</strong> &rarr; set <strong>Enable 32-bit Applications</strong> to <strong>True</strong>.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4978167842/" title="Enabling 32-bit Applications by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4148/4978167842_700b033516.jpg" width="500" height="337" alt="Enabling 32-bit Applications" /></a></p>
<p>(note that the application pool used by the website was DefaultAppPool, where you can get from the website setting dialog window).</p>
<p>And now it worked! But&#8212;ohnoes!&#8212;it wouldn&#8217;t save anything to the database. Solution: check the permission!!!</p>
<h3>MDB access additional setup #2: Make the MDB writable</h3>
<p>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 &#8216;anonymous user&#8217; account a write permission to the database file.</p>
<p>So first thing first: I need to check what&#8217;s the &#8216;anonymous user&#8217; account: <strong>Default Web site</strong> &rarr; <strong>Authentication</strong> &rarr; <strong>Anonymous Authentication</strong> &rarr; <strong>Edit</strong>.</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4977555353/" title="Checking the anonymous account name by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4083/4977555353_e6fab3f3d2.jpg" width="500" height="259" alt="Checking the anonymous account name" /></a></p>
<p>There I could see the account was named &#8216;IUSR&#8217;. Then I proceeded to give this user a write permission to the database file, which I found to be named db_store.mdb: <strong>Right click</strong> on the file &rarr; <strong>Properties</strong> &rarr; <strong>Security</strong> &rarr; <strong>Add</strong> &rarr; typed &#8216;IUSR&#8217; and OK-ed it &rarr; and set the permission as below:</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4978170552/" title="Setting file permission for the anonymous account by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4107/4978170552_ba09114423.jpg" width="371" height="500" alt="Setting file permission for the anonymous account" /></a></p>
<p>That&#8217;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&#8230; SUCCESS!!!</p>
<p><a target="flickr" href="http://www.flickr.com/photos/behindthecodes/4977946512/" title="Success! by behindthecodes.com, on Flickr"><img src="http://farm5.static.flickr.com/4149/4977946512_03422a3c17.jpg" width="500" height="306" alt="Success!" /></a></p>
<h3>TL;DR</h3>
<p>In this post, I demonstrated that your Windows 7 can easily be &#8216;turned&#8217; 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&#8217;m sure you can accomplish this in less than 30 minutes! Awesome, huh?</p>
<p>Questions? Problems? Leave a comment and I&#8217;ll try my best to help.</p>
]]></content:encoded>
			<wfw:commentRss>https://behindthecodes.com/blog/2010/09/use-iis-to-serve-websites-from-your-windows-7-21/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
