Advance Web Technologies

1. Ajax: AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of

the XMLHttpRequest object to communicate with servers. It can send and receive information in
various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is
its "asynchronous" nature, which means it can communicate with the server, exchange data, and update
the page without having to refresh the page.

Use XMLHttpRequest objects to interact with servers. You can retrieve data from a URL without having to do a
full page refresh. This enables a Web page to update just part of a page without disrupting what the user is
doing.  XMLHttpRequest is used heavily in Ajax programming.

AJAX cannot work independently. It is used in combination with other technologies to create interactive
webpages.

JavaScript

 Loosely typed scripting language.

 JavaScript function is called when an event occurs in a page.
 Glue for the whole AJAX operation.
DOM

 API for accessing and manipulating structured documents.

 Represents the structure of XML and HTML documents.
CSS

 Allows for a clear separation of the presentation style from the content and may be changed
programmatically by JavaScript.
XMLHttpRequest

 JavaScript object that performs asynchronous interaction with the server.

Before understanding AJAX, let’s understand classic web application model and ajax web application
model first.

 Synchronous (Classic Web-Application Model)

 A synchronous request blocks the client until operation completes i.e. browser is unresponsive. In such
case, javascript engine of the browser is blocked.

 As you can see in the above image, full page is refreshed at request time and user is blocked until
request completes.
 Let's understand it another way.




 Asynchronous (AJAX Web-Application Model)

 An asynchronous request doesn’t block the client i.e. browser is responsive. At that time, user can
perform another operations also. In such case, javascript engine of the browser is not blocked.


 As you can see in the above image, full page is not refreshed at request time and user gets response from
the ajax engine.
  Let's try to understand asynchronous communication by the image given below.

How AJAX works?

AJAX communicates with the server using XMLHttpRequest object. Let's try to understand the flow of ajax or
how ajax works by the image displayed below.

As you can see in the above example, XMLHttpRequest object plays a important role.

1. User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback function.
6. HTML and CSS data is displayed on the browser.

Benefits of Ajax

There are 4 main benefits of using Ajax in web applications:

1. Callbacks: Ajax is used to perform a callback, making a quick round trip to and from the server to
retrieve and/or save data without posting the entire page back to the server. By not performing a full postback
and sending all form data to the server, network utilization is minimized and quicker operations occur. In
sites and locations with restricted bandwidth, this can greatly improve network performance. Most of the
time, the data being sent to and from the server is minimal. By using callbacks, the server is not required to
process all form elements. By sending only the necessary data, there is limited processing on the server.
 There is no need to process all form elements, process the ViewState, send images back to the client, or send
a full page back to the client.

2. Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server. This allows
the client browser to avoid waiting for all data to arrive before allowing the user to act once more.

3. User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will always be
more responsive, faster and more user-friendly.

4. Increased Speed: The main purpose of Ajax is to improve the speed, performance and usability of a
web application. A great example of Ajax is the movie rating feature on Netflix. The user rates a movie and
their personal rating for that movie will be saved to their database without waiting for the page to refresh or
reload. These movie ratings are being saved to their database without posting the entire page back to the
server.

Where Should Ajax be Used?

Ajax should be used anywhere in a web application where small amounts of information could be saved or
retrieved from the server without posting back the entire pages. A good example of this is data validation on
save actions. Another example would be to change the values in a drop down list-box based on other inputs,
such as state and college list boxes. When the user selects a state, the college list box will repopulate with only
colleges and universities in that state.

Another great example is when the client needs to save or retrieve session values from the server, based on a
user preference such as the height, width or position of an object. Adjusting the width could make a callback to
the server to set the session variable for the new width. This way, whenever the page is refreshed, the server can
adjust the object’s width based on this session variable. Otherwise, the object would go back to its initial default
width.

Other features include text hints and autocomplete text boxes. The client types in a couple of letters and a list of
all values that start with those letters appear below. A callback is made to a web service that will retrieve all
values that begin with these characters. This is a fantastic feature that would be impossible without Ajax and is
also part of the Ajax Control Toolkit.

Segue recently used Ajax to support a client application that had problems due to limited bandwidth and page
size. The combination caused the application to take too long to retrieve data and display it on the page.
Sometimes, the web server would simply not have the resources to handle the request and timeout. The best
solution for this issue was Ajax.

To solve this problem, we created JSON Web Services on the web server in order to retrieve the details about
the selected item. The JSON web service would retrieve the data and convert into JSON and return a JSON
string. Instead of posting back to the server, the client would call the web service when an item was selected
from the list box. We used jQuery to make an asynchronous Ajax call to the web service. Once the client
retrieved the data back from the web service, more client side processing was done to display the information
on the page. The time it took to display the details on the page after the item was selected was instantaneous.
There was no page flicker, refresh or postback involved.

Tools Used for working with ajax

 AJAX may be an overused buzzword, but it also has some incredibly cool uses within your websites. We've
rounded up the best AJAX tools for your perusal - free feel to add more suggestions in the comments.

There are lot of Ajax Tools available in the market. Below we list a common and most frequently used ajax
tools and ajax libraries.Code libraries and tools for the development of your Ajax Web based applications.
These days Ajax has been used for the development of responsive web application making it more user friendly.
You can make your application’s interface like gmail interface.

Chickenfoot firebox
Chickenfoot is a Firefox extension that puts a programming environment in the browser’s sidebar so you can
write scripts to manipulate web pages and automate web browsing. In Chickenfoot, scripts are written in a
superset of JavaScript that includes special functions specific to web tasks. Fixed some bugs related to
packaging Chickenfoot scripts as standalone extensions. Exported Chickenfoot scripts were trying to find the
chickenfoot/setup directory in the end-user’s Firefox profile directory. If the end-user had never installed
Chickenfoot, this directory would not exist, causing the extension to crash.
Mouse wheel programming in JavaScript
Web applications are becoming more and more like “normal” desktop applications. Of course, they are more
and more functional, but smooth user interface acts the primary role. So we have drag and drop,
autocompletition, and much more. Many of those nice features got possible only with help of AJAX. This page,
however, is not about AJAX (or any other buzzword). It is about rather simple user input method — mouse
wheel. I believe it would now be difficult to find a mouse without wheel. Vast majority of users are used to the
wheel as a control for scrolling in lists, zooming etc. Rather few web applications, however, make smart use of
mouse wheel. This page is to provide you with general information about handling mouse wheel-generated
events in JavaScript programming language.
JavaScript Sound Kit
The JavaScript Sound Kit is a wrapper around the ActionScript Sound Object, it makes it possible to use the
Sound Object in JavaScript the same way you do it in ActionScript. The API works almost the same way as the
ActionScript Sound Object. The JavaScript Sound Kit works by calling a Sound Object in a flash movie with a
sound class bridge implemented. The magic happens by using the External Interface available on the flash
plugin version 8.
Hibernate, Spring, Echo2 Base Application
This project is designed as a base application and guide for building AJAX applications using Hibernate,
Spring, and Echo2. It is intentionally left sparse (It contains only a group and user editor) so that it can be used
as a base for a full blown application. All three technologies are matched cohesively together to provide a
robust base for your AJAX applications. Security:
Allows username/password logon, logoff, and permission checking.
Permissions can be queried using has Permission(), or enforced using require Permission().
Enforcement is done in the business tier.
XAP: Extensible AJAX Platform
XAP is an XML-based declarative framework for building, deploying and maintaining rich, interactive Ajax
powered web applications. It aims to reduce the need for scripting and help solve the development and
maintenance challenges associated with large scale JavaScript programming. XAP provides:
* Declarative rich user interface via XML; * Data binding for connecting UI to data. * Incremental update of
web pages in a declaratively and programmatically. * A “plugin architecture” allowing developers to define
their own XML tags to provide behavior and UI or even use a completely different XML syntax.
Rhino in Spring Rhino in Spring is a project that intends to integrate Mozilla Rhino JavaScript interpreter, the
interpreter for the best (in our opinion) dynamic language on the Java platform with Spring Framework, the also
best (again, in our opinion) enterprise framework on the Java platform. The aim is to provide a system that
amalgamates the rapid development benefits and flexibility of a dynamic language with the strength, scalability
and versatility of the Java platform and the Spring framework. At the moment, the project delivers a controller
component for Spring MVC that allows complex control flows spanning several webpages in web applications
to be expressed as a single structured algorithm in JavaScript, putting the rich set of control flow structures and
function reusability of a full-blown language at your fingertips.
Spry framework for Ajax
The Spry framework for Ajax is a JavaScript library for web designers that provides functionality that allows
designers to build pages that provide a richer experience for their users. It is designed to bring Ajax to the web
design community who can benefit from Ajax, but are not well served by other frameworks. The first release of
the Spry framework was a preview of the data capabilities that enable designers to incorporate XML data into
their HTML documents using HTML, CSS, and a minimal amount of JavaScript, without the need for
refreshing the entire page. The Spry framework is HTML-centric, and easy to implement for users with basic
knowledge of HTML, CSS and JavaScript. The framework was designed such that the markup is simple and the
JavaScript is minimal. The Spry framework can be used by anyone who is authoring for the web in their tool of
choice. This is the 4th pre-release of Spry. In this release, we are introducing Spry Effects: JavaScript behaviors
that provide animation and color effects for page elements.
The Ajax Engine
AJAX is a technology that enables web applications to call the webserver without leaving the actual page. It’s
possible to do this in the background without notice of the user. This avoids loading the same form or page
including the html markup multiple times, reduces the network traffic and increases the user acceptance. The
AJAX Engine that you can find here is built upon the webservice standard protocols SOAP and WSDL for
transferring the data between the browser client and the web server instead of using a new or proprietary
protocol.
The key part of this engine is a small webservice client written in JavaScript and a state engine that controls the
asynchronous communication. The benefit of that approach is that there is no need to invent new protocols and
that the webservice framework on the server can be reused.

