Creating a Joomla! test site on XAMPP

Installing a Joomla! test site on XAMPP
XAMPP running on a Windows 10 PC provides an excellent and safe development environment.  There are several stages involved. During the process it is obviously necessary to download the appropriate version of XAMPP and the latest version of Joomla!

Often one wishes to test an existing site, perhaps to test an upgrade before committing on the 'live' web site.  So an Appendix on using an Akeeba backup is attached.  This assumes you have set up and configured XAMPP as noted in the main part of the aricle.

As at December 2018, with the planned release of Joomla! 4 in 2019, you will need a version of XAMPP that includes either PHP 7.1 or PHP 7.2 or higher.  Always check the Joomla! minimum requirements.

In my experience it is also necessary to download and use the free Notepad++ text editor rather than attempt to struggle with the default Win10 Notepad which is, in a practical sense, useless for editing php and similar files.  You can get Notepad++ from https://notepad-plus-plus.org/
It would probably repay the effort if you practice a little to become familiar with Notepad++
Another useful free utility program is 7zip to unpack zip files, not essential but I would highly recommend it.  This is available at https://www.7-zip.org/

Also with XAMPP on a local PC then the Joomla! features 'Install from the Web' and 'Auto updating of Joomula!'  work OK but personally I tend to download the actual 'update', probably because I have several sites to update!! 

In this article XAMPP is installed on drive C.  If you have another disk drive, say D, then it may be set up on that drive instead.

Most of the effort is in configuring of XAMPP for Joomla!.  Once that is setup it is then very simple to create multiple test sites.

Index
    1. Download & Install XAMPP
    2. Access XAMPP Control Panel
    3. Configure XAMPP for Joomla!
      1. Create shortcut on Desktop
      2. Set Notepad++ as default Editor
      3. Setup php.ini file
      4. Accessing phpMyAdmin
      5. Setting XAMPP database localhost root password
        1. First Step: Halt MySQL
        2. Second Step: Edit config.inc.php
        3. Third Step: Restart MySQL
        4. Fourth Step: Changing the Password
        5. Fifth Step: Log Out of phpMyAdmin
        6. Sixth and final Step: Check Login and root password
    4. XAMPP Notes
      1. Updating XAMPP
    5. Creating a Database for a Joomla! site.
    6. Installing Joomla!
      1. Initial Configuration
      2. Provide Database Information
      3. Final Stage
      4. Post Installation
    7. Appendix Restore from Akeeba Backup
 
Download & Install XAMPP for Windows
There are various versions available.  As at December 2018 the versions for Windows 10 are shown below.
  1. 5.6.38 / PHP 5.6.38This is a very old version and support is ending
  2. 7.0.32 / PHP 7.0.32
  3. 7.1.22 / PHP 7.1.22
  4. 7.2.10 / PHP 7.2.10
  5. 7.3.0 / PHP 7.3.0
Usually one would select the latest version but before doing check with the Joomla requirements.  So download your chosen XAMMP to a suitable location, typically your regular Download location.

Then go to that location and right click on the downloaded file. You may be asked if you want to run this file and then be asked if you wish to allow changes to be made. Select Yes in both cases.
xampp instal01

A warning might come up about having Anti-Virus software running.

If you do decide to turn off your anti virus it might also be useful to temporarily disconnect from the web.  Actually I always leave the anti virus running and have not had a problem.
xampp instal02
Yet another warning that may occur is about User Account Control.  As we are not installing in C:\Program Files (x86) but in directory C:\xampp there is no conflict. xampp instal03
The actual install now begins!

So click on the Next> button.
xampp instal04
The first stage is the overall configuration of XAMPP.

It is advisable to select all of the options, which is the default, as they may be required at a later stage.

So again click on the Next> button
xampp instal05
Agree to the selected folder as shown, namely

C:\xampp

and again click on Next>


Note
if installing on a different drive then use the relevant drive letter.
xampp instal06
An ‘advert’ for Bitnami will appear.  This is sometimes useful to aid with the Joomla! Installation.  Personally I prefer to do the installation directly.

