Free Joomla Listing | Joomla Extensions Directory Showcase | Component, Module, Plugin, Templates

Joomla Resource, Tutorials and News for Joomla

2010-05-16T12:53:52Z

Recover Joomla Error Page with Redirect Joomla! 1.6 Component

2011-03-24T20:31:54Z

A new component and plugin called Redirect has been icluded at Joomla 1.6 release. Its main function is to provide a mechanism to record 404 "not found" errors, and to give the Web site owner the ability to redirect those to another page if desired.

The Redirect component and plugin is very important in Joomla 1.6 because, at the very least, the new category system will create some new URL's. Some Joomla 1.5-style URL's will no longer be applicable in Joomla 1.6. However, Joomla 1.6's new capabilities may also lead you to experiment with new site structure that was not achievable in Joomla 1.5. Whatever the case, Redirect has been provided to give you the best chance of preserving your search engine page rank (amongst other things).

Strelin CMS – a fork of Joomla 1.5

2011-03-18T15:01:32Z

Strelin CMS is a new fork of the popular open source content management system, Joomla!. Forked from version 1.5, this new CMS is described as having an advanced ACL that Joomla! currently is lacking. Strelin is an open source project released under the GNU/GPL license and is made available for free to anyone wishing to use it for personal or commercial websites. You can download a free copy now!

The Predictions for Web CMS in 2011

2011-03-18T14:50:03Z

The website of the future will be a seamless blend of corporate generated and user generated content. Social is no longer just a disconnected feature of a website, it’s a fundamental shift in how companies embrace customer relationships, transparency, and authenticity. In 2011, we’ll finally start to see companies and brands adopt the principals outlined by Jeremiah Owyang in his 2007 blog how on How to Evolve Your Irrelevant Corporate Website

Corporate websites took a giant leap forward, evolving from static to dynamic, and from generic to personal. The explosive growth of mobile devices in new form factors like the iPad caused CMOs to rethink their mobile strategies.

Ready to Download, Joomla 1.6 Beta Now Available

2010-05-21T21:32:16Z

The Joomla Project, a free, award-winning PHP-based content management system that enables users to build websites and powerful online applications, today announced the beta release of Joomla 1.6. Designed to offer enhanced site control and a more polished user experience, Joomla 1.6 will deliver a variety of new tools to improve website management and access, a more robust organizational structure for content control, and various other user-experience improvements throughout the software.

It’s time to mobilize your Joomla Site

2010-05-16T12:04:20Z

Today’s Mobile communications have become a key component marketing scene, millions of people are now surfing the web on their cell phones so .. don’t be left out. It’s time to enhance your joomla site to market to the ever-growing numbers of mobile users. By introduce your product and services for users mobile access into your marketing mix by extending current promotions with mobile-only offers.

Joomla!® 1.6.0 is now available for download

2010-05-16T11:50:22Z

The Joomla Project announces the immediate availability of Joomla 1.6. This new version of Joomla includes more power, more control, and more options than ever before. With Joomla 1.6 developers will build extensions faster through all phases of design, deployment and updates. Advanced and rich API’s will provide new opportunities to integrate, compete and expand into existing and new markets.

Rebuilt from the ground up in much of the application, this latest Joomla release will delight the casual site builder while helping small, medium, and enterprise businesses succeed in delivering web sites, intranets and applications to their respective markets.

Tutorial Debugging JavaScript with Firebug

2009-12-24T16:20:17Z

If you're working with JavaScript in the browser, it won't be very long before you need to debug your code to fix error in your web blog contents. In this first video, Joel Hewitt, creator of the essential Firebug plugin for Firefox, introduces Firebug and teaches you how to use it. (Note: This video is for Firebug 1.0, but the current version of Firebug is 1.4. Despite the version difference, the video still provides a great overvidew of the tool.)

Create Image Caption with Mootool

2009-09-27T12:49:10Z

Using MooTools will allow you to write auto caption images on-the-fly using a bit of MooTools magic. MooTools is a powerful open-source JavaScript framework that can greatly enhance the way you build your web interfaces. The first thing we want to do is mark up our images

