1.

Setting up Web Server

In this section, you will learn how to set up a web server on the (name of mini PC and
Windows Server). The web server we will use is XAMPP, which stands for Cross-Platform,
Apache, MariaDB/MySQL, PHP, and Perl.
XAMPP is a free and open-source software package designed to simplify the setup of a
local web development environment. The name is an acronym representing its key components:
Apache, MySQL (or MariaDB), PHP, and Perl, with the "X" signifying its cross-platform
compatibility with Linux, Windows, and macOS. Apache serves as the web server, handling
HTTP requests and delivering web pages, while MySQL or MariaDB functions as the database
management system for storing and managing data. PHP and Perl are scripting languages used
to create dynamic and interactive web applications. [1]
XAMPP is widely used by developers to test and develop websites on their local
machines before deploying them to live servers. It provides a pre-configured, all-in-one solution
that eliminates the need for manual installation and configuration of each component, making it
a convenient and efficient tool for both beginners and experienced developers. [2]

1.1. Installing XAMPP

Step 1: Download the XAMPP Installer
To install XAMPP go to your browser and search for “XAMPP Installer.” Then click the
Download XAMPP.

Figure: Searching and downloading XAMPP Installer

or scan this QR Code

Figure: XAMPP Website Installer QR Code

Step 2: Choose the Right Installer

From the list of available versions, choose the one that matches your operating system (e.g.,
Windows, Linux, macOS). Click the Download button.

Figure: Select the appropriate installer

Step 3: Wait for the Download to Finish
Once you click the download button, wait for the installer to finish downloading.

Figure: Downloading XAMPP installer

Step 4: Run the Installer

After the download completes, open the .exe file to start the XAMPP installation process.

Figure 4: Launching the Installer

Step 5: UAC Warning (If Prompted)

After you open the .exe installer and encounter this warning message about User Account
Control (UAC) just click OK.

Figure: User Account Control warning message

Step 6: Welcome Setup Window

The XAMPP setup wizard will now launch. Click Next > to continue.

Figure: XAMPP Setup welcome screen

Step 7: Select Components
Select Components. It will now display the Select Components. This will ask you to select
which components you want to install and unselect the components you do not want to install.
For this web server we will be use the default selected component and click the Next > button.

Figure: Selecting components to install

Step 8: Choose Installation Folder
Installation Folder. The next window now will ask you to choose a folder in which you were
going to install the XAMPP. Use the default one and click the Next > button

Figure: Select installation directory

Step 9: Select Language
Language. In this section it will ask you to select a language that will going to use in the
XAMPP Control Panel. For this one use the default language which is the English then click
Next

Figure: Select Language for XAMPP

Step 10: Ready to Install
Ready to Install. Setup is now ready to begin installing XAMPP on your computer. Click Next

Figure: Setup ready to install

Step 11: Installation in Progress
Installing. The XAMPP is now start installing, wait for it to finish installing the XAMPP to your
system.

Figure: XAMPP is installing

Step 12: Installation Complete
You now successfully downloaded the XAMPP

Figure: XAMPP installed successfully

1.2. The XAMPP Control Panel
The XAMPP Control Panel serves as a central hub for managing all the individual components
of your local test server. With its user-friendly interface, it logs every action and allows you to
start or stop services such as Apache, MySQL, and others with a single click. Beyond these
basic operations, the control panel also provides several helpful buttons, each offering
additional functionality:

1
2
3
4
5
6
7

1. Config. This option lets you customize the configuration settings of XAMPP itself, as
well as its individual components (like Apache, MySQL, etc.). You can tailor the
environment to match specific development needs.
2. Netstat. Displays a list of all active network connections and processes currently running
on your local machine. It’s useful for identifying port conflicts or checking what services
are currently in use.
3. Shell. Launches a command-line interface (UNIX-style shell) directly from the XAMPP
directory, enabling you to run advanced commands and scripts.
4. Explorer. Opens the XAMPP installation directory in Windows Explorer, giving you quick
access to important files and folders such as htdocs, php, and mysql.
5. Services. Shows the status of services running in the background, allowing you to
manage them without using the Windows Services panel.
6. Help. Provides access to community forums and other support resources where you can
find solutions to common issues or ask questions.
7. Quit. Closes the XAMPP Control Panel application. This does not stop the services
already running; they will continue to run in the background unless manually stopped.
1.2.1. Setup the Apache
Apache (Apache HTTP Server) is one of the most widely used open-source web
servers. It is responsible for handling and delivering web content to users by processing
requests and serving files such as HTML, PHP, images, and other resources over the internet or
a local network. In the context of XAMPP, Apache allows your local machine to act as a web
server for testing and developing websites and web applications.

Step 1: Accessing the htdocs Directory

To manage your web files, you need to access the htdocs folder, which is the root directory of
your local web server.
1. Open the XAMPP Control Panel and click the Explorer button to open the XAMPP
Directory.

Figure: Accessing the XAMPP directory via Explorer

2. Locate the “htdocs” folder and open it.
 Figure: Opening the htdocs folder

Step 2: Understanding htdocs

