Joomla! 1.5 Site Blueprints 1849511705, 9781849511704

Citation preview

Joomla! 1.5 Site Blueprints

Tailor-made plans for easily building powerful and exciting Joomla! sites

Timi Ogunjobi

BIRMINGHAM - MUMBAI

Joomla! 1.5 Site Blueprints Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: May 2010

Production Reference: 1190510

Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849511-70-4 www.packtpub.com

Cover Image by Asher Wishkerman ([email protected])

Credits Author Timi Ogunjobi Reviewers Jose Argudo

Editorial Team Leader Akshara Aware Project Team Leader Priya Mukherji

Deepak Vohra Project Coordinator Acquisition Editor

Ashwin Shetty

Sarah Cullington Proofreader Development Editor

Dirk Manuel

Dhiraj Chandiramani Graphics Technical Editor

Geetanjali Sawant

Hithesh Uchil Production Coordinator Copy Editor

Shantanu Zagde

Lakshmi Menon Cover Work Indexer Monica Ajmera Mehta

Shantanu Zagde

About the Author Timi Ogunjobi is a Technical Writer, Web Developer, and Open Source evangelist. Trained as an engineer, Timi has been developing web applications on several frameworks for more than five years, and has also been writing for more than a decade on a wide variety of topics, including fiction, business, and technology. Timi balances his time between programming, reviewing, writing, and contributing to interesting web-based and community projects. When he isn't working (which isn't that often) he enjoys playing jazz guitar and getting involved in outdoor activities—principally cricket, golf, and swimming. Timi is the principal architect of Websesame—www.websesame.com—which is a web programming firm. He is also the CEO of Xceedia Ltd.—www.xceedia.co.uk— which is a software development and training firm that undertakes CMS-, LMS-, and ERP-based projects and web applications in particular. Timi has previously had two Drupal books published, titled Drupal Website Models and Drupal 6 Site Blueprints. He has also published one Joomla! book, titled Joomla! Website Models. He has also published several fiction and nonfiction books, and has been featured in several anthologies. This book was again made possible by God, who made all things possible. Thanks also to Sarah Cullington, David Barnes, Dhiraj Chandiramani, Hithesh Uchil, and Ashwin Shetty of Packt Publishing. Thanks to my family who knew how important it is to keep out of my way, especially when I am on a mission from God. Thanks also to me of course.

About the Reviewers Jose Argudo is a web developer from Valencia, Spain. After completing his studies he started working for a web design company. Then, six years later, he decided to freelance. Now that some years have passed as a freelancer, he thinks it's the best decision he has ever taken because it let him work with the tools that he likes, such as Joomla!, CodeIgniter, CakePHP, jQuery, and other known open source technologies. His desire to learn and share his knowledge has led him to be a regular reviewer of books from Packt Publishing, including Joomla! with Flash, Joomla! 1.5 SEO, Magento Theme Design, and Symfony 1.3 Web Application Development. Recently, he has even published his own book, CodeIgniter 1.7, which you can also find on Packt's site. If you work with PHP, take a look at it! Now he is working on a new book for Packt, and this time it is Joomla! related. Check for it soon! If you want to know more about him, you can visit his site, at www.joseargudo.com. To my brother, I wish him the best.

Deepak Vohra is a consultant and a principal member of NuBean.com, a software company. Deepak is a Sun Certified Java Programmer and Web Component Developer, and has worked in the fields of XML and Java programming and J2EE for over five years. Deepak is the co-author of the Apress book Pro XML Development with Java Technology, and was the technical reviewer for the O'Reilly book WebLogic: The Deinitive Guide. Deepak was also the technical reviewer for the Course Technology PTR book Ruby Programming for the Absolute Beginner, and the technical editor for the Manning Publications book Prototype and Scriptaculous in Action. Deepak is also the author of the Packt Publishing books JDBC 4.0 and Oracle JDeveloper for J2EE Development, and Processing XML documents with Oracle JDeveloper 11g.

Table of Contents Preface Chapter 1: Installation and Configuration

1 7

Minimum system requirements Installation on a local computer Installation on WampServer Installing Joomla! 1.5 on localhost Installing Joomla! on a remote server Other installation possibilities Manual installation Configuration and backend administration Trim off sample data Create a new section Create new categories Extending your Joomla! Content Construction Kit (CCK) Modules Anywhere Cron Scheduler Learning Joomla! Basic Administration Template settings Global configuration Site backup Optimizing your site System cache Gzip

7 8 8 9 17 17 18 18 19 20 20 20 21 21 21 21 22 23 24 24 25 25 26

Table of Contents

Other optimization techniques Template Components SEF Summary

26 26 26 27 27

Chapter 2: Buzzy Beez—Building a Company Site Build Buzzy Beez's site Template Extensions Install a new template Basic content Create the About Us page Create Latest Information posts Create the document repository Create a Contact form Display content Add an About Us link Add the Product News link Add the Company News link Add a Downloads link Add a Contact us link Finishing up Summary

29 30 31 31 32 33 33 36 38 42 44 45 47 48 49 50 51 52

Chapter 3: Global Hitchhikers Club—Building an Aficionado's Site Build the Global Hitchhikers Club site Template Extensions Basic content User settings Configure the front page Create a new section Create new categories Test the article submission Create a comments system Module positions Display content Add the Africa link

[ ii ]

53 55 55 55 56 57 57 58 59 61 62 63 65 66

Table of Contents

Add the other continent links Finishing up Improving the basic site Summary

67 70 71 72

Chapter 4: The Daily Joomer–Building a Newspaper Site Build The Daily Joomer online Template Extensions Organizing the articles User settings Configure the front page Create a new section Create new categories Test the article submission Forums Module positions Display content Add the News section link Add the other section links Add the Forum link Finishing up Further development Summary

73 75 75 75 76 76 77 78 79 80 81 83 85 85 86 87 88 89 89

Chapter 5: Breakin' Events—Building an Events Site Build the Breakin' Events site Template Extensions Configure JEvents component

91 93 93 93 94

Configure the Component pane Configure the Permissions pane Configure the Event Editing pane Configure the Event Detail View pane Configure the Main Monthly Calendar pane Configure the Year/Category View pane Configure the RSS pane Configure the Calendar pane Configure Latest Events pane

Create new categories Test the Event submission form

95 96 96 97 98 98 99 100 100

101 102

[ iii ]

Table of Contents

Display content Add the Global link Add the Africa link Add other continent links Modify the front page display Calendar and Latest Events blocks Finishing up Extending functionality Summary

104 104 105 105 106 106 109 110 110

Chapter 6: Joombook—Building a Community Site Build Joombook Template Extensions Basic content Configure Community Builder Create a new section and category Create a section Create a category Configure polls Configure forums Configure chat Create comments system Put it all together Create new modules Configure the front page Menus

111 113 113 113 114 114 117 118 118 119 121 122 122 124 124 124 125

Create the Chat menu Create the Forums menu Create the Blogs menu Create the Poll menu Create CB menus

125 126 127 127 128

Finishing up Adding functionality Summary

129 129 130

Chapter 7: Joomgets Inc.—Building an E-commerce Site Build the Joomgets Inc. web shop Template Extensions Basic VirtueMart configurations

131 132 133 133 133

[ iv ]

Table of Contents

Basic configuration

135

Edit Store Configuration List Payment Methods Product List Categories Shippers Shipping rates

135 138 140 140 141 145 146

Display Products Have we done this correctly?

147 148

Joe Bling is taken to the cart Joe Bling goes to the checkout

148 149

Finishing up Adding functionality Summary

152 153 154

Chapter 8: Joomlaburg Accommodations—Building a Directory Site Build Joomlaburg Accommodations Template Extensions Install Joomla! Install SOBI2 Other settings Categories

155 156 156 156 157 157 163 164

Create new categories Create subcategories

165 168

Form fields Entry Configuration View Configuration Payment Options Front page Search Permissions Finishing up Adding functionality Summary

168 171 172 173 174 178 178 178 178 178

Chapter 9: Nosh'r—Building a Photo Sharing Site Build Nosh'r Template Extensions Install Joomla!

179 180 181 181 181

[v]

Table of Contents

Install Phoca Gallery Categories Create new categories Themes Global configuration Category Views Detail View Front page New user registration Permissions Add images Finishing up Have we done this right? Extending functionality Summary

181 182 183 184 184 185 186 188 190 192 192 195 195 198 198

Chapter 10: Alienspotting—Building a Google Map Site Extensions Template Build Alienspotting Enable modules and plugins Configure ContentMap Create the front page Google map Configure JComments Test the article submission

199 201 201 201 202 202 204 206 208

Add the geographical coordinates

208

Test JComments Finishing up Extending the site Summary

209 210 211 211

Chapter 11: Weird Hap'nins—Building a News Aggregating Site Build Weird Hap'nins Template Extensions Sections and categories Create a new section Create new categories

213 215 215 215 216 216 217

[ vi ]

Table of Contents

Feed content Configure the 4RSS component Configure JCron Scheduler Add articles Configure the front page Other menus Finishing up Summary

217 218 220 222 222 223 225 227

Appendix: Templates and Extensions Index

[ vii ]

229 233

Preface This is a starter book about building websites with Joomla!—and having fun while doing so. It is not a book for professional developers. The typical user of this book may only ever build a couple of websites—one for business and one for a hobby, and perhaps another for a friend, just to show off! This book will enable you to build 10 simple web projects within hours—without having to pay a developer to do it for you. Therefore, it is not a text book but an activity book with a lot of screen illustrations to make your project fun to build. This book is not designed to make you an expert Joomla! developer. It will not even bring you close. The objective, however, is to make it possible for almost anyone with just a bit of Joomla! knowledge to build a complex website by mixing the individual projects together. Instant Joomla!!

What this book covers The hands-on example projects in this book are based on fictitious website development briefs, and they illustrate practical ways of applying Joomla!. A chapter is dedicated to each example website project. Each chapter contains a fictitious brief from which is derived the list of core and contributed extensions that will be required to implement the project. Except for Chapter 1, all of the other chapters are independent of any other chapter in the book and should be taken as a single project module. In Chapter 1, basic details about installing and configuring Joomla! for use on both local and remote servers are provided. This chapter also contains information about where to obtain essential resources for learning, using, and optimizing Joomla!

Preface

In Chapter 2, Buzzy Beez is a small company that intends to put information about their business and products on the Internet. They are looking to build a website that will capture the company's main information for use by clients and customers, so that Buzzy Beez can cut the costs of printing brochures, catalogues, and other essential promotional literature. In Chapter 3, the Global Hitchhikers Club is an online club for hobos and compulsive travelers. The purpose of the club website is to enable members to keep an online blog of their travels, and to provide a means for advising other club members on their own travels. In Chapter 4, The Daily Joomer is the only newspaper in Joomlaburg, and it has a local circulation. The intention of this website is to replicate the content of The Daily Joomer online, in a way that will enable the online edition to be easily updated on a real-time basis. In Chapter 5, "Electric" Skid Jackson is a retired break-dancer and a full-time choreographer and owner of the Def Freeze dance crew. Skid has an idea for a website where all of the street dance events from all over the world can be listed according to their location, so that he can be the first to know what is shaking. In Chapter 6, Tony Tortilla is a student at Joomlaburg University. Tony thinks that the University's social life can be vastly improved if the University had its own community website where the students can get to know each other a little better. In Chapter7, Joomgets Inc. is the foremost manufacturer of custom-made widgets in Joomlaburg. Their widgets have won awards internationally and are considered to be vastly superior to other mass-produced widgets, manufactured by so many unscrupulous garage factories. In order to consolidate their success, Joomgets have decided to set up an online e-commerce store to sell their widgets. In Chapter 8, Wally Fishbourne has the idea to create an online directory where people can post details of accommodation available for rent, share, and sale all over Joomlaburg. He is looking for a simple directory with listing and display features, rather in the style of Gumtree and craigslist. In Chapter 9, William and Elizabeth Bunter are organizing an online food appreciation community. They intend to enroll members from all over the world to share their food photos on a new website, where users will submit photos of their food for all other members to admire and rate.

[2]

Preface

In Chapter 10, Winston Groovy returned home to his wife, Rita, in Kingston, Jamaica after being missing for two days, claiming to have been abducted by aliens. So Rita Groovy has decided to create a website to aggregate occurrences of alien sightings all over the world, in order to save other people the heartache of having their loved ones permanently lost to extra-terrestrial kidnappers. In Chapter 11, bad news is always good news for the press. Vaughan Pyre has decided to take advantage of this and create a website that will aggregate bad news and weird happenings from all over the world. The content of the site will be entirely derived from RSS feeds from several sources, with each feed being automatically retrieved and its items displayed on the website. In the Appendix to this book, you will find a list of modules and themes used in this book as well as links to their project pages.

What you need for this book All of the projects in this book are based on Joomla! 1.5. A list of the contributed extensions employed, and links to their project pages, is provided in the Appendix.

