Web Design and Development

A REPORT
ON
(Web Design and Development Joomla, WordPress and Drupal)
BY
Name (s) of the student (s)
J Surya Teja
Kotyada Chandra Vardhan
ID.NO.(s)
2014AAPS024H
2014B5A3740H
AT
Centre for Development of Imaging Technology, Trivandrum)

A Practice School I station of
BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

(July, 2016)
Joomla
WordPress
Drupal
A REPORT
ON
(WEB DESIGN AND DEVELOPMENT JOOMLA, WORDPRESS & DRUPAL)
BY
Names of the Students
J Surya Teja
ID Numbers
2014AAPS024H
2014B5A3740H
Discipline
B.E(Hons.) ECE
M.Sc Physics B.E.(Hons.) EEE
Prepared in partial fulfilment of the

Practice School-I Course
BITS F221
AT
(Centre for Development of Imaging Technology, Trivandrum)

A Practice School-I station of
BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

(July, 2016)
Web Design and Development
Joomla
WordPress
Drupal
ACKNOWLEDGEMENTS
We thank our institute BITS Pilani, Hyderabad for allowing us to explore and learn the
industry and the managerial world at an early stage. We heart fully thank the Centre for
Development of Imaging Technology, Trivandrum (C-DIT) for permitting us to pursue
our interest and research in their web services department. Our sincere thanks to Mr.
Rajesh, Web Developer, Web services department, C-DIT for providing us with necessary
prerequisites and insight into web designing. We thank our instructor Dr. Murari Raja Raja
Varma for his guidance, that made this work possible. We would not forget the efforts of
Mr. N Jayaraj, coordinator, who helped our communication with the authorities lay smooth
and Mr. G Jayaraj, registrar for his cooperation with our project. Lastly we thank Ms.
Manju and Mr. Raja Chandran Nair for providing us flats to stay and continue our work
here. Not to forget we thank Mr. Unni, the care taker at our place for his kind attitude
towards us.
Joomla
WordPress
Drupal
BIRLA INSTITUTE OF TECHNOLOGY AND SCIENCE

PILANI (RAJASTHAN)
Practice School Division
Station: Centre for Development of Imaging Technology
Centre Trivandrum
Duration 23rd May,2016 16th July, 2016
Date of Start 23rd May,2016
Date of Submission 14th July,2016

Title of the Project: Web Design and Development Joomla, WordPress & Drupal
ID No
2014AAPS024H
2014B5A3740H
Name(s)
J Surya Teja
Name of the Expert:

Mr.Rajesh
Discipline(s)/of the student(s)

B.E(Hons.) ECE
M.Sc Physics, B.E(Hons.) EEE
Designation:
Web Developer, Web Services Department, C-DIT
Name of the PS
Faculty:
Dr. Murari Raja Raja Varma
Key Words:
Content Management System, Web Server, chmod
Project Areas:
Abstract:
Web designing and Content Management
The following text in the report discusses in brief with content management systems and
Joomla, one of the CMSs available. The literature further moves with deeper discussion
of WordPress and Drupal CMSs. The main report gives brief discussion on installation
and detailed description of the websites. The Appendix section affixed at the end provide
a detailed discussion on installation, error handling and links to supporting sites. The
motive behind creating our websites and the report is to provide a detail on parts of Drupal
and WordPress modules. We want the web developers to grow and the beginners not to
be taken back. This intention drives us to move deeper into the modules and improve our
website on tutorial.
Signature(s) of Student(s)
Signature of PS Faculty
Joomla
WordPress
Drupal
CONTENTS
ACKNOWLEDGEMENTS ....................................................................................................... 3
Abstract .................................................................................................................................. 4
CONTENTS ............................................................................................................................... 5
Centre for Development of Imaging Technology, Trivandrum ................................................. 7
Content Management System .................................................................................................... 7
JOOMLA ................................................................................................................................... 7
WORDPRESS ............................................................................................................................ 8
Creation of Website using WordPress ................................................................................... 8
Creating Pages and Posts ....................................................................................................... 8
Adding Image Slider .............................................................................................................. 9
Install Themes ........................................................................................................................ 9
Installing WordPress Plugins ................................................................................................. 9
Installing Menus and Widgets.............................................................................................. 10
User ...................................................................................................................................... 10
Editor .................................................................................................................................... 11
Creating a Contact Form ...................................................................................................... 11
Multilingual Pages ............................................................................................................... 11
Automatic machine translator: ......................................................................................... 11
Semi-Automatic Translator: ............................................................................................. 11
Human Translator: ........................................................................................................... 11
WordPress Multisite:........................................................................................................ 11
DRUPAL AND XAMPP ......................................................................................................... 12
THE DRUPAL HOME PAGE ................................................................................................. 12
Content ................................................................................................................................. 12
Creating Content Types and Content: .............................................................................. 13
Publishing Content: .......................................................................................................... 13
Structure ............................................................................................................................... 13
Blocks: ............................................................................................................................. 13
Menus: .............................................................................................................................. 14
Appearance........................................................................................................................... 14
Theming in Drupal: .......................................................................................................... 15
Modules ................................................................................................................................ 15
Configuration ....................................................................................................................... 15
Joomla
WordPress
Drupal
System: ............................................................................................................................. 15
Content Authoring: .......................................................................................................... 16
Regional and Language:................................................................................................... 16
Multilingual Pages ............................................................................................................... 16
Translating the Content: ................................................................................................... 16
Language switcher: .......................................................................................................... 17
CONCLUSION ........................................................................................................................ 17
APPENDIX .............................................................................................................................. 18
REFERENCES......................................................................................................................... 29
GLOSSARY............................................................................................................................. 29
Joomla
WordPress
Drupal
Centre for Development of Imaging Technology, Trivandrum

