Get Started Sale: Get 6 months of the Everything Club for $39! You save $69!
  Offer ends in
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Joomla

Following on the newsletter from last week where we talked about developing locally and moving your site to a live server, this week we're going to walk you through installing Joomla locally, on a Mac.

We're going to use MAMP for this tutorial.

Here's how you do it:

  1. Download and install MAMP to your Applications directory.
  2. Download the latest Joomla 1.5 zip file.
  3. Start MAMP by double clicking on the MAMP icon in your Applications/MAMP directory.
  4. Once the servers have started, a browser window should open to the MAMP start page. If not, click on the 'Open start page' in the MAMP window.
  5. Set up your database for Joomla by clicking on the phpMyAdmin link in the start page and inserting the name you wish to use for your database in the 'Create new database' field. **For all databases created in MAMP the default username / password is: root / root, and the Host Name that you will use when installing Joomla is: localhost.
  6. Copy/move the downloaded version of Joomla 1.5 to your Applications/MAMP/htdocs directory and unzip the file. Leave a copy of this zip file in the htdocs directory for easy creation of multiple Joomla sites ... just unzip the file each time you wish to have a new Joomla installation!
  7. Rename the unzipped folder to mysite (or whatever you wish).
  8. In your broswer navigate to http://localhost:8888/mysite (or whatever name you gave your directory).
  9. Run through the Joomla installation process and voila! (need help installing Joomla? See: http://help.joomla.org/content/category/48/268/302/)

You should now have a shiny new installation of Joomla on your Mac where you can develop your website securely in your local environment.

Video Showing How to Install Joomla Locally on a Mac

| Joomla

Often you have pages on your website that you want to keep private - either for your staff or for you registered members.

This week we'll walk you through how to keep search engine bots from indexing certain articles.

Method #1

    Registered Joomla
  1. In your Joomla Admin panel, go to Content >> Article Manager and open the article you wish to keep private.
  2. On the right-hand side under "Parameters (Article)" you will see a field labled "Access Level".
  3. If you set this to "Registered" then only people at the "Registered" user level and above will be able to see the article.
  4. If you set this to "Special" then only people at the "Author" user level and above will be able to see the article.
Click here to see a list of the different Joomla user levels and what they can do.

Method #2

  1. Nofollow JoomlaIn your Joomla Admin panel, go to Content >> Article Manager and open the article you wish to keep private.
  2. On the right-hand side under "Metadata Information" you will see a field labled "Robots".
  3. You can write "noindex" into this box and search engines should recognize that this page should not be indexed

To verify that this has worked, visit the secret page on the front of your site and click "View Source" in your browser. If everything has worked correctly you should be able to see a line in the code looking like this:

< meta name="robots" content="nofollow" / >

(we've added spaces around the < and > signs so you can see the code)

| Joomla

This week we'll walk you how to manage the files on your server through your Joomla Admin, using a Joomla component.

We're going to use a component called NinjaExplorer

Here's how you do it:

  1. Download NinjaExplorer
  2. In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  3. In the administration area of your Joomla site, go to Components >> NinjaXplorer and you will have access to your server directories and files.

This tool can be used to upload files, delete files and edit files (amongst other things) just as you would do with an FTP client.

Be sure you don't delete anything you don't know the purpose of - and this is a good time to remind you to back up your site regularly! (see our newsletter on moving your site from local to live server and use the technique mentioned to back up your site).

| Joomla

Many people like to develop their Joomla sites locally and then move their work to a live host when completed. This weeks tutorial will show you how to move an exact copy of your site from your localhost to a live server, database and all.

We're going to use a fantastic component called Akeeba Backup to help us with the process. We'll first use it to make a backup of our local site (files + database), and then we'll use a provided tool (Kickstart) to restore the backup to our live server.

Here's how you do it:

  1. Download the Akeeba Backup component. Make sure you get the latest release, which at the time of this newletter is 2.2
  2. Download the Kickstart app, again making sure you ge the latest release, 2.2Stable - unzip the package for later use.
  3. In the administration area of your local Joomla site, go to Extensions >> Install / Uninstall and upload the Akeeba Backup component file: com_Akeeba Backup-2.2-free.zip
  4. In the administration area of your local Joomla site, go to Components >> Akeeba Backup >> Configuration and we're going to change a setting before we backup and migrate. Click on the 'Advanced' tab and then locate the 'Archiver engine' and change it to 'JPA Akeeba Backup Archive, and click Save.
  5. Click on the Backup Now button (you'll notice a warning regarding the default directory being used for the backup - we can ignore this *for now) and then the 'Backup Now!' You should see the backup process begin, and be given a success page when completed.
  6. Locate the backup file in your localhost joomla_root/administrator/components/com_Akeeba Backup/backup - the backup file will have the extension .jpa. Upload this file to the directory on your live server where you will do the restore. For most this will be the root directory, /html or /home etc
  7. Upload the Kickstart app file to this same directory. You should have unzipped the package in an earlier step, if not, unzip and then upload the file.
  8. Create a new database using phpMyAdmin or the tool provided by your host to do so. This new database will be used for our restore to populate with our backed up data. Make note of the hostname, username/password and database name for further steps.
  9. Navigate in your browser to http://backup_directory/kickstart.php (where backup_directory is the directory your backup file is located). Insert your Host, Username, and Password information and click on the green Start button. You will see the process beign - do not close this browser window!
  10. Once the file extraction is done you will see a message to 'Please click here to open Akeeba Backup Installer restore script in a new window'. Click there.
  11. A new window will open, and you will see a typical looking Joomla installation page, however this is the restore script. Go through the installation process, making sure you put your new information for hostname, username, password and database in Step 4.
  12. After successful Joomla installation (restore in our case) go back to the other browser window and click on the link to restore your .htaccess file if you need to do this step, and close the browser window when done.
  13. The restoration process should now be completed, and you can log in to your newly moved site at /administrator to continue development on the live server.

| Joomla

This tutorial is a response to a question we've been asked often in classes:

"How can I resize images as I upload them?"

We're going to recommend Image Resize. It works so naturally with the Joomla workflow that most people don't even notice it. Here's how to use it:

  • Step 1: Visit Joomlaforge.net and download the file called plg_imageresize_v.5.zip
  • Step 2: In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  • Step 3: Go to Extensions >> Plugin Manager. Find "Image Resize" and enable it.
  • Step 4: Go to Content >> Article Manager and edit an article.
  • Step 5: Click on the image link at the bottom of the article and upload an image. Insert it into the article.
  • Step 6: Select the image and drag the corners until the image is the size you want it to be.
  • Step 7: When you view the article on the frontend, Image Resize does all the work for you and creates a new version of your image!

| Joomla

Having a fast site is really important:

"For Google an increase in page load time from 0.4 second to 0.9 seconds decreased traffic and ad revenues by 20%. For Amazon every 100 ms increase in load times decreased sales with 1%." source

These are two easy ways to make sure your Joomla site loads more quickly:

Turn on Compression

You can choose to send out your webpages in a compressed format. When you get a Joomla component it is often contained in a zip file. This enables the file to be much smaller without damaging the content in any way. You can do the same thing with webpages. In Joomla you just need to click "Yes" in the following place:

Site => Global Configuration => Server => GZIP Page Compression => Yes

There's also a great test to find out how much your site will benefit. According to WhatsMyIP.org, JoomlaTraining.com shrinks from 13k down to just 4k when GZip is enabled

Turn on Cache

Caching is another way to speed up your site. It stores files so that Joomla doesn't have to load the same elements every time. Why load the logo again on every page? Its best just to store it and reuse. It can turn on caching here:

Site => Global Configuration => System => Cache => Yes

The speed gains with caching can be remarkable. Last year there were problems with the cache systen we use here on one of our sites. We turned it off while we tried to bugshoot the issue. We also use Pingdom.com to track whether our sites are offline and also how fast they're responding. When we logged in later, there was a stellar argument for why caching your Joomla site is so important: the site loaded twice as quickly with the cache turned on.

cacheoff

| Joomla

Joomla templates allow you to redesign your site easily. modulesuffixesThey also allow you style your modules. Your login box can have one color, your "Latest News" can have another color and your "Most Popular News" can have third.

This image is an example using the Bolt template.

  • Red header, white background.
  • Orange header, orange background.
  • Yellow header, white background.
  • Green header, green background.

Here's how you do it

  1. Go to the administrator area of your site and Extensions >> Module Manager.
  2. In the parameters of your module, on the right-hand side, you'll see a box saying "Module Class Suffix".
  3. You'll have to read the documentation for your template to know what to enter - each template is different. If you're using Bolt you could enter any of these:
  • -red (Red header, white background)
  • -orangebg (Orange header, orange background)
  • -yellow (Yellow header, white background)
  • -greenbg (Green header, green background)
This example would give us a red header and white background:

How to Use Joomla's Module Suffixes

| Joomla
Joomla Training Cheat SheetFor the first time we're not sending a tutorial this week, but a download link: http://joomlatraining.com/cheatsheet.pdf

This is a condensed version of the beginner class. All the most important information is contained in just two PDF pages.

Please feel free to print this out and keep with you whenever you need reminding of Joomla's core concepts.

| Joomla
In our beginner classes we teach that module are small blocks of content around the outside of a Joomla site ... top, right, left, bottom.

Now that you're a little more familiar with Joomla, let's see an exception to that rule ... we can place modules inside regular text articles.

  • Step 1: In the administrator area of your Joomla site, go to Extensions >> Plugin Manager
  • Step 2: Find the plugin called "Content - Load Module" and make sure that it's enabled. On Joomla 1.0 its name is "Load Module Positions"
  • Step 3: Go to Extensions >> Module Manager and find the module you'd like to place inside an article.
  • Step 4: Open the module and click on the "position" dropdown.
  • Step 5: Choose a position that doesn't appear on your template. Remember that you can check this by adding /?tp=1 to your site.
  • Step 6: Save that module in its new position. In this example we've saved it in "User1"
  • Step 7: Go to Content >> Article Manager and open the article you're using.
  • Step 8: Place this code into the article: { loadposition user1 } ... remove the spaces between the brackets and the text. If you're using Joomla 1.0, then the code is {mosloadposition user1} .
  • Step 9: Save the article and check your handiwork on the front of your Joomla site.

Video Showing How to Place Modules Inside Joomla Articles

| Joomla

Sometimes you have text, an image or even code that appears on many places throughout your Joomla site. Normally, updating is a slow process:

  • Open page
  • Make change
  • Close page
  • Repeat ad infinitum

Wouldn't it be nice if you could search and replace just as you do with a Microsoft Word document. You can! Here's how to do it:

  • Step 1: Click here and download an extension called ReReplacer.
  • Step 2: In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  • Step 3: Go to Components >> ReReplacer and click "New" in the top right hand corner.
  • Step 4: Enter your existing text, image or code in the filed labelled "Search"
  • Step 5: Enter your new text, image or code in the filed labelled "Replace"
  • Step 6: Click Save and repeat as often as you need!

| Joomla
sobi1.pngThis tutorial which will show you how to create a business directory or Yellow Pages on your Joomla site. We're going to use a component called Sobi2, which is available from www.sigsiu.net.

Installing Sobi2

  1. Click here to download the Sobi2 component.
  2. Go to Administrator >> Extensions >> Install / Uninstall and upload the Sobi2 files.
  3. Click "Install Sobi2 data"
  4. Go to Menus >> Main Menu and click "New"
  5. Choose Sobi2 >> Frontpage or Selected Category for your menu link. Give the link a title such as "Directory" and click save.
  6. Visit the front of your site and click on the new "Directory" link. It should look like the screenshot on the right:

Configuring Sobi2 With Your Site Details

The first thing we'll do is put our own website's information into Sobi2:

  1. Go to Administrator >> Components >> Sobi2 >> General Configuration.
  2. Under the "General" tab, change the first field "Component Name" to reflect the name of your directory.
  3. Under the "Mainpage"tab, change the first field "Description of Component" to describe your directory.
  4. Under the "Mainpage" tab, you may want to change "Image for Description" to "- Select an Image -" so that you can hide the default image.

Creating Business Categories

Next, we'll set up the categories we're going to use for the businesses:

  1. Go to Administrator >> Components >> Sobi2 >> All Entries
  2. Click on "Add Category" and start to create your structure.
  3. If you already have a list of the categories you want to use, click "Add Multiple Categories" and you can insert a list.

Choosing Business Details

Depending on where and what kind of business listings you have, you'll need to collect different kinds of details. U.K. and Canadian sites might be happy with collecting "Post Code" but U.S. sites will need to change that to "Zip Code".

  1. Go to Administrator >> Components >> Sobi2 >> Custom Fields Manager
  2. Click on "Add New" in the top-right corner to add new details.
  3. You can choose to charge for extra information. For example, business might be an extra $5 to have their phone number listed and an extra $10 for their website link.

Collecting Payment

Yes, we did mention that you can have paid listings. That service is free with Sobi2. Once you've set up your fields using the above steps, you can enter your payment information:

  1. Go to Administrator >> Components >> Sobi2.
  2. Click "Configuration" on the left-hand side and then "Payment Options" will appear.
  3. PayPal is available by default so enter your business information including a Paypal email address in "Email Address" and a Thank You page link into "Return URL"
sobi2.png

| Joomla

Our teachers like to explain in Joomla beginner classes is that we're not Joomla cheerleaders. We love Joomla, but it has strengths and weaknesses like all software. Perhaps the biggest current weakness is user levels.

Joomla has 8 user levels but they are both basic and also often difficult to understand. Here is an explanatory chart of the levels that some of our students have found useful. (Original source: http://brian.teeman.net/joomla/65-joomla-15-acl-explained)
Understand Joomla User Levels and Permissions

 

| WordPress
Perhaps the #1 most common question we get from beginners is: "How do I change the logo on a Wordpress theme?" This tutorial is the answer:

  • Step 1: Go and download the Firefox browser, if you haven't done so yet: http://www.mozilla.com/en-US/firefox/personal.html. Firefox is much better than Internet Explorer or Safari for working on websites.
  • Step 2: Start Firefox so that you're browing the web with it. We're now going to install an extra toolbar for Firefox. It is called the "Web Developer" toolbar. Visit this page: https://addons.mozilla.org/en-US/firefox/addon/60
  • Step 3: Click "Add to Firefox" and follow the instructions, including restarting Firefox.
  • Step 4: The next time you open Firefox, you will see a list of links that starts with "Disable", "Cookies", "CSS" and ends in "Options":
Wordpress and Firefox Toolbar

  • View Image InfoStep 5: Browse to the website where you want to change the logo. We're going to use http://wordpress.org for this example.
  • Step 6: In the toolbar, click on "Images" which is the 5th link from the left. Then click "View Image Information" from the dropdown.
  • Step 7: You will now see a list of all the images on the site.
  • Step 8: Scroll down until you see the logo. You will see two pieces of information about it: Location ( http://s.wordpress.org/style/images/wordpress-logo.png ) and Size ( Width = 301 pixels, Height = 52 pixels ).
Wordpress Logo
  • Step 9: You need to make a new logo that is the same width and height as the old.
  • Step 10: Use your favorite file manager to upload the new logo to the location you found in Step 8. It is better to rename rather than delete the old logo. You could call it logo-backup.png for example.

| Templates

This post is for all of you Mac fans out there, specifically those using the excellent Coda editor by Panic. I could preach all day long about how using a quality code editor like Coda can both speed up your coding as well as make your coding better.

One brilliant little function of Coda is that it has a built-in code snippet collector called 'Clips'. What's even more brilliant is that Coda gives developers a way to share groups of these clips with each other. I was inspired by our friend Jon from Zuno Studios when he released a few clip groups relating to Joomla 1.5 development a few months ago. His clips are specifically geared towards developers creating extensions, and if you're at that level I highly recommend checking out his handy clips.

Since more of my day-to-day work involves creating templates, I put together a set of clips that I use almost daily for creating Joomla 1.5 templates. Lucky for you Coda users out there, I've packaged them up in a tidy group that you can download.

Read more ...

| Security

On 12/17/2008 around 7:00 PM EST , Twitter.com was hacked by a group claiming to be the Iranian Cyber Army. The actual attack was a DNS Hijacking (or DNS Poisoning) that resulted in Twitter Users being directed to a page of their choosing. In this example here is what they posted:

Twitter Hacked - could it happen to you?

This old school defacement actually was conducted by 'hijacking' the sites DNS - how they accomplished this is still unknown, the fact is they did. What exactly is a DNS Poisoning or Hijacking?

Read more ...

| Development

One of the most important aspects of extension development is gathering input from the user and manipulating it in a meaningful way. Many times, you will collect data with a form and then store it into a database table. Other times, you will decide how to order or display information to the user based on the query string of the URL. In either instance, you are taking and acting upon input from the user. Obviously, you hope that your users have good intentions in using your extension, but unfortunately, the reality is that not everyone has your best interests in mind. For that reason, you must be careful about the input that you allow into your extension.

Read more ...

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!