2. Bootstrap
Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It
contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface
components, as well as optional JavaScriptextensions. Unlike many web frameworks, it concerns itself
with front-end development only. Twitter Bootstrap is the most popular front end framework in the recent time.
It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It
uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which
you can create web projects with ease. The tutorial is divided into sections such as Bootstrap Basic Structure,
Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related
topics with simple and useful examples.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a
framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for
interface development, which led to inconsistencies and a high maintenance burden. According
to Twitter developer Mark Otto:
"A super small group of developers and I got together to design and build a new internal tool and saw an
opportunity to do something more. Through that process, we saw ourselves build something much more
substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to
document and share common design patterns and assets within the company."
Features of Bootstrap

1. Easy to Use
It is extremely an easy and speedy procedure to begin with Bootstrap. Bootstrap is very adaptable too. You can
utilize Bootstrap along with CSS, or LESS, or also with Sass [after you download the Sass version].
2. Responsiveness
Every year mobile devices persist to grow hugely popular, and the requirement to have a responsive website has
become compulsory and important too. As the fluid grid layout amends vigorously to the appropriate screen
resolution, thus crafting a mobile-ready site is a smooth and easy task along with Bootstrap. With the use of
ready-made classes of Bootstrap, you can recognize the number of spots in the grid system that you would like
each column to engage in. Then only you can identify at whichever point you would like your columns to load
in horizontal position, instead of vertically to exhibit accurately on mobile appliances.

3. The Speed of the Development

One of the main benefits of utilizing Bootstrap happens to be the speed of the development. While driving out a
new, fresh website or application swiftly, you should certainly reflect upon utilizing Bootstrap. Instead of
coding from scrape, Bootstrap lets you to use ready-made coding blocks in order to assist you in setting up. You
can blend that along with CSS-Less functionality and cross-browser compatibility that can give way to saving
of ample hours of coding. You can even buy ready-made Bootstrap themes and alter them to fit your
requirements, for gaining the quickest potential route.

4. Customizable Bootstrap
The Bootstrap can be customized as per the designs of your project. The web developers can make a choice to
select the aspects which are required which can be simply complete by utilizing Bootstrap customize page. You
just have to tick off all the aspects that you do not require, such as- Common CSS: typography, code, grid
system, tables, buttons, forms, print media styles; Components: input groups, button groups, pager, labels, navs,
navbar, badges, pagination; JavaScript components: dropdowns, popovers, modals, tooltips, carousels; Utilities:
Responsive utilities, basic utilities. Thus your custom version of Bootstrap is all set for download process.

5. Consistency
Few Twitter employees firstly expanded Bootstrap as a framework for boosting the consistency across interior
tools. But later the Co-founder Mark Otto after understanding the actual potential released in August 2011 the
first open-source version of Bootstrap. He even portrayed how the Bootstrap was enlarged with the use of one
core concept- pairing of designers along with developers. Thus Bootstrap became popular on Twitter.

6. Support
As Bootstrap holds a big support community, you can be provided with help whenever there comes any
problem. The creators always keep the Bootstrap updated. Presently Bootstrap is hosted, expanded, and
preserved on the GitHub along with more than 9,000 commits, as well as more than 500 contributors.

7. Packaged JavaScript Components

Bootstrap approaches with a pack of JavaScript components for including the functionality that crafts it in
simple way for operating things, such as tooltips, modal windows, alerts, etc. You can even leave out the
writing scripts completely.

8. Simple Integration
Bootstrap can be simply integrated along with distinct other platforms and frameworks, on existing sites and
new ones too. You can also utilize particular elements of Bootstrap along with your current CSS.
9. Grid
Bootstrap has the capability to utilize a 12-column grid that is responsive. It also upholds offset and nested
elements. The grid can be maintained in a responsive mode, or you can simply modify it to a secured layout.

10. Pre-styled Components

Bootstrap approaches with pre-styled components for alerts, dropdowns, nav bars, etc. Hence, being a feature-
rich, Bootstrap provides numerous advantages of using it. Hope you would have understood the above reasons
so that you can easily use Bootstrap for making superb web designs for your sites!
Structure and Functions of Bootstrap

Bootstrap is modular and consists of a series of Less stylesheets that implement the various components of the
toolkit. These stylesheets are generally compiled into a bundle and included in web pages, but individual
components can be included or removed. Bootstrap provides a number of configuration variables that control
things such as color and padding of various components.
Since Bootstrap 2, the Bootstrap documentation has included a customization wizard which generates a
customized version of Bootstrap based on the requested components and various settings.
As of Bootstrap 4, Sass is used instead of Less for the stylesheets.
Each Bootstrap component consists of an HTML structure, CSS declarations, and in some cases accompanying
JavaScript code.
Grid system and responsive design comes standard with an 1170 pixel wide grid layout. Alternatively, the
developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of
different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and
high resolution. Each variation adjusts the width of the columns.
Stylesheets[edit]
Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These
provide a uniform, modern appearance for formatting text, tables and form elements.
Re-usable components[edit]
In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. The
components are implemented as CSS classes, which must be applied to certain HTML elements in a page.
JavaScript components[edit]
Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional
user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some
existing interface elements, including for example an auto-complete function for input fields. In version 1.3[12],
the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert,
Button, Collapse, Carousel and Typeahead.
Tools for Bootstrap

Are there any Bootstrap editors that you use and would recommend? If so, please share with our readers in the
comments below.

1. Jetstrap

Jetstrap is a web-based Javascript library for building rapid prototypes and applications with Bootstrap. It boasts
a simple but extremely powerful interface with drag-and-drop functionality.
The workspace allows you to drop elements, customize them and then see a live preview, with the entire code
neatly formatted. You can test on multiple device emulators within the workspace, easily export your code, and
have your website up and running quickly.

Price: Basic plans start at $16 per month and go up to $99 per month.

2. Divshot

Divshot allows for fast, visual front-end development, and works superbly with the most popular frameworks,
including Bootstrap, Foundation and Ratchet. The included component libraries are completely customized for
each framework, with the visual HTML editor supporting custom code, JavaScript, CoffeeScript, LESS and
more.

The theme switcher is incredibly useful, meaning you can change the overall look of the entire theme with just a
few clicks, or you can choose a custom option.

Price: Plans start at Free and go up to $300 per month for agencies.

3. Easel

Easel is an in-browser design tool to mock up and collaborate on projects, without shifting between your text
editor and browser. It allows for rapid prototyping with the added ability of importing elements from your
existing website.

If you already use Bootstrap, you can use Easel to create markup that you can drop directly into your site, or get
started with Bootstrap quickly using the great collection of components. You can export either the entire
document or just specific elements.

Price: Plans start at Free and go up to $99 per month for medium-sized teams.

4. Kickstrap

Kickstrap is a front-end framework with the Bootstrap library bundled and layered, and you can decide which
Bootstrap CSS and JS components to use as you develop. Since you never edit Bootstrap's code directly, you
can keep its layers up-to-date without overwriting your existing code.

Kickstrap is ready to use "out of the box," so there is no installation or database required. This enables you to
put Kickstrap right onto your server.

Price: Free

5. Bootstrap ThemeRoller

Bootstrap ThemeRoller is an intuitive web app for creating your own Bootstrap theme using a visual interface.
You can customize the color, size, fonts, forms, buttons, tables, alerts, navigation bar, menus and more.
The appe generates a unique URL for every style you create, which saves your settings so you can pause and
resume your customization where you left it. You can see your changes live and download the final theme in a
single ZIP file.

Price: Free

6. Lavish

Lavish is a Ruby on Rails application that generates a Bootstrap color scheme from an image, which you can
customize to suit your requirements. Once you select an image, Lavish generates colors from the image for the
body background, links, header, menu, tabs, text, dropdown and more. You can then swap these around until
you're satisfied with the scheme, and then download the Boostrap.css file.

Price: Free

7. BootSwatchr

BootSwatchr is a visual tool, inspired by Bootswatch, for creating custom Bootstrap themes from the ground up.
Just like Bootstrap it uses LESS to create dynamic, modular stylesheets to give you a live preview of the
changes you make.

To get started, simply create a new BootSwatch and edit the variables you wish to change on the left. This will
update the preview on the right. You can export in JSON format or download the full or minified CSS file.

Price: Free

8. LayoutIt!

LayoutIt! features a drag-and-drop interface for creating front-end code simply and quickly. It takes every
element and component of Bootstrap to make coding easier, without needing to be an expert in JavaScript,
HTML5 or CSS3.

It's easy to integrate LayoutIt! with any programming language; just download the HTML and start building the
design into it. To begin, choose one of the base templates — starter, basic marketing or article — and being
working on customizing the template as you see fit.

Price: Free

9. PaintStrap

Using PaintStrap, you can generate beautiful Bootstrap themes with Adobe Kuler or COLOURLovers. To get
started, input either the color scheme theme ID or a permalink URL, and then set the colors for corresponding
elements such as text, navigation, buttons, background and links.

