In this guide, I will cover how to set up a Content Management Site powered by Joomla 1.5.x. This document is by no mean complete, but the section that shows one how to embed a flash MP3 player as a custom module should be very helpful to many.

Install

First check with your current or prospective hosting company and make sure that your site supports PHP and MySQL. They might even have an easy-install option; for instance, DreamHost has a One-Click option to install Joomla. Even if your hosting company does not provide a one-click way to set up Joomla, it’s not hard at all to set it up.

To install it manually, get the latest Joomla at Joomla download site, create a directory called joomla at your domain root (if you don’t know where your domain root is, please consult your hosting company) and unzip it to a directory, say joomla, the document root of your domain. Next, create an empty database called joomla_db. If your hosting company supports MySQL (most of them do), then it probably also support PhpMyAdmin, the web-based MySQL administration application. Create a new database with PhpMyAdmin is very straightforward.

Browse to http://yourdomain/joomla to start the web installer application. There are five basic steps:

1. Choose Language
2. Pre-installation Check
3. License Agreement
4. Database Configuration
5. Post-installation Cleanup

Choose Language

Select your language and hit Next.

Pre-Installation Check

At this step, the web installer will check the set up on your hosting system. All options except “Display Error” should be green.

License

Read the License and hit Next.

Database Configuration

Fill in the database information and hit Next. If you do not know the host name your database server, first check out the panel web application from your hosting company; if you could not find it, consult your hosting company.

FTP Configuration

Next, set up the FTP layer, a new feature of Joomla 1.5.x. Using the FTP layer eliminates the need to make directories and files writable thus improves the overall security of the installation and the server.

If you are installing Joomla on localhost or on a Window host, then you can skip this step and hit Next. But if you are installing on a remote Linux/Unix box, then you would need to set this up to avoid write permission errors. If you are unable to complete this step, you can complete it later through the Control Panel->Site Menus->Global Configuration screens at a later time.

Main Configuration

Next step is the main configuration. At this step, we will enter the site name, administrator’s email, and administrator’s password. But first, let’s install the sample data (fill the empty database with sample data) by clicking the Install Sample Data button.

You should see a installed successfully message.

Enter the Site Name, your email, and admin password you’d like. Hit Next.

Now you should see a warning sign, asking you to remove the installation direction. Go to your <JOOMLA_ROOT> and remove installation directory.

Go to the Joomla root directory and delete the installation folder.

After deleting the installation directory, click the Site button to go to the new Joomla site.

You should see something like this:

This is the default Joomla template, and the content in it was created when you selected to install the sample dataset. Mind you, but I prefer something cuter, so next we will change and customize our template.

Customize Beez Template

Open the Template Manager by going to “Extensions”->”Template Manager”, and select the beez template. Click the star button or Default button.

Now click the Preview link and you should see this:

Change Logo

We will be modifying this section of the header.

Open <JOOMLA_ROOT>/templates/beez/images/logo.gif and edit it using an image editor, such as Adobe FireWorks or GIMP.

This is the original logo.gif.

I changed it to fit the targeted website.

Next, I get rid of the “Jooma! accessible Template” text under the logo.gif, open <JOOMLA_PATH>/languages/en-GB.tpl_beez.ini.

Edit the line that starts with JOOMLA_ACCESSIBLE_TEMPLATE. Delete the “Joomla! Accessible Template” text.

Create a Custom Module to Embed a Flash MP3 Player

Set up and Test the Player Locally

Found a free flash player at http://premiumbeat.com, download the multiple tracks version, and unzip to <JOOMLA_ROOT>. This will result in a directory named something like playerMultiplePackage. Rename it to player.

First test the player by going to <JOOMLA_ROOT>/player. If you’ve been following the directions in this document as is, your player directory would be in <DOMAIN_ROOT>/joomla/player. On a Dreamhost account, it would be under /home/username/domain_name/http/joomla/player.

To add your own songs, copy songs you’d like to play to <JOOMLA_ROOT>/player. I added one song called song2.mp3 (song.mp3 came with the player). This is what my <JOOMLA_ROOT>/player directory looks like:

Double click ampleEmbedCode.html to open the browser.

Click the play button to play. It should work (I’ve tested on both IE and Firefox 3.5.3 ).

To play multiple songs, add another MP3 file, say song2.mp3, to this directory.

And open playlist.xml to change it to look as followed. Double click sampleEmbedCode.html again to bring up the player and this time it should play both songs.

Create a Joomla Module to Embed this Player

Next we will create a custom Joomla module to embed this MP3 player. Go to Joomla Administration site http://<PATH_TO_JOOMLA>/administrator. For me, it’s http://localhost/joomla/administrator. Log on as the administrator (user name is admin and password is what you’ve entered during the installation). First, change administrator’s editor to “no editor” so the HTML codes we will paste won’t automatically be formatted. Then go to “Extensions”->”Module Manager”.

Double click Administrator link.

At the right, find the Parameters section and select “Editor – No Editor” for User Editor. Then click Save to save and exit.

Next, go to Extensions->Module Manager.

Add a new Module by clicking the New button.

Select Customer HTML radio button, then hit the Next button.

Scroll down to the bottom and hit the HTML button on the toolbar to open the HTML editor.

Now open sampleEmbedCode.html with word pad or other HTML editor, copy all, and paste it inside the HTML Source Editor:

Prepend the URL path to the player directory to the path to swfobject .js, playerMultiple.swf, and playlist.xml. For example, the path to swfobject.js would become http://localhost/joomla/player/swfobject.js on a local setup.

Click Update button at the bottom of the HTML Source Editor window to save.

Enter “MP3 Player” for Title, keep Show Title and Enabled selected, and then click Save.

The open playlist.xml and edit it so it reflect your real tracks. Note that you would need to change the direct path from “song.mp3” to an URL address because we will be embedding the player code in a Joomla module. This is what the xml looks like if you set up the test site on your local machine.

Troubleshooting

Problem: Player is not displayed

You might see just the title of the player, but not the actual flash player.

Make sure that when you create the custom plug-in, you are not using any editor, just plain HTML editor. (To do so, go to “User Manager“, select your user name, then select No Editor from the user editor drop-down list.) If there is nothing wrong with your module code, then try obtaining the latest Joomla. You can obtain the absolute latest from the Joomla SVN site, which is located at

http://joomlacode.org/svn/joomla/development/releases/1.5/

Use “anonymous” as user name and empty string (nothing) for password. To check out the whole source tree, obtain a svn client such as Tortoise (for windows), or just use the cross-platform RapidSVN.

Problem: Player is displayed but it could not find songs

I had this problem when I added this costume module to my live site.

I fixed this error by adding the “www” to the path to the playlist.xml.

Reference

http://help.joomla.org/content/section/48/302/

http://www.premiumbeat.com/