Share This:

Every Joomla site maker fears giving backend access to people who are unfamilair to Joomla. This is even more so the case when the site is actually making money. However there are times when someone makes a Joomla site for another person who needs to make changes to modules that can usually only be changed in the backend of the site. During the older versions of Joomla this wasn’t that big of an issue. You simply needed to install a plugin called Frontend Module Editor. However development of the plugin has stopped and you can’t really find a version that does exactly that for versions of Joomla 2.6 or higher.




Solution

Please note the below solution is most likely not a recomended solution by the official Joomla community. Not to mention I wouldn’t recomend the below solution on high scale large Joomla sites. However the below solution works great on smaller Joomla sites and for sites that only need one or two Modules changed often.

I recently was building a Joomla 3 site for a client of mine. Who needed to make frequent changes to modules. Instead of taking even more time out every time he needed a change done to a small little module I decided to find out which modules he wanted to make changes to. Luckily for me these modules where just Custom HTML modules. This made things alot easier for me to work out. I tried two different methods and both worked well. In fact he really didn’t care which one I used. And just in case your wandering what the site is here is it is called Nifty Knitter

Method 1 (JQuery AJAX Calls & PHP)

This method is great if you have responsive Joomla website. However it does require a little bit more know how to achieve.

The first thing we need to do is modify our existing Joomla Template. We will first add the latest JQuery libraries to the head of the template. At the time of this writing the latest version of JQuery is 2.0.3 so we will add the following code to the head of the template.

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/jquery-2.0.3.min.js">

Now we will need to make an AJAX call using JQuery. To do this we will put the following into the head of the template.

<script type="text/javascript">
$.ajax({
url: 'http://www.somedomain.com/1.php',
type: 'GET',
error : function (){ document.title='error'; },
success: function (data) {
$('#module1').html(data);
}
});
</script>

If you can’t tell what the above code does which you should be able to know. It pretty much tells JQuery to make an AJAX call to the URL called http://www.somedomain.com/1.php using the GET method. If for what ever reason it can’t make the call for example the page doesn’t exist then it will give a nice friendly error message. If it is able to make the call successfully then it will load the content of the web page into a place on the page that had the id of module1.

Next we will need to add the module1 id to the correct Custom HTML module. I used <div></div> tags to place the id in. So for example if we have a custom HTML module called foo we will add some custom HTML code to it that looks like the following.

<div id="module1"></div>

At this point in time we can pretty much just tell the user to simply SSH into the server and upload a file called 1.php with the correct Access-Control-Allow-Origin:  to the root of the website directory. However if our client makes that look with one eye brow risen higher then the other. You know the look as though your talking to him in Valcan then you may want to simplify it even more for him to prevent him from making mistakes that he or she will regret. So what we will do is create a form that he or she can fill out that will create the page he or she needs. To do this we will use PHP by using the following code.

<?php
$file = fopen("1.php","w");
echo fwrite($file, "<?php header('Access-Control-Allow-Origin: *'); ?>");
echo fwrite($file,"$_POST[mod1]");
fclose($file);
?>

Great now we can create a submission form. We will do this by simply creating another Custom HTML Joomla Module. For this example we will call this module Foo Editor. And in the module we will place the following HTML code.

<form action="http://www.somedomain.com/post.php" method="post">
<table>
<tr>
<td>Add Remove Content:</td>
</tr>
<tr>
<td><textarea name="mod1"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Edit"></td>
</tr>
</table>
</form>

We will obviously want to change the form action location to point to our PHP script we just wrote. But once we create the module the user should be able to just simply login to the front end of the site and navigate to where the Foo Editor module is located, and copy some standard HTML code into the text area. After he clicks the Edit button he or she should be able to see the chages imediately.

Method 2 (IFRAMES)

This method is alot quicker and easier. It uses IFRAMES which means it may not work on some browsers that don’t support IFRAMES. The standard Joomla TinyMCE Editor restricts the use of IFRAMES so we will need to use an alternative editor. I usually just choose no editor when dealing with Joomla and that seems to work just fine. So what we do is open up our custom HTML module and add the IFRAME code to it as shown below.


<iframe src="http://www.somedomain.com/1.html"></iframe>

The above method can be used with PHP or HTML. However in the above I chose HTML. Now our client just needs to create a web page with standard HTML code and upload it to the server in the correct location and with the correct name as shown in the IFRAME. We can even use our PHP submission form to make it friendlier for our client.

Both methods should work on most Joomla websites as well as Word Press or standard HTML, PHP websites. Or almost any type of site CMS, Blogging System or anything else that supports customization with standard web languages. Below is working example in built into this word press blog.