Xampp Visual Studio Code

admin



This is old.

We now recommend using MAMP instead of XAMPP. See these instructions for setting up for our PHP classes.

XAMPP is a free distribution package that makes it easy to install Apache Web Server, PHP, PEAR, and MySQL. Before installing XAMPP, you should turn off any other web servers and instances of MySQL you have running on your Windows machine.

In your Visual Studio Code project, go to the debugger and hit the little gear icon ⚙️ and choose PHP. A new launch configuration file is created for you launch.json. This will start listening on the specified port (by default 9000) for Xdebug. Every time you make a request with a browser to your web server, Xdebug will connect, and you can. XAMPP is the most popular PHP development environment. XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use. Download Click here for other versions.

Installing XAMPP on Windows

  1. Download and Install Visual Studio 2008 redistributable package because XAMPP will need this to run properly.
  2. Download and Install XAMPP for PHP 5.X for Windows- Be sure to select the proper version of PHP as there are many choices.
  3. Allow the program to make changes to your machine.
  4. It is VERY important to install on the root of c:. If you don't, some functions of XAMPP may have restrictions that will force you to adjust the settings in your UAC, which isn't recommended.
  5. Double-click on the new XAMPP Control Desktop shortcut or Use the Search feature in Windows 10 to find the XAMPP Control App, which opens up the XAMPP Control Panel Application. There you will see a column of 'Start' buttons. Select the ones for MySQL and for Apache...you should now see a green 'Running' indicator
  6. NOTE: If you find another service is already running on port 80 on your computer, read our instructions on how to change XAMPP to use a different port like 8080.

Testing your XAMPP Installation

In your web browser, go to http://localhost. You should see the start page of XAMPP:

Xampp Visual Studio Codes

Class Files

  1. After downloading the class files, create a folder in htdocs named 'Webucator' and extract your class files in that folder.

Setting the MySQL Password on Windows

The PHP files use 'pwdpwd' for the MySQL root password, while the default password is NO password.

  1. Click Admin next to MySQL on the XAMPP Control Panel to bring up the phpMyAdmin.
  2. Choose the mysql database on the left.
  3. Then choose the SQL tab on the top and run the following statement:
  4. You also need to update line 21 of the xampp/phpMyAdmin/config.inc.php file with the new password (pwdpwd). Note: In order to connect to the myPHPAdmin center, you must do these steps in order.

Installing Northwind Database using XAMPP

NOTE: you should download the class files above before following these instructions, as it contains the Northwinds Database file(s).

  1. To install the Northwind database used in class, click Admin next to MySQL on the XAMPP Control Panel to bring up the phpMyAdmin. That should take you to http://localhost/phpmyadmin.
  2. If it asks you to login, the username is root and the password is pwdpwd.
  3. On that page, click on the Import link under the Localhost heading. After, it should say 'Importing into the current server'.
  4. Browse to the Northwind-MySQL.sql file in your class files (c:xampphtdocsWebucator).
  5. Click the Go button on the bottom left of the page.
  6. You should get a Success message and Northwind should be added to your list of Databases.

Recommended Code Editor

Visual Studio Code (Download, Install, and Set up)
  • While you may use a different editor or IDE, Visual Studio Code is an excellent IDE to learn to code on. It provides a nice balance of power and simplicity and it is available on Windows and Mac.

Testing PHP Files

All your class files should be located in C:xampphtdocsWebucatorClassFiles

Conectar Visual Studio Code In Xampp

To test any of the class files in your browser, say C:xampphtdocsWebucatorClassFilesPHPBasicsDemosHelloWorld.php, you can use 1 of 2 methods:

Visual studio code xampp mac
  1. Method 1:
    1. Go to http://localhost/Webucator/ClassFiles/PHPBasics/Demos/HelloWorld.php in your web browser.
    2. Follow the same pattern to view all other class files; basically the C:xampphtdocs gets changed to http://localhost/
  2. Method 2:
    1. Go to http://localhost/Webucator/ClassFiles/ in your web browser.
    2. Bookmark that page in your browser for easy access to it from now on.
    3. From there, you can see all the lesson folders and drill down to any class file for testing/viewing.

And that's it

Happy Windows XAMPPing!

Introduction

In my introductory class to server-side programming with PHP and MySQL, I need a code editor or a full-featured IDE. Usually I go with NetBeans, but this year i decided to give the new cool kid a shot, so i picked : Visual Studio Code. Before officially choosing anything, I had to test its capabilities.

Here is what I am looking for:

  • A simple environment to focus on programming instead of on infrastructure (introduction on programming need to be on programming, not on tooling)
  • A free code editor (who does not like free stuff?)
  • Code coloring
  • Basic PHP code completion support
  • PDO code completion support (there is a part about database)
  • Debugger with breakpoints
  • Support for PHP built-in Web server (no Apache virtual host or any other esoteric setup to manage, again, programming should be the focus)

