From Database Table to Layout

One of my current projects is learning how to write a good web application. For the past week or so, I’ve been focused on the back-end (i.e. the server and database programming), but now I’m at the point where it’s time to think of the front end.

Although I make fun of apps that use designs driven by their database schema, it’s not a bad place to start. Here’s a simplified dump of the TASK table:

Table wp_second_tasks
id               mediumint(8) unsigned PK
user_id          mediumint(8) unsigned
task_desc_id     mediumint(8) unsigned
task_name        char(255)
task_detail_id   mediumint(8) unsigned
task_progress    enum('idea','spec','plan',...)
task_priority    enum('immediate','shortwindow',...)
task_status      enum('queued','active','bumped',...)
task_terminus    enum('cancelled','nomoreneed',...)
task_followup    enum('rjnonfunction','rjnotspec',...)

Table wp_second_task_details
id               mediumint(8) unsigned PK
deliverable      char(255)
description      char(255)
action           char(255)

The goal is to get this information into a simple layout that will function well interactively. The first and most tedious step is just getting the information all into a form where you can play around with it. I pulled up Illustrator and just laid stuff out, imagining the kind of interaction I needed as I went.

"Initial Layout" This should be enough for me to just cobble together a fragment of HTML+CSS to start using in my code. I have a lot to learn about jQuery and jQueryUI to make this do what I want, so keeping simple for now will be helpful.