iv
BINUS INTERNATIONAL UNIVERSITAS BINA NUSANTARA
Major Computer Science Sarjana Komputer Thesis Semester [Even] year 2007
AN INTEGRATED MOBILE WEB SOLUTION FOR GAYA HIDUP SEHAT TAB LOID:
PERFORMANCE AND USABILITY IMPROVEMENT OF THE PHP WEB APPLICATION
Maria Elizabeth (0700675431)
Abstract
The current website of tabloid Gaya Hidup Sehat, www.gayahiduponline.com, only has basic features, such as read articles, sign up for mailing lists, and vote for poll. One of the aims of our thesis in general is to upgrade the website by creating a mobile application for the website in order to make it more up to date along with the technology growth. With the new implemented technologies, hopefully, it can attract more readers who do not have time to read the articles in the tabloid or in the website. Moreover, in the web application point of view, we aim to improve the usability and performance of the current PHP by adding some new features, manage the navigation of the website, and changing the PHP into object oriented.
To develop the new web and mobile application, first, we must analyze the current systems in order to find the weakness of the current website. After that, we design the new system in order to help us in developing the new system without previous weaknesses. The methodology of software engineering that we use is rapid application development, since in our opinion it the most suitable methodology to develop this application, given the situation and requirements.
At last, after implementing what have planned before, the result of what we have developed will fulfill the user requirements, such as the improved website where the site navigation is fixed and new features are added, as well as the changing structured of PHP into object oriented.
Key words
PREFACE
I would like to gratitude all parties who have helped us so that we can finish this thesis on time and within scope. This thesis creates an integrated mobile web solution for the Gaya Hidup Sehat (GHS) tabloid. Furthermore, this thesis is created as a mandatory in order to be able to graduate from Bina Nusantara University and to gain Sarjana Komputer degree majoring in Computer Science.
The objective of the thesis is to apply what I have learned during our study in Bina Nusantara University. I also would like to thank to several persons who have, directly or indirectly, help us to finish this thesis:
1. Mr Tri Asih Budiono, MIT, my supervisor, who gives the idea about how to finish this thesis in a good way and gives feedback and opinion regarding our thesis.
2. Mr Raymondus Kosala, Phd, my co-supervisor, who also helps in solving the problems I face within development period and giving useful ideas.
3. Mr. Puri, the IT manager of GHS, who allows me to create this thesis within GHS and always gives opinion and requirements within development phase.
4. Friends, who have helped directly or indirectly throughout this thesis
vi
In conclusion, I hope that our thesis could be an example of development in information technology as the implementation of what we have studied in this campus.
Jakarta, July 2007
TABLE OF CONTENT
Abstract ... iv
Preface ... v
Table of Content ...vii
List of Figures ... xi
List of Tables...xiii
Chapter 1 Introduction ...1
1.1 Background ...1
1.2 Perceived Problem...2
1.3 Proposed Solution ...3
1.4 Scope ...4
1.5 Aim and Benefits...7
1.4 Structure ...8
Chapter 2 Theoretical Foundation...10
2.1 Basic Knowledge ...10
2.1.1 Internet ...10
2.1.2 World Wide Web (WWW) ...11
2.1.3 Web Browser ...11
2.1.4 Hypertext Markup Language (HTML) ...11
2.1.5 Hypertext Transfer Protocol (HTTP) ...12
2.2 Web Application ...12
2.2.1 Web page ...12
viii
2.2.1.2 Dynamic Page ...13
2.2.2 Web Server ...13
2.3 PHP (Hypertext Preprocessor) Scripting Language...13
2.3.1 Object Oriented Programming (OOP) Language...15
2.4 Database System ...16
2.4.1 SQL ...18
2.4.2 MySQL...18
2.4.3 Stored Procedure ...19
2.5 Application Development Methodology / System Development Process ...20
2.5.1 Rapid Application Development (RAD)...20
2.5.1.1 Testing...25
2.6 Data Modeling...25
2.6.1 Logical Model ...25
2.6.2 Entity Relationship Diagram (ERD) ...25
2.7 Process Modeling ...26
2.7.1 Data Flow Diagram...26
2.7.2 Context Diagram ...27
2.7.3 System Flowchart ...27
2.8 Use Case Analysis ...27
Chapter 3 Problem Analysis...29
3.1 Company History ...29
3.2 Company Organizational Structure ...30
ix
3.4 Data Flow Diagram...32
3.5 Existing Problems ...34
3.6 Alternative Solutions for the Problems ...35
Chapter 4 Proposed Design Solution ...36
4.1 The Proposed Policy and Procedures...36
4.2 Data Flow Diagram...37
4.2.1 Context Diagram Level 0 ...37
4.2.2 Detailed Data Flow Diagram Level 1 ...38
4.2.3 Detailed Data Flow Diagram Level 2 ...39
4.2.3 System Flowchart ...46
4.3 System Data...47
4.3.1 Data Dictionary Data (Data Flow, Data Storage) ...47
4.3.2 Data Normalization...50
4.3.4 Entity Relationship Diagram...51
4.3.3 File Specification...54
4.4 User Interface Design...86
4.4.1 Menu Structure ...86
4.4.1.1 Internal Menu Structure ...86
4.4.1.2 External Menu Structure ...92
4.4.2 External User Interface Design ...94
4.4.3 Internal User Interface Design ...95
4.5 Use Case Diagram...96
4.5.2 Activity Diagram...99
x
4.5.4 Sequence Diagram...105
Chapter 5 System Implementation...108
5.1 System Specification...108
5.2 Operational Procedures ...109
5.3 Implementation Strategy ...110
5.4 Test Plan...116
5.5 Integration Testing ...119
Chapter 6 Discussion...121
6.1 Evaluation...121
6.2 The Benefits of Object Oriented PHP ...122
6.3 Analysis of Object Oriented Implementation...123
6.4 Testing...124
6.5 Difficulties in Developing Web Application ...127
Chapter 7 Conclusion and Recommendation...128
7.1 Conclusion...128
7.2 Recommendation...129
References ...130
Appendices...135
Appendix A. Use Case Narrative ...135
xi
LIST OF FIGURES
Figure 2. 1 RAD Model – software engineering [9] ...22
Figure 3. 1 Kelompok Kompas Gramedia Structure 30 Figure 3. 2 Gaya Hidup Sehat Organization Structure...31
Figure 3. 3 Context Diagram...32
Figure 3. 4 Data Flow Diagram Level 1...33
Figure 3. 5 GHS System Flowchart ...34
Figure 4. 1 Context Diagram for Proposed Web Application 37 Figure 4. 2 DFD level 1...39
Figure 4. 3 DFD level 2 - articles...41
Figure 4. 4 DFD level 2 - user login and register...42
Figure 4. 5 DFD level 2 - update profiles ...43
Figure 4. 6 DFD level 2 – poll ...44
Figure 4. 7 DFD level 2 - file ...44
Figure 4. 8 DFD level 2 - iklan baris ...46
Figure 4. 9 DFD level 2 – catalog...46
Figure 4. 10 System Flowchart ...47
Figure 4. 11 ERD (part 1)...51
Figure 4. 12 ERD (part 2)...52
Figure 4. 13 ERD parts 3...53
Figure 4. 14 External menu structure (users) ...92
xii
Figure 4. 16 Internal user interface design...95
Figure 4. 17 use case registered user...96
Figure 4. 18 use case admin modules details ...97
Figure 4. 19 use case admin ...98
Figure 4. 20 Activity diagram admin beranda...99
Figure 4. 21 Activity diagram admin search...100
Figure 4. 22 Activity diagram - user login and register ...101
Figure 4. 23 Class diagram (I)...102
Figure 4. 24 Class diagram PHP (II)...103
Figure 4. 25 Sequence diagram - admin...105
Figure 4. 26 Sequence diagram - user register...106
Figure 4. 27 Sequence diagram - registered users...107
Figure 6. 1 User friendly layouts 125 Figure 6. 2 Difficulties of access the content ...125
Figure 6. 3 User satisfaction...126
LIST OF TABLES
Table 4. 1 Database List of Tables ...54
Table 4. 3 author Attributes Table ...56
Table 4. 4 banner Attributes Table ...57
Table 4. 5 banner_Edit Attributes Table ...58
Table 4. 6 bannerclient Attributes Table ...58
Table 4. 7 bannerclient_edit Attributes Table ...59
Table 4. 8 Counter Attributes Table ...59
Table 4. 9 download Attributes Table ...60
Table 4. 10 lblocks Attributes Table ...60
Table 4. 11 lblocks_edit Attributes Table ...61
Table 4. 12 mod_about Attributes Table...61
Table 4. 13 mod__about_edit Attributes Table...62
Table 4. 14 mod_content Attributes Table...63
Table 4. 15 mod_content_edit Attributes Table...64
Table 4. 16 mod_iklanbaris Attributes Table...64
Table 4. 17 mod_iklanbaris_edit Attributes Table...65
Table 4. 18 mod_iklanbaris_categories Attributes Table ...66
Table 4. 19 mod_iklanbaris_categories_edit Attributes Table ...66
Table 4. 20 mod_informasi Attributes Table ...67
Table 4. 21 mod_informasi_edit Attributes Table ...68
xiv
Table 4. 23 mod_informasi_type_edit Attributes Table ...69
Table 4. 24 mod_katalog Attributes Table...70
Table 4. 25 mod_katalog _edit Attributes Table...71
Table 4. 26 mod_katalog_categories Attributes Table ...70
Table 4. 27 mod_katalog _categories_edit Attributes Table ...72
Table 4. 28 mod_katalog _katakate Attributes Table ...71
Table 4. 29 mod_katalog _related Attributes Table ...72
Table 4. 30 mod_katalog _related_edit Attributes Table ...73
Table 4. 31 mod_katalog _validate Attributes Table ...73
Table 4. 32 mod_katalog _validate_edit Attributes Table ...74
Table 4. 33 mod_poll_comments Attributes Table ...75
Table 4. 34 mod_poll_data Attributes Table...75
Table 4. 35 mod_poll_data_edit Attributes Table...76
Table 4. 36 mod_poll_flag Attributes Table ...76
Table 4. 37 mod_publisher Attributes Table...77
Table 4. 38 mod_publisher_edit Attributes Table...78
Table 4. 39 mod_publisher_categories Attributes Table ...78
Table 4. 40 mod_publisher_categories_edit Attributes Table ...79
Table 4. 41 mod_publisher_frontpage Attributes Table ...79
Table 4. 42 mod_publisher_frontpage_edit Attributes Table ...80
Table 4. 43 mod_publisher_topik Attributes Table ...80
Table 4. 44 modules Attributes Table ...81
xv
Table 4. 46 new_referer Attributes Table ...82
Table 4. 47 new_referer_edit Attributes Table ...83
Table 4. 48 rblocks Attributes Table ...83
Table 4. 49 rblocks_edit Attributes Table ...84
Table 4. 50 user_menu Attributes Table ...84
Table 4. 51 user Attributes Table ...85
Table 4. 52 users_edit Attributes Table ...86
Table 5. 1 User registration test plan ………...116
Table 5. 2 User login test plan...117
Table 5. 3 Ed it user profile test plan ...118
Table 5. 4 User upload articles test plan ...118
Table 5. 5 User download article test plan...118
Table 5. 6 User subscribe for tabloids test plan ...119
Table 5. 7 Admin upload article test case ...119
Table A- 1 Admin Create Left/Right Block ………...135
Table A- 2 Admin add banner ...136
Table A- 3 Admin add new client for banner...137
Table A- 4 Admin edit banner...138
Table A- 5 Admin delete banner...139
Table A- 6 Admin show referrers sort by total hits...140
Table A- 7 Admin show referrers sort by URL ...141
Table A- 8 Admin show referrers sort by Last On...142
Table A- 9 Admin show referrers sort by the number of filters...143
xvi
Table A- 11 Admin add new user ...145
Table A- 12 Admin search user...146
Table A- 13 Admin edit user ...146
Table A- 14 Admin delete user ...147
Table A- 15 Admin sort user by: UID | Uname | Name | Email | Reg | Last...148
Table A- 16 Admin add new Admin ...149
Table A- 17 Admin Modify Admin ...150
Table A- 18 Admin Delete Admin ...151
Table A- 19 Admin add item in beranda ...152
Table A- 20 Admin edit item in beranda...154
Table A- 21 Delete item in beranda ...155
Table A- 22 Change status of menu – on/off in beranda ...156
Table A- 23 Add article...157
Table A- 24 Add poll ...158
Table A- 25 Web User Registration Use Case Narrative ...159
Table A- 26 User Login Use Case Narrative ...160
Table A- 27 Edit User Profile Use Case Narrative ...161
Table A- 28 Upload article by Registered User Use Case Narrative ...163
Table A- 29 Download article by Registered User Use Case Narrative ...164
Table A- 30 Subscribe for Tabloids Use Case Narrative ...165
Table A- 31 Add Iklan baris for Tabloids Use Case Narrative ...166
Table A- 32 Add catalog Use Case Narrative ...167
Table A- 33 Search catalog Use Case Narrative ...169
xvii