So I would untick the ‘Learn more about ...’ and click Next>

If you do leave it ticked it takes you to your browser but does not interfere with the installation.
xampp instal07
The next page is basically just the progress window whilst XAMPP in being installed.

As this takes a few minutes it might be a good idea to take some refreshment!
xampp instal08
Finally we get to completion.

Leave the "Do you want to start the Control Panel now?" ticked so that it will start the Control Panel initially.
xampp instal09 
Because it is a new installation you will be asked about a language choice.

After selecting the language then the XAMMP Control panel will appear, as shown to the right.  A much larger image is shown further down this article.

Back to Index
xampp instal10 config15
 
Access XAMPP Control Panel

Whilst the Control Panel is active then the XAMMP icon, xampp instal14, will appear in your task bar. It is convenient at this point to Right Click on it and select Pin to Task Bar.


Actually at this stage I exit the XAMPP Control Panel and go to the Windows ‘panel’ which lists all the Apps and scroll down to the XAMMP entry. Click on  XAMMP to show the sub menu.

Then Right Click on 'XAMMP Control Panel' which then shows another menu as illustrated on the far right.  This will add a regular Win10 sub pane so you can get to the XAMPP control panel easily on future occasions.  It will also allow you to run the control panel as an Administrator which more recent versions of XAMPP indicate as being beneficial.

See also the section later about creating a short cut on your desktop.

Back to Index
xampp instal11





xampp instal12
 


Configure XAMPP for Joomla!
This will need a better text editor, such as the free Notepad++, installed on the PC as the default editor, Notepad, has numerous limitations.

By default the root user on localhost has no password. But Joomla! Sites require one. This is discussed later.
config01
 
Create Shortcut on the Desk Top
It simplifies future use if you create a desktop icon to get to the XAMPP Control Panel.

Use file Explorer to navigate to C:/Windows/xampp and find program xampp-control.exe.  Right click on the name and select 'Send To', then choose 'Desktop (create shortcut)' as illustrated opposite.

config20
This creates a button like that shown opposite which we can use to start XAMPP and the relevant applications.  config20A
It is also useful to right click on the desktop icon and use the 'Pin to Taskbar' facility.

When you click on the icon then the XAMPP Control Panel will appear.

The two essential applications are Apache and MySQL.

config15
Notice that under the Actions column the words Start or Stop appear in the buttons.

If the button shows Stop then that application is running, if it shows Start it is stopped. To activate the relevant applications then click on the appropriate Start button.  After a short delay the Button text will change to Stop and a green background will appear in the Module column showing that the module is running as in the picture above.

Back to Index
 
Set Notepad++ as default Editor
By default XAMPP uses the Microsoft Notepad as its editor, this is not really suitable!  Notepad has numerous limitations. It is srongly suggested that an editor such as Notepad++ is used
Notepad++, which is obtainable from https://notepad-plus-plus.org/download , is installed as normal on Win10 just like any other application.  If you are new to NotePad++ I suggest you experiment on some trial text as it is much more powerful than Notepad.  One of the many very nice features is if you edit a file with say a php, css or html extension it recognises the key words and colours them approprately.

It is available in 32bit and 64bit versions.
In this example we will configure XAMPP to use the 64 bit Notepad++ as the default editor.
After installation Notepad++ will be in location C:/Program Files.  The 32 bit version would be in C:/Program Files(x86).

Get the XAMPP Control Panel on screen, by using your short cut or otherwise, and then click on the Config button at top right.
config01C
Change the Editor to Notepad++ by using the 'folders' button to select Notepad++.


The full reference for the 64 bit version is typically  C:\Program Files\Notepad++\notepad++.exe


On the same screen, tick Autostart for Apache, MySQL and if required FileZilla and the other applications you may need.

This means when you click on the XAMPP Control shortcut the applications will start up automatically.

Generally not a good idea to 'tick' the Start Control Panel Minimised option.

You must of course Save.

Back to Index
config01E
 