HTML

CSS

img {
padding:5px 0;
}
div.figure {
width:310px;
text-align:center;
border:1px solid #ccc;
background-color:#f2f2f2;
margin:5px;
float:left;
}
p.caption {
padding:0;
margin:0 0 5px 0;
font:italic 12px Georgia, "Times New Roman", Times, serif;
color:#333333;
}

div.figure will be the container of our image and caption. p.caption will be our actual caption. We’re going to use MooTools to insert these two things in our Document Object Model (DOM).

The code logic: manipulating the DOM

Before we get into any code-authoring, let’s step through the logic of what we’re trying to accomplish.

First, we’re going to select all of the images in our structure that has a class ofcaptioned. Then for each image that matches our criteria, we’re going to:

Determine whether it has an alt or title attribute.
If it has neither an alt or title attribute, we don’t do anything to the image and warn the user that the image needs at least one for our script to work.
If we find both a alt and title attribute, then we will use the title attribute value for our caption.

Once we get the text for our caption, we will create a new DOM element, a paragraph element (<p>) called caption which will contain our caption text.

Once caption is created, we’ll create another DOM element (a div) to contain our image and caption. We will call this new DOM element figure.

Through DOM manipulation, we’re going to end up with an HTML structure like this:

<div class="figure">
<img class="captioned" src="http://www.joomlapublisher.com//red_rocks.jpg"
title="Photo of Red Rock Mountain." width="300" height="201" />
<p class="caption">Photo of Red Rock Mountain.</p>
</div>

Of course, this will happen behind the scenes, but that’s basically what our HTML will look like after our MooTools script runs.

Initializing MooTools

Now that we have our HTML and CSS set up and we have a rough overview of what we’re going to do - we’re ready to start scripting!

First, we’ll initialize MooTools by wrapping all of our code inside the ‘domready’ event listener.

window.addEvent('domready', function() {
... Our code goes in here ...
});

What this method does is it tells MooTools that as soon as the DOM is ready, we’ll run our code. This way, we’re not waiting for the page to load before we execute our JavaScript.

Selecting and iterating through our images

We’ll select our images to be captioned by using the $$() function which is often called the "dollars" function. $$() is very intuitive and works almost exactly like CSS selectors. To select all images that have the class captioned, we write:

$$('img.captioned')

Tip: we can also just use $$('.captioned') assuming that you only use this class for images. To be safe - I’ve chosen to increase the specificity of our selector.

Next,we will iterate through each image that matches our criteria using the .each()method.

window.addEvent('domready', function() {
$$('img.captioned').each(function(el) {
...Everything we write will go in here...
});
});

Getting the text for our caption

We’re going to use the getProperty() method to pull out the title attribute value.

We’ll put this value inside a string variable called captionText.

To get the value, we write:

var captionText = el.getProperty('title')

In our HTML markup, the value of captionText should now be:

"Photo of Red Rock Mountain."

But we have to consider the situation that the image might have both an alt and atitle property declared.

So, we’re going to use a ternary control structure to check if there’s a title and if we find it, then we’ll use that for our caption; if not, we’ll try to see if there’s an altproperty and use that instead. If they both don’t exist, then captionText gets assigned a null value.

var captionText = ( el.getProperty('title')!=null )
? el.getProperty('title') : el.getProperty('alt');

Note: ternary operators are just shorthand for if statements. You can easily convert the above code into nested if statements and it will work just fine. Have a go at it, convert this bit to an if structure. If you need help ask in the comments.

In plain english, this all translates to "If the current object’s title attribute value is not null, then captionText will take on that value; otherwise, captionText will take on the value of the alt attribute."

Explore: Here’s a good spot to explore by yourself. Try to modify our ternary operator so that the alt attribute takes precedence over the title attribute.

Making sure we have a caption

Before we do anything else, we have to make sure that our object will have a caption.

So we make sure the captionText doesn’t contain a null value. We’ll do this with a basic if control structure

