code icon

CSCI 1720

Intermediate Web


XAMPP logo
XAMPP

Using XAMPP

While we're working mostly with HTML files in CSCI 1210 and CSCI 1720, which can be viewed locally without being 'served up' by a server, if we start working with more sophisticated (server-side) languages, we're going to need a server. One way to set up a local, "sandbox", environment is to use an application like XAMPP.

There are other, similar applications for different operating systems: MAMP for Mac; LAMP for Linux; and WAMP, also for Windows.

XAMPP stands for "Apache, MySQL, PHP, and Perl (for Windows)." So this allows us to develop full-stack web applications on our workstations before uploading them to a production environment

  1. The most recent version of XAMPP can be downloaded from here. The most recent version, at the time of this writing, is 8.1.6
XAMPP installation download
XAMPP installation download
  1. Run the installation file. When prompted for the installation directory, I always place it immediately inside the C:\ drive (i.e., C:\xampp). It makes things easier to deal with down the road
XAMPP home folder
XAMPP home folder
  1. Once the installation is completed, you can run the application by searching for 'XAMPP Control Panel.' You might want to pin it to your Start menu by right-clicking the icon and selecting 'Pin to Start'
  1. Start the Apache and MySQL servers from the control panel
XAMPP control panel
XAMPP Control Panel
Click image to zoom in
  1. Projects for XAMPP are stored in a subdirectory within C:\xampp named htdocs. You can access them in a browser using the localhost address
localhost
localhost/ address

I use XAMPP in conjunction with Github. So my actual source files are stored somewhere else on the hard drive (C:\Users\jram7\Documents\Github). So, to make it work, I create a link in C:\xampp\htdocs that points to the actual location of the file

  1. To create a link, run the Windows command line (cmd.exe) or PowerShell (powershell.exe)
  1. Change directories to C:\xampp\htdocs. Make a note of the absolute path to the location your files are stored in. Then run the following command
Linking to a directory
Linking to a directory
Click image to zoom in
View of links in File Explorer
View of links in File Explorer
Click image to zoom in

If you double-click on the link, it will actually take you to the location that the files are stored. Likewise, if you enter localhost/csci1720.net/index.php in the browser's address bar, the landing page for the site will display, loaded from the local drive

  1. There's an extension for VS Code that is supposed to make it easier to launch a server-side page in the browser, but I've found that configuring it is a bit of a PITA, so I usually just type in the localhost/ address in the browser
Open PHP/HTML/JS in 
                    Browser Extension
Open PHP/HTML/JS in Browser Extension
Click image to zoom in

That's all you need to start using XAMPP as a sandbox for web site development! Since most of the pages on this site are written in PHP (which we'll hopefully have time to look at this semester), I use XAMPP all the time. It is a similar, if not identical, environment you're likely to encounter in a professional setting