Setting up the php.ini file
Often the default php.ini file defaults need changing to suit Joomla! and to allow for say larger file size uploads.  To do this is quite simple as we just edit the php.ini configuration file which is usually at C:\xampp\php\php.ini.

To edit open php.ini in Notepad++.  With a fresh XAMPP install the settings output_buffering and display_errors need changing to meet Joomla! Recommendations.  As you are running on your own PC then there are other settings that are useful to change, specifically max_execution_time and max_input_time.  For jDownloads then I would recommend changing both post_max_size and upload_max_filesize to allow for larger file uploads.

The php.ini file is quite large with lots of comments so use the Search facility in Notepad++ to find them one at a time.  You need the line that is not a comment as illustrated opposite for output_buffering.
The suggested values are:
  • post_max_size = 100M
  • upload_max_filesize =102M
  • max_execution_time=200  (this parameter is not usually available to users on regular web servers)
  • >max_input_time=200  (this parameter is not usually available to users on regular web servers)
  • >output_buffering=Off  (xammp default is usually output_buffering=4096)
  • >display_errors=Off (xammp default is usually On)
config05C
After changing the values of the above parameters, restart Apache from the XAMPP control panel by clicking on the stop/start button on the Apache line to stop and then restart.  If the button shows Stop then it is running, if it shows Start it is stopped.

Back to Index
 
Accessing phpMyAdmin
Access will be needed to the phpMyAdmin utilty to create the database and create a user with a password.

There are several ways of doing this but perhaps the most convenient is to Click on the Admin button in the MySQL line on the XAMPP Control Panel.
Another simple way is to use a new tab in your Browser and execute localhost/phpmyadmin/
config04A
First we will check that we have direct access to phpMyAdmin so click on the Admin button on the MySQL line.
This will take you directly to the base page so then Click on User Accounts. This will open a new tab, or window, in your browser. config04C
At this stage we are just checking!!  So do NOT do anything like clicking on priveleges!! 

You can see that none of the accounts have a password set.  The next steps below  will modify the root localhost to have a password.
config05A
Now exit by closing the browser tab (or window). config05D

Back to Indexs
 
Setting XAMPP database localhost root user password
By default the root user on localhost has no password. But Joomla! Sites require one!
That is we need to set a password for the User root on the localhost.
The steps required to achieve this are given below.
 
First Step: Halt MySQL
We need to edit one of the XAMPP files (config.inc.php) so it is essential to ensure that MySQL is not running. 

Do this by accessing the XAMPP Control Panel and ensuring that the state of MySQL is showing Start as illustrated opposite.  If it is showing Stop then click on the button and after a short time it should change Start.
config06A
 
Second Step: Edit config.inc.php
The third step is to edit the file C:/xampp/phpmyadmin/config.inc.php using Notepad++
(Notepad does not support the 'newline' characters so it looks like one huge long string).
/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '';
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = true;
$cfg['Lang'] = '';
ONLY change the line $cfg['Servers'][$i]['auth_type'] = 'config';
to read $cfg['Servers'][$i]['auth_type'] = 'cookie';
Do not be tempted to change the other lines!!
Save and exit Notepad++.
 
Third Step: Restart MySQL
On the XAMPP Control Panel click on the button opposite MySQL so after a few moments it shows Stop
 
Fourth Step: Changing the Password
Use localhost/phpmyadmin/ in your browser which will take us directly to the phpMyAdmin utility where you should see a log in screen such as shown opposite.

Presently the log in name is root and there is no password so leave that field blank.
config37B

This will give the General Settings screen as shown opposite but note it now has a link to a Change password command. This was not available previously. config06


Clicking on the Change Password option brings up the form shown opposite where the new password may be entered.
config38
The change of password will be acknowledged with a message such as shown opposite.


Back to Index
config38
 
