BUILDING WEBSITE USING CMS

In this segment you will learn to build Websites easily with CMS (Content
Management System) which is a easy to use user friendly webbuilding
platform.

WHAT IS CMS?

 A content management system (or website building platform) is a

user-friendly platform for building websites and managing your own
online content, instead of using a bunch of HTML Codes.
 It helps users who doesn't have basic knowledge about programming
to build s website by themselves very easily, it is as easy as working
on a word processing tool.
 Using CMS maintaining the site and modifying and doing changes in
the design of the website is too simple.

There are many CMS available but WORDPRESS, JOOMLA & DRUPAL
are widely used, in this 3 the most easy to use and very popular CMS is
WORDPRESS.

MOST POPULAR CMS

As you can see from the image above, nearly half of the websites on the
Internet are running on WordPress platform.

ADVANTAGES OF WORDPRESS
Very User firendly
If you know how to use Microsoft Word or any word processor, you
already know how add your own content. WordPress can be
expanded with free plugins to handle just about any site you can
imagine,from amazing small business pages to social networking
sites. With plugins you'll be able to add contact forms, subscription
forms, image galleries and so on for your website.
It's Completely Free
WordPress doesn't cost you anything to download or install it is
absolutely free, and there's a huge community who have designed
 beautiful themes and templates, making it easy to build any website
very easily.
Websites will be Responsive
The website you build will instantly be responsive, looking great on
every mobile device, smartphone and tablet. No need to fiddle
around with codes to make it responsive .
Large Support Community
With so many people using the platform, it is easy to find QUICK help
when you need it. In addition, WordPress has lots of free resources
both available on Youtube and in various support forum

BUILDING WEBSITE WITH WORDPRESS

Choosing Domain Name and Hosting

The first thing to do to start building a website is to get a Domain name and
Hosting.

Domain Name
A domain name (a web address for a website like
www.yoursitename.com, www.google.com)
Hosting
Hosting is a service that connects your site to the internet, hosting
allows individuals and organizations to make their website accessible
via the World Wide Web. Web hosts are companies that provide
space on a server owned or leased for use by clients, as well as
providing Internet connectivity, typically in a data center.

The WordPress platform itself is absolutely free, but a domain name and
hosting will cost you money,on a average domain name per year cost $9
per year, Basic hosting can be bought from as low as $1 per month. There
are many Hosting and Domain companies available like godaddy,
BlueHost, Hostgator, bigrock, You can choose any service provider which
suits your needs.

Choosing Right Domain

Choosing a domain name is similar to choosing a company name - it

requires a lot of thought and consideration. Your domain name is your
identity on the web; you want to make sure you choose a name that not
only fits your business, but is also easy to find and promote.

Make It Simple and Easy

Finding a domain name that's easy to type and simple is critical to
online success.If you're making a website for your business, your
domain name should match your company name, For example if you
are a tyre replacement company you can choose Tyrerepair.com or
tyrereplacement.com, If you're planning to set up a website for
yourself, then YourName.com can be a great option.
Memorable & Catchy
There are millions of registered domain names, so having a domain
that's catchy and memorable is essential.Try using keywords that
describe your business and the services you offer
Appropriate Extension
Extensions are suffixes, such as .com or .net, at the end of web
addresses. These can have specific uses, so make sure to choose
one that works for your business. The .com domain extension is far
and away the most popular

SETTING UP WORDPRESS SITE

After you've bought your domain name and set up your hosting, it's time to
get your website up and running. The first thing you'll need to do is install
WordPress to your domain.

Installing wordpress

There are two possible ways to install WordPress

 One-Click Installation

 Manual Installation

One-click Installation

Almost every reliable and well-established hosting company has integrated

1-click installation for WordPress, which makes getting going very easy.
If you signed up with Bluehost or Hostgator or any other similar hosting
company, you should find your '1-click installation' in your account control
panel.

Here are the steps you should follow (should be similar/same on all the
major web hosting companies):

1. Log in to your hosting account.

