Setup a Joomla Site

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/

82 Comments

  1. I will right away take hold of your rss feed as I can’t in finding your email subscription link or e-newsletter service. Do you’ve any? Kindly allow me understand so that I could subscribe. Thanks.

  2. While I originally commented I clicked the -Notify me when new comments are added- checkbox and now when a comment is added I buy four emails with similar comment. Perhaps there is any way you can remove me from that service? Thanks!

  3. This could be a single individual of the most effective weblogs We have ever before arrive across on this issue. Truly Superb. I am also a expert in this matter so I can fully grasp your challenging work.

  4. Hey there. I needed to inquire some thing…is the following a wordpress blog page as we are planning to be changing over to WP. Also did you make this theme all by yourself? Thanks.

  5. I’m not sure exactly why but this website is loading incredibly slow for me. Is anyone else having this problem or is it a problem on my end? I’ll check back later on and see if the problem still exists.

  6. Howdy, i read your weblog often and i own an analogous one and i used to be just wondering for those who get numerous spam feedback? In that case how do you forestall it, any plugin or something you may advise? I get a lot currently it is driving me mad so any assistance is very a lot appreciated. Anyway, in my language, there aren’t a lot good supply like this.

  7. Passed by your post and decided to share it on my blog so my followers can see it too. I used the same title, “ShallWeLearn Tech Blog » Blog Archive » Setup a Joomla Site”

  8. Hello, I think your blog might be having browser compatibility issues.

    When I look at your website in Safari, it looks fine
    but when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then
    that, great blog!

  9. Hi this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML.

    I’m starting a blog soon but have no coding expertise so I wanted to get
    guidance from someone with experience. Any help would be greatly appreciated!

    • admin

      Hi! To start a blog really does not take coding experience. If you use WordPress or Blogger, maintaining a blog is pretty easy and enjoyable.

  10. you’re truly a excellent webmaster. The site loading speed is amazing. It kind of feels that you’re doing any unique trick. Also, The contents are masterpiece. you’ve done a fantastic job in this subject!

  11. Attractive section of content. I just stumbled upon your blog and in accession capital to say that I acquire actually enjoyed account your weblog posts.
    Any wayy I’ll be subscribing on your augment
    or even I fulfillment you get entry to persistently fast.

  12. After going over a few of the blog articles
    on your web site, I seriously like your way of writing a blog.
    I saved it to my bookmark site list and will be checking back soon. Please check out my web
    site as well and let me know your opinion.

  13. Introduce me blogging want to visit on your website and read the contents of article useful for me

  14. Introduce me blogging want to visit on your website and read the contents of article useful for me

  15. Real fantastic information can be found on web site. “It is fast approaching the point where I don’t want to elect anyone stupid enough to want the job.” by Erma Bombeck.

  16. I precisely needed to appreciate you all over again. I am not sure what I might have undertaken without the pointers discussed by you directly on this subject matter. It absolutely was a real troublesome concern in my circumstances, however , finding out your specialised style you treated the issue took me to leap for fulfillment. I will be thankful for the help and then have high hopes you really know what a powerful job you happen to be carrying out educating men and women through a web site. I know that you have never encountered any of us.

Leave a Reply