Set up a PHP development environment with XAMPP

In this article, we will explain how to set up a PHP development environment using XAMPP, taking Windows as an example. XAMPP is a package that includes Apache, MariaDB (formerly MySQL), PHP, Perl, etc., allowing you to easily start development in a local environment. It is beginner-friendly and ideal for learning and testing web application development.

Applications Included in XAMPP

XAMPP includes the following main applications:

Installing XAMPP

XAMPP can be downloaded from the official site (Apache Friends). There are Windows, macOS, and Linux versions available. In this article, we will mainly explain the installation procedure for Windows.

Differences Between the Installer and Download Versions

• Installer Version
  This is a normal executable (.exe) file. Simply double-clicking and following the wizard will automatically place the necessary folders and create shortcuts.
• Download Version (Zip/7z)
  Download a ZIP/7z archive and manually extract it to place the folder.
  If you are using a company PC, etc., and do not have administrator privileges, the download version is recommended in this article because it allows you to install it on the PC without requiring those privileges.

Installing the Download Version

In this article, we will deliberately install the download version, which has a few more steps. Understanding the installation process will make troubleshooting easier later on.

Download from the XAMPP Official Site

Download the Windows ZIP (or 7z) archive from Apache Friends.

1. Click “More Downloads”

2. Select “XAMPP Windows”

3. Choose the version of XAMPP to install

On the next screen, choose the version of XAMPP you want to install. XAMPP’s version is tied to the PHP version, so select any version you like.
If you don’t have a specific version in mind, we recommend the latest version with a high number of downloads.

4. Click the portable version of XAMPP

Example: “xampp-portable-windows-x64-8.2.12-0-VS16.7z”
※ Be careful not to mix it up with the installer version.

5. When the next screen appears, the download starts automatically

In the above example, the compressed file “xampp-portable-windows-x64-8.2.12-0-VS16.7z” will be downloaded.

Extract the Archive (Zip)

Right-click the downloaded file and choose “Extract All” or use 7-Zip to decompress it.
Be sure to extract it directly to the C drive (e.g., C:\xampp).

Why place it in “C:\xampp”?

The import version of XAMPP is provided as a “portable version” that can be used simply by extracting it, without an installer. This version is configured in advance for a specific path, usually “C:\xampp”, for the following reasons:

• Path references in configuration files are fixed
  Many configuration files such as Apache’s httpd.conf, MySQL’s my.ini, and PHP’s php.ini contain absolute paths. For example, Apache’s ServerRoot and DocumentRoot settings assume they are inside “C:\xampp”, so placing it in a different directory would require manual edits, increasing the risk of mistakes or malfunctions.
• Designed to use relative paths
  The import version’s internal scripts and batch files are all designed to run based on “C:\xampp”. If you move it elsewhere, internal references may not resolve correctly, causing potential issues with starting services like Apache or MySQL.

In summary, because the import version of XAMPP has initial settings and internal scripts assuming “C:\xampp”, placing it there as-is prevents configuration errors and ensures stable operation.

Check Folder Placement

Check that the C:\xampp folder contains folders like apache, php, and mysql.

Check Initial Configuration Files (If Needed)

If you are a beginner, the default settings will suffice, but you need to edit configuration files if you want to change port numbers. Although it’s fine to proceed without changes at first, using port numbers for your development environment makes it easier to manage when creating multiple sites, which we will introduce later.

How to Use XAMPP

To use XAMPP, you need to start and stop services such as Apache and MariaDB. In the download version, you manually launch the control panel (xampp-control.exe).

How to Start

1. Launch the XAMPP Control Panel

Double-click xampp-control.exe located in the C:\xampp folder to display the XAMPP Control Panel.

2. Click “Start” for Apache and MySQL (MariaDB)

If you want to use PHP and a database, you need to start Apache and MySQL in XAMPP. Clicking the “Start” button on the control panel will display “Running” and show a port number if successful.
First, start “Apache” and then start “MySQL.” In some XAMPP environments, an error may occur if Apache is not started first. Basically, it’s “(1) Apache → (2) MySQL” to be on the safe side.

How to Stop

1. Click “Stop” in the XAMPP Control Panel

• Stop Apache and MySQL one by one by clicking the “Stop” button.
• Recommended stop order: ①Stop MySQL → ②Stop Apache
  ※ If you stop Apache first, there is a risk of damaging the database in MySQL.

2. The reason for stopping MySQL first

• If Apache is still running, MySQL may still be receiving requests. Stopping MySQL first reduces the risk of incomplete requests when Apache is stopped.
• Stopping Apache first does not instantly corrupt the database, but following the recommended order prevents any potential inconsistencies.

Close the Control Panel