My conclusion: VS Code covers most of my expectation for an introductory class code editor.The only problem is that, as of today, the PDO Intellisense is only partly covered and pretty close to 0%. Let this be a subject for another day.

In the current tutorial:

  1. We will install PHP, MySQL, phpMyAdmin and Apache using MAMP
  2. We will install Visual Studio Code
  3. We will install a VS Code plugin, named PHP Debug
  4. We will create a project (well its called opening a folder)
  5. We will add an index.php file to our project
  6. We will configure VS Code linter to use our PHP installation
  7. We will learn how to open a command line console directly in Code
  8. We will also cover how to copy and paste in the console
  9. We will start a PHP development server
  10. We will configure our PHP installation and activate XDebug
  11. We will connect VS Code to listen to XDebug
  12. We will start an XDebug session manually and we will see how to use the xdebug-helper Chrome extension instead

That’s a lot of stuff, so lets get started…

Installing PHP & MySQL with MAMP

Before coding in PHP, you need PHP installed and before connecting to MySQL, you need MySQL installed as well. Pretty obvious right?

For easy installation, I recommend WAMP or MAMP.I usually go with WAMP, but let’s try MAMP today since it is compatible with both Windows and OS X.

Installing MAMP

Its pretty straight forward, you download the installer, click next, next, next and it is installed. I unchecked the Pro Version checkbox since I do not plan to buy it. If you do plan on doing a lot of PHP development, it might be a good idea to take a look at the MAMP Pro version, its only about 80$ CAD (well, that’s up to you).

Configuration

Now that MAMP is installed, lets open it. It is a nice clean and minimalist window with a few options in it: Preference, Open start page and Start Servers.

If you see the following error message, don’t worry you can easily change the port number by configuring MAMP.

As we are heading toward configuring our environment, lets click the Preferences… button.

Start/Stop

In this tab, there is some basic options, that are pretty self-explanatory.

Visual Studio Code Xampp Php

Ports

This is the tab to use to change port numbers.

Due to a conflict with IIS Express, I need to change my Apache port to 8080. Skype also cause conflict some times, so if you have Skype installed, that might be the cause of the problem. If MAMP did not alert you of a port conflict, you don’t need to change anything so you can skip this part.

After updating MAMP Apache port number, I found out that I also needed to update my Apache httpd.conf file as well. You may also need to restart MAMP if something seems wrong.

Update Apache port number
  1. Open MAMPbinapacheconfhttpd.conf
  2. Find the line Listen 80 (ctrl+f in notepad)
  3. Change 80 by the port you configured (i used 8080) so the line should now look like Listen 8080.
  4. Save the file

PHP

We wont use PHP 7, so I will change the version to 5.6.21.

Web Server

We wont touch this.

Testing our installation

Back on the main window, if we click “Open start page” it should open the start page. I love when software’s are that self-explanatory!

If the page does not open or if there seems to be a problem, try to restart your MAMP (or the servers: “stop servers” then “start servers”).

From this Web page, we have access to phpMyAdmin and to the phpinfo.

Setting up Visual Studio Code

Now that we have MAMP up and running, lets install our code editor. First head to https://www.visualstudio.com/ and download “Code”. Make sure you pick Code, not Visual Studio Community, that is a totally different product.

Run the installer, again its a pretty straight forward installation.

How to install plugins

Now that we have installed our code editor, we will need to install the following plugin:

  • PHP Debug (it will allow us connect Code with XDebug)

Since June update there is a plugin “tab” with a search box.The small number (3 in the screenshot) is the number of plugins that have available updates.

  1. Search for the plugin you want (in our case, just search for “php”)
  2. Optionally, when you see a plugin that you might want to install, click on it. This will open its “read me” file. Usually it contains a description of the plugin, how to install it, how it works, etc.
  3. Click on the green “Install” button to install.
  4. Restart VS Code (you can install multiple plugins before restarting)

VS Code folder

In code, a project is named a folder, so you basically open a directory and work with it.

Lets create our PHP project.

  1. Click “File > Open folder…”
  2. Select your working directory (or create one)
  3. Click “Select Folder”

See The Basics of Visual Studio Code for more info about Visual Studio Code.

This is my project structure (i choose this directory structure to show you how to start the PHP server within a sub-directory):

In my index.php, I’ve added basic Bootstrap 3 template code, but that doesn’t really matter. Here is my code (from the Bootstrap 3 Snippets VS Code plugin):

PHP development server

Now that we have an opened folder and a PHP page that we want to see in a browser, we still have a few things to do to make it work out.

Tell Code where is PHP

We will first tell Code about our PHP installation. Code will use the default PHP linter php.exe -l to validate our code and to underline errors. By default, the validation happen on file save but you could configure it to happen when typing.

To do that, we need to alter our configuration. I decided to go for “User settings”, this way it will be done for all of my projects. It is also possible to have different settings per project, but lets just focus on User settings for now.

