Building Web Applications My Way

Web Development Tools

There’s a huge range of excellent tools available to developers to help them build their next big idea. Over the years, the tools I favour and the way in which I use them have had to be constantly updated. Some of this was due to improvements in technologies but more so it was because I’m always looking for the best way to build web applications.

Often the changes in my approach are borne from wanting more re-usable code. Sometimes it’s because it’s simply a more elegant way to do it, and other times I update my approach because I just want to learn. Here’s a quick look at how to build web applications my way:

Design

The first stage to creating the app is to get a good feel for what it will look like, and the best place to do that is in your favourite graphics package.

  1. Design the Dashboard/Homepage as a graphic.
  2. Use the new design to determine what parts need to be images and what can be styled as CSS.
  3. Cut and crop the necessary images.

Prototype

Before a database has been designed and before a single piece of programming code has been written, I always do a prototype. I code up the XHTML/CSS of how the app will look based on the design done in Photoshop. Even the parts that would normally be generated by the database are hard-coded into the page. This might sound like a fruitless task, but changing data fields or your application structure is far easier at this early stage.

To simplify the structure of the code and to help keep the PHP separate from the XHTML I use Smarty. It’s quick and easy to learn and makes development easier and maintainable.

  1. Setup a new instance of the Smarty Templating System.
  2. Create a template page and CSS file.
  3. Hard code everything into it including data that will eventually be dynamically driven.

Control

I’m a huge fan of the MVC approach to development but rather then use an existing framework, I tend to write my own as I need to. This gives me ultimate flexibility and freedom to create whatever I like. The ‘C’ in MVC stands for controller, and that’s what I create first. It forces me to think carefully about what the application really needs ‘underneath the hood’.

  1. Think about what the application needs to do.
  2. Write the controller as if all the classes and methods already existed.
  3. Output to the templates.

It’s About Class

Once the templates have been coded and the controllers have been fleshed out, I then go about writing the ‘engine’ behind the scenes. Doing it in reverse means that I have more flexibility during phases of the project where I need it the most.

  1. Write the main class to act as the application controller.
  2. Create a new class for each object within the application (such as a user, a report, a customer etc.).
  3. Re-use classes and plugins wherever possible.

Database Design

When I started out designing web applications I would always create the database first and work from there, but now I’m certain that doing it in reverse and building the it last is by far the better way. So, based on the needs for tables and fields which undoubtedly arose during the class creation stage, these can now be built into the database.

  1. Determine what tables and fields are required.
  2. Give plenty of thought to normalisation and keep redundancy to a minimum.
  3. Build the database. MySQL is my engine of choice.

Revisit the Prototype

Now that the structures are in place to populate the template with actual data, it’s time to create some template code that uses the variables assigned from the controller. The syntax of Smarty’s template code is very straightforward and anyone with knowledge of a C based programming language will pick it up very quickly.

  1. Assign the necessary variables to the templates.
  2. Remove the hard-coded temporary data.
  3. Write some template code to output the information.

Technologies

There are loads of different options when creating web applications, here’s a list of the tools and technologies I use:

Tools

Technologies

  • Server Side Scripting: PHP
  • Template Engine: Smarty
  • Javascript Framework: jQuery (great for Ajax and UI widgets etc.)
  • Client-Server Communications: JSON
  • Plugins: PEAR
  • Database Engine: MySQL

Summary

So, that’s about it. Obviously this is an extremely high level overview, but I’d be very interested in hearing how other people go about creating their web applications. Go on, leave a comment!

Sorry, comments for this entry are closed at this time.