WEB APPLICATION
DEVELOPMENT
Virajee Amarasinghe
ICBT KANDY CAMPUS it36
,Web Applications Development Individual
Acknowledgement
Hereby I wish to thank all those who help me to success this project. And my precious thank
goes to our lecturer, Mr. Gihan Herath, who helped and encouraged me to success this project.
And also I really appreciate the support given by my batch mates and my family members’ to
success my project. Finally I like to thank all the mentioned and non-mentioned well-wishers
who helped me to success this project.
1
IT36
,Web Applications Development Individual
Executive Summary
This report consists about website designed and developed for promoting One Direction
musical band.
First there will be an evaluation on similar websites considering their functions and advantages.
Second, comparison between client side scripting languages and also the comparison between
server-side scripting languages can be found.
For the third task, security concerns are briefly discussed and some security improvements for
the website are suggested.
Then there can be found some wireframes and explanation on functional requirements of the
website.
For the fifth task, synthesized client and server-side functionalities of proposed design are
briefly discussed.
Then ER diagram is provided. Comparison between similar websites considering the design
aspects are provided next. Some screenshots of code segments are provided as the evidence of
the work.
Then there is testing plan, testing methods and test cases. In here, test techniques that are carried
out to test the developed web solution are described.
After that, there will be a report of analyzing the feedback of questionnaires. Questionnaires
have been attached in Appendix section.
After that there will be a self-criticism report including honest assessment of the strengths and
weaknesses and future recommendations.
Detailed Gantt charts are provided with analyzing variations to show how effectively and
efficiently the project was managed.
Then there will be references and appendices at last.
User manual is provided as the format of video.
2
IT36
,Web Applications Development Individual
Table of Contents
Introduction ................................................................................................................................ 0
Executive Summary ................................................................................................................... 2
Table of Contents ....................................................................................................................... 3
Comparison on Websites ........................................................................................................... 9
Server Side and Client Side Scripting Languages ................................................................... 12
Server Side Scripting Languages ......................................................................................... 12
Comparison on Server-Side Scripting Languages ........................................................... 12
Client Side Scripting Languages .......................................................................................... 14
Comparison on Client-Side Scripting Languages ............................................................ 15
Web Security Concerns and Suggestions for Security Improvements for the Proposed Web
Application............................................................................................................................... 18
Relevant Legislation ............................................................................................................ 18
Prevention of Hacking ......................................................................................................... 18
Viruses ................................................................................................................................. 20
Identity Theft ....................................................................................................................... 20
Alternative authentication methods ..................................................................................... 21
Task 4 ....................................................................................................................................... 22
Wireframes ........................................................................................................................... 22
Home Page ....................................................................................................................... 22
Wireframe of Releases Web Page.................................................................................... 24
Wireframe of Events web page ........................................................................................ 25
Wireframe of One Direction Member web page ............................................................. 26
Wireframe of photo album web page................................................................................... 27
Wireframe of video web page .......................................................................................... 28
Wireframe of Managing Video web page ........................................................................ 29
3
IT36
,Web Applications Development Individual
Commercial web authoring tools and web stacks ................................................................ 33
What are web authoring tools? ........................................................................................ 33
What is web stack?........................................................................................................... 34
Client and server-side functionalities....................................................................................... 35
Client-side functionalities .................................................................................................... 35
Server-side functionalities ................................................................................................... 38
ER Diagram ............................................................................................................................. 43
Final tables ........................................................................................................................... 45
Task 7 ....................................................................................................................................... 46
Task 8 ....................................................................................................................................... 47
HTML .................................................................................................................................. 47
CSS ...................................................................................................................................... 47
PHP ...................................................................................................................................... 48
Java script............................................................................................................................. 48
JQuery .................................................................................................................................. 48
Task 10 ..................................................................................................................................... 50
Test plan ................................................................................................................................... 53
Main Functionalities to be tested ......................................................................................... 53
Main Pages ....................................................................................................................... 53
Login Page ....................................................................................................................... 53
Registration Page ............................................................................................................. 53
Member Panel .................................................................................................................. 53
One Direction Page .......................................................................................................... 54
Releases Page ................................................................................................................... 54
Events Page ...................................................................................................................... 54
Photos Page ...................................................................................................................... 54
Video Page ....................................................................................................................... 55
4
IT36
,Web Applications Development Individual
News Page ........................................................................................................................ 55
Store ................................................................................................................................. 55
Contact Page .................................................................................................................... 55
Admin Panel..................................................................................................................... 55
Validations ....................................................................................................................... 55
Common Functionalities for each main page .................................................................. 56
Design Aspects................................................................................................................. 56
Testing steps......................................................................................................................... 56
Cross Browser Testing ......................................................................................................... 56
Test Cases ................................................................................................................................ 59
Test Case Summary ............................................................................................................. 64
Questionnaire for Beta Testing ............................................................................................ 67
Conclusion and Future Recommendations .............................................................................. 70
Strengths of the Website ...................................................................................................... 70
Weaknesses of the website................................................................................................... 71
Future Recommendations .................................................................................................... 71
Analyzing Gantt charts ............................................................................................................ 73
Planned Gantt chart .............................................................................................................. 73
Actual Gantt chart ................................................................................................................ 73
References ................................................................................................................................ 74
Appendix .................................................................................................................................. 80
5
IT36
,Web Applications Development Individual
Table of Figures
Figure 1: wireframe-Home page .............................................................................................. 23
Figure 2: Wireframe of Releases web page ............................................................................. 24
Figure 3: wireframe of events web page .................................................................................. 25
Figure 4: wireframe of one direction member web page ......................................................... 26
Figure 5: wireframe of photo album web page ........................................................................ 28
Figure 6: wireframe of video web page ................................................................................... 29
Figure 7: wireframe of managing video web page .................................................................. 30
Figure 8: css code for formatting home page........................................................................... 35
Figure 9: Login form user friendly messages .......................................................................... 36
Figure 10: Drop down menu in member panel ........................................................................ 37
Figure 11: Client-side validation-using type attribute-registration form ................................. 37
Figure 12: error message-invalid email address ...................................................................... 37
Figure 13: using required attribute ........................................................................................... 38
Figure 14: demonstration of usage of required attribute .......................................................... 38
Figure 15: Php code quoted from myCart.php......................................................................... 39
Figure 16: php validation code for empty fields ...................................................................... 40
Figure 17: php validation code for establishing password policy............................................ 41
Figure 18: php validation codes-3............................................................................................ 41
Figure 19: try-catch block ........................................................................................................ 42
Figure 20: ER Diagram ............................................................................................................ 45
Figure 21: final tables .............................................................................................................. 45
Figure 22: comparing design aspects ....................................................................................... 45
Figure 23: evidence for usage of HTML5 ............................................................................... 47
Figure 24: evidence for usage of CSS3.................................................................................... 47
Figure 25: evidence for usage of PHP ..................................................................................... 48
Figure 26: Evidence for using JavaScript ................................................................................ 48
Figure 27: Evidence for using jQuery ...................................................................................... 48
Figure 28: html error ................................................................................................................ 50
Figure 29: try-catch block ........................................................................................................ 51
Figure 30: validation and proper error messages ..................................................................... 52
Figure 31: cross-browser testing-design aspects...................................................................... 56
Figure 32: cross-browser testing-php functionalities ............................................................... 57
6
IT36
, Web Applications Development Individual
Figure 33: Test cases................................................................................................................ 63
Figure 34: Message types......................................................................................................... 64
Figure 35: Planned Gantt chart ................................................................................................ 73
Figure 36: Actual Gantt chart .................................................................................................. 73
Figure 38: Questionnaire part-1 ............................................................................................... 80
Figure 39: Questionnaire part-2 ............................................................................................... 81
Table of Tables
Table 1: comparison on similar websites ................................................................................. 11
Table 2: Comparison on Server-Side Scripting Languages ..................................................... 14
Table 3: Comparison on HTML, XHTL and XML ................................................................. 16
Table 4: functional requirements table .................................................................................... 32
Table 5: comparing design aspects .......................................................................................... 46
Table 6: cross-browser testing-design aspects ......................................................................... 57
Table 7: cross-browser testing-php functionalities .................................................................. 58
Table 8: Test cases ................................................................................................................... 64
Table 9: Message types ............................................................................................................ 66
7
IT36
DEVELOPMENT
Virajee Amarasinghe
ICBT KANDY CAMPUS it36
,Web Applications Development Individual
Acknowledgement
Hereby I wish to thank all those who help me to success this project. And my precious thank
goes to our lecturer, Mr. Gihan Herath, who helped and encouraged me to success this project.
And also I really appreciate the support given by my batch mates and my family members’ to
success my project. Finally I like to thank all the mentioned and non-mentioned well-wishers
who helped me to success this project.
1
IT36
,Web Applications Development Individual
Executive Summary
This report consists about website designed and developed for promoting One Direction
musical band.
First there will be an evaluation on similar websites considering their functions and advantages.
Second, comparison between client side scripting languages and also the comparison between
server-side scripting languages can be found.
For the third task, security concerns are briefly discussed and some security improvements for
the website are suggested.
Then there can be found some wireframes and explanation on functional requirements of the
website.
For the fifth task, synthesized client and server-side functionalities of proposed design are
briefly discussed.
Then ER diagram is provided. Comparison between similar websites considering the design
aspects are provided next. Some screenshots of code segments are provided as the evidence of
the work.
Then there is testing plan, testing methods and test cases. In here, test techniques that are carried
out to test the developed web solution are described.
After that, there will be a report of analyzing the feedback of questionnaires. Questionnaires
have been attached in Appendix section.
After that there will be a self-criticism report including honest assessment of the strengths and
weaknesses and future recommendations.
Detailed Gantt charts are provided with analyzing variations to show how effectively and
efficiently the project was managed.
Then there will be references and appendices at last.
User manual is provided as the format of video.
2
IT36
,Web Applications Development Individual
Table of Contents
Introduction ................................................................................................................................ 0
Executive Summary ................................................................................................................... 2
Table of Contents ....................................................................................................................... 3
Comparison on Websites ........................................................................................................... 9
Server Side and Client Side Scripting Languages ................................................................... 12
Server Side Scripting Languages ......................................................................................... 12
Comparison on Server-Side Scripting Languages ........................................................... 12
Client Side Scripting Languages .......................................................................................... 14
Comparison on Client-Side Scripting Languages ............................................................ 15
Web Security Concerns and Suggestions for Security Improvements for the Proposed Web
Application............................................................................................................................... 18
Relevant Legislation ............................................................................................................ 18
Prevention of Hacking ......................................................................................................... 18
Viruses ................................................................................................................................. 20
Identity Theft ....................................................................................................................... 20
Alternative authentication methods ..................................................................................... 21
Task 4 ....................................................................................................................................... 22
Wireframes ........................................................................................................................... 22
Home Page ....................................................................................................................... 22
Wireframe of Releases Web Page.................................................................................... 24
Wireframe of Events web page ........................................................................................ 25
Wireframe of One Direction Member web page ............................................................. 26
Wireframe of photo album web page................................................................................... 27
Wireframe of video web page .......................................................................................... 28
Wireframe of Managing Video web page ........................................................................ 29
3
IT36
,Web Applications Development Individual
Commercial web authoring tools and web stacks ................................................................ 33
What are web authoring tools? ........................................................................................ 33
What is web stack?........................................................................................................... 34
Client and server-side functionalities....................................................................................... 35
Client-side functionalities .................................................................................................... 35
Server-side functionalities ................................................................................................... 38
ER Diagram ............................................................................................................................. 43
Final tables ........................................................................................................................... 45
Task 7 ....................................................................................................................................... 46
Task 8 ....................................................................................................................................... 47
HTML .................................................................................................................................. 47
CSS ...................................................................................................................................... 47
PHP ...................................................................................................................................... 48
Java script............................................................................................................................. 48
JQuery .................................................................................................................................. 48
Task 10 ..................................................................................................................................... 50
Test plan ................................................................................................................................... 53
Main Functionalities to be tested ......................................................................................... 53
Main Pages ....................................................................................................................... 53
Login Page ....................................................................................................................... 53
Registration Page ............................................................................................................. 53
Member Panel .................................................................................................................. 53
One Direction Page .......................................................................................................... 54
Releases Page ................................................................................................................... 54
Events Page ...................................................................................................................... 54
Photos Page ...................................................................................................................... 54
Video Page ....................................................................................................................... 55
4
IT36
,Web Applications Development Individual
News Page ........................................................................................................................ 55
Store ................................................................................................................................. 55
Contact Page .................................................................................................................... 55
Admin Panel..................................................................................................................... 55
Validations ....................................................................................................................... 55
Common Functionalities for each main page .................................................................. 56
Design Aspects................................................................................................................. 56
Testing steps......................................................................................................................... 56
Cross Browser Testing ......................................................................................................... 56
Test Cases ................................................................................................................................ 59
Test Case Summary ............................................................................................................. 64
Questionnaire for Beta Testing ............................................................................................ 67
Conclusion and Future Recommendations .............................................................................. 70
Strengths of the Website ...................................................................................................... 70
Weaknesses of the website................................................................................................... 71
Future Recommendations .................................................................................................... 71
Analyzing Gantt charts ............................................................................................................ 73
Planned Gantt chart .............................................................................................................. 73
Actual Gantt chart ................................................................................................................ 73
References ................................................................................................................................ 74
Appendix .................................................................................................................................. 80
5
IT36
,Web Applications Development Individual
Table of Figures
Figure 1: wireframe-Home page .............................................................................................. 23
Figure 2: Wireframe of Releases web page ............................................................................. 24
Figure 3: wireframe of events web page .................................................................................. 25
Figure 4: wireframe of one direction member web page ......................................................... 26
Figure 5: wireframe of photo album web page ........................................................................ 28
Figure 6: wireframe of video web page ................................................................................... 29
Figure 7: wireframe of managing video web page .................................................................. 30
Figure 8: css code for formatting home page........................................................................... 35
Figure 9: Login form user friendly messages .......................................................................... 36
Figure 10: Drop down menu in member panel ........................................................................ 37
Figure 11: Client-side validation-using type attribute-registration form ................................. 37
Figure 12: error message-invalid email address ...................................................................... 37
Figure 13: using required attribute ........................................................................................... 38
Figure 14: demonstration of usage of required attribute .......................................................... 38
Figure 15: Php code quoted from myCart.php......................................................................... 39
Figure 16: php validation code for empty fields ...................................................................... 40
Figure 17: php validation code for establishing password policy............................................ 41
Figure 18: php validation codes-3............................................................................................ 41
Figure 19: try-catch block ........................................................................................................ 42
Figure 20: ER Diagram ............................................................................................................ 45
Figure 21: final tables .............................................................................................................. 45
Figure 22: comparing design aspects ....................................................................................... 45
Figure 23: evidence for usage of HTML5 ............................................................................... 47
Figure 24: evidence for usage of CSS3.................................................................................... 47
Figure 25: evidence for usage of PHP ..................................................................................... 48
Figure 26: Evidence for using JavaScript ................................................................................ 48
Figure 27: Evidence for using jQuery ...................................................................................... 48
Figure 28: html error ................................................................................................................ 50
Figure 29: try-catch block ........................................................................................................ 51
Figure 30: validation and proper error messages ..................................................................... 52
Figure 31: cross-browser testing-design aspects...................................................................... 56
Figure 32: cross-browser testing-php functionalities ............................................................... 57
6
IT36
, Web Applications Development Individual
Figure 33: Test cases................................................................................................................ 63
Figure 34: Message types......................................................................................................... 64
Figure 35: Planned Gantt chart ................................................................................................ 73
Figure 36: Actual Gantt chart .................................................................................................. 73
Figure 38: Questionnaire part-1 ............................................................................................... 80
Figure 39: Questionnaire part-2 ............................................................................................... 81
Table of Tables
Table 1: comparison on similar websites ................................................................................. 11
Table 2: Comparison on Server-Side Scripting Languages ..................................................... 14
Table 3: Comparison on HTML, XHTL and XML ................................................................. 16
Table 4: functional requirements table .................................................................................... 32
Table 5: comparing design aspects .......................................................................................... 46
Table 6: cross-browser testing-design aspects ......................................................................... 57
Table 7: cross-browser testing-php functionalities .................................................................. 58
Table 8: Test cases ................................................................................................................... 64
Table 9: Message types ............................................................................................................ 66
7
IT36