Also known as C-DIT, a scientific and research institute under Government of Kerala is located
in the picturesque Chitranjali hills, Thiruvallam. Since its inception in 1988, for the
advancement of research, development and training in imaging technology has been
functioning as Total Solutions Provider in IT and Communication fields in the Government
sector. The organization has successfully lived the mission that it put for itself. We became
trainees at C-DIT as a part of our Practice School I program. We were allotted to the Web
Services department and our project started there.
The Web Services department expertise to implement almost all web-solution applications with
designing, hosting, domain registration and web-development. We were required to perform a
study on the content management systems, weigh the comparisons and design websites on
Joomla, WordPress and Drupal modules.
Content Management System

A Content Management System is a computer application that supports the creation and
modification of digital content using a common user interface and thus usually supporting
multiple users working in a collaborative environment. A web content management system is
designed to support the management of the content of web pages. Web content includes text
and embedded graphics, photos, video, audio and code that displays content or interacts with
the user. [1]
The content management systems are classified according to the platform on which they are
designed. The available platforms are Java, Java packages/bundles, Microsoft ASP.NET, Perl,
PHP, Python, Ruby on Rails, CFML Cold Fusion Mark-up Language and Java Script.
JOOMLA
Joomla works on PHP based platform. Joomla is built on a model-view-controller web
application framework that can be used independently of the CMS. Many websites have
requirements that go beyond what is available in the basic Joomla package. In those cases,
Joomlas powerful application framework makes it easy for the developers to create
sophisticated add-ons that extend the power of Joomla into virtually unlimited directions. The
core Joomla framework enables to quickly and easily build:
Application Bridges
Communication Tools
Complex business directories
Custom product catalogues
Data reporting tools
Integrated e-commerce systems
Inventory control systems
Reservation systems
Joomla
WordPress
Drupal
Our study started with the understanding the Joomla framework and designing of websites on
both the World Wide Web and on our local servers. The links to our hosted websites are
provided under the Appendix. With a brief idea of Joomla our study intensified into WordPress
and Drupal. The remaining sections deals in detail with WordPress followed by Drupal starting
covering all the aspects of installation, setting up and creating a working website.
WORDPRESS
WordPress is one of the best CMSs available for the development of web sites. According to
various surveys, WordPress ranks in the top three positions. WordPress is a free and opensource content management system which is based on PHP and MySQL. It is installed on a
Web Server, which can be a online hosted or locally hosted in your system. It includes hundreds
of add-ons and strong community support to help create a fully functional website. WordPress
has an easy-to-use interface and intuitive tools with enough flexibility to be creative. It
provides with all the necessary Plugins essential for the development of an awesome website.
The WordPress backend site (where the administrator do all the modifications in the website)
is flexible and can be easily explored with a little knowledge in the basics in basics of web
design. [2]
WordPress lack site wizards which help in complex tasks by asking the user a series of easyto-answer questions. It also lacks in few tools like search engines and data reports.
Creation of Website using WordPress
After done with the installation process WordPress Admin site can be opened with the
credentials generated during the installation process. The site consists of all the tools necessary
for the development of a basic business website. The site consists of options called Dashboard,
Themes, Widgets, Menus, Editor, Plugins, Appearance etc. all the topics that are discussed
further will be explained in detail and how to use those tools to create a website. Little changes
had been made to the code of the website which will be available in the Editor section to make
some animations in the website.
Creating Pages and Posts
WordPress provides with an options called Pages and Posts under Dashboard. Opening them
gives an option to set the title of the content and prompts to enter all the information and images
that will be visible on the website in the block. After entering all the information that is to be
visible in the website and the title of the page or post click on Publish button on the left side of
the page will make all the page visible on the website.
Adding media to the page a few steps need to be followed. Above content block there is an
option named Add Media which allows to add images to the page from the Media Library or
from a location on the system.
To add videos in the pages/posts from YouTube the following steps need to be followed.
1. Open the video in the you tube that to be included in the Website.
Joomla
WordPress
Drupal
2. Under the video Share option is available. On clicking it provides more options in which
there is an option called Embed.
3. Copy the code under it and past it in the Text block in the Page or post screen and update
the page.
4. Open the website and reload it and open the page that holds the video. The video will be
visible along with the information and images.
Another method of adding videos in the Pages is by installing plugins that are available in the
Plugins Page that need to be installed and activated before using it.
FV Player is one of the good plugin available in WordPress which is useful in adding videos
in the website.
Adding Image Slider
One way to add image slider to the website is by installing slider plugin. One of the plugins
available in the WordPress in Easing Slider which has been used for creating our website.
The Easing Slider can be installed from plugin page in the admin site.
After installing and activating the plugin an option named Slider will be displayed under
Dashboard. Clicking on it directs to a page where an option named Add Slides is available
and images can be added from the media library or can be uploaded from a different location.
The slider will not work until the short code which is available in the Slider page is pasted in
the header code which can be opened by clicking on the Editor and on the right side there
will be plenty of PHP codes for each part of the template. The Header.php file is to be selected
and the code snippet from there is used as the following. The Slider page under <div function
and change the ID in the code to your page ID and click update.
Now there is a beautiful slider can be seen in the website. The effects of the slider can also be
change from fade to slide and can also set the time of the effects from the Slider Page.
Install Themes
WordPress provides a large collection of themes, some are ready to install themes and need to
be downloaded from the WordPress website. To install themes, navigate to themes under
Appearance and select a theme based on the following options Featured, Popular, Latest,
Favorites. Favorites option allows to select a specific theme with specific color, layout,
subject and features and will show themes that satisfy the search specifications.
After selecting the Theme which for the website that is going to be created click on Customize
button which adds the theme to the website. The theme provides a basic layout which need to
be customized as per the requirements of the administrator.
Installing WordPress Plugins
Plugins allow the admin to add more features to the website that are not provides by default. It
provides tools to protect the browser from spam, add features like translators etc.
Installing Plugins gives admin the access to make modifications in the code of the plugin for
the better functioning of the website and sometimes it is essential to add some code to the
Joomla
WordPress
Drupal
templates that is provided by the plugin after installing to activate the plugin and make it
functional.
Installing Menus and Widgets

