Server – installation and configuration

Author: Dawid Adach

-

Theory

These paragraphs describe the basic theory behind server installation and configuration. If you don't want to read this, you can jump directly to practice.

Before we start our WordPress adventure, we have to set up our environment. Unlike pure Bootstrap, WordPress requires PHP and SQL to run. That means that we can’t develop our theme on a laptop storing data on its local drive and running it in a browser (at least not without some extra effort).

WordPress theme development involves using HTML, CSS, JavaScript, and PHP to build dynamic WordPress sites. As far as the first three items are concerned, all new browsers can execute them easily. Things are different when it comes to PHP. PHP is a server-side language - this means that your code is compiled and executed server-side. The final result is then sent to the browser. That’s why we turn our local machine into a PHP server.

The next big difference in comparison to previous tutorials is the use of a database. WordPress uses databases to store many different sets of data. Why? As long as we are creating static web pages, which doesn’t change content too often we can “hardcode” this information into our HTML files. Things change when we want our website to be more dynamic. Users’ logins, password, posts, comments –– all of these data have to be to stored somewhere. This “somewhere” is our database.

There are many different “servers” and “databases” which we could possibly use. Since server installation and administration is such a big and complex subject, we could write dozens of tutorials just about that before we actually start creating the first website element. So we will simplify that and use software which will do most of the job for us. However, you should keep in mind that if you plan to become web developer, you should definitely dive into that subject more deeply.

This software is called XAMPP, a reasonably small, handy and simple server suite which will turn our computer into a local WWW server supporting PHP, MySQL, FTP and much more.

Note

While reading this tutorial some of points might be unclear or seem to be complex. That’s normal for beginners. In such a case just follow the tutorial - most probably once you execute the steps yourself everything will become clear. If you will still have some questions –– please do not hesitate to post question on our forum.


Installation and configuration guide

Choose your operating system to display detailed instruction:

1.Download

Navigate to the XAMPP website and download XAMPP installer with PHP 7

Download XAMPP for Windows

2.Install

  1. Once the installer is downloaded, run it:
  2. Windows XAMPP installer
  3. Now you can decide which components you wish to install. Since we want to run WordPress in our localhost environment, we have to leave the MySQL and phpMyAdmin options checked. You can the either uncheck the remaining options or keep the default settings (recommended). Then click Next.
  4. Windows XAMPP installer
  5. You can now decide where you would like to install XAMPP on your machine. Choose that existing folder (i.e.) C:\Program Files\XAMPP (recommended) or leave as default. Click Next.
  6. Windows XAMPP installer
  7. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck that option, then click Next.
  8. Windows XAMPP installer
  9. The installer will install XAMPP:
  10. Windows XAMPP installer

3.Run

Once the installation is finished you will see the final screen. Check the option Do you want to start the Control Panel now?. Then click Finish.

Windows XAMPP_FORBIDDEN.html.var installer

This will open the XAMPP Control Panel

Windows XAMPP installer

Note:If you don't check to start XAMPP, you can always start it from the Start Menu or by going to the installation folder (that was defined during installation).

1. Download

Navigate to the XAMPP website and download the XAMPP installer with PHP 7

Download XAMPP for macOS

2.Install

  1. Once it is downloaded, run the installer (.dmg file):
  2. macOS XAMPP installer
  3. Click on the XAMPP icon, if you see a warning: Are you sure that you want to open it? click Open and provide your password.
  4. macOS XAMPP installer
  5. You will see an initial screen, click Next
  6. macOS XAMPP installer
  7. Now you can decide which components you wish to install. Keep the default settings. Click next.
  8. macOS XAMPP installer
  9. On the next screen you will see where XAMPP will be installed . Now click Next.
  10. macOS XAMPP installer
  11. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck that option. Then click Next twice.
  12. macOS XAMPP installer
  13. The installer will start installation
  14. macOS XAMPP installer

3.Run

Once the installation finished you will see the final screen. Check the option Do you want to start the Control Panel now? and then click Finish.

macOS XAMPP installer

This will open the XAMPP Control Panel

macOS XAMPP installer

Note:If you don't check to start XAMP, you can always start it from the Application menu (press F4 and find XAMPP)

macOS XAMPP installer

1.Download

Navigate to the XAMPP website and download XAMPP installer with PHP 7

Download XAMPP for Linux

2.Install

  1. Once it is downloaded, run the installer. You will see the initial screen, now click Next:
  2. Linux XAMPP installer
  3. Now you can decide which components you wish to install. Keep the default settings, then lick next.
  4. Linux XAMPP installer
  5. Within next screen you will see where XAMPP will be installed . Click Next.
  6. Linux XAMPP installer
  7. In the next window, you’ll be asked to install Bitnami for XAMPP, uncheck this option. Click Next twice.
  8. Linux XAMPP installer
  9. The installer will start installation
  10. Linux XAMPP installer

3.Run

Once the installation is finished you will see the final screen. Check the option Do you want to start the Control Panel now? and click Finish.

Linux XAMPP installer

This will open the XAMPP Control Panel

Linux XAMPP installer

Note:If you don't check the option to stat XAMP, you can always start it from the Application menu

Ubuntu/Debian (Download,Install and Run)