After confirming that everything has stopped, select “Quit” in the control panel.
Simply clicking the “×” in the top-right corner may leave Apache or MySQL running in the background. If you open the Windows Task Manager, you may see “mysql.exe” or “httpd.exe” still active. Always click “Stop” to stop them, then press “Quit” to completely exit XAMPP.

Check in Your Browser

Once you have started Apache in XAMPP, let’s actually display a PHP file in your browser. Performing this basic operation check helps ensure your environment is set up correctly.

How to Place Your Web Files

Check the Document Root (htdocs Folder)

In XAMPP, C:\xampp\htdocs is set as the public folder (document root) for the web. Place your HTML and PHP files here so they can be accessed from your browser.

Create a Test PHP File

Create a file such as “test.php” directly in the htdocs folder with content like the following:

<?php phpinfo(); ?>

Access It via Your Browser

Enter http://localhost/test.php in your browser’s address bar and press Enter to access a page showing PHP information. If this page appears, the environment setup is complete.

Assigning “localhost:PortNumber” to Configure Separate URLs per Site

If you are developing multiple PHP sites, building them in the same directory structure as the production environment reduces deployment troubles. By default, XAMPP places all projects under the “htdocs” folder, but this may differ from your production environment. Therefore, assigning port numbers allows you to separate the URLs for each project while keeping a directory structure similar to the production environment.

• Simply separating folders can cause subtle differences in directory structures compared to production.
• By switching access via different port numbers, it becomes easier to develop multiple projects on the same machine.
• If you are on Windows, you will edit files under “C:\xampp\~”. On macOS, it will be under “/Applications/XAMPP/~” (the path may vary).

1. Create a Folder for Each Project in htdocs

First, create a folder in the htdocs directory of your XAMPP installation for each site you develop.

• Name the folder after the domain or site name for easy identification.
• In this example, we create a folder named “bukiusagi” (C:\xampp\htdocs\bukiusagi).

htdocs 
├─ bukiusagi 
    └─ (Place your files here)

2. Place a Temporary File (index.html, etc.)

In the “bukiusagi” folder you created, place a test file like index.html.
Just put something simple like “Hello World!” for display testing.
You can replace it with PHP files later, but start with a test file to confirm it works.

3. Add a Port Number to httpd.conf

Open the XAMPP Apache configuration file “C:\xampp\apache\conf\httpd.conf” in a text editor.

• Search for the line “Listen 80” and add a line like “Listen 4540.”
• The number you specify here (e.g., 4540) will be the port number you use when accessing the site later.
• You can use any number you like, but make sure it’s not already in use by other apps or services.
  • Common examples: Port 80 is for HTTP, 443 is for HTTPS.
  • If a port is in use, the server won’t start or you may encounter errors, so be careful.

# Existing line
Listen 80

# Add this line
Listen 4540

4. Configure httpd-vhosts.conf

Use VirtualHost in Apache to load different projects with different port numbers.

##<VirtualHost *:80>
##    ServerAdmin webmaster@dummy-host2.example.com
##    DocumentRoot "/xampp/htdocs/dummy-host2.example.com"
##    ServerName dummy-host2.example.com
##    ErrorLog "logs/dummy-host2.example.com-error.log"
##    CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/xampp/htdocs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error.log"
    CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

<VirtualHost *:4540>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/xampp/htdocs/bukiusagi"
    ServerName localhost
    ErrorLog "logs/dummy-host2.example.com-error.log"
    CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

5. Restart XAMPP

Restart XAMPP to apply these settings.

1. Open the XAMPP Control Panel
2. Click “Stop” for “Apache”
3. Once stopped, click “Start” again
4. If Apache starts without errors, you’re good to go

If you get an error

• Check if the port number is already in use
• Check for typos or folder path mistakes in httpd.conf or httpd-vhosts.conf
• Ensure the closing tag </VirtualHost> is present

6. Access It via Your Browser

After configuring everything, open your browser and access the following URL:

http://localhost:4540/ 

• If everything is set up correctly, you will see the contents of the index.html you created (e.g., “Hello World!”).
• Using a private or incognito window is recommended for initial tests, as it prevents browser caching or redirect settings from interfering.

Be Aware of HTTPS Redirects

• If there’s a mistake in your settings, a regular browser may redirect to HTTPS, and that redirect may remain cached.
• If so, even if you fix the settings, the browser may still automatically go to HTTPS, causing the page not to display.
• Using an incognito window the first time to confirm everything is working can be smoother.

Summary

With XAMPP, you can easily begin learning PHP or developing web applications for the first time.
Just start Apache and MySQL, place your PHP files in htdocs, and access them via your browser to check their operation.
Once you get used to it, try installing WordPress, monitoring logs, and further customizing your development environment to make it even more comfortable.