W O O R K . B L O G S P O T .

C O M

THE

Woork
PAPER N.1
Structured process you must know
to develop a web application

Version 1 - 10 January 2009

About this paper
This paper is a practical guide which helps
you to follow a methodic approach in order
to develop a web application.

You can read the original post here:

http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html

Antonio Lupetti

____________

My Blog: http://woork.blogspot.com
My Facebook profile: http://www.facebook.com/profile.php?id=709734006
Email: antonio.lupetti@gmail.com
1. Structured process you must
know to develop a web
application

Developing a web application it's a hard work

which requires much time you have to spend
doing a myriad of things.
If you don't use a methodic approach,
especially in case of a complex project, you run
the risk of losing sight of the project, not
respecting times of delivery and wast your time
for nothing.

1.1. Introduction

In a generic web application *"-.$/"0"&)#'

developing process you can 1"2&$34&'
identify five main phases:
7+,&&$&%',&1'84&$)4/$&%'

!"#$%&'
1. Requirements definition
2. Design 506+"0"&),34&'
3. Implementation
4. Test
("#)'
5. Release

Planning and Monitoring is a *"+",#"'

cross phase which follows
developing process defining a
project plan composed from a list of activities which you have
to monitor during project execution. For each activity you have
 Structured process you must know to develop a web application

to define a set of information useful for its monitoring, for

example:

- owner
- duration
- costs
- ...

Take a look at these posts I wrote some time ago about how to
implement a project plan with a Gantt chart using Excel or
Google Spreadsheets:

• How to organize a project plan:

http://woork.blogspot.com/2007/11/project-management-organize-project.html

• Excel Gantt chart template:

http://woork.blogspot.com/2008/02/project-management-excel-gantt-chart.html

• Implement a project plan with Google Spreadsheets:

http://woork.blogspot.com/2007/11/using-google-spreadsheets-to-implement.html

1.2. Requirements Definition

In this first phase you have to define the scope and needs of
your web application in terms of what your application must do,
main features and technical requirements:

*"-.$/"0"&)#' 5647"' •!/$'.)01,*)'22(&#'31%)-,4.)51)

1"2&$34&'
8""1#' •!!"#$%&#'()*"+,&*"-"%.)
!"#$%&'

907+"0"&),34&'

("#)'

*"+",#"'

4
 THE WOORK PAPER N1

Scope
In order to define the scope of your web application is sufficient
to compile a detailed list with a clear description of application
features. At the moment is not important "how" you'll realize
them but "what" you have to realize!

Needs
Needs analysis is a crucial part of developing process. In this
step you have to estimate your potential traffic, choose a server-
side language (PHP, ASP, Coldfusion...), database, choose an
hosting service... Place a big attention on not to overrate/
underrate your estimates! Evaluate every thing with a right
balance between times, costs and objectives!

1.3. Design

After “Requirements definition” phase, you have to design your

application with a clear project. In this phase you can identify
the following steps:

*"-.$/"0"&)#'
1"2&$34&'
566+$7,34&'
!"#$%&' 8,6'
•!7/88%$9:%6'8#/$"45$&,#0%6&
!,),C,#"' ;!"#$%&'(")*+#,!%&'(*%$"-./&0+1&<&
D06+"0"&),34&'
=,%"'9)/.7)./"' •!=0%/81>&,'4/&$%?8#/$&#1&5'@%$&

("#)'
9"/:"/;#$1"' •!A%$4@/&?6'$$%$&;2#3%4!(2*+%/!%5(
<,&%.,%"' 1*.6*"77+/6<&

*"+",#"' >9'?/,0"@4/A' •!!"##$%&'&()&*+',%-#+.&'/0&

B",)./"#' 1%'23+%$&2#&4,56%,%/2&

Application Map
An application map contains just meaningful and essential
information about the structure of your application: pages
 Structured process you must know to develop a web application

(represented with some blocks) and main relationships between

them. Your application map could be something like this:

!"#$%&'(')

1$2$3)4)
!"#$%&'()$*+,( -*.()$*+,(

*!+"!"&'(') *!+",'&'(') -./,0&'(')

1$2$3)5)