if ( captionText!=null ) {
//code to execute if we have a caption
} else {
//code to execute if we encounter an error (Error-handling code goes here).
}

Error-handling

Let’s jump ahead to our error-handling and reporting. The method we’ll use is very rudimentary: if we find that the current object doesn’t have a caption (i.e.captionText != null evaluates to false), then we’re going to tell the user that this image needs either a title or an alt attribute.

alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');

To help identify the image, we take the src value, which outputs the location of our image.

IMPORTANT: This type of error-handling and reporting isn’t good practice; we used this in the example to make things easier on ourselves. But in production, you would want to replace this code with a better way to handle errors.

Messing around with the DOM

Now, we’re going to get into the thick of things – DOM manipulation. We’re going to insert two new elements in our Document Object Model; they are figure andcaption.

The first element we’re going to make is the figure element. This element will be adiv element that will contain our image and our other new element (caption).

Declaring our figure prototype

In order to create a new element in MooTools, we use the following structure:

var elementName = new Element('type of element', {its properties})

We want figure to be a div with a class of figure and 10 pixels wider than our image (so that we have a 5-pixel margin on the left and the right).

Our prototype for figure then becomes:

var figure = new Element('div', {
'class' : 'figure',
'styles' : {
'width' : el.get('width').toInt() + 10
}
});

To get the width, we use the get() method, and then we convert the value to an integer with the .toInt() method. We then add 10 pixels (+ 10) to the width so that we get the 5-pixel margin on either sides of the image.

Are you with me so far? Keep up, we’re almost there!

Declaring our caption prototype

So we just built our first new element, figure. Now we have to build our second element, caption. caption will be a paragraph element (<p>) and will contain the caption’s text we took from our image (remember: it’s inside captionText).

Let’s get right to it, here’s our caption element prototype:

var caption = new Element('p', {
'class' : 'caption',
'html' : captionText
});

Review: Go to the MooTools Doc entry on the Element method: constructor to learn more about creating new elements.

In the above construction, we created a new element called caption. We told MooTools that we want it to be a paragraph (<p>) element that has a class ofcaption and the HTML that should be inside it is equal to captionText.

Manipulating the DOM

Wrapping our object inside figure

The first DOM manipulation that we’ll pull off is wrapping our object inside ourfigureelement. We’ll use the wraps() method which (as the name implies) wraps the target object of the method with the argument you pass into it.

with this in mind, all we have to do is write:

figure.wraps(el);

Inserting caption into the DOM

After that, we want to insert caption after our image. We’ll use the inject() method for this.

caption.inject(el,'after');

Summing up

Let’s bring everything together in one big chunk. Here’s the entire MooTools script.

What did we just do?

In this tutorial, we used the MooTools JavaScript framework to automatically display captions below images that have the class of captioned. We did this by selecting all the elements that matched our criteria, iterated through the matched set, and for each object in the matched set, we:

Determined our caption’s text by getting the value of the object’s titleattribute, and if it didn’t have one, then we defaulted to its alt attribute.
Constructed the figure element that wraps around our image and caption.
Constructed the caption element, a paragraph that has our image’s caption.
Wrapped our image inside the figure element using the wraps() method.
Injected caption right after our image using the inject() method.

We also made a very basic error-handling system that warns the user via an alert message that a title or alt value is required.

Review questions for beginners

This script is far from perfect. I chose to leave it that way to encourage you to explore MooTools and analyze the code we wrote together.

Here are some questions to try and answer yourself. I will post the answer in the comments section at a later date.

Our script will break if the image doesn’t have a width attribute; what are some error-handling operations we can perform to prevent our script from breaking?
What are other MooTools methods that could work in setting the width of thefigure element?
Is the .toInt() method a MooTools method or a native JavaScript method?

Download Auto Caption Image

You can download the source file package here. Please read README.txt for instructions on how to use this package.

auto-caption (ZIP, 71.3 KB)

Script for Recording User IP Address

2009-09-27T07:38:50Z