You can generate the resulting CSS as a ZIP of all the files, individually or as a theme. You can share your
color scheme in the gallery or download another user's theme.

Price: Free
10. Pingendo

Pingendo is a visual desktop application to create prototypes of responsive websites based on the Bootstrap
framework. You can start a project from the collection of ready-to-use layouts, drag elements into position,
resize and customize, and insert your own content.

Using the Snippets CSS panel, you can insert new elements and drag and drop in the DOM structure, while
previewing the changes you make instantaneously.

Price: Free

3. CakePhP:CakePHP is an open-source framework for PHP. It is intended to make developing, deploying

and maintaining applications much easier. CakePHP is based on an MVC-like architecture that is both
powerful and easy to grasp. Models, Views, and Controllers guarantee a strict but natural separation of
business logic from data and presentation layers

CakePHP is an open source MVC framework. It makes developing, deploying and maintaining applications
much easier. CakePHP has number of libraries to reduce the overload of most common tasks. Following are
the advantages of using CakePHP.

 Open Source
 MVC Framework
 Templating Engine
 Caching Operations
 Search Engine Friendly URLs
 Easy CRUD (Create, Read, Update, Delete) Database Interactions.
 Libraries and Helpers
 Built-in Validation
 Localization
 Email, Cookie, Security, Session, and Request Handling Components
 View Helpers for AJAX, JavaScript, HTML Forms and More
CakePHP Request Cycle
The following illustration describes how a Request Lifecycle works −
A typical CakePHP request cycle starts with a user requesting a page or resource in your application. At a high
level, each request goes through the following steps −
 The webserver rewrite rules direct the request to webroot/index.php.
 Your application’s autoloader and bootstrap files are executed.
 Any dispatch filters that are configured can handle the request, and optionally generate a response.
 The dispatcher selects the appropriate controller & action based on routing rules.
 The controller’s action is called and the controller interacts with the required Models and Components.
 The controller delegates response creation to the View to generate the output resulting from the model
data.
 The view uses Helpers and Cells to generate the response body and headers.
 The response is sent back to the client.
Features of CakePHP

CakePHP development has not just evolved over the pseudo-functional patterns but also brought in a lot of
utility in common to be sued by users, developers and consumers alike. It has taken a lot of control over how a
web development system should work in coherence with the latest utility factors, business processes and market
proponents.

Here are the top seven features that clearly set it apart from the mediocre and limited facilities:

1. MVC Pattern

Model View Controller targets the modern programming needs. CakePHP uses it just right with all the entities
working together excellently and providing a great way to work on different aspects of development in a vitally
planned system of data processing. Model supports data handling, view supports data rendering, controller
dynamically responds to events to produce a right functionary for the framework and that’s how you get the best
way to interact with database and other important facets of solution where data plays an important part.

2. ORM

Simply put - Object Relational Mapping. Even if you are not a developer, you should be aware of the fact that
there are many types of databases and Object Oriented Programming languages. ORM is used for connecting
different category of data into one compatible type and allowing the data to settle well with different facilities
by creating compliant class objects and defining relations between tables, validation components, predefined
resources and many other elements. The practice blends so well with CakePHP development that you would go
on writing the whole program without even writing a single line of SQL code.

3. Class inheritance

You just don’t need to doubt on it anymore. The two main folders in CakePHP allow you to watch and work
separately. This sounds so simple and basic but it is very effective when your work runs into several codes and
gets multifarious. CakePHP does it with great responsibility and sensibility.

4. Easily extend with plug-ins

CakePHP allows you to reuse your code and build on existing facility by extending your program with great
new features that are available in the form of Components, Helpers, Behaviors and Extensions. You can easily
modularize your application and bring it up to work as a different utility for your evolved needs and even make
it react differently to the new system requirements. The best part, all that can be done without even disturbing
the Cake’s core library and just adding different functionalities you have in the rich plug-ins supported by
CakePHP.

5. No Configuration

You will love it. You just don’t need to specify or signal anything to establish any connection between the
different system resources and don’t need to configure them at all. Everything with CakePHP runs on auto-
detect and hence you don’t need to care about any sort of installation or fixing anywhere at any level.

6. Built-in Validation

Seriously, if there is any facility for built-in validation it has to be like the one in CakePHP. You would always
like the way things are taken up by the framework in bringing the advanced validation rules in the working.
Useful features, excellent flow of entities and practical validation techniques mark the spot of built-in validation
for CakePHP and this goes far in making your like easy with CakePHP development.

7. CRUD Scaffolding

The most used feature encompassing the most frequent and imperative activities. CRUD (Create, Read, Update
and Delete) allows you to have a preliminary view of the application which is highly helpful in providing you
the platform to produce, modify and update your work anytime and have a complete control over the production
dynamics and the final outcome right - saving you a lot of time quite smartly.

Drupal
Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and
publishing your content. This reliable and secure CMS is built on PHP based environment and powers millions
of applications and websites.

This is carried out under GNU i.e. General Public License, which means everyone has the freedom of
downloading and sharing it with others. Drupal is used on million sites such as WhiteHouse.gov, World
Economic Forum, Stanford University, Examiner.com and many more.

What is Content Management System?

The Content Management System (CMS) is a software which stores all the data of your content (such as text,
photos, music, documents, etc.) and is made available on your website. A CMS helps in editing, publishing and
modifying the content of the website.

Why to use Drupal?

If you are developing a website with content management system, Drupal CMS is very flexible than any other
CMS. Drupal is very powerful and can be used for building large, complex sites. It is PHP based template and
allows non-technical users to add and edit the content without any HTML or Web design knowledge. Using
Drupal CMS, it is easy to interact with other sites or technologies as Drupal can handle complex forms and
workflows. It is available with more than 16000 modules which can be addressed with Drupal core and add-on
modules.

Architecture of drupal

Drupal is a platform for web content management which is a powerful tool for building simple and complex
sites. In this chapter, we are going to discuss the architectural style of Drupal for implementing user interfaces.
The following diagram shows the architecture of Drupal −
The architecture of Drupal contains the following layers &miuns;

1. Users

2. Administrator

3. Drupal

4. PHP

5. Web Server

6. Database

Users − These are the users on the Drupal community. The user sends a request to a server using Drupal CMS
and web browsers, search engines, etc. acts like clients.

Administrator − Administrator can provide access permission to authorized users and will be able to block
unauthorized access. Administrative account will be having all privileges for managing content and
administering the site.

Drupal − Drupal is a free and open source Content Management System (CMS) that allows organizing,
managing and publishing your content and is built on PHP based environments. Drupal CMS is very flexible
and powerful and can be used for building large, complex sites. It is very easy to interact with other sites and
technologies using Drupal CMS. Further, you will be able to handle complex forms and workflows.

PHP − Drupal uses PHP in order to work with an application which is created by a user. It takes the help of
web server to fetch data from the database. PHP memory requirements depend on the modules which are used
in your site. Drupal 6 requires at least 16MB, Drupal 7 requires 32MB and Drupal 8 requires 64MB.
Web Server − Web server is a server where the user interacts and processes requests via HTTP (Hyper Text
Transfer Protocol) and serves files that form web pages to web users. The communication between the user and
the server takes place using HTTP. You can use different types of web servers such as Apache, IIS, Nginx,
Lighttpd, etc.

Database − Database stores the user information, content and other required data of the site. It is used to store
the administrative information to manage the Drupal site. Drupal uses the database to extract the data and
enables to store, modify and update the database.

Drupal features

Drupal is a fully featured content management system that can be infinitely enhanced through the installation of
contributed modules or by customised development. We have listed the key features - either in core or through
contributed modules - that make Drupal the multi award winning CMS that it is.

Platform, Web Server and Database Independent: While the standard install configuration is on Linux, Apache
and MySQL or PostgreSQL, Drupal can also be installed on Windows servers running IIS and Microsoft SQL
Server, Solaris, BSD or Mac OS X if there's a requirement to do so.

Granular User Management: Drupal allows total control of user role definitions and permissions for access to
different functions within your website.

Multiple Content Types: Drupal provides complete flexibility over defining how different content types (e.g.
articles, blog posts, news stories) appear and the functionality associated with each content type, such as
allowing or disallowing user comments.

Flexible Taxonomy and Menu Structures: The taxonomy module provides limitless customisation over the
categories a content type is associated with, while the menu structure can be configured in any manner required.
This flexibility makes the traditional CMS "Section > Category > Article" paradigm obsolete if you need
complex ways to categorise your content, or you can keep things as simple as you like.

Standards Compliant Templating& Theming: Drupal separates all content from the presentation layer, allowing
you to fully customise the design and layout of your website using standards compliant HTML and CSS. A
large number of high quality, pre-built themes are available that may help fast-track the design of your project
instead of starting from scratch and investing in a fully customised website design.

Device-Specific Display: If your website needs to be optimised for mobile or other devices, Drupal can detect
the browser being used and serve a specific display theme for that device.
Highly Tuned Search Engine Optimisation (SEO): A Drupal website will be optimally tuned for search engines
through the provision of natural language URLs, permanent links to content, customisable page metadata and an
automatically generated XML sitemap.

Online Community Features: Drupal installs with forums, commenting, polls, blogging, RSS feed aggregation
and rich user profiles by default, while a range of modules and custom development can facilitate any
imaginable form of user generated content or interaction on par with the Facebooks, YouTubes and Flickrs of
the world.

Tools for drupal

