IMPLEMENTING THROWAWAY PROTOTYPING

IN WEB DEVELOPMENT LIFE CYCLE

NAZREEN BIN ABDULLASIM

UNIVERSITI TEKNOLOGI MALAYSIA

 3

IMPLEMENTING THROWAWAY PROTOTYPING MODEL IN

WEB DEVELOPMENT LIFE CYCLE (WDLC)

NAZREEN BIN ABDULLASIM

A project report submitted in partial fulfillment of the

requirements for the award of the degree of
Master of Science
(Computer Science – Real Time Software Engineering)

Centre for Advanced Software Engineering

Faculty of Computer Science and Information System
Universiti Teknologi Malaysia

OCTOBER 2009
 5

To my beloved Mama and Yaya

Kakak, Abang Rostam, Abang Nazri, Kakak Nini,
Abang Atoi, Surya, Adik Lela, Moin
Udin, Sofeyah
Late Panda

Jazakumullah
 6

ACKNOWLEDGEMENT

All praise is to Allah azza wa jalla, as laid upon me always your grace and
mercy for giving me the greatest gift of all, the gift of Imaan. I am hoping and
praying that this project may benefit ummah as a whole and make me a better person
and vicegerent in this world.

I am very thankful to my academic mentor Mr. Ridzuan bin Ahmad for

his endless supports and advices. He had help and gave me privileges, which made
me under solace and content throughout the completion of this project. I also want to
give my appreciation to Mr. Saiful Adli for helping me and lending his valuable
expertise and experience where I cannot get it elsewhere. Regardless of their status,
they will always be good friends and teachers of mine and may Allah bless them
always.

To my best friend and mentor as well Mr. Faiz Bashir for his endless helps
and assistance from the very first day we’ve met until the day he departed to his
home country. I will always admire you and always be my source of inspiration to be
a good Muslim.

Last but not least, my appreciation to all people that had helped and inspired
me throughout this journey. Jazakumullahu khaira katheera
 7

ABSTRACT

The purpose of this study is to analyze the relationship between web

development life cycle (WDLC) and system development life cycle (SDLC). Even
though the two terms WDLC and SDLC are similar in a sense that both discuss about
development lifecycle but they have differences in term of its scope. From the term
WDLC itself has shows that it is focusing on website development meanwhile SDLC
is focusing on software at large. Website can be considered as a subset of software.
Therefore, the study is about analyzing how far WDLC relevancy compares to
SDLC. SDLC comprises of methodologies such as structured development, rapid
application development, and agile development. In each methodology comprises of
many SDLC models which complying with specific software development trends.
Hence by analyzing typical website development trends and characteristic will allows
to identify the suitable SDLC model. Introducing the model only will not sufficient if
there is no guideline of how to apply it. Therefore the study also covers the
implementation of the model with the web development processes.
 8

ABSTRAK

Objektif daripada kajian ini adalah untuk menganalisis hubungan antara

kitaran hidup pembangunan Web (WDLC) dan kitaran hidup pembangunan sistem
(SDLC). Walaupun kedua istilah SDLC WDLC dan mirip dalam erti bahawa
keduanya membahas tentang kitaran pembangunan tetapi mereka mempunyai
perbezaan dalam hal rinciannya. Dari istilah WDLC sendiri telah menunjukkan
bahawa ia fokus pada pengembangan laman web Sementara itu SDLC fokus pada
perisian pada umumnya. Website boleh dianggap sebagai sebahagian daripada
perisian. Oleh kerana itu, kajian ini adalah tentang menganalisis seberapa jauh
perkaitan WDLC berbanding dengan SDLC. SDLC terdiri daripada metodologi
pengembangan seperti berstruktur, pengembangan aplikasi yang cepat, dan
pembangunan tangkas. Dalam setiap metodologi SDLC terdiri daripada banyak
model-model yang sesuai dengan tren pembangunan perisian tertentu. Oleh kerana
itu dengan menganalisis tren pembangunan laman khas dan karakteristik akan
membolehkan anda mengenalpasti model SDLC yang berpadanan. Memperkenalkan
model sahaja tidak akan memadai jika tidak ada garis panduan tentang bagaimana
menerapkannya. Oleh kerana itu, kajian ini juga merangkumi pelaksanaan model
dengan proses pembangunan web.
 9

TABLE OF CONTENTS

CHAPTER TITLE PAGE

DECLARATION ii
DEDICATION iii
ACKNOWLEDGEMENT iv
ABSTRACT v
ABSTRAK vi
TABLE OF CONTENTS vii
LIST OF TABLES x
LIST OF FIGURES xi
LIST OF ABBREVIATION xii
LIST OF APPENDICES xiii

1 INTRODUCTION 1
1.0 Problem Background 1

2 SCOPES AND OBJECTIVES 3

2.0 Vision Statements 3
2.1 Project Objectives 3
2.2 Project Scopes 4
2.3 Project Plan 4

