Start a FREE 7 day trial! Get training videos and books, plus expert support:  

Coding Tutorials and Blog Posts

Using CodeLobster for a Joomla, WordPress or Drupal IDE

CodeLobsterAn IDE is a wonderful tool for coders. IDE stands for Integrated development environment. It's an environment on your computer that has your web server and all possible editing tools in one place.

In this tutorial we'll introduce you to CodeLobster, an IDE with plugins to support Joomla, Drupal and WordPress development.

Why use an IDE?

An IDE normally consists of:

  • a source code editor
  • a compiler and/or an interpreter
  • build automation tools
  • a debugger

This should mean that the programmer has to do less mode switching between discrete development programs, browsers and debuggers. However, because an IDE is a complicated piece of software by its very nature, this higher productivity only occurs after a lengthy learning process. CodeLobster has all these features, and a few more.

Everything you need to work on a site is in one single program, including, for example, a substitute for phpMyAdmin, context help that links directly to major online manuals, FTP capabilities for uploading, and portability for taking your work with you wherever you go.

This can be a very useful tool, possibly replacing Dreamweaver and other popular tools for people who do a lot of open source work. It's still a little buggy, but it has a lot of valuable utility at the same time.

Two Codelobster versions - Free and Professional

You can dowload both version of CodeLobster from https://codelobster.com.

The free version has everything a skilled developer would need. A student trying to learn from the ground up would find this a welcome environment as well. But the features that I found most valuable were in the Professional Version. In particular the Joomla plugin, Drupal plugin, and WordPress plugin which make installation of each of these platforms on your development machine a very simple process and great time saver.

You will get to try these plug-ins for 30 days with the free version to see if you like them. The trial period resets after installation of new versions.

Free version

  • HTML editor
  • HTML code inspector
  • CSS editor
  • JavaScript editor
  • PHP editor
  • PHP debugger

Professional version

  • CakePHP plug-in
  • CodeIgniter plug-in
  • Drupal plug-in
  • Facebook plug-in
  • JQuery plug-in
  • Joomla plug-in
  • Smarty plug-in
  • Symfony plug-in
  • WordPress plug-in
  • Yii plug-in
  • SQL manager

Installation

tutuploadsInstallation_68fe5c6ed098a3eb342bdca839cf163a.png

After you download it, you click the .exe file like you would for any Windows program and go through the install wizard. You can choose to install support for all file types or just the ones you want to work with. Codelobster seems to cover the gamut of everything you would normally need to edit or write to create Joomla, Drupal and WordPress sites.

tutuploadsmedia_1321896405523.png

The portability feature is something I really like. You can install everything on a thumb drive and take it with you.

tutuploadsmedia_1321896500964.png

You can test drive the modules for 30 days to see if you need them. The Joomla, WordPress and Drupal ones are the only ones I tested. They automatically download a new version from the web, and install it on your local computer. I had no problem installing WordPress with the wizard. I did have a problem with Joomla in that I had to create a data base first or it wouldn't install. Database creation with WordPress was automatic.

One thing that was very convenient is that it automatically detected my XAMPP installation, so I didn't have to adjust the paths to PHP after installation.

The Interface: Controls and Menus

tutuploadsStep_2._The_interface_-_Controls_and_menus.png
  1. Toolbars
  2. File and Access Pane
  3. Editing Window
  4. View panel (can be split between code and html view. Toggles to editor)
  5. Message and results window
  6. Help Index
tutuploadsStep_2_eb59b9b77d8538164ddd006e077a6a33.png

The interface has a

  1. File Menu
  2. Toolbar
  3. Debugging Toolbar
  4. HTML/scripting Toolbar

The controls are readily available. Everything is in a compact area. I did not see how to customize these toolbars but since I've been using this over the past week, I haven't had to search too much for what I wanted. There has been no need to customize them so far.

tutuploadsmedia_1322599784208.png

Tabs at the bottom if each window pane take you quickly to the view you want. The Explorer tab is helpful. You don't need to leave the IDE to search for files. You can view your computer, files, classes, projects, and Drupal modules, plus access your mySQL database all from one screen.

tutuploadsmedia_1322600076455.png

When you are working on a project, you get an additional control bar for switching the view. Preview automatically shows the results, of your coding, so it's very convenient and saves you a lot switching in and out of browsers.

 

The Joomla, Drupal and WordPress Plugins

tutuploadsThe_best_parts_-_the_plugins.png

What was really impressive about this was the plugins available for specific programs. I was able to install a Joomla and WordPress site with a few clicks and a quick wizard. Since I hadn't worked on a Joomla site for a while I didn't have the latest installation on my computer, I was pleased that the plugin actually goes to the web and downloads the latest version, saving me the trouble of doing that.