If your website has a feature such as uploader and you want to track the people that use it, then you may want to consider using some sort of record script that will record information to somewhere. In this tutorial you can create a script that will silently record a user IP address and store all information in a .txt file, no database required!. This very usefull for your Joomla user registration form or for tracking user order come from.

IP Logging is used alot now a days, a common place to see it happening is on sites that use shopping cart systems. You will often find that a message will be on the website somewhere stating that your IP address is being logged (For that session) you can also find IP logging on major websites such as Wikipedia.

IP logging is present as Wikipedia is a publicly accessible knowledge base that can be edited by anyone, in order to prevent abuse they would track user's IP address to make sure they can block anyone that abuses it. IP Logging allows you to have some sort of log to look over and review to spot any interesting/query IP address which you may be suspicious of. Essentially giving you the upper hand againest someone thats abusing something. The PHP Script: Enough chit chat. Let's show the script thats going to log IP's

01. 02.// Checks the current date and time

02.// Checks the current date and time

03.$dateTime = date('Y/m/d G:i:s');

04.// Loads the writable text file and await instruction from fwrite command

05.$fp = fopen('ip-log.txt', 'r+');

06.while (!feof($fp))

07.{

8.$buffer = fgets($fp);

9.// Scan for any previous logs of the IP

10.// If scan determines that the user is a logged IP address, overwrite existing log.

11.list ($ip, $crap) = split(' ', $buffer);

12.if ($_SERVER['REMOTE_ADDR'] == trim($ip))

13.$exists = TRUE;

14.}

15.// If scan determines it's user is a new IP entry, add the IP address to the log file at the end of the document

16.if (!$exists)

17.fwrite($fp, $_SERVER['REMOTE_ADDR']. " $dateTime\n");

18.fclose($fp);

19.?>

The comment marks should explain many of your questions but I'll break it down:

$dateTime = date('Y/m/d G:i:s');

First off the script will check the current date and time. It will need to be called first otherwise the log can't process a date and time stamp.

$fp = fopen('ip-log.txt', 'r+');

This will be your text file that the script will write all logs to. Whatever you name it and wherever it's stored you must update the filename in the script otherwise the script will throw out alot of error's.

You will also need to make this text file writable (CHMOD 777) As a recommendation I'd place the text file you are going to use within the public_html folder so it's easily accessible. Notice the fopen command. This is needed to start the log process otherwise the script will not write anything to the text file

$buffer = fgets($fp);

02.// Scan for any previous logs of the IP

03.// If scan determines that the user is a logged IP address, overwrite existing log.

04.list ($ip, $crap) = split(' ', $buffer);

05.if ($_SERVER['REMOTE_ADDR'] == trim($ip))

06.$exists = TRUE;

07.}

08.// If scan determines it's user is a new IP entry, add the IP address to the log file at the end of the document

09.if (!$exists)

10.fwrite($fp, $_SERVER['REMOTE_ADDR']. " $dateTime\n");

11.fclose($fp);

This script will now check the log file for any previous logs of the IP Address that is being logged. The fgets command will be used to fetch the log file and check for any current logs of the same IP Address. If the IP address is new and has not been logged before then the fwrite command will write the new IP address to the log.

fclose($fp);

The fclose command is important as it will stop the log writing any other details that could end up as bad data. It is vital it is placed as: 1. This script will slightly slow your page loading time down.

Not adding in a close function will either effect your page loading times dramatically, or even cause endless loading times (Page will never load) 2.

You may end up with random log data if the script does not have a stop function Security Isssues with this script: The security level of this script is low as it only records a users IP Address nothing else. If it recorded personal data or passwords it would be much more serious.

The fact of the script not using a database may be good for some people, but in actual fact using a database would make this script more secure, but being able to make a script that can write log information to a writable text file does provide some advantages.

The point of this script is a quick and simple way to record a users IP Address and as long as you don't advertise the fact that you have a text file thats logs IP address's no one will know. Even if you want to add a note on your website that IP addresses are logged nearly 99% of people will never know how your logging IP addresses.

So thats how to make a silent and easy way of logging a users IP Address. I've pointed out it has issues but in the end the script does a big stop with little requirements!