To develop websites that use server-side code (e.g., PHP or some other server-side programming environment), you will need a web server for testing. You do not want to test changes to your site on your live, production server where breakage could cause problems for the users of your existing site.
For development purposes, it is convenient to use a web server that runs on the same machine as where you are doing your development, such as your personal laptop or desktop system. Setting up the development environment can be complex because it contains several interacting components:
Installing and configuring each of these components can be involved, and then, in addition, it is necessary to configure them to work together.
XAMPP is a product that installs all of the above components (and more) as a single self-contained package, pre-configured to work together effectively "out of the box."
Download XAMPP (for free) from the Apache Friends website. Here is a convenience link you can use to download XAMPP 8.1.12 for Windows or XAMPP 8.1.12 for macOS. This is the version that I am using in class. The precise version you use isn't critical, but it probably should be one of the 8.1.x versions or later. The main Apache Friends site also has an installer for Linux, although in the Linux case it should be relatively easy to install the necessary components separately via your Linux distribution's package manager instead of using XAMPP.
Note for Mac OSX users! It is likely that the system security protections will block the execution of the installer. To get around this, cancel out of the security warning dialog box (the one you see when you try to run the installer), and then immediately go to System Settings -> Privacy & Security. Scroll down to the bottom where the "Security" section is located. You should see a message about the installer. Tell the system to allow it to run anyway, and then follow the prompts. Once XAMPP is installed, launch the manager-osx application to start the XAMPP control panel.
Building complex websites is made easier by using powerful tools. The job is complicated by the mixture of languages that are used, often in the same file. For example, a single web document might contain HTML, CSS, and PHP all mingled together in a complex way. This creates challenges for tooling.
It is possible to use a simple text editor to edit web documents since all the languages involved have a textual representation. However, powerful integrated development environments (IDEs) offer many valuable services that make producing complicated web documents easier and less error-prone. For this course, I recommend PhpStorm by JetBrains. It is only one of many web development tools that exist. My choice of PhpStorm is somewhat arbitrary, but it is one that I like. In any case, it is important for you to get experience with tools of this nature, so you should regard using PhpStorm as part of your educational experience.
PhpStorm is a commercial product that normally requires a commercial license; there is no community edition. However, as a student you can get an educational license from JetBrains that allows you to use all of their commercial tools free of charge for as long as you remain a student (you need to renew the license annually).
Proceed as follows:
Apply for an educational license from JetBrains by following the instructions on the linked page. You will need to create a JetBrains account to do this (creating the account is free). Be sure to use your school email address that ends with .edu.
Download and install the JetBrains Toolbox application for your platform. Windows, macOS, and Linux are all supported. You can log into the toolbox application with your JetBrains account. This application makes it easy to install and update any of the JetBrains IDEs. Your educational license allows you to use all of their commercial tools, not just PhpStorm.
Once the toolbox application is installed, use it to install PhpStorm. You can launch PhpStorm from the toolbox application as well. When it first launches it will ask about license information. Provide your JetBrains account credentials and tell the tool to access your license online.
To verify that you have everything set up, you should try using PhpStorm to create a simple web page that is served by the Apache web server you installed via XAMPP. Although this does not begin to exercise all the features of your development environment, it will at least let you see it working in a basic way.
Proceed as follows (these instructions assume Windows, but can be readily adjusted for other systems):
Everything related to XAMPP is stored under C:\xampp (assuming you used the default location when you installed XAMPP). On macOS the corresponding folder is /Applications/XAMPP. Look for the folder C:\xampp\htdoc. This is where the files served by Apache are located. Do not edit or remove any of the existing files! XAMPP comes with a website pre-installed that gives you access to documentation and other things. You will want to keep that for now. Instead, create a new folder, say cis-1152, beneath htdocs for things related to this class. Don't add any files to this folder yet!
Start PhpStorm from the JetBrains Toolbox app. Select File->New Project... from the main menu. In the dialog box that appears select "PHP Empty Project" (top, left corner) and give a location of C:\xampp\htdocs\cis-1152. PhpStorm will create a project in that folder and show you a blank screen.
Right-click on the name of the project/folder in PhpStorm's left-hand pane. Select "New->HTML File" from the context menu. Give the file the name index.html. PhpStorm will create the file using a simple template to get you started. Create a basic web page for testing purposes.
Open the XAMPP Control Panel that was installed by the XAMPP installer. Click the "Start" button to the right of the "Apache" module to start the Apache web server. Wait a few moments for the server to start. Now open the web browser of your choice and go to the URL http://localhost/cis-1152 to view your web page (note that PhpStorm automatically saved the page when you clicked away from it, so you don't need to explicitly save it).
You have now successfully demonstrated all the "moving parts" of your development environment (except for the database server, which we will get to later).
When you are done doing development work on your website, you should shut down the Apache web server. In the XAMPP Control Panel, click on the "Stop" button to the right of the Apache module.
Last Revised: 2023-01-04
© Copyright 2023 by Peter Chapin
<pchapin@vtc.edu>