2. Go to your control panel.
3. Look for the "WordPress" icon.
4. Choose the domain where you want to install your website. Click the
"Install Now" button and you should get access to your NEW
WordPress website.

Bluehost Control Panel Page

Hostgator Control Panel Page

Manual Installation

In some rare case (some hosting companies don't provide one-click-install

for WordPress) you don't have the possibility to install WordPress
automatically, look this manual guide below

1. Download WordPress from here: http://wordpress.org/download.

2. Create a new folder on your desktop and unzip WordPress in it.
3. Look for a file named wp-config-sample.php and rename it to: wp-
config.php.
4. Now open the wp-config.php (with notepad for example) and fill the
following lines: define('DB_NAME', 'database_name_here');
Database name (if you don't know it, ask this from your hosting
support) define('DB_USER', 'username_here'); Your hosting
username define('DB_PASSWORD', 'password_here'); Your hosting
password After you have filled the gaps, save the file.
5. Now log into your hosting ftp (download FileZilla for that). The FTP
address is usually ftp.yourdomain.com, username and password are
the same that you used to register to your host.
6. If there is any file named 'index' - delete it. After that upload all the
files from your WordPress folder to your FTP server. You can use
"drag n drop function in FileZilla.
7. Once you have completed the previous steps, go the URL:
yourdomain.com/wp-admin/install.php
This is the page you will see:

CHOOSING THEME FOR THE SITE

After successfull installation of WordPress to your domain, you'll see a very

basic clean site.

To change the default basic design of the site to a professionally designed

site, we need the a theme - a design template that tells WordPress how
your website should look. In wordpress there are thousands of awesome,
professionally designed themes you can choose from and customize for a
site by yourself.

How to find the theme you like

1. Log into your WordPress dashboard

To log into the wordpress dashboard type in: http://yoursite.com/wp-admin

(replace 'yoursite' with your domain).

This is what the WordPress dashboard looks like

2. Accessing Free Theme

Once you're in the dashboard, you've got access to over 1500 free themes!
Just look along the side bar for 'Appearance' and then click 'Themes'.
Installing a theme is very easy and self-explanatory.

This is Wordpress Theme Page

You can search for specific keywords and/or use filters to find themes that
suit your style. Finding the perfect theme can take a while, but it's worth
it.You should also look for themes that are 'responsive', as this means they
will look good on any mobile device. If you want something more
professional or elegant than what you find here, there's a HUGE library of
paid professional themes to pick from at varying costs.

3.Installing New Theme

After you have found a theme you like, installing it is as simple as clicking
'Install' followed by 'Activate',Changing themes won't delete your previous
posts, pages and content. You can change themes as often as you want
without having to worry about losing what you've created.

Adding Contents and New Pages

With your theme installed, you're ready to start creating content.

Adding and Editing Pages

Want to add a Home page, or an About Me page

1. Look along the sidebar in the WordPress Dashboard for Pages -> Add
New.

2. Once you've clicked, you'll find a screen that looks a lot like what you've
maybe seen in Microsoft Word. Add text, images and more to build the
page you want, then save it when you're done.

Adding Pages to Menus

To add your new page to the navigation bar Menu

1. After creating the page, Save any changes you've made to the page by
clicking Update

2. Click Appearance -> Menus in the sidebar of the WordPress Dashboard

3. Find the page you created and add it to the list by clicking the checkbox
next to it and then 'Add to Menu'.
Adding and Editing Posts

If you have a blog on your website, Posts will be where you turn to next.
You can use different categories to group similar posts, If you want to add a
blog to your website, you can use different categories and posts. Let's say
you want to create a category named 'Blog'. To do so, simply add it to your
menu and start making posts.

Customization

These are the various customization you can do in your Wordpress site

Changing Site Title & Tagline

The Page titles explain to searchers what your website is about, and
they're also a big part of how search engines determine your rankings, so
you want to be sure they've got the keywords you want to target the users.
You should use a unique title on every page of your site.