3 LITERATURE STUDY 5
3.0 Software Development Life Cycle (SDLC) 5
3.0.1 Planning 6
3.0.2 Analysis 7
3.0.3 Design 8
 10

3.0.4 Implementation 10
3.1 System Development Life Cycle Methodology 12
3.2 Website and its Characteristic 14
3.3 Web Development Life Cycle (WDLC) 16
3.3.1 Planning 18
3.3.2 Analysis 20
3.3.3 Design 21
3.3.4 Implementation 22
3.4 Considering Content Management System 24
3.4.1 Basic Features of Web CMS 26
3.4.2 Possible Downside of CMS 27
3.4.3 Choosing the Right CMS 28
3.5 Web Development Life Cycle Methodology 29

4 DISCUSSION 31
4.0 Introduction 31
4.1 Differences of SDLC and WDLC 33
4.2 WDLC as a subset of SDLC 37
4.3 Throwaway Prototyping Model for WDLC 40

5 IMPLEMENTATION 42
5.0 Introduction 42
5.1 Brief of the project 42
5.2 Project Development Process 43
5.2.1 Planning 47
5.2.2 Analysis 49
5.2.3 Design Prototype 51
5.2.4 Design 59
5.2.5 Implementation 63

6 CONCLUSION 67
6.0 WDLC relevancy toward website development 67
6.2 Future Study 68
 11

6.3 Conclusion 68

REFERENCES 70
Appendices A-B 73
 12

LIST OF TABLES

TABLE NO TITLE PAGE

3.1 WDLC web development phases 16

4.1 Comparison of SDLC and WDLC 33
4.2 Activity Comparison between SDLC and WDLC 34
4.3 Criterion Selection Factors in Structure
Methodologies 37
4.4 Criterion Selection Factors in Rapid Application
Development (RAD) 37
4.5 Criterion Selection Factors in Agile Methodologies 38
5.1 Activities in Throwaway Prototyping 44
5.2 Software and Tools for Web development 48
5.3 Technology for Web Development 49
5.4 Website Structure 52
 13

LIST OF FIGURES

FIGURES NO TITLE PAGE

3.1 Basic Phases in SDLC 5

3.2 Static Web Architecture 15
3.3 Dynamic Web Architecture 16
5.1 Throwaway Prototyping Model 44
5.2 Content Layout for the Website 51
5.3 First Prototype for Homepage 53
5.4 First Prototype for Content Page 54
5.5 Second Prototype for Homepage 55
5.6 Second Prototype for Content Page 56
5.7 Home section of each main section 57
5.8 Content page with home section of main content 58
5.9 Basic content page 58
5.10 Home Page 59
5.11 Examples of CSS file 60
5.12 Corresponding div tag for CSS 61
5.13 First story board 61
5.14 Second story board 62
5.15 Third story board 62
5.16 Fourth story board 63
5.17 Joomla Administration Page 64
5.18 HTML coding in the template 65
5.19 Example of content generated from Joomla tags 65
 14

LIST OF ABBREVIATION

ACM - Association for Computer Machinary

CASE - Computer Aided Software Engineering
CERN - European Organization for Nuclear Research
CMMI - Capability Maturity Model Integration
CMS - Content Management System
CS 3 - Creative Suite 3
CSS - Cascadding Stlye Sheets
DSDM - dynamic system development method
ERP - Enterprise Resource Planning
FTP - File Transfer Protocol
GIMP - GNU Image Manipulation Program
GUI - Ghraphical User Interface
HCI - Human Computer Interaction
HTML - Hyper Text Markup Language
IEEE - Institute of Electricals and Electronic Engineers
JAD - Joint Application Development
Lorum Ipsum - Text Filler or Dummy Text Content
MySQL - Simple Query Language
PHP - Personal Home Page / PHP :Hypertext Preprocessor
RAD - Rapid Application Development
RSS - Really Simple Syndication
SAP - System Analysis and Program Development
SDLC - Software Development Life Cycle
SEO - Search Engine Optimization
URL - Uniform Resource Locator
WCMS - Web Content Management System
WDLC - Web Development Life Cycle
 15

WWW - World Wide Web

WYSIWYG - What You See Is What You Get
XML - Extension Markup Language
XP - Extreme Programming
 16

LIST OF APPENDICES

APPENDIX TITLE PAGE

A Gantt Chart for Industrial Attachment II 73

B Pert Chart for Industrial Attachment II 75
 17

CHAPTER 1

INTRODUCTION

1.0 Problem Background

In today’s development, there is no a ground rule or guideline which we can

be followed in developing static website. Even though the process of the web
development has similarities with the process in conventional software development
life cycle (SDLC) model, still there is a need to have a well tailored or dedicated
approach for web development based on specific requirement.

The term of web development life cycle (WDLC) that is used by many web
developer can be misunderstood in term of its scope. Some of them understand
WDLC as a new model of SDLC. Some of them understand it as new methodologies
in WDLC. Moreover, some of them even understand it as a whole new study of
SDLC because of its general term of WDLC itself.

