How to Build a Data Framework for Your HTML5 and CSS3 Site Template

By Andy Harris

You can usually assume that a large web project can be done in straight HTML5 and CSS3. That’s always a good starting point, but if your program needs data or interactivity, you probably have a data back end.

Most data-enabled sites fail because they weren’t planned properly.

The reason is almost always that the data normalization wasn’t incorporated into the plan early enough, and the other parts of the project inevitably depend on a well-planned data back end.

If you suspect your project will involve a database, you should follow these steps early in the process (during the early site-planning phase):

  1. Identify the true data problem to be solved.

    Data gets complicated in a hurry. Determine why exactly you need the data on the site. Keep the data as simple as you can, or else you’ll become overwhelmed.

  2. Identify data requirements in your site diagram.

    Find out where on the site diagram you’re getting data. Determine which data you’re retrieving and record this information on the site diagram.

  3. Create a third normal form ER diagram.

    Don’t bother building a database until you’re sure that you can create an ER diagram in third normal form.

  4. Implement the data structure.

    Create an SQL script that creates all the necessary data structures (including tables and views) and includes sample data. Implementing the design is easy after you’ve made it. (That seems to be a theme, doesn’t it?)

  5. Create PHP middleware.

    After the database is in place, you usually need PHP code to take requests, pass them to the database, and return the results. Most of the PHP code for the main site consists of simple queries from the database. If you can use AJAX or SSI, it simplifies the process because your PHP code doesn’t have to create entire pages — it simply creates snippets of code.

  6. Consider update capabilities.

    Usually, when you have a database, you need another part of the site to allow the client to update information. It’s often an administrative site with password access. An administrative site is much more complex than the main site because it requires the ability to add, edit, and update records.