In website menus there exist shortcuts for pages. To add menus, the admin should first create
pages with some titles that are required to be displayed as menus. After creating pages navigate
to the Menus page under Appearance and on the left there are all the pages that have been
created and to add them as menus select all the pages that are required to show in the navigation
bar and click on add meus.
On clicking Add menus, brings all the pages to the right side where the location of the menus
can be adjusted by drag and drop feature provided by default. Sub menus can also be created
the same way.
After done with the sorting the menus, the location of the menus need to be selected by
selecting one of the four options Main Navigation which gives location under the header
image. Top Navigation which provides the location above the header. Footer Navigation
below the website and Social Icon which provides the top right corner in the theme which is
more suitable for social websites like Facebook, twitter, google plus etc., After selecting the
specific location click on Save Menu which adds the menus to the specified location.
Widgets are like small blocks which shows the recent posts, pages available in the website,
calendar, comments box which makes the website more flexible and easy for the users. To add
Widgets, navigate to Widgets page under Appearance. All the essential widgets are available
on the left side of the page and the only thing that the admin need to do is to drag all the
necessary widgets to the right side box and set the positions and click on save button.
The position of the Sidebar where all the necessary widgets are placed can also be specified
either left or right by going to Appearance Customize theme option General settings.
Under theme options click on left sidebar or right sidebar according to the preference and click
on Save and Publish which adds the sidebar with the selected Widgets in the Website.
To add social icons, open the Menus page and enter the URL that need to set as a social icon
in the Custom Links. After adding all the URL of the social websites that are to be set as
social icons click on Add Menu and select the location as Social Icon and click on save and
publish. which will add all the social icons to the specific location in your website. WordPress
provides icon images for some websites which can be checked from the Editor page and search
for social-icons which will show all the websites that are provided with icon images.
User
User option is available in the Appearance and allows the admin to give permissions to create
a new website by giving the user the privileges of admin and providing the user with their
respective login credentials. This is helpful in creating more than one website with different
administrators working on the same server.
Joomla
WordPress
Drupal
Editor
The WordPress admin provides an option Editor in which all the PHP code of the templates
and CSS code are visible which gives styles to the website and provides the privileges for the
admin to customize the code and make necessary adjustments to make his website more
appealing.
Creating a Contact Form
An easy way to create a Contact form is by installing and activating Contact Form 7 plugin
from Plugins page.
After activating the plugin, the admin site displays an option called Contact under Dashboard.
Click on Contact form under Contact and click on Contact form 1 which directs to a page
where there is a small code that needs to be pasted in the Text box of the Contact page and
then click on publish. The contact form appears in the Contact Us page of the website.
Multilingual Pages
It is possible to make the website multilingual with many plugins available in WordPress
Plugin site.
There are three types of translators available in WordPress: [3]
Automatic machine translator:
This plugin translates the whole content including pages and posts with the help of
Google translator. Sometimes the sentences that are translated by google translator
render no meaning. This option is not much reliable. Google Language Translator is a
Plugin available in WordPress which uses Google Translator to translate the content in
website.
Semi-Automatic Translator:
Another translator which performs both, the automatic translation and also provides the
admin to translate the content manually where the sentences or words make no
meaning. In WordPress there is a plugin, Transposh which comes under the present
category.
Human Translator:
This translator required the user to translate the whole content manually.
WordPress Multisite:
WordPress allows to create multiple site which share the same WordPress installation.
They can share themes and plugins. The individual sites are virtual sites, that they do
not have their own directories on the admin server.
This will allow the administer to create one website per language.
Joomla
WordPress
Drupal
DRUPAL AND XAMPP