Settings, in Code, use the JSON format which is flexible and easy to manage (and human readable).

Lets configure our php.validate.executablePath, your configuration file should now look like this:

Notice the instead of . We are in a JSON string and we need to escape slashes, like in JavaScript and many other programming languages.

By default, the “PATH TO MAMP” is c:mamp. The full path to php.exe should look like this: c:mampbinphpphp5.6.21php.exe (don’t forget to escape the slashes).

For more info on Code and PHP, see PHP Programming in VS Code.

Opening a console

To start our server, we will need a console. To do that, go to View > Integrated terminal.You can even have multiple consoles open at the same time.

Copy/paste

In the console, ctrl+c and ctrl+v are not yet supported. To copy/paste you need to use these shortcut instead:

  • Copy: ctrl+insert
  • Paste: shift+insert

Starting the server

In the console, we will tell PHP to start a development server in our www sub directory by typing the following command:

How To Setup Xampp With Visual Studio Code

If you visit http://localhost:8000/ in a browser, you should see the content of your index.php file.

Breaking down the command

  • -S localhost:8000indicate the server host and port.
  • -t src/www indicate the web root.

For a folder without sub-directories, where index.php is at the root (see screenshot below), you can run this command instead:

Setting up XDebug

Now that we have everything setup, lets connect XDebug to Code.

Lets write some PHP and create a breakpoint

Lets add a bit of PHP in our index.php file (we need something to test our connection):

  • To create a breakpoint, click in the margin.
  • To remove it, click the breakpoint again.

If you don’t know what a breakpoint is, just create one anyway and you will soon discover what it does.

Configure PHP to enable XDebug

PHP use configuration saved in a text file named php.ini. That file is located in the same directory as php.exe.

Lets go to our PHP installation directory: PATH TO MAMPbinphpphp5.6.21. As you can see MAMP does not create the php.ini file but instead it created two templates: php.ini-development and php.ini-production. To create our php.ini file, lets duplicate the php.ini-development file and rename the copy php.ini.

Your PHP directory should now look like this:

Inside the php.ini file

In this file you can control how PHP does things. I wont go deep into it, but if you are interested, you can easily find tons of info by googling a bit.

We want to add the following code at the bottom of php.ini:

When you do configuration changes, if you have a running PHP development server, you need to restart it. To do so, in the console, hit Ctrl+C to stop it, then up arrow to write your last command back, then press enter to execute it.

Create the launch.json file

To start debugging in Code, you will need to add some commands somewhere. That somewhere is a file named launch.json. But don’t worry our plugin will do it for us:

  1. Go to the debug tab
  2. Click the green “play” button, this should open the command menu
  3. In the command menu, choose PHP and it will create a launch.json file in a .vscode directory.
  4. Click the green “play” button again to “Listen for XDebug”

Xampp Visual Studio Code 2019

Your launch.json file should look like this:

The port must be the same in both launch.json and php.ini files.

Visual Studio Code Live Server Xampp

Manually starting a XDebug session

In your browser, you only have to add the following querystring to the URL you want to start debugging: ?XDEBUG_SESSION_START.Example: http://localhost:8000/?XDEBUG_SESSION_START

If you try it, your code should break in Code at line 2 of your index.php file.

For more info on XDebug, you can take a look at their website or at Debugging and Profiling PHP with Xdebug.

Google chrome extension

If you are like me and don’t like to remember those kind of things and that don’t want to bother about navigation and all that stuff, you will find the following Chrome extension very handy: xdebug-helper.

It add a little “bug” icon. When you click on it, it shows you a few options including “Debug” (which start a debugging session) and “Disable” (which end the debugging session).

There is multiple ways to start an XDebug session, the plugin use cookies instead of querystrings.

Conclusion

Now that we are done, lets recap on what we achieved:

  1. We installed PHP, MySQL, phpMyAdmin and Apache using MAMP
  2. We installed Visual Studio Code
  3. We installed the Code PHP Debug plugin
  4. We created a project (well we opened a folder)
  5. We added an index.php file to our project
  6. We configured VS Code linter to use our PHP installation
  7. We learnt how to open a command line console directly in Code
  8. We also covered how to copy and paste in the console
  9. We started a PHP development server (in our folder root or in a sub-directory)
  10. We configured our PHP installation and activated XDebug
  11. We connected VS Code to listen to XDebug
  12. We started an XDebug session manually and how to lazily use the xdebug-helper Chrome extension to not bother about additional querystrings

Now that everything is connected, we can write some PHP and debug it using Visual Studio Code!

Visual Studio Code Xampp Mac

For new projects we only need to have VS Code PHP Debug extension create the launch.json file for us and voilà!

Buy My Book Amazon.com (associate link)

Buy My Book Amazon.ca (associate link)

You liked the article
and think I deserve a
little something?