JUNCTION X: XAMPP

Setting up XAMPP: General Notes</h2>
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Setting up <a href="http://www.apachefriends.org/" style="color: #004477; text-decoration: none;">XAMPP</a> is not terribly difficult or time-consuming. It lets you test your website at a special URL, <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/</code>, that makes it possible to use root-relative paths, run PHP scripts, and do other kinds of things your live website will do.</div>
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Windows instructions immediately follow; Mac users can <a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-osx" style="color: #004477; text-decoration: none;">jump right to the OS X instructions.</a></div>
<a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-osx" style="background-color: #eeeeee; color: #004477; font-family: Georgia, 'Times New Roman', Times, Roman, serif; text-decoration: none;"></a><br />
<h3 id="xampp-windows" style="background-attachment: initial; background-clip: initial; background-color: #222222; background-image: initial; background-origin: initial; color: white; font-family: 'Lucida Grande', Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-osx" style="background-color: #eeeeee; color: #004477; font-family: Georgia, 'Times New Roman', Times, Roman, serif; text-decoration: none;">
XAMPP Setup: Windows</a></h3>
<a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-osx" style="background-color: #eeeeee; color: #004477; font-family: Georgia, 'Times New Roman', Times, Roman, serif; text-decoration: none;">
</a><br />
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-osx" style="color: #004477; text-decoration: none;">These steps have been tested with XAMPP version 1.7.4 on a USB drive on Windows XP, Windows Vista, and Windows 7. Please </a><a href="http://sustainablewebdesign.com/book/contact/" style="color: #004477; text-decoration: none;">contact the author</a> if you run into any problems so that these instructions can be improved, if necessary.</div>
<span style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif;"></span><br />
<ol style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Download either the ZIP or the 7zip archive of XAMPP for Windows <a href="http://www.apachefriends.org/en/xampp-windows.html#641" style="color: #004477; text-decoration: none;">from the XAMPP site</a>; <strong style="font-style: inherit;">do not download the installer</strong>. The 7zip archive is smaller, so it downloads faster; but it may take longer to unzip, up to 10 or 15 minutes, depending on the speed of your computer.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Unzip the ZIP or 7zip archive; if you don’t have an unzipping utility, try <a href="http://www.7-zip.org/" style="color: #004477; text-decoration: none;">7-Zip</a>.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Copy the unzipped <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> folder to the root of your USB drive (in other words, don’t place it inside of another folder). If your unzipping program has created a folder that has <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> inside of it (e.g., some unzipping programs will create a folder like <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp-win32-1.7.4-VC6/</code>), move just the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code>folder to the root of your drive. Depending on the speed of your USB drive, that, too, make take a little while, too (15 or 20 minutes).<div class="screenshot" style="background-attachment: initial; background-clip: initial; background-color: #004e98; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<img alt="Screenshot showing xampp folder in the root of a USB drive" height="300" src="http://sustainablewebdesign.com/book/media/img/xampp-folder.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block;" width="400" /><br />
<div style="color: white; font-size: small; font-style: italic; line-height: 1.5; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 400px;">
Windows XP screenshot of the <code style="color: #00dd00; font-family: 'Courier New', Courier, monospace; font-style: normal; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> folder in its proper place: in the root of a USB drive (in this case, the USB drive’s letter is F:).</div>
</div>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Load XAMPP by double-clicking on the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> folder and finding and then double-clicking the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp-control.exe</code> file. (If you don’t see the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.exe</code> extension, the file will still work—but you should Google for <em>show file extensions</em> and the name of your operating system (Windows 7, Windows Vista, Windows XP; see pages 45-47 in the book).</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Start the Apache web server by clicking the Start button on the XAMPP Control Panel. Windows Vista and Windows 7 users may get a warning about Windows Firewall; click Cancel on any firewall warning windows that pop up.<div class="screenshot" style="background-attachment: initial; background-clip: initial; background-color: #004e98; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<img alt="Screenshot showing the XAMPP control panel and Apache running" height="352" src="http://sustainablewebdesign.com/book/media/img/xampp-control-panel.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block;" width="446" /><br />
<div style="color: white; font-size: small; font-style: italic; line-height: 1.5; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 400px;">
Windows XP screenshot of the XAMPP Control Panel with the Apache web server running.</div>
</div>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Test that XAMPP is running properly by going to the URL <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/</code> in your browser (type the whole thing, including the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://</code> part; notice there’s no www. or .com). You should see the XAMPP welcome screen if all is working correctly.<div class="screenshot" style="background-attachment: initial; background-clip: initial; background-color: #004e98; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<img alt="Screenshot showing the XAMPP splash screen" height="300" src="http://sustainablewebdesign.com/book/media/img/xampp-splash.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block;" width="400" /><br />
<div style="color: white; font-size: small; font-style: italic; line-height: 1.5; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 400px;">
Windows XP screenshot of the XAMPP splash screen in Firefox.</div>
</div>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Some users may get an error from XAMPP that states another service is using Port 80 (Skype, for example, is known to use that port.) <strong style="font-style: inherit;">If everything is working for you, skip to the next step</strong>. If you get an error like that, use your text editor (like <a href="http://notepad-plus-plus.org/" style="color: #004477; text-decoration: none;">Notepad++</a>) to open up the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file. Go to the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> folder, then into the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">apache</code> folder, and finally into the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">conf</code> folder, where you will find the the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file. Locate the line in the file that reads <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 80</code> using the Find function in your text editor. Around line 37, you will find a block of text that looks like:<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 0.0.0.0:80
#Listen [::]:80
Listen 80

</pre>
Comment out the line that reads <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 80</code> by putting a hash (<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#</code>) in front of it; below that line, write your own line that reads <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 8000</code>. This part of your file will now look like:<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 0.0.0.0:80
#Listen [::]:80
#Listen 80
<strong style="background-color: yellow; font-style: inherit; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">Listen 8000</strong>

</pre>
Start or stop and start Apache from the XAMPP Control Panel. Point your browser to<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost:8000/</code>, and you should see the XAMPP welcome screen. Remember to use<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost:8000/</code> instead of <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/</code> when you’re developing your site.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">To develop your own site, you’ll want to rename the existing <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder inside of the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">xampp</code> folder to <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs-original</code>. (You can rename it back if you need, for example, to configure the MySQL database for use with WordPress development.) Then create your own new <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder for your site, or download, unzip, and copy over the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder from the <a href="http://sustainablewebdesign.com/book/rpk/" style="color: #004477; text-decoration: none;">Rapid Prototyping Kit</a> and get to work on your site. (You might want to stop and restart Apache in the XAMPP Control Panel before you start working.)</li>
</ol>
<h3 id="xampp-osx" style="background-attachment: initial; background-clip: initial; background-color: #222222; background-image: initial; background-origin: initial; color: white; font-family: 'Lucida Grande', Tahoma, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">

XAMPP Setup: Mac OS X</h3>
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Unfortunately, the OS X version of XAMPP will not run on a USB drive; you must have administrative rights on any Mac that you wish to install and run XAMPP on. These instructions have been tested on OS X Leopard and OS X Snow Leopard using XAMPP version 1.7.3. Please <a href="http://sustainablewebdesign.com/book/contact/" style="color: #004477; text-decoration: none;">contact the author</a> if you run into any problems so that these instructions can be improved, if necessary.</div>
<ol style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Download XAMPP for Mac OS X (Universal Binary) <a href="http://www.apachefriends.org/en/xampp-macosx.html#849" style="color: #004477; text-decoration: none;">from the XAMPP site</a>. Double-click the installer, and drag the XAMPP folder to your Applications folder. (You may have to enter your adminstrative username and/or password).</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Find the XAMPP Control application, which will be in an <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">XAMPP</code> folder inside of your <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Applications</code>folder. Double-click the XAMPP Control application to launch.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">A little Control window will pop up; click the Start button next to Apache. You will be prompted to enter your administrative username and/or password.<div class="screenshot" style="background-attachment: initial; background-clip: initial; background-color: #004e98; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<img alt="Screenshot Mac OS X XAMPP Control window" height="138" src="http://sustainablewebdesign.com/book/media/img/xampp-control-mac.png" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block;" width="205" /><br />
<div style="color: white; font-size: small; font-style: italic; line-height: 1.5; margin-bottom: 1em; margin-left: 0em; margin-right: 0em; margin-top: 1em; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 400px;">
Mac OS X screenshot of the XAMPP Control window, with Apache running.</div>
</div>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Open your browser to <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/</code>; you should see the XAMPP splash page. If you are getting an error about another service using Port 80, see <a href="http://sustainablewebdesign.com/book/resources/xampp/#xampp-mac-error" style="color: #004477; text-decoration: none;">the end of this document</a>.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Now things get a little complex. The <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Applications</code> folder on a Mac is a restricted area of sorts, so it’s important to configure XAMPP to read from an <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder than you can write to from your user account easily.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Go to your home folder in a Finder window; Look for the little house icon with your username next to it, and click on it.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">In the Finder window, create a new <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder (File > New Folder from the Finder menu). Or, download and unzip the <a href="http://sustainablewebdesign.com/book/rpk/" style="color: #004477; text-decoration: none;">Rapid Prototyping Kit</a> (RPK) and copy its <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder to your home folder.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">In your favorite text editor (like <a href="http://www.barebones.com/products/textwrangler/" style="color: #004477; text-decoration: none;">TextWrangler</a>), create a new text file and put a little line of text in it, like:<pre style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">Hello there! This is just to test XAMPP.</pre>
Save the file as <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">hello.txt</code>, inside of the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">htdocs</code> folder you created or moved over from the RPK. The <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">hello.txt</code> will be for testing your new XAMPP configuration.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Now use your text editor to open the XAMPP <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file. This contains the Apache Web server configuration that XAMPP uses. Go to the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Applications</code> folder, then <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">XAMPP</code>, then <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">etc</code>; you'll see<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> listed there. Open it.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Once you’ve opened the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file, you should immediately make a copy of it, just in case you make a mistake. Choose File > Save As... in your editor, and save the file as <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf.original</code>. You will probably be prompted for your administrative username and password.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Then, choose File > Save As... <em>again</em> and save as <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code>, so that you’re back to editing the<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> that XAMPP reads (and not the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf.original</code> file that you can use in an emergency).</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Now to edit the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file. Use the Find function in TextWrangler (Search > Find...) and search for the text <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">DocumentRoot</code> (one word, no space). TextWrangler should take you to around line 174 of the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file, where you will see:<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"

#</pre>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Comment out the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">DocumentRoot</code> line that’s there by putting a hash (<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#</code>) in front of it. Then, on the line below the one you comment out, write a new DocumentRoot line, replacing <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">yourusername</code> as in the example below with your real username on your Mac. The DocumentRoot part of your file should now look like this:<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"># DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
# DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
DocumentRoot "/Users/<strong style="background-color: yellow; font-style: inherit; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">yourusername</strong>/htdocs"

</pre>
</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Save the file as <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code>; you might have to enter your administrative username and password again.</li>
<li style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0.5em; margin-left: 1.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Now the moment of truth: if you left XAMPP running, stop and then start it again from the XAMPP Control window. Point your browser to <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/hello.txt</code>, the text file you created; you should see your simple “Hello there! This is just to test XAMPP.” message. If you do, go ahead and delete the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">hello.txt</code> file. You are now ready to start building your site, and testing it on a local web server.</li>
</ol>
<div id="xampp-mac-error" style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Some users may get an error from XAMPP that states another service is using Port 80 (Skype, for example, is known to use that port.) If you get an error like that, open up the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">httpd.conf</code> file, and search for <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 80</code> using the find function. Around line 30, you will find a block of text that looks like:</div>
<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 80

</pre>
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Comment out the line that reads <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 80</code> by putting a hash (<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#</code>) in front of it; below that line, write your own line that reads <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Listen 8000</code>. This part of your file will now look like:</div>
<pre class="term" style="background-color: #f6f6f6; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(224, 224, 224); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(224, 224, 224); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(224, 224, 224); border-top-style: solid; border-top-width: 1px; line-height: 1.5; margin-bottom: 1.5em; margin-top: 0.5em; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
#Listen 80
<strong style="background-color: yellow; font-style: inherit; padding-bottom: 2px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">Listen 8000</strong>

</pre>
<div style="background-color: #eeeeee; font-family: Georgia, 'Times New Roman', Times, Roman, serif; line-height: 1.5; margin-bottom: 1em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
Start or stop and start XAMPP from its little Control window. Point your browser to<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost:8000/hello.txt</code>, and you should see your see your simple “Hello there! This is just to test XAMPP.” message. If you do, go ahead and delete the <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">hello.txt</code> file. Remember to use<code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost:8000/</code> instead of <code style="color: #009900; font-family: 'Courier New', Courier, monospace; font-style: inherit; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">http://localhost/</code> when you’re developing your site.</div>

วิธีตั้งค่า XAMPP สำหรับนำไปใช้เป็น webserver

Setting up XAMPP: General Notes Setting up XAMPP is not terribly difficult or time-consuming. It lets you test your website at a spec...

อ่านเพิ่มเติม »