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

DEDICATION

ACKNOWLEDGEMENT

ABSTRACT

ABSTRAK

TABLE OF CONTENTS

LIST OF TABLES

LIST OF FIGURES

LIST OF ABBREVIATION

LIST OF APPENDICES

ii

iii

iv

v

vi

vii

x

xi

xii

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