1.2 Joomla Site Set Up

In our last article, we used a Linux computer (or Linux computer on a stick) to set up a website server called LAMP. This Linux server could be located either at a web hosting company (which we will use once our business website is ready to go live) or it can be located inside of our own Linux computer (which we will use while we are building our business website. In this article, we cover the next two steps in setting up your business website. These are installing and configuring our Joomla Foundation. We will use Joomla as a secure way to control our business database.

Installing Joomla to our local LAMP server is slightly different than installing Joomla to a real web hosting account but the end result in terms of the file structure is the same. We will first review how to install Joomla to our local LAMP server and then review how to install Joomla to a real hosting account using a common web hosting tool called Cpanel. Once we have installed Joomla, we will review some if its features and benefits over other business website Content Management Systems such as Wordpress.

Local Installation of Joomla using LAMP

Now that we have set up our LAMPP server, we are ready to install the latest version of Joomla so that we can set up a test Joomla website before deploying our real business website.

1 Download the latest stable version of Joomla

We will eventually install the Joomla 4 beta version to compare it to Joomla 3.9.x. But for now, we will stick with the stable version. Go to this page to download the latest stable version of Joomla.

https://downloads.joomla.org/

As of January 2021, the latest stable version is Joomla 3.9.24. Click the green download button. This will place the zipped package in your Downloads folder.

Show File and Folder Permissions with your File Manager

One of the challenges confronting new website developers is learning how Linux handles permissions on opening and changing files and folders. Beginners are often told to open their terminal and enter an endless series of abstract commands to change file and folder permissions without having any real understanding of what permissions are and what they are used for. We will instead use graphical tools which will hopefully give you a better understanding of how to protect the security of your website files and folders.

The first graphic tool we will use is the Linux Mint File Manager. Here is what it looks like when you first open it.

a1

 Click on Edit, then Preferences then List Columns. Check the box called Octal Permissions and, while selected, click Move Up to move it up until it is second on the list.

a2

 Then close the File Manager Preferences screen. Then open your Downloads folder.

a3

 The Permissions of this zipped folder are now shown as the last three digits in the Permissions column. The first digit on the right is the “Public” group permissions. The middle digit is the “Group” permissions and the left digit is the “Owner” of the file permissions.

The number 6 means that “Read and Write” permissions. Write means being able to change the file or folder. The number 4 means “Read Only” – which means one can only read the file – but not change it.

The second tool we will use to understand Linux Permissions is the Properties Permissions tab. Right click on the Joomla folder and click on Properties. Then click on the Permissions tab.

a4

 The owner of this file is David and the group owner is the group called David. This means that anyone in the David group can change this zipped file.

2 Copy the Zipped Folder to your Server HTML folder

 Copy and paste the downloaded and zipped folder into your var/www/html folder. (You will first need to right click on the HTML folder and click Open as Root and enter your password before you can paste it). Then right click on and extract the folder. Then right click on the extracted folder and click Properties, Permissions to view its Permissions:

a5

 The zipped folder is still owned by David and is in the Group called David. However, the extracted folder is now owned by Root and is in a group called Root. This can present a problem later on because only the root user can change files and folders inside of this folder. With Linux Mint, the files and folders in the HTML folder should be set to be owned by a user called www-data and be in a group called www-data. While logged in as Root, change the Owner and the Group to www-data. Also change the access for the group to Create and Delete files.

a6

 Click Apply Permissions to Enclosed files. This will allow anyone in the www-data group to change files and folders even if they are not logged in as the root user. Close the file manager.

Add Yourself to the www-data group.

The third area we will look at to understand Linux file and folder permissions is Linux Users and Groups. Go to the Mint Menu and click on Administration, Users and Groups (it is at the bottom of the list). Type in your root password.

a7

 There is only one user. Click on this user to show more information.

a8

 Note that this user is not a member of the root group. But he is a member of the sudo group which gives him access to the root group by typing in the root password. To add this user to another group, click on the Groups. Scroll to the bottom of the list and check www-data.

a9

 Then click OK. Now when you look at groups, you will see that this user is now a member of the group called www-data. Close the Users and Groups screen. Then reopen the file manager and go back to your HTML folder. Then right click on the workspace and click Open as Root and enter your root password. Then rename the extracted folder joomla3.9.24.

01

3 Open the Joomla Installer Screen

Open Firefox and type in localhost/joomla3.9.24

03

This brings up the Joomla 3 installation screen. For Site name, called it Joomla 3.9.24 Test Site. For Description, type in “This is a test website.” Enter your email address and a short simple username and password. We will use these to log into Joomla. Then click Next.

04

Leave database type and host name at the default settings. For username, because this is only a test, type in root. For the password, type in the short MySql password we created in the last exercise. For database name, type in joomla_db. Leave the prefix set at its default value which is a random set of letters and in our case is d8wag_.

Then click Next. Decide on the Type of Sample Data you want. On a real site, we do not want any sample data. However, because this is a test site and we are trying to learn about Joomla, we will install one of the sample data options. The Blog option will make your Joomla site look like a WordPress website. The Brochure English site will look like a company website with a contact us and about us page. The Default English sample data has only one article on the Home page. The Learn Joomla option is the most comprehensive as it has lots of articles and displays lots of Joomla features. We will choose the Learn Joomla option. Then scroll down the screen to read everything and, assuming there are no major errors, click Install.

05

There is an orange button called Remove Installation folder. But it does not work because we are in a test environment. We cannot proceed until this folder is deleted. So open your Linux file manager, go to var/www/html and open the Joomla folder. Find and delete the Installation folder.

4 Log into the Joomla Back End
To reach the Administrator Login page, copy paste this into your Firefox browser: localhost/joomla3.9.24/administrator

06

Log in with your Joomla username and password you just created.

07

Congratulations. You have installed Joomla. In a moment, we will look at the Joomla Administrator Panel.

Configure your Joomla business website foundation

Click Never for basic statistics. Then click Read Messages and hide the messages. Then click the Joomla logo in the upper left corner to return to the Control Panel. After deleting all of the Welcome Messages, your control panel will look like this.

12

Simplify the Control Panel
Even after hiding the Messages, the Control Panel is still very complex. Click on Extensions, Modules in the top menu to go to the Modules screen. Then in the upper left corner, change the filter from Site to Administrator. This brings up a list of the Administrator modules. Check and Unpublish: Latest Actions, Logged in Users, Popular Articles, Recently Added Articles and Joomla version.

13

Then change the module filter back to Site. Then click on Logo in the upper left corner of the top menu. 

14

This simpler screen will allow us to focus on creating compelling content rather than reading boring data.

Visit the Joomla Front End
All Joomla websites come with a front end which is seen by the public and a back end that is seen only by administrators. To see the front end of our website, click on the website name in the upper right corner of our control panel. Here is the front end of our new Joomla website with sample data:

15

There are 4 articles featured on the Home page. The first article is in a single column layout and the other three are in a 3 column layout. In the side menu, there is a module called About Joomla. This module displays the Menu Items in the About Joomla menu.

Add a second Joomla website without sample data
While we added a lot of sample data to our first Joomla installation, we did this mainly to better understand how Joomla works. In a real website, we do not want to install any sample data. We will therefore create another Joomla website in our www/html folder. You should already have the zipped Joomla 3.9.24 folder in your www/html folder. To make a second Joomla website, right click on the screen and click Open as Root. Then enter your password. Then right click on this zipped folder and click Extract. Then rename the extracted folder something simple like Joomla2.

Then right click on the Joomla2 folder and click Properties. Then click Permissions and change the owner and group from Root to www-data. Also change the Group Access from Access files to Create and Delete files. Then click Apply Permissions to Enclosed Files.

Then open Firefox web browser and type in localhost/Joomla2. Run through the two install screens. Then on the third screen, leave install Sample Data set for None and click Install. Then with your file manager, open the Joomla 2 folder and delete the installation folder. Then go to: http://localhost/Joomla2/administrator/>

and log in using your username and password. To see the front end of your website, click on the link in the upper right corner.

x01

 

Initial Configuration Overview
There are 3 areas of the Joomla back end we will want to change right after we install our real Joomla website. We will:

#1 Change the global configurations
#2 Change the administrator in the User Manager
#3 Unpublish the Log in form module

 Step 1: Change Global Configuration Settings

Click on Site, Global Configurations in the Control Panel Main Menu above.  In the SITE page, we want to help Search Engines find our new website. Change the Meta Description to one sentence which best describes our new website: 

Create Your Own Online Store is a demonstration website for our course on building an Ecommerce website with Joomla and Phoca Cart.

For key words, we will add: Joomla, Phoca, Cart, Ecommerce, tutorial, beginners

Your site meta description should be no more than 150 characters long – or about 20 words long. For key words, do not add more than 20 key words, each of which must be separated by a comma. Then click System Tab. Change Session Lifetime to 360 minutes. Then click SAVE and Close.

Step 2: Change Your Administrator Name in the User Manager

For security reasons, we should edit the admin name from Super User to your name. Double click on Super User to bring up the Edit screen. Or select Super User and click on Edit. For security reasons, you should also change your password to something different from what you used to install your website.

 Step 3: Unpublish the Log in form module

Click on Extensions, Modules and select the log in form. Then click Unpublish. Then change Site, to Administrator. Check the first seven boxes and click Unpublish. Then switch back to Site. Then click Save and Close. We now have two versions of Joomla – one with sample data that we can use to learn from – and other without sample data that we can use to build on. We will add our extensions to our simple Joomla2 site.

Install the JCE Editor

How to Install Joomla Extensions in Local Host
Installing extensions with a website on localhost is slightly different from the normal Joomla automatic installation process.

The Normal Way to Install a Joomla Extension
One of the first extensions we install to any Joomla website after installing our security tools, is the JCE Editor. The JCE Editor makes it easier to load images and edit links on your website. Normally, when we install a component such as the JCE Editor, we go to the Joomla extension directory and download the component to our downloads folder. Here is the link to the Joomla Extension Directory:

http://extensions.joomla.org/extensions/edition/editors/88

Click on Download. Then click on Editors. Then click on the latest version. Click on the Download for the Zipped file. Then transfer the zipped folder to our website extensions folder. Then open the Joomla Control Panel and click Extensions, Manage, Install:

x02

Then under the Upload Package File, click Browse for file. Then navigate to our website extensions folder and select the extension to upload it to our website. However, when we try to install an extension from our website in localhost, we get the following error:

Warning: Joomla\CMS\Filesystem\Folder::create: Could not create folder.Path: /var/www/html/Joomla/components/com_jce
Component Install: Failed to create folder: /var/www/html/Joomla/components/com_jce.
Package Install: There was an error installing an extension: com_jce.zip

The warning could also be:

Warning: Failed to move file: /tmp/phpoPQUES to /var/www/html/Joomla2/tmp/pkg_jce_291.zip
Error: Unable to detect manifest file.

Either way, the fact that we can not install extensions in a simple manner with a website in localhost is a good thing – because it gives a chance to learn about Linux File and Folder Ownership.

The Importance of File and Folder Ownership in Linux
I have previously warned that the Windows operating system is not secure because the web browser was placed inside of the operating system – creating an easy open back door into Windows. Linux keeps the web browser outside of the operating system so there is no easy open back door to Linux. But there is another security difference between Windows and Linux. It is the insecure way Windows handles file and folder permissions. Windows treats nearly all files and folders as executable. Linux does the opposite. By default, all files and folders are non-executable. It therefore takes more work to access files and folders in Linux than in Windows.

Why Linux Stopped Us from Installing an Extension to Joomla
The reason the folder com_jce could not be installed was because there is a folder ownership problem somewhere along the installation path. Let’s open our file manager and go to our var/www/html folder and right click and Open as Root. To see how our Joomla folder permissions are currently set up, right click on your Joomla2 folder and click Properties, Permissions.

x03

Recall that before we went through the Joomla Installation screens, we changed permissions for this folder so that this folder was owned by www-datan and in the group www-data and we clicked Apply Permissions to Enclosed Files. To make it easier to see who the owner is of any given file or folder, while viewing our files and folders as root, in the file manager top menu, click Edit Preferences, List Columns. Then check Octal Permissions and move them up just below Size. Then check Owner and move it up just below Octal Permissions:

x04

Then close the File Manager Preferences screen and open the Joomla folder.

x05

Here is our problem. Even though we changed the folder owner permissions to www-data and clicked Apply Permissions to Enclosed Files, the interior folders are still owned by Root. We could click on each of these folders one by one and change the owner to www-data but what we really want is to change the permissions of all of the interior folders and files from root to www-data.Sadly, while we can change some permissions recursively from the Graphical User Interface, we can not change ownership from the GUI. We will therefore need to use the terminal to change all of these ownership settings of our internal website folders from root to www-data.

How to change the owner of all interior folders and files from root to www-data

Access to Linux files and folders is controlled by file ownership and file permissions. Ownership defines who can make changes and permissions define what can be done. Each file in Linux has 3 types of owners. These are user, group, and others.

There are also three levels of permissions. These are read, write and execute.

You can change ownership of a file or folder with the chown command. chown is short for change ownership, Chown is a command used to change the user or group ownership of a file or folder. The complete command is in the form

sudo chown FLAGS USER:GROUP files-and-or-folders

where sudo gives you root permissions, chown is the change owner command, FLAGS are used to make the command apply to internal files and folders, USER:GROUP is the new user and group you want to change ownership to and files-folders is the files or folders you are changing the ownership on.

There are two primary flags we will use. The first, which must come immediately after the chown command is -R. This makes the command recursive meaning that it will also change ownership of all internal files and folders.

WARNING: Never use -R to change ownership or permissions on system files as it can crash your entire computer. Only use this command on folders which are inside of the var/www/html folder.

The second flag we will use is the lower case letter v which means verbose. By default, the command chown does not display any output. Adding the v flag will force the terminal to display information about what is being done. Here is an example of the change ownership command being used recursively:

sudo chown -Rv www-data:www-data /var/www/html/Joomla2

The -R flag means recursively and the v flag means show the changes that were made.

After copy pasting this command into the terminal, press Enter. Then enter your password. You will then see a very long list of ownership changes take place. After is done, you will see the following:

x08

All of your website folders are now owned by www-data and are in the group www-data. Because we are a member of this group, we now have access to these folders and can make changes to them.

After this, you can edit all files and folders under the Joomla2 folder and change the permissions of any file or folder by right clicking on it and clicking Properties/Permissions.

Now run the Joomla control panel install again.

x09

Use Caution with changing Permissions Recursively
It is commonly recommended in many tutorials on the Internet to simply change the Permissions on the Joolma root folder to 777 – giving anyone permission to read, write and execute all files and folders whether they are a member of the www-data group or not. This is a major security risk – even when only building a website on your localhost server. You should only resort to the 777 Permissions trick if all other options have failed. And never use 777 on a publicly facing website.

In addition, while it is generally OK to have ownership of all internal folders and files in the same user and group, internal files and folders should typically have different permissions. For example, image files should not be executable. We will therefore solve our extensions installation problem by changing the ownership of folders and files rather than by changing their permissions. If you do want or need to change the permissions of a particular file or folder, the command is:

sudo chmod [permission] [file_or_folder_name]

The command chmod means change the mode of access. Mode of Access is a term Linux used to use for Permissions. This is why you change permissions with the command chmod.

You also want to set permissions differently for files vs folders.

Install Large Extensions with Install from Directory
Sadly, the maximum upload size we can use with Upload Package File is 2.00 MB. We can change this setting with our htaccess file. But to keep things simple, we will review a different way to install Joomla extensions that are greater than 2 MB. Go to Extensions, Manage, Install and click on Install from Folder.

x10

Note that the Joomla installer will look in a folder called var/www/html/Joomla2/temp.

Therefore, to install an extension with this method, we first need to copy and paste the extension into this folder. We will install the Phoca Cart extension which is over 3 MB using this method. Go to https://www.phoca.cz/download/category/100-phoca-cart-component

Then download the latest version of Phoca Cart. Then transfer the folder from your Downloads folder to your Website extensions folder. Then extract the folder. Then copy the extracted folder to place it in your clipboard. Then navigate to your Joomla2 temp folder. Right click and click Open as Root and enter your password. Then paste the Phoca Cart folder into the temp folder.

x11

Note that extensions should only be added one at a time using this manual installation method. There is a bit of a problem here. Notice that the owner of this Phoca Cart folder is david and not www-data. Also if you click on this folder to open it, you will see that all the folders inside are also owned by David.

If we tried to install Phoca Cart without changing the ownership, we would eventually get some errors. We did not need to change the owner of extensions installed with the Joomla backend automatic install method. But we do need to change the owner of large extensions before we use this manual installer. So open a terminal and copy paste the following command:

sudo chown -Rv www-data:www-data /var/www/html/Joomla2/tmp/com_phocacart_v3.5.5

Enter your password. Then when done, close the terminal and verify with your file manager that the owner of this folder in your website is now www-data.

Now install this folder with the manual method.

x14

 

Download and Install Phoca Cart Modules and Sample Data

Go to the Phoca Cart Downloads page:

https://www.phoca.cz/download/category/100-phoca-cart-component

Scroll down the page and download Phoca Cart Demo Data and Phoca Cart All modules package. Then transfer these zipped folders from your Downloads folder to your website Extensions folder. Then go to localhost/Joomla2/administrator to log into your blank Joomla website control panel and use the normal Joomla installer to install these two zipped folders.

Here is the success screen after installing the Sample data.

b1

Here is the success screen after installing the Modules package.

b2

After installing both the Sample Data and modules, we need to uninstall the Phoca Install component. Click on Extensions, Manage, Manage. Scroll down to Phoca Install, check the box and click Uninstall.

To create a menu item to view the Sample Data, click Menus, Main Menu, New Menu Item. Then for Menu Item Type, click Select and click Phoca Cart, Categories View. Name it Visit Our Shop. Then click Save and Close.

Then click Add New Menu Item again. For Menu Item Type, click Phoca Cart Check Out Layout. Then Name it View Shopping Cart. Then Save and Close and view the site front end.

b3

Click the Menu Item Visit Our Shop.

b4

Then click View Category

b5

Then click View Product.

b6

Then click Add to Cart. Then click View Shopping Cart.

b7

Congratulations! You now have an online store. In the next two chapters, we will learn how to use and customize this store.

 

What’s Next?

We are now ready to create our site structure which includes our categories and menu items. These are the subjects of Joomla Part 3… Site Structure.