Despite of the issues, the idea behind WDLC is to design a specific approach
for web development especially for static web development. The approach may not
be a whole new model of SDLC but it may be a derivation of SDLC model that
implies with the typical process of web development life cycle.

The approach is based on the current technology and may be varies in the
future. As for today, the widely used of web content management system (CMS),
advanced web authoring tools that can ease the process of prototyping to
implementation phase are major contributing factors of why this approach is
introduce at the first place.
 18

Therefore, it is necessary to understand SDLC which includes the

methodologies and the models inside each of them. Moreover it is also important to
understand the website characteristic and its type such as static website and dynamic
website. Furthermore, understanding the latest and conventional development
process trends is also important as it will identifies the technologies involves in it.
Hence, the information will help to determine the appropriate model of SDLC and
therefore can be derived according to web development life cycle trends.
 17

CHAPTER 1

INTRODUCTION

1.0 Problem Background

In today’s development, there is no a ground rule or guideline which we can

be followed in developing static website. Even though the process of the web
development has similarities with the process in conventional software development
life cycle (SDLC) model, still there is a need to have a well tailored or dedicated
approach for web development based on specific requirement.

The term of web development life cycle (WDLC) that is used by many web
developer can be misunderstood in term of its scope. Some of them understand
WDLC as a new model of SDLC. Some of them understand it as new methodologies
in WDLC. Moreover, some of them even understand it as a whole new study of
SDLC because of its general term of WDLC itself.

Despite of the issues, the idea behind WDLC is to design a specific approach
for web development especially for static web development. The approach may not
be a whole new model of SDLC but it may be a derivation of SDLC model that
implies with the typical process of web development life cycle.

The approach is based on the current technology and may be varies in the
future. As for today, the widely used of web content management system (CMS),
advanced web authoring tools that can ease the process of prototyping to
implementation phase are major contributing factors of why this approach is
introduce at the first place.
 18

Therefore, it is necessary to understand SDLC which includes the

methodologies and the models inside each of them. Moreover it is also important to
understand the website characteristic and its type such as static website and dynamic
website. Furthermore, understanding the latest and conventional development
process trends is also important as it will identifies the technologies involves in it.
Hence, the information will help to determine the appropriate model of SDLC and
therefore can be derived according to web development life cycle trends.
 86

REFERENCES

1. Alan Dennis, Barbara Haley Wixom, Roberta M. Roth, System Analysis and
Design, Third edition, Wiley, 2005

2. Adobe Creative Suite 3 web Premium and Standard Workflow guide,

California, Adobe Press, 2007

3. Richard Quick, Web Design in easy steps, 4th edition, United Kingdom, In
Easy Step, 2008

4. Joomla for Dummies

5. Keri E. Pearlson, Carol F. Sanders, Managing and Using Information Systems

a strategic approach, third edition, Wiley Publisher, Danvers, 2006

6. Tay Vaughen, Multimedia: making it work, sixth edition, Illnoius, Mc Graw

Hill, 2004

7. Igor, Web Development Life Cycle (WDLC)

http://forum.abestweb.com/showthread.php?t=57774, 2005

8. AeroFX, Web Development Life Cycle (WDLC),

http://www.aerofx.net/blog/development/web-development-life-cycle-wdlc/,
2009

9. Benny Alexander, Macronimous Web Solutions, Website Development

Process –The Life Cycle Steps,
http://www.macronimous.com/resources/web_development_life_cycle.asp
 87

10. Andy, Andrew Sellick, Top 15 Free and Open Source Web Developer Tools
Updated, http://www.andrewsellick.com/34/top-15-free-and-open-source-
web-developer-tools-updated, 2007

11. MERT TOL, Web Development Life Cycle,

http://www.merttol.com/articles/web/web-site-development-life-cycle.html,
2009

12. Nik Chauhan, EZine Articles, Web Development Process – Development Life
Cycle, http://ezinearticles.com/?Web-Development-Process-Development-
Life-Cycle&id=344293, 2006

13. Website Architecture, http://en.wikipedia.org/wiki/Website_architecture,

2009

14. Web Content Management System,

http://en.wikipedia.org/wiki/Web_content_management_system, 2009

15. PHP, http://en.wikipedia.org/wiki/PHP, 2009

16. MySQL, http://en.wikipedia.org/wiki/MySQL, 2009

17. Jutta Treviranus, Charles McCathieNevile, Ian Jacobs, Jan Richards,

Authoring Tools Accessibility Guidelines 1.0,
http://www.w3.org/TR/2000/REC-ATAG10-20000203/, 2000

18. Human Factors International, Visual Design – Consulting and Production,

http://www.humanfactors.com/services/graphics.asp

19. Color Wheel, http://en.wikipedia.org/wiki/Color_wheel, 2009

20. Part Stanicek, Color Scheme Designer, http://colorschemedesigner.com/,

2009
 88

21. Joomla Documentation, Tutorial: Creating a basic Joomla! Template,

http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template, 2009