Task List Project

A case study in the development of a simple Task management (web) application, charting the iterative development process, tools and techniques.

The purpose of this development was not to achieve an operational product but to develop technical skills and increase exposure to new techniques. The process of construction would take a step-by-step approach, breaking the development into four distinct activities.

Before reading further, this article does not explain any of the technologies used. If you are unfamiliar with HTML5, CSS, JavaScript, PHP, MySQL or PostgreSQL, I suggest you delay reading this article and go a find out more on this topics. A good source of information regarding the client-side technologies (HTML, CSS and JS) can be found at W3Schools. For server-side components I suggest you look at the PHP, MySQL and PostgreSQL web sites. All JavaScript is Vanilla so please don’t expect (or complain about the lack of) JQuery (as good as it is).


The application under development was influenced by the Trello on-line task management facility, but much reduced. Tasks would initially reside within a single list for a single user. The provision of multiple lists and support of multiple users, along with many other features, were out of scope of this phase but candidate for a future phase. Each task would be a simple line of text, no date, or flags can will be stored in a single table.

The construction of the application would begin as a non-persistent client-side facility and evolve into a full single-page-application (SPA) supported by a relational database. The back-end (server-side) technology would employ PHP (without third-party libraries) that interfaced with a MySQL database (potentially evolving to PostgreSQL).

We built the application on Windows (7 professional) using its own web-server (IIS 7.5) and used SCOUT, PHPMyAdmin and Aptana to aid development. The application was subsequently move to its operating environment that was based on Ubuntu Linux with an Apache HTTPd web server.

Development stages

There will be four stages of development (Sprints 1, 2a, 2b and 3) as follows.

  • Sprint 1: A very basic HTML page with some simple CSS and JavaScript effect dynamic behaviour.
  • Sprint 2a: Conversion to a PHP page using the olde Form Submission technique to store the to do list in a MySQL database.
  • Sprint 2b: Enhancement of the Sprint-1 edition to use HTML5 Local Storage based on JSON and use of a form of MVC pattern.
  • Sprint 3: Collation of Sprints 2a and 2b to form of a PHP page that uses AJAX (AJAJ) to communicate with the server.

 Product Back-log

The following features are proposed for further development of the application (in no particular order). In between Sprint 3 and any future sprint, the application will be established on the Ubuntu-based server and confirm client-server communication.

  •  Integrate the Task Details panel so it appears within the list when editing an existing Task – Issues include:
    • Deciding between including a copy of the Task Details panel within each Task LI (costly in terms of HTML but simplifies the JavaScript), programmatically moving the Task Details panel about between Task LI’s (efficient in terms of HTML but more complicated JavaScript), or injecting and removing new HTML inside the subject LI (again good for HTML, complicated for JavaScript -although it is little more than what is already done add a new Task to the list).
    • Also, hide the Task list when showing the Task Details panel to add a new Task. This would prevent the switch from Add to Edit mode through the selection of an existing Task after pressing the Add button.
    • A theme would be required to aid presentation and make the alignment between the subject LI and the Task panel more distinct.
  • Migration from a MySQL database to a PostgreSQL.
  • Provision of multiple lists.
  • Support for multiple users.
    • No sharing of lists (that’s another User Story) but supporting User Authentication and List partitioning (protection).
  • Sharing of lists in both Read-Only and Read-Write modes, controlled by the List Owner.
    • Potential integration of Email.
  • Application of a product theme (styling).
  • Improved user accessibility:
    • Tab sequence enhancement.
    • Access Keys.
  • And many more.

That’s All Folks! Thanks for reading.

Please ask questions, or provide feedback by posting a comment below.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s