As a developer, you'll certainly want to be more productive. Being productive means making fewer mistakes
and writing quality code. Needless to say, that all depends on you, but using IDEs (integrated development
environments) can help you accomplish those goals in an easier and quicker manner. However, choosing the
right IDE can be a daunting proposition, as you need to consider a lot of aspects before making the final choice.

Through this post, I intend to help you provide a compiled list of some of the popular and most widely used
Integrated Development Environments for Drupal (and PHP) development.

1. Eclipse PDT
Perhaps the most popular IDE for Drupal is the Eclipse PDT. As the name implies, Eclipse PDT provides a PHP
IDE framework for the Eclipse Integrated Development Environment. It provides support for Drupal
development. It is an open source IDE and thus is available for free.

Pros

 It's easy to configure and allows to adjust everything.

 It comes with a powerful source code editor that contains a rich set of features including code folding,
configurable syntax colouring, etc.
 The newer versions keep growing in terms of features and performance.

Cons

 Cannot run PHPUnit tests from within the integrated development environments.
 Eclipse PDT performance is slow, especially when you need to refresh a page or source code.
 Eclipse PDT supports Xdebug and Zend Debugger tools, but setting them up can be very painful. Even
though, you can configure Eclipse PDT in the same exact manner as you want, but you'll have to
perform a lot of configuration work.
 It has a steep learning curve.

2. NetBeans
In case you're looking for a full-fledged IDE with a good version control, then NetBeans is exactly what you
need. This IDE is free to use. It comes with several great features including syntax highlighting, refactoring, and
many more.

Pros

 It has a slick and functional UI (user interface) compared to Eclipse PDT.

 Provides help and suggestions for code completion.
 It comes with unit testing capability.
 It provides debugging support, allowing you to set breakpoints and steps throughout your code.

Cons

 It is slow in terms of autocompletion, project browsing, etc.

 In order to use advanced tools of the NetBeans IDE, you need proper training.

3. PHPStorm
PHPStorm is a Drupal friendly PHP based Integrated Development Environment and one of the best IDE with
excellent support for speed and functionality. And, the best part! PhpStorm’s provides powerful Drupal support.
In addition, it even offers open source collaboration tools that help to make the Drupal development and code
review process easier, and conformed to Drupal’s coding standards.

Pros

 Can run PHPUnit tests from within the Integrated Development Environment.
 PHPStorm is ideal for developers seeking to use an IDE with fast performance. This is because this IDE
features a fast UI and the filesystem gets refreshed automatically after a few seconds.
 Offers an easy to implement debugging solution in the form of “Listen for debug connection” button.

Cons

 One major downside to using PHPStorm is that the bugs are not yet resolved while new features gets
added to it.

4. Komodo Edit
This open source IDE helps to keep Drupal coding clean via its syntax checking feature. It is a free, cross-
platform IDE that comes with great features such as code-intelligence, version control, unit testing, code
refactoring, adds-on and customization to name a few.

Pros

 It comes with one of the best syntax checker.

 It offers extensive auto-completion for standard PHP and Drupal functions.
 It offers much better function and variable completion tools than Eclipse PDT.
 Faster code navigation with code browser.
  It supports debugging tool Xdebug.

Cons

 Works slowly when you need to load a new file system.

 Working with Komodo Edit can be complex in comparison to other lightweight IDEs, and requires
training.

5. Codelobster PHP Edition

CodeLobster PHP Edition IDE simplifies and streamlines PHP development process. Besides this, it comes with
a Drupal plugin that helps in developing any type of Drupal sites and offers special abilities for Drupal. It's free.

Pros

The Drupal plugin that the Codelobster IDE offers comes with several benefits:

 It provides ability to organize files into a project that automatically installs components of the Drupal
CMS (including Drupal 7).
 It provides auto-complete and tooltips for Drupal's module hooks and function theme.
 It comes with Drupal search feature.
 It contains a feature that helps you acquire all necessary information about Drupal functions and
constants.

Cons

7. One trouble you may face while using this IDE is that Drupal functions don't show up using the auto-
complete feature.

Fuel php
FuelPHP is an open source web application framework, designed for developers who need a simple and
elegant toolkit to create full-featured web applications. The development of FuelPHP started in 2010 and
it was initially developed by a small team of Philip Sturgeon, HarroVerton, JelmerSchreuder, and Dan
Horrigan.

FuelPHP is an open source web application framework. It is written in PHP 5.3 and implements HMVC
pattern. HMVC is Hierarchical Model-View-Controller framework that allows to sub-request the
controller, which returns the partial page such as comments, menus, etc., instead of the complete page as in
normal MVC.

FuelPHP is created with a desire to incorporate best practices from frameworks such
asCodeIgniter and Kohana with improvements and ideas of its own. FuelPHP database migration tool and
scaffolding functionalities are inspired by the popular Ruby on Rails framework.

1. FuelPHP leverages the power of command line through a utility called "Oil". The utility is designed
to help speed up development, increase efficiency, testing, debugging, and HTML support.
 2. FuelPHP is purely an object-oriented approach. Its architecture is based on the idea of modularity.
Applications can be divided into modules and every component can be extended or replaced without
rewriting a single line of code. Fuel supports any template parser such asSmarty, Twig, PHPTal, etc.
for parsing views.

3. FuelPHP community is large and active with over 300 contributors. Its large community regularly
creates and improves packages and extensions. The main objective of FuelPHP framework is to provide
flexibility and compatibility. It is fast, easy to learn, and a complete solution for developing web
applications.

4. What makes FuelPHP one of the premier frameworks used by PHP developers is that – the new
version of FuelPHP is reverse-compatible with its older versions because of its stable API. It is
extremely flexible.

5. Packages and modules make it easy and simple to reuse an existing code in a systematic way.
FuelPHP offers maximum performance through a small library. Its interactive debugging allows to
easily eliminate the errors in development. Also, its clean and stable code makes programming easier.
Architecture of fuel php

FuelPHP is based on battle tested Model-View-Controller architecture along with HMVC (Hierarchical

MVC) support. While MVC provides flexible and layered application development, HMVC goes one step
further to enable widgetization of the web application.

The strength of FuelPHP is that it does not enforce specific ways to develop an application. It just provides a
simple and easy-to-use standard structure. Developers are free to use the pre-defined set of functionality
provided by FuelPHP or modify it whenever needed. All the features provided by FuelPHP including the core
feature can be changed according to the requirement of the application.

Model
Model is the business entity of the application. Controller and View exchange data in the form of Model.
Model enables uniform representation of our business data. It enables the database layer to interact with the
web application layer in the standard way and provides an option to select, save, edit, and delete our database
entities.

Controller
A typical MVC application starts from a Controller. Once a user sends a request to the FuelPHP web
application, the application gathers all the information about the request and sends it to the Controller.
Controller does the required business logic of the requested page and then calls the relevant View along with
the processed data in the form of Models.

View
View is the presentation layer of the MVC application. View decides how to show the Model to the user. It
supports simple data rendering to the advanced layout, which enables the website to normalize the design
across all the pages. View also provides theming support, which enables quick design change across the
application.

Presenter
Presenter is a special feature provided by FuelPHP. It is the glue between Controller and View. Controller can
share some of its low level responsibility such as retrieving model from database, generating data for the view,
etc. Controller calls Presenter instead of View, which in turn calls View. Presenter enables pure separation of
business logic and presentation layer.

Hierarchical MVC
FuelPHP provides an option to call one controller from another controller, similar to the request from the client
(browser). If any controller calls another controller, the called controller will return the response to the calling
controller instead of rendering it to the client (browser). This enableswidgetization of the web application. For
example, the comment section can be showed as a stand-alone page as well as a sub-section of the main (blog)
page.

Module
One of the salient features of FuelPHP is that a section of the web application can be converted into modules,
which can be shared among the different application. For example, a blog module created for an application
can be reused in another application by just copying the module code from source application to target
application.

Note that creating a new module is as simple as developing the main application. The structure is similar to the
main application with the only exception that the module should be coding a separate folder.

Package
FuelPHP provides an option to organize the code into a single unit called Package. A package can contain one
or more functionality needed for the web application. For example, a database component such as ORM, email,
etc., can be organized into a package and used whenever needed.

A Package is different from a Module in the sense that the Package does not contain any web pages or partial
web pages. Package can be used in FuelPHP as well as any other PHP framework.

Workflow
The workflow of the FuelPHP is simple and easy to understand. It is depicted in the following diagram.
1. User sends a request to the application.

2. Controller receives the request and gathers information by interacting with the model, which in turn
interacts with the database.

3. Controller gathers information by interacting with other controller by sending a subrequest to the other
controllers.

4. Controller sends the retrieved model to the view, which in turn generates the presentation and sends it
to the client as a response.

5. In some cases, the controller may pass the control to the presenter. In that case, the presenter gathers
information from the model and sends it to the client. Here, the presenter does not perform any business
logic, except retrieve the model from the database.
Features fuel php

Complete Flexibility – One of the many benefits of Fuel is that there are very few restrictions on how
to write code. Classes can be in any file structure one wants, declare any folder as a “modules” folder,
easily extend native classes and there are countless other examples of how Fuel lets one write code in
their own way.

 Community Enthusiasm – Just like CodeIgniter framework, FuelPHP is huge community driven
framework used for web development. Libraries and constant modifications were being developed and
released, which helps to keep the framework moving forward when the core was moving at a slower
pace before. Its structure helps to develop core, modules, and packages at an incredible quicker pace.

 Built in Modular structure –This is the reason why this framework is so popular among the developers