Taglines are added at the end of titles across every page.

In order to change the title and tagline on your website, go to 'Settings ->
General' and fill the desired title and tagline in the form

Setting Up Static Front Page

A static page is a page that doesn't change. Unlike a blog, where the first
new article will show up at the top every time, a 'static' page will show the
same content every time someone visits the site.

1. Go to 'Settings -> Reading', Choose a static page that you have created.
Front Page' denotes your home page, 'Posts page' is the front page of your
blog .

2.If you don't choose a static page on your own, WordPress will take your
latest posts and start showing them on your homepage.
Editing sidebar

Most WordPress themes have a sidebar on the right side in some cases it's
on the left, If you want to get rid of the sidebar or edit out items you do not
need like Categories, Meta and Archives, which are usually pointless, here
is the procedure

1. Go to 'Appearance -> Widgets' in the WordPress Dashboard.

2. From the widgets menu, you can use drag n drop to add different boxes
to your sidebar, or remove the items you don't want.

Wordpress Plugin
What is Plugin ?

Plugins are extensions that are built to expand WordPress capabilities,

adding features and functions to your site that don't come built-in. They're
shortcuts to getting your site to do what you want to, without having to build
the feature from scratch or do any coding.

You can use plugins to do everything from adding photo galleries and
submission forms to optimizing your website and creating an online store.

How to Install Plugin

To install plugins, go to 'Plugins -> Add New' and simply start searching,
there are over 25,000 different FREE plugins, so you've got a LOT to
choose from. Installation is easy once you find a plugin you like, just click
"Install" and "Activate it".

These are the steps to build Fully Functional Wordpress Site

BUILDING WEBSITES WITH JOOMLA

Joomla is one of the largest and most famous FREE open source projects
next to WordPress, With origins all the way back to 2000, Joomla is
responsible for many innovations in the PHP / MySQL space that includes
WordPress, Drupal, Magento and so many others.

As Joomla continues to thrive in 2015, Joomla remains the second most

popular content management system (CMS), behind only WordPress.
Joomla is responsive because the Joomla team decided to adopt the
Bootstrap framework. The use of Bootstrap makes Joomla 3 attractive for
front-end designers, but it also makes it easy for developers to create
interfaces for their code.

Installing Joomla

To start building websites with joomla, Domain Registration and Hosting

should be done first, to install Joomla - you have two options. For both
ways, you'll need a hosting and domain name.

There are two possible ways to install Joomla

 One-Click Installation

 Manual Installation

One-Click Installation

Almost every reliable and well-established hosting company has integrated

1-click installation for Joomla, which makes getting going very easy.

If you signed up with Bluehost or Hostgator or any other similar hosting

company, you should find your '1-click installation' in your account control
panel.

1. Log in to your hosting account.

2. Go to your control panel.
3. Look for the "One-click Install" icon and click that to proceed.
4. Now you'll be redirected to a page where you'd be able to install
Joomla for free with one-click-installation
 5. Once you have clicked on the 'Install' button, you'll be able to choose
a domain that you have bought, the white box after / (slash) can be
left blank. If you choose to write, something let's say 'Joomla' - your
site will be installed to YourNewDomain.com/Joomla. If you leave it
blank, it'll be installed straight to your root domain -
YourNewDomain.com (recommended option).
6. Installing Joomla to your domain can take a while (2-10minutes),
Once the install has been finished, you'll be able to see the login
credentials for your new Joomla website. If you can't see them for
some reason, make sure you check the Notification Center.

Installing Joomla Manually

1. Download Joomla from http://www.joomla.org/download.html

