In This Chapter
In today’s fast-paced world of the Internet, if you have a website that doesn’t have rich functionality or fresh content, you will find yourself at a disadvantage to those that do. The idea of powering websites with Content Management Systems (CMS) has been around for some time, but it is only recently, with the advent of high-quality open source CMS scripts like Joomla, that you and I can now use these powerful CMS tools.
In this chapter, I explain in detail the difference between a “traditional” website and one using a CMS. I also provide a look back into the history of Joomla and give an overview of some of its features. Here are some of the topics this chapter covers:
What is a Content Management System (CMS), and how is it different from a “normal” website?
What is Joomla, and where did it come from?
What can Joomla do?
What are the basic elements of a Joomla web page?
What exactly is a Content Management System? To better understand this, let’s briefly look at your common, everyday web page. We will have to talk a little about some of the technology of web pages, but it’s worth it to understand the power of a CMS.
To start, let’s take a look at the historical development of web pages. Conceptually, there are two aspects to a web page: Its content and the presentation of that content. Over the last decade, there has been an evolution of how these two pieces interact:
Static web pages—. The content and presentation are in the same file.
Cascading Style Sheet web pages—. Content and presentation are separated.
Dynamic web pages—. Content and presentation are separated from the web page itself.
A web page is made up of a set of instructions—eXtensible Hypertext Markup Language (XHTML)—that tells your browser how to present the content of a web page. For example, the code might say, “Take this title ‘This is a web page,’ make it large, and make it bold.” The results will look something like Figure 1.1.
This way of creating a web page is outdated, but it’s astonishing how many designers still create sites using this outdated method. It has two main drawbacks:
All of the content shown on the page (“This is a web page”) and the presentation (big and bold) are tied together. If you want to change the color of all your titles, you have to go through all the pages in your site to do so.
The pages have large file sizes. Because each bit of content is individually styled, the pages are big, which means it takes forever to load. Most experts agree that this also penalizes your search engine optimization efforts as large pages are harder for search engines to index.
The next step toward understanding content management is a recent (recent meaning in the last four or five years) development of web standards, a common set of “rules” that a web browser like Internet Explorer or Firefox uses to output a web page onto your screen. One of these standards involves using Cascading Style Sheets (CSS) to control the visual presentation of your web page. CSS is a simple mechanism for adding style (for example, fonts, colors, spacing, and so on) to web documents. All of this presentation information is contained in separate files from the content.
Now the web page generated might look something like Figure 1.2.
Now the file containing the content is much smaller because it does not contain presentation or style information. All the styling has been placed in a separate file that the browser reads and “layers” over the content to produce the final result.
Using CSS to control the presentation of the content has big advantages:
Maintaining and revising the page is much easier. If you need to change all the title colors, you can just change one line in the CSS file.
Both files are much smaller, which allows the data to load much more quickly than without using CSS.
The CSS file has the additional advantage that it will be cached (saved) on a viewer’s local computer so that it won’t need to be downloaded from the Web each time the viewer visits a page.
Note
An example of this can be seen at www.csszengarden.com. Every page on this classic CSS site has identical content but has different CSS applied to each. You can browse through the designs and see the same content styled in hundreds of different ways.
Dynamic web pages are what are created by a CMS.
A CMS does for content what CSS does for presentation.
Read that sentence again carefully. Where CSS separated presentation from content, a CMS separates the content from the page. This might seem like that leaves nothing, but in reality what is left can be thought of as “placeholders.” This can be represented as what’s shown in Figure 1.3.
The “put some content here” instruction tells the CMS to take some content from a database, the “pure content,” and place it in a designated place on the page.
You might be thinking, “So what’s so useful about that trick?” It’s actually very powerful.
It separates out the responsibilities of developing a website. The web designer can concern himself with the presentation/design and the “placeholders.” This means that non-technical people can be responsible for the content—the words and pictures of a website. Most CMSs have built-in tools to manage the publication of the content.
With this in mind, it’s possible to imagine a workflow for content management that involves both designers and content authors (see Figure 1.4).
A CMS makes the pages dynamic: They don’t really exist until you follow a link to view them. This means that they can be updated/customized based on the viewer’s interactions with the page. For example, if you place an item in a shopping cart, that item now shows up on the shopping cart page. It got stored in a database and now gets put into the “shopping cart placeholder.” Many complex web applications are in fact mini CMSs (by this definition), like forums, shopping carts, and guest books, to name a few.
Another good example of CMSs are blogs. They have a “template” that presents all the content (or posts, in this case), and blogs are easy to edit and publish. The growth in the use of CMSs for powering websites is probably due in part to the huge rise in popularity of blogging tools such as Blogger and Wordpress.
The Least You Need to Know
A CMS totally separates the content of the pages from their graphical design. This makes it easy to keep the site-wide design coherent and easy to change. It also makes adding content easy for non-technical people.
The range of available CMSs is extensive—from enterprise scale versions that cost $300,000 to open source versions, such as Joomla, that are free. Modern CMSs are usually defined by their capability to manage and publish content. They typically have workflow processes that start at content creation and move to publishing. Most do far more: They have the capability to add on a wide range of extensions or add-ons to give the site more functionality. From forums to newsletters, Joomla has over 2000 pluggable extensions available, many of which are free and are created by volunteer developers around the world. The official repository is at extensions.joomla.org and a repository specializing in commercial extensions can be found at www.extensionprofessionals.com. Both have a rating and review system (which is itself an extension!).
Note
The Joomla Extensions site and extensionprofessionals.com both have a rating and review system. It’s worth being careful with how to use the ratings. The highest rated extensions are shown at the top level of the site. This means that they get more traffic and so tend to get rated more. There are often great extensions that are hidden away in the categories. It’s worth taking an hour or two to browse all of them to find ones that might be of use to you.
The quality of the extensions also varies widely. If you are using the extension on an important site, do the due diligence to check out the developer and visit his/her site.
There is one large drawback to using a CMS. They can be extremely complex, containing thousands of files and scripts that work together in concert with databases to present a website. Normally, this means that a CMS site will be designed and created by technical staff and managed and run by non-technical users. Joomla is probably the easiest to setup among currently available CMSs, allowing users of modest technical skill to harness its power. That’s specifically the purpose of this book, to guide a non-technical user step-by-step in learning how to create and manage a website powered by Joomla.
This concept of “hard to set up but easy to grow” can be summed up in Table 1.1.
Table 1.1. Comparison of Static Websites and CMSs
Static Website | Content Management System |
|---|---|
Easy to create initial web pages. | To create initial pages is time-consuming as a large script must be installed, databases set up, and templates created. |
Content is static; changing it requires technical expertise. | Content is dynamic; it can be changed with no technical knowledge. |
Difficult to add new functions, often needs custom code. | Most CMSs have many extensions that “plug in” easily. |
Content Management Systems have been around for a while, but there is another factor that has contributed to their rise in popularity and ease of use: The growth of the open source software movement.
In 1998, Netscape bucked the universal wisdom of how to release code by making its release of its browser, Netscape, freely available to anyone and everyone. This milestone was key in creating a philosophical movement among code developers where software would be created by large communities of developers and released openly to the world.
As the Web has grown explosively, we have seen open source software grow and mature to power the Web. The most significant has been four that are collectively referred to as “LAMP”: Linux, Apache, MySQL, and PHP.
Linux—. An operating system
Apache—. Software to run a web server
MySQL—. Powerful database software
PHP—. A programming language used to write complex scripts that create interactive functionality with databases
LAMP has allowed developers to create powerful applications using the PHP programming language. One specific area of growth has been the development of CMSs that are written in PHP such asXoops, Post-Nuke, Wordpress, Mambo, Drupal, and Joomla.
Joomla is a powerful open source CMS that has grown in popularity since its rebranding from “Mambo” in 2006. Its two key features—ease of administration and flexibility of templating—have led to it being used to power everything from corporate Intranets to school district sites. Rather than try to explain the details, I’ll provide a short excerpt from the Joomla website (dev.joomla.org/component/option,com_jd-wp/Itemid,33/p,79/), written by the former Lead Developer, Andrew Eddie, of Joomla:
Mambo was originally developed by a Melbourne (Australia) based company, called Miro, in 2000.
Miro publicly released its code under the names of Mambo Site Server and later Mambo Open Source at version 3 in April 2001 under the GNU GPL.
In 2004 Linux Format awards Mambo “Best Free Software Project” of the Year and Linux User and Developer names it “Best Linux or Open Source Software.” Above all other things, Mambo’s template offerings become the most prolific and envy of any of the Content Management Systems of the Day.
2005 sees more major awards such as “Best Open Source Solution” and “Best of Show—Total Industry Solution” at LinuxWorld Boston and “Best Open Source Solution” at LinuxWorld San Francisco.
Regrettably, in August 2005, a dispute develops involving the fulfillment of decisions within the Mambo Steering Committee. The entire Core Team decides to sever ties with Miro and leave the project. They regroup under the banner of Open Source Matters.
After a serious dust, polish and make-over, Open Source Matters gives birth to Joomla 1.0 in September 2005. Over the coming months, Mambo also reforms its own teams and support structures, abandoning the advanced work on the original version 4.5.3 and opting to continue to support the current stable code-base.
With the passage of time carrying us well into 2006, both Mambo and Joomla continue to win awards, both being heavily based on the original 4.5.2 code-base. At the time of writing, both projects are involved in heavy refactoring efforts of the new Mambo 4.6 and Joomla 1.5.
Mambo today—same name, same base code, different team.
Joomla today—different name, same base code, same team.
The Joomla community is big, and it’s active. The official forum at forum.joomla.org has (as of this writing) over 150,000 members, making it perhaps one of the largest forums on the Web. Along with that, there are many forums on Joomla’s international sites. There are also many other third-party forums such as joomlashack.com (100,000 members). Although a crude measure, it’s a useful way of seeing how large the community around Joomla might actually be.
A large and active community, measured here by the members of forums is an important factor in the success in an open source project.
Joomla is perhaps unique among open source CMSs in the size and nature of the non-official developers that create extensions for it. It’s hard to find a Joomla site that doesn’t use one of these. The true power of Joomla is the astonishing range of extensions there are.
The nature of these developers is also interesting. There are an unusually high proportion of commercial developers and companies creating professional extensions for Joomla. Although the nature of open source and commercial development might seem unlikely bedfellows, many commentators have pointed to this characteristic of the Joomla project as a significant contributor to its growth.
Joomla has a number of “out of the box” features. When you download Joomla from www.joomla.org, you get a zip file of about 5MB that needs to be installed on a web server. Doing this extracts all the files and enters some “filler” content into the database. In no particular order, some of the features with the base installation include
Simple creation/revision of content using a text editor from main website or hidden admin site
User registration and ability to restrict viewing of pages based on user level
Controlling editing and publishing of content based on various admin user levels
Polls
Simple contact forms
Public site statistics
Private detailed site traffic stats
Built-in site search functionality
Email a friend, PDF and print format capability
RSS (and others) syndication
Simple content rating system
Showing newsfeeds from other sites
As you can see, there are tremendous features provided with Joomla. To have a web designer create all of these for a static site would cost tens of thousands of dollars, but it doesn’t stop there. Joomla has a massive community of developers worldwide (over 30,000) that have contributed over 2000 extensions for Joomla, most of which are free. Some of the more popular types include
Forums
Shopping Carts
Email Newsletters
Calendars
Document Managers
Galleries
Forms
Directories
Each of these extensions you can install into Joomla to extend its functionality in some manner. Part of the popularity of Joomla has been the availability of a huge and diverse range of these extensions.
To customize your site even more, you can easily find highly specialized extensions for your needs:
Recipe managers
Help/support desk management
Fishing tournament tracking
AdSense placement
Multiple site management
Hotel room bookings
You get the idea!
The Least You Need to Know
Joomla has rich functionality in its default package. It can be further extended to almost any niche application through the availability of GPL and low cost commercial extensions.
Appendix B, “Joomla Case Studies,” presents five case studies of a variety of websites that are powered by Joomla.
A Joomla website has several elements that all work together to produce a web page. The main three elements are content, modules, and the template. The content is the core aspect of the website, the template controls how the website is presented, and the modules add functionality around the edges.
Think of these three elements—content, modules, and templates—as three legs holding up a stool. Without one of these three key elements, the page (the stool) would topple.
In Figure 1.5, we can see the page of www.compassdesigns.net, a popular blog site about Joomla (OK, I’ll admit, it’s mine—a shameless plug!).
Figure 1.6 highlights two of the three elements of a Joomla page. The third, the template, is evident by the color, graphics, layout, and font (those being part of the template).
On this Joomla web page the content is a large column with a list of links to Joomla tutorials. Various modules are shown in the right-side column and at the top and bottom.
The most important part of a website is the content; you have probably heard the phrase, “Content is King.” Joomla, as a CMS, helps you efficiently create, publish, and manage your content. When I am talking about content here, I am talking about the meat and potatoes of your web page—the important stuff in the middle of the page that the viewer is looking at.
Joomla actually has a specific name for this core of the page; it calls it the main body of the page. This is usually the biggest column and is placed in the middle.
The content in the main body is generated from a component. The biggest and most important component in Joomla is the one that handles all your articles, the individual content items in the site. In fact, it’s so important that often you will find these referred to as Content Articles. In the default Joomla installation there are also a few other components that will generate content in the main body, such as weblinks and contacts.
Many third-party components exist and will generate content in the main body. Examples include forums and shopping carts.
Modules are smaller functional blocks that usually are shown around the main part of the page, like a poll/survey, login form, or a newsflash.
In the example in Figure 1.6, there are modules at the top: a search and a menu. In the right column is an RSS feed module and then a login form and a newsflash. At the bottom there’s a signup form for an email newsletter.
Components and modules are usually both referred to as extensions because they extend the functionality of your site.
A template is simply a set of rules about presentation. For example, a template determines how many columns to use or what color to make titles. A template also determines the layout or positioning of the web page.
Note
You will find that templates are usually referred to as another type of extension, along with components and modules. Here I have separated templates from their brethren because I think the template forms a separate and distinct element of a Joomla page. The concept of the template is shown in Figure 1.7. Here you can see the raw content from the database that is presented through the template to the final viewed web page.
Joomla is a great low cost content management system that has the capability to power sophisticated websites. In this chapter we looked at the nature of a CMS, where Joomla came from, what it can do, and what makes up a Joomla web page.
Modern websites separate content from presentation using a technology known as Cascading Style Sheets (CSS).
A CMS totally separates the content of the pages from their graphical design. This makes it easy to keep the site-wide design coherent and easy to change. It also makes adding content easy for non-technical people.
Joomla is an example of open source software. It’s created by a world-wide community of developers and distributed at no charge.
Joomla has rich functionality in its default package. It can be further extended to almost any niche application through the availability of GPL and low cost commercial extensions from extensions.joomla.org and www.extensionprofessionals.com.
The main body of a Joomla web page loads content from components. The most important component is the one that manages all the articles.
A Joomla site is made up of content (articles or components), modules, and a template. The template acts as a filter (or lens). It controls all the presentation aspects of the web pages. It does not have any content, but it can include logos.