sudo add-apt-repository ppa:upubuntu-com/web
sudo apt-get update
sudo apt-get install xampp
sudo /opt/lampp/lampp start

Red Hat® Enterprise Linux® / RHEL, CentOS and Fedora

1.Download

yum install wget
wget https://www.apachefriends.org/xampp-files/7.2.1/xampp-linux-x64-7.2.1-0-installer.run 
Note: Currently the newset version is 7.2.1 (Jan 2018), however in the future there will be newer version releases. Always download the newest version. You can get a link to the newest version from the XAMPP download website.

2.Install

  1. Set the Executable Permission for the XAMPP Script as follows
    chmod 755 xampp-linux-x64-7.2.1-0-installer.run
              
  2. Run the XAMPP Installer Script below
    # ./xampp-linux-x64-7.2.1-0-installer.run 
    ----------------------------------------------------------------------------
    Welcome to the XAMPP Setup Wizard.
    ----------------------------------------------------------------------------
    Select the components you want to install; clear the components you do not want
    to install. Click Next when you are ready to continue.
    XAMPP Core Files : Y (Cannot be edited)
    XAMPP Developer Files [Y/n] :y
    Is the selection above correct? [Y/n]: y
    ----------------------------------------------------------------------------
    Installation Directory
    XAMPP will be installed to /opt/lampp
    Press [Enter] to continue :
    ----------------------------------------------------------------------------
    Setup is now ready to begin installing XAMPP on your computer.
    Do you want to continue? [Y/n]: y
    ----------------------------------------------------------------------------
    Please wait while Setup installs XAMPP on your computer.
    Installing
    0% ______________ 50% ______________ 100%
    #########################################
    ----------------------------------------------------------------------------
    Setup has finished installing XAMPP on your computer.
    
  3. Allow Everyone To Access the XAMPP Server

    Open the /opt/lamp/etc/extra/httpd-xampp.conf file and add the line ” Require all granted” and comment out the line "Require local". For example:

    # vi /opt/lampp/etc/extra/httpd-xampp.conf
    <LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    # Require local
    Require all granted
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
    </LocationMatch>
    

3.Run

Our service has already started, however to make the previous change effective, we have to restart our XAMPP service:

/opt/lampp/lampp restart

You will get some output like that below:

Restarting XAMPP for Linux 1.8.3-3...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...not running.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

4.Test

  1. Go to the “Manage Servers” tab and make sure that you have both Apache Web Server and MySQL Database running. If not –– start them manually from the tab.
  2. Come back to the Welcome tab and click on “Open Application Folder”. This will open the folder where XAMPP was installed. What is the most interesting for us is a the htdocs folder which is the root folder of our web server.
  3. Notice that there are already existing folders like the dashboard. Come back to XAMPP and click on the “Go to application” button. This will open the URL http://localhost/dashboard/ website in your web browser.

  4. You will see the XAMPP welcome page. Congratulations! If that works correctly that means that you have managed to setup your own webserver.
  5. If you look carefully, you will notice that our website address corresponds to a data structure in the htdocs folder which you've just seen. If you remember, we said that htdocs is our root folder which means that we are currently in one of the sub folders, that is –– dashboard.

    Note

    A web server, like a typical operating system, uses a folder structure to maintain your data.

  6. Let’s create a new folder and call it "wordpress". That will be the place where we will store our website data. Since you know that browser automatically open index files lets create the file index.html inside the folder and fill it with:
  7. <h1>Hello World</h1> 
      
  8. In order to see result open in your web browser at the address http://localhost/wordpress/
  9. As you see, it works fine. But this you could do even without a server. The main reason why we installed Apache on your laptop was to use PHP, so let’s test that. Rename your index.html file to index.php then paste the following content, and finally refresh the page.
  10. 
        <?php 
        echo "<h1>Hello PHP World</h1>"
        ?>
      

    For the end user, the result is pretty much the same. However, it was executed in an totally different way. This time, the code was compiled by a server and only the end result (final HTML) was sent to the browser. Although in our case, we didn’t gain anything by using PHP instead of HTML. However, as you proceed with the course, you will clearly see what the benefits of using PHP are.

  11. Since our Apache is ready, lets move to database setup.

Note

The extra content –– the paragraph below is optional, if you want to get more familiar with how the server works, please feel free to read it. Otherwise –– you can directly jump to the next lesson.

Let’s try to get into the parent folder of the dashboard. Remove from your address bar “dashboard/“ and press enter. Probably you think that you did something wrong because you are back again on the previous page (localhost/dasbhoard/). Don’t worry, that is because XAMPP creators placed a small script inside the index.php file in the htdocs folder. If you want you can have a look at the content of the file, but for now, we will skip the details of the script.

You may be wondering what the script inside index.php has to do the fact that you tried to open the “folder” without naming a file within it. Although you didn't specify the exact file location (localhost/index.php) the server automatically opened it. That is normal behavior so keep that in mind: –– whenever you specify a directory path to a web server it will look for an index.php, index.html or index.htm file and open it automatically.

In order to see our folder content, let’s get rid of the index.php file. You can either remove it or rename it to index.php.backup. Once you do that try to open localhost in your browser again.

Now you should see a list of the files inside our htdocs folder.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...