An 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 http://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.
- HTML editor
- HTML code inspector
- CSS editor
- PHP editor
- PHP debugger
- 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
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.
The portability feature is something I really like. You can install everything on a thumb drive and take it with you.
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
- File and Access Pane
- Editing Window
- View panel (can be split between code and html view. Toggles to editor)
- Message and results window
- Help Index
The interface has a
- File Menu
- Debugging Toolbar
- 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.
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.
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
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)
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
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.
Areas for improvement
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.
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.
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.
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.
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.
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.