Drupal is the best choice for creating a powerful website capable of supporting a large amount
of traffic and managing extensive numbers of pages. Drupal is a well-known content
management system specially created for advanced designers to help you create a powerful
website capable of handling large volumes of visitors and hundreds of pages of content. Drupal
is so flexible it can create a simple blog as easily as impressive, interactive business sites. This
flexibility makes this CMS as a great solution for a growing business with ever-changing
website needs.
Drupal has a robust community support, including IRC channels and face-to-face meetups. It
has more than 6000 modules, making it highly extensible. A large number of companies offer
commercial support for Drupal. However, it can also be overkill for simple sites. A lack of
really high-quality free and commercial themes and its complicated theming system make it
less effective. [3]
While the selection of themes and templates isnt as executive as other CMS solutions, Drupal
does have a very active community with enough support for developing your business website.
While there are some tolls to help you easily create a basic blog or website, most of the tools
and functions have been developed to support large amounts of site traffic and managing large
volumes of content.
As mentioned any CMS can be installed on a local server such as WebMatrix, XAMPP,
WAMP, LAMP and more. WebMatrix, being discussed earlier, usage of XAMPP will be
discussed for the installation of Drupal module. Before going into installation and usage it is
important to discuss about XAMPP. It stands for Cross linked Apache MySQL Perl PHP. The
X in XAMPP, cross linked is to indicate that it works on both Windows and Linux platforms,
where it is WAMP in Windows and LAMP in Linux. Installation of XAMPP, WebMatrix,
WordPress and Drupal are discussed under the Appendix section.
THE DRUPAL HOME PAGE

