PHP Development Environment Setup with Atom & XAMPP Tutorial

What is Atom and XAMPP?

Atom is a free code editor that allows us to create, edit and save the scripts that run our PHP application. Atom can also be extended into a complete integrated development environment (IDE) by installing custom add-on packages.

XAMPP is a development environment for PHP which contains all the services needed to be able to run PHP applications, such as a web server and PHP parser. XAMPP is only used for development and testing purposes, which also makes it a great tool for learning.

Both Atom and XAMPP is available for Windows, Mac and various Linux flavors so we will be using it for this PHP tutorial series.

How to install XAMPP on Windows

Please follow the steps below to install XAMPP on a Windows operating system.

1. Open your browser to apachefriends.org and click on the XAMPP for Windows button to download XAMPP. Alternatively, you can go to the downloads section and choose a specific version.
2. Open the downloaded XAMPP installer to start the installation. The default settings are fine, continue selecting Next until the application has finished installing.

If you didn’t change the installation directory, XAMPP will be installed toC:/xampp/.

How to start the XAMPP stack on Windows

Please follow the steps below to start the XAMPP stack.

By default, XAMPP will not create a desktop shortcut, we will have to create one ourselves.

1. Navigate to the installation directory (defaultC:/xampp/).
2. Right-click on the XAMPP Control .exe file and select Send to > Desktop (create shortcut).
3. Run XAMPP Control.
4. Click on the first Start button to start the Apache web server module. Each individual module can be started and stopped this way.
5. Click on the first Admin button or go to http://localhost/dashboard and you should see a welcome page.

Only the Apache module needs to be started in this tutorial series. When we learn about databases, we will start the MySQL module as well.

How to install Atom on Windows

Please follow the steps below to install Atom on a Windows operating system.

1. Open your browser to atom.io and click on the Download button. The page should automatically pick up your Windows version and provide you with the correct installer.
2. Run the Atom installer and wait until the installation has finished. Atom will automatically install, create a desktop shortcut and run.

How to set up a project on Windows

We need a dedicated folder to store the scripts for our PHP application. Please follow the steps below to set up a project for our application.

1. In the XAMPP Control, click on the Explore button or navigate to the installation directory (defaultC:/xampp/).
2. Navigate into the htdocs directory.
3. Create a new folder called PHPProjects.

Once we’ve created the directory, we can open it up as a project in Atom.

1. Inside Atom, select File > Add Project Folder (Ctrl+Shift+A) or Open Folder (Ctrl+Shift+O).
2. In the pop-up dialog box, select: Local Disc (C:) > xampp > htdocs > PHPProjects and click OK.

Atom will now treat the PHPProjects directory as a project and allow certain operations directly from within Atom, like creating and deleting files.

How to install XAMPP on Mac OSX

Please follow the steps below to install XAMPP on a Mac operating system.

1. Open your browser to apachefriends.org and click on the XAMPP for OS X button to download XAMPP. Alternatively, you can go to the downloads section and choose a specific version.
2. Open the XAMPP dmg image and drag it to your Applications folder.

XAMPP will be installed to the /Applications/XAMPP directory and you can double click it to start.

How to start the XAMPP stack on Mac OSX

Please follow the steps below to start the XAMPP stack.

1. Open the XAMPP Control (manager-osx).
2. Under the General tab, click on the Start button. Once the services are running, the Status field will show a green circle.
3. Still under the General tab, click on the Go to Application button. Your default browser will open up to http://localhost/dashboard and you should see a welcome page.

To stop the XAMPP stack we can click on the Stop button under the General tab or simply close the Control.

How to install Atom on Mac OSX

Please follow the steps below to install Atom on a Mac operating system.

1. Open your browser to atom.io and click on the Download button. The page will automatically recognize your operating system and provide you with the correct package.
2. Once you have the file, you can click on it to extract, and then drag the application into your Applications folder.
   
   If you downloaded the portable version, you can run it directly from where it saved to your system.

