1. Install XAMPP

In this course, you will learn how to develop web pages. Later, in the second half of the semester, you will build a complete web-based system. If the pages consist only of static HTML and CSS files, the software requirements are simple—you only need a text editor (such as Notepad or Sublime Text) and a web browser to view the pages. However, you will need more than that, because you will also create server-side scripts in PHP. PHP can perform many operations, including connecting to a database. To run PHP scripts, you need a web server, and to work with a database, you need a database server. To make this setup easier, you will use a software package called XAMPP, which installs both a web server and a database server with minimal configuration effort.

XAMPP (pronounced “ZAMP”) is a free and open-source software package developed by Apache Friends. It provides an easy way for you to set up a local web development environment on your computer.

XAMPP is a solution stack, which means it bundles several tools together:

X → Cross-platform (works on Windows, macOS, Linux)

A → Apache (web server)

M → MySQL (database server)

P → PHP (server-side scripting language)

P → Perl (optional scripting language)

By installing XAMPP, you can:

Run a local web server to test your PHP applications before putting them online.

Create and manage databases using MySQL and phpMyAdmin.

Avoid complicated manual configuration because everything is pre-packaged.

In short, XAMPP allows you to turn your computer into a mini web server, making it ideal for learning and testing web programming.

Firstly, make sure that your hard drive have minimum of 1GB of free spaces in the drive. Then, go to this address:

https://www.apachefriends.org/download.html

In there, you’ll see various kinds of packages. Please:

Click More Downloads

Click XAMPP Windows

Click the latest version, let say 8.2.12

If you are using Windows OS, click the a version of xampp like xampp-windows-x64-8.2.12-0-VS16-installer.exe to download it

If you are using Mac OS, please follow instructions in this Video and skip steps 1 until 3. In case you have the issue of "Developer cannot be varified" in Mac OS, try this solution.

Once the downloading has completed, double click the installer file to start the XAMPP setup process. Press Next > until you see a windows as below:

For this class, we only need the followings:

Apache, by default it is selected

MySQL

PHP, by default it is selected

phpMyAdmin

In this tutorial, you need to select the above items. Press Next > to proceed.

In the next window, as below, maintain the installation folder to your hard drive Drive C:. Maintain the xampp folder. Then, press Next >.

Press the Next > buttons until the installation starts as below:

It will take some time to complete. Once the installation is completed, you will see a window like this:

Uncheck the checkbox so that you will not start the Control Panel now. Press Finish to end the installation.

2. Stop Local Services that Interrupt Web and Database Services

In this section, you will test whether or not your local computer has services that will interfere the Apache web server and MySQL database server. Apache web server runs, by default, in port 80 while MySQL database server runs in port 3306. So, you need to make sure that no other software in your local computer use those port numbers. Other software that might use the port 80 are Internet Information Server (IIS) and Skype.

Firstly, you need to scan all opened (used) ports in your local computer. To do that, run your Command Prompt.

Make sure that you run it as Run as administrator.

Type the following command and press Enter.

netstat -a -n -o

In my case, I will see outputs like this:

As you can see in above image, in my case, both 80 and 3306 ports of my computer are already used by unknown software. Please refer to the Local Address column. Port number is a number after the IP address. The address format is x.x.x.x:port. In your case, your computer might show different numbers. If you can't find port 80 and 3306 under the Local Address, it means you are OK. You no need to kill any proceses. You can proceed to Part 3.

In my case, my port 80 is used by a software identified by PID = 5804. To kill the process, execute this command:

taskkill /pid 5804

Replace the 5804 with a number showed in your console. The output of this operation is:

My port 3306 is used by a software identified by PID = 6540. I kill the process, by executing this command:

taskkill /pid 6540 /f

/f is to force the process to stop. My console displays output like this:

Close your Command Prompt console to end this part.

3. Start Apache Web Server

To start your web server, you need to open the XAMPP Control Panel. Open your file explorer and browse your hard drive until the installation drive:\xampp\ folder.

It good to make a habit to setup the XAMPP first. This is to ensure that your XAMPP can properly run with correct configuration. You can do this by double clicking the setup_xampp.bat file. You will see output like this:

Type 1 and press Enter. You will get:

In case that you got Sorry, but ... nothing to do! something like in the image below, it means you are OK. Please proceed with the next step.

Then, double click the xampp-control.exe file.

You will see a Control Panel window like this:

To start the Apache web server, click the Start button of the Apache module. Wait until you will see the Apache module is highlighted as green. This means the service is started as below.

Try-it-yourself

Try stop the service and start it back.

4. Test localhost

Once the web service is started, you can test to open web pages from your localhost (your local computer). To open a default page of XAMPP, open your Web Browser and type this URL:

http://localhost

You will be directed to localhost/dashboard/ like this page:

Having this page means that your web server is up and running. All web pages that you want to host must be saved in drive:\xampp\htdocs folder. The dashboard in the URL is actually a folder in the htdocs folder. Open your file explorer and browse up to the dashboard folder.

Try-it-yourself

Observe the dashboard folder and it contents. Explore other folders in htdocs.

5. Start MySQL Database Server

Open back the XAMPP Control Panel. To start the MySQL database server, click the Start button of the MySQL module. Wait until you will see the MySQL module is highlighted as green as below.

6. Open phpMyAdmin

phpMyAdmin is a free and open source tool written in PHP intended to handle the administration of MySQL with the use of a web browser. It can perform various tasks such as creating, modifying or deleting databases, tables, fields or rows; executing SQL statements; or managing users and permissions.

To start phpMyAdmin, open your web browser and enter this URL