(Administer Panel)
The administer panel holds the following tabs namely Dashboard, Content, Structure,
Appearance, People, Modules, Configuration, Reports and Help. The report flows in the same
order. The literature that follows discusses about Content, Structure, Appearance, Modules and
Configuration in detail and keep the remaining to be discovered and understood by the user.
The discussed sections only include the most important things to be discussed and leave the
remaining to be explored by the user.
Content
The Content tab holds the necessary arrangements for the content to be created and modified
according to the content types. One can filter the type of content they wish to see in their
administration panel, which helps to find any article if there are many. From the next dropdown
menu, one can perform desired actions collectively over a group of articles. This includes
Joomla
WordPress
Drupal
publishing/un-publishing, deleting and many more. It is also possible to edit or delete your
articles from here.
Creating Content Types and Content:
Though the Content type is a part of Structure tab, it is essential to be discussed here, under the
Content section for better understanding. The user may find a dark colored button at the topleft corner of the administer panel with the text add content on it. This button is used to create
content. There exist two types of content by default. The Article and The Basic Page. Content
types that the user creates also appear under this section.
To begin creating content the user may select from the default content types or start creating
content type or edit the existing content types according to the requirements. To add a content
type, navigate to the structure menu and open content types. Click on add content type and add
the required fields and save the configuration. After coming back to adding content the created
content type appears along with the default types. Any of the content type can be selected
according to the use of the user and after finishing it is necessary to save the content.
Publishing Content:
After the content is created and saved it appears on the front page of the website by default. If
observed the content appears to be aligned to the left, with different lines of different length.
To correct this and make the length of each line equal, open the content and enclose each
paragraph in the line of code mentioned in the Appendix.
Under the body, the default text editor appears and is set to Filtered HTML. For the content to
be properly aligned after adding the code snips it is required to change the editor to Full HTML
and save the content. All the contents appear on the front page by default. This is undesired
most of the time and is recommended to edit the publishing aspect of the content. At the end
of the content created, just above the save button, there is a provision to add a menu link for
the content and under the publishing settings the box beside promote to front page should be
unchecked and then the content should be saved. This prevents the content from being
projected to the front page and the website appears organized with all the content at their
respective places.
Structure
The Structure tab holds the following Blocks, Content Types, Menus and Taxonomy. The
Structure section holds the backbone of the website, by arranging the necessary modules for
the website.
Blocks:
This page provides a drag-and-drop interface for assigning a block to a region, and for
controlling the order of blocks within regions. Since not all themes implement the same
regions, or display regions in the same way, blocks are positioned on a per-theme basis. Any
changes made will not be saved until the Save blocks button at the bottom of the page is
Joomla
WordPress
Drupal
clicked. Click the configure link next to each block to configure its specific title and visibility
settings.
The Blocks page comes handy to organize the position of different available modules at
different positions of the website. It is also allowed to disable or enable any of the modules
according to the requirement. Once can also edit and re-configure the blocks as for the need
and can also add new blocks.
Menus:
The Menu button is to create different menus for easy navigation through the site. By default,
Main menu, Management, Navigation and user menus are listed.
The Main menu section contains the menu bar that is found in almost all the websites. It
consists of links to home, about us, contacts and similar links. New links can be added and
existing ones can be edited accordingly. The Main menu section holds the user defined
navigation panel providing links to different parts of the website. This is the only menu which
is visible to a third person by default who visits the site for their purpose
The Management section consists of what we see at the top of the website holding the bar that
consists of home icon, Dashboard, Content, Structure and so on. This is created by default and
is helpful for the management of the website.
The Navigation menu appears on the right side of the web page holding sections to add content
and the feed aggregator which will be discussed later.
The User menu contains links related to the user account and the logout link. This is usually
found on the top-right corner of the Drupal administrator site. This consists of the links to the
account of the administrator usually hidden from the users visiting the site.
It is allowed to create menus as per the requirement and can be positioned at different places
on the webpage according to the Theme. New menus can be added by clicking on the add
menu button and links under the menu, can be termed as sub categories can be added by
clicking on the add link button. The links can be arranged easily with the drag and drop facility
provided in the Drupal module
Appearance
In the appearance section you can edit the current theme or enable/disable themes and make
them default.
It is also possible to install new themes directly from a web location or by uploading a .zip file.
By default, Bartik theme will be the default theme when the Drupal module is installed. Further
the themes can be edited according to the requirements within the constraints of the theme.
Joomla
WordPress
Drupal
The website looks plain with all the default data and template. We shall start by adding new
themes. You can find some good free themes for Drupal in the mentioned link in the Appendix.
The downloaded themes are to be downloaded and enabled, set to default to become a part of
the website. Errors might occur during the installation of themes and are discussed in the
Appendix.
Theming in Drupal:
It is possible to edit the installed theme by making changes to the code to suit the users
requirements. Themes can also be created from scratch by writing the code and creating the
directories. The discussion on modification and creation of themes is presented under the
Appendix section.
Modules
The modules tab allows to extend and customize Drupal functionality with contributed
modules. You can find number of modules in the Drupal documentation and also from other
third party sites. They improve the performance and functionality of the and increase the appeal
of the website. It is very important to keep all the installed modules updated to prevent security
issues and phishing attacks. You can install any number of modules and position them
according to the installed theme and requirement. The installed modules can also be reconfigured to suit the need.
Configuration
The Configuration holds the sections of People, System, Content Authoring, User Interface,
Media, Development, Search and Metadata, Web Services, Regional and Language. The
discussion follows the same order.
System:
The System menu consist the sub categories of Site Information, Actions and Cron.
The Site Information contains the details of the site such as the site name, slogan, number of
articles etc.,
The Actions tab is used to manage the actions defined for the website. There are two types of
actions: simple and advanced. Simple actions do not require any additional configuration, and
are listed here automatically. Advanced actions need to be created and configured before they
can be used, because they have options that need to be specified; for example, sending an email to a specified address, or un-publishing content containing certain text. To create an
advanced action, select the action from the drop-down list in the advanced action section below
and click the Create button.
The Cron tab manages automatic site maintenance tasks.
Joomla
WordPress
Drupal
Content Authoring:
The Content Authoring configures how content input by users is filtered, including allowed
HTML tags. Also allows enabling of module-provided filters. When a content is created, the
text box can accommodate three type of input types by default, allowing one to choose. They
are Filtered HTML, Full HTML and Plain Text. These text formats can be edited accordingly
and also new text formats can be created under this section.
.
Regional and Language:
Under this the following exist.
The Regional settings are the settings for the site's default time zone and country.
The Date and Time configures display formats for date and time.
Though there exist only the above mentioned parts under this section this turns out to be very
important and useful when translation is required to create multilingual webpages and is
discussed in the adjacent section.
Multilingual Pages
Multilingual websites provide more flexibility for the visitors to access the information on the
site in their preferred language and is also handy to the administrators to understand
descriptions of some modules in the website. By default, a Drupal website is created in English.
Drupal website can be made multilingual with the help of a few modules mentioned under
Appendix section.
After installing and enabling the required modules it is possible to begin translating all the
content on the website into different languages. The task is to add translations to every content
of the website including the menu links, the site details etc.,
Any content now opened shows a new, third button in addition to the existing view and edit
button namely, the translate button. Clicking on the translate button leads to a page where
translations can be added to all the enabled languages for the website. After all the translations
are added and when the website is ready to be published the provision for the visitors to view
in different languages has to be provided. To enable this facility, the language switcher block
has to be give some position on the webpage. This is found under the blocks section in
structure. When a position is given to the language switcher block it appears on the respective
part of the website and the visitor is at a choice to view the site in preferred language.
Translating the Content:
For the pages to become multilingual enabling the modules is not enough and translations for
each content need to be added. To translate a content, find the content and click on the translate
button. This directs to a page where the provision to add translation appears. Each enabled
language needs to be provided with a translation to be visible when the language is selected by
a visitor. A page similar to add content appears upon clicking on the add translation button
Joomla
WordPress
Drupal
beside the language. The translated version can be typed in using the indic_script module or
the google input tools application as described under the Appendix.
Language switcher:
After adding all the translations, it is necessary to position the language switcher block at a
position on the webpage, without which the translations added would render useless leaving
the visitor no option to change the language. To add the language switcher to the webpage,
navigate to blocks under Structure and add a position to the Language switcher block. Upon
saving the configuration the switcher block appears in the webpage and enables to switch
between languages available for the website.
CONCLUSION
It is possible to dig into the backbone of the website, which is the code, according to which it
behaves. There exist different types of files including .config, .php, .html, .css, .js and many
more. There codes can be opened in text editor and modifications are allowed, providing more
insight into understanding of the code running at the backend of the website.
The discussions included on Joomla, WordPress and Drupal as they are the most widely used
content management systems across the globe.
Joomla
WordPress
Drupal
APPENDIX
WebMatrix Installation:
The
Microsoft
WebMatrix
is
found
at
the
following
link
https://www.microsoft.com/web/webmatrix/. The WebMatrix has the provision to install any
CMS, everything incorporated into it. Before installing any CMS MySQL needs to be installed
on the system and the WebMatrix prompts the same. The password for the database need to be
remembered as it will be required many times in the future. The default user name is root and
cannot be changed. After MySQL is installed, WebMatrix prompts to continue with the
installation of selected CMS.
WordPress Installation:
The WordPress module is available incorporated into the WebMatrix, can be downloaded and
installed. The details that the WebMatrix pops out after finishing the installation of WordPress
need to be stored carefully as they are required further during the local installation of
WordPress. The WebMatrix then redirects the browser to the installation wizard and after
accomplished successfully, the WordPress website is ready to be modified according to the
requirements.
XAMPP Installation:
XAMPP can be found at the following link. https://www.apachefriends.org/download.html
After downloading, run the setup as administrator and proceed with the installation as directed
by the panel. It is a good choice to install the XAMPP server on drive other than where the
operating system is installed, to avoid some errors that might occur post installation.
After the XAMPP server installation is finished run the control panel and if there are no red
lines, describing errors in the log, it is clear that the installation was successful. Now start the
Apache and MySQL by clicking start beside them. If they start without any errors, they appear
in green with the status running. If they are unable to start and the log shows some errors, they
show up in red. The errors are discussed later in this section. Open the browser and type
localhost in the search box. If the XAMPP page opens, then the installation finished
successfully and Drupal or any other CMS is ready to be installed on the server.
Drupal Installation:
Any website holds data in it. All the data and information of the website is stored as a database
on the server. It is necessary to create a database for the Drupal module. In the browser open
the following page. http://localhost/phpmyadmin which opens the administration of XAMPP
server. Under the database section create a database and name it as Drupal. The database is
created and is listed on the left side of the page.
Download the Drupal module from the Drupal Project Page https://www.drupal.org/project/drupal
. Create a folder with the name Drupal in htdocs folder in the XAMPP folder and extract the
Joomla
WordPress
Drupal
Drupal files into it. In the browser open the following page. http://localhost/drupal . The
installation page of Drupal opens and follow the instructions as directed by the installation
wizard. For more detail on Drpal installation refer to the following page.
http://drupalkar.com/en/tutorials/install-drupal-7-locally-xampp After the installation is finished the
browser directs to the newly created website. The website can be accessed anytime with the
Apache and MySQL turned on in the XAMPP control panel by navigating to the following
page. http://localhost/drupal .
Modifying an existing theme:
Most of the themes with the slideshow module allows only three images to be uploaded to be
shown on the slides. But if required it is possible to add more pictures to the slider by adding a
few lines of code depending on the theme.
In the XAMPP folder navigate to the following location. XAMPP htdocs drupal sites
all themes your installed theme theme-settings.php
The .php file is to be opened in a text editor and scrolled down until something similar to the
below code appears.
$form['creative_settings']['slideshow']['slide3'] = array(
'#type' => 'fieldset',
'#title' => t('Slide 3'),
);
$form['creative_settings']['slideshow']['slide3']['slide3_desc'] = array(
'#type' => 'textarea',
'#title' => t('Slide Description'),
'#default_value' => theme_get_setting('slide3_desc','creative'),
);
The number of form divisions may differ with theme. The forms for each slide in the slider can
be distinguished by the value in them. In the above code snippet, the value is 3. Copy all the
forms of a single value and paste under the third slide snippet. Change the value to 4. If more
slides are required repeat the process by increasing the value in the form. After adding slides
is finished save and close the file. In the same folder, open the templates folder and open the
page.tpl.php file in a text editor. Scroll down until the following code snippet appears.
$slide1_desc = check_markup(theme_get_setting('slide1_desc', 'creative'), 'full_html');
Add a similar line under the third line with the value changed to 4. The number of lines added
depends on the number of images required. Scroll down further to find something similar to
the below snippet.
<div class="slides displaynone">
<div class="featured">
Joomla
WordPress
Drupal
<div class="slide-image"><span class="img-effect pngfix"></span><img width="976"