'6/73$&'(')

-**/(01()2/30*(/303,(
8/#!9:&'(')

4//(3&5(&*.$,(
-##;"$<*&'(')

In this way you have a map with some "locations" (pages) and a
"path" (relationships between pages) which you simply have to
follow in order to proceed, page-by-page, to implement your
application in the next phase. In this way you'll save a lot of
time, having clear in mind what you have to implement.

Database
Ok, now it's time to design application database. A simple way
to do that it's using a entities-relationships (ER) model. In
general you can follow this order: define first tables, than
attributes and relationships between tables. Your ER model will
be like this:

!"#$% &#'(% )*!+%

343) 343)
!"#$%&'%($) 1#,.%&'%($) -&!2%&'%($)
!"#$%*"+,) 1#,.%*"+,) -&!2%*"+,)
!"#$%',#-.&(/0*) 1#,.%&'%-&!2)
!"#$%&'%1#,.)

6
 THE WOORK PAPER N1

1:1 expresses the cardinality of a relationship (in this case for

example 1 user is assigned only to 1 task, 1 user live only in a
city). For more information about this topic take a look at my
old posts:

• Define the entities-relationships model

http://woork.blogspot.com/2007/10/project-database-define-relationships.html

• A correct approach to define relationships between database

tables
http://woork.blogspot.com/2007/10/project-database-define-relationships.html

• 10 Useful articles about Database design

http://woork.blogspot.com/2008/09/10-useful-articles-about-database.html

Page Structure
Next step is to design an
!"#$%#&'
approximate structure of the
page, identifying all main !*$1/$&'
sections using a name (for
example #header, #navbar,
#mainContent, #sidebar). !($)*+,*-#*-' !.)%#/$&'

Server-side Language
Taking a mind an object- !0,,-#&'

oriented approach for

developing your application,
you can defining classes, functions and all server-side features
you need. Remember... that's not the "implementation" but a
way to have a "guide" for that you'll implement in the next
phase.

JS Framework
In this step choose a JavaScript Framework (jQuery,
Scriptaculous, MooTools...), than pass to identify the main
features you want to implement (drag and drop, animation
 Structured process you must know to develop a web application

effects...) compiling a simple list which associates each specific

feature to one or more pages identified in you application map.

A this point design phase is completed. Let's start with

implementation!

1.4. Design

Ok.. now starts the real challenge because "implementation" is

the realization of your application. You can divide this phase in
the following steps:

*"-.$/"0"&)#'
1"2&$34&'

!"#$%&'

@0>+"0"&),34&' !,),?,#"' •!)B8%7/'-%

5(67' •!5#6-%42+3723+-%%
("#)'
;88' •!5#6-%8#9/32%
*"+",#"'
8"/9"/:#$1"' •!:;#44-4<%13&7=/&4<%>?%
7,&%.,%"' @&2-+#7=/&4A%

<,9,8=/$>)' •!!"#$%#&'%()%*+#,-./+0%1-#23+-4%

Implementation: Database
Create a new database and write SQL code defining tables,
attributes and relationships. In the past I dedicated some posts
about this topic. Take a look at the following links for more
information:

• How to use PHP and SQL to create DB tables and relationships

http://woork.blogspot.com/2007/10/project-database-define-relationships.html

• Create tables and relationships with SQL

http://woork.blogspot.com/2007/10/project-database-define-relationships.html

8
 THE WOORK PAPER N1

HTML
Use the page structure you defined in Design phase to
implement HTML code:

<div id="header"> </div>

<div id="navbar"> </div>
<div id="mainContent"> </div>
<div id="sidebar"> </div>
<div id="footer"> </div>

This is the moment to add all HTML elements you need in

sections identified during Design phase. For example if the
sections mainContent contains a post with a title, a text body
and post tags, add these elements:

<div id="header"> </div>

<div id="navbar"> </div>

<div id="mainContent">
<h1><!-- Post title --></h1>
<p><!-- Text body --></p>
<small><!-- Post tags --></small>
</div>

<div id="sidebar"> </div>

<div id="footer"> </div>

CSS
When the main structure is ready, start to write CSS code to add
styles to your application. If you need some suggestions about
how to write a better CSS code take a look at these posts:

• CSS coding: semantic approach in naming convention

hhttp://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html

• Useful guidelines to improve CSS coding and maintainability

http://woork.blogspot.com/2008/11/useful-guidelines-to-improve-css-coding.html
 Structured process you must know to develop a web application

Server-side language
Implement application class, application functions, DB
interactions, queries, and every thing requires a server-side
interaction.

JavaScript
Implement Ajax features (drag and drop, animation effects...)
using the framework you chose in Design phase (jQuery,
Scriptaculous, MooTools...).

1.5. Test

During this phase you have to "stress" your application

executing your code in various conditions (for example using
different browser). Your objective is to detect all application
bugs and fix them before the final release.

*"-.$/"0"&)#'
1"2&$34&'

!"#$%&'

:0;+"0"&),34&' ("#)'941"' •!!",)$2553"026',$78-9$

("#)' 5$6'7.%#' •!!"#$%&&'&$(')"*+",-$./%$0')%$

5$&,+'8,+$1,34&' •!123")2.%$(')"4%)$0')%$
*"+",#"'

Remember, this process must be methodic and require a lot of

patience! Test each page and each features (also in this case can
help you application map to proceed in a certain order). If you
find a bug during test esecution, fix it modifying the code and

10
 THE WOORK PAPER N1

than proceed with the final validation (an ulterior test) of the
code.

Release
Finally you are ready to release your application! Publish it in a
test folder and make a final test. If it's all ok proceed to the final
release.

That's all. I hope this post can halp all of you which asked to me
to add a post about this topic.
______________
★ ORIGINAL POST

http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html