logo wide 2000x350

2 Set Up

This category includes all four articles in the Set Up chapter. Chapter Two includes the following four sections:

2.1 How to Easily Install Joomla to your Website
2.2 Initial Configuration of your Joomla Website
2.3 How to Research Joomla Extensions
2.4 Install and Configure the JCE Editor

In Section 2.1, we will show you how to install Joomla on your website using an automatic installation tool.

In Section 2.2, we will provide a tour of the Joomla Administrator Control Panel and make several important changes to the initial configuration of our Joomla website.

In Section 2.3, we will review how to conduct your research on Joomla extensions. We will then describe 20 of the best extensions to add to your website. We will add most of these during the remaining chapters of our book.

In Section 2.4, we will install and set up the most important of these extensions, the JCE Editor.

00r
The JCE Editor is the tool we will use to insert content and images into our web pages. The default text editors that come with Joomla lack the ability to strip adverse code when copying and pasting a new article from a WORD document to your website. Sadly, most of the free editors on the Joomla Extension Directory do too good a job of stripping code. They not only remove the bad code, they also remove all the font type, font size and font color formatting you used to create your Word document. Many editors which worked for older versions of Joomla do not work as well on Joomla 3.5. There is however one editor that strips the bad code while leaving the good formatting. This is called the JCE Editor. This free editor also permits setting different editors for different groups of users – something we will discuss in a future book. To get the latest version of the JCE editor, log into your Joomla Control Panel and click on Extensions, Extension Manager, Install from Web.

01

Then click on JCE.

Click Install.

02

Click Install again. Congratulations, you now have the JCE Editor installed on your website! But there are still some steps you need to take to insure the Editor works right.

Set JCE as your Default Editor

To make sure JCE is set for the default editor, you will need to change the settings in both the User Manager and under Global Configurations. First, go to Users, then User Manager. Then click on your name to open your profile. In the Basic settings tab, set the JCE Editor as your new default editor.

04

Then SAVE and CLOSE this screen.

Next go to the Site, Global Configurations, and set the Global Default Editor as JCE:

05

Then click SAVE AND CLOSE.

Customize Options on the JCE Editor
There are many settings which can simplify the JCE Editor and make it more useful for creating articles. You can configure the JCE Editor by going to Components, then JCE Administration, then Control Panel


06

The Control Panel has four tabs. But we will only adjust one: Editor Profiles.

Editor Profiles Tab

Clicking on the Editor Profiles Tab shows that there are three editor profiles included by default with the JCE editor. Only one, called Default is active:

07

This brings up the Edit screen for the Default Editor.

08

JCE allows you to have different editors for different groups and for different areas on your website. This is useful if folks will be posting articles and comments to the front end of your website and you would like to give them a simpler editor to use. Having a simpler editor is important because the default editor has a lot of buttons which may confuse your readers. To change the settings on the Default editor, select it and click on Edit to bring up the Edit Profile Screen for the Default Profile. There are four tabs in the Edit Profile screen: Setup, Features, Editor Parameters and Plugin Parameters. We will not make any changes to the SETUP tab. Click on the Features tab. Then scroll Down to the section called Current Editor Layout:

09

The JCE Editor Default Settings comes with quite a few buttons. Many of these tend to confuse people. Thankfully, you can remove these buttons from the Editor making it easier to find the buttons you actually will need. To remove buttons, simply drag them from the Current Layout down to the Available Buttons.

Which buttons should you remove?

Basically, you should remove any button which you do not know how to use or do not think you will need. If you hover over a button, a pop up screen will tell you what the button does. Alternately, you can just remove the same ones I have removed above using the icons for the three rows of retained buttons and the four rows of removed buttons. When you have the Editor Functions you want, click on SAVE. Then click on the Editor Parameters Top Tab:

10

Click Typography and scroll down to font styles. Add font sizes to the Editor Profiles. 6pt, 10pt, 12pt, 14pt, 16pt, 18pt, 20pt, 22pt, 24pt, 28pt, 32pt, 36pt,

Then click SAVE. Then click on Image Manager and set alignment for Center.
Then click Link and set Targer for Open in New Window.

Then click on Plugin Parameters, Media Support. For Allow I Frames click YES. Then click SAVE and Close. When you have made all of the changes you want to the JCE Editor, click on SAVE and CLOSE.

There are many other benefits of using the JCE editor which we will describe throughout this book and course. In particular, the JCE Editor is excellent for inserting and formatting images. Using the Joomla image button to insert images requires navigating through folders every time we add an image – and there are no setting options for formatting the image as we add it. We will therefore use the JCE editor Image manager. This will allow us to quickly select, format and insert images into our articles.

11

Click on the Blue Picture icon which brings up the following JCE Image Manager screen. Clicking on the JCE blue image button to select your images is faster because you do not have to navigate through all of the folders like you do if you just click on the Joomla images button at the bottom of the workspace.

Relative or Absolute URLS?