The htdocs folder is the root directory for your local web server in XAMPP. It acts just
like the "public_html" or "www" folder on a live web server. When Apache is running, any
website or web file placed inside the htdocs folder becomes accessible through your browser
using http://localhost.

1
2

Figure: folders inside htdocs

Inside the htdocs, you’ll find the following website directories:
1. CpEDepartment – Contains the webpages for the CpE Department Website.
2. CpEPortal – Contains the webpages for the Centralized Website, ICpEP.SE Website,
and the CpE Portal.

Step 3: Starting Apache in XAMPP

 As you can see, we now successfully configure the webpages inside the htdocs and we can
now be able to start the apache in the XAMPP Control panel. To start the apache into your
XAMPP Control panel. Open the control panel and in the apache section. Click the start button

Figure: Starting Apache from the XAMPP Control Panel.

Step 4: Apache is Now Running

After a few seconds, the Apache module should turn green and display "Running," indicating
that your local server is live.
 Figure: Apache service successfully started.

Now you can open your browser and access your projects via:
1. http://localhost/CpEPortal

Figure: Accessing CpEPortal

2. http://localhost/CpEDepartment
Figure: Accessing CpEDepartment
1.2.2. Setup the MySQL
MySQL is an open-source relational database management system (RDBMS). It is used
to store, manage, and retrieve data for web applications. MySQL works in conjunction with
server-side scripting languages like PHP to dynamically display content based on user input or
database queries. In XAMPP, MySQL is essential for running web apps that require a database,
such as content management systems (CMS) like WordPress.

Step 1: Start MySQL via XAMPP Control Panel

To begin using MySQL, first launch the XAMPP Control Panel. Locate the MySQL module and
click the Start button. This action will initiate the MySQL server on your local machine.

Figure: Starting the MySQL server from the XAMPP Control Panel
Step 2: Confirm MySQL is Running
Once started, the MySQL module will show a green highlight with a message such as
"Running" next to it. This indicates that MySQL has successfully started and is ready to be used.

Figure: MySQL Status showring as “running” in XAMPP Control Panel

Step 3: Open phpMyAdmin

To access the MySQL database through a graphical interface, open your web browser and
navigate to:
http://localhost

Figure: Searching for XAMPP Dashboard

On the XAMPP homepage, click on phpMyAdmin. This will open the web-based interface for
managing your MySQL databases.

Figure: Clicking phpMyAdmin on the localhost homepage to access the database interface

You now successfully open your database.

Figure : phpMyAdmin Dashboard

Step 4: Explore your Database
Once inside phpMyAdmin, you will see a list of databases on the left panel. Locate and select
the database for your project — in this case, choose the icpepse database.

Figure: Selecting the “icpepse” database.

Step 5: View Tables Inside the Database

After selecting your database, the central panel will display all the tables it contains. These
tables hold the structured data used by your web application
 Figure: Viewing the tables inside the “icpepse” database.

1.2.3 Working with MySQL Databases in XAMPP

Once MySQL is up and running in XAMPP, the next important steps involve managing your
databases effectively. Whether you are developing a small web app or a full-fledged system,
understanding how to work with database tables and data is crucial.
In this section, we will cover three essential tasks when working with MySQL in XAMPP using
phpMyAdmin:

CREATING A TABLE IN THE DATABASE

Every database is made up of tables. Each table stores data in rows and columns, much
like a spreadsheet. You’ll learn how to define fields, data types, and primary keys for your
application.

Step 1: Select the Database

Select the icpepse database from the list on the left panel in phpMyAdmin.
 Figure: Selecting the icpepse database.

Step 2: Create a table

Scroll down to the "Create Table" section. Enter your desired table name and the number of
columns, then click Create.

Figure: Creating a new table.

Step 4: Setup the Table Structure.

You are now going to build the table structure to your database. the structure it contains
the following column that you should need to configure:
 1. Name – The name of the field or column in the table. It should be descriptive and
represent the data stored in that column (e.g., username, email, created_at).
2. Type – the data type of the column.
3. Length/Values – Specifies the data type for the column, such as INT, VARCHAR,
DATETIME, TEXT, etc. The type determines what kind of data can be stored in that
column.
4. Default - The default value assigned to the column if no value is provided during an
insert operation. This can be a static value or an expression (e.g.,
CURRENT_TIMESTAMP).

Figure: Table Structure Setup

Step 4: Save the Table

After entering all the column details, scroll down and click the Save button to create the table.
 Figure: Save the table

You’ve now successfully created a new table under the icpepse database.

Figure: sample_table successfully added.

MODIFY A TABLE IN THE DATABASE

If you need to correct an error or add new columns to your table, you can modify it through
phpMyAdmin.
Step 1: Select the Table and Go to Structure.
To modify a table first is to select the table that you want to modify then select the structure
 Figure: Selecting the table and opening the structure view.

Step 2: Select Column and Click Change.

Then select the check the text box of the column you want to modify and click change

Figure: Checking the column and selecting “Change”

Step 3: Edit and Save

Update the column details as needed. When done, click the Save button.
 Figure: Editing column values and saving changes.

You now successfully modify your table.

Figure: Newly updated table structure.