2. Extract the archived joomla file and Move the downloaded Joomla
installation package to the server. Use a FTP Client to transfer the
Joomla files to your server. There are several FTP Client available for
use, FileZilla is most popular one.
3. Now log into your hosting ftp (download FileZilla for that). The FTP
address is usually ftp.yourdomain.com, username and password are
the same that you used to register to your host.
4. If there is any file named 'index' - delete it. After that upload all the
files from your Joomla folder to your FTP server. You can use "drag n
drop function in FileZilla. The other option is directly uploading the
Joomla files in the cpanel File Manager in the Public_html directly .
5. Run the Joomla installation wizard. Enter the URL for your site (for
example, http://www.your-page.com) in your browser. Or if you
uploaded it to a sub-folder, go to: http://yoursite.com/JoomlaFolder/ .
It is a 3 step process

It is a 3 step process

6. The other important thing in the process is setting up the database,

It's smartest to use a MySQL database to install Joomla, but Joomla
does also support MySQLi and PostgreSQL.
7. In the database Section of the installation, Enter your database's host
name, username, password and other required details, Joomla will
automatically generate a random table prefix to make the site very
much secure
 8. The final installation screen offers you the choice of different sample
data. Lower down the page is an overview of your configuration
settings. Joomla also checks to make sure that your server is
properly set up. If anything needs correcting, it will be marked in red.
After Checking everything click Install.

After completing all the steps you will see a progress bar and then a
Congratulations! screen to confirm the successful Joomla installation

Joomla Website

After successfull installation of Joomla to your domain, you'll see a very

basic clean site setup like a blog.

Logging Into Joomla Site

To access the Admin Interface Add the word /administrator/ to the URL of
your site. For example, http://YourNewDomain.com/administrator/

Login using the admin username and password that you created during the
installation process. The main toolbar across the top of the screen contains
everything you need to manage your site, the Control Panel you see after
first logging in contains useful shortcuts and information based on that main
toolbar.

Posting Contents
To write content in Joomla Website go to the main toolbar, then Content,
then Article Manager. There are only three things you need to do to publish
your first article:
 Title

 Category
 Body text

After entering all the contents, click Save to publish your article.Click your
Site Name in the very top left corner of the screen, You'll now see your
article published at the top of the homepage.

Templates & Components

A template is a type of Joomla extension that changes the way your site
looks. There are two types of templates used by the Joomla CMS: Front-
end Templates and Back-end Templates. The Front-end Template controls
the way your website is presented to the user viewing the website's
content. The Back-end Template controls the way your website's
administrative tasks are presented for controlling management functions by
a Joomla Administrator. These would include common tasks such as: user,
menu, article, category, module, component, plugin and template
management. The template can be accessed from main toolbar, go to
Extensions, then Template Manager.
Components

A component is a kind of Joomla extension. Components are the main

functional units of Joomla; they can be seen as mini-applications. An easy
analogy would be that Joomla is the operating system and the components
are desktop applications. Created by a component, content is usually
displayed in the center of the main content area of a template (depending
on the template).

Most components have two main parts: an administrator part and a site
part. The site part is what is used to render pages of your site when they
are requested by your site visitors during normal site operation. The
administrator part provides an interface to configure and manage different
aspects of the component and is accessible through the Joomla
administrator application.
Joomla Extension

An extension is a software package that extends your Joomla! installation

in some way. A small selection of extensions is included with the default
Joomla! installation but many more are available from
http://extensions.joomla.org.

There are now about 9000 extensions in categories from 'Access &
Security' to 'Style & Design'. The directory's full name is the Joomla
Extension Directory, or the JED for short.

One major difference between the JED and the WordPress plugin directory
is that any extension can be listed, regardless of whether or not they have
a free version. So, it's fair to say that the JED really does contain every
Joomla extension worth using.

The JED has an active review and rating system. Some of the most popular
extensions on the directory have 100's of reviews and each one is rated
according for its functionality, ease of use, documentation and support.

These are the steps to build Fully Functional Joomla Site

BUILDING WEBSITES WITH DRUPAL

Drupal a free and open-source content-management system and third most

popular CMS behind Wordpress & Joomla, it provides a back-end
framework for at least 2.2% of all Web sites worldwide ranging from
personal blogs to corporate, political, and government sites.

As of April 2015 the Drupal community, comprising more than one million
members (as of October 2013)and over 30,000 developers (as of February
2014),has contributed more than 33,000 modules that alter and extend the
core capabilities, behavior, and appearance of a Drupal site.
Getting Started

To start building websites with Drupal, Domain registration and Hosting

should be done first.

Installing Drupal

 To Download Drupal visit http://drupal.org/project/drupal and click on

the verison of drupal you want and download it.
 Log in to your hosting account's control panel and in File Manager,
Navigate to your HTML directory.
 Upload your compressed .tar.gz or .zip file to the Html directory. Most
of the Hosting service providers allows you to upload a compressed
file and un-archive ('uncompress' or 'unzip') the file-set on the server.
 Rename the folder from its current name: "Drupal-X.X" to the name
you want to use to refer to your site, such as "mysite Name"

Creating Configuration File

 In order to set up your new site, it is necessary to be able to modify

the settings.php file . By default when you unarchive these files, only
the default.settings.php file exists and the permissions are set to
Read Only.
 In your Cpanel file manager navigate to the /sites/default directory,
Select the default.settings.php file (usually done by checking a box
next to the file)Copy the file, naming the new copy 'settings.php'.
 To Change the permission of the settings.php, In file manager select
the file "settings.php" and click on permissions. Add the permissions
for the file to be written by the web server (i.e. web users). If your
system is asking you to use a numeric value to CHMOD the file you
will want to use 666, this will set the file to be written by anyone.
Save your changes.

Creating Drupal Database

You must create a new, empty database for Drupal to use. You must also
add a user who has full access to this newly created database.

 From your control panel, open phpMyAdmin. In the Create new

database field, type the name you want to use for your new Drupal
database and then click Create.
 Click the Privileges tab and Click Add a new User.
  In the User name field, type the username that you want to add (this
will be the username for site to access the database, not your own
username).
 In the drop-down menu beside the Host field, select Local. In the
Password and Re-type fields, type a password to use for the new
user.
 In the "Database for user" section, select "Grant all privileges" on the
database you just created.In the "Global privileges" section, leave all
of the global privileges checkboxes unselected. Click Go.

Running the Installation

 Using your web browser, navigate to the base URL of your new
website, e.g. http://www.example.com. When you go to your new
website, you should see the Drupal installation page. The installation
wizard will guide you through the process of setting up your Drupal
website .
 On the Select an installation profile page, select Standard. Click Save
and continue.On the Choose language page, select English. Click
Save and continue.

 On the Database configuration page, select the type of database that

you are using. Type the database name, database username and
database password (the same ones you used to set up your
database).
 On the Configure site page, In the Site name field, type the name you
want to give your site. In the Site email address field, type the email
address that automated messages from your Drupal site will be sent
from.
 In the site maintenance account section, type a username, email
address and password to use for the maintenance account. In the
server settings section, select a country from the list and then select
a time zone.
 If desired, select Check for updates automatically and Receive email
notifications (recommended to keep your site's security up to
date).Click Save and continue.
  After completing all the above steps you will see installation complete
page, click the Visit your new site link. You should see a newly
installed Drupal homepage, as shown in the screenshot below.

Changing Site Information

After setting up the drupal the first thing you may want to do is change the
boring "My Site" title. To change the site name, go to "Configuration" ->
"Site Information". In the Site Name field, enter the name of your site. If you
have a catchy slogan, you can type it into the Slogan field. This might be
your tag line, catch phrase or simply some details that better explain what
your site is all about.

Adding New Theme

You may want a different theme from the original theme that appears on
installation. There are not many choices that come with the stock
installation. To find additional themes from the Drupal site, navigate to the
Appearance menu and then click Install New Theme. Click "Themes" and
you will be taken to the Themes section at Drupal.org. Filter to find themes
that work with that version. Quick tip: You can sort by Most Installed,
Relevancy, Title and more. For example, if you wanted a particular Theme,
locate the link to the latest Drupal version, and right-click it to copy the URL
address. Back at the site, copy the address into the Install From a URL field
box. Click Install. Then click Enable Newly Installed to successfully change
the theme

Creating About me Page

One of the most viewed web pages on every site is the About me page.
Web visitors intuitively want to know what a site is about and who is behind
the scenes. In this section we will see how you can set up a simple page;
such as About me. Simply navigate to "Content" -> "Add Content" -> "Basic
Page". Type "About Us" in the title and add relevant information in the
body.
To get the About page to appear in the main menu, under Menu Settings
check the box Provide A Menu Link. Save the page and you should be able
to see About Us in the main menu. To change the order of the items,
navigate to "Structure" -> "Menus" -> "Main Menu". The items can be
shifted around by grabbing the little crosses with the mouse and dragging
them up or down.

Adding Modules

One of the Drupal's strengths is a large dedicated and supportive

community. They have contributed some excellent modules, often called
"contrib modules" to the Drupal system for everyone to use. You can find
the modules at: https://www.drupal.org/download

Installing Modules

Download the zip or tar file. Extract that to your

/sites/all/modules/{modulename} folder directory of the Drupal installation
on your webhost. To finish, you should enable the module in the
administration section of your site.

Some of the Usefull Modules

Admin Menu Module

To add admin menu module, First turn the existing "Toolbar" off. Then
activate the Admin Menu module which gives you cool drop-down menus of
the entire admin area. This one module will save you a ton of time as it
saves you from having to load a ton of pages to get to the single admin
function you are looking for.

CKEditor Module

Drupal 7 does not provide a default WYSIWYG text editor but Drupal 8 has
WYSIWG as standard. WYSISYG stands for What You See Is What You
Get, which provides a visual HTML textarea editor, similar to popular word
processors, making text more visually appealing and easier to format.

CKEditor is a popular solution to get WYSIWYG functionality in drupal 7. It

was recently improved to be faster and easier to use. To make CKEDitor
work, after you install the Drupal module, you must also download the
standalone CKEditor from download section at CKEditor.com. Then unpack
those contents into the sites/all/modules/ckeditor/ckeditor directory on your
Drupal site.
IMCE Module

IMCE helps you add images to you posts. It is a browser and uploader that
worked with CKEDitor text editor. After installing IMCE and enabling it, go
to "Configure-> Content Authoring -> CKEditor -> Profiles -> Advanced ->
Edit -> File Browser Settings". Then select IMCE from the dropdown menus
for the link dialog window, image dialog window and flash dialog window
and Save the settings.

Pathauto Module

Drupal's built-in Path module lets you create better URLs. Pathauto relieves
the drudgery of doing this on every post, especially if you are working with
end users who may neglect this. You can assign custom replacement
patterns and user account page paths so the URLs match your SEO and
usability standards. However, Pathauto requires the Token module.

Token Module

Tokens are little sections of text that are placed via a placeholder system.
With Drupal 7, much of the functionality of the Token module has been
written into Drupal core, but some module still requires it.

Quicktab Module

Quicktabs creates great tabbed views, nodes and blocks quickly and easily
without writing custom JavaScript. After installing and enabling the module,
you'll find a Quicktabs selection under the Structure menu.

Drupal 8 Features

Drupal 8 is the latest and more advanced and capable than version 7, For
developers and designers, Drupal 8 has adopted much of the Symfony
stack. This means that large parts of Symfony2 are in the codebase, and
themes now use the Twig templating language. Drupal 8 is architected to
support mobile-first initiatives, enabling responsive experiences across
screens as well as supporting mobile apps.

For site-builders, Drupal 8 will be significantly more capable than Drupal 7.

The new version includes many popular modules that were only available
as add-on modules in Drupal 7. The hugely popular Views module is now
part of the Drupal 8 core, and so are fields such as Date, E-mail, Link and
Telephone Number.

For content-administrators, there's front-end editing, so you can click on

almost any part of the site and edit it without leaving the page.

These tips should provide a nice foundation to get you up and running on your new
Drupal site