One problem of the JCE Editor is that it has a Code Checker which likes to replace absolute URLs with relative URLs. Since all images are URL links, this means that for all images, if you make a link
(http://www.example.com/images/stories)

JCE will replace it with relative URL (../images/stories). That is generally no problem – unless the article you are writing is for a mass email newsletter. Relative URLs are not allowed for email newsletters. We want to change this to No. Go to JCE Editor Profiles, Default, Editor Parameters, Setup and set Relative URLs to No. Then click Save. The sole advantage of using relative URLs is that we might not have to change links if we move an article from one website to another. But there are other problems created by moving articles from a website. So there is really no benefit to relative URLs. The JCE image manager now inserts full urls for images

There are many web functions, such as newsletters, that require full URLs rather than relative URLs. So we will use the JCE Editor set for absolute or full URLs right from the start of our web building when inserting images. The JCE Editor also has an easy tool for inserting links into articles and many other useful functions which we will review as we build our website. Now that we have installed a better text editor, we should take several steps to protect our new website from hackers. This is the subject of our next chapter.
Extensions are additional tools for building Joomla websites. There are over 7,000 add-on extensions in the Joomla Extension directory. About half of these options are free or have two versions, a basic non-commercial version with more features in the commercial version. In this section, you will learn how to evaluate extensions in the Joomla Extension directory.

Let's begin by going to the home page of the Joomla Extension Directory https://extensions.joomla.org/

01

Below the search box is a section called Browse Categories:

02

Pick a category you are interested in learning more about. Then click on that link. Below we will research Download Managers to determine which we should add to our website. Click on Directories & Documentation. Then click on Downloads.

Researching Download Managers
Download Managers allow you to offer virtual products such as PDF tutorials to your readers. Go to the category called Directory and Documentation and select Downloads. Joomla offers about 37 different Download Managers. http://extensions.joomla.org/category/directory-a-documentation/downloads?&start=0


Which Download Manager should we choose?
Component, Module or Plugin?
Because we want to track the number of times each file is downloaded, we need a table of downloads in the backend of our website. This means we need a component – which eliminates any extensions which are merely plugins (putting files in documents) or modules (displaying files in a module or box). To determine if a File downloader is a component, look for a big green C when hovering over the extension box. Below is more information on the difference between Plugins, Modules and Components.


Types of Joomla Extensions
There are three main types of Joomla extensions


03

Plug Ins are reached and configured via the Plug In Manager. These are very small bits of code typically inserted into articles. They are indicated by a purple P next to the extension name in the Joomla Extension Directory.

04

Modules are larger programs controlling Joomla boxes or modules on your website. They are indicated with a Red M next to the Extension name in the Joomla Extension Directory.

05

Components are often very large programs which often include plugins and modules. They may in fact be sub-directories of Joomla adding several pages of options and parameters. These are indicated by a green C in the Joomla Extension Directory. After uploading a new component, all components are reached from the Top Menu Components Icon.

The final type of extension is a Combination of the Components, Modules and Plugins typically called Packages. These are Components which may also come with associated Modules and/or Plug Ins. They will have a combination of icons next to their name. It may require more than one download to make these work. While templates are also Extensions, templates are not posted in the Extension Directory.

Seven Factors in Selecting Extensions
There are many websites which rate Joomla Extensions. However, because new extensions are released all the time, it is a wise practice to go directly to the Joomla Extension Directory and read about all of the available options. Some of the more important criteria to look for include:


One: Written for the latest version of Joomla
While some extensions written for older versions of Joomla might work, the best choice is to look for extensions that have been specifically tested for Joomla 3 as indicated by a yellow box in the Extension Summary


Two: Number of Reviews and Review Ratings
The extensions with the highest ratings and most reviews are listed first. These are usually, but not always, your best choice. It is important to read the actual reviews which are posted just below the extensions in their respective pages.


Three: Free or Commercial?
About half the extensions are free while the other half require a payment to download. Free options are often better than commercial options. Because the whole point of Joomla is to offer a free open source web building tool, all of the extensions we recommend below are free. After clicking on the Free filter in the search box, there are 20 options. Here are the top six Download Extensions:


06

Four: Highly Rated, Popular and Editors Pick
Generally, the highest rated extensions are on the first page meaning they are among the top twenty extensions. It is worthwhile to look over all options however as occasionally there is a new extension near the bottom of the list which is better than anything else on the list. It is only at the bottom because it has not been reviewed and rated yet. Also it is important to read the reviews as you will learn not only which extensions have the fewest problems, but also tips for using the extensions. To get to the Reader Reviews, click on the Extension to reach the page for that Extension. Here is the page for the top rated Downloader called Phoca Download. It has an average score of 100 out of 100 from 135 reviewers.


07

It has been used since 2008 – about 7 years. It has a Demo Site, Support and Documentation. These are all good signs.

Five: Are the latest Reader Reviews still positive?
Click on Reviews to read the latest reviews. Sometimes recent changes in an extension will make it better. But they can also render the extension unusable! It is important to read the latest comments submitted on several options before making your final choice as these comments may alert you to potential problems. It does not hurt to download an extension and try it out to see if it works. You can always delete an extension later if it doesn’t work out. The reviewers pointed out that one of the reasons they chose Phoca Downloads was because it comes with a Downloads counter which is what we want.


Six: Documentation and Support Forum
Extensions which have extensive documentation and support forums available are much easier to work with than those who do not. Forums are also a good place to look for folks having trouble with a given extension. To reach the forum for a given extension, click on the extension website and then click on Support or Forum in the top menu.


Seven: Demo Site
Extensions which have a Demo site allow you to see what the extension is like in action. Be aware however, that the extension may still not work on your website for a variety of reasons including possibly not being compatible with your template, or other extensions on your website. So, you also need to download the extensions you are most interested in and actually try them on your website.


Narrow down our list
Because it is easier to eliminate options based on drawbacks than to make a decision based on advantages, I often start at the bottom of the list and work up.


Testing the Top Four Options
After reading the reviews and visiting the demo pages and forums for all of the Download Manager options, it became apparent that most either did not work at all or did not give a count of how many times a document has been downloaded. The two finalists both keep a count of downloads and received top reviews from those who used them. These were Phoca Download versus JDownloads. I downloaded both and spent several hours testing each on my website.


The Final Two Choices: Phoca Download versus Jdownloads
You can see from the reviews that both are very highly rated and are used by a lot of people. Both offer file counters. Both offer buttons to insert download files into documents. I have used both on websites in the past.


There were four features which tipped the edge to Phoca Download.
First, it is available in more languages which is something that many retailers would be interested in. Second, it can integrate with VirtueMart and Akeeba extensions. Third, Phoca Download has a batch uploader for adding several documents at the same time. Fourth, it is easier to customize the appearance. In Chapter 9, we will describe how to install and use Phoca Download.


Next, we will describe the top twenty essential Joomla extensions. While Joomla is the best Web Building Tool available today (free or otherwise), it still suffers from a few shortcomings. Thankfully, nearly all of these shortcomings can be overcome by adding Extensions from the Joomla Extension Directory.

Top 20 Extensions

Number One: Encrypt Configuration
https://extensions.joomla.org/extensions/extension/access-a-security/site-security/encrypt-configuration
Our first six tools are free site security tools. The biggest drawback of all Content Management Systems is that they do not encrypt the log in page. This makes it very easy for a hacker to learn your user name and password. We will cover how to encrypt your entire site. But there is a need to encrypt the log in page while you are building your site. This simple tool does exactly that.


Number Two: Brute Force Stop
https://extensions.joomla.org/extensions/extension/access-a-security/site-security/brute-force-stop
One of the most common ways to attack a website is by using tools that keep entering passwords until they find yours. This free tool not only stops these attacks, but let's you know who is attacking you.


Number Three: Marco's SQL Injection
https://extensions.joomla.org/extensions/extension/access-a-security/site-security/marco-s-sql-injection
Another common way to attack your site is to attempt to insert code into your database. This free tool stops these attacks and let's you know who is attacking.


Number Four: Spam Protect Factory
https://extensions.joomla.org/extensions/extension/access-a-security/site-security/spam-protect-factory
While many security tools allow you to block individual IP addresses that are attacking you, major hackers have thousands of IP addresses. This free tool allows you to easily block entire countries from attacking you or even reaching your login page!


Number Five: Eyesight
https://extensions.joomla.org/extensions/extension/access-a-security/site-security/eyesite
This is a file monitor that will warn you about any changes to any of the files on your website.


Number Six: TJ Set Generator Tag
https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/set-generator-tag


This extension allows us to change the generator tag for our website from Joomla to whatever we want.

Number Seven: Sparky Template Framework
https://www.hotjoomlatemplates.com/sparky-joomla
While not technically a Joomla extension, we will install this revolutionary template through the Joomla extension manager just like our other extensions and be used to replace the default Joomla template.


Number Eight: JCE Editor
https://extensions.joomla.org/extensions/extension/edition/editors/jce
The most highly rated Text Editor is JCE Editor. One of the first things we will do, as covered in the next article, is install this text editor to replace the default Joomla editor. Installing and using this extension is covered in Article 2.4


Number Nine: Profiles File Manager
https://extensions.joomla.org/extensions/extension/core-enhancements/file-management/profiles

This file manager allows you to quickly create and edit files and folders in your Cpanel account without needing to log into Cpanel. Installing and using this extension is covered in Article 5.3.

Number Ten: Unite Nivo Slider
https://extensions.joomla.org/extensions/extension/photos-a-images/slideshow/unite-nivo-slider


This simple slide show is one of the best at combining text over images in an easy format. Installing and using this extension is covered in Article 7.1.

Number Eleven: Modules Anywhere
https://extensions.joomla.org/extensions/extension/core-enhancements/coding-a-scripts-integration/modules-anywhere

Modules are boxes used by Joomla to display functions such as slideshows and forms. This extension allows you to place any module inside of any article simply by clicking on a button. This extension is covered in Article 7.2.

Number Twelve: Video Embedder
https://extensions.joomla.org/extensions/extension/multimedia/multimedia-display/video-embedder


This extension allows us to embed a Youtube video to any article simply be clicking on an “Insert Video” button. Unfortunately, it does not allow us to set the height and width of the video. For that we need a second free tool.

Number Thirteen: OS Youtube Free
https://extensions.joomla.org/extensions/extension/social-web/social-media/osyoutube
This plug in allows you to display any YouTube or Vimeo video in an article simply by copying and pasting the URL of the video into the Article Edit screen. Installing and using this extension is covered in Article 7.3.


Number Fourteen: SJ Video Box
https://extensions.joomla.org/extensions/extension/social-web/social-media/sj-video-box
This tool allows you to place a video in a module or feature box. Installing and using this extension is covered in Article 7.4.


Number Fifteen: Phoca Download Manager
https://extensions.joomla.org/extensions/extension/directory-a-documentation/downloads/phoca-download
Phoca Download has a batch uploader for adding several documents at the same time. And it comes in all kinds of languages making it ideal for an international website. Installing & using this extension is covered in Article 10.1.


Number Sixteen: ReDJ URL Redirection Component
https://extensions.joomla.org/extensions/extension/site-management/url-redirection/redj
ReDJ allows you to manage URL redirection. This allows you to redirect old web pages to new one without broken links.


Number Seventeen: Header Tags Plugin
https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/header-tags
Automatically taking your first H2 tag and turning it into an H1 tag. Now search engines can find all of your web pages.


Number Eighteen: Phoca Open Graph System
https://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph-system
Generates open graph image tags for sharing images on Facebook.


Number Nineteen: OS Site Map
https://extensions.joomla.org/extensions/extension/structure-a-navigation/site-map/osmap

Installing a site map and submitting it to Google will help increase the page ranking of your website for Google Searches.

Number Twenty: Tell a Friend Email Referral Tool
https://extensions.joomla.org/extensions/extension/content-sharing/bookmark-a-recommend/shape-5-tell-a-friend
Tell a Friend allows your supporters to send a personal email to their friends with a link to your site and their message about why their friends should visit your site.


In one of our next books, Create Your Own Social Network, we will review how to add the following Joomla extensions: Community Builder, Wall Factory, IC Agenda Events Organizer, Kunena Forum, AcyMailing Newsletter Tool, JQuery Easy. In future books, we will review even more extensions: G Translate and Virtuemart.

This completes our review of the Top Twenty Joomla Extensions. In the next section, we will add and configure the first of these free extensions, a very important web building tool called the JCE Editor.

In this article, we will take a tour of the Joomla Administrator Control Panel and make some important changes to the initial configuration of our new Joomla website. This section covers a lot of ground. We have therefore divided it into 10 topics which cover different links in the Control Panel Main Menu.

#1...Getting Started with the Joomla Control Panel Top Menu
#2...Getting Started with Systems, Global Configurations.
#3...Getting Started with Users, User Manager
#4... Getting Started with your Menu Manager and Menu Item Manager
#5... Getting Started with your Content, Article Manager
#6... Getting Started with your Content, Category Manager
#7... Getting Started with your Content, Media Manager
#8... Getting Started with your Extensions, Extension Manager
#9... Getting Started with your Extensions, Module Manager
#10...Getting Started with your Extensions, Template Manager

This tour is a good way to learn more about the various tables and functions of the Joomla Control Panel. To log in to the Joomla Control Pane, go to mysite.com/administrator. After installing Joomla and logging in, you will see a control panel with several Welcome messages.

01

After deleting all of the Welcome Messages and three module boxes, your control panel will look like this.

02

All Joomla websites come with a front end which is seen by the public and a back end that is seen only by administrators. Here is the front end of our new Joomla website without any sample data.

03

The best way to learn Joomla is to install your own Joomla website with no content and then make the changes to your configuration as we describe them. However, if you do not have a Joomla website, there is another excellent way to learn about the Joomla Administrator Control Panel which is to go online to Joomla.org and log into their DEMO Joomla Control Panel.

https://www.joomla.org/

04r

Click on the big blue Demo button. Sadly, this takes us to a page trying to sucker us into registering for a SiteGround US web hosting account. But you can still test drive Joomla without signing up for a SiteGround accoun by scrolling down the page and clicking on Launch Test Drive.

05

The site we will look at will only last 90 minutes. But this is more than enough time to see what the back and front ends of the default Joomla website look like.

06

Clicking on tour of the Admin Panel will take us to a SiteGround tutorial about Joomla. Clicking on Preview Site takes us to a similar Joomla Tutorial by Joomla Co-Founder and Developer Brian Teeman.

#1 Getting Started with the Joomla Control Panel Top Menu
We will skip these videos and look directly at the control panel of our Demo site. We will begin our tour of the Control Panel by looking at the top menu.


07

The link to view the front end of the Demo website and the link to log out of the control panel are on the upper right. The remaining menu items, from left to right are System, Users, Menus, Content, Components, Extensions and Help. Hovering over any of these menu items brings up their drop down menus. The drop downs for each of these menu items are shown below.

08

Arrows to the right of submenus indicate quick links such as “Add New Article.” In this article, we will focus mainly on these four menu items. The remaining menu items will be reviewed briefly here and in more detail in later articles.

09

We will begin with the System Menu Item. The first submenu item, Control Panel, is just a quick way to get back to the main control panel screen from any other screen. Think of it as the HOME button on most websites.

#2... Getting Started with Systems, Global Configurations.
We will next change a few Global Configuration settings. To reach your global configurations screen, go to System, Global Configuration.


10

Here is what it looks like.

11

There are a couple of important initial tasks we want to take care of on this screen. First, make sure your site is online by confirming that Site Offline is set for NO (as shown above). Second, increase the Default List Limit from 20 to 100. This will make it easier for both you and your viewers to view complete tables rather than partial tables. Third, scroll down to Meta Settings and add our Meta Description and Meta Keywords. This will help search engines properly categorize your website. 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.

12

Note that there is a drawback in using a Global meta description in that it means that any page on your website which does not have its own unique meta description will be assigned the global description. This in turn means that many of the pages on your website will have a “duplicate” description which is something that search engines do not like. Therefore if you assign a global meta description, you should also add a free Joomla extension to automatically generate unique meta descriptions for each page on your website. We review how to do this later in our article in Search Engine Optimization Tools.

Next, scroll down further on the Global Configurations screen and change the Search Engine Friendly URLs from no to yes. The settings in this category should be adjusted when you first build your website. If you change them later, many of the menu items and internal links on your website will be broken.

Also change Use URL Rewriting from no to yes. If use URL Rewriting is set to NO, the URL to this content article page will include “index.php” which is bad because this can confuse your readers.
http://mysite.com/index.php/getting-started

When this parameter is set for YES, Joomla will use the rewrite function of Apache web servers to eliminate the index.php part of each URL. This will change the example URL above to a shorter and more understandable link such as http://mywebsite.com/getting-started

Please Note: Prior to changing this parameter from No to Yes, you should verify that the server used by your web host has been set so that the rewrite function will work. This typically means gong to your Cpanel File Manager to change the name of the root directory htaccess.txt file to .htaccess

Note that there is a dot placed in front of the word htaccess but there is not a dot after the word htaccess.

If you followed our previous instructions, we have already done this while we were still in Cpanel and right after we installed Joomla to our website. If you skipped that step, then you need to go to your web hosting account, open Cpanel, open your file manager, look for the htaccess.txt file and do that now.

12a

Note: Before entering your file manager, cPanel pops up a message asking you where you would like to go within  your file structure. At the bottom of the radio buttons, you will see a checkbox asking you if you'd like to view hidden files. Check that box before entering your file manager to see the .htaccess file.

As we explained previously, you should also open the .htaccess file with your File Manager. Then locate a line that says #RewriteBase and delete the hash character (#).

This only needs to be done for your primary domain root folder – not for any addon domain folders.

Global Configurations System Tab
Then click on the System tab at the top of the screen and reset the Session Lifetime from 15 (minutes) to 99 (minutes). This parameter determines how long a user has on your website before being automatically logged off. Because it is rude to log off a user who is reading your website (and also not a good way to treat your customers), you should raise this setting to at least 99 minutes.


Global Configuration Server Tab

The web host we recommend, Fullhost.com by default sets up a secure free SSL encryption system called Lets Encrypt in your Cpanel. This is discussed further in our next chapter. Once you verify that Let’s Encrypt has been set up in Cpanel, you can activate it by going to the Global Configurations Server tab and changing the setting for “Force HTTPS” from None to Entire Site.

12b

Then click Save and Close.


#3... Getting Started with Users, User Manager
Next, we will go to Users, User Manager.


13

This will bring up the following screen.

14

On the Demo website and a real website, it initially shows a single user called Super User. 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. Then click Save and Close. Click on Users, Groups and you will see several levels of groups. You can edit and add to these groups. But for now, we will leave them and the Access levels associated with these groups at their default settings.

#4... Getting Started with the Menu Manager and Menu Item Manager
Next, we will go to Menus, Menu Manager.


15

The Demo site has one menu, called Main Menu. It has been linked to a Module also called Main Menu that we will look at in a moment. To see the menu items associated with the main menu, click on Menus, Main Menu.

16

Below is what it looks like:
17

Click on Help in the upper right corner to learn more about what each tab does. Note that the Ordering tab disappears if you make your screen too narrow. Click on NEW to bring up the Menu Item Edit screen. Then click on the big blue Select button to see all of the Joomla Menu Item types. We will discuss these in a later chapter. For now, click Cancel.



#5... Getting Started with your Content, Article Manager
Next, go to Content, Article Manager.


19

On the demo site, there is only one article called First Article.

20

You can add your own article by clicking on the big green New button in the upper left corner. You can also create a new article from the top menu by clicking on Content, Article Manager and then clicking on Add New Article. Either way, you reach the Add New Article screen:

21

To add an article, give it a title and some text. You do not need to put anything in the Alias box. Joomla will automatically generate an Alias based on your title. Remember that the title should not exceed about ten words for Search Engine Optimization. If you want, you can assign the article to a category and decide if the article will be Featured (which means that it will appear on the Front Page). If you do not want the article appearing on the front page, then the only way to view the article will be to create a menu item for the article AFTER you have first created the article. You can add images to your article by clicking on the Images button at the bottom of the page – which will take you to the Media Manager to select an image. Once you are done creating your article, click Save and Close. To view your new article, assuming you made it a featured article, click on your website front end link in the upper right corner of your control panel.

Create a Welcome article and two test articles to test our main menu
One of the first things we should do when we start a new website is create a Welcome article and publish it as Featured. For now, just type “Welcome to our website!” for the title and type a sentence for the text. Change Featured from No to Yes.


21a

Then click Save and Close. We will also create two Test articles, Test 1 and Test 2, to link to a menu item to see how the menu items look and to verify that the drop down works okay. Here is what the Article Manager now looks like:

22

Content, Article Manager, Options
Another important screen is the Content, Article Manager, Options screen. To reach this screen, click on your article manager. Then click on the Options button in the upper right corner of this screen under the Joomla icon.


23

This will bring up the following screen.

24

Here you can specify which items appear by default on the article pages, the category blog pages and the category list pages. There are dozens of potential settings. We will hide the category, the author name, the published date, the modified date, the tags and the hits. Then click Save and Close.

Main Menu… Add a parent and child menu item
Next, go to Menus, Main Menu, Add New Menu item.


25

For Menu Title, use Test 1. For Menu item Type, select Articles, Single Article. This will bring up the Article Manager screen where you can select any article you have already made. Select Test Article 1.

25a

Then click Save and Close. This will place the Test 1 menu item in the top level of the Main Menu.

For the second menu item, call it Test 2. For Menu Item Type, select Articles, Single Article. Link the menu item to the Test 2 article. Then in the right hand column, use the drop down arrow to select Test 1 as the Parent Item.

25b

Then click Save. Now click on your site name to view the front end of our site.

26

Click on Test 1 menu item and Test 2 should appear. If it does not, you may need to make changes in your .htaccess file as described earlier.

#6... Getting Started with your Content, Category Manager
Next, click on Content, Category Manager.


27

There is only one category on the demo site. It is called Uncategorized. To create a new category, simply click on the green New button. Below is a category manager with a few more categories created.

28

The Add A New Articles Category screen looks like the Add New Article screen.

29

This is what makes Joomla very user friendly. Nearly all of the screens look the same whether you are adding a menu item, an article, a category or a new module. One screen that is a little different is the Media Manager which we will look at next.

#7... Getting Started with your Content, Media Manager
Next go to Content, Media Manager.


30

Note that you can also reach the Media Manager via the Quick Links side menu in the Control Panel. The benefit of getting use to using the top menu rather than the side panel is that the side panel is only visible when you are at the Control Panel screen whereas the top menu is visible and available from any screen in the Administrator backend. A primary goal of this introduction is to help you learn where links to important functions are located in the Joomla Administrator Main Menu. Clicking on the Media Manager will bring up the following screen.

31

There are two views of the media manager. Above is the thumbnail view. To see the detail view, click on the Detail View tab.

32

When we have our own website, we will delete all of these sample data images. Then we will delete the folders holding the images. Then we will create our own image folders and image sub folders. Then we will add our own images inside of our folders – with one folder for each article on our website. To delete images, from the thumbnail view, simply select the images you want to delete, then click Delete. To delete folders, they first need to be empty, then select them and click delete.

Create a New Images Folder
To create a new folder, click Create New Folder.


33

Give the folder a name using only lower case letters and numbers with no spaces. Then click Create Folder. If you have a complex website with ten or more categories and four or more articles per category, first create your categories with the Category Manager. Then create your category image folders. Then click on the category image folder to open it. Then place article image folders inside of these category image folders. Then load your article images into these folders. Below is the Media Manager folder structure for our website after adding a bunch of folders.

34

#8... Getting Started with your Extensions, Extension Manager
Next, go to Extensions, Extension Manager.


35

This will bring up the following screen.

36

A new feature that comes with Joomla 3.5 is the ability to install many Joomla extensions directly from the Extension Manager screen. This feature must be enabled the first time you visit this screen. In the past, we would need to go to the Joomla Extension Directory (clicking on the link in the Help Menu Item). Then we would need to click on Downloads to be taken to a page on the Extensions website. Then we would need to download the extension we wanted to the Downloads folder on our home computer. Then we would need to go back to the Extension Manager and click on Upload Package File. Then we would need to navigate to the extension zipped file in our Home computer Downloads folder and select it. Then we would need to click Upload and Install. We can still add extensions the old fashioned way. But by enabling Install from Web, we can skip all of these steps and research and install extensions directly from the Extension Manager Install screen. One of the most important extensions we should add to our website is the JCE Editor which is shown above. If you have your own website you are building, go ahead and click on the link to see how the new installation process works. You can also click on links in the Categories side menu to research other Joomla extensions. On the far left is a side menu you can use to update extensions. You can also uninstall extensions and templates you no longer want by clicking on the Manage button in the left side menu.

#9... Getting Started with your Extensions, Module Manager
Next, go to Extensions, Module Manager.


37

This will bring us to a screen with three or more modules.

38

Modules are boxes of content such as text and images that you can display on any or all pages of your website. Your main menu is an example of a module. The module manager screen is very similar to the Main Menu Manager screen and the Article Manager screen in that you can drag and drop modules to change their order, create new modules and/or unpublish and delete modules.

If you are working with a real website, it is useful to hide the User Log In module to avoid spammers attacking your website while you are building it. To hide this module, go to Extensions, Module Manager. Then select the Login form. Then click on Unpublish. We will replace it with a better option later. Also unpublish or delete any other modules you do not want or will not need.

Drag and Drop Module Order Sorting.

To change the order of a module in the Module Manager table, first select “Ordering” rather than “Position” from the filtering box above. Then in the far left column, select the three black dots. This will turn the module you want to move green. Then hold down your mouse and move the module to a new position. Then release the mouse. Below is a module called Breadcrumbs which is being moved to a lower position in the Module Manager table.

39

You can create a new module by clicking on the green New button.

40

The most common new module is a Custom HTML module. Clicking on this link will bring up a screen that looks like the Create New Article screen.

41

You can either show or hide the title of the module. In order for the module to actually appear, you first need to assign it a module position, which will depend on the template you are using. Then you will need to assign it to one or more pages by clicking on the Menu Assignment tab. Finally, you can give your module a background image by clicking on the Options tab.

#10... Getting Started with your Extensions, Template Manager
Next, let's look at the default templates and template positions by clicking on Extensions, Template Manager.


42

This will bring up the Template Manager Styles screen.

43

The default front end template, as indicated by the Gold Star is Protostar. To change to the other front end template, Beez3, click on its star to make it the Gold Star. Then click on your site name in the upper right corner to view what you website looks like using the new template. Notice that the template typically does not change the content of your website. It merely changes its colors and appearance. If some items such as the header of your website suddenly disappear, this merely means that your new template is using different module positions than your old template. You can get the module to reappear by assigning it to a module position used by your new template. There are hundreds of free templates available for Joomla websites. We will review how to research templates in Chapter 3. Two of the most important factors in choosing a different template for your website are the number of customization options available and the number of module positions available. To see the customization options for the Protostar template either double click on it or select it and click on Edit. Then click on the Advanced tab.

44

The Protostar template has almost no customization options. Click Close. In the next chapter, we will add the free Sparky template that has hundreds of customization options:

44br

Comparing Module Positions
Then double click on the Beez3 template to see its options. It also has very few options. To see the module positions for the beez3 template, go to the Template Manager, Styles screen and click on “Templates” in the upper left corner.


 45r2

Under Beez3 Details, it says that a Preview is not available and must be enabled in options. So click on Options in the upper right corner. Click Enabled. Then click Save and Close. This returns us to the template screen where this now a blue “Preview” link for each template. Click on Beez3 Preview.

46

Beez3 has 7 module positions near the top of the page. Scroll to the bottom of the page and you will see 4 more module positions for a total of 11 places to put content on our website. Beez3 offers very few module positions. This makes it difficult to precisely place your modules where you want them on your website home page.

Equally bad, the module position names are not at all descriptive. They are simply “position 1, 2, 3, 4, 5 and 6. This also makes it hard to place modules where we want them. The Protostar template is even worse than the Beez3 template. We will therefore describe how to add a better template call Sparkye to our website in the next chapter. With the Sparky template, we can easily create as many module positions as we want or need.

This ability to locate content may not seem that important if you just have a simple personal blog in order to share stories with your friends. But if you have an online business with hundreds of products, having row and column placement options – with up to 16 rows per page and each row with up to six columns, having all of these options is essential. They are also essential if you want to build a large community organization where every subgroup of the organization can have their own space on the HOME page of the website. They are also essential if you are a photographer wanting to turn the HOME page of your website into a photo or video gallery. With module positions, it is better to have them and not need them than to need them and not have them.

Add Your Domain Name Email Address to Your Joomla Website
In Global Configurations, add the email address associated with this website. Each website should have its own email address, all of which can be forwarded to your primary email address:


49

Getting Help
If you have problems with your website, there are lots of ways to get help. You can click on the Help button or go to the Support forum to read about the problems and solutions of others. You may also find a tool in the Joomla Extension Directory that does what you need.


You can also post your question on our course forum at collegeintheclouds.org. This concludes our tour of the Joomla Control Panel. In the next section, we wile review how to use the Joomla Extension Directory and describe some of the most important extensions we will be adding to our Joomla website.
There are two ways to install Joomla on your website. These are the automatic “one click” installation method and the multistep manual installation method. In this article, we will review how to install Joomla to your website using a commonly available web hosting tool called Softaculous, which is the easiest way to install Joomla. The benefit of Softaculous is that you can choose between any of several versions of Joomla during the installation process. Installation with Softaculous can be done in less than one minute. Think of it as two to three clicks. This article assumes that you have already secured your domain name(s) and your web hosting and that you have correctly “pointed” your domain name(s) to your web host servers – topics discussed in Chapter 1.

The Softaculous method of installing Joomla involves basically four steps. We first will use Cpanel to create an Add On Domain. This will also create a folder to install Joomla into.

01

Next, we will use Softaculous to install Joomla into this folder. Third, we will log into our new website and finally we will change some of the initial configurations.

Step 1... Log in to Cpanel. Then use the Create Add On Domain process to Create a New Folder for your Domain

The most common shared web hosting interface is called C Panel. Login into your CPanel for your domain, usually through www.yourdomain.com/cpanel or https://www.yourdomain.com/cpanel

Then enter your web hosting account user name and password. You will see something that looks like the following screen.

02

Unless you want to install Joomla into your Primary Domain folder, you will need to create an Add On Domain

Even if you are doing a one click installation of Joomla, you will first need to decide where you want your website to go. Regardless of where you have your hosting account, you will be assigned a root folder which you access by way of your Hosting Cpanel File Manager. You can install Joomla directly into this Root folder. Alternately, if you have more than one domain name, you can use the root folder to install Joomla into for your Primary Domain Name and then create subfolders inside of this primary folder to install additional domain names and Joomla applications. These additional domains are often called secondary domains or add-on domains.

What is the difference between a Primary Website Folder and a Secondary Website Folder?

The first decision we need to make when installing Joomla is whether to install it into our primary website folder or to create another folder inside of our primary folder to install Joomla into an “Add On” Domain. All websites are stored on the web host’s server in folders (which are also called Directories). Each website has one main folder called its ROOT FOLDER (also known as its root directory). This is true whether a website is a primary website in your hosting account or a secondary website. If your web host allows you to have “unlimited” add on domains, you can have many more websites. You will need to choose one of them to be your primary website and all of the remaining websites will be listed in your C Panel File Manager as sub-folders which are placed inside of the folder for your primary website.

The key issue here is that your primary domain should be something you are planning on keeping because deleting it might affect the links to all of your secondary websites. But each of your websites will operate as separate websites on the Internet. Viewers who visit your websites will not be able to tell which one is the primary domain and which ones are secondary domains.

If we want to install Joomla in a domain that is not our primary domain, we need to set up the add on domain in C panel. This process will create the folder for the new domain inside of the main folder. This new domain will then also be listed as an option during the Joomla installation process.

Step 2... Create an Add On Domain in Cpanel

After you have logged in to Cpanel, go to the Domains section in Cpanel. Then click on the Addon Domains icon.

03

Enter your new domain name. Then just click your cursor in the box called FTP username. Cpanel will automatically enter an FTP username and Document Root folder name. Type in a password you can remember. Then click Add Domain. Wait for few seconds until you get a message “Addon domain created“.

04

Meaning of each Addon Domain Field
New Domain Name
- Enter the name of the new domain you want to use as an addon domain. You can leave out the http:// or www.v When you enter the new domain name, cPanel automatically fills in the Subdomain/FTP Username field. However, you can manually change the username into any other unique name.


Subdomain/FTP Username – Enter a name for the new FTP user which will be created automatically when you create the add on domain. To remember it, name it the same as the domain name without the ending extension.

Document Root – Cpanel also automatically fills in this box. But this too can be changed to whatever you would like. This is the name given to the location or path to the new directory (File folder) which will be created for this new addon domain. Its best to name this the same as your domain name using lower case letters with no spaces. But you can also leave this blank and the system will automatically create this field for you. Click the Add Domain button. Your Add On domain files will be stored in a subdirectory of your public_html (Document Root) directory. Addon domains allow you to control multiple domains from a single account.

Step 2... Start the Softaculous One Click Installation of Joomla
Scroll down in Cpanel until you see the Softaculous icon under Software Services. Click on it to open it.


05

Then click on Portals/CMS. Then click on Joomla.

06

To start the Joomla installation, click on Install.

07

Select the latest version of Joomla from the drop-down menu. Under "Choose Domain," be sure to select your Add On domain here. Then choose the installation folder for the new application. Leave the folder box empty if you want Joomla to be installed in the root directory of your account.

08

For Choose the version you want to install, you generally want the latest “long term release” version of Joomla.
For Choose Protocol, you usually want just http://.
Here is a close up view of the lower part of the Software Setup screen.

09

Choose Domain... Be careful what domain you choose. If you choose your root domain name, it will over-ride your root website and install a new version of Joomla in its place. To install Joomla in an add on domain, you must select the addon domain here – which means you must have already created the add on domain with the Create Add On Domain process.

In Directory... This is the folder you want to put your website in. If you leave the folder blank, Joomla will be installed in the root folder of this domain. In other words, leave this box blank to install Joomla into myaddonsite.com.

If you put the word joomla into the box, Joomla will be installed into myaddonsite.com/joomla. If you use the word joomla as shown above, for the website demo56789.com as shown above, then to access your new Joomla website, you would have to go to demo56789.com/joomla. This is generally not what you want. This is why we recommend leaving the In Directory box blank. This will allow Joomla to be installed in the root folder for demo56789.com.

Database Name... By default, your new database will simply be called joomla. You can add a longer description here – using all lower case letters and numbers with no spaces. Below is the rest of the Softaculous Installation screen.

10

Site Name... Enter your website's name, with capital letters and spaces between the words - such as “Build Your Own Business Website.”

Site Description... This can be just a few words about your website. This is useful for search engines. It can be changed later from the Joomla Admin Panel.

Table Prefix... This can generally be left at its default setting.

Import Sample Data... This should generally be left unchecked as if you install sample data, you will then need to delete it later.

Admin Username and Password... Create an administrator user name and password. Do not use Admin for your username and do not use pass for your password.
Admin Email... Enter your real correct administrator email address. This will be used to notify you when your Joomla installation is complete. It will also be used later if you forget your password and need to reset it. Because this email address may be sent passwords and other sensitive information, you should only use a security encrypted email service such as ProtonMail for the Admin Email. See the following link for how to set up and use a ProtonMail account.

https://learnlinuxandlibreoffice.org/9-more-reasons-to-switch-to-linux/9-2-get-a-more-secure-email-address

Admin Full Name.... Enter your real full name.
When you are finished, click install. It will take a few minutes for your web host to set up your new Joomla database. When it is done, you will receive an email with a link to log in to your new Joomla website. This link will be something like
http://mysite.com/administrator

This link will take you to the Joomla Administrator Log in screen.

Before we leave Cpanel, there are a couple of important tasks we should take care of. First, we should make sure Cpanel is set for PHP 7. Go to the Software tab and click on Select PHP version:

10a


Then click on Switch to PHP Options in the upper right corner of this same screen. By default, Upload Maximum File Size is set for only 2M. This is way too small. Increase it to at least 32M and even 128M if you would like to upload videos. Also increase Post Max Size to the same value. Also, increase the max execution time from 30 seconds to 60 seconds.

10b



Then click Save. Finally, one of the first things you should do after installing any Joomla website is to activate your ht access file. Go back to the Cpanel home screen and click on your cPanel file manager. Then change the name of the root directory htaccess.txt file to .htaccess.

10c

Note: Before entering your file manager, cPanel pops up a message asking you where you would like to go within  your file structure. At the bottom of the radio buttons, you will see a checkbox asking you if you'd like to view hidden files. Check that box before entering your file manager to see the .htaccess file.

If your menu links trigger errors with SEF Friendly URLs and/or Rewritten URLs, you may also need to open the .htaccess file with your File Manager. Then locate a line that says #RewriteBase and delete the hash character (#).

Once these changes are made in Cpanel, we are ready to log into our Joomla Administrator screen. This link will be something like
http://mywebsite.com/administrator

This link will take you to the Joomla Administrator Log in screen.

11

Enter your user name and password to reach the Joomla Control Panel. After deleting all of the Welcome Messages, your control panel will look like this.

13

You can turn off the boxes called Logged in Users, Popular Articles and Recently added articles by going to Extensions, Module Manager in the top menu. Then in the upper left corner, change the filter from Site to Administrator. Then check on the three boxes. Then click Unpublish. Then change the filter back to Site. Then click on System Control Panel in the top menu. Our control panel now looks like the following:

14

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 without any sample data.

15

To log back in to the Joomla Control Pane, go to mysite.com/administrator.

This will take you to the Joomla Administrator Login screen. Enter your Admin username and password. Click Log in. Congratulations! You now have a Joomla website. In our next article, we will take a quick tour of the Joomla Administrator Control Panel and describe some important changes we will want to make to the initial configuration of our new Joomla website.