Fifth Step: Log Out of phpMyAdmin
The purpose here is to prove we can re-login.
On the left hand side of the screen there are various 'control' icons. One of these is the Log out button as shown opposite.
config35
So Log Out and then a log in screen will appear.

 
Sixth Step: Check login is OK and that User 'root localhost' has a password.
You can either use the login screen or delete that browser window and yet once more in your browser go to localhost/phpmyadmin/ and this will again bring up the log in screen.

Now you will need to give the new password in order to log in.
After logging in if you now select User Accounts on the menu bar you should see that user root on localhost now has a Yes in the Password Column.
Log out of phpMyAdmin by clicking on the logout button as shown in stage 5, close the browser window and we are finished.
And make sure you keep a copy of the password in a safe place.
NB If using say jDownloads then remember to change the upload directory path in jDownloads to say C:/xampp/htdocs/<location>/jdownloads and re-change on move to web site.

Back to Index
config10

 
XAMPP Notes
The Installation of XAMPP is now complete.  So now we can concentrate on making Joomla! or other websites for local use, especially for testing purposes.
In XAMPP if we wish to have a web site called say 'test', then the web site root is in directory C:/xampp/htdocs/test .  Another website, called say 'beta-test', would have a root at C:/xampp/htdocs/beta-test .

To access these from the browser the link would be http://localhost/test/ or http://localhost/beta-test as appropriate.  Usually with a modern browser the http:// part may be omitted.

If you have re-booted your computer and then try to access your XAMPP test site then you may get a message like "Unable to connect" or "Could not find site" or similar.  Just go to the XAMPP control panel and you should see Apache and MySQL starting up.

Back to Index

Updating XAMMP
From time to time it may be helpful to update XAMPP to say use a more recent version of PHP.
An article which gives a comprehensive view of the way to do this is
https://webhostingmedia.net/update-xampp-php-version-windows/

As well as a procedure for updating PHP, a method of installing a new version of XAMPP and then transferring your existing test site or sites to the new version is shown near the end of the article.  If you do choose the 'transfer' scheme then you will need to 'configure' the new XAMPP as noted for a first time installation above.  This is much less work and in my view a lot less 'risky'.  The following steps have been taken from the article.
  1. Run the installation and choose a different destination folder for it – if your old XAMPP version is installed to C:/xampp/ folder, install the new version to C:/newxampp/
  2. After successful installation transfer the C:/xampp/htdocs/ folder to C:/newxampp/htdocs/ – this will transfer all of your project files to the new installation.
  3. Also transfer the C:/xampp/mysql/data/ to C:/xampp/mysql/data/ – this will transfer all database information to the new installation.
  4. Open the new XAMPP Control Panel v3.xx – and start Apache and MySQL.
  5. Now check the php version http://localhost/phpinfo.php
 
Creating a Database for a Joomla! site

Creating a database for a Joomla! site is straight forward.

In this Example we will create a database called ‘jdx39’ and set a collation of utf8mb4_unicode_ci as that will support all characters in all languages.

We have already created a user ‘root’ on local host with a password so we will use that when installing Joomla!  We can use this database user for any site so there is no need to create multiple database users.
To create the database itself login again to PhpMyAdmin with user ‘root’ and the associated password.

Recall that in your browser use localhost/phpmyadmin to get the login page. After logging in you will see the main page. Then on the left hand side of the screen click on New.
database02A
This will bring up a screen such as that shown opposite, where the required name jdx39 has been entered and the collation has been selected from the pulldown as utf8mb4_unicode_ci which is a long, long way down the list – actually about second from the bottom.

After clicking on Create then the new database jdx39 will appear in the lefthand panel, so to access the database later you just need to click on its name in the lefthand panel.  As noted earlier using the collation utf8mb4_unicode_ci allows any language and is also efficient in space as it will only use one, two, three or four bytes as required. That is you now have a database that will support all languages, special characters and so on, basically it is ‘future proof’.
database03A

As a check select the new database by clicking on its name, jdx39 in this example, in the left hand panel and then on Privileges on the main panel.

As shown opposite user ‘root’ on host ‘localhost’ has all privileges for database ‘jdx39’.


Back to Index
Back to Appendix
database04B
 