Who this book is for This book is for anyone who wants to build a Joomla! site for business or for pleasure, and also for those who want to see how to apply the many available Joomla! core features and extensions in different scenarios. If you are looking to develop a professional quality website by using the Joomla! Framework, this is a great book to help you get started. However, this book is not a "dummies" book, and users are advised to familiarize themselves with basic Joomla! terminology and operations, such as creating content, and uploading and enabling templates and extensions. Some installation and configuration details are provided in Chapter 1, and users are also encouraged to visit the Joomla! project site (http://www.joomla.org/) where ample help exists in the form of both documentation and a very active users' forum. Some other sources of Joomla! help are also listed in Chapter 1.

Conventions In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

[3]

Preface

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "To create these new categories, click on the Categories button in the Control Panel."

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most from. To send us general feedback, simply send an e-mail to [email protected], and mention the book title in the subject of your message. If there is a book that you need and would like to see us publish, please send us a note via the SUGGEST A TITLE form on www.packtpub.com, or send an e-mail to [email protected]. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.

Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

[4]

Preface

Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us to improve subsequent versions of this book. If you find any errata, please report them to us by visiting http://www. packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, and added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately, so that we can pursue a remedy. Please contact us at [email protected] with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions You can contact us at [email protected] if you are having a problem with any aspect of the book, and we will do our best to address it.

[5]

Installation and Configuration Like every other endeavor in life, there are two ways of installing Joomla!—the easy way and the difficult way. In order to do it the difficult way, you will need to set up your server by yourself before you proceed with the installation. You have the choice of environment to use for your new installation: you may install directly to a live server or you can set up a test environment on your local computer.

Minimum system requirements A fully-operational web server (preferably Apache) is required to successfully install and use Joomla!. You also need a database (preferably MySQL) and the server-side scripting language PHP, together with specific modules for MySQL, XML, and Zlib functionality, which are activated within PHP amongst others. Following are the minimum versions of these server components that are required: Software

Minimum requirement

Recommended

Latest options

Website

PHP

4.3.10

4.4.7

5.x.series

http://php.net

MySQL

3.23.x or above

5.x series

Apache

1.3 or above

2.2 series

http://dev.mysql.com/ downloads/mysql/ 5.0.html http://httpd.apache. org

Installation and Coniguration

Installation on a local computer There are a number of ways to set up a test environment on your own local computer. Most time-pressed developers will install and configure directly onto a live server, but there are good reasons for running your application first on a local development server: • •

•

Developing your application locally allows you to work on it even if you are not connected to the Internet. The experience that you gain from getting your local server running on a simple installation like WampServer for a machine running Windows, or MAMP for a Mac, will make it easier for you to understand server processes and databases. This knowledge will certainly pay off as you get deeper into Joomla!. The Web is constantly scanned and archived by various search engines, and so will everything that you put on the Web. This information will be around for quite a bit of time and you certainly don't want Google to display your inevitable learning mistakes for the world to see.

Installation on WampServer WampServer2 enables you to run Apache, MySQL, and PHP on Windows, and is available for free. You can download it from http://www.wampserver.com. The WampServer2 package comes with the following components already configured to work together: • • •

Apache 2.2.11 MySQL 5.1.30 PHP 5.2.8

There are similar packages that already include Joomla! (such as DeveloperSide and WDE). However, note that these may not always have the latest secure version of Joomla!. Therefore, it is better to use WampServer2 and load it with the Joomla! version of your choice. WampServer2 is self-installing. Just double-click on the icon after you've unpacked your zipped download and follow the installation instructions. This gets your development environment ready in just a few minutes. Now let the fun begin!

[8]

Chapter 1

Installing Joomla! 1.5 on localhost Installing Joomla! on localhost can be remarkably straightforward: 1. Download the latest stable release of Joomla!, and unzip the discernible Joomla! 1.5 folder. You will need to use a tool such as WinZip for Windows (http://www.winzip.com) to perform this task. Another free alternative to WinZip is IZArc (http://www.izarc.org/). 2. Locate the directory in which WampServer2 is installed on your computer. This will usually be the root of your computer's main directory (usually C:\) and in a folder named wamp. Open it, locate the www folder, and copy your Joomla! 1.5 folder into it. Name the Joomla! folder as per your preference. In the unlikely scenario that you will be installing only one Joomla! test site on your local machine, you may—just for the sake of living to a ripe old age—name it Joomla. 3. Navigate to your computer desktop taskbar tray, click on the WampServer icon, and select the Start All Services option (if this has not yet been selected). 4. Then open your browser and navigate to http://localhost. This will display the main WampServer2 interface and you will see your project, Joomla, listed under Your Projects. 5. However, because Joomla! needs a database to run, you must create the database for our project. Click on the phpMyAdmin link. This will display another interface, this time for phpMyAdmin. Enter the name of your new database in the Create new database field. For the simple reason that we shouldn't live a complicated life, we have given this database the same name (Joomla) as our project and our installation folder. We are now ready to install Joomla!.

[9]

Installation and Coniguration

6. Joomla! has an automated installation script that automatically populates database tables. The installation script will set the base URL, connect Joomla! to the database, and create tables in the database. Navigate to http://localhost/Joomla and start your installation. 7. You will be presented with a step-by-step guide to the installation in the later pages.

Page 1: Choose Language This page asks what language you want to use for the installation.

We select English as the language of choice. Click on the Next button to continue with your installation.

[ 10 ]

Chapter 1

Page 2: Pre-installation Check Checks are made by the installation script on server configuration. If any of these items are not supported (marked as No), then your system does not meet the minimum requirements for the installation of Joomla!, and you should take the appropriate actions in order to correct the errors.

Failing to do so could lead to your Joomla! installation not functioning properly. You are not likely to face this problem on your local installation, and if you do, it can be quickly fixed.

Page 3: License The License page is just a page of legalese that the developers of Joomla! really think you must read. It tells you the conditions for use of the free software and also spells out liabilities. Primarily, if the Joomla! installation makes your computer to explode or you start acting funny after you are done with the installation, the suppliers of Joomla! will accept no liability. After correcting any host-specific errors and reading the license, you will be directed to the Database Coniguration page.

[ 11 ]

Installation and Coniguration

Page 4: Database Configuration On the Database Coniguration page, you specify the database where Joomla! will store and retrieve data.

Select the type of database from the drop-down list. This will generally be mysql. Also, enter the hostname of the database server that Joomla! will be installed on. This may not necessarily be the same as your web server, so check with your hosting provider if you are not sure. In the present case, it will be localhost. Now enter the MySQL username, password, and database name that you wish to use with Joomla!. These must already exist for the database that you are going to use. We have already determined this when we created the database. Here are the values for our present project: • • • •

Host Name: localhost Username: root (unless you have changed it) Password: Leave blank (unless you added a password when you set up your database) Database Name: Joomla (or whatever you have called yours)

[ 12 ]

•

Chapter 1

Table Preix: If you are installing more than one instance of Joomla! in a single database, then give one of them a prefix (such as jos2_), or else the second instance will not install. Otherwise, you may safely ignore this.

Click on the Next button to continue.

Page 5: FTP Configuration You can safely omit this step and go on to the next page. But if you do decide to carry out this step, do take notice of the following requirements: •

•

As explained on this Joomla! installation page, due to file system permission restrictions on Linux and other Unix systems (and PHP Safe Mode restrictions), an FTP layer is used to handle file system manipulation and to enable Joomla! installers. You may enter an FTP username and password with access to the Joomla! root directory. This will be the FTP account that handles all of the file system operations when Joomla! requires FTP access to complete a task.

However, for security reasons, if the option is available, you are advised to create a separate FTP user account with access to the Joomla! installation only and not to the entire web server.

[ 13 ]

Installation and Coniguration

Page 6: Main Configuration This is where you define your site's public identity.

[ 14 ]

Chapter 1

The descriptions of the fields are as follows: • • •

•

Site Name: Enter the name of your Joomla! site. Your E-mail: This will be the e-mail address of the website Super Administrator. Admin Password: Enter a new password and then confirm it, in the appropriate fields. Along with the username admin, this will be the password that you will use to login to the Administrator Control Panel at the end of the installation. Install Sample Data: It is strongly recommended that new Joomla! users install the default sample data. To do this, select this option and click on the button, before proceeding to the next stage.

Page 7: Finish That's all! Your installation success screen will be displayed. Congratulations, you are now on your way to becoming a Joomla! Guru.

[ 15 ]

Installation and Coniguration

Once the installation script has successfully been completed and you have removed the installation folder, you will be directed to the Joomla! Administration login page—if you want to immediately perform administrative functions on your new site. Otherwise, clicking on the Site icon will direct you to the front page of your site showing all of the sample data—if you have loaded it.

[ 16 ]

Chapter 1

That is the most of what you need to know about installing Joomla!.

Installing Joomla! on a remote server The steps for performing this installation are essentially the same as for installing Joomla! on a local machine. Some other hosting packages will come with one-click installation tools such as Fantastico—a commercial script library that automates the installation of web applications to a website. Fantastico scripts are executed from the administration area of a website's control panel, such as CPanel. The scripts typically create tables in a database, install the software, adjust permissions, and modify the web server's configuration files. Although they may look like a godsend, Fantastico offered by hosting providers does have several minuses: • • •

The installation scripts may not be frequently maintained by the hosting companies. Therefore, you may find that you have installed older releases of products along with their known security problems. Your script will be installed with the default configuration, which may not be secure. Thus it may, for example, be easier for spammers to write automated scripts to post spam messages on websites. In their eagerness to improve the user experience and heighten security, some hosting companies may wish to share an update as soon as a new release is available. Advanced Joomla! users know that it may be wise to wait until major security and functionality issues are fixed.

Other installation possibilities Installing Joomla! on a remote server without Fantastico is quite similar to the localhost procedure. The method of creating a database varies greatly across hosting companies, and you are advised to contact the hosting company if there is any confusion as to how to go about doing this. In order to install Joomla! on a non-Windows localhost, and for troubleshooting the installation, adequate documentation exists on the project website, at http://www.joomla.org, where an active forum exists with answers to virtually every problem that may be encountered during installation.

[ 17 ]

Installation and Coniguration

Manual installation The methods discussed so far concern web browser installation. However, in certain, very rare instances, it may be difficult to perform a browser installation. This problem can be solved by the manual process, in which you will need to open up some system files and change the variables by yourself. It is a difficult process and it is quite easy to get it wrong. Some detail of how to go ahead with this method can be found at http://help.joomla.org/content/view/1944/302/. For other common installation issues and errors, and how to resolve them, please refer to http://help.joomla.org/content/view/1945/302/.

Configuration and backend administration Once the installation script has successfully completed and you have removed the installation folder, click on the Admin icon and you will be directed to the Joomla! Administration login page. Alternatively, the admin login page can be accessed through the URL http://yoursitename/administrator, and in our installation through http://localhost/Joomla. Enter your username and password, and you will be taken to the main Control Panel, from where you can oversee the functions of your site.

Congratulations on choosing Joomla! as your content management system! [ 18 ]

Chapter 1

Trim off sample data When you are installing Joomla! 1.5 from the Full Package, you are given the option to also install the sample data. If you have chosen this option, you will find that your website has been preloaded with sample sections, categories, articles, and modules. Even though they could make your work faster, much of this data is actually superluous and may even confuse you. To prune the sample data, visit the Article Manager page from the Administration Control Panel, and feel safe to trash all of the 43 sample articles that you will find there. You must complete the deletion by navigating to the article Trash Manager from Content | Article Trash from the top toolbar. After this you can go to the Category Manager from the Control Panel and similarly delete all of the sample categories. Perform the same process with all of the sample sections by visiting the Section Manager from the Control Panel. Now navigate to the Module Manager page from Extensions | Module Manager, and make sure that you deselect all of the modules that you don't need. You may really need only the Main Menu, User Menu, Login Form, Popular, Top Menu, and Search modules. You may play safe by not deleting the rest, as you may need some of them someday.

[ 19 ]

Installation and Coniguration

While you are at it, also navigate to the Menu Item Manager page via Menus | Main Menu from the top toolbar. On this page, trash all of the extraneous menu items except the Home menu. You will need to complete the deletion from the menu item's Trash Manager page from Menus | Menu Trash. Finally, you can visit the Menu Manager page to delete all other menus except the Top Menu, User Menu, and Main Menu—although this may not be necessary.

Create a new section To create a new section, perform the following steps: 1. Navigate to the Section Manager from the Control Panel and click on the New icon at the top right to create a new section. 2. In the page that opens, enter the name of the section, and then save your changes.

Create new categories You may need to organize your articles into categories in order to group similar articles together. To create a new category, perform the following steps: 1. Navigate to the Category Manager page from the Control Panel. 2. In the page that opens, create a new category in the same way as you created a new section. Select the Section to which the category belongs.

Extending your Joomla! Joomla! comes enabled with some basic functionalities. However, you may need your website to do more than the basic things—in which case you have to build in some extensions. There are components, modules, and plugins that you can locate at the extensions site, http://extensions.joomla.org. Some of these extensions are commercial, but most are free. There appears to be a Joomla! extension for just about every imaginable purpose. However, make it a point to use them sparsely, as too many extensions on a single site may actually slow down your site and make it impossible to use. There are a few extensions that are, however, worth mentioning, even though they may be more for advanced users.

[ 20 ]

Chapter 1

Content Construction Kit (CCK) The out-of-the-box Joomla! page is rather basic, and you have to be content with the article title and body, and the section and category, which can sometimes be really upsetting. Suppose that you want to be able to upload files and tack them onto the articles, or have sub-categories. This is where this group of extensions comes into play. CCK enables you to create and customize new content types, and can make the difference between a plain-looking site and a very sophisticated one: http://extensions.joomla.org/extensions/news-production/contentconstruction/9128

Modules Anywhere The Modules Anywhere extension enables you to include a single module or complete module positions anywhere in your site, including inside third-party components and even inside other modules. You may really never need it, but you never know: http://extensions.joomla.org/extensions/core-enhancements/ embed-a-include/6402

Cron Scheduler The Cron Sc heduler is a Joomla! component that enables you to run cron jobs on your site at preset periods of time. The purpose is to simulate cron jobs through the Joomla! frontend interface for users who either don't have access to the server crontab or don't want to use it: http://extensions.joomla.org/extensions/administration/adminperformance/847

Learning Joomla! The following are some resources to get you up to speed with your Joomla! experience: • •

Absolute Beginner's Guide to Joomla!: http://docs.joomla.org/beginners

Quick Start to Joomla!: http://help.joomla.org/ghop/feb2008/task048/joomla_15_ quickstart.pdf

[ 21 ]

Installation and Coniguration

• •

Quick Start to Joomla! video: http://help.joomla.org/ghop/feb2008/task167/index.html

The Joomla! Community Magazine: http://community.joomla.org/magazine/view-all-issues.html

also has articles for new learners: •

http://community.joomla.org/magazine/article/522-introductorylearning-joomla-using-sample-data.html

Joomla! Frequently Asked Questions (FAQ):

•

http://docs.joomla.org/Category:FAQ

•

http://forum.joomla.org/

•

http://help.joomla.org/content/category/48/268/302/

•

http://help.joomla.org/ghop/feb2008/task167/xampp.html

Joomla! Forums: Joomla! Help site—installation manual: Joomla! Quickstart—installing XAMP: Joomla_1.5_quickstart.pdf: http://help.joomla.org/ghop/feb2008/task048/joomla_15_ quickstart.pdf

Basic Administration Much of the functionalities of the Joomla! site can easily be accessed through the admin Control Panel, as well as via the top menu bar and drop-downs. The titles of the icons and admin links are quite intuitive and easy enough to understand. Here is a list of some other things that you may easily do in the Control Panel:

[ 22 ]

Chapter 1

Template settings You may change your default template by navigating to the Extensions | Template Manager link at the top of the Administration page.

All you need to do is select your new template and click on the Default icon. To upload a new template, navigate to Extensions | Install/Uninstall. If you click on the template title in the Template Manager page, you will be presented with the Template: [Edit] page, where you can change the properties of the template, if you have sufficient HTML/CSS skills.

You can change the colors, images, and size of the panels, as well as many other attributes of the selected template, from this page.

[ 23 ]

Installation and Coniguration

Global configuration You can modify the settings that apply generally to the site from Site | Global Coniguration. You may want to specifically pay attention to the Ofline Message— the screen message that will be displayed when you have taken your site ofline for maintenance—as well as the Global Site Meta Description and Global Site Meta Keywords, which will decide how browsers describe your site and how search engines will index it.

You may also change system-related parameters, such as User Settings, which are used to determine if the site is private or open to other contributors as well as the privileges given to such users. Additionally, you may modify the Server Settings that you set when installing your site.

Site backup It is important to always back up your site, especially when it is live. This can prevent a major disaster if, for some reason, you lose your server. There are several extensions that may help you do this efficiently. Do try the following: http://extensions.joomla.org/extensions/access-a-security/backup [ 24 ]

Chapter 1

Optimizing your site When a user performs a task on your Joomla! site, a query is sent to the database. If it is for a page request, then all of the raw data needed to display this page is retrieved from the database. The browser then attempts to put the data together with all of the other elements of the page, such as the CSS code, JavaScript, images, Flash, and other objects. The speed with which your requested page loads will be constrained by server efficiency, Internet connection, and also the size of the individual extensions of the page that are being assembled. Large files, such as Flash, video, and large images, could take quite a bit of time to load, especially over a slow connection. Thankfully, there are some native Joomla! settings and optimization techniques that can improve the browsing experience of your site user. Consider the following scenarios: •

•

Your site has more than just a few extensions installed. Many of these extensions will typically have their own CSS and JavaScript files, and so the browser is given the unenviable task of first fetching these individual files from wherever they may be and then properly interpreting them before serving the page to the user. Your site has heavy traffic and each user is making requests to the database at the same time as the other users. The database is, however, not limitless; it is like a machine, and a machine that is put under too much stress eventually breaks down.

Joomla! is able to reduce the load on the database by storing cached pages that have previously been requested by other users. When these pages are requested again, they are simply passed on to the user from the cache, without the need for making a new request to the database. However, the caching feature is disabled by default, primarily because it could affect other configuration. A couple of native Joomla! tools that may improve performance are the System cache and also Gzip features.

System cache System cache may be accessed from Site | Global Coniguration. Another way is to enable the System - Cache plugin from the Plugin Manager. Enabling the cache will often offer a significant performance boost. Cache might not agree with Cyrillic and special characters.

[ 25 ]

Installation and Coniguration

Gzip To enable Gzip compression on your Joomla! website, navigate to the site's Global Coniguration page and then to the Server tab. Set GZIP Page Compression to Yes. HTML pages sent to your browser can be compressed using Gzip compression. Most web servers support Gzip compression, which can shrink your site's pages by 70 percent to 90 percent. This will result in reduced bandwidth and faster page loads for your visitors. However, Gzip compression will also use more of your server's processing power. Try enabling Gzip and see if your site loads any faster. If it doesn't, or if you get CPU warnings from your host, disable Gzip. It may hurt your website, but it most often helps it.

Other optimization techniques There are a few other optimization techniques that may come in handy. Some of these are listed in the following sections.

Template Most templates use many separate images to display a page. Each image generates a new HTTP request. The problem becomes larger when those images are not small in size and are not optimized. You can run your site through the Website Analyzer at http://www.websiteoptimization.com/services/analyze/index.html to determine how your templates perform, and then make the recommended changes to improve your templates’ performance.

Components Joomla! appears to have at least one component that is available for almost any task that you require. However, most of these components are not very efficient and may dramatically slow down your site. Typically, the more the functionality that a component offers, the more it is likely to slow down your site. Choose an extension that does just the task that you need to be done and nothing else.

[ 26 ]

Chapter 1

SEF SEF makes your site URL's look much better. The Joomla! core does an acceptable job, but keep in mind that using SEF URLs is a trade-off. A good URL will look better to a search engine and to end users, but it hurts the load time. Think carefully before deciding to enable SEF URLs. This is, however, just a suggestion, because some people do have the conviction that search engine ranking is far better than load time. In the final analysis, you may find it more useful to work on the template and other assets.

Summary In this chapter we have learned: • •

To install Joomla! 1.5 on a local computer

•

To install Joomla! 1.5 on a remote server

•

To create and organize content

• •

To configure Joomla! at the backend Basic Joomla! administration To extend basic Joomla!

[ 27 ]

Buzzy Beez—Building a Company Site Buzzy Beez is a small company that intends to put information about their business and products on the Internet. They are looking to build a website that will capture the company's main information for the use of clients and customers, so that they can cut their costs of printing brochures, catalogues, and other essential promotional literature. Buzzy Beez want their website to have: • • • •

An "About Us" page describing their business A repository from where the company's brochures and software can be downloaded A "Latest Company Information" blog to tell the world what the company is currently doing A Contact form that site visitors can use to send e-mails to Buzzy Beez

Buzzy Beez—Building a Company Site

The finished website should look similar to the following screenshot:

Build Buzzy Beez's site To build the website for Buzzy Beez, we will: • • • • • •

Create an "About Us" page Create a new documents repository called "Downloads", in which Buzzy Beez can list and upload all of their brochures, software, and so on Display a page view of the list of publications Create page views of information about the company and products, submitted as blog posts Create a simple Contact form Create a simple menu to link to the content [ 30 ]

Chapter 2

Template Buzzy Beez has chosen the beez template (which is a Joomla! community-contributed template) because it resonates with their business name, and also because it has font resizing, which is a great accessibility feature. The front page will feature a teaser for the Buzzy Beez "About Us" page.

Extensions In order to create the desired website, we will be using some essential Joomla! components and modules.

Core extensions The following optional core component and module will be required for our new site. These are already installed with Joomla! and therefore do not have to be downloaded: • •

Contacts component—will allow site visitors to send messages Main Menu module—will provide the primary navigation menu for the website

Contributed extensions The following contributed extension will also be used. It can be downloaded from the Joomla! extensions site (http://extensions.joomla.org): •

DOCman component—is a document management and download system for Joomla!. With this component, users can easily upload and manage files across multiple categories, and make them available for download. The document management system, DOCman, is not the only extension of its type on the Joomla! extensions download site. It has been chosen primarily because it is more highly recommended than the others, and the version used is free.

[ 31 ]

Buzzy Beez—Building a Company Site

Install a new template The beez template is usually distributed with the full package Joomla! 1.5 download. However, if your download does not have this template included, you can get it from a Joomla! themes website such as Joomla24 (www.joomla24.com). To install the template on your website, perform the following steps: 1. Log in to your Joomla! Administration area, and then select Extensions | Install/Uninstall. 2. Select the Beez file from your computer, or from another location, and upload it as shown in the following screenshot:

3. Navigate to Extensions | Template Manager.

[ 32 ]

Chapter 2

4. Select the beez template and set it as the default template, as follows:

Basic content The Buzzy Beez's site is quite basic. The About Us page can be safely created as Uncategorised content, and this is the task that we will perform next. However, we have included the document management system feature to add an element of excitement to the project.

Create the About Us page The About Us page, as we have decided, should be quite straightforward and will be created as Uncategorised, which is the usual way to treat static content. 1. Navigate to Site | Control Panel in the Administration area, and then click on the Add New Article button. This will display a form similar to the one shown in the following screenshot:

[ 33 ]

Buzzy Beez—Building a Company Site

2. The handy What You See Is What You Get (WYSIWYG) editor, which is an emulation of desktop software such as Microsoft Word and OpenDoc (which most people will be accustomed to), makes it easy for the website administrator and other permitted users to create information pages, and format them to their satisfaction. 3. You can now add some text and an image, and then save your changes. The About Us page is done. Note that in the following example we have inserted a Read more line to force the front page to display only a teaser for this article:

[ 34 ]

Chapter 2

4. When you promote this article to the front page after creating it, a preview of the front page will be similar to the one shown in the following screenshot:

[ 35 ]

Buzzy Beez—Building a Company Site

Create Latest Information posts The Latest Information blog posts will be created in the same way as the other Content types. However, these posts will not be uncategorized. Buzzy Beez will present this information under two categories: Company News and Product News. You will create a new content Section and name it Latest Information, and will also create two content Categories under this Section and name them Company News and Product News respectively. To accomplish this, perform the following steps: 1. Navigate to Content | Section Manager in the Administration area, and then select the New button at the top right-hand side. 2. Add a Latest Information section by completing the form that is presented, as follows:

[ 36 ]

Chapter 2

3. Now navigate to Content | Category Manager. Click on the New button and similarly create the Company News and Product News categories under the Section called Latest Information. In the end, the Category Manager panel should look similar to the following screenshot:

4. You will now add some posts to the Latest Information section. In order to do this, click on the Add New Article button in the Control Panel. In the form presented (shown in the following screenshot), add fresh articles in both the Company News and Product News categories as follows:

[ 37 ]

Buzzy Beez—Building a Company Site

Create the document repository The document management system will be created using the DOCman component. To do this, you will get this extension from the Joomla! extensions download site (http://extensions.joomla.org), and upload it to the Buzzy Beez site via the Extension Manager page. Depending on the version that you have uploaded, you may need to enable the Legacy plugin from the Extensions | Plugin Manager page. If this plugin is required, you will be prompted to install it during the installation process. After a successful upload, you will see a page similar to the following screenshot. Click on the Add Sample Data button, to complete your installation:

[ 38 ]

Chapter 2

After you have completed this step, you should get a new Control Panel for the DOCman document management system. The new DOCman Control Panel can also be accessed from the Components | DOCman | Home tab. We will leave the Coniguration of DOCman at the default setting since there is, at this time, no real reason to change it. However, we need to create two new Categories for the documents that will be available for download—Software and Brochures. To do this, we will perform the following steps: 1. From the DOCman Control Panel page, select Categories. In the page that is displayed, select the Add button at the top right-hand side. Fill the form that is presented, in order to create a new category, as follows:

[ 39 ]

Buzzy Beez—Building a Company Site

2. Create the category Brochure in the same way. 3. Delete the Sample Category that was installed with DOCman, taking care to delete the contents of this category first. Now you can start adding the downloads into DOCman. To add the downloads, perform the following steps: 1. Navigate to the DOCman Control Panel, and then click on the New File button. This will take you to a page that requires you to indicate the location of the file to be added. In the following example, we have chosen to link from another server:

2. You can now create new files for download from the form obtained, by clicking on Make a new document entry using this ile, as shown in the following screenshot:

[ 40 ]

Chapter 2

[ 41 ]

Buzzy Beez—Building a Company Site

Ensure that the uploaded documents are marked Approved and Published, or else the document repository will show empty.

Create a Contact form The Contacts component of Joomla! provides for the quick creation of multiple site contact forms that can be selected based on the category of the recipient. We can access this component from Components | Contacts in the Administration toolbar. This will lead us to the Contact Manager page. On this page, you will select the Categories tab, in order to add a recipient category. You will only be adding a single Category, called General, as follows:

[ 42 ]

Chapter 2

In the same way, you can now select the Contacts tab in the Contact Manager pane, in order to add a new contact to the General category. You will name this new contact Front Ofice. In our example, we have linked this contact information to the website administrator because we want all of the mail to be directed to their inbox:

[ 43 ]

Buzzy Beez—Building a Company Site

Display content Now begins the real fun part—displaying our content through a menu. You have learned much of what is required to post content onto the Buzzy Beez website. We will now take a look at how we can view the content that we have entered. Visit the modules page by navigating to Extensions | Module Manager, and on this page make sure that the Main Menu module is enabled:

Now navigate to Menus | Menu Manager from the administrator toolbar. This will display a menu list that has the Main Menu as the only entry, but this is all that we need. If you click on the icon (shown in the following screenshot) under the Menu Item(s) column for the Main Menu, you will be directed to another page:

Here you will see that the only menu item available, at this time, is Home, which links to the Home page. What we intend to do is to add new menu items for the About Us page, the Latest Information categories, the Downloads page, and the Contact form.

[ 44 ]

Chapter 2

Add an About Us link To add the About Us link to Main Menu, perform the following steps: 1. Click on New on the top right-hand side bar, in order to add a new menu item. 2. Select Articles, and from the expanded menu tree, select Article Layout.

[ 45 ]

Buzzy Beez—Building a Company Site

3. On the menu item page, we will fill in the desired menu title as follows:

4. If we click on the Select button on the right-hand side panel, it will display a superimposed screen. On this screen, we can select the article that we want—in this case the About Us article—and then save the page:

[ 46 ]

Chapter 2

If we navigate to the Menu Item Manager page, we will see the new About Us menu link under the Home menu link.

Add the Product News link To add the Product News link, perform the following steps: 1. Navigate to the Menu Item Manager page for the Main Menu, and then select the New button. 2. On the subsequent screen, select Articles and then Category Blog Layout. This will ensure that when this particular menu link is clicked on, it will display the articles posted under the Product News category as a blog list rather than as a list of titles:

[ 47 ]

Buzzy Beez—Building a Company Site

3. Now enter the menu Title, and select the Category for the menu, on the following page. Modify the display style if you wish to:

In the Menu Item Manager page, you will see that a new menu item, Product News, has been added.

Add the Company News link You can repeat the previous procedure to add a Company News menu link. This time, select the Latest Information/Company News as the Category source.

[ 48 ]

Chapter 2

Add a Downloads link To add a Downloads link, perform the following steps: 1. Navigate to the Menu Item Manager page for the Main Menu, and then select the New button. 2. In the screen that is displayed, select DOCman. In the subsequent page (shown in the following screenshot), fill in the menu Title, and then save your changes:

In the Menu Item Manager page, you will see that a new menu item, Downloads, has been added.

[ 49 ]

Buzzy Beez—Building a Company Site

Add a Contact us link To create the Contact us link, perform the following steps: 1. Navigate to the Menu Item Manager page for the Main Menu, and then select the New button. 2. In the screen that is displayed, select Contacts and then Standard Contact Layout. In the subsequent page, fill in the menu Title, and then save your changes:

On the Menu Item Manager page, you will find that a new menu item Contact us has been added.

[ 50 ]

Chapter 2

Finishing up If you now preview all of the pages, you will see that the Buzzy Beez's company site has been completed. The Downloads and Contact us pages will look similar to the following screenshots:

The Home and About us pages will look as follows:

[ 51 ]

Buzzy Beez—Building a Company Site

The Product News and Company News pages will look similar to the following screenshots:

Summary In this chapter, you have learned to: • •

Build a basic site for any purpose

•

Create new content Sections and Categories

•

Create a document repository by using the DOCman component Organize your content for display by using the Main Menu module

In real life, you may have more content pages that are linked to the menu and a larger number of content sections and categories, but the procedure basically remains the same.

[ 52 ]

Global Hitchhikers Club— Building an Aficionado's Site The Global Hitchhikers Club is an online club for hobos and compulsive travelers. The purpose of the club website is to enable members to keep an online blog of their travels and to provide a means for advising other club members on their own travels. In their blog, club members will describe the places where they've been, including the sleeping and eating facilities, as well as the disposition of the natives. Club members can also upload photos. The Global Hitchhikers Club website will have the following distinguishing features: • • • •

Members will be able to create blog entries, categorized by the continent, and be able to post photos into these entries The latest blog entries will automatically be promoted to the front page Site users will be able to comment on these blog entries Links will be provided to show page views of blog entries, categorized by continent

Global Hitchhikers Club—Building an Aicionado’s Site

The final layout of the Global Hitchhikers Club website can be seen in the following screenshot:

[ 54 ]

Chapter 3

Build the Global Hitchhikers Club site Picture Desperate Dan the hobo, sitting on a park bench in central Timbuktu, with his trusty laptop beside him. After locating a free Wi-Fi hotspot, he proceeds to report back to the rest of the club via the website about his journey so far: his present location, how he successfully completed his travels, and the best way to get free amenities such as meals and liquor at his destination. In order to enable this website to function successfully, we need to do the following: • • • •

Select the components and modules necessary to implement the required functionalities, and configure them Create selectable blog categories for Desperate Dan to use to describe the continent in which he has found himself Create a comments system for other site users to add comments to the blog entries Categorize and organize all of the content in a logical way, in order to enable it to be easily accessed and read

Template The template chosen for the Global Hitchhikers Club website is rhuk_milkyway (a Joomla! 1.5 core theme) because it is simple and quite adaptable.

Extensions There are often several ways of getting the same result in Joomla!. Each method undoubtedly requires different combinations of contributed and core extensions. From the tasks presented by this project, we are able to build a list of core and contributed extensions that will be used.

[ 55 ]

Global Hitchhikers Club—Building an Aicionado’s Site

Core extensions For the purpose of this website, we will be using the following core modules and components: • • • • • • •

Search component—enables site-wide searches by keyword Main Menu module—provides a menu item that links to the front page User Menu module—provides a way to make specific menu items visible only to registered and logged-in users (such as the link to post articles) Login Form module—is used to allow registered users to log in and to allow others to register Popular module—displays the most popular articles, inside a block Top Menu module—is a horizontal menu to be placed in the top portion of the site Search module—is a block to facilitate searching the articles and other items on the site by key words

Contributed extensions The following contributed extensions need to be obtained and uploaded for use in this project. These contributed extensions were selected from the Joomla! extensions site (http://extensions.joomla.org) because they were more highly recommended than the others: • •

JComments component—a comments system that permits site users to add their comments to an article JComments Latest module—displays a block of the latest comments created through the JComments component

Basic content Because this website demonstrates how to use the Joomla! framework as a multiple user blog, the main challenge is to categorize the content in a way that will make it easily accessible. But before we do this, let us first define the users and how they will be registered.

[ 56 ]

Chapter 3

User settings The basic user settings can be found on the Global Coniguration page as a link named System. In the page that opens (shown in the following screenshot), in the User Settings pane, change the New User Registration Type to Author. In this way, all of the registered users can now post blog posts. However, as these users are not Editors, they cannot publish the blog posts.

Configure the front page We want a simple front page display with only one column throughout and only two current articles fully displayed. To configure the front page for this display, navigate to the Menu Item Manager page, and then click on the lone Home menu link, which, as we see from the table, links to the Front Page.

[ 57 ]

Global Hitchhikers Club—Building an Aicionado’s Site

In the page (shown in the following screenshot) that opens, we will change the parameters required to modify the front page, and then save your changes. We will use the following parameters for this example: • •

# Leading = 1

•

Columns = 1

•

# Intro = 2 # Links = 4

Create a new section All of our articles are made up of blog posts. Therefore, we will only be creating a single new section, which we will call Blogs. Obviously, if we have articles of other types, we will need to create more sections. To create our new section, perform the following steps: 1. Navigate to the Section Manager from Control Panel. Click on the New icon at the top right-hand side, in order to create a new section. 2. In the page that opens (shown in the following screenshot), enter the name of the section, and then save your changes.

[ 58 ]

Chapter 3

Create new categories Our blog entries will be organized into categories, in order to group entries together, according to geographical location (for example, Africa, South America, North America, Antarctica, Asia, Australia, and Europe).

[ 59 ]

Global Hitchhikers Club—Building an Aicionado’s Site

In this case, we will need to create several new categories—one for each continent. 1. Navigate to the Category Manager page from the Control Panel. 2. In the following page, create a new Category in the same way as you created the new Section:

[ 60 ]

Chapter 3

Test the article submission Now let us test our article submission and see how it works. To do this, click on the Add New Article icon in the Control Panel. You will get a form similar to the one shown in the following screenshot:

Add some blog posts to ensure that you have successfully performed the tasks, taking care to select the continent from which it is supposed to have originated. We are adding all of our sample articles from the Administration Control Panel. However, in real life, we will make it possible for permitted users to add articles from the front page once they are logged in.

[ 61 ]

Global Hitchhikers Club—Building an Aicionado’s Site

Create a comments system The comments system is required to enable users to add comments to the posted blogs. To create this system, obtain the JComments component from the Joomla! extensions site and upload it to your site. The initial installation screen should be similar to the following screenshot:

1. On clicking the Next button you should arrive at the Settings page for JComments. 2. In the General page, we will set where the comments system should be shown, and also how it will appear. 3. In the Categories pane, we will select all of the categories, thus enabling the comments form to be shown for all blog posts, site-wide. 4. In the Notiications pane, we select No, in order to allow comments to be published without the approval of the site administrator. 5. In the Miscellaneous pane, we select Yes, in order to enable both RSS feeds and plugins.

[ 62 ]

Chapter 3

We will, in this example project, leave all of the other settings in the other configuration pages with the default values. However, deselect Enable CAPTCHA in the Permissions page, to make submissions easier. In real life, CAPTCHA might be necessary, in order to deter spammers. Also, download and install the JComments Latest module. This module will automatically create a list of the most recent comments, in a box that can be placed in module positions on the site.

Module positions We need to move our active site modules to the desired position. To do this, navigate to the Module Manager page via Extensions | Module Manager on the top toolbar. 1. Enable the JComments Latest module. To position the module on the right-hand side, where we want it, click on the module title to open the module's settings page. 2. While you are at it, change the Title to Latest Comments.

[ 63 ]

Global Hitchhikers Club—Building an Aicionado’s Site

3. On this page, change the Position to right (as shown in the following screenshot). Leave all of the other settings with their default values (unless you need to change any setting). Save your changes.

Perform the same steps to place other modules that need to be displayed, as follows: • •

Main Menu = left

•

Login Form = left

•

Who's Online = right

•

User Menu = left

•

Popular = right

•

Top Menu = user3 Search = user4 You can adjust how each module appears in relation to another module in the same position by changing the Order number for each. Lower numbers display further up the screen than the others.

[ 64 ]

Chapter 3

Display content We will now create menu items that can be used to view the content that we have entered. As per our site's design, links to the articles under each continent are located in the Top Menu. 1. Navigate to Extensions | Module Manager, and on this page make sure that the Top Menu module is enabled. 2. Now navigate to Menus | Top Menu from the administrator toolbar. This will display a blank table. We intend to add new menu items for the continents of Africa, Asia, Australia, Antarctica, Europe, North America, and South America.

[ 65 ]

Global Hitchhikers Club—Building an Aicionado’s Site

Add the Africa link To add the link for the blogs posted from the continent of Africa: 1. Click on New on the top right-hand side bar, in order to add new menu item. 2. Select Articles, and from the expanded menu tree, click on Category Blog Layout.

[ 66 ]

Chapter 3

3. On the Menu Item page, we will fill in the desired menu title, change any other page view display parameters that we need to, and save the menu link:

Add the other continent links Let us again add other continent links: 1. As before, navigate to the Menus | Top Menu page to bring up the Top Menu and select the New button. 2. Follow the steps mentioned in the Add the Africa link section to create all of the other menu links.

[ 67 ]

Global Hitchhikers Club—Building an Aicionado’s Site

If we now visit the Africa link in the Top Menu, from a preview, we will see the blog posts that have been posted from Africa.

[ 68 ]

Chapter 3

On clicking the Add new comment link, we are presented with a comment form, as shown in the following screenshot:

[ 69 ]

Global Hitchhikers Club—Building an Aicionado’s Site

Finishing up If we now navigate to the front page, we will see that the project is complete. We have now given Desperate Dan the hobo a new website on which he can share his travels with his pals worldwide.

[ 70 ]

Chapter 3

Improving the basic site This simple site has shown you how to use Joomla! as a blog site. The site could be made more interesting by adding other functionalities, such as a forum, a Twitter module, chats, and other collaborative features. However, these need to be considered carefully before use.

Forum Aesthetically, although blogs and forums do not seem to be compatible, a forum adds some permanence to discussions, and threads can be picked up at any time. There are several good extensions for forums, depending on the functionality you require, available at http://extensions.joomla.org/extensions/ communication/forum.

Chat Chat integration enables real-time conversation for site users. However, the problem with using chat together with a blog is that the primary functionality of the site might be lost, as more chatting than blogging might end up being done. These extensions can be found at http://extensions.joomla.org/extensions/ communication/chat.

Social bookmarking Social bookmarking can be an exciting addition, as it enables bloggers to create followers for their blog posts. There are several modules that enable you to display the status of your Twitter, Facebook, or other accounts on your site, and also a few components that post directly to social bookmarking sites. Social extensions can be found at http://extensions.joomla.org/extensions/social-web.

Blog extensions This class of extensions could easily create a blog site, as we have done, with less effort and more functionality added to it. Comment systems are already built-in, and most have integrated CAPTCHA functionality as well as an RSS feed. These extensions can be found at http://extensions.joomla.org/extensions/newsproduction/blog.

[ 71 ]

Global Hitchhikers Club—Building an Aicionado’s Site

RSS Joomla! has a nice RSS feed module that creates a small RSS button at any position that you desire. To activate this feature, perform the steps below: 1. Navigate to Extensions | Module Manager | New. 2. Click on Syndicate. 3. When the new module page opens, give the module a title, and set Show title to No. 4. Choose a position appropriate to your template. 5. In Menu Assignment, choose the page relative to your blog. 6. Save and exit.

Templates JoomlArt has a template called JA Uvite for a Joomla!-based weblog (http://www.elsak.org/joomla-template/1038-ja-uvite-joomla-template.html). The template features some modules in its footer that you could use for related items, recent posts, and even for recent comments if you have a Joomla! comment component and attendant modules installed.

Summary In this chapter, you have learned to: • • • •

Build a basic site for publishing blog posts from multiple users Configure the JComments module to collect and display comments on articles Use sections and categories to classify content Create menu items from categories

[ 72 ]

The Daily Joomer–Building a Newspaper Site The Daily Joomer is the only newspaper in Joomlaburg, and it has a local circulation. The newspaper carries a variety of articles, organized into several categories: FEATURES

NEWS • • •

Local World Business

SPORTS • •

Football

•

Golf

•

Cricket Snooker

OPINION • •

Editorial

• •

Politics

•

Media

•

Natural Health

•

Education

•

Food and Drink

•

Arts

•

Science

•

Law

•

Fashion Auto

Letters

The intention is to replicate the content of The Daily Joomer—online—in a way that will enable the online edition to be easily updated on a real-time basis. Typically, stories will be posted from all over Joomlaburg, and are approved by the Editor before they are promoted to be read.

The Daily Joomer–Building a Newspaper Site

In addition to the usual stories, it has been decided by the publisher to introduce some other community features that will encourage users to visit the website more often. So The Daily Joomer will also include a forum for readers to join in discussions on various topics. The final layout of the The Daily Joomer website can be seen in the following screenshot:

[ 74 ]

Chapter 4

Build The Daily Joomer online The primary challenges of this project will be to: • •

Normalize, categorize, and organize all of the content in a logical way, in order to enable it to be easily accessed and read Select the extensions necessary to implement the required functionalities, and configure them

Template The template chosen is the aptly-titled Newstheme, created by BuyHTTP, which can be downloaded from www.joomla24.com.

Extensions From the tasks that are presented by this project, we will be using the extensions listed in the following sections.

Core extensions For the purpose of this example, we shall be using the following core modules and components: • • • • • • •

Search component—enables site-wide searches by keyword Main Menu module—gives a menu item that links to the front page User Menu module—allows selected menu items to be visible only to registered and logged-in users (such as the link to post articles) Login Form module—for registered users to log in and for others to register Popular module—displays the most popular articles, inside a block Top Menu module—horizontal menu to be placed in the top portion of the site Search module—block to facilitate the search of articles and other items on the site by keywords

[ 75 ]

The Daily Joomer–Building a Newspaper Site

Contributed extensions The contributed extensions that we are using were selected from the Joomla! extensions site (http://extensions.joomla.org) because they were more highly recommended than others. The following will have to be obtained and uploaded for use in this project: • •

Agora component—for creating the forum Agora latest Posts (basic version)—for viewing the latest forum posts

Organizing the articles What we need to do first is establish how the articles are going to be organized for use on the site. Having an existing print-based publication has made it easier for us to create a relationship between the various Sections. For example, News as an article Section has categories for Local, World, and Business news. So there is no need to create Local News as a main Section, but it will be created as a News category. We will establish Sports as a major Section, with Football, Cricket, Golf, and Snooker as categories. We will do the same for all of the other listed articles, as follows: NEWS

SPORTS

OPINION

FEATURES

Local

Football

Editorial

Politics

World

Cricket

Letters

Arts

Business

Golf

Media

Snooker

Science Natural Health Law Education Fashion Food & Drink Auto

We have now defined the framework for how content will be organized on the site. Now let us implement this framework.

User settings The basic user settings may be found as a link named System on the Global Coniguration page. On the page that is opened, change the New User Registration Type to Author in the User Settings pane, as shown in the following screenshot. In this way, all authorized users can now post their articles online. However, as they are not Editors, they cannot publish the articles by themselves. [ 76 ]

Chapter 4

Configure the front page We want a simple front page display with only one column throughout and only three current articles fully displayed. To configure the front page for this display, navigate to the Menu Item Manager page again, and in Main Menu, click on the Home menu link, which, as we see from the table, links to the Front Page. In the subsequent page (shown in the following screenshot) that opens, change the parameters required to modify the front page, and the save your changes.

[ 77 ]

The Daily Joomer–Building a Newspaper Site

Create a new section We will need to create our own new sections for News, Sports, Features, and Opinion. To do this, perform the steps shown below: 1. Navigate to the Section Manager from Control Panel, and then click on the New icon on the upper-right, to create a new section. 2. In the page that opens (shown in the following screenshot), enter the name of the section, and then save your changes.

Do this process for all of the remaining new sections.

[ 78 ]

Chapter 4

Create new categories Categories are used to classify items that fall under the same Section, and need to be grouped with other items with which they bear a similarity. For example, News is a Section, but it can be further categorized into Local, World, and Business news. We must now create these new categories and establish relationships between them and the new sections. Our articles will be organized into categories in order to group them together with other articles, according to Section. In this case, we will need to create several new categories for all news types. 1. Navigate to the Category Manager page from the Control Panel. 2. In the following page, create a new category in the same way as you created the new Section.

[ 79 ]

The Daily Joomer–Building a Newspaper Site

Test the article submission Now let us test our article submission and see how it works. To perform this, click on the Add New Article icon in the Control Panel. You will get a form similar to the one shown in following screenshot:

Now add some articles, in order to ensure that you have successfully performed the tasks, taking care to select the Section and Category to which each article belongs. We are adding all sample articles from the Administration Control Panel. However, in real life, we will make it possible for permitted users to add articles from the front page after the user is logged in.

[ 80 ]

Chapter 4

Forums Creating the forums should also be fairly easy. However, we will have to install the forums extensions first, through the Extension Manager, which is accessed from the top toolbar Extensions | Install/Uninstall. Agora is just one of several forum extensions that are available from the Joomla! extension site, and we have only chosen it for this example because it is popular. Otherwise, any other forum component that has the functionality that the project requires may be used. The Agora download cannot be directly installed in the format in which it is downloaded because it is a zipped package that contains the component, along with separate folders for the extra modules, plugins, and languages. Upload the Agora Forum component from the unzipped folder. After a successful installation, we may now access the Control Panel from Components | Agora Forum on the top toolbar:

Now let’s create the forums. We will be creating only one forum, Have Your Say, which will have the container General as the Parent Category.

[ 81 ]

The Daily Joomer–Building a Newspaper Site

In order to do this, click on the Categories & Forums icon in the Agora Control Panel. On the subsequent page, we will create a new category: 1. Click on the Add Category icon on the upper-right, and complete the form that it presents.

2. On returning to the previous page once more, you will notice that a new icon, Add Forum, can now be found on the upper-right. Let us therefore create the Have Your Say forum.

[ 82 ]

Chapter 4

In some browsers, the Newstheme template may make some of the forum display a bit difficult to read due to CSS conlicts. An experienced user might opt for another template.

Module positions We need to move our active site modules to the desired position. To move the modules, navigate to the Module Manager page, via Extensions | Module Manager on the top toolbar: 1. Enable the Agora latest post basic module. To position the module on the left (where we want it), click on the module title and open the settings page. 2. On this settings page, you can either set or modify the display parameters for the Agora latest post basic module. In our example, change the display position of the module to left. Change the Title to Latest forum posts, and change the Number of posts that will be shown in the block, if desired. Leave all other settings with their default values, unless you have a specific need to change any of them. Save the changes.

[ 83 ]

The Daily Joomer–Building a Newspaper Site

Perform the same steps to place other modules where we want them to display, as follows: • •

Main Menu = left

•

Login Form = right

•

Who's Online = right

•

Search = user4

•

User Menu = left

•

Popular = contact

•

Top Menu = user3 Latest News = user2 You can adjust how each module displays in relation to others in the same position, by changing the order number of each. Lower numbers will appear further up the screen than the others.

[ 84 ]

Chapter 4

Display content We are now going to create menu items, in order to view the content that we have published. Our links to the articles by Section should be located in the Top Menu. 1. Navigate to the modules page, via Extensions | Module Manager. On this page, make sure that the Top Menu module is enabled. 2. Now navigate to Menus | Top Menu from the administrator toolbar. This will show a blank table. What we intend to do is add to new menu items for the sections News, Sports, Opinion, Features, and Forums.

Add the News section link We need to add a menu link for the News section. 1. Click on New on the top right-hand side bar, in order to add a new menu item. 2. Select Articles, and from the expanded menu tree, click on Section Layout.

[ 85 ]

The Daily Joomer–Building a Newspaper Site

3. On the Menu Item page, we will fill in the desired menu title, change any other page view display parameters necessary, and then save the menu link.

Add the other section links We also need to add links for the other sections (Sports, Opinion, and Features), which we do as follows: 1. Navigate to the Menus | Top Menu page, in order to bring up the Top Menu, and then select the New button. 2. Follow the same steps that we performed for the News section link, in order to create all of the other menu links.

[ 86 ]

Chapter 4

Add the Forum link Now let us add a link to the newspaper forum: 1. As before, navigate to the Menus | Top Menu page, in order to open the Top Menu, and then click on the New button. 2. Follow the same steps as we used to create the section links. However, to create a link for the forum, we select Agora Forum on the Menu Item configuration page. If you now navigate to the Top Menu, from a preview, you will see all of the new menu links that we have created. If you click on the News link, you will see the Categories containing the articles that have been posted under News, and the number of articles in each category.

[ 87 ]

The Daily Joomer–Building a Newspaper Site

Finishing up If you return to the front page, you will see that we are done with this project.

[ 88 ]

Chapter 4

Further development The result, as we can see, is a simple site that is probably suitable only for a small local newspaper. A good idea for enhancing the site might be to add a poll, through the Poll component, and advertisement banners, through the Banners component. Both of these components are core components. An exciting extension to use is CCK, which enables customized content type construction. An overview of one of the popular CCK extensions is given in Chapter 1 of this book.

Summary In this chapter, you have learned to: • • • •

Build a basic site for publishing an online newspaper or magazine Organize articles into several sections, and categories Create and use custom menu links for the display of articles Use the Agora Forum extension to create a users forum

[ 89 ]

Breakin' Events—Building an Events Site "Electric" Skid Jackson is a retired break-dancer. Having won the Red Rhino Street Dance Award for five years in a row, Skid is now a full-time choreographer and owner of the Def Freeze dance crew. Skid has an idea for a website where all of the street dance events all over the world can be listed according to their location. The primary advantage of such a website to Skid will be to provide a constant stream of prize-winning dance duels where he can enter the Def Freeze dance crew. He has chosen the name "Breakin' Events" for his website. Skid Jackson wants a website where new events, from anywhere in the world, can be listed on the site by all of the registered users. The Breakin' Events website will have the following features: • • •

Registered users will be able to create events, categorized by continent A Calendar, which will show all of the events, in a grid view A listing of the latest listed events, shown on the front page

Breakin' Events—Building an Events Site

The completed Breakin' Events site is shown in the following screenshot:

[ 92 ]

Chapter 5

Build the Breakin' Events site To enable this website to function as designed, we need to do the following: • • •

Create selectable terms for users to select the Continent in which the event is taking place Select the extensions necessary to implement the required functionalities, and configure them Categorize and organize all of the content in a logical way through a menu system, in order to enable them to be easily accessed and read

Template The template chosen for this website is Come Dance, which has a stunning design and is quite appropriate for the theme of the site.

Extensions The extensions listed in the following sections will be used:

Core extensions We need to visit the Module Manager page, and enable all of the modules that we need, especially the following: • • • • •

Main Menu module—gives a menu item that links to the front page User Menu module—allows selected menu items to be visible only to registered and logged-in users (such as the link to post articles) Login Form module—is used to allow registered users to log in and to allow others to register Top Menu module—is a horizontal menu to be placed on the top part of the site Search module—enables site-wide searches by keyword

Any other modules in the page may be disabled, as they are not relevant to this project.

[ 93 ]

Breakin' Events—Building an Events Site

Contributed extensions The Breakin' Events website is built entirely around the JEvents module, and should be fairly easy to build. The following contributed extensions will be required: • • • •

JEvents Component—is the main component required JEvents Mini-Calendar Module—gives an overview of events, which can be placed on any page JEvents Latest Events Module—gives a brief summary of upcoming events JEvents Search Plugin—makes events searchable via the core Joomla! search engine

Configure JEvents component Upload the JEvents component via Extensions | Install/Uninstall in the top toolbar on the Administrator page. Then configure the component through the configuration page that appears during upload or installation. There are nine panes to configure on this page—Component, Permissions, Event Editing, Event Detail View, Main Monthly Calendar, Year/Category View, RSS, Calendar, and Latest Events.

[ 94 ]

Chapter 5

Configure the Component pane The Component pane is the first pane that you will see on the Global Coniguration page. It is where you set the basic displays of the Events component. Most of the parameters can be safely left with their default values. You may want to prevent advertisements from the JEvents website from being displayed on your website, and may also want to prevent search engines from indexing your events. In this case, select the options as shown in the following screenshot:

[ 95 ]

Breakin' Events—Building an Events Site

Configure the Permissions pane The Permissions pane establishes the category of users who may post events to the site, and the conditions under which the posts are accepted. If you select Enable User Authorisation you will need to assign authorization to specific, individual users, in order to enable them to manage events. Otherwise, leave this setting with the default value, in order to permit general user registration. For user-level permissions, the default setting only permits the administrator to publish posts, unless you decide to change this.

Configure the Event Editing pane The Event Editing pane shows how published events may be edited. 1. The first three lines decide if a pop-up window is enabled and the size of such a window. 2. The 10th and 11th lines determine whether the administrator should be alerted when a modification is made to published events or a new event is posted. You may want to change this setting, or leave it with the default value.

[ 96 ]

Chapter 5

The other default settings can be left as it is:

Configure the Event Detail View pane The Event Detail View pane shows the fields that are viewable for each posted event, such as: • •

By whom it was posted

•

The number times that the listed event has been viewed

•

The e-mail address of the person who posted the event If and when the event repeats

[ 97 ]

Breakin' Events—Building an Events Site

Configure the Main Monthly Calendar pane The Main Monthly Calendar pane sets the maximum number of events that are shown in the page view for any month. The starting time for each event can also be shown. The bottom part of this pane provides the tooltip parameters if the feature is selected. These may be left with their default values.

Configure the Year/Category View pane The Year/Category View pane describes how the yearly view and the category views are displayed. The yearly view shows a list of events for an entire year, and the category view shows a list of the events for an entire category. The settings may be left with their default values.

[ 98 ]

Chapter 5

Configure the RSS pane You may think that it is a fine idea to have the ability to post to your site available for subscribers who may want to export them for use on other websites, read them in their favorite feed reader, or read them in their e-mail client. In this case, you will find the RSS pane useful. Many of the settings may be left with their default values, except the fields for the RSS Title and the RSS Description, which you need to change to relect your site's identity.

[ 99 ]

Breakin' Events—Building an Events Site

Configure the Calendar pane The Calendar pane is relevant only if you have installed the optional Calendar module. The settings on this pane may be left with their default settings. The JEvents Mini-Calendar module displays events in a calendar view.

Configure Latest Events pane The Latest Events pane is also only relevant if you have installed the optional Latest Events module. This module displays new events that have just been posted to the site, in a block. These settings may be left with their default values, unless you really must make changes.

[ 100 ]

Chapter 5

Upon saving your definitions by clicking on the top right-hand side icon, you will be presented with the backend Control Panel for JEvents, which you may also access from the top toolbar Components | JEvents. From this Control Panel, you may modify the configuration at any time.

Create new categories Our events will be organized into categories, in order to group together events according to their geographical location. 1. Navigate to the JEvents Control Panel, and then click on the Manage Categories icon. 2. On the subsequent page, click on the New icon on the top right-hand side, in order to add a new category.

[ 101 ]

Breakin' Events—Building an Events Site

3. Add parameters for the new category, and then save your changes.

Ensure that all of your categories are Published.

Test the Event submission form We will perform the following steps in order to test the event submission form: 1. Click on Manage Events from the JEvents Control Panel. 2. Click on the New button on the top right-hand side, and fill in the details of the event in the following primary form.

[ 102 ]

Chapter 5

The second tab at the top of the form (Calendar) takes you to another pane, where you set the event dates:

Save the Event submission form, and then post some more events in other categories.

[ 103 ]

Breakin' Events—Building an Events Site

Display content We are now going to create menu items that can be used to view the content that we have entered. From our design links to the articles by continent, everything should be located in the Top Menu. 1. Navigate to the modules page, via the Extensions | Module Manager link. On this page, make sure that the Top Menu module is enabled. 2. Next, navigate to Menus | Top Menu from the administrator toolbar. This will show a blank table. Here we intend to add new menu items for the continents of Africa, Asia, Australia, Oceania, North America, and South America. We will also include a Global link.

Add the Global link To add the Global link, we will perform the following: 1. Click on New in the top right-hand side bar, in order to add a new menu item. 2. Select Jevents and from the expanded menu tree, and then select Category List of Events.

[ 104 ]

Chapter 5

3. On the subsequent page, enter the title of the link (Global). In the Parameters (Component) pane on the right-hand side, select all of the categories available. You may leave the Parameters (System) settings with their default values.

Add the Africa link We will perform the following steps in order to add the Africa link: 1. Click on New in the top right-hand side bar, in order to add a new menu item. 2. Repeat the process that we followed for the Global link. However, this time select only the Africa category.

Add other continent links To add other continent links, perform the following: 1. As before, visit the Menus | Top Menu page, in order to display the Top Menu, and then click on the New button. 2. Follow the same steps as we previously did for the Africa link, in order to create all of the other menu links. If we now click on the Africa link on the Top Menu, from a preview, we will see the events that have been posted from Africa.

[ 105 ]

Breakin' Events—Building an Events Site

Modify the front page display The front page is, by default, shown by the Home link in the default Main Menu. However, we want the Home page to show the events in the Global list category instead. Therefore, we will edit the Home link via the Menus | Main Menu option on the top bar. On clicking the Home link, we are presented with the page shown in the following screenshot. Click on the Change Type button:

On the page that opens, change the settings as we did for the Global link, and we are done.

Calendar and Latest Events blocks There is a calendar view block provided by the JEvents Calendar module. In order to make this easily accessible, we will place it on the sidebar. There is also a Latest Events block, which lists newly-posted events, which we will also place in the sidebar. Navigate to the Module Manager page, and then move these two modules to the right sidebar. If we return to the front page, we will then have the blocks arranged, as we want.

[ 106 ]

Chapter 5

Upon clicking the month link at the top of the calendar, we are presented with the page view shown in the following screenshot, which allows a more detailed view of individual events:

[ 107 ]

Breakin' Events—Building an Events Site

There, if you click on any event panel, you will see a page similar to following screenshot, showing the details of the event.

[ 108 ]

Chapter 5

Finishing up If we now visit the Home page from the Preview tab, we will see that our project is complete.

[ 109 ]

Breakin' Events—Building an Events Site

Extending functionality This site was created for the sole purpose of listing events. It might be possible to add some other features, such as allowing comments, and possibly a forum for site users to discuss past and upcoming events. Useful extensions that will do these can be found on the Joomla! extensions site http://extensions.joomla.org.

Summary In this chapter, you have learned to: • • • •

Build a basic site for listing events from multiple users, by using the JEvents module Categorize listed events Create calendar views for listed events Create a list of the latest events on the front page

[ 110 ]

Joombook—Building a Community Site Tony Tortilla is a student at Joomlaburg University. Tony thinks that the social life could be vastly improved if the University had its own community website where the students could get to know each other a little better. With about 5,000 students, Tony thinks that the idea might immediately make him a big hit with the girls, and also possibly make him lots of money in the future when the site is bought by Google. So Tony Tortilla has come up with the idea of Joombook—a simple community website for the students at Joomlaburg University. Joombook is intended to be quite simple, initially, and will have the following main features: • • • • •

Users will be able to create detailed profile pages for themselves Users will be able to create blogs, which will be shown on a general blog page and be available for comments There will be a forum for users to express their views and opinions on several subjects, including books, music, film and video, and concerts Permitted users will be able to create polls and have others vote in them Users will have access to real-time chat

Joombook—Building a Community Site

The completed social website will look similar to the following screenshot:

[ 112 ]

Chapter 6

Build Joombook Tony is not looking for anything fancy like Facebook or MySpace, but just a weekend project. All he wants is a simple community portal with basic social networking features. In order to create this site, we need to do the following: • • • • • • •

Establish profile pages where users may fully describe themselves Select the extensions necessary to implement the required functionalities, and configure them Create blogging functionality to enable users to share their journals with one another Create a forum for discussing entertainment topics, principally, books, music, film and video, and concerts Enable users to create polls Enable users to chat with one another in real time Organize all of the content in a logical way, in order to access and read it easily

Template The template chosen is News StudioAlfa, which is a community-contributed template. Tony chose this template because he liked its simple, clean, and uncluttered appearance.

Extensions For Tony Tortilla's community website, we will be using some core extensions and some unique contributed extensions.

Core extensions The core modules that will be used for this site are as follows: • •

Main Menu module—creates primary navigation for the site pages. Polls module—allows your site to capture votes on different topics in the form of multiple choice questions. This is a core component.

[ 113 ]

Joombook—Building a Community Site

Contributed extensions The contributed extensions that will be used for this site is as follows: • • • •

Community Builder—provides components and modules that will enable users to register, create profile pages, and interact with one another. JComments—allows users to comment on articles. Simplest Forum—enables threaded discussions about general topics. jPFChat—provides a discussion space, like a chat room.

Basic content The site is built around the Community Builder (CB) component, which should give it the "community" functionality. Tony wants the users to have a standard profile form so that uniformity of the information (which the site presents to other users) can be maintained. This functionality is provided by CB, and it also lets users know what they should expect to include on a user profile.

Configure Community Builder The distribution package of the Community Builder is a compressed ZIP file comprising the following eight files: • • • • • •

com_comprofiler.zip—contains the installation package of the CB

component mod_cblogin.zip—is the module package that will be used to substitute the default Joomla! Login module mod_comprofilerOnline.zip—is the module package that displays

online members mod_comprofilerModerator.zip—is the moderation package used to support the delegation of registration approval tasks to moderators, and pending connection items to registered users cb_expert_files_only_m_4_j_1.0.tar.gz—contains three folder

hierarchies that can be used to upgrade previous installations of the Joomla! 1.0.x series without uninstalling previous versions cb_expert_files_only_j_1.5.tar.gz—contains three folder hierarchies

that can be used to upgrade previous installations of the Joomla! 1.5.x series without uninstalling previous versions

[ 114 ]

• •

Chapter 6

README-NEW-INSTALL.txt—is the traditional text file that contains condensed information regarding the distribution, functionality, and quick installation instructions targeting first-time CB installations README-UPGRADE.txt—contains information that should guide you through

upgrading a pre-existing CB installation to the latest CB version You will, of course, not need all of the files, except for the first four, as we will be performing a new installation. This is how we will proceed further: 1. Install the com_comprofiler.zip file via Extensions | Install/Uninstall. The installation of CB is a two-step process, and will be done automatically. You need to wait for the green message stating that the installation has finished. 2. Install the mod_cblogin.zip file via Extensions | Install/Uninstall. 3. Install the mod_comprofiler Moderator.zip file. 4. Install the mod_comprofilerOnline.zip file. This is a module that displays a list of online users, with a link to their profiles. 5. Navigate to Extensions | Module Manager. Enable the mod_cblogin module (CB Login) which in turn enables the other CB modules' administration backend manager. Click on the red cross in the Enabled column, or click on the module name to set the module's parameters. 6. Navigate to Components | Community Builder | Coniguration, and at least choose the Name Style (first/last name mode choice) corresponding to how you want to split, or not split, the existing users' names during the synchronization of existing users in the next installation step. Make sure that you click on Save on the Coniguration page. Many of the settings may be left at with their default values, but remember to change the Registration Reply To Email Address field. 7. Navigate to Components | Community Builder | Tools, and use the Synchronize Users tool to synchronize CB with Joomla!. 8. If you have installed sample data during the installation of Joomla!, disable the standard Joomla! Login module. In order to do that, navigate to Extensions | Module Manager and then click on the green checkmark in the Enabled column of the Login Form (mod_login); the icon then becomes a red cross. 9. Navigate to Components | Community Builder | Tools, and use the Load Sample Data tool to pre-populate fields with standard user contact fields (address, phone, and so on), and also create a default users list. To edit the default users list, or to add other users lists, navigate to Components | Community Builder | List Management, and change or add the list(s), along with the corresponding access level. Make sure that these are published.

[ 115 ]

Joombook—Building a Community Site

10. If you want to allow registrations only through Community Builder, which is recommended, navigate to Community Builder | Coniguration | Registration and set Allow User Registration to yes, independently of global site setting. In Site | Global Coniguration | Users, set the Allow User Registration option to No. 11. Once these steps have been performed, for the user registration link (which we shall create later), we should have a registration form similar to following screenshot:

[ 116 ]

Chapter 6

Also, on a typical user profile page, which will appear after a user has submitted his or her registration and logged in, we should have a profile display similar to the following screenshot:

If we have added more fields to the registration form, a more detailed profile will be generated.

Create a new section and category Of course, we really don't need to create a new section and a category. This is because we only have one type of article—blogs. Therefore, all of the articles could be left uncategorized. However, this is quite untidy, and Tony might decide to add another article section, such as Campus Gist, in the future. Therefore, we will create a single category and a single section for this particular project.

[ 117 ]

Joombook—Building a Community Site

Create a section All of our articles are made up of blogs. However, we will create one new section that we will call "Articles". In order to create this section, perform the steps shown below: 1. Navigate to the Section Manager from the Control Panel, and then click on the New icon at the top right-hand side, in order to create a new section. 2. On the page that is displayed next, add the name of the section, and then save your changes:

Create a category As mentioned before, we will need to create a new category, which we will call "Blogs". 1. Navigate to the Category Manager page from the Control Panel. 2. On this page, create a new category in the same way as we created the new section. In the Section field, select Articles.

[ 118 ]

Chapter 6

3. Now add some blog posts, to ensure that you have successfully performed the task.

Configure polls Navigate to the Poll Manager component page from Components | Polls. A poll is used for obtaining feedback on various topics from the users. Let us create a sample poll for the users of Tony Tortilla's Joombook. Our poll will be as follows: Who is the coolest dude on campus? ° °

Tony Tortilla

°

Walter (Wally) Rosenberg

°

The Invisible Man I don't care

[ 119 ]

Joombook—Building a Community Site

To create this poll, click on the New link. Enter your question and the options, and then save the poll:

Tony wants this poll to be seen in the sidebar. Therefore, we need to create a module for this poll. To do this, we navigate to the Module Manager page and click on the New button on the top right-hand side. This will display the page shown in the following screenshot:

[ 120 ]

Chapter 6

On this page, we select Poll, and then click on the Next button. This displays a configuration page (shown in the following screenshot) for the new Poll module that we have created:

Now give the module a title, and also select the poll that it should display, as well as the position in which it should be placed. We now have a module for displaying Tony's poll about the coolest dude on campus.

Configure forums Creating forums should also be fairly easy. Navigate to the Extensions | Install/ Uninstall page, and then upload the Simplest Forums component. We will now navigate to the Simplest Forums configuration page from Components | Simplest Forums. We will create four forum boards for Books, Music, Film and Video, and Concerts. By clicking on the New tab, we will get the page shown in the following screenshot:

[ 121 ]

Joombook—Building a Community Site

Posting to the forum requires that the posting form can be accessed through a menu link. We shall create this menu link later.

Configure chat There are several other components and modules that are capable of adding the chat functionality to the community website. However, the jPFChat component has been selected purely as an example, and not because it is necessarily better than any other component. Navigate to the Extensions | Install/Uninstall page, and upload the jPFChat component. Then navigate to the jPFChat configuration page via Components | jPFChat. Most of the settings on this page (shown in the following screenshot) may safely be left with their default values—except for the modifications that you need to make because of your specific needs:

The chat system is now configured and ready for use. However, it will also need a menu link that will take the user to the chat page. We shall create this later.

Create comments system The comments system is needed to enable users to add comments to the posted blogs. To create this system, obtain the JComments component from the Joomla! extensions site, and upload it. The initial installation screen should look similar to the following screenshot: [ 122 ]

Chapter 6

On clicking the Next button, you will be directed to the configuration page for JComments. On the first, General, page, we will set the locations where the comments system should be shown and how they will be shown, as follows: 1. In the Categories pane, we select a category of Articles/Blogs—it is the only category available. 2. In the Notiications pane, we select No, in order to enable comments to be published without the approval of the site administrator. 3. In the Miscellaneous pane, we select Yes, in order to enable both RSS feeds and plugins.

[ 123 ]

Joombook—Building a Community Site

Also, download the JComments Latest module and install it. This will automatically create a list of the most recent comments, in a box that can then be placed in module positions on the site.

Put it all together Now we need to tie all of the elements of this project together, in order to make the site more meaningful to the users.

Create new modules You may want to create new modules to display the following: • •

Who is online? Most read blog

Follow the procedure that we used in creating the module for Tony's poll in the section Conigure polls.

Configure the front page From our design, we need to move the latest blog posts to the front page. To do this, we need to reconfigure the Home menu link on Main Menu to point to the Blogs category. Because all of our articles are blogs, it is simply an administrative task to publish whichever article we want to the front page. However, we do need the articles to appear in a single column on the front page. Therefore, we navigate to Menus | Main Menu, select Home, and then change the parameters as required:

[ 124 ]

Chapter 6

Now all of the blogs posted onto the front page will be displayed in a single column.

Menus Let's tidy up our site by creating a menu system that is more intuitive. For simplicity, we will put our links to the User Proile, Blogs, Chat, Forums, and the Polls menu all under the Main Menu. We will, however, need to create these menu links first.

Create the Chat menu To create the Chat menu link that points to the jPFChat component, perform the following steps: 1. Navigate to Menus | Main Menu, and then click on New, in order to create a new item. 2. On the next page, select jPFChat from the tree. This will display the page shown in the following screenshot:

3. Add the menu item Title, and then save your changes.

[ 125 ]

Joombook—Building a Community Site

Create the Forums menu To create the Forum menu link that points to the Simplest Forum component, perform the following steps: 1. Navigate to Menus | Main Menu, and then click on New, in order to create a new item. 2. On the following page, select Simplest Forum, and then click on Forum List from the tree, in order to display a page of the available forums:

3. This will direct us to the menu parameters page. Add the menu item Title, and then save your changes.

[ 126 ]

Chapter 6

Create the Blogs menu To create the Blogs menu link that points to the Blogs category, perform the following steps: 1. Navigate to Menus | Main Menu, and then click on New, in order to create a new item. 2. On the following page, select Articles, and then click on Category List Layout. We have made this selection because we envisage that a large number of blog posts may be submitted on a regular basis, and it will be neater to have only the titles displayed in a list, rather than the blog layout. 3. On the next page (shown in the following screenshot), give a name to the menu item, and also select the category from which it will fetch articles:

Create the Poll menu To create the Poll menu link that points to the current poll on the site, as well as a selection box for other available polls, perform the following steps: 1. Navigate to Menus | Main Menu, and then click on New, in order to create a new item. 2. On the following page, select Polls. 3. On the next page, add the menu item title, as usual, and then select the poll that should be displayed.

[ 127 ]

Joombook—Building a Community Site

4. After performing these tasks, save the link. If we click on the link created, the page shown in the following screenshot is displayed:

Create CB menus We need to add the User Proile link for Community Builder—this will be the link to the user's profile page: 1. Navigate to Menus | Main Menu, and then click on New, in order to create a new item. 2. On the following page, select Community Builder and then click on User Proile. 3. On the next page, add the menu item and then save the link. We also need to add the menu item for registration and also for a list of users. In this case, we will perform the above-mentioned steps, and select Community Builder | Registration page and Community Builder | Users lists. Community Builder has a large selection of additional extensions that can be used to improve its appearance and performance. You can find these at http://extensions. joomla.org/extensions/extension-specific/community-builder-extensions. You may also visit the Joomla! showcase site at http://community.joomla.org/ showcase/sites/society/social-networking.html in order to obtain more ideas on how to add further customization. [ 128 ]

Chapter 6

Finishing up We may now make sure that our News StudioAlfa template is selected as Default, in Extensions | Template Manager. Tony Tortilla now has a new social networking site for his friends and the entire Joomlaburg University student community!

Adding functionality There are dozens of other extensions available that can be used to spice up the basic site. These range from social bookmarking tools and other extensions that emulate functionalities seen on websites such as MySpace and Facebook, to commerciallyavailable ones that provide out-of-the-box configurations (for example, Jomsocial: http://www.jomsocial.com). [ 129 ]

Joombook—Building a Community Site

Summary In this chapter, you have learned to: • •

Build a basic website for social networking, by using Community Builder and other Joomla! extensions Configure the Forums, Polls, Chat, and so on as community features for the portal

[ 130 ]

Joomgets Inc.—Building an E-commerce Site Joomgets Inc. are the foremost manufacturers of custom-made widgets in Joomlaburg. Their 'Joomgets' have won awards internationally, and are considered vastly superior to other, mass-produced widgets. In order to consolidate their success, Joomgets Inc. have decided to set up an online e-commerce store to sell their Joomgets. To start with, however, the widgets will only ship within Joomlaburg and will be available in three colors—pink, yellow, and blue—and in only one size. The functionality required by Joomgets for their website includes: • • •

Simple page views of the store from the links on the Main Menu and Top Menu A billing system with the automatic addition of a lat shipping cost for all items A shopping cart with checkout that permits payment by PayPal

Joomgets Inc.—Building an E-commerce Site

Having considered other alternatives, Joomgets Inc. have chosen to use the VirtueMart shopping cart for their web shop. The following screenshot shows the completed web shop:

Build the Joomgets Inc. web shop Many books have been written on how to use VirtueMart, and it will be foolhardy to imagine that everything about this very versatile shopping cart system can be learnt in a few pages. Therefore, we will look exclusively at the steps required to build the Joomgets Inc. project. Specifically, we will be looking at how to:

[ 132 ]

• • • •

Chapter 7

Enable the shopping cart to list detailed product descriptions and images Show the product name, detailed description, prices, and the ordering procedure in full page view, and provide links from the Main Menu Configure the product prices and billing to relect the cost of lat-rate local shipping Configure the checkout to accept payment through PayPal

Template The theme chosen is siteground-j15-101, which has a bright, pleasant, and simple design, and is very adaptable. The URL to the download page is listed in Appendix A of this book.

Extensions From the tasks that are presented by this project, the Joomgets website will be built entirely around the VirtueMart component.

Basic VirtueMart configurations At first glance, VirtueMart can look very hostile indeed, with many pages of daunting features. However, this needn't be so. Just imagine it as a feast, and you only need to take what you need from the whole table and leave the rest for later, or for other people with more varied tastes. Firstly, we must install VirtueMart and all of the optional modules. The downloaded VirtueMart package cannot be installed as it is; it needs to be unzipped into a new folder. Unzipping the package will yield the VirtueMart component as well as two folders containing some optional modules and plugins respectively. It should also provide you with an installation manual, which might not be very useful to you if you don't like a hard life. It could actually be a bit of work to read it all.

[ 133 ]

Joomgets Inc.—Building an E-commerce Site

Because we want to go to the beach in the next couple of hours, we will only upload the main VirtueMart component. When installing the VirtueMart component, it may be useful to also install the sample data, as this will show how things eventually go together, even though we will need to delete it later:

After installing the sample data, you are directed to the VirtueMart Control Panel, as shown in the following screenshot:

[ 134 ]

Chapter 7

Even though we have, at this time, chosen not to upload any of the modules contained in the modules folder (as they are not needed for this exercise), you should note that these might be useful if you want to perform further customizations in the future.

Basic configuration From the VirtueMart Control Panel, there are three icons that currently concern you: Edit Store, Coniguration, and List Payment Methods. We will address the other icons later.

Edit Store Upon clicking the Edit Store icon, you are directed to a page where you will be able to modify some basic data about your store: • •

Store panel—provides a set of fields where you will be able to enter your store name and address Store Information panel—uploads a logo for your site and sets the parameters for the minimum purchase order amount and the minimum purchase amount required to qualify for free shipping

[ 135 ]

Joomgets Inc.—Building an E-commerce Site

• •

Contact Information panel—sets the name and other contact details for the store's key operative Currency Display Style panel—sets your primary store currency, how prices should be displayed, and also what other currencies are permitted

[ 136 ]

• •

Chapter 7

Description panel—describes what your store offers Terms of Service panel—describes your terms for doing business

[ 137 ]

Joomgets Inc.—Building an E-commerce Site

Configuration When the Coniguration icon is clicked from your VirtueMart Control Panel, it directs you to the main configuration page, which has seven configurable panes, as seen in the following screenshot:

[ 138 ]

Chapter 7

1. Global—is the landing page. The settings on this page may be left with their default values. 2. Security—provides security settings that may also be left with their default values. 3. Site—provides settings for the site that may be left with their default values. 4. Shipping—sets the store's shipping method. In this case, as shown in the following screenshot, we have selected only the Standard Shipping module:

5. Checkout—provides checkout settings that may be left with their default values. 6. Download—answers the question "does your store sell downloadable ware?". This is the place to set how the purchase and delivery of such products are handled. These settings may be left with their default values. 7. Feed Coniguration—sets rules by which items are incorporated into the outgoing feeds for your site. You may leave these settings with their default values.

[ 139 ]

Joomgets Inc.—Building an E-commerce Site

List Payment Methods On clicking the List Payment Methods icon, we are directed to a page that lists all of the payment methods acceptable to VirtueMart. From this list, you will select the payment method that will be implemented on your site. In this case, we have selected PayPal (listed in the following screenshot) as the only permitted payment method:

Product List Our VirtueMart installation provides a lot of sample products—mostly related to gardening. However, our store does not sell any of these, so we will delete all of the sample products. We do this by clicking on the Product List icon in the VirtueMart Control Panel. Select all of the listed products, and then click on Remove on the top right-hand side. [ 140 ]

Chapter 7

Categories Our VirtueMart installation also provides predefined product categories, none of which agree with our store items. Therefore, we will also delete all of these categories. We do this by clicking on the Category Tree icon in the VirtueMart Control Panel. Select all of the listed categories and subcategories, and then click on Remove on the top right-hand side, taking care to remove the subcategories first. Now we can begin building our store the way we want it—first by adding new categories, and then adding products to the categories. However, in our case, we only need one category: widgets. To add the new category, access the Category Tree page, and perform the following steps: 1. Click on New to add a new category. We will be presented with the following page:

[ 141 ]

Joomgets Inc.—Building an E-commerce Site

2. Add the category name and its description. The Images pane can be selected from the top of this form and is needed if you want to add an image for your category. This pane is optional. Save the category before proceeding. 3. To add products, navigate to the Product List page, which will be empty at this time, and then click on New on the top right-hand side. The form that we are presented may look quite daunting, but we will tame it in a few moments. The page has five panes for describing the product. However, for the purpose of this simple project, we will only concern ourselves with Product Information and Product Images panes.

Product Information The first pane that we see is the Product Information page, where basic information about the item being listed is entered. On this product form, we do not have to fill in all of the fields. Only the essential parts, such as the Name, SKU, and the product price, need to be completed, as shown in the following screenshot. We should also enter an appropriate description of the item and one or more photographs, or else we will find it a bit tough to get a potential buyer to purchase our invisible product:

[ 142 ]

Chapter 7

Note that these fields are essential because VirtueMart demands that they be filled in. SKU stands for Stock Keeping Unit. It is the unique identifying mark for a specific product and thus must be defined. Without a price, nobody will be able to purchase the product. This example website is selling widgets, but in real life it may be helpful to add the product dimensions and the weight so that the buyers have an idea of the size—especially if they are expecting the product to fit in their mailbox.

Product Images In the Product Images pane, we will add a descriptive image of the product that we have just listed. In the left-hand side panel, browse your computer for the required image, and upload it. The product thumbnail image will automatically be added by the same procedure:

[ 143 ]

Joomgets Inc.—Building an E-commerce Site

After adding the product descriptions and saving the product, we will have a summary for the product page similar to the following screenshot:

[ 144 ]

Chapter 7

We will repeat the procedure for the other products, and on completion, our Product List page should look similar to the one shown in the following screenshot:

Shippers Having listed our products in the catalogue, we must define how they will be delivered to the purchaser. On the left-hand side panel of our VirtueMart configuration, we will select the Shipper tab.

[ 145 ]

Joomgets Inc.—Building an E-commerce Site

This tab will show us that the only available shipping methods are DHL and UPS. However, we want to use the Joomlaburg Mail Service (JMS). Therefore, we will need to create another shipper by clicking on New at the top of the page. In the page that appears, we enter the required information for JMS, and then save your settings. Our new shipper's list will now include JMS, as shown in the following screenshot:

Shipping rates It is necessary to define what rates will be chargeable for the items to be shipped by JMS, so we will again select Create a Shipping Rate from the left-hand side administration panel, and call this new rate Flat rate shipping, as shown in the following screenshot:

[ 146 ]

Chapter 7

Having done this, we can now visit the Shipper list page and remove all of the other shippers except JMS—taking care to remove the listed shipping rates first.

Display Products This is a simple shopping cart with only one category of products, and there is no need for any elaborate menus and navigation systems. All we need to do is place the links to the store in the Top Menu. In order to do this, we will visit the Menu Item Manager page from Menus | Top Menu in the administration bar. We will then click on the New icon, in order to create a new menu item. On the next page, we will select VirtueMart from the menu tree, and then on the following page we will complete the creation of our menu item:

[ 147 ]

Joomgets Inc.—Building an E-commerce Site

We could also configure the Home link in the Main Menu to point to the VirtueMart store.

Have we done this correctly? We have configured the cart to accept payment, and we have added products to the cart. Let's see whether we have done this correctly, by following a typical order process. Joe Bling, our customer, has clicked on the Add to Cart button, in order to buy a Blue joomget, as shown in the following screenshot:

Joe Bling is taken to the cart Placing the order directs Joe Bling to the cart, where he is given the options to either Continue Shopping or to proceed to the Checkout, as follows:

[ 148 ]

Chapter 7

Joe Bling goes to the checkout On deciding to go to the checkout, Joe Bling is taken to another page where the delivery and billing information is demanded, as seen in the following screenshot:

[ 149 ]

Joomgets Inc.—Building an E-commerce Site

It is hard to proceed beyond this stage on anything other than a live site because of authentication problems. However, as we are logged in as administrator, we may go to the next stage of checkout:

[ 150 ]

Chapter 7

The checkout process will demand that Joe Bling updates his address for the purpose of billing and shipping.

[ 151 ]

Joomgets Inc.—Building an E-commerce Site

In the payment method stage of the checkout process, only PayPal is listed (as seen in the following screenshot) because it is the only method that we have permitted:

On clicking Conirm Order at the bottom of the page, Joe Bling is taken to the payment point at the PayPal site.

Finishing up To finish up, we must select the siteground-j15-101 theme as the Default from Extensions | Template Manager. If we then preview the front page, we will see that our project is complete:

[ 152 ]

Chapter 7

Adding functionality VirtueMart is a very huge feast indeed. There are dozens of extensions available to make it work more effectively and to adapt it to specific applications. If you feel the need to get more out of your VirtueMart installation, visit the page created for these specific extensions at http://extensions.joomla.org/extensions/extensionspecific/virtuemart-extensions, and dig in as much as you like. "Joomla! E-Commerce with VirtueMart" by Suhreed Sarkar is also a great book from Packt Publishing in which you will learn topics such as: • • • • •

The Store and Catalog mode of VirtueMart The Administration Tool of VirtueMart The Orders, Discounts, Shopper Groups, and Customers features of VirtueMart The Secure Sockets Layer encryption feature The support for AJAX

... and much more! [ 153 ]

Joomgets Inc.—Building an E-commerce Site

It may also be great fun and quite inspirational to visit the Joomla! showcase page at http://community.joomla.org/showcase/sites/business/retail.html to see how other websites are using VirtueMart to power their shopping cart.

Summary In this chapter, you have learned to: • • •

Build a simple online shopping cart selling multiple products, by using VirtueMart Configure the payment processing functionality to use PayPal Define and implement the basic shipping method and cost parameters for the shopping cart

[ 154 ]

Joomlaburg Accommodations— Building a Directory Site Wally Fishbourne had the idea of creating an online directory where people can freely post details of accommodation available for rent, share, and sale all over Joomlaburg. He is looking for a simple directory, with listing and display features, rather than the style used in Gumtree and craigslist. Users will be permitted to post without being registered. The basic features of the Joomlaburg Accommodations website are: •

A front page view showing simple links to the following main sections: ° °

•

°

Houses for Rent (Offered and Wanted) Houses for Share (Offered and Wanted) Houses for Sale (In Joomlaburg and Elsewhere)

Site-wide search facilities

Joomlaburg Accommodations—Building a Directory Site

The completed site should look similar to the example shown in the following screenshot:

Build Joomlaburg Accommodations Joomlaburg Accommodations is another example of an easy-to-build website, which can be completed within a couple of hours. The primary aim is to be able to access entries that have been created by means of their categories and also by means of the site-wide search facility.

Template The template chosen is rhuk_milkyway, which is included in the complete Joomla! package, and which is highly adaptable.

Extensions This site will be built entirely around the SOBI2 - Content Construction Kit (CCK) and Directory Component for Joomla! extension. This extension was chosen on the basis of popularity.

Other extensions The core module that will be used for this site is as follows: •

Main Menu module—creates the primary navigation features for the site pages [ 156 ]

Chapter 8

Install Joomla! When you are installing Joomla! 1.5 from the full package, you are given the option of whether to also install the sample data. Do not select this option or you will find your website preloaded with superluous data, none of which is remotely relevant to this project.

Install SOBI2 SOBI2 can be downloaded from http://extensions.joomla.org. In order to install it, use the Extensions Manager from the top menu bar, and navigate, as usual, to Extension | Install/Uninstall, in order to upload the component. You will be led though the installation, starting with the first screen that comes up, as follows:

After the installation has completed you will get an acknowledgement. You should also be directed to a web page that lists all of the tasks that can be carried out with SOBI2. This page also identifies some other extensions that could make the component more useful. However, this information is not very important to our project, so we will return to the SOBI2 Coniguration page on our website, via the admin toolbar options Components | SOBI2 | General Coniguration. On the Coniguration page, we will see that there are eight configurable panes: General, Mainpage, Search Options, System Emails, Cache, Debug, Background, and Sigsiu Tree.

[ 157 ]

Joomlaburg Accommodations—Building a Directory Site

General In the General page, you can set the rules as to how items will be entered into the directory, and how they will be displayed. Many of these settings may be safely left with the default values, as shown in the following screenshot:

In this example, we have made the following changes: 1. Changed the Component Name to the name of our directory site. 2. Opted not to show the entries on the main page so as not to clutter it up. 3. Opted to display three categories in a single line, for a neater main page display. [ 158 ]

Chapter 8

Mainpage The Mainpage is where the summaries are shown. Also, when a search is initiated, this is where the results are displayed. By default, some information related to the SOBI2 component is also displayed on this page, unless you disable this here:

In this example, we have opted for the following: 1. Not to show the description of component on main page for an uncluttered display. 2. Not to show the component description on the search page, for the same reason as above.

[ 159 ]

Joomlaburg Accommodations—Building a Directory Site

Search Options The Search Options page is where you determine how searches are conducted and also the display characteristics. Many of these settings can be safely left with their default values:

System Emails E-mails related to posted items, registration, payment (if configured), and so on will ordinarily be sent by SOBI2. On the System Emails page, you can make decisions as to where such e-mails will go. You can make multiple selections by holding the Ctrl key.

In this example, we have defined it so that only the Administrator will receive system-generated e-mails.

[ 160 ]

Chapter 8

Cache Caching enables your website to display faster. This feature holds the most frequently-requested data in a sort of intermediary pool, so that the database is not overworked by excessive requests. The Cache page allows you to enable or disable the cache feature. It also determines for how long the data should be cached before it is destroyed and the maximum length of a related data string that can be captured in a single string. Many of these settings may be left with their default values.

Debug On the Debug page, you determine the types of error messages that should be displayed, and how. These options can be safely left with their default settings.

[ 161 ]

Joomlaburg Accommodations—Building a Directory Site

Background On the Background page, you can change the background color of your displays, and also the border color. We have selected new values as an illustration: black (#000000) for the border and pink for the background image, as shown in the following screenshot:

Sigsiu Tree Leave the Sigsiu Tree page settings with their default values unless you really know what you are doing. This page shows the locations of the main icons used by the component:

[ 162 ]

Chapter 8

Other settings On the left-hand side of the configuration page, we will see a column (shown in the following screenshot) that contains details of some other configurable characteristics of the SOBI2 directory:

This is how the main headings look when expanded: •

Entries & Categories °

•

°

Awaiting approval (0)

°

Add Entry

°

All Entries (0)

°

Add Category Add Multiple Categories

Categories °

First Category

[ 163 ]

Joomlaburg Accommodations—Building a Directory Site

•

Coniguration ° ° ° ° °

•

• •

Custom Fields Manager General Coniguration Entry Coniguration View Coniguration

°

Payment Options

°

Registry Editor

°

Language Manager

°

Recount Categories Uninstall SOBI2

Templates & CSS ° °

Templates Manager

°

V-Card Template

°

CSS File

°

Details View Template

°

Entry Form Template Email Templates

Plugins °

Plugin Manager

About System

Most of these are not relevant to our present project, and the ones that are will be addressed when the time comes.

Categories For this simple project, the categorization of the submissions will be quite basic: • • •

Houses for Rent (Offered and Wanted) Houses for Share (Offered and Wanted) Houses for Sale (In Joomlaburg and Elsewhere)

[ 164 ]

Chapter 8

Therefore, we are going to have the following rules for the categories: CATEGORIES

SUBCATEGORIES

Houses for Rent

Offered Wanted

Houses for Share

Offered Wanted

Houses for Sale

In Joomlaburg Elsewhere

Create new categories As we can see, our accommodations will need to be organized into categories in order to group them together along with other houses, according to the listing type. To create these new categories, navigate to the SOBI2 Category Manager from Components | SOBI2.

[ 165 ]

Joomlaburg Accommodations—Building a Directory Site

We will find that the Category Manager has been pre-populated with a sample category, First Category, as an illustration. We will rename this to Houses for Rent. In order to do this, click on the title to bring up a form (as shown in the following screenshot), make the necessary changes, and then click on Save:

[ 166 ]

Chapter 8

We also need to add more categories. To do this, we click on the Add Category link in the left-hand side block:

This will give us a page similar to the one that we used for Houses for Rent, on which we changed the category title at the top. We shall do this to add all of the main categories.

[ 167 ]

Joomlaburg Accommodations—Building a Directory Site

Create subcategories Subcategories are created in the same way as the main categories—by selecting the Add Category link in the Category Manager page. For example, to create the Offered subcategory in House for Rent, we make sure that House for Rent is selected as the Parent Category.

All other settings are optional. We will repeat the same process to create all of the subcategories.

Form fields Data will be entered into the directory through a form. The default form has preset fields. For some of these fields data must be entered, and for others data is optional. You can control some more aspects of these fields if you access the Custom Fields Manager through the top administration menu bar Components | SOBI2 | Custom Fields Manager, as shown in the following screenshot:

[ 168 ]

Chapter 8

Here are some explanations of the table columns: • • • • • • •

Field Label—is the title of the field when the form is presented for data entry Published—when selected, this means that the field will be shown on the form; otherwise it will be omitted Field Type—explains what sort of data is accepted in the field For Free—determines whether or not any payment is required to enter data into the field Required—determines whether entering data in the field is compulsory or optional In Category View—determines if the content of the field will show up in the category view In Details View—determines if the content of the field will show up in the details view

[ 169 ]

Joomlaburg Accommodations—Building a Directory Site

Our project requires that site users must be able to post into the directory free of charge. Therefore, we must modify the Description and the Website fields to permit posting without cost. In order to do this, click on the Description title to edit the field. You will be directed to a form, as shown in the following screenshot:

[ 170 ]

Chapter 8

In this form, we modify the default parameters as shown in the previous screenshot. Perform these steps for the Website field as well. Users are now able to post into the directory completely free of charge.

Entry Configuration Some rules also need to be set regarding matters such as: • • • • •

If posting is allowed into the main category If a single entry can be simultaneously added to more than one category If the posting naturally expires and/or the duration is renewed before it does If anonymous posting is permitted, and if postings are automatically published If users must accept the Terms and Conditions of the site before posting is admitted

[ 171 ]

Joomlaburg Accommodations—Building a Directory Site

These and other related rules can be set in the Entry Coniguration section, which is accessed through the link on the left-hand side column of the Coniguration page.

View Configuration The View Coniguration setting determines what is shown to site users and how this is presented. It is similarly accessed through the link on the left-hand side column of the Coniguration page:

Typical parameters that may be adjusted include: • • •

If unregistered users are permitted to see detailed views If the date of entry should be shown in views If Google Maps should be shown in detailed views

[ 172 ]

Chapter 8

Payment Options SOBI2 is preconfigured to accept payment for entries into the directory. If you eventually decide to start accepting payment for posting, you may reconfigure your payment details from the Payment Options page, which is shown in the following screenshot, and is accessed through the link on the left-hand side column of the Coniguration page:

Typically, you can modify your bank payment and PayPal payment details. This is a simple enough procedure. Other configuration on the left-hand side column of the configuration page, such as Language Manager, Registry Editor, Recount Categories, Uninstall SOBI2, may all be ignored as these are not relevant to this project.

[ 173 ]

Joomlaburg Accommodations—Building a Directory Site

Front page We need to make our site's front page the Category View of the SOBI2 directory. In order to do this, we must make the home page menu link point to the SOBI2 component. The quick and dirty way to do this is to locate the Menu Item Manager from Menus | Main Menu in the administration bar, and then click on the single Home menu link to modify it:

This will display the configuration page for this menu item. However, what we intend to do is to change the menu type from Front Page Blog Layout to SOBI2. In order to do this, select the Change Type button, as shown in the following screenshot:

[ 174 ]

Chapter 8

This opens the Change Menu Item page, from where we select SOBI2 and then Frontpage or Selected Category:

Save the new setting. If we now preview the home page to see how much has been completed, we will see the following result:

[ 175 ]

Joomlaburg Accommodations—Building a Directory Site

Let us click on the Add Entry link, and add some postings into the directory.

[ 176 ]

Chapter 8

All of the entries need to be approved by the administrator before appearing in the directory, so you must visit Components | SOBI2 | Entries Awaiting Approval and publish the entry:

Following is the detailed view of this entry when selected from the subcategory Houses for Rent | Offered:

[ 177 ]

Joomlaburg Accommodations—Building a Directory Site

Search The Search function is displayed on the main page and does not need to be configured.

Permissions Our SOBI2 setup has been configured to accept anonymous postings. However, when an entry is anonymously submitted, you will notice a warning that it cannot be edited by a submitter unless he or she is properly registered on the Joomla! site and logged in. The default setting that permits only the administrator to approve and publish entries will adequately ensure that your site does not quickly become crippled by spam.

Finishing up Our site, as we can see from the preview, is completed. In real life, however, many more categories and subcategories may be required, but the procedure for doing this is still basically the same.

Adding functionality There are other directory extensions available that may do as good as a job as SOBI2. A search of the Joomla! extensions site—and especially the following page—will show some similar extensions: http://extensions.joomla.org/extensions/directory-a-documentation/ directory.

A lot of other extensions are also available to make your SOBI2 experience more exciting. These can be viewed on the following website: http://extensions.joomla.org/extensions/extension-specific/sobi2extensions.

Summary In this chapter, you have learned to: • • • •

Build a basic directory site by using SOBI2 component for Joomla! Configure the relevant SOBI2 basic settings Configure SOBI2 categories and subcategories Configure the SOBI2 payment option [ 178 ]

Nosh'r—Building a Photo Sharing Site William and Elizabeth Bunter are organizing an online food appreciation community. They intend to enroll members from all over the world to share their food photos on their new website—Nosh'r. Here, the users will submit photos of their food for all of the other members to admire and rate by means of stars. Photos will be classified into several categories: starters, main courses, desserts, and drinks. The Nosh'r website will have the following features: • • •

Photo galleries for several food categories (starters, main courses, desserts, and drinks) A simple photo uploading form, which will also permit detailed descriptions of uploaded items to be entered A star rating system and comment form for each added contribution

Nosh’r—Building a Photo Sharing Site

The completed website should look similar to the example shown in the following screenshot:

Build Nosh'r Billy and Bessie, as they are fondly known by their many friends from all over the world, will do anything for the promotion of gastronomic delights, and Nosh'r is a child of their zeal. On this website, registered users will be permitted to post pictures of the exciting foods and drinks that they have just consumed (taken before the food and drink are consumed), or that they have just discovered in an exotic eating place somewhere in the world. These photos will typically be accompanied by a description or a recipe and will be displayed in an image gallery on the website with facilities for other members to add comments and also to appreciate by means of a five-star rating system. For this website to become a reality, we need to do the following: • • •

Create an image gallery Enable the categorization of food images by class of food (starters, main courses, desserts, and drinks) Enable the rating of and commenting on submitted food images [ 180 ]

Chapter 9

Template The template chosen (and for no particular reason other than it looks pleasant for the project) is JA_Purity, which comes with the Joomla! 1.5 download.

Extensions This site will be built entirely around the Phoca Gallery component, which is an image gallery for Joomla!. This component was chosen on the basis of popularity.

Other extensions The core module that will be used for this site is: •

Main Menu module—creates primary navigation for the site pages

Install Joomla! When you are installing Joomla! 1.5 from the Full Package, you are given the option to install sample data also. Do not select this option or you will find your website preloaded with superluous data—none of which is remotely relevant to this project.

Install Phoca Gallery Phoca Gallery can be downloaded from http://extensions.joomla.org. In order to install it, use the Extensions Manager from the top menu bar and navigate as usual to Extension | Install/Uninstall to upload the component. You will be led though the installation from the first screen, which is shown in the following screenshot:

[ 181 ]

Nosh’r—Building a Photo Sharing Site

After the installation is complete, you will see a new screen that shows you the Phoca Gallery Control Panel. From this page, we can add and delete images, and we can configure Categories, Themes, Category Rating, Image Rating, and Comments.

Let us, however, first create the categories.

Categories For this simple project, the categorization of the image submissions will be quite basic, as follows: • •

Starters

•

Desserts

•

Main Courses Drinks

Our food and drinks will need to be organized into these categories in order to group together similar food items.

[ 182 ]

Chapter 9

Create new categories To create these new categories, click on the Categories button in the Control Panel. The page shown in the following screenshot is displayed:

We intend to first add Starters as a category. Therefore, click on the New icon to open the form shown in the following screenshot:

[ 183 ]

Nosh’r—Building a Photo Sharing Site

For this simple project, we will only be adding the category name and setting access levels. To add Geotagging functions, we will need to sign up for the Google Maps API Key. A specific key will be provided for the site. We will, however, not be setting Geotagging options, as it is not required for this simple project. We need to add more categories, and will therefore repeat the process and save the additions until we have a page similar to the one shown in the following screenshot:

Themes Themes determine how submitted images are displayed in the gallery—especially what the backgrounds look like. We will leave the default setting as it is, or else new themes will need to be uploaded. Themes can be downloaded from http://www.phoca.cz/themes/.

Global configuration On the top right-hand side of the Control Panel, there is an icon titled Parameters, from which the global gallery configurations can be set. On clicking this icon, we are presented with a pop-up inset containing the display parameters and other configurable parameters, as shown in the following screenshot:

[ 184 ]

Chapter 9

The major gallery views are the category views and the detail views.

Category Views Categories View is a page where all of the gallery categories will be listed. In the Global Coniguration box, we may set category view (thumbnails), category views (categories), and category views (category list). All of the settings may be left with their default values. In this case, however, we have changed the value of the Number of Columns in Categories View Settings (List of Categories) to 2, for a neater view.

[ 185 ]

Nosh’r—Building a Photo Sharing Site

Detail View The Detail View is where details of an image will be displayed. It can be a standard JavaScript pop up or modal box, shadowbox, highslide pop up, JAK, and so on. We shall leave it at the default value, which is Modal Popup Box for Detail window.

In the summary for this particular project, we will adjust the following settings:

Category View Settings (Categories) • •

Display Categories in Category View = Yes

•

Display image instead of folder icon = No

•

Display Subcategories On Each Page = First Page

•

Category Image Ordering = Date Descending Display Back Button = No

[ 186 ]

•

Chapter 9

•

Display Categories View Back Button = No

•

Display Image Beside Category Name = Show

•

Number of Columns = 2 Image Size Beside Category Name = Small with Shadow

Categories View Settings (Category List) • •

Number of Columns = 2

•

Image Size Beside Category Name = Small with Shadow

•

Display Subcategories = Yes

•

Display Categories Style = categories, images, and detail information

•

Categories Image Ordering = Random

•

Display Empty Categories = Yes Display Unaccessible Categories = No

Description Settings • •

Display Description = Show (Standard) Display Title In Description = Yes

Comment Settings • • •

Display Comments = Yes Comment Box Width = 500 Maximum Comment Characters = 1000

Upload settings • • •

Display Title = Yes Display Description = Yes Maximum Description Characters = 10000

The other settings we will leave with their default values.

[ 187 ]

Nosh’r—Building a Photo Sharing Site

Front page We need to make our site's front page the Category View of Phoca Gallery. To do this, the home page menu link needs to point to the Phoca Gallery component. The easy way to do this is to locate the Menu Item Manager from Menus | Main Menu on the administration menu bar. Then, we click on the single Home menu link, in order to modify it:

This will present us with the configuration page for this menu item. However, what we intend to do is change the menu type from Front Page to Phoca Gallery. In order to do this, click on the Change Type button:

[ 188 ]

Chapter 9

This brings up the Change Menu Item page, from where we select Phoca Gallery and then Phoca Gallery Category List Layout:

Although only registered users of the site may create an image, the means for users to register and to log in needs to be created. Save the new setting.

[ 189 ]

Nosh’r—Building a Photo Sharing Site

New user registration To create a link to the new user registration form, we again visit the Menu Item Manager from Menus | Main Menu on the top menu bar in administration. Then we click on the single New icon at the top right to create a new menu item. This will again lead us to the Menu Item page, from where we select Internal Link | User | Register | Default Registration Layout.

[ 190 ]

Chapter 9

This will take us to the page where we specify the item description. Here we will add Register as the menu item title (as shown in the following screenshot) and save:

To create the login menu item, we will repeat the same process, this time selecting Internal Link | User | Login | Default Login Layout. Add Login as the menu item title.

[ 191 ]

Nosh’r—Building a Photo Sharing Site

Permissions Our Phoca Gallery setup has been configured to accept the posting of images and comments only by registered users who are logged in. Therefore, the image upload functions are not visible unless users are properly registered on the Joomla! site and logged in. The default setting, which only permits the administrator to approve and publish entries, will adequately assure that your site does not quickly become crippled by spammers.

Add images To add some images to the gallery, click on the Images icon in the Phoca Gallery Control Panel. On the following page, click on the New icon at the top. What we intend to do is upload one image each for each of the categories that we have created. To upload a new image from this administration backend, click on the Image button, as shown in the following screenshot:

[ 192 ]

Chapter 9

This will open a highlighted window from where you may either select an uploaded image or upload a fresh image. We shall be uploading a new image.

[ 193 ]

Nosh’r—Building a Photo Sharing Site

Once the image thumbnail has been uploaded into this panel, click on it to accept it into the new image creation form. Now complete the rest of the form by adding a title and a detailed description of the submitted image—in this case, a recipe.

[ 194 ]

Chapter 9

We repeat the same procedure for the other categories, after which our initial images list should look similar to the example shown in the following screenshot:

Finishing up To finish up, we must select the JA_Purity theme as Default from Extensions | Template Manager.

Have we done this right? We can see what our front page looks like by using the Preview link on the top right-hand side of the administration page.

[ 195 ]

Nosh’r—Building a Photo Sharing Site

So far, however, we have added images from the backend administration area that other users will not have access to. However, if a registered user logs in from the frontend and clicks on any category, thumbnails of all of the images in that category will be shown, along with a comment form and an image upload form, as shown in the following screenshot:

[ 196 ]

Chapter 9

And finally, when any of the thumbnails are clicked on a larger-sized version of the image is shown in a pop-up window, along with the detailed description.

Other display characteristics can be reviewed in the Phoca Gallery Control Panel, by using the Parameters pop-up configuration panel.

[ 197 ]

Nosh’r—Building a Photo Sharing Site

Extending functionality This site was created for the sole purpose of listing images. It might be possible to add some other features, such as allowing payment for submission or download. A search through the Joomla! extensions site might yield some suitable additions. However, there are some other Phoca Gallery-specific extensions that could make the site more exciting to users. You may wish to have a look at the following pages for some inspiration: • •

Phoca Gallery extensions—http://extensions.joomla.org/extensions/ extension-specific/phoca-gallery-extensions

Phoca download extensions—http://extensions.joomla.org/ extensions/extension-specific/phoca-download-extensions

Summary In this chapter, you have learned to: • • •

Build a basic site for publishing images uploaded by various users, by using the Phoca Gallery component Configure Phoca Gallery and its basic settings Create categories and associated views

[ 198 ]

Alienspotting—Building a Google Map Site When Winston Groovy returned home to his wife, Rita, in Kingston, Jamaica, after being missing for two days, Rita was not amused. This was the third weekend in a row that Winston had claimed to have been abducted by aliens. But Winston really did seem quite sincere and sober ("Yeah man! dem mash me up," he claimed), and Rita was, as usual, very forgiving and quite happy to have her Winston back home. However, to save other people from the heartache of having their loved ones permanently lost to extra-terrestrial kidnappers, Rita Groovy has decided to create a website called Alienspotting, to aggregate occurrences of alien sightings all over the world. The website will consist of: • • •

A description of encounters with aliens, including photos, if available A means for the site users to comment on stories, with recent comments being shown in a side bar A front-page world map, with each documented encounter appearing on this map as a marker

Alienspotting—Building a Google Map Site

The completed site should look similar to the following screenshot:

[ 200 ]

Chapter 10

Extensions Alienspotting is built around the following contributed and core extensions, and can be surprisingly easy to build.

Core extensions The core modules that will be used for this site are as follows: • • •

Main Menu module—creates primary navigation for the site pages User Menu module—allows selected menu items (such as the link to post articles) to be visible only to registered and logged-in users Login Form module—used for registered users to log in and for others to register

Contributed extensions The contributed modules and components that will be used for this site are as follows: • • •

ContentMap module—to display articles on a Google map JComments component—to provide the ability to add comments to posts JComments Latest module—to create a list of the most recent comments

Template Alienspotting will use the Alien template, which is a contribution to Joomla! by Hilliger Media, and which can be downloaded from www.joomla24.com.

Build Alienspotting In order to create this website, we need to do the following: • • •

Configure the ContentMap module to display content on a map Permit articles to be commented on Put the most recent comments in a sidebar module

[ 201 ]

Alienspotting—Building a Google Map Site

Enable modules and plugins First, upload the module and component required, and then visit the Module Manager page, in order to ensure that the ContentMap module is enabled.

Configure ContentMap We need to configure the ContentMap module before it can function. Before we do this, we need to get a Google Map API code specifically for this website; otherwise the Google map will not show. In order to do this, visit the Google Maps API page at http://code.google.com/apis/maps/signup.html. After successfully signing in with your Google account, you will be presented the following page, on which you will enter your website URL:

[ 202 ]

Chapter 10

After entering the URL, you will be presented the page shown in the following screenshot, from which you may obtain the required API code:

Again, navigate to the Module Manager page and click on the link for the ContentMap module. Insert the API Key, as shown in the following screenshot:

[ 203 ]

Alienspotting—Building a Google Map Site

Create the front page Google map Now the fun begins: How do we get the Google map full of articles on the front page? 1. Modify the existing Home menu link to display a Category List Layout, as shown in the following screenshot:

2. Select the Category to display. In this case, there will be only one category, as shown in the following screenshot:

[ 204 ]

Chapter 10

3. Adjust the parameters in the right-hand side pane to your display preferences. In this case, we have modified the following parameters: ° ° °

Table Headings = Hide Date Column = Hide

°

Filter = Hide

°

Pagination = Hide

°

Primary Order = Default

°

Display Select = Hide

Show Page Title = No

4. Open up the ContentMap module page once again, from Extensions | Module Manager. In the Position parameter, enter a non-existing position (in this case we have written "mappa"). Also, get the Category ID from the Category Manager page, and insert it as indicated. In this case, our Category ID for Spotting Locations category is 31:

[ 205 ]

Alienspotting—Building a Google Map Site

5. Navigate to Content | Category Manager, select your category (in this case Spotting Locations) and insert the following code into the description box: {loadposition mappa}

We are done with configuring the ContentMap module.

Configure JComments JComments is required in order to allow users to add comments to the posted articles. Obtain the JComments component from Joomla! extensions site, and upload it. The initial installation screen should be similar to the example shown in the following screenshot:

[ 206 ]

Chapter 10

On clicking the Next button, you should be directed to the configuration page for JComments. 1. In the first General page, we will set where comments should be shown and how they will be shown. 2. In the Categories pane, we will select the lone categories, thus enabling the comments form to be shown for all articles site-wide. 3. In the Notiication pane, we select No to enable comments to be published without the approval of the site administrator. 4. In the Miscellaneous pane, we select Yes to enable both RSS feeds and plugins.

We will, in this project, leave all of the other settings in the other configuration pages with their default values, but will deselect Enable CAPTCHA in the Permissions pane, to make submissions easier. In real life, CAPTCHA might be necessary to deter spammers. You should also download the JComments Latest module and install it. This will automatically create a list of the most recent comments, in a box that can then be placed in module positions on the site. In this case, after enabling the module, we publish it to the right module Positon.

[ 207 ]

Alienspotting—Building a Google Map Site

Test the article submission Let us now test our article submission, and see how it works. In order to do this, click on the Add New Article icon in the Control Panel. You will get a form similar to the one shown in following screenshot:

Now add some articles, to ensure that you have successfully performed the tasks, taking care to select the Section and Category to which the article belongs.

Add the geographical coordinates The purpose of adding geographical coordinates to the articles is to be able to associate each to a specific position that can be seen on a Google map. The geographical coordinates consist of the longitude and latitude of a location, expressed in decimals, such as 51.5426,0.036707. These coordinates must be added without spaces, and separated only by a comma, or else they will not be useful. A good place to obtain the geographical coordinates of a place is the website http://www.turismo.eu/it/geo.html where you can calculate the coordinate by entering such information as the place name or postal code.

[ 208 ]

Chapter 10

We are adding all of our sample articles from the Administration Control Panel. In real life, however, it should be possible for permitted users to add articles from the front page, after they are logged in. This is one limitation of the ContentMap module, as it is only possible for the coordinates to be added by people logged in as an administrator and with backend privileges. Comments can be added as the site administrator decides.

Test JComments On opening any article, you will find a comments box at the bottom of the page. This is where readers submit their comments. The comments will not be displayed, however, until they are approved by the site administrator.

[ 209 ]

Alienspotting—Building a Google Map Site

Finishing up If we display a preview of the front page, we will see that our project is complete. Clicking on any of the markers will reveal the title of the article that generated it. Now Rita knows where to start looking when Winston goes missing permanently.

[ 210 ]

Chapter 10

Extending the site This project is primarily used to add location markers to articles. The idea may be used for many other similar projects. An example is http://www.balispotting.com/, which made use of a different extension working in a different way, and specifically to locate public places. The use of ContentMap is limited in the sense that it is a bit difficult for non-administrative users to add coordinates. There are several other extensions that may do the same job better than the ContentMap module, but which are unfortunately commercial. Nevertheless, some may be worth the purchase price.

Summary In this chapter, you have learned to: • • •

Build a basic site based on the ContentMap module Use the ContentMap module to create a typical Google Map mash-up Integrate a comment system, by using the JComments component

[ 211 ]

Weird Hap'nins—Building a News Aggregating Site Bad news is always good news for the press. This is why Vaughan Pyre has decided to take advantage of this fact and create a website that will aggregate bad news and weird happenings from all over the world. The content of the site will be entirely derived from Really Simple Syndication (RSS) feeds from several sources (each feed being automatically fetched and its items displayed on the website). Weird Hap'nins requirements will be the need to: • • •

Get external feed sources and allocate them to menu links on the website Create the means to automatically fetch and display article items located in the feeds Display the latest content from all feed sources on the front page

Weird Hap'nins—Building a News Aggregating Site

The completed news aggregation site will look similar to the example shown in the following screenshot:

[ 214 ]

Chapter 11

Build Weird Hap'nins Vaughan Pyre is a very ambitious webpreneur. What he really hopes for is a website that is completely self-maintaining, and on which he can place some Google AdSense blocks. Clicks from the visitors to his site will ensure that he makes lots of money. For this, he needs a site where the content updates regularly with fresh content so that visitors will keep coming back to click on some more Google ads. Vaughan's ultimate objective is to create several of these websites.

Template The template chosen is Midnight by BuyHTTP, which is a template that fits the theme of this unique website.

Extensions This is, surprisingly, a very simple site to build, and much of the requirements can be actually be achieved by using the native News Feeds component. However, the News Feeds component will only list the title links to the external feed items, whereas what Vaughan wants is that the feeds are pulled into the site as articles. Therefore, we will be using an automatic article generator component. There are several of such components on the Joomla! extensions site, but almost all of them are commercial. Vaughan is a skinlint and will not pay to buy any script, so what we are looking for is free component. That is why we have chosen the following: • •

4RSS—aggregates RSS feeds and creates articles from them JCron Scheduler—used for cron jobs management and scheduling to simulate cron jobs through the Joomla! frontend interface at preset intervals

Indeed, were it not for the fact that Vaughan needs the content to automatically be updated, we needn't use any extension other than the 4RSS component.

Other extensions The core module that will be used for this site is: •

Main Menu module—creates the primary navigation functionality for the site pages

[ 215 ]

Weird Hap'nins—Building a News Aggregating Site

Sections and categories New sections and categories will need to be created so that incoming article feeds will be correctly routed according to their description. A new section will be created that we will call Feed. Under this section, we shall have three categories—Bad News, More Bad News, and Weird News.

Create a new section We intend to create a section that will be named Feed. In order to do this, perform the following steps: 1. Navigate to the Section Manager from the Control Panel, and then click on the New icon at the top right-hand side, in order to create a new section. 2. On the next page, add the name of the section, and then save your changes.

[ 216 ]

Chapter 11

Create new categories To create a new category, perform the following steps: 1. Navigate to the Category Manager page from the Control Panel. 2. On the following page, create a new category in the same way as we created the new section. However, remember to set the Section to Feed.

Feed content Vaughan has decided to initially use eight feeds (which are listed in the following sections), obtained from www.newsfeedmaker.com, for the different categories. It is from these RSS feeds that the articles will be created.

[ 217 ]

Weird Hap'nins—Building a News Aggregating Site

Bad News The newsfeeds based on "bad news" as the topic of interest on www.newsfeedmaker.com are as follows: • •

http://www.newsfeedmaker.com/feed.php?code=ddb874f7 http://www.newsfeedmaker.com/show-feed/32bf1388

More Bad News The newsfeeds based on "more bad news" as the topic of interest on www.newsfeedmaker.com are as follows: • • •

http://www.newsfeedmaker.com/show-feed/faa72b04 http://www.newsfeedmaker.com/feed.php?code=e2d95271 http://www.newsfeedmaker.com/show-feed/028f06da

Weird News The newsfeeds based on "weird news" as the topic of interest on www.newsfeedmaker.com are as follows: • • •

http://www.newsfeedmaker.com/feed.php?code=936f006a http://www.newsfeedmaker.com/show-feed/9493452f http://www.newsfeedmaker.com/show-feed/0d7dcdbb

Configure the 4RSS component After uploading the 4RSS component and installing it through Extensions | Install/ Uninstall in the administration toolbar, access the component from Components | 4rss. This will provide a page, shown in the following screenshot, on which we shall specify the RSS feeds:

[ 218 ]

Chapter 11

To add a new RSS field, you need to click on the New icon. This will direct you to the Feed Set-Up page shown in the following screenshot:

On this page, we will do the following: • • • • • • •

Add a specific name to identify each feed item Add the RSS feed URL Select the Section and Category to which articles from the particular feed should go Add keyword(s) if you are targeting only feeds with specific words in them, for SEO purposes Select whether you want the articles from this feed to show on the front page (in our example: Yes) Select whether you want a link inside each article to the original source of the story (in our example: Yes) Select whether you want the articles to be checked for duplicate entries (in our example: Yes)

[ 219 ]

Weird Hap'nins—Building a News Aggregating Site

After we have added all of the feeds, the Feeds Management page should look similar to the example shown in the following screenshot:

Configure JCron Scheduler Upload the JCron Scheduler component, and install it through Extensions | Install/ Uninstall on the administration toolbar. The function of JCron Scheduler is to simulate cron jobs through the Joomla! frontend interface, at preset intervals, by users who either don't have access to the server crontab or don't want to use it. By default, it also installs and enables the JCron plugin. You need this enabled in order to make the cron jobs run. Therefore, check Extensions | Plugin Manager to ensure that the plugin is enabled. We will need some information from the 4RSS component in order to make it function with JCron Scheduler—specifically the location of the site's cron script. In order to obtain this location, we return to the 4RSS Feeds Management page and click on the 4RSS Cron tab. On the Set Up Cron page, locate the information that we need, and copy it. In this case, the information is as follows: C:\wamp\www\weirdjoomla\administrator\com_4rss\cronjob_4rss\cronjob.php

[ 220 ]

Chapter 11

We now open the JCron Scheduler via Components | JCron | Manage Cron Jobs, in order to create a fresh cron job, as shown in the following screenshot:

On this page, we have: • • •

Given the cron task a name (4RSS). Selected a task type (Web Address fopen()). Entered a command to run. A sample command is Php –q /home/xxxx/ public_html/cronjobs/cronjob.php > /dev>null. Replace /home/xxxx/ public_html/cronjobs/ by the actual path of your script. For this project, the following path, which is derived from the cron job script location that we had earlier copied, should be added:

•

Php C:\wamp\www\weirdjoomla\administrator\com_4rss\cronjob_4rss\ cronjob.php /dev>null

Created the schedule. The example schedule shown will run the cron script to get fresh articles at midnight, every day, and every month.

[ 221 ]

Weird Hap'nins—Building a News Aggregating Site

Add articles We now return again to the 4RSS Feeds Management page, select all of the feeds, and click on Post on the top right-hand side, in order to fetch the feeds:

Configure the front page Vaughan needs only five articles on the front page. These articles will be randomly selected from the entire Feeds section. In order to achieve this, the front page will be configured through the Main Menu item that links to it—the Home menu link. To configure the front page for this display, navigate to the Menu Item Manager page again, and then click on the lone Home menu link, which, as we see from the table, links to the Front Page. On the next page, we change the parameters to what we need on the front page and then save our changes, as shown in the following screenshot:

[ 222 ]

Chapter 11

Other menus Our objective is to create menus that link to articles drawn from each of the three different categories. In other words, we want to create the following menu links: • • •

Bad News—links to articles from the Bad News category More Bad News—links to articles from the More Bad News category Weird News—links to articles from the Weird News category

In order to do this, again access the Menu Item Manager page from Menus | Main Menu. Create a new menu item by clicking on the New icon. On the next page, select Articles | Category | Category Blog Layout, as shown in the following screenshot:

[ 223 ]

Weird Hap'nins—Building a News Aggregating Site

Set the parameters for the menu link and also for the page to be displayed. The following screenshot shows the settings for the Bad News link:

The other two links—More Bad News and Weird News—are created in the same way.

[ 224 ]

Chapter 11

Finishing up We now make sure that our Midnight template is selected as Default in Extensions | Template Manager. If we now click on the Preview link, our front page will look similar to the example shown in the following screenshot:

[ 225 ]

Weird Hap'nins—Building a News Aggregating Site

The page for a category view page such as Weird News should look similar to the example shown in the following screenshot:

[ 226 ]

Chapter 11

Summary In this chapter, you have learned to: • •

Build a basic site for publishing news feeds, by using the 4RSS component Use the JCron Scheduler component to run regular site tasks

[ 227 ]

Templates and Extensions CHAPTER 2 VERSION

DOWNLOAD PAGE

TEMPLATE beez

Core Template

EXTENSIONS DOCman component 1.5.2

http://www.joomlatools.eu/docman-14.html

CHAPTER 3 VERSION

DOWNLOAD PAGE

TEMPLATE rhuk_milkyway

Core Template

EXTENSIONS JComments component

2.1.0.0

http://www.joomlatune.com/jcommentsdownloads.html

JComments Latest module

2.5.4

http://www.joomlatune.com/jcommentsdownloads.html

CHAPTER 4 VERSION

DOWNLOAD PAGE

TEMPLATE http://www.joomla24.com/

Newstheme EXTENSIONS Agora component Agora latest Posts

3.0.095

http://jvitals.com/ http://jvitals.com/

Templates and Extensions

CHAPTER 5 VERSION

DOWNLOAD PAGE

TEMPLATE http://www.joomla24.com/

Come Dance EXTENSIONS JEvents Component 1.5

http://www.jevents.net/jevents-download

JEvents MiniCalendar module

http://www.jevents.net/jevents-download

JEvents Latest Events Module

http://www.jevents.net/jevents-download

JEvents Search Plugin

http://www.jevents.net/jevents-download

CHAPTER 6 VERSION

DOWNLOAD PAGE

TEMPLATE http://www.joomla24.com/

News StudioAlfa EXTENSIONS Community Builder— CB 1,2 components and modules

http://www.joomlapolis.com/component/ option,com_docman/Itemid,36/

JComments

2.1.0.0

JComments Latest module

2.5.4

http://www.joomlatune.com/jcommentsdownloads.html http://www.joomlatune.com/jcommentsdownloads.html

Simplest Forum

1.5.1

http://simplestforum.org

jPFChat

2.1.1

http://www.jpfchat.com/index.php/ downloads

VERSION

DOWNLOAD PAGE

CHAPTER 7 TEMPLATE http://download.siteground.com/ joomla15/siteground-j15-101.zip

siteground-j15-101 EXTENSIONS VirtueMart component

1.1.4

http://virtuemart.net/downloads

[ 230 ]

Appendix

CHAPTER 8 VERSION

DOWNLOAD PAGE

TEMPLATE rhuk_milkyway

Core Template

EXTENSIONS SOBI 2 - Content Construction Kit (CCK) and Directory Component

RC 2.9.2.3

http://www.sigsiu.net/download/ components/sigsiu_online_business_ index_2.html

CHAPTER 9 VERSION

DOWNLOAD PAGE

TEMPLATE JA_Purity

Core Template

EXTENSIONS Phoca Gallery component

2.5.8

http://www.phoca.cz/download/ category/1-phoca-gallery-component

CHAPTER 10 VERSION

DOWNLOAD PAGE

TEMPLATE http://www.joomla24.com/

Alien EXTENSIONS ContentMap module

1.0.0

JComments component

2.1.0.0

JComments Latest module

2.5.4

http://www.turismo.eu/en/news/ contentmap-for-joomla.html http://www.joomlatune.com/jcommentsdownloads.html http://www.joomlatune.com/jcommentsdownloads.html

[ 231 ]

Templates and Extensions

CHAPTER 11 VERSION

DOWNLOAD PAGE

TEMPLATE http://www.joomla24.com/

Midnight by BuyHTTP EXTENSIONS 4RSS

1.3

JCron Scheduler

1.4

http://www.4rss.com/download-4rsscomponent/ http://extensions.joomla.org/extensions/ administration/admin-performance/847

[ 232 ]

Index Symbols 4RSS URL, for downloading 232 4RSS component, news aggregating site configuring 218-220

A About Us link, Buzzy Beez's site adding 45-47 About Us page, Buzzy Beez's site creating 33-35 Absolute Beginner's Guide to Joomla! URL 21 Africa link, events site adding 105 Africa link, Global Hitchhikers Club site adding 66 Agora component 76 URL, for downloading 229 Agora latest post basic module 83 Agora latest Posts URL, for downloading 229 Agora latest Posts (basic version) 76 Alien URL, for downloading 231 alienspotting. See Google Map Site articles, news aggregating site adding 222 articles, newspaper site article submission, testing 80 front page, configuring 77 new categories, creating 79 new section, creating 78, 79 organizing 76

user, settings 76 article submission, Global Hitchhikers Club site blog posts, adding 61 testing 61 article submission, Google Map site geographical coordinates, adding 208, 209 testing 208 article submission, newspaper site testing 80

B Beez template URL, for downloading 229 blog extensions 71 Breakin' Events site. See events site Buzzy Beez's site building 30, 31 content 33 extensions 31 finishing 51 template 31 template, installing 32

C calendar events blocks, events site 106, 107 calendar pane, JEvents component configuring 100 categories, events site configuring 101, 102 categories, Global Hitchhikers Club site creating 59 categories, news aggregating site creating 217

categories, newspaper site creating 79 category, community site creating 118, 119 chat 71 chat, community site configuring 122 coe module, news aggregating site main menu 215 Come Dance template URL, for downloading 230 comments system, community site creating 122-124 comments system, Global Hitchhikers Club site creating 62 JComments Latest module 63 community builder, community site about 114 cb_expert_files_only_j_1.5.tar.gz file 114 cb_expert_files_only_m_4_j_1.0.tar.gz file 114 com_comprofiler.zip file 114 configuring 115, 117 extension, URL 129 files 114 mod_cblogin.zip file 114 mod_comprofilerModerator.zip file 114 mod_comprofilerOnline.zip file 114 README-NEW-INSTALL.txt file 115 README-UPGRADE.txt file 115 community site about 111 building 113 chat, configuring 122 comments system, creating 122-124 community builder, configuring 114, 115 content 114 extensions 113 finishing up 129 forums, configuring 121, 122 functionality, adding 128, 129 menus 125 new category, creating 117 new modules, creating 124 new section, creating 117 polls, configuring 119-121

template 113 component pane, JEvents component configuring 95 components 26 contact form, Buzzy Beez's site creating 42, 43 contacts component, Buzzy Beez's site 31 Contact Us link, Buzzy Beez's site adding 50 content, Buzzy Beez's site About Us page 33-35 contact form, creating 42, 43 document repository, creating 38, 39 latest information posts, creating 36, 37 content, community site 114 content, Global Hitchhikers Club site article submission, testing 61 comments system, creating 62, 63 displaying 65 front page, configuring 57 module, positions 63, 64 new categories, creating 59 new section, creating 58 user, settings 57 Content Construction Kit (CCK) 21 content display, Buzzy Beez's site about 44 About Us link, adding 45-47 contact us link, adding 50 downloads link, adding 49 latest company news link, adding 48 latest Product News link, adding 48 latest product news link, adding 47 content display, events site Africa link, adding 105 calendar blocks 106, 107 front page display, altering 106 global link, adding 104, 105 latest events blocks 106, 107 other continent links, adding 105 content display, Global Hitchhikers Club site Africa link, adding 66, 67 content links, adding 67, 69 content display, newspaper site forum link, adding 87 news section link, adding 85 [ 234 ]

other section links, adding 86 ContentMap module about 201 URL, for downloading 231 ContentMap module, Google Map site configuring 202, 203 continent links, events site adding 105 continents links, Global Hitchhikers Club site adding 67-69 contributed components, Buzzy Beez's site DOCman component 31 contributed extensions, community site communtiy builder 114 JComments 114 jPFChat 114 simplest forum 114 contributed extensions, events site JEvents component 94 JEvents Latest Events Module 94 JEvents Minicalendar module 94 JEvents Search Plugin 94 contributed extensions, Global Hitchhikers Club site JComments component 56 JComments Latest module 56 contributed extensions, Google Map site ContentMap module 201 JComments component 201 JComments Latest module 201 contributed extensions, newspaper site Agora component 76 Agora latest Posts (basic version) 76 contributed modules and components, Google Map site ContentMap module 201 JComments component 201 JComments Latest module 201 control panel, Joomla! site global configuration 24 site backup 24 template, settings 23 core components and modules, Buzzy Beez's site contacts component 31 main menu module 31

core extensions, community site main menu 113 polls 113 core extensions, events site 93 core extensions, Global Hitchhikers Club site login form module 56 main menu module 56 popular module 56 search component 56 search module 56 top menu module 56 user menu module 56 core extensions, Google Map site login form 201 main menu 201 user menu 201 core extensions, newspaper site login form module 75 main menu module 75 popular module 75 search component 75 search module 75 top menu module 75 user menu module 75 core modules, Google Map site login form 201 main menu 201 user menu 201 core modules and components, newspaper site login form module 75 main menu module 75 popular module 75 search component 75 top menu module 75 user menu module 75 Cron Scheduler 21

D Daily Joomer. See newspaper site directory site about 155 building 156 extensions 156 finishing up 178

[ 235 ]

functionality, adding 178 Joomla!, installing 157 SOBI2, installing 157 template 156 DOCman component 31 URL, for downloading 229 document repository, Buzzy Beez's site creating 38-41 downloads link, Buzzy Beez's site adding 49, 50

E e-commerce site building 132 extensions 133 finishing up 152 functionality, adding 153 products, displaying 147, 148 template 133 VirtueMart configurations 133 entry coniguration, directory site rules 171, 172 event detail view pane, JEvents component configuring 97 event editing pane, JEvents component configuring 96 events site building 93 content, displaying 104 event submission form, creating 102, 103 extensions 93 finishing 109 functionality, extending 110 JEvents component, configuring 94 new categories, creating 101, 102 template 93 event submission form, events site creating 102, 103 extensions, Buzzy Beez's site contacts component 31 contributed components 31 core components 31 main menu module 31 extensions, community site contributed extensions 114 core extensions 113, 114

extensions, directory site Directory Component for Joomla! extension 156 main menu 157 other extensions 156 SOBI2 156 extensions, e-commerce site 133 extensions, events site contributed extensions 94 core extensions 93 extensions, Global Hitchhikers Club site about 55 contributed extensions 56 core extensions 56 extensions, Google Map site about 201 contributed extensions 201 core extensions 201 extensions, news aggregating site 4RSS 215 about 215 JCron Scheduler 215 other extensions 215 extensions, newspaper site contributed extensions 76 core extensions 75 core modules and components 75 extensions, photo sharing site main menu 181 other extensions 181

F feed content, news aggregating site 4RSS component, configuring 218-220 about 217 articles, adding 222 bad news 218 front page, configuring 222 JCron Scheduler, configuring 220-222 more bad news 218 other menus 223, 224 weird news 218 form ields, directory site about 168 field label 169 field type 169

[ 236 ]

for free 169 in category view 169 in details view 169 published 169 required 169 forum 71 forum link, newspaper site adding 87 forums, community site configuring 121, 122 forums, newspaper site creating 81 Have Your Say forum, creating 82 module, positions 83, 84 front page, directory site 174-177 front page, news aggregating site configuring 222 front page, newspaper site configuring 77 front page, photo sharing site 188, 189 front page display, events site altering 106 front page display, Global Hitchhikers Club site configuring 57 front page Google map, Google Map site creating 204-206

G global coniguration, photo sharing site about 184, 185 category view 185 category view settings (categories) 186, 187 category view settings (category list) 187 comments settings 187 description settings 187 detail view 186 upload settings 187 Global Hitchhikers Club site basic site, improving 71 building 55 content 56 content, displaying 65 extensions 55 features 53 finishing 70 template 55

global link, events site adding 104, 105 Google Map site article submission, testing 208 building 201 ContentMap, configuring 202, 203 contributed modules 201 contributed modules and components 201 core modules 201 extending 211 extensions 201 finishing 210 front page Google map, creating 204-206 JComments, configuring 206-208 JComments, testing 209 modules and plugins, enabling 202 template 201 Gzip 26

H Have Your Say forum, creating 82

I images, photo sharing site adding 192-195 installation, Joomla! manual installation 18 on local computer 8 on localhost 9, 10 on non-Windows localhost, URL 17 on remote server 17 on WampServer 8

J JA_Purity template URL, for downloading 231 JA Uvite template 72 JComments, community site 114 JComments, Google Map site configuring 206, 207 testing 209 JComments component about 56, 114, 201 URL, for downloading 229-231 JComments Latest module 56, 63, 201

[ 237 ]

URL, for downloading 229-231 JCron Scheduler URL, for downloading 232 JCron scheduler, news aggregating site configuring 220-222 JEvents component URL, for downloading 230 JEvents component, events site calendar pane, configuring 100 component pane, configuring 95 configuring 94 event detail view pane, configuring 97 event editing pane, configuring 96 latest events pane, configuring 100, 101 main monthly calendar pane, configuring 98 permissions pane, configuring 96 RSS pane, configuring 99 year/category view pane, configuring 98 JEvents Latest Events Module 94 URL, for downloading 230 JEvents Mini-Calendar module about 94 URL, for downloading 230 JEvents Search Plugin 94 URL, for downloading 230 Joombook. See community site Joomgets Inc. See e-commerce site Joomla! backend administration 18 Buzzy Beez's site, sample site 29 events site, sample site 91 Global Hitchhikers Club, sample site 55 installing, on local computer 8 installing, on remote server 17 installing, on WampServer 8 new categories, creating 20 new section, creating 20 newspaper site, sample site 73 resources, URL 21, 22 system, requisites 7 Joomla!, installing manual installation 18 on local computer 8 on localhost 9, 10 on ocal computer 8 on remote server 17

on remote server, without Fantastico 17 on WampServer 8 Joomla!, installing on local computer need for 8 Joomla!, installing on localhost database configuration 12 finishing 15, 17 FTP configuration 13, 14 language, selecting 10, 11 license page 11 main configuration 14, 15 pre-installation check 11 steps 9, 10 Joomla!, installing on remote server steps 17 Joomla!, installing on WampServer steps 8 Joomla!, photo sharing site installing 181 Joomla! 1.5 installing, on localhost 9 Joomla! basic site, improving blog extensions 71 chat 71 forum 71 RSS feed module 72 social bookmarking 71 template 72 Joomla! Community Magazine URL 22 Joomla! component Cron Scheduler 21 Joomla! extensions about 20 Content Construction Kit (CCK) 21 Cron Scheduler 21 Modules Anywhere extension 21 Joomla! extensions site URL 178 Joomla! Forums URL 22 Joomla! Frequently Asked Questions (FAQ) URL 22 Joomla! Help site URL 22 Joomla! Quickstart URL 22 [ 238 ]

Joomla! showcase page URL 154 Joomla! showcase site URL 129 Joomla! site, optimizing about 25 Gzip 26 system cache 25 techniques 26 Joomla_1.5_quickstart.pdf URL 22 Joomlaburg Accommodations. See directory site JoomlArt JA Uvite 72 jPFChat URL, for downloading 230 jPFChat 114

L latest company news link, Buzzy Beez's site adding 49 latest events blocks, events site 106, 107 latest events pane, JEvents component configuring 100, 101 latest information posts, Buzzy Beez's site Company News category, creating 37 creating 36, 37 Latest Information section, adding 36 Product News category, creating 37 latest product news link, Buzzy Beez's site adding 47, 48 local computer Joomla!, installing 8 localhost Joomla!, installing 9, 10 login form 201 login form module 56, 75

M main menu 113, 157, 181, 201 main menu module 31, 56, 75 main menu module, Buzzy Beez's site 31 main monthly calendar pane, JEvents component configuring 98

menus, community site about 125 blogs menu, creating 127 CB menus, creating 128 chat menu, creating 125 forums menu, creating 126, 127 poll menu, creating 127 menus, news aggregating site bad news 223 creating 223 more bad news 223 weird news 223 Midnight by BuyHTTP template URL, for downloading 232 module manager page 19 module positions, Global Hitchhikers Club site 63, 64 module positions, newspaper site about 83, 84 Agora latest post basic module, enabling 83 modules, community site creating 124 front page 124 modules and plugins, Google Map site enabling 202 Modules Anywhere extension 21

N news aggregating site building 215 categories, creating 217 extensions 215 feed content 217 finishing up 225 sections, creating 216 template 215 newspaper site articles, organizing 76 content, displaying 85 Daily Joomer online, building 75 extensions 75 finishing 88 forums 81 template 75 news section link, newspaper site adding 85 News StudioAlfa template 230

[ 239 ]

Newstheme template URL, for downloading 229 new user registration, photo sharing site 190, 191 Nosh'r. See photo sharing site

O optimization techniques, Joomla! site components 26 SEF 27 templates 26 other section links, newspaper site adding 86

P payment options page, directory site 173 permissions, directory site 178 permissions, photo sharing site 192 permissions pane, JEvents component configuring 96 Phoca download extensions, URL 198 Phoca Gallery, photo sharing site categories 182 installing 181, 182 new categories, creating 183, 184 themes 184 Phoca Gallery extensions, URL 198, 231 photo sharing site building 180, 181 extensions 181 finishing up 195 front page 188, 189 functionality, extending 198 global configuration 184, 185 images, adding 192-195 Joomla!, installing 181 new user registration 190, 191 permissions 192 Phoca download extensions, URL 198 Phoca Gallery, installing 181, 182 Phoca Gallery extensions, URL 198 template 181 polls 114 polls, community site configuring 119-121 popular module 56, 75

products, e-commerce site displaying 147-152

Q Quick Start to Joomla! URL 21 Quick Start to Joomla! video URL 22

R remote server Joomla!, installing 17 rhuk_milkyway template URL, for downloading 229, 231 RSS feed 72 RSS pane, JEvents component configuring 99

S sample site, Joomla! Buzzy Beez's site 29 events site 91 Global Hitchhikers Club site 55 newspaper site 73 search component 56, 75 search functionality, directory site 178 search module 56, 75 section, community site creating 118 section, Global Hitchhikers Club site creating 58 section, newspaper site creating 78, 79 sections, news aggregating site creating 216 SEF 27 simplest forum 114 URL, for downloading 230 simplest forum, community site 114 siteground-j15-101 template URL, for downloading 230 SOBI2, directory site background page 162 caching 161

[ 240 ]

categories 164, 165 debug page 161 downloading 157 entry configuration 171, 172 form fields 168-170 front page 174-177 general pane 158 installing 157 Mainpage 159, 160 new categories, creating 165, 167 other settings 163, 164 payment options page 173 permissions 178 search functionality 178 search options pane 160 sigsiu tree page 162 subcategories, creating 168 systems email page 160 URL, for downloading 231 view configuration setting 172 SOBI2 categories, directory site houses for rent (offered and wanted) 164, 165 houses for sale (in Joomlaburg and elsewhere) 165 houses to share (offered and wanted) 164, 165 new categories, creating 165, 166 subcategories, creating 168 SOBI2 payment options page, directory site 173, 174 social bookmarking 71 social extensions 71 system cache 26

T template 26 template, Buzzy Beez's site about 31 installing, steps 32 template, community site News StudioAlfa template used 113 template, directory site rhuk_milkyway template used 156 template, e-commerce site siteground-j15-101 used 133 template, events site 93

template, Global Hitchhikers Club site 55 template, Google Map site Alien template used 201 template, news aggregating site Midnight template used 215 template, newspaper site Newstheme used 75 template, photo sharing site JA_Purity template used 181 top menu module 56, 75

U user menu 201 user menu module 56, 75 user settings, Global Hitchhikers Club site 57 user settings, newspaper site 76

V view coniguration, directory site 172 Virtuemart component URL, for downloading 230 VirtueMart conigurations, e-commerce site about 133-135 Category Tree icon 141, 142 Category Tree icon, Product Images page 143 Category Tree icon, Product Information page 142, 143 Configuration icon 138, 139 Edit Store icon 135-137 List Payment Methods icon 140 Product List icon 140 shippers tab 145, 146 shipping rates 146, 147

W WampServer Joomla!, installing 8 Weird Hap'nins. See news aggregating site

Y year/category view pane, JEvents component configuring 98 [ 241 ]