The marketplace for Premium Themes — & — Templates

2,206,220 People using Mojo
353,550 Downloaded items
2115 Marketplace items
2 Green Monsters

The Mojo Blog

Blog | Building a website on the Joomla! CMS

Building a website on the Joomla! CMS

Posted By Sanaa Themes

No Comments

This tutorial is a part of the Joomla! series articles/tutorials created exclusively for the Mojo Themes marketplace blog. If you didn’t read the first part of this series you can do it here:

1. What is Joomla! and what it can do for me?

In this article I will answer to the following questions:

  1. How to make my personal computer a server for local testing purposes?
  2. How to set up multiple local Joomla! installations for developing or testing local?
  3. How to create a local database?
  4. How to install Joomla! local?
  5. How to create a database on a server?
  6. How to install Joomla! on server?

Introduction

Many beginners in the web design field are asking me everyday questions like:

“It’s possible to make my home computer a server? if yes. How can I do that?”

“I heard I can set up multiple domains on Xampp, how can I do that?”

One of the repetitive ones that I hear is:

“Can you teach me how to build a website in Joomla?”

For the purpose of this tutorial I will make use of the most popular operating system(OS) which at this time is windows XP and for building the local server I’ll make use of the XAMPP software.

In this first part of the article we will concentrate our efforts on how to build a local server on our home computer, and how you can set up multiple domain names for managing multiple Joomla installations.

What does the XAMPP software do?

Xampp is a software that will help you build easy and fast your personal server, on your laptop computer or desktop computer for testing purposes. Xampp is an Apache distribution including: Php, Mysql and Perl.

Please go ahead and download it form here.

Installation

After downloading the software please start the installer.

After starting the installer you will get a screen like this one.

Clicking install will launch the installation. Depending on how fast is your computer, you may open a beer.

After the installation wizard will come to an end, a little window will pop-up in the right corner of your desktop. Please select both Svc boxes like in the following image:

After checking the boxes you must enable the server by starting Apache and Mysql. Do this by pressing the start buttons for Apache and for Mysql like in the following image:

After starting the server you will see the word “running” appearing in the right of Apache and  Mysql like in the following image:

Ok. We finish installing the server. Now let’s see how we can set up multiple domain names and multiple virtual hosts, to work with multiple projects.

Seting up multiple virtual hosts

How many times do you had to work on 2 or 3 projects the same time, and you became frustrated because you didn’t know how to duet on your local server. Well… it happened to me also. So let us see how we can achieve this miracle.

First we have to create a folder for our new project.

Go to htdocs folder in your Xampp installation:

C:xampphtdocs

and here create a new folder, and name that folder whatever you want, for the purpose of this tutorial I will name the folder domain.

Now we have to find a file called httpd.vhosts.conf, we will do that by following this path:

C:xamppapacheconfextra

Open the file with the name httpd-vhosts. and add under the,

NameVirtualHost *:80

the following code:

<VirtualHost *:80>
ServerName domain
DocumentRoot C:xampphtdocsdomain
<Directory C:xampphtdocsdomain
IndexOptions +FancyIndexing NameWidth=*
Options Includes FollowSymLinks Indexes
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

Creating the domain name

In order to give a name to our virtual host we must find a file called hosts. To do that we must follow this path:

C:WINDOWSsystem32driversetc

Open the file in any text editor available to you and under the:

127.0.0.1 localhost

add this line:

127.0.0.1 domain

Following the instructions above you could set up unlimited virtual hosts and unlimited domains, on your local server.

Do not forget to restart your server. Now go ahead and type your domain name in the browser.

Creating the database

In order for the Joomla! CMS to store the data that it uses it will need a database. So we have to create the database.

Ok. Now let’s fire up our browser. I will use my friend Firefox.

In the browser type:

http://localhost/phpmyadmin

or

http://127.0.0.1/phpmyadmin

You will get a screen like this one:

In the Create new database field please type the chosen name for your database and after that click the create button like in the following image:

After hitting the create button you will see the name of your fresh database appearing in the left corner of the phpMyadmin panel like in this image:

Now we have to add a user to the database. In order to do that we must open the privileges tab. Please click the privileges tab and click Add new user like in the following image:

Now please input all the information like: username, password, and host. For host use the name localhost.

You will get a screen like this one:

After imputing all the necessary information check the privileges that you want to add for the user. If you are the administrator please check all. If not, check only the ones that you want to assign to the user.

After checking the privileges click the go button like in the following image.

Done.

Install Joomla! local

First download Joomla! from here.

Now go to the htdocs folder and choose one of your already made folders. For the purpose of this tutorial I will choose the folder created above named domain.

Put in this folder the Joomla! package and extract it. After extracting, please delete the archive.

Now get back to your browser and type the name of your domain. I will type in my browser just domain.

In the next step please select the language of your website and hit next.

Step 1

After the browser finished loading the page you will get a screen like this one:

Step 2