Install Joomla!
The first step is to create the relevant directory, which in this example will be jd39.

Create a new directory called jd39 in C:/xampp/htdocs with Windows Explorer.
Joomla! Is available at https://www.joomla.org/latest. It is packed in three type of compression.  As at December 2018 the available packing types were :
  1. Joomla! 3.9.1 Full Package (.tar.bz2)
  2. Joomla! 3.9.1 Full Package (.tar.gz)
  3. Joomla! 3.9.1 Full Package (.zip)
With XAMMP I tend to physically download any package, including Joomla! itself, into a convenient directory such as Joomla-downloads/joomla/ .  Subsequently if adding an extension to Joomla! such as jDownloads for example then it would be stored in Joomla-downloads/jDownloads/ . Usually the "Install from Web" option will also work.

For Windows 10 the best one to download is the zip version, personally I always use the zip version whenever downloading.
The next step is to unpack the download into the target directory xampp/htdocs/jd39.  Windows 10 has an inbuilt unpacking tool or you can use something like the free 7Zip utility available from https://www.7-zip.org/ which is much quicker and more flexible!
Right clicking on the downloaded zip file will show the options including Extract All and, if installed, 7Zip. joomla install00
If you click on Extract All then, by using the browse button,you will be able to specify where the extracted files are to be placed, in this example C:\xampp\htdocs\jd39.


When the extraction is completed then we will be able to start the installation proper.
joomla install0AA
To start the installation process go to your browser and enter localhost/jd39/index.php.
 


 
Initial Configuration
This will then show the first configuration page as illustrated opposite. Fill in the details as indicated and click on one of the Next buttons. joomla install01A
 


 
Provide Joomla with the Database Information
We now have to let Joomla! know the details of which database and which database user are to be used.

Note that the database user is NOT the same as the Joomla Super User. One may however choose to use names that happen to be identical but it is preferable, and slightly more secure, if different names are used.

Fill in all of the fields. Joomla! will fill in a few fields but you need to check they are ok!!
joomla install02A
 


 
Final Stage
The final stage of setting up Joomla! is in three sections.

The first section, as shown opposite, allows selecting Sample Data and whether you want Joomla! to email the Configuration Details to you.

Note it is my personal preference to include the password in the email details but this is not the general recommendation.
joomla install03
The second section gives an overview of the setup so you can check and if necessary go back to the earlier stages. joomla install04
The final section is the results of checks carried out by Joomla! in testing PHP compatibility.

It may be necessary to adjust some of the PHP settings. You can do this as described earlier in Setting up the php.ini file.

If you do change some php.ini settings then you can click on the Previous button to take you back to the database setup, then clicking Next on that page will re do the checks.

When all is well click on Install
joomla install05
 


Post Installation
The post installation stage allows adding extra languages.

And the essential step of removing the Installation folder
joomla install06
After removing the Installation folder the next screen shown is like the one opposite confirming the removal.Click on the Administrator button to start Joomla!

To start administration subsequently enter into your browser
localhost/jd39/administrator
and for the front end enter
localhost/jd39


Back to Index
joomla install07
 

7. Appendix - Using an Akeeba Backup
Restoring an site onto XAMPP from an Akeeba backup is straight forward but there are a couple of aspects to check.  It is assumed that you have already installed Akeeba.
There are some preliminary steps:
  1. Create a new database eg jdtestdb - see Creating a Database for details, noting we can use the same User and Password.
  2. Create a new directory with the required name for the test site in xampp/htdocs/  eg jd-test
  3. Download the kickstart utility from https://www.akeebabackup.com/download.html and extract kickstart.php from the zip file.
  4. Rename kickstart.php to say jdtest-restore.php  (kickstart checks its name is not kickstart when you run it!!)
  5. copy renamed kickstart into the new directory eg copy jdtest-restore.php to xampp/htdocs/ jd-test
  6. Copy the Akeeba backup itself, which is usually a jpa file, to the new directory.  Also if it is a large backup the there might also be files with extensions .j01, j02 and so on which should also be copied to the new dircectory.
  7. Open your Browser and go to localhost/<new dir>/jdtest-restore.php assuming you renamed kickstart.php as jdtest-restore.php.