and ranks FuelPHP in the first place. Fuel doesn’t force anyone into using modules or an HMVC file
structure, but if one chooses to implement them the process is well documented and quite easy to
integrate. Once apps are created in a modular structure fashion, it becomes easier for developers with
clear benefits.
  ORM in the Core – This package gives a chance for one module in the new application and ended up
using it for every module so far. It maps a model to each table in the database, assigns the fields of the
table and their respective relationships to other tables. FuelPHP is small, fast and allows to develop web
based applications very quickly. It is fully extendible and comes with built-in module and package
support.

 Security – Out-of-the-box FuelPHP's Views will encode all output to make it secure and prevent XSS
attacks. If one need to allow HTML through it can mark as safe or have it cleaned by the default
included HTMLawed. This framework supports input filtering, CSRF prevention with tokens and the
Query Builder which assists in preventing any SQL injection attacks. PHPSecLib offers several security
features inside the framework. More about it has some customized security features such as SQL
injection prevention, URI filtering, XSS filtering, Output encoding etc
Tools for fuelphp

FuelPHP is a MVC (Model-View-Controller) framework that was designed from the ground up to have full
support for HMVC as part of its architecture. But we didn't stop there, we also added ViewModels (also known
as presentation models) into the mix which give you the option to add a powerful layer between the Controller
and the View.
FuelPHP also supports a more router based approach where you might route directly to a closure which deals
with the input uri, making the closure the controller and giving it control of further execution. Fuel php can run
on different IDEs

Geany

I’ve reviewed Geany as a PHP Editor. It has a few IDE functionalities as well.

If you install the php interpreter on your computer, Geany will check the syntax of your code. Not in real time.

Using a plugin, Geany will interface your versioning system. You can interface Geany to Subversion (also
named SVN).

Unfortunately Geany doesn’t work with xdebug or other php debugger. To debug your code you have to use
echo, var_dump or similar commands. However, this way to debug php code is perfectly fine for small and
medium projects.

There is no integration with frameworks and forget about PHPUnit.

Geany is very light and good for small projects.

Netbeans

Netbeans is a java application.

When I started it, I cringed when I saw the fonts it used.

Happily, I found that I could fix it.

Before running Netbeans, I instructed Java to use system fonts instead of its own. I also set the default look-
and-feel to GTK, which looks much better than the standard one.

Doing this, Netbeans’ look-and-feel is acceptable. You can enjoy the functionalities and forget about the look-
and-feel.

Netbeans checks your syntax in real time and without needing to configure anything. It gives you abundant
hints about mistakes and keywords.

Netbeans interfaces with the well-known, and widely-used, debugger Xdebug. You have just to do some
configuration.

Support for versioning systems is integrated. Subversion, CVS and Mercurial are the versioning systems used.

Refactoring is a menu item. Ready to use straight out of the box.