In the next step if everything goes well then everything will be green. If you’ll get some reds that means your server does not support Joomla! properly. On local installation you will get usually one red for the display errors. If so, there is no problem. I will offer further details about this problem in the Install Joomla on server chapter.

Step 3

This screen it’s about the license, please just hit next.

Step 4

In this step you must input some data in to Joomla!. Data like the type of the database which normally is MySql, the hostname which is usually localhost, the username of the database that we created above, the password that we set for the user to connect to the database, the database name and if you want in advance settings you could change the jos_ prefix for the database. It’s recommended to change the name of the prefix for security reasons.

Joomla! stores this data in the config.php file.

Step 5

In the next screen you will see the FTP settings. Please hit next. We will not input FTP data in Joomla! for local install.

Step 6

In this step we will provide to Joomla! the name for our site, email, name of the administrator and the password.

Also in this screen we can install sample data.

What does sample data stand for?

Sample data is the database file which contains the content of the default Joomla! installation. You can choose to install joomla! with no content(an empty database) or with content.

Step 7

In this screen you’ll get a warning about the installation folder. As a measure of security Joomla! it will not run untill you remove the installation directory. To do that please go to the folder where you had installed Joomla! and delete the installation folder. After you delete the installation folder hit the admin button in the right upper corner.

In the next step you will get the login screen which will look like this:

Type the username and the password that you set in Step 6  and you’re ready to go.

We finished installing Joomla! on the local server.

Simple and easy right?

Creating a database on the server

Creating a database on the server is not much different from creating a database on your localhost. I suppose your server uses as a user interface panel cPanel, because for the purpose of this tutorial I’ll make use of this software.

Please login to your website cPanel and look for MySql databases and click on it:

In the following screen please input the chosen name for your website database.

X3demob it’s the prefix from the cPanel demo website. Your prefix will be something else.

After you create the database you must add a user to it.

Please scroll down the page and you’ll see the Add new user form:

Type in the chosen user name and the chosen password and hit Create User. Please use a strong password.

In the last step we must assign the user to the database. The form to do that is under the create user form.

Select the user in the first field and in the second the database. Click Add and you’re done.

Installing Joomla! on server

First you must upload the Joomla! package to the server. You can do this by cPanel or by a FTP client like Filezilla. I recommend chosing Filezilla because first it’s free and second it’s a very powerful FTP client. In this tutorial I will not cover how to install Filezilla and how to use it. You can google it and you’ll find a lot of topics covering this subject.

After installing Filezilla connect to the server and upload your Joomla! package to the root and extract it.

The steps are almost  exactly the same like in the local installation.

Step 1

Chose the language and hit next.

Step 2

In the next step if everything goes well then everything will be green. If you’ll get some reds that means your server does not support Joomla! properly. I don’t think it will be the case, because Joomla is mostly supported on all the servers across the glob. Though you might get one red and this will be the display errors same as on the local installation. On some server the display error it’s turned on and Joomla! need it turned off. But this option it’s not a must for Joomla! because it will work without problems with the display error option on.

Step 3

It’s all about the license. Read it if you want and then hit next.

Step 4

In this step you must input some data in to Joomla!. Data like the type of the database which normally is MySql, the hostname which is usually localhost, the username of the database that we created above, the password that we set for the user to connect to the database, the database name and if you want in advance settings you could change the jos_ prefix for the database. It’s recommended to change the name of the prefix for security reasons.

Joomla! stores this data in the config.php file.

What is different here from the local installation it’s that you get a prefix for the name of the database and the user of the database. Please pay attention to this. If you are a beginner you’ll get very frustrated when you’ll see  Joomla! failing to connect to the database because you didn’t type the correct names.

Step 5

What is different here from the local install is that if you want you can input FTP settings for your website directly in to Joomla!. It is not mandatory.

Step 6

In this step we will provide to Joomla! the name for our site, email, name of the administrator and the password.

Also in this screen we can install sample data.

What does sample data stand for?

Sample data is the database file which contains the content of the default Joomla! installation. You can choose to install joomla! with no content(an empty database) or with content.

Step 7

In this screen you’ll get a warning about the installation folder. As a measure of security Joomla! it will not run untill you remove the installation directory. To do that please go to the folder where you had installed Joomla! and delete the installation folder. After you delete the installation folder hit the admin button in the right upper corner.

Step 8

Login to your new Joomla! website.

Congratulation for setting up your first Joomla! website!!!

OK. We’re done for today’s lesson. I hope I’ll see you in the next one soon.

Till then:

HAPPY JOOMLA!

My name is Costas Sacas and I am the founder of Sanaa Themes. I’m specialised in front end design and developing for the web with more than 5 years experience at this date. My work is my passion. Born under the Virgo sign, I’m a perfectionist. I’m an exclusive author and blogger here on Mojo. On the Mojo marketplace you can find me under the nickname SANAA. On Twitter, I twit under this names:   @CostasSacas and @SanaaThemes.

You must be logged in to post a comment.