Start Restoration and File Extraction
The Backup now starts, initially with a welcome page and information on where to get help.
The first two steps are illustrated below.  As there is only one backup it it automatically selected.  Similarly the extraction method is the regular method.
RST01A
RST02
Section 3, which is the Fine Tune section, is normally left alone exceppt for the 'Rename Server configuration files' which is ticked to hide some key files during the restoration. RST03A

The next step starts the file extraction process and a progress bar is shown after starting the extraction.
RST04
The time taken for the extraction obviously depends on the siz of the website being restored.
If an error occurs then consult the Akeeba Kickstart Documentation for the cause and solution.
In due course the next stage  of running the installer is reached.
RST05 RST06

Installer
After starting the Installer, which runs in a new tab or window, it checks that the php settings are ok.

As these were set up when doing the initial XAMPP installation no incompatibility is expected.

There will also be other  'panels' showing information from the backup and from the site.  These need to be looked at to ensure  the information is consistent with what is expected.
RST07A RST07B


Database Restoration
The next stage is the Database Restoration.  Again there are several panels that need checking.

The first  step here is to fill in the details of the new database created in XAMPP.
Setting he Database Type as MYSQLi and the Host Name as localhost are the usual settings.

The User Name, the Password and the Database Name need to be filled in as appropriate. 

The required prefix is usually already entered and is probably best left.

If you are unsure there is a very useful button RST08C that shows additional help.
RST08A RST08B


After initiating the restoration then a bar shows the installation progress.  Finally, if all is well, there will be a completion message with a button to take the next step.

If there is a problem then consult the Akeeba Kickstart documentation. (opens in new tab/window)
next step
 



Fill in Site Parameters

The next stage is to fill in site parameters specific to the new XAMPP based website.
The site parameters for the new site will differ in some aspects from the original site.

For example XAMPP detects the new site is running in a Windows environment and advises appropriately.

The site name probably need changing to minimise confusion, and similarly the email items may well be better changed so as to identify which site, the original or the test site, sent an email.

A very important setup item is to leave both the Cookie Path and the Cookie Doman blank.  If you leave or set the original contents you will not be able to login!

If the log and tmp paths are not the normal Joomla! settings such as
 /home/<site-specific>/public_html/logs or tmp respectively, then it would be best to tick the override box.

RST09A

Another significant area that needs attention are the special files such as php.ini, user.ini and the .htaccess files.  It is most likely that the setup of those files are very specifice to the original site and most likely inappropriate for the new test site.


So it is advisable to remove the user,ini and php.ini files as they are used to customise the PHP setup which has been dealt with earlier for XAMPP.


Similarly it is recommended use the default Joomla .htaccess file so tick the relevant box as indicated opposite.  You could also choose to delete the .htaccess and .htpasswd files.
RST09B

There is a directories fine tuning panel that allows specifying the Site root and the log and temporary directory locations as illustrated opposite. 

Obviously use your directory in place of jd-test.

Another Panel allows setting the super user details, as illustrated on the far right.  Selecting one of the existing super users then allows changing the email and password, again to minimise confusion between the two sites.

RST09C RST09D

Clicking on the Continue button brings up the instruction to close the window as shown opposite.

After closing the window/tab then the Clean Up Button is shown as illustrated on the far right.
RST10A RST10B

So after the Cleanup, all is nearly done and one can check both the front end and backend are accessible. 
But there is one more item related to jDownloads.
RST10C
If you go to the jDownloads Control Panel you will see a notice like the one opposite.
This is because the path will refer to the original location. 

So go to Options - Path Settings - "upload directory path" - and change the existing contents to
C://xampp//htdocs//jd-test//jdownloads
where jd-test is replaced by your directory, and Save.  Note the use of double //
RST10D
We are done! 
Colin Mercer Dec 2018, revised April 2019

Print Email

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.