What about PHPdoc? Just type “/**” and hit Enter precisely before a function’s definition. Netbeans will create
a PHPdoc compliant comment including the description of the function’s parameters. This is great.

PHPUnit is supported.

Netbeans will help you write code for these PHP frameworks: Zend, CakePHP, Yii, Symfony2, FuelPHP. Just
install the specific plugin.
Eclipse helios for php developers

Eclipse is the base for many other PHP IDEs. Here I’ll review the version of Eclipse named Helios and
customised for PHP developers.

Eclipse checks your syntax automatically in real time and nothing needs to be configured.

Xdebug and Zend debugger are supported. The latter is very good.

You can interface with a SVN repository by using a plugin named Subeclipse that you find in the menu item
“Help -> Eclipse Marketplace”.

A couple of refactoring functions are offered via a menu item named Refactoring. Netbeans has more of them.

When you type “/**” and hit enter, the same miracle as with Netbeans occurs. You get a skeleton phpdoc
comment with the parameters of your function. Just do it before a function’s definition.

PHPUnit is supported and needs some configuration as it happens in Netbeans. This is expected as PHPUnit is
an external product.

Zend Framework is based on Eclipse and you can install software that enables Eclipse to create Zend projects.

With some dirty tricks you can have at least autocompletion for the most common functions of any framework.
Aptana Studio 3

Aptana Studio is for Ajax applications. It’s a son of Eclipse and it’s fully customised to help build Ajax
applications.
So, you find great support for Javascript. There is even an integrated debugger for Javascript.

Aptana isn’t only Javascript. It supports also HTML5, CSS3, Ruby, Rails, PHP and Python.

There is no refactoring, PHPUnit and PHPDoc are supported. You can debug php code using the usual Xdebug
if you install and configure it.
PHPStorm

PHPStorm is a commercial product.

Debugging for Javascript and PHP are integrated. No need to install anything.

Versioning is well-supported. Many Version Control Systems are supported including Subversion, Mercurial,
Git, Perforce, CVS, and TFS.

Syntax checking is quite advanced and there are no problems with PHPUnit and PHPDoc.

Even frameworks are supported out-of-the-box. There is integrated support for Symfony2, Yii and Zend.

Refactoring functions are way more sophisticated than the ones featured by Netbeans or Eclipse.

Be sure to run PHPStorm on a very powerful computer.

Komodo IDE

Komodo IDE is another commercial product. I have reviewed Komodo Edit, the free editor that is a simplified
version of Komodo IDE.

Komodo IDE shines for its debugging capabilities. You can even see inside what is transmitted between client
and server via the http protocol! If there is no encryption you can see passwords travelling from your PC to the
server!

It supports not only the php language, but also javascript, css and html that are all needed to build web
applications.

Incredibly, refactoring functions are missing.

Joomla
Joomla is an open source Content Management System (CMS), which is used to build websites and
online applications. It is free and extendable which is separated into front-end templates and back-end
templates (administrator). Joomla is developed using PHP, Object Oriented Programming, software
design patterns and MySQL (used for storing the data). This tutorial will teach you the basics of Joomla
using which you can create websites with ease. 
Architecture of joomla

Joomla is a Model-View-Controller web application. In this chapter, we are going to discuss about the
architectural style of Joomla. The following diagram shows the architecture of Joomla.
The architecture of Joomla contains following layers −

1. Database
2. Joomla Framework
3. Components
4. Modules
5. Plugin
6. Templates
7. Web Server
Database − Database is a collection of data and can be stored, manipulated and organized in a particular
manner. The database stores the user information, content and many more required data of the site. It is used to
store the administrative information to manage the Joomla site. Using Joomla database layer, it ensures
maximum flexibility and compatibility for extension.

Joomla Framework − Framework is a collection of open source software, where the Joomla CMS is built. It
is developed for more flexibility and breaks the framework into single modular packages which helps each
package to develop more easily.
Components − Components are considered as mini applications. It consists of two parts
i.e.Administrator and Site. Whenever a page gets loaded, component is been called to render the body of main
page. The Administrator part manages different aspects of the component and the site part helps in rendering
the pages when request is made by site visitor. Components are main functional unit of Joomla.

Modules − Modules is an extension which is used to render the pages in Joomla. It is also used to display the
new data from the component. It frequently looks like boxes such as login module. In Joomla administrator the
modules are managed by the module manager. It displays the new content and images when module is linked
to Joomla components.

Plugin − This is also a kind of Joomla extension, it is very flexible and powerful for extending the framework.
It contains a bit of codes that is used to execute the particular event trigger. It is commonly used to format the
output of a component or module when a page is built. The plugin function which are associated with event are
executed in a sequence when a particular event occurs.

Templates − Template determines the look of the Joomla website. There are two types of templates used
i.e. Front-end and Back-end. The Back-end template is used to control the functions by the administrator
where-as the Front-end template is a way to present the website to users. Templates are easy to build or
customize your site. It provides maximum flexibility to style your site.

Web Browser − It is a server where the user interacts. It delivers the web pages to the client. The HTTP
(Hyper Text Transfer Protocol) is used to communicate between the client and the server.
Features of joomla

Multilingual
Joomla! is the most popular and widely supported open source multilingual CMS platform in the world,
offering over 65 languages. Webmasters and content creators can create websites to be presented in multiple
languages, without ever needing to step outside of the options available in the Joomla! core software. This is a
big step forward and represents a set of capabilities that can make websites much more accessible, reaching out
to a much larger audience.
Learn how to set up a multilingual website and theMultilingual Associations Component.
 

Well Supported
Our worldwide, enthusiastic community is filled with individuals, and teams of world class developers and
business consultants who actively help at no cost in the forums.
There are thousands of professional Joomla! service providers throughout the world who can help build,
maintain and market your Joomla! projects. The Joomla! community has a vetted directory of just some of these
providers at the Joomla! Resources Directory.
 
easy Updates
One of the big challenges with any software is keeping it up to date. Fortunately, Joomla! has a "One Click
Version Update" feature to make this process super easy for users of any skill level.
The built-in updater also has an automated checker which notifies you if anything needs updating; this includes
notifications of the core software and Joomla! extension that utilise this feature. Keeping your site up to date is
the single best thing you can do to secure your web assets and Joomla! gives you the tools to do this with little
effort.
As of Joomla! 3.5.0, thanks to the new email update notification plugin, your Joomla! website checks for the
availability of new Joomla! versions and when one is found it sends the Super Users on the site an email
notification.

Integrated Help System

Joomla! has an in-app contextual help system to help every level of user to operate their Joomla. Most pages
have a help button in the top right, helping you fully understand all options on that page. There is also a
glossary explaining the terms in plain English, a version checker makes sure you're using the latest version, a
system information tool helps you troubleshoot. If all else fails, links to a wealth of online resources for
additional help and support are available, such asJoomla! Documentation and User Forum.

Media Manager
The Media Manager is the tool for easily uploading, organizing and managing your media files and folders. You
can even handle more types of files, thanks to the configurable MIME settings. The Media Manager is
integrated into the Article Editor so you can access images and all other media files for easy usage and
enhancement of your written content.

Banner Management
With the banner manager you have the possibility to easily add advertising and monetize your website. The tool
allows you to create clients and campaigns, to add as many banners as you need, even custom codes, to set
impression numbers, track the clicks.

Contact Management
Not enough with just one contact form on your site? The contacts component allows you to add several
contacts, departments and categories, and extend the basic contact information with miscellaneous information
and an image. Easily set up a contact form for each contact you create and allow access to the public or just to
some registered users, or create a listing of these contacts.

Search better, Search Smarter

With the built in search and smart search, your website visitors will be able to quickly and easily find the
appropriate information on your site. And even more, thanks to the statistics you can analyze your visitors needs
and streamline your content even better to serve them. You have the ability to use the included smart indexing,
advanced search options, auto suggest searches - making Joomla! search the best in class right out of the box.
 
Content Management
Joomla! is a Content management system at heart and has some seriously great features that make organising
and managing your content a breeze. Content creation is made very easy by the inbuilt WYSIWYG editor and
allows you to edit content without any knowledge of code. After you created your content you'll find a lot of
possibilities to show it on the frontend. Next to different layouts, you're able to use several pre installed
modules to show the most popular articles, latest items, related articles and more.
As of Joomla! 3.5, adding an image is as easy as dragging and dropping it from your computer directly into the
content. This works anywhere that you are using the default TinyMCE WYSIWYG editor. And if you want to
add a module into an article, Joomla! 3.5 makes it really easy with a button directly on the editor toolbar. You
don’t need to learn any syntax or remember the module details as the user interface does it for you.
As of Joomla! 3.7, administrators can add Custom Fields to articles, users, and contacts, and extension
developers to use this feature within their own custom Joomla! extensions. With 15 different field types, it's
now easier to structure more complex content entry forms allowing content authors to easily enter their data in a
standard manner whilst displaying it consistently to your site visitors. 
Learn how to set up Custom Fields.

Nested categorization
When you are managing content, organisation is a key requirement. Being able to create categories with nesting
and no limits on depth is a great plus in helping manage large websites.

Tagging
When categorisation is not enough to structure your content, it's time to look at a flat organisation structure
which is best served by tagging. What's more, tagging in Joomla! also supports nesting, so limits are just not
there! 
Start tagging.
Learn how to use content tags in your website

Frontend Editing
Editing content should be easy and fast. You are reading through your site's content and see a change you need
to make. No need to login to the administrative section any more for simple edits of content and modules. 
Simply click and edit from the frontend.

Content Versioning
You will never again lose a previous important version of your article and other changes on your site. You are
now able to track exactly who made what changes, when, and, if a version note was entered, why the item got
edited. Then if needed you can revert to any previous version.
 Syndication and Newsfeed Management
Make sure your visitors stay updated on the new content you're adding, even when they come only once in a
while. With Syndication you create a feed that users subscribe to in their favorite RSS reader and so they
receive the updates. With newsfeed management, you can integrate RSS feeds to your site. Gather all posts
from some of the largest news sites and show them on your site for example.
 
Menu Manager
The Menu Manager allows you to create as many menus and menu items as you need. You can structure your
menu hierarchy (and nested menu items) completely independent of your content structure. Put one menu in
multiple places and in any style you want; use rollovers, dropdown, flyouts and just about any other navigation
system you can think of. Also automatic breadcrumbs are generated to help navigate your site users.
Learn more about the menu management.

Powerful Extensibility
The Joomla! core is just the beginning, the real power is in the way you can customize Joomla. Over 7,500
extensions are available to extend your website and broaden its funcionality. Visit the Joomla! Extensions
Directory or use the Joomla! extension finder built right into Joomla! to see thousands of ways to enhance
Joomla! to suit your needs.

Extensive ACL for all your access control needs

ACL stands for Access Control List, it allows you to manage the users of your site, and different groups. When
you're managing large content portals or even intranets that means you need extensive control on who can see
what and who can edit or manage what. The Joomla! ACL is extremely powerful and can be tweaked via
configuration to suit any needs you might have.
Learn how to use ACL.
 

For Designers

Design Uncoupled
Joomla! was one of the pioneers in open source CMS's by adopting a MVC design strategy. MVC means that
views are strictly separate from the business logic. This is a huge advantage since you own the views or can
override them to achieve superior custom designs. Joomla! not only gives you the design freedom that you have
always craved but can help you make your sites stand out in the crowd!

Responsive with Bootstrap

Joomla! is Mobile Ready and allows you to build more than just websites but online applications that can
respond to virtually any device. Joomla! core templates are built with Bootstrap making it responsive out of the
box. Which means you have a toolset to work with which makes creating templates even easier!
 

Do More with Less

Spend less time coding and reduce the tedious tasks associated with building interfaces in Joomla! 3. Joomla!
now features LESS CSS and jQuery which means you can write less code to achieve greater results. In addition
the Icomoon font icon library provides a wealth of retina-optimized icons. The Joomla! User Interface (JUI)
library gives you a standardized backend & frontend interface.
Override Away!
With a highly advanced override system, designers get an awesome amount of power over how pages &
elements of pages are presented without touching any of the core code! Practically any HTML generated by
Joomla! can be customized to your project.
 

Beautiful Fonts for that extra edge

Designers know the power of fonts for expressing ideas and design strategies. With Joomla! you do not need to
get constrained by standard Web fonts. The Joomla! core itself opens a whole new world of expression because
it allows you the freedom to use Google fonts to make that new design dream come true !

Template Management
Templates in Joomla! are more than a framework for managing your designs but a powerful tool suite for
making your site look exactly the way you want. You have complete control of your presentation since you can
either use a single template for the entire site or a separate template for each site section or menu item. The level
of visual control goes a step further with powerful template overrides, allowing you to customize each part of
your pages.
 

For Developers

User Management
Joomla! has a registration system that allows users to configure personal options. Out of the box, there are nine
user groups with various types of permissions on what users are allowed to access, edit, publish and administer.
Authentication is an important part of user management and Joomla! supports multiple protocols, including
LDAP, OpenID, and even Gmail. This allows users to use their existing account information to streamline the
registration process. All of this can be added onto with extensions, giving you complete control over what users
can access and how they authenticate to your site.

System Features
Speedy page loads are possible with page caching, granular-level module caching, and GZIP page compression.
If your system administrator needs to troubleshoot an issue, an extended debugging mode and error reporting
are invaluable. The FTP Layer allows file operations (like installing Extensions) without having to make all the
folders and files writable, making your site administrator's life easier and increasing the security of your site.
Administrators quickly and efficiently communicate with users one-on-one through private messaging or all site
users via the mass mailing system. 
 

Microdata library implementation

Developers will now be able to incorporate microdata more easily into their extensions and sites. From
automating the Author tag in articles, to generating detailed markup for directories of information, the
microdata library will significantly enhance how you can optimise SEO with Joomla.
PHP 7 Support
As of Joomla! 3.5.0, Joomla! supports the most recent release of Zend’s PHP: PHP 7, which provides a
significant performance boost to your website. Joomla! users can enjoy the benefit of that performance
improvement. Joomla! still provides legacy PHP support going back to PHP version 5.3.10 for web servers that
have not yet upgraded.
 

Routing System
As of Joomla! 3.8, the new routing system defines a new and more flexible interface for developers to handle
creating and processing URLs and gives end users more options as it relates to how URLs are displayed
(including the often requested ability to remove content item IDs from the URL). For the components which
support the new router (Content, Contacts, Users, and Newsfeeds), it is possible to set up the router to run in
one of three different configurations. 
Joomla tools

Top 10 Essential Joomla Tools

1. Good hosting

The most important choice you can make for your website is hosting. Is your website safe? Is it available 24/7?
Can you get help when you need it? The answer to all those questions depend on your host. We
recommend Arvixe, or one of several other Joomla hosts.

2. Joomla Content Editor (JCE)

JCE is one of the most popular and most useful Joomla extensions ever. It's a really powerful editing tool and
we install it on all our sites. It makes everything easier, from content formatting, to adding images, links or
tables.

3. Akeeba Backup

Akeeba Backup is the best way to make backups of your Joomla site. Akeeba make reliable copies of your files
and database, then makes it easy to restore a frest copy of your site.

4. Watchful

Wait. What? There's nothing else we can recommend here?

5. A good-looking, reliable template

We first published the Breeze template back in 2009 as "The World’s Easiest Joomla template". Breeze is still
really easy to use, but it also looks great. We've given Breeze a complete design overhaul for 2015.

6. OSMeta

We created OSMeta because we couldn't find a metadata extension that was simple and usable enough for our
needs. OSMeta should definitely be in your SEO toolbox. OSMeta is ridiculously simple. Don't expect
complicated features. Just expect it to be reliable and easy-to-use.

7. Admin Tools

Admin Tools is a true Swiss Army knife for your site. Admin Tools is what we rely on for the security of our
Joomla sites. Admin Tools will notify you about and install new Joomla! releases, fix your files' and directories'
permissions, protect your administrator directory with a password, change your database prefix, set a secure
Super Administrator ID and much more.
 

8. NoNumber extensions

NoNumber offers you some of the best and highest rated Joomla extensions. Make repetitive tasks faster, make
stuff easier, create new possibilities, change the way you work with Joomla!

9. OSMap

OSMap is the easiest way to add a sitemap to your Joomla site. All you need to do is install OSMap and it will
do the rest. OSMap will automatically create a Google-friendly sitemap for your all content.

10. RSForms

Why bother spending time in implementing your contact forms when you can simply create them with a few
clicks!? RSForm is the most flexible and yet easy to use Joomla! form builder. With our RSForm you'll get your
clients feedback in no time. RSForm will allow you to build the most advanced forms with an intuitive interface
and a lot of integrations.
 Magento

Magento is an open source E-commerce software, created by Varien Inc., which is useful for online
business. It has a flexible modular architecture and is scalable with many control options that is helpful
for users. Magento uses E-commerce platform which offers organizations ultimate E-commerce solutions
and extensive support network. This tutorial will teach you the basics of Magento using which you can
create websites with ease. What is Magento?
Magento is an open source E-commerce software, created by Varien Inc., which is useful for online business.
It has a flexible modular architecture. It is scalable and it has many control options that helps the user to build
both user-friendly and search engine friendly websites.

Magento uses E-commerce platform which offers companies the ultimate E-commerce solutions and extensive
support network. Magento allows user to update E-commerce website automatically. It is simple, quick and
versatile to use.

Magento was developed by Varien Inc., and it was first released on March 31, 2008.

Why to Use Magento?

1. Magento is an open source E-commerce software.

2. Magento is scalable and offers small organizations to build business.

3. Magento enables searching and sorting of products in several ways.

4. Magento easily integrates with many of the third-party sites which are needed to run effective E-
commerce website

Architecture of magento

In this chapter, we are going to discuss the architectural style of Magento, for implementing user interfaces.
The following diagram shows the architecture of Magento −
The Magento architecture comes with Models, Views and Controllers.

1. User Request − The user sends a request to a server in the form of request message where web
browsers, search engines, etc. act like clients.

2. View − View represents the data in particular format. It is the user interface which is responsible for
displaying the response for user request. It specifies an idea behind the presentation of the model's data
to the user. Views are used to reflect "how your data should look like".

3. Controller − The controller is responsible for responding to user input and perform interactions on the
data model objects. It uses models to process the data and send responses back to the view.

4. Model − The model is responsible for managing the data of the application. It contains logic of the data
and represents basic data object in the framework. It responds to request from the view and to the
instructions from the controller to update itself.

5. Database − Database contains the information which is requested from the user. When the user
requests data, view sends requests to the controller, the controller requests from the model and the
model fetches the required information from the database and responds to the user.

6. WSDL − WSDL stands for Web Services Description Language. It is used for describing web services
and how to access them.

Features of magenti
 Catalog Management 
Whether you are selling beauty products, electronics, clothing, or accessories – your catalog is the key
component for the online shop. And Magento undoubtedly offers extensive catalog management features
including –
4. Supports virtual products

5. Allows downloading digital products – music, videos, etc

6. Effortlessly edit and delete product reviews

7. Complete inventory management

8. Import and export products for batch update offline.

9. Attribute sets for quick product creation of different item types

10. Highly customizable options such as resizing and watermarking

11. RSS Feeds and lots more

#2. Tools for Advertising and Marketing
 Magento not only handles your online store effortlessly but also helps you with promotion, marketing, and
conversion. It offers numerous tools to make your advertising easier. These tools include –
 Cross-sell products

 Promotional pricing restricted to selected products or categories

 Option to distribute coupon codes across email, newsletter and offline.

 Monitor coupon usage, manage newsletters and polls

 Offers free shipping and promote new products list.

 Allows price variation based on quantity and groups

 Landing page tools for PPC, new product promotional tools, URL tools, and more
 #3. Fully SEO Centred 
Magento features include a list of options to make search engine optimization smoothly for your online
store/website. Magento SEO features –
 Generates Google Sitemaps

 Automatically sort popular searches and modifies

 Supports Search Engine Friendly URLs

Easy to Meta-tag products and information

 Faster loading options such as less usage of minimizes .css and .js files
#4. Mobile Friendly Commerce 
This is one of the coolest Magento features, wherein it allows browsing full site store catalogue or selected
products particularly personalized for mobile users.
 Mobile HTML5 technology for creating online mobile friendly storefront

 Open for iPhone, Android, and Mobile Opera browsers

 Clear and user-friendly product display

 Supports media files such as audio and video

 Swipe, zoom, and multi-touch

 Drag and drop and more

Tools for magento

The following tools are definitely worth investigating if you want to get serious about your Magento
development.

n98 magerun

This jam-packed CLI (command line interface) tool is a must in your developer tool chest. Streamlining tasks
that can take hours for a large site, however, with n98 magerun you’re able to cut down on time consuming
tasks.

PHPStorm IDE w/ Magicento Plugin

A fantastic IDE that helps with rapid Magento development, not only are you able to shortcut long class
structure strings, but also you have access to custom build outs for common file structures. Saving you time and
headaches when missing a configuration file in the depths of Magento directories.
AvS Scope Hint

This fun little snippet of code will warn you if something is getting overwritten. When debugging a piece of
functionality, you can save yourself both time and frustration when AvS Scope Hint shares an icon stating an
element is being overwritten by a lower level view setting.

Magento Store Optimizer

A powerful extension for Magento takes a mundane store and enriches its functionality. Magento Store
Optimizer allows for testing suites, built in revenue tracking and A/B testing for themes all within Magento.
You would be heart pressed for skipping this useful extension.

Advanced Template Hints

Similar to AvS Scope Hint, Advanced Template Hints focuses on Magento themes and content blocks. One of
the most useful and difficult issues in Magento is getting elements to display where and how you want them.
With this extension, the template block information is displayed in the upper corners of each block. Each block
is also outlined in red, green or yellow to designate if a block is being cached. A must tool for any Magento
frontend developer.

Word Press

WordPress is an open source Content Management System (CMS), which allows the users to build dynamic
websites and blog. WordPress is the most popular blogging system on the web and allows updating,
customizing and managing the website from its back-end CMS and components. 

WordPress is a free and open-source content management system (CMS) based on PHP and MySQL.[4] To

function, WordPress has to be installed on a web server, which would either be part of an Internet hosting
service or a network host in its own right. An example of the first scenario may be a service
like WordPress.com, for example, and the second case could be a computer running the software package
WordPress.org.[5] A local computer may be used for single-user testing and learning purposes. Features include
a plugin architecture and a template system. WordPress was used by more than 27.5% of the top 10 million
websites as of February 2017.[6] WordPress is reportedly the most popular website management or blogging
system in use on the Web,[7] supporting more than 60 million websites.[8] WordPress has also been used for
other application domains such as pervasive display systems (PDS)
 Core Structure
The core structure of a WordPress site represents the main containers that hold the page's content. The core
structure of a WordPress site features, at a minimum:

 Header
 Sidebar/Menu
 Content
 Footer
These are the main containers in which the most important parts of the page are "contained." Remember, the
core structure is like a set of building blocks, where each unit is dependent upon the other units. If you change
one, you have to change the others.

Classic Theme

Default Theme

Please note that, while both themes make use of a sidebar, the first theme refers to it as a menu, while the other
theme refers to it as a sidebar.

Perhaps the main difference between the core structures of these two themes is the use of the header and footer.
For the Classic Theme, the header is in an h1 tag, and the footer is enclosed in a paragraph tag. Meanwhile in
the Default Theme, the header has been placed in a div called header, while the footer has been placed in
a footer div.

Both themes feature a container that encompasses or "wraps" itself around the entire page. This container (often
used in combination with the body HTML tag) allows for more definitive control of the entire structure.
Depending on the WordPress theme being used, this container can also be referred to as:

 page
 wrap
 rap
Some themes may add a second, third, or even fourth sidebar, creating a column effect. They may also include
additional wrappers around the entire page or around specific containers. However, in all cases, the basic core
structure essentially remains the same.

The Modular Template Files

Based on the premise of building blocks, WordPress themes divide the core structure into individual blocks
called template files. These are the template files:

 Header - header.php
 Sidebar/Menu - sidebar.php
 Content - index.php, single.php, page.php, category.php, author.php, search.php, etc.
 Footer - footer.php
In each of these template files, it is possible to use the body div as an all-encompassing container for content.

When viewing a web page that uses a particular WordPress theme, the specific template files generated are
dependent upon the user's request. If a user clicks on a category tag, the category template will be used. If the
user views a page, the page template will be used.
When these core template files are loaded in combination with the WordPress Loop and queries, a variety of
templates can be generated. This allows web page developers to create individual and unique styles for each
specific template.

Interior Structures
Within these core structural containers are smaller building blocks which hold the specific content within the
parent container. WordPress themes can feature a variety of these, but we are going to concentrate on the two
themes that come with WordPress. (Most WordPress theme templates are based on these two themes.)

Header
The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It
may also be referred to as a masthead, head, title, or banner. In all WordPress themes, the header is found
within the header.php template file.

While the styles for the Classic Theme are found within the theme's style.css file, styles for the Default Theme
are found both within the style.css file and the <head> of the header.php template file. Working with these
styles is extensively covered in the article Designing Headers.

Content
The content container in WordPress plays a critical role, because it holds the WordPress Loop. The WordPress
Loop processes each post that will be displayed on the current page. These posts are then formatted according to
how they match specific criteria within the Loop tags.

Features of Wrodpress

The platform is simple to use, and thanks to plenty of theme builders it can be customized in a variety of ways
for everything from blogs, to portfolio sites, to e-commerce. Themes are the element that take WordPress to the
next level, giving almost anyone of any skill level the ability to create a site that doesn’t look like a basic
template. There are a few key components that set the best themes aside from the rest. The most popular
WordPress themes – both paid and free – tend to have 10 key features in common. Let’s take a look at them.

1. Responsive Design

Responsive design is the top must-have feature of all websites for 2013 and is a must when it comes to
WordPress themes as well. With the number of people viewing information on tablets and mobile phones, it is
vital to use a theme that allows users to view content clearly regardless of device.

The top reasons for selecting a responsive theme are simple – there is no need to maintain multiple sites and
content and visual and user interface consistency across devices. Quite a few of these responsive themes are
using a Twitter Bootstrap-based design but there are a variety of others available as well. Tripwire
Magazine recently compiled a list of the 60 best responsive WordPress themes, including Bootstrap themes,
custom layouts, skeleton-based, Zurb Foundation-based and themes using 960.gs.

2. Social Sharing Features

In today’s web environment, social sharing is a must and themes have to be expandable and flexible with the
number of social networks supported. At a minimum, designers should look at themes which allow sharing
across Facebook, Twitter and Pinterest (three popular social sites that emphasize visuals).

Incorporating social media into a theme can help your content reach more people as visitors share it with their
networks. The best and most popular themes have these tools built in, without the addition of plugins.

3. Multiple Page Styles

Themes that contain one page outline just don’t cut it. Designers, developers and almost anyone building a
website want pages that are optimized for specific user features – e-commerce, contact information, reviews or
testimonials, blogs, etc.

Many popular themes have these multiple page styles built in, so everything is pretty much ready to go right
“out of the box.” Each different type of page has its own style and works with the user in mind while
maintaining the look and feel of the site as a whole. These themes support seamless transitions from page to
page and make a site appear more professional and polished.

4. Auto Upgrade and Support

Designers and publishers that release, support and upgrade themes get the best reviews and tend to have the
most repeat business. These seemingly no-brainer features are not as standard as one would hope and are the
backbone of creating and maintaining a site.

Popular themes often have detailed auto-upgrade and update information included in the descriptions and
include specific and detailed instructions for use, installation and customization. Even if a theme looks great,
customer service is what sells (and keeps selling) themes in the long run.

Premium themes typically include high levels of support – one of the elements making them premium – but
some great free themes offer advanced support or forums as well.

5. Plenty of Widgets

The inclusion of custom and customizable widgets is one of the features that WordPress users love. Look at any
list of popular themes and you will find that almost every one includes custom widgets.

Although you can go out and find most of these plugins elsewhere, designers want widgets to match the overall
theme, which is why inclusion is a must. In addition to visual flow, having widgets as part of a theme can make
for a more seamless installation, saving time and work.

Popular themes do more than just include widgets, they also include plenty of places to put them. Options for
placement extend beyond sidebars to widget areas in the footer, header and above or below content.
6. Theme Customization

Using a pre-designed theme can make putting a site together quicker and easier but many people want to add
their own flair, making customization important — from type to color to simple styling changes. In versions of
WordPress 3.4 and later, the live theme customizer allows users to make these types of changes quickly, by
element and preview simultaneously.

Other users (especially designers and more advanced users) look for customization options in regard to file
type. Creating and saving themes using Adobe Photoshop files (PSD format) is especially popular. By including
PSD files with theme downloads, users can change almost anything about the design without it being a part of
the theme per se. From color to shape to font changes, customization options are almost endless.

7. SEO

One feature that users won’t actually see is search engine optimization that is built into the WordPress theme.
The No. 1 plugin from the WordPress directory is the All in One SEO Pack, an indicator of how important this
feature is when choosing a theme.
When it comes to SEO optimization for themes, the theme you choose can have a huge impact.

Themes should include search engine readability of website content, site speed optimization, indexable content
and support of other SEO-specific features such as Dublin core and microformats. While these features are
important, you also need to ensure that your WordPress site is using permalink structure for URLs and creating
custom and keyword relevant slugs for page and blog posts.

8. Retina-Display Ready

With more and more users buying devices with HD and retina displays, the quality of images and visuals
matters more than ever. This is true for WordPress themes as well. The number of retina-ready options available
is growing daily and becoming an in-demand feature.

Retina ready themes will look amazing on any device. Not only will the images be sharper and crisper, but fonts
will also be sharper. Retina ready themes will have better quality when zoomed and will allow greater detail in
the overall design scheme (or theme).

9. Standards Compliant Coding

This can be the complicated part for many WordPress theme users, but the code must be sound. A good theme
takes into account proper PHP, HTML, CSS, privacy and security protocols. Quality code is the skeleton for a
quality website.
WordPress has a set of coding guidelines and Smashing Magazine also has a great primer on coding
standards for the platform. Simply, it matters because clean code will just function smoother and is easier to
maintain in the long run.

10. Design Bundles

WordPress theme designers are expanding themes to include a variety of add-ons to provide a complete design
package. These extras, from newsletters to business cards to letterhead, are included with the theme so that all
brand materials are consistent.

Bundles are popular because they are a complete package and include everything you need to get a site
launched and promoted. One of the most popular bundle features is newsletter integration; the Dorothy
theme (above), for example, includes a WordPress theme, business card template, social media branding
package and newsletter template that works with popular email client MailChimp.
Tools for Wordpress

Read our comprehensive step by step guide on how to start a WordPress blogwithout any technical knowledge.
1. VaultPress

Backups are extremely crucial for any online business to grow. We use VaultPress on WPBeginner and all our
websites. It is a subscription based service with different plans and pricing. VaultPress offers automated real-
time cloud backup solution with one click restore option.
Alternatives: See 7 best WordPress backup plugins compared (pros and cons)
2. Sucuri

Any website can get hacked or attacked by malware or denial of service attacks. Sucuri is a website monitoring
and security service. It provides real time alerts for any suspicious activity on your website. It not only prevents
your website from malware but can also detect and remove them.
Take a look at how Sucuri helped us block 450,000 WordPress attacks in 3 Months. You may also want to see
our article comparing Sucuri vs CloudFlareto find out which one is better for your business.
3. Google Analytics

Understanding your audience is the key to success for any online business. Google Analytics provides you the
statistics you need to understand your audience. It is very easy to install Google Analytics in WordPress and it
is free.
Alternatives: 7 best analytics solutions for WordPress.
4. Yoast SEO

Yoast’s WordPress SEO plugin is the complete website optimization solution for WordPress. It is packed with
features and eliminates the need of installing several other plugins. It is also very easy to install and setup Yoast
SEO pluginin WordPress. See why we use WordPress SEO plugin by Yoast.
Alternative: All in One SEO Pack. Also see our comparison of Yoast SEO vs All in One SEO Pack.
5. Edit Flow

Managing a multi-author WordPress site can be a mess if you don’t know what everyone is working on. Edit
Flow offers a smooth editorial workflow management system for WordPress powered websites. It allows you to
add custom statuses, leave editorial feedback, view editorial calendar, and execute your content strategy like a
pro.
Alternative: Content Progress
6. TablePress

TablePress allows you to add tables into your WordPress posts and pages without writing any HTML or CSS. It
is simple to use and comes with advance features like sorting columns, exporting data, and using formulas in
your tables.
Learn more in our guide on how to add tables in WordPress posts and pages.
7. Polldaddy

As the name suggests, Polldaddy allows you to add polls, surveys and quizzes to your WordPress site.
Polldaddy makes it very simple to create polls and quickly embed them into your posts. The only downside is
that it asks you to connect to your WordPress.com account.
Alternative: Gravity Forms, SurveyMonkey
8. ThirstyAffiliates

Affiliate marketing is the main source of income for many website owners. Adding and managing affiliate links
can be a time consuming task, this is where ThirstyAffiliates comes in.
It is an affiliate link manager which allows you to easily add affiliate links, cloak links with pretty URLs, and
auto-insert links for keywords. See our guide on how to add affiliate links in WordPress with ThirstyAffiliates.
9. After the Deadline

After the deadline allows you to check your WordPress posts and pages for grammar and spelling mistakes.
Developed by Automattic, it also checks your posts for style which allows you to improve readability of your
content.
10. Floating Social Bar

Most social media plugins for WordPress slow down your site’s page speed. Floating social bar is the best
WordPress social media plugin which only loads your social media buttons when needed. It adds a sticky
floating bar on your WordPress posts to maximize your social media visibility.
JQuery

jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies HTML
document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less,
do more.
jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web
development.
jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of
important core features supported by jQuery −
 DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying
their content by using cross-browser open source selector engine called Sizzle.
 Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user
clicking on a link, without the need to clutter the HTML code itself with event handlers.
 AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX
technology.
 Animations − The jQuery comes with plenty of built-in animation effects which you can use in your
websites.
 Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
 Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+,
Safari 3.0+, Chrome and Opera 9.0+
 Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
How to use jQuery?
There are two ways to use jQuery.
 Local Installation − You can download jQuery library on your local machine and include it in your
HTML code.
 CDN Based Version − You can include jQuery library into your HTML code directly from Content
Delivery Network (CDN).