An Integrated Mobile Web Solution for Gaya Hidup Sehat Tabloid: Usability Improvement of The PHP Web Application - Binus e-Thesis

  

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

  PHP, MySQL, object oriented, performance, usability

  

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

  5. The lecturers who have given the knowledge throughout our study in Bina Nusantara

  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 Author

  

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

  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

  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

  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 Appendix B. Questionnaire ....................................................................................176

  

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

  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 Figure 6. 4 Sufficient features / functionalities..............................................................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

  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

  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

  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

  Table A- 35 Read article Use Case Narrative ................................................................171 Table A- 36 Show Pelatihan and Seminar Use Case Narrative .....................................173 Table A- 37 Search article Use Case Narrative ..............................................................174