If you want to know more about updates and portable mode, you can go to the Atom Flight Manual .

How to set up a project on Mac OSX

We need a dedicated folder to store the scripts for our PHP application. Please follow the steps below to set up a project for our application.

1. Open the XAMPP Control.
2. Start the stack, if it’s not already started.
3. Under the Volumes tab, click on Mount and then click on Explore. This will open up the opt/lampp/ directory.
4. From there, navigate into the htdocs directory.
5. Create a new directory called PHPProjects. You may use any name you want but for this tutorial series we will be using PHPProjects as our project directory.

Once we’ve created the directory, we can open it up as a project in Atom.

1. Inside Atom select File > Add Project Folder, navigate to the PHPProjects folder (Computer/lampp/htdocs/PHPProjects) and select Open.

Atom will now treat the PHPProjects directory as a project and allow certain operations directly from within Atom, like creating and deleting files.

The Volume must be mounted in XAMPP before we can have access to the folders.

How to install XAMPP on Ubuntu

Please follow the steps below to install XAMPP on a Ubuntu operating system.

1. Open your browser to apachefriends.org and click on the XAMPP for Linux button to download XAMPP. Alternatively, you can go to the downloads section and choose a specific version.
2. Open the terminal and cd into the directory where you downloaded the installer. In our case we left the installer in the Downloads folder.
   Example:

   Copy

    cd Downloads

3. Set the permissions for the installer withchmod +x xampp-linux-*-installer.run , replacing the * with your operating system and installer version.
   
   For example, our operating system is 64-bit, and our XAMPP version, at the time of writing, is 7.3.5.
   Example:

   Copy

    chmod +x xampp-linux-x64-7.3.5-1-installer.run

4. Run the installer with./xamp-linux-*-installer.run . If you need to provide admin privileges, usesudo ./xamp-linux-*-installer.run .
   Example:

   Copy

    sudo ./xampp-linux-x64-7.3.5-1-installer.run

5. The default settings in the installer are fine, so just select Next until the installation starts.

XAMPP will be installed to the/opt/lampp directory and contains themanager-linux.run file that we need to run XAMPP.

How to start the XAMPP stack on Ubuntu

Please follow the steps below to start the XAMPP stack.

1. To start the XAMPP stack on a 64-bit system, we execute the command:
   64-bit:

   Copy

    sudo /opt/lampp/manager-linux-x64.run

   For a 32 bit system we execute the command:
   32-bit:

   Copy

    sudo /opt/lampp/manager-linux.run

2. Once XAMPP is running, go to the Manage Servers tab and start the Apache Web Server, if it’s not already started.
3. Test if the server is running by going to http://localhost/dashboard in a browser. It should display a welcome message.

How to install Atom on Ubuntu

Please follow the steps below to install Atom on a Ubuntu operating system.

1. Open your browser to atom.io and click on the .deb button to download the package for Ubuntu.
2. Run the downloaded Atom installer, select Install, and wait for the application to finish.
3. Once installed, we can run Atom from the start menu (Show Applications).

How to set up a project on Ubuntu

We need a dedicated folder to store the scripts for our PHP application. Please follow the steps below to set up a project for our application.

1. Open the XAMPP Control if it’s not already open. Go to the Welcome tab and select Open Application Folder.
2. Navigate into the htdocs directory and create a new folder called PHPProjects.

Once we’ve created the directory, we can open it up as a project in Atom.

1. Inside Atom, select File > Add Project Folder (Ctrl+Shift+A) or Open Folder (Ctrl+Shift+O).
2. In the pop-up dialog box, select: Other Locations > Computer > opt > lampp > htdocs > PHPProjects and click Ok.

Atom will now treat the PHPProjects directory as a project and allow certain operations directly from within Atom, like creating and deleting files.

If you’re using Ubuntu 18.10, the menu buttons may not show up for you. Please see this issue on Github .