The choices are great too. This is not just for web site builders. If you are programming a module or component, wizards are available to streamline the task.

The context sensitive help was great too. No need to open a browser and go to google and search for some instructions regarding a tag or style. Just hit F1 and it does the looking for you.

Joomla CMS Joomla plug-in has the following abilities:

  • Ability to create project automatically installing Joomla CMS
  • Ability to create new modules and components
  • Joomla autocomplete
  • Context and Dynamic help
  • Joomla Template Preview (Theme Editor)
tutuploadsmedia_1322609753439.png

Drupal plug-in has the following abilities:

  • Ability to create project automatically installing CMS Drupal
  • Autocomplete, help and tooltips for module's hooks
  • Autocomplete and tooltips for Drupal's function theme
  • Autocomplete for Drupal's forms
  • Drupal search - for menu path and menu function
  • Wizard for creating new modules
  • Help on Drupal API
tutuploadsmedia_1322609849387.png

For working with WordPress blogging platform WordPress plug-in has the following abilities:

  • Ability to install WordPress blogging platform
  • WordPress autocomplete
  • Context and Dynamic help
  • WordPress Template Preview (Theme Editor)

As you can see in the images above, there are plugins for quite a few popular systems. All of these speed you on your way to development.

  • CakePHP
  • Codeigniter
  • Facebook
  • JQuery
  • Smarty
  • Symfony
  • Yii

 

Areas for improvement

tutuploadsBugs_and_other_things_that_could_use_improvement.png

The HTML Code Inspector makes it simple to find HTML elements and its styles buried deep in the page. It's very similar to using FireBug, saving you a trip to Firefox to search out css.

You may find elements with the mouse. As you move around the page, whatever is beneath your mouse will be instantly revealed within HTML/CSS Code Inspector, showing you its HTML code and corresponded styles.

tutuploadsmedia_1322603474378.png

This is what I got when I tried to view the index.php file for Joomla using the inspector. The editing feature did not work as expected, and I couldn't find any documentation to help me figure out what, if anything, is wrong. There is no preview, and there is no access to any css files and mousing over things doesn't do anything.

tutuploadsmedia_1322603929272.png

The preview pane by itself did work, but the preview should have also been visible in the Inspector view above. I'm guessing there are still some bugs that need to be worked out. I found other inconsistencies in file viewing as I worked with this.

tutuploadsmedia_1322604451476.png

This is a view of the SQL pane that gives you access to mySQL and your actual tables, which are editable from here. Although I have two installations, Joomla and WordPress, you can't see the Joomla data base here. You do see the first WordPress database I created, even though I deleted it using phpMyAdmin, and completely wiped out the original WordPress directory.

I did not have any problem accessing the data base tables and editing them, so the basic function worked well. I am guessing that you can't see the Joomla data base because I created it using phpMyAdmin, and it's not registered with the program.

There seems to be a problem with paths and registrations in the program. For instance, sometimes the preview wouldn't work, sometimes it did and sometimes it would only work if I changed the URL to the index file.

tutuploadsWxtra.png

I could find some documentation on the plugins on codelobster.com, but it's mainly documentation concerning the plugins. There is a basic overview of all the features on the page. The help section in the program only had articles on the plugins, and none on the basic features or the program itself.

For example, I discovered this dropdown menu while looking at a Joomla file (above). I don't really know what it does, and there was no place to look it up that I could easily find.

The documentation for coding is supplied by the most popular sources on the internet. The program simply takes you to the internet page that has a reference to any tag or command you want to know about. That's really nice. A little confusing for beginners because that documentation often seems kind of cryptic. Experts will have no problem with it.

Conclusions

This is an ambitious bit of software. The developers have done an excellent job of combining all the tools you would need. The interface itself is very easy to use with convenient window panes and comprehensive navigation.

Particularly impressive is the collection of plugins that automate so much of the process of developing for Joomla, Drupal and WordPress. They go beyond just getting a website produced, to aiding you with module and component development as well.

As an IDE for specific platforms its very well thought out. Other IDE's are not as specific to the task and are often much more confusing to learn. While this one has a pretty steep learning curve for a beginner, someone who has intermediate to advanced skills will find it relatively simple.

It's a little buggy though, and not everything works every time and just as it should. The documentation could be expanded as well. To be fair, this is a newer program and these are things that look like they are going to be addressed if someone points them out. The developers website solicits bug reports and shows progress towards solving problems. That's encouraging.

Even with the bugs I found the program very useful and a good aid to development. It's does save you a lot of time by not needing to switch between special purpose programs. Having code reference material readily available saves you lots of research time. It does not function well as a WYSYWIG development tool, and will be more useful for coders.

 

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: