PHP Installation with XAMPP

Introduction

When anyone starts development in PHP, the first software they are being told is XAMPP. XAMPP actually stands for cross-platform, Apache, MySQL, PHP and Perl. As the name suggests it is used to run Apache server and hence PHP with it. It is cross-platform and is supported by Windows, Mac, Linux and Ubuntu. In this article we will try to install, run and fix issues related to XAMPP.

How to Install XAMPP

  1. Visit here and download XAMPP as per your system.
  2. Once downloaded, install the XAMPP.
  3. Once installed, you can save your programs here: C:\xampp\htdocs

How to run server on XAMPP

  1. Once the XAMPP server is installed, you can open it up:
    Download XAMPP server
  2. Here you can start Apache server and MySQL. With this you have started a server that can be used to run your Apps and SQL that can be used to create tables and perform tabular operation:
    XAMPP server Installation

    You can see above that our server is running on port 81. By default is will run at 80.

How to fix Installation error of XAMPP

  1. In case you get an error that Apache or SQL is not starting.
    Run XAMPP server
  2. Then you need to change the port value, as we have changed from 80 to 81.
    Click Config:
    Fix XAMPP server Error
  3. When you will click this file, it will open a notepad, find 80 and change it to any other value:
    Change port in XAMPP server
  4. Like this you can even change other port values:
    Port in XAMPP server

    But it is recommended to use the default ones, until you get an error while running the server/MySQL.

How to run PHP in XAMPP

To run a php program either the one within HTML content or one with just php programs, we save them as .php files.
We need a server to run php file as it is a server side executable file. We will firstly follow steps mentioned here: “PHP Installation with XAMPP”. Once XAMPP is installed and server is running, then we will save our php files in a folder “test” inside “C:\xampp\htdocs” in windows.
Then we will run http://localhost:/test/ in browser.

<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?> 
</body>
</html>

In case you have saved your above discussed php code in index.php, then it will run something like this:

PHP Inside HTML

In case you have a php file without HTML content and you want it to run/executed via frontend (e.g. using AJAX calls), then we will be writing two programs.
The first one is a simple php file “server.php” with given code:

<?php 
header("Access-Control-Allow-Origin:*, Origin, X-Requested-With, Content-Type, Accept");
// header('Content-Type: application/json');
echo $_POST["method"]();
//simple function example
function readCall(){
    echo 'PHP Call is successful';
}
?>

 

Here, we have created a function that return “PHP is successful”. In the same folder, we have a html file with given content:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    function script() { // AJAX call 
        $.ajax({
            url: "http://localhost:81/test/server.php",
            type: "POST",
            data: {
                method: "readCall"
            },
            success: function(response) {
                alert(response);
            },
            error: function(request, error) {
                alert(request);
            }
        });
    }
    </script>
</head>
<body onload="script()">
    <h1>HTML Content</h1> </body>
</html>

Here, this HTML file firstly loads jQuery from an external link, so that we can perform AJAX call. In second script we have written a simple AJAX call which is calling out our server.php file using its location (http://localhost:81/test/server.php, or simply http://localhost:/test/server.php if you have not set any port in XAMPP). The AJAX gets our PHP echo in response and we have added the response in the alert, which looks like this in browser:

PHP Server Output

 

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.