height="313" src="<?php print base_path() . drupal_get_path('theme', 'creative') .
'/images/slide-image-2.jpg'; ?>" class="pngfix"/>
</div> 
</div> 
<?php if($slide1_desc) { print '<div class="featured-text">' . $slide2_desc . '</div>'; }
?>
</div> 
Copy and paste the code snipped after the third occurrence and change the value to 4. The
number of times to be copied and pasted depends on the number of images required. Save and
close the file.
To add custom images to the slider, open the images folder in the same folder as above and
replace the images with the names slide-image-1,2 and 3. Add more images with similar syntax
as the name of the image and they will now appear on your slideshow module on the website.
Custom Theme Design:
Themes can also be created but the process is tedious for a beginner and takes a lot of time to
create the directories and add the necessary files to it. To provide an idea and insight into
creating a theme the steps are discussed here.
Create Theme Directory:
Create a directory with the theme name into the sites/all/themes directory.
Logo & Screenshot:
screenshot.png is used for displaying the theme screen view into the theme listing page
at the administration panel. logo.png is used for displaying the site logo.
Create .info File:
Create a .info file into your theme folder and name it with .info extension.
The .info file is static text file for defining and configuring a theme.
Each line in the file is a key-value pair with the key on the left and value in the right,
with an = sign between them.
Some keys use a special syntax with square brackets for building a list of associated
values, referred to as an array.
Regions:
The block regions available to the theme are defined by specifying the key of regions
followed by the internal readable machine readable name in square brackets and
Joomla
WordPress
Drupal
human readable name as the value. In Drupal 7 the following regions are assumed by
default.
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
Custom regions can also be added, by simply adding the same code and replacing the
value to the left of equal to symbol and that in the brackets to the name of the region
one wish to add.
Features:
Using of features we will be able to enable or disable the display of certain page
elements. The features keys control are displayed on the themes configuration page
as check boxes. In Drupal 7 the following features are added by default.
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = comment_user_verification
features[] = favicon
features[] = main_menu
features[] = secondary_menu
Custom features can be added the same way as mentioned for the regions.
Theme settings:
You can use theme settings to set the features by default checked or unchecked in your
theme.
After a few more steps of including stylesheets and scripts our custom themes .info file
will look as shown below
Theme-name = Your theme name
description = This theme is developed as a part of learning
to design a theme version = 1.0 core = 7.x
engine = phptemplate
; Regions
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
Joomla
WordPress
Drupal
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
; Features
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = comment_user_verification
features[] = favicon
features[] = main_menu
features[] = secondary_menu
; Settings
settings[slider_display]
=
1
settings[slider_image_one] = sites/all/themes/your theme folder name/images/sliderimage.png settings[slider_image_two] = sites/all/themes/your theme folder
name/images/slider-image.png settings[slider_image_three] = sites/all/themes/your
theme folder name/slider-image.png settings[contact_phone] = 8888888888
settings[contact_email] = name@example.com
;Stylesheets
Stylesheets[all][] = css/style.css
Stylesheets[all][] = css/bootstratp.min.css
;Scripts
scripts[] = js/jquery.js
scripts[] = js/bootstrap.min.js
Template files (.tpl.php):
These template files are used for the HTML markup. Some of the common template files
are Html.tpl.php
Page.tpl.php
Region.tpl.php
Block.tpl.php
Node.tpl.php
Comment-wrapper.tpl.php
Comment.tpl.php
Create template directory into the theme folder and insert all the files into this directory, A
typical html.tpl.php file will look as shown below.
<!DOCTYPE html>
Joomla
WordPress
Drupal
<html lang="en">
<head>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
template.php File:
Conditional logic, data processing of the output, custom functions, overriding theme functions
or any other customization of the raw output should be done here.
Additional Theme Settings:
If you want to create custom settings section, you should need to alter the theme-specific
settings form. Create theme-settings.php file into your theme directory and alter theme-specific
settings form into the hook_form_system_theme_settings_alter() function. Drupal custom
themes settings page would be as shown in the next page.
<?php
/**
Extra Theme settings
*/
function yourtheme_form_system_theme_settings_alter(&$form, &$form_state) {
$form['yourtheme_settings'] = array(
'#title' => t('Yourtheme Theme Settings'),
'#collapsible' => False,
'#collapsed' => False,
);
$form['yourtheme_settings']['contact_info'] = array(
Joomla
WordPress
Drupal

'#title' => t('Contact Info'),
'#collapsible' => True,
'#collapsed' => True,
);
$form['yourtheme_settings']['contact_info']['contact_email']
= array(
'#type' => 'textfield',
'#title' => t('Contact email'),
'#default_value' => theme_get_setting('contact_email'),
'#description' => t("Enter the contact email."),
);
$form['yourtheme_settings']['contact_info']['contact_phone']
= array(
'#type' => 'textfield',
'#title' => t('Contact Phone'),
'#default_value' => theme_get_setting('contact_phone'),
'#description' => t("Enter the contact phone number."),
);
}
Enable the theme:
Login into the admin panel. Go to the admin/appearance/ and click on the Enable and set
default link under your newly created theme from the DISABLED THEMES section and
start adding content
Though this theme would be awkward to be used for normal website, the process of building
a theme requires a lot of effort and patience and is not recommended for beginners and those
who are more into frontend than the backend.
Bitnami Installation of Drupal:

Drupal can be installed in many ways. The method described above is most reliable and is
recommended. Another method is to install using a Bitnami module in XAMPP. You can find
and download the modules for different CMSs including Drupal at the Bitnami website
mentioned later in this section. Download the setup file and perform the installation as
administrator. The final steps of configuring Drupal experience some errors and are discussed
further down the Appendix.
Joomla
WordPress
Drupal
Aligning the text of the body:
The text needs to be aligned properly for the website to appear decent. To align the website
content include the individual paragraphs in the content between the following code snippet.
<p align=justify> Your paragraph goes here. </p>
For example the content will look aligned well if the paragraphs in the body of the content are
similar to the below.
<p align=justify>
This is my paragraph. This appears very decent on the website than the default one. This way
it appears good for the visitors to go through the content of the site.
</p>
Themes for Drupal:
This report deals with Drupal 7 and more versions of Drupal are available on the project page.
Free themes for Drupal 7 can be found at the following address. https://www.devsaran.com/freedrupal-theme . Themes for Drupal 8 can be found here. https://www.weebpal.com/free-drupalthemes .
Bitnami Modules:
Modules for XAMPP from Bitnami are found at the following web location.
https://bitnami.com/stack/xampp
XAMPP installation errors:

The errors will not show up during the installation process and the Apache and MySQL refuse
to start showing errors in the control panel log. Common errors that appear on the log are the
following.
Apache cannot start. Port 80 currently in use. Disable the application using port 80 or configure
the Apache to use another port.
MySQL cannot start. Port 3306 is in use by another application.
The cause for these errors might be many but some of them are the following.
Joomla
WordPress
Drupal
There may be an instance of MySQL running by another application. This happens when both
XAMPP is installed on a system where WebMatrix is already installed. This is because
WebMatrix uses MySQL service to handle the database and XAMPP also tries to use the same
port.
Apache can be re-configured by making it listen to port other than 80. For information there
are a total of 65536 ports available. To make Apache listen to another port open the httpd.conf
file under Config drop menu beside Apache on the control panel. Scroll down to find the
following lines and change the value 80 to 7777.
Listen 80
Now start the Apache server and it will work without any errors.
To resolve the MySQL issue the process is similar. Open the .ini file under config beside
MySQL and scroll to find the below code snippet and change the value of 3306 to 3307.
port
socket
= 3306
= "F:/xampp/mysql/mysql.sock"
# Here follows entries for some specific programs

# The MySQL server
[mysqld]
port= 3306
This method may or may not work. The reliability of this method depends on the type of
program that is blocking the port 3306.
Bitnami Drupal Installation Issues:

The installation of Drupal using Bitnami module proceeds without any errors till the last step.
The following error usually occurs during the final stages of configuring Drupal. The Apache
stops working and the control panels log fills with errors describing that Apache has shutdown
unexpectedly. This might be due to a blocked port. Stop the blocking application or re configure
the ports for Apache.
Joomla
WordPress
Drupal
This is easier to solve. Open Details under Task Manager and scroll down to find two instances
of Apache.httpd running. End both the processes and restart the Apache server. The server
starts without any errors.
Theme installation errors:

The following errors might occur during the installation of theme.
1) Exceeded allotted memory limit.
2) Permission denied. Cannot chmod the respective folder in the path.
The first error occurs rarely and if occurs it is due the size of the theme. The solution to this
might also be un reliable but works in some situations. The theme would not even try to install
if the installation was performed the described way. The error shows up when Drupal is
installed using WebMatrix or using Bitnami module as described later. To resolve this error,
navigate to the location mentioned in the error and change the maximum allowed size to 32M
or 128M according to the requirements.
The second error occurs when installed through WebMatrix. This happens because WebMatrix
installed the module in the same folder where the operating system exists. This causes the
folder permission issues and renders in problems during theme installation. This can be solved
by changing the properties if the mentioned folder. Right click on the folder and under the
properties un check the Read only option and apply. Reinstall the theme and it will install
without issues.
Multilingual Settings:
To make the website multilingual the following modules are required to be installed and
enabled.
entity-7.x-1.7
entity-7.x-1.0-beta5
i18n-7.x-1.13 (Internalization module)
indic_script-7.x-2.0
l10n_update-7.x-2.0 (Localization Update module)
Languageicons-7.x-1.1
Title-7.x-1.0-alpha8
Vaiable-7.x-2.5
After installation and enabling the modules they need to be configured to suit the website need.
The indic_script module enables the text boxes to be filled with any language by providing an
Joomla
WordPress
Drupal
option to change the keyboard while typing the content into areas where text can be inserted.
The indic_script module is located under Content Authoring section in Configuration and the
required keyboards are to be enabled by checking the box beside the keyboards. It is important
to save the configuration before moving anywhere.
A box appears at the bottom-left of the page when the type cursor is activated anywhere on the
webpage. This allows the user to type in any language that are enabled earlier. Alternatively
typing in different languages is also made possible with the google input tools application. This
application is available on android platform, can be installed as an extension to the Chrome
browser and also available to be installed on Windows systems. After installed it appears on
the Windows taskbar lying at the bottom of the desktop, under the language section, beside
time and date.
Translating the content on the website involves configuring the settings for different parts of
the website and adding translations to every part of the website. Under the Regional and
Language section in Configuration menu the Languages option allows to add as many
languages as required. Beside the Languages section there appears the detection and selection
settings as shown in the picture 1 at the end of the report. This section allows the user to choose
the method to change the language of the website. Check the URL box and drag it as the first
in order.
Under Languages in Regional and Language section, the translation interface helps to enable
and add translations to the messages that are required to interact with both the user and visitor.
This section enables translation for messages such as Page Not Found, warning messages
etc., shown as picture 2 at the end of the report.
Under the multilingual settings in Regional and Language, upon navigating to the variables
menu required variables can be translated accordingly. Under the strings section all the three
text formats should be selected for ease during content creation. It is very important not to
forget to click the Save Configuration button after every step to keep the changes made
intact.
Picture 1:
Joomla
WordPress
Drupal
Picture 2:
REFERENCES
[1]
[2]
[3]
[4]
Wikipedia, "Content Management System," 12 July 2016. [Online]. Available:

http://en.m.wikipedia.org/wiki/Content_management_system.
WordPress,
"WordPress,"
WordPress,
[Online].
Available:
https://wordpress.com/create/. [Accessed 12th, Tuesday July 2016].
Irena,
"WordPress
Multilingual,"
[Online].
Available:
http://wplang.org/translation-plugins-languages/#2. [Accessed 12th, Tuesday
July 2016].
Drupal, "Drupal," [Online]. Available: https://www.drupal.org/. [Accessed 12th,
Tuesday July 2016].
GLOSSARY
1) Content Management Systems: Can also be referred as Content Management Framework
and is used for creation and modification of digital content.
2) Web Servers: A Web Server is a program that uses HTTP to serve the files that form the web
pages to users, according to their requests.
3) chmod: It is a command or an operation that is used to change the permission of files and
directories. The permission divides into read, write and execute in terms of 1s and 0s where
000 means nothing can be done with the file and 777 means everything can be done with the
file. Further, the permissions can be differently assigned for administrator, user groups and
others.

Web Design and Development

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Design and Development

Hochgeladen von

Copyright:

Verfügbare Formate

A REPORT

Centre for Development of Imaging Technology, Trivandrum)

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI

Prepared in partial fulfilment of the

(Centre for Development of Imaging Technology, Trivandrum)

BIRLA INSTITUTE OF TECHNOLOGY & SCIENCE, PILANI