1.1 Joomla Site Start Up

In our previous course, Create Your Own Interactive Website, we spent 10 chapters and 40 articles to cover setting up a Joomla business website. In this Quick Start Guide, we will condense these 10 chapters down to one chapter covering the following 10 Essential Steps.

01

This section covers the first two steps, which must be done before installing Joomla to your website. Part 2 covers installing and configuring Joomla. Part 3, Site Structure, includes creating your category and article folder structure which then is added to the Joomla menu. Part 4, Site Content will complete the foundation of your business website by adding a custom header and Welcome article - preparing your site for installation of the Phoca Cart shopping cart – which we will do in the next chapter. This is a very quick review. If you get lost on any of these steps, please refer to our more detailed instructions in our prior website:  https://createyourowninteractivewebsite.com/

Step #1 Use a secure Linux computer to build your online store!
Because all Windows computers have well known back doors, hackers can access your Windows computer within minutes of going online. We therefore recommend using Linux computers. If you do not have a Linux computer, you can create a “Linux computer on a stick” for under $30 which you can then plug in to almost any Windows computer USB port. For more information on this topic, visit our website: https://learnlinuxandlibreoffice.org/

You will need a good web browser to build your website. We recommend that you use the free Mozilla Firefox Web Browser. Firefox comes by default on Linux computers and sticks. We will build our example websites using this web browser. You should install this web browser on your Home computer before starting any of the exercises in our course. To install the latest version of Firefox on a Windows computer, go to the Mozilla Firefox English page:

https://support.mozilla.org/en-US/kb/how-download-and-install-firefox-windows

Step #2 Create a LAMP server or Set Up a Web Hosting Account

Web Hosting Account Option

Before setting up a web hosting account, you should first get a business related email address. In the past, we recommended using Gmail. However, Google has recently been shutting people out of their Gmail accounts and is not very secure. We therefore recommend a free service called ProtonMail.com (which also provides a free Virtual Private Network (VPN).

https://protonmail.com/

To forward email from your old Gmail account to your new ProtonMail account, go to your Gmail account and click on Settings, then click on Forwarding. Then click Add a Forward Address. Enter your ProtonMail email address you want all email from your Gmail address to be forwarded to. Then click Next. Click Proceed. Next go to your normal email address and follow the confirmation steps. To learn how to use the security features of ProtonMail, read the following article:

https://learnlinuxandlibreoffice.org/8-linux-security-tips/8-3-get-a-more-secure-email-address-for-free

Get Domain Name and Web Hosting

Create a Shared Hosting Account

As we explained in our previous course, there are serious security problems with any US based web hosting company. We therefore recommend a Canadian web hosting company called Canhost. Canhost uses fast and secure Linux servers. They make it easy to transfer or create a new domain name. Here is a link to their Domain Name order page:

https://www.canhost.ca/domains/

Domain names will cost about $15 per year and you should research the Business Domain name you want to use to make sure that it is not already in use. To learn how to install and use a VPS on Canhost, read one of our previous courses, Create Your Own VPS. Here is the link:

https://createyourownvps.com/

You are not yet ready to create your own VPS, below is a way to create a simple version of a VPS, called a LAMP Server, on your home computer.

LAMP Website Creation Option

2 Set up LAMPP Test Server

Once we have our Linux Mint operating system installed on a persistent USB drive and/or our laptop, we can install a LAMP test server inside of Linux Mint to learn more about how servers and databases work. A LAMP test server is what we will use to hold our business website while we are building it.

02

Later, we can transfer our website from our test server to a real server. Assuming that both our test server and real server use Linux, the file structure for our real website will be identical to the file structure of our test website.

2.1 Linux File Structure
Before we install LAMP, let’s open the Mint file manager and look at the default folder and file structure.

03

Appearances are deceiving. It looks like HOME is our top-level folder because our file manager opens in this folder. Click on File System in the side menu to see the real folder structure.

04

At the top of the file system is a forward slash: / The forward slash is called root. Notice that the names of all folders are lower case with no spaces. Click on the home folder to open it where there is a folder for your personal documents. Click on this folder to see your personal folders. The real location of your Documents folder is /home/David/Documents.

There are 4 folders in the root file system we will commonly use. These are etc, opt, usr and var. click on each to see what is in them. Etc has our chromium browser folder, our firefox browser folder and our fonts folder. It also has a libreoffice folder.

opt does not have anything initially.

usr/share has our bluefish folder and a libreoffice folder and our flameshot folder.

Var initially does not have a www folder. But it is where we will eventually place our website folders.

2.2 Install LAMPP
The L in LAMPP stands for Linux operating system, the A stands for Apache which is a free open source web server and the M stands for Mariah or Mysl databases.

05

The first P stands for PHP which is a website building program capable of linking to databases. PHP originally stood for Personal Home Page. PHP is the most common server side scripting program. Scripts are programs where single words can stand for more complex hidden code. For example, the words moby-dick can stand for the entire book. The final P stands for PHPmyadmin which is a graphical database creation tool.

All 5 programs are free open source programs that are the foundation of the internet. Together, these 5 programs are called a full stack and a person trained to use all 5 tools is called a full stack web developer.

There is another common web testing platform is called XAMPP where the X stands for any operating system. LAMPP is better than XAMPP because LAMPP uses the correct folder and file structure and because it is easier to install PHP modules on LAMPP than on XAMPP.

Exercise: Install LAMP: The most common way to install LAMPP is by entering commands in the Linux terminal using a single command. The purpose of installing them all together is so that the versions of these programs will all be compatible with each other. Open a terminal by clicking on the Mint Circle. Then click on the black square which is the fourth icon from the top. Then copy paste in this command:

sudo apt-get update

Press Enter. Type in your password and press Enter again. Then copy and paste the next command and press Enter again.

sudo apt-get upgrade

sudo apt-get install lamp-server^

Important: The caret (^) at the end of the above line is not a typo and must be included in the command.

The terminal will search for and add the required packages. It will end by asking you to confirm the download. Type Y and then press Enter. Then wait for the installation to finish. You can review everything that was installed by scrolling down the terminal. The key points are that PHP 7.4 was installed with all needed PHP modules. But PHPmyadmin was not installed. We will install it separately in a moment. When you have finished reading what was installed, go ahead and close the terminal.

2.3 Test your Apache Server
Unlike most programs, Apache does not have a quick launcher you can use to start the program in the Mint Menu. Instead, it is working by default and it is turned on or off by entering commands in the terminal (which we will review in a moment). To see Apache working, open your Firefox browser, open a new tab and type in localhost.

06

In general, how we view web pages when we are developing them is by opening a Firefox browser and typing in localhost.

Apache Folders and Files
Apache’s default document root is /var/www/html, and the configuration file is /etc/apache2/httpd.conf. Additional configurations are stored in the /etc/apache2/*-enabled directories. To see the Apache folders and files, open your File Manager and click File System, Etc. Apache 2.

07

Next open usr/share/apache2:

08

Next open var/lib/apache2:

09

Then open var/www/html.

10

This is an important folder because this is where our website documents will be stored. There is already one default website here called index.html. Right click on this file and open it with the Firefox web browser.

11

This is the Apache landing page. To see the code for this page, close the browser. Then right click on the html folder and click Open as Root and enter your password. Then open index.html with your Bluefish Editor.

12

To change the appearance of the Apache start page, scroll down to line 224. Then change “It works! to “It works - and I can change it any way I want!”

Then save and close the file. Then refresh the localhost page.

13


Turning Apache Server On and Off

This page displays because by default the Apache server is turned on. However, we may eventually turn the Apache server off. Turning Apache off and on requires using the terminal which you can open by clicking on the Mint menu. Then click on the Black Square. To turn off Apache2, type in:

sudo systemctl stop apache2.service

Press Enter. Then enter your password and Press enter again.

14

To verify that Apache2 is off, type in sudo systemctl status apache2.service

The screen will say “inactive (dead). Another way to verify Apache is turned off is to open your Firefox browser and type in localhost.

15

To restart Apache2, close and open the terminal. Then type or copy paste,

sudo systemctl restart apache2.service

To verify that Apache2 is on, type in

sudo systemctl status apache2.service

The screen will say “Active (running).

Another way to verify Apache is turned on is to open your Firefox browser and type in localhost.

16

2.4 Test PHP

To make sure that PHP is properly installed, we will create a simple PHP script we will call “info.php”. To do this, go to your /var/www/html folder. Then right click and click Open as Root. Enter your password. Then click File, Create New Document, Empty Document. Name the file info.php.

17

Then open the file with a text editor or Bluefish and copy paste:

<?php phpinfo(); ?>

Then save and close this file. To make sure the changes take effect, restart Apache by opening a terminal and entering the following command: sudo service apache2 restart

Then open your browser and enter the following URL:

localhost/info.php

18

Note here that the PHP configuration file is located at

/etc/php/7.4/apache2/php.ini

2.5 Install PHPMyAdmin

Next is to install phpMyAdmin, a graphical web interface to manage databases. Open a terminal and copy paste the following command:

sudo apt-get install phpmyadmin

Enter your password and press Enter. Then type Y when prompted and press Enter.

On the next screen you will choose the web server you want to automatically configure to run PHPMyAdmin.

19

Then default is Apache2. Just press Enter. Eventually, this screen will appear:

20

To install the default database, the default is Yes. So just press Enter.

It will then ask you to enter a password.

Type in a short easy to remember password (assuming we are just setting up a test environment). Then press Enter. Then type in your password again and press Enter again. This will finish the installation process.

21

Now we need to enable php-mbstring extension by copy pasting this in the terminal. sudo phpenmod mbstring

To help the Apache Server find PHPmyadmin, open your file manager and go to the Apache configuration file:

/etc/apache2/apache2.conf
Then right click and click Open as Root and enter your password. Then open the configuration file and scroll to the bottom. Enter a new line. Then copy paste:
include /etc/phpmyadmin/apache.conf

Save and close the file. Then close the file manager.

While the terminal is still open, restart Apache to make sure the changes take effect.

sudo systemctl restart apache2.service

Then open your browser and enter the following URL:

localhost/phpmyadmin

22

Type in root for the username and your simple phpmyadmin password you set when you installed phpmyadmin. Sadly, you will not be allowed to log into MySql server.

23

This is because while the password was set in PHPmyadmin, we have not yet set the same password for our MySql server.

2.6 Set MySql Server Root Password

Sadly, the package installation did not prompt us to set the MySQL root user password. Without this password it is not possible to log in to phpMyAdmin. The password is set from the terminal. Open a terminal and copy pasting the following:

sudo mysql -u root

Add your Linux password which will give MySQL administrator privileges in order to set its root password. Then press Enter. This opens the mysql> prompt :

24

Next copy paste the following MySQL command, but replace new-password with the password that you used when you installed PHPmyadmin. Copy the command and then modify the password before pasting at the mysql> prompt.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'new-password';

If the command is accepted, MySQL will display the following message in the terminal window.

Query OK, 0 rows affected (0.01 sec)

Exit from MySQL by typing quit at the mysql> prompt:

quit

Now restart MySQL by entering the following command in the terminal window.

sudo service mysql restart

Also restart Apache with:

sudo systemctl restart apache2.service

Then close the terminal.

Accessing phpMyAdmin

Open your browser and enter the following URL:

localhost/phpmyadmin

For user name, type root.

For your password, type in your PHPmyadmin/mySql password.

25

Now close the PHPmyadmin tab. Congratulations! You’re now ready to start building your local website. Just put all of your website files into /var/www/html/

As one final example, open your file manager and got to /var/www/html/. Then right click on the screen and click Open as Root and enter your password. Then click File, New Document, Empty Document and name it index.php. Right click on this file and open with the Bluefish editor. Then copy paste the following:

<?php echo '<div>Hello World!</div'; ?>

Save and close the file. Then open a new browser tab and type in localhost/index.php

26

What’s Next?
Now that we have set up our test environment, in the next article, we will install Joomla 3.9 into our LAMP server
and compare this to installing